{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-full-width",
  "type": "registry:component",
  "title": "Tabs Full Width",
  "description": "Tabs Full Width",
  "files": [
    {
      "path": "registry/ui-basic/TabsFullWidth.tsx",
      "content": "import React, { useEffect, useRef, useState } from \"react\";\n\nexport default function TabsFullWidth() {\n\tconst [tabSelected, setTabSelected] = useState({\n\t\tcurrentTab: 1,\n\t\tnoTabs: 3,\n\t});\n\n\tconst wrapperRef = useRef(null);\n\n\tconst handleKeyDown = (e) => {\n\t\tif (e.keyCode === 39) {\n\t\t\tif (wrapperRef.current && wrapperRef.current.contains(e.target)) {\n\t\t\t\tif (\n\t\t\t\t\ttabSelected.currentTab >= 1 &&\n\t\t\t\t\ttabSelected.currentTab < tabSelected.noTabs\n\t\t\t\t) {\n\t\t\t\t\tsetTabSelected({\n\t\t\t\t\t\t...tabSelected,\n\t\t\t\t\t\tcurrentTab: tabSelected.currentTab + 1,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tsetTabSelected({\n\t\t\t\t\t\t...tabSelected,\n\t\t\t\t\t\tcurrentTab: 1,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (e.keyCode === 37) {\n\t\t\tif (wrapperRef.current && wrapperRef.current.contains(e.target)) {\n\t\t\t\tif (\n\t\t\t\t\ttabSelected.currentTab > 1 &&\n\t\t\t\t\ttabSelected.currentTab <= tabSelected.noTabs\n\t\t\t\t) {\n\t\t\t\t\tsetTabSelected({\n\t\t\t\t\t\t...tabSelected,\n\t\t\t\t\t\tcurrentTab: tabSelected.currentTab - 1,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tsetTabSelected({\n\t\t\t\t\t\t...tabSelected,\n\t\t\t\t\t\tcurrentTab: tabSelected.noTabs,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{/*<!-- Component: Basic lg sized tab full width --> */}\n\t\t\t<section className=\"max-w-full\" aria-multiselectable=\"false\">\n\t\t\t\t<ul\n\t\t\t\t\tclassName=\"flex items-center border-b border-slate-200\"\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\tref={wrapperRef}\n\t\t\t\t>\n\t\t\t\t\t<li className=\"flex-1\" role=\"presentation \">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={`-mb-px inline-flex h-12 w-full items-center justify-center gap-2 whitespace-nowrap rounded-t border-b-2 px-6 text-sm font-medium tracking-wide transition duration-300 hover:bg-emerald-50 hover:stroke-emerald-600 focus:bg-emerald-50 focus-visible:outline-hidden disabled:cursor-not-allowed ${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 1\n\t\t\t\t\t\t\t\t\t? \"border-emerald-500 stroke-emerald-500 text-emerald-500 hover:border-emerald-600  hover:text-emerald-600 focus:border-emerald-700 focus:stroke-emerald-700 focus:text-emerald-700 disabled:border-slate-500\"\n\t\t\t\t\t\t\t\t\t: \"justify-self-center border-transparent stroke-slate-700 text-slate-700 hover:border-emerald-500 hover:text-emerald-500 focus:border-emerald-600 focus:stroke-emerald-600 focus:text-emerald-600 disabled:text-slate-500\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tid=\"tab-label-1a\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-setsize=\"3\"\n\t\t\t\t\t\t\taria-posinset=\"1\"\n\t\t\t\t\t\t\ttabindex={`${tabSelected.currentTab === 1 ? \"0\" : \"-1\"}`}\n\t\t\t\t\t\t\taria-controls=\"tab-panel-1a\"\n\t\t\t\t\t\t\taria-selected={`${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 1 ? \"true\" : \"false\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tsetTabSelected({ ...tabSelected, currentTab: 1 })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>Tab 1</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li className=\"flex-1\" role=\"presentation \">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={`-mb-px inline-flex h-12 w-full items-center justify-center gap-2 whitespace-nowrap rounded-t border-b-2 px-6 text-sm font-medium tracking-wide transition duration-300 hover:bg-emerald-50 hover:stroke-emerald-600 focus:bg-emerald-50 focus-visible:outline-hidden disabled:cursor-not-allowed ${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 2\n\t\t\t\t\t\t\t\t\t? \"border-emerald-500 stroke-emerald-500 text-emerald-500 hover:border-emerald-600  hover:text-emerald-600 focus:border-emerald-700 focus:stroke-emerald-700 focus:text-emerald-700 disabled:border-slate-500\"\n\t\t\t\t\t\t\t\t\t: \"justify-self-center border-transparent stroke-slate-700 text-slate-700 hover:border-emerald-500 hover:text-emerald-500 focus:border-emerald-600 focus:stroke-emerald-600 focus:text-emerald-600 disabled:text-slate-500\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tid=\"tab-label-2a\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-setsize=\"3\"\n\t\t\t\t\t\t\taria-posinset=\"2\"\n\t\t\t\t\t\t\ttabindex={`${tabSelected.currentTab === 2 ? \"0\" : \"-1\"}`}\n\t\t\t\t\t\t\taria-controls=\"tab-panel-2a\"\n\t\t\t\t\t\t\taria-selected={`${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 2 ? \"true\" : \"false\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tsetTabSelected({ ...tabSelected, currentTab: 2 })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>Tab 2</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li className=\"flex-1\" role=\"presentation \">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={`-mb-px inline-flex h-12 w-full items-center justify-center gap-2 whitespace-nowrap rounded-t border-b-2 px-6 text-sm font-medium tracking-wide transition duration-300 hover:bg-emerald-50 hover:stroke-emerald-600 focus:bg-emerald-50 focus-visible:outline-hidden disabled:cursor-not-allowed ${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 3\n\t\t\t\t\t\t\t\t\t? \"border-emerald-500 stroke-emerald-500 text-emerald-500 hover:border-emerald-600  hover:text-emerald-600 focus:border-emerald-700 focus:stroke-emerald-700 focus:text-emerald-700 disabled:border-slate-500\"\n\t\t\t\t\t\t\t\t\t: \"justify-self-center border-transparent stroke-slate-700 text-slate-700 hover:border-emerald-500 hover:text-emerald-500 focus:border-emerald-600 focus:stroke-emerald-600 focus:text-emerald-600 disabled:text-slate-500\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tid=\"tab-label-3a\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-setsize=\"3\"\n\t\t\t\t\t\t\taria-posinset=\"3\"\n\t\t\t\t\t\t\ttabindex={`${tabSelected.currentTab === 3 ? \"0\" : \"-1\"}`}\n\t\t\t\t\t\t\taria-controls=\"tab-panel-3a\"\n\t\t\t\t\t\t\taria-selected={`${\n\t\t\t\t\t\t\t\ttabSelected.currentTab === 3 ? \"true\" : \"false\"\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\tsetTabSelected({ ...tabSelected, currentTab: 3 })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>Tab 3</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<div className=\"\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`px-6 py-4 ${\n\t\t\t\t\t\t\ttabSelected.currentTab === 1 ? \"\" : \"hidden\"\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tid=\"tab-panel-1a\"\n\t\t\t\t\t\taria-hidden={`${tabSelected.currentTab === 1 ? \"true\" : \"false\"}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\taria-labelledby=\"tab-label-1a\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tWhat is the recipe for successful achievement? To my mind\n\t\t\t\t\t\t\tthere are just four essential ingredients: Choose a career\n\t\t\t\t\t\t\tyou love, give it the best there is in you, seize your\n\t\t\t\t\t\t\topportunities, and be a member of the team.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`px-6 py-4 ${\n\t\t\t\t\t\t\ttabSelected.currentTab === 2 ? \"\" : \"hidden\"\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tid=\"tab-panel-2a\"\n\t\t\t\t\t\taria-hidden={`${tabSelected.currentTab === 2 ? \"true\" : \"false\"}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\taria-labelledby=\"tab-label-2a\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tOne must be entirely sensitive to the structure of the\n\t\t\t\t\t\t\tmaterial that one is handling. One must yield to it in tiny\n\t\t\t\t\t\t\tdetails of execution, perhaps the handling of the surface\n\t\t\t\t\t\t\tor grain, and one must master it as a whole.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`px-6 py-4 ${\n\t\t\t\t\t\t\ttabSelected.currentTab === 3 ? \"\" : \"hidden\"\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tid=\"tab-panel-3a\"\n\t\t\t\t\t\taria-hidden={`${tabSelected.currentTab === 3 ? \"true\" : \"false\"}`}\n\t\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\t\taria-labelledby=\"tab-label-3a\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tEven though there is no certainty that the expected results\n\t\t\t\t\t\t\tof our work will manifest, we have to remain committed to\n\t\t\t\t\t\t\tour work and duties; because, even if the results are\n\t\t\t\t\t\t\tslated to arrive, they cannot do so without the performance\n\t\t\t\t\t\t\tof work.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t{/*<!-- End Basic lg sized tab full width --> */}\n\t\t</>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}