@e-burgos/tucu-ui 2.0.2 → 2.0.4

package/documentation/TabSection-CLig02Jq.js

@@ -0,0 +1,84 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-QnI4b7wS.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Tabs"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A flexible tab component system with multiple variants, smooth animations, and mobile-responsive design built on Headless UI."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-8",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Underline Variant (Default)"}),a.jsxs(e.TabGroup,{variant:"underline",children:[a.jsxs(e.TabList,{variant:"underline",children:[a.jsx(e.TabItem,{variant:"underline",children:"Overview"}),a.jsx(e.TabItem,{variant:"underline",children:"Details"}),a.jsx(e.TabItem,{variant:"underline",children:"Settings"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Overview content with clean underline design."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Detailed information with professional styling."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Settings panel with modern appearance."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Pills Variant"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",children:"Dashboard"}),a.jsx(e.TabItem,{variant:"pills",children:"Analytics"}),a.jsx(e.TabItem,{variant:"pills",children:"Reports"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Dashboard with rounded pill tabs for a modern look."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Analytics data with smooth transitions."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Reports section with clean design."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Bordered Variant"}),a.jsxs(e.TabGroup,{variant:"bordered",children:[a.jsxs(e.TabList,{variant:"bordered",children:[a.jsx(e.TabItem,{variant:"bordered",children:"Account"}),a.jsx(e.TabItem,{variant:"bordered",children:"Security"}),a.jsx(e.TabItem,{variant:"bordered",children:"Billing"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Account settings with bordered tab style."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Security options with clear visual distinction."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Billing information with professional appearance."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Solid Variant"}),a.jsxs(e.TabGroup,{variant:"solid",children:[a.jsxs(e.TabList,{variant:"solid",children:[a.jsx(e.TabItem,{variant:"solid",children:"Profile"}),a.jsx(e.TabItem,{variant:"solid",children:"Notifications"}),a.jsx(e.TabItem,{variant:"solid",children:"Privacy"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Profile section with solid background tabs."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Notifications center with modern design."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Privacy settings with clean interface."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"With Icons",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Pills with Icons"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.Home,{size:16}),children:"Home"}),a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.User,{size:16}),children:"Profile"}),a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.Settings,{size:16}),children:"Settings"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Home dashboard content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"User profile information."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Application settings."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Bordered with Icons"}),a.jsxs(e.TabGroup,{variant:"bordered",children:[a.jsxs(e.TabList,{variant:"bordered",children:[a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Mail,{size:16}),children:"Messages"}),a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Bell,{size:16}),children:"Alerts"}),a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Calendar,{size:16}),children:"Schedule"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Your messages and conversations."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"System alerts and notifications."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Calendar and scheduled events."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Small Size"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 1"}),a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 2"}),a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Small size tabs content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Compact design for space-constrained layouts."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Perfect for dense information displays."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Large Size"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 1"}),a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 2"}),a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Large size tabs content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Prominent design for main navigation."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Great for primary interface elements."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"States",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Disabled Tab"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",children:"Active"}),a.jsx(e.TabItem,{variant:"pills",disabled:!0,children:"Disabled"}),a.jsx(e.TabItem,{variant:"pills",children:"Available"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Active tab content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"This tab is disabled."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Available tab content."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Color Variants"}),a.jsxs(e.TabGroup,{variant:"underline",children:[a.jsxs(e.TabList,{variant:"underline",children:[a.jsx(e.TabItem,{variant:"underline",color:"primary",children:"Primary"}),a.jsx(e.TabItem,{variant:"underline",color:"success",children:"Success"}),a.jsx(e.TabItem,{variant:"underline",color:"danger",children:"Danger"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Primary color theme."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Success color theme."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Danger color theme."})})})]})]})]})]})})})}),a.jsx(e.AutoPropsTable,{componentName:"Tab"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import {
+  TabGroup,
+  TabList,
+  TabItem,
+  TabPanels,
+  TabPanel,
+} from '@e-burgos/tucu-ui';
+import { Home, User, Settings } from 'lucide-react';
+
+// Basic underline tabs
+<TabGroup variant="underline">
+  <TabList variant="underline">
+    <TabItem variant="underline">Tab 1</TabItem>
+    <TabItem variant="underline">Tab 2</TabItem>
+    <TabItem variant="underline">Tab 3</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Content 1</TabPanel>
+    <TabPanel>Content 2</TabPanel>
+    <TabPanel>Content 3</TabPanel>
+  </TabPanels>
+</TabGroup>
+
+// Pills variant with icons
+<TabGroup variant="pills">
+  <TabList variant="pills">
+    <TabItem variant="pills" icon={<Home size={16} />}>
+      Home
+    </TabItem>
+    <TabItem variant="pills" icon={<User size={16} />}>
+      Profile
+    </TabItem>
+    <TabItem variant="pills" icon={<Settings size={16} />}>
+      Settings
+    </TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Home content</TabPanel>
+    <TabPanel>Profile content</TabPanel>
+    <TabPanel>Settings content</TabPanel>
+  </TabPanels>
+</TabGroup>
+
+// Bordered variant with sizes
+<TabGroup variant="bordered">
+  <TabList variant="bordered">
+    <TabItem variant="bordered" size="small">Small</TabItem>
+    <TabItem variant="bordered" size="medium">Medium</TabItem>
+    <TabItem variant="bordered" size="large">Large</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Small content</TabPanel>
+    <TabPanel>Medium content</TabPanel>
+    <TabPanel>Large content</TabPanel>
+  </TabPanels>
+</TabGroup>
+
+// Solid variant with disabled tab
+<TabGroup variant="solid">
+  <TabList variant="solid">
+    <TabItem variant="solid">Active</TabItem>
+    <TabItem variant="solid" disabled>Disabled</TabItem>
+    <TabItem variant="solid">Available</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Active content</TabPanel>
+    <TabPanel>Disabled content</TabPanel>
+    <TabPanel>Available content</TabPanel>
+  </TabPanels>
+</TabGroup>
+
+// With color variants
+<TabGroup variant="underline">
+  <TabList variant="underline">
+    <TabItem variant="underline" color="primary">Primary</TabItem>
+    <TabItem variant="underline" color="success">Success</TabItem>
+    <TabItem variant="underline" color="danger">Danger</TabItem>
+  </TabList>
+  <TabPanels>
+    <TabPanel>Primary content</TabPanel>
+    <TabPanel>Success content</TabPanel>
+    <TabPanel>Danger content</TabPanel>
+  </TabPanels>
+</TabGroup>`})})})})]});exports.default=i;

package/{TabSection-Vjm9QogR.mjs → documentation/TabSection-L8vvzdZq.js}

@@ -1,10 +1,10 @@
-import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { T as i, C as l, a as c, a8 as t, a9 as s, aa as n, ab as d, ac as r, B as b, c as p } from "./index-HwvOEWI7.mjs";
-import { Home as v, User as T, Settings as u, Mail as g, Bell as N, Calendar as P } from "lucide-react";
+import { jsxs as a, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { T as i, C as n, a as d, ak as t, al as s, am as l, an as c, ao as r, A as o, c as m } from "../index-B6CStnMG.js";
+import { Home as b, User as p, Settings as v, Mail as T, Bell as g, Calendar as u } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const C = () => /* @__PURE__ */ a(m, { children: [
+const S = () => /* @__PURE__ */ a(h, { children: [
   /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
     /* @__PURE__ */ e(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Tabs" }),
     /* @__PURE__ */ e(
@@ -16,19 +16,19 @@ const C = () => /* @__PURE__ */ a(m, { children: [
       }
     )
   ] }),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-8", children: [
     /* @__PURE__ */ a("div", { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Underline Variant (Default)" }),
       /* @__PURE__ */ a(t, { variant: "underline", children: [
         /* @__PURE__ */ a(s, { variant: "underline", children: [
-          /* @__PURE__ */ e(n, { variant: "underline", children: "Overview" }),
-          /* @__PURE__ */ e(n, { variant: "underline", children: "Details" }),
-          /* @__PURE__ */ e(n, { variant: "underline", children: "Settings" })
+          /* @__PURE__ */ e(l, { variant: "underline", children: "Overview" }),
+          /* @__PURE__ */ e(l, { variant: "underline", children: "Details" }),
+          /* @__PURE__ */ e(l, { variant: "underline", children: "Settings" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Overview content with clean underline design." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Detailed information with professional styling." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Settings panel with modern appearance." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Overview content with clean underline design." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Detailed information with professional styling." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Settings panel with modern appearance." }) }) })
         ] })
       ] })
     ] }),
@@ -36,14 +36,14 @@ const C = () => /* @__PURE__ */ a(m, { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Pills Variant" }),
       /* @__PURE__ */ a(t, { variant: "pills", children: [
         /* @__PURE__ */ a(s, { variant: "pills", children: [
-          /* @__PURE__ */ e(n, { variant: "pills", children: "Dashboard" }),
-          /* @__PURE__ */ e(n, { variant: "pills", children: "Analytics" }),
-          /* @__PURE__ */ e(n, { variant: "pills", children: "Reports" })
+          /* @__PURE__ */ e(l, { variant: "pills", children: "Dashboard" }),
+          /* @__PURE__ */ e(l, { variant: "pills", children: "Analytics" }),
+          /* @__PURE__ */ e(l, { variant: "pills", children: "Reports" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Dashboard with rounded pill tabs for a modern look." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Analytics data with smooth transitions." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Reports section with clean design." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Dashboard with rounded pill tabs for a modern look." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Analytics data with smooth transitions." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Reports section with clean design." }) }) })
         ] })
       ] })
     ] }),
@@ -51,14 +51,14 @@ const C = () => /* @__PURE__ */ a(m, { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Bordered Variant" }),
       /* @__PURE__ */ a(t, { variant: "bordered", children: [
         /* @__PURE__ */ a(s, { variant: "bordered", children: [
-          /* @__PURE__ */ e(n, { variant: "bordered", children: "Account" }),
-          /* @__PURE__ */ e(n, { variant: "bordered", children: "Security" }),
-          /* @__PURE__ */ e(n, { variant: "bordered", children: "Billing" })
+          /* @__PURE__ */ e(l, { variant: "bordered", children: "Account" }),
+          /* @__PURE__ */ e(l, { variant: "bordered", children: "Security" }),
+          /* @__PURE__ */ e(l, { variant: "bordered", children: "Billing" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Account settings with bordered tab style." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Security options with clear visual distinction." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Billing information with professional appearance." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Account settings with bordered tab style." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Security options with clear visual distinction." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Billing information with professional appearance." }) }) })
         ] })
       ] })
     ] }),
@@ -66,31 +66,31 @@ const C = () => /* @__PURE__ */ a(m, { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Solid Variant" }),
       /* @__PURE__ */ a(t, { variant: "solid", children: [
         /* @__PURE__ */ a(s, { variant: "solid", children: [
-          /* @__PURE__ */ e(n, { variant: "solid", children: "Profile" }),
-          /* @__PURE__ */ e(n, { variant: "solid", children: "Notifications" }),
-          /* @__PURE__ */ e(n, { variant: "solid", children: "Privacy" })
+          /* @__PURE__ */ e(l, { variant: "solid", children: "Profile" }),
+          /* @__PURE__ */ e(l, { variant: "solid", children: "Notifications" }),
+          /* @__PURE__ */ e(l, { variant: "solid", children: "Privacy" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Profile section with solid background tabs." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Notifications center with modern design." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Privacy settings with clean interface." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Profile section with solid background tabs." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Notifications center with modern design." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Privacy settings with clean interface." }) }) })
         ] })
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "With Icons", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "With Icons", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
     /* @__PURE__ */ a("div", { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Pills with Icons" }),
       /* @__PURE__ */ a(t, { variant: "pills", children: [
         /* @__PURE__ */ a(s, { variant: "pills", children: [
-          /* @__PURE__ */ e(n, { variant: "pills", icon: /* @__PURE__ */ e(v, { size: 16 }), children: "Home" }),
-          /* @__PURE__ */ e(n, { variant: "pills", icon: /* @__PURE__ */ e(T, { size: 16 }), children: "Profile" }),
-          /* @__PURE__ */ e(n, { variant: "pills", icon: /* @__PURE__ */ e(u, { size: 16 }), children: "Settings" })
+          /* @__PURE__ */ e(l, { variant: "pills", icon: /* @__PURE__ */ e(b, { size: 16 }), children: "Home" }),
+          /* @__PURE__ */ e(l, { variant: "pills", icon: /* @__PURE__ */ e(p, { size: 16 }), children: "Profile" }),
+          /* @__PURE__ */ e(l, { variant: "pills", icon: /* @__PURE__ */ e(v, { size: 16 }), children: "Settings" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Home dashboard content." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "User profile information." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Application settings." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Home dashboard content." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "User profile information." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Application settings." }) }) })
         ] })
       ] })
     ] }),
@@ -98,31 +98,31 @@ const C = () => /* @__PURE__ */ a(m, { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Bordered with Icons" }),
       /* @__PURE__ */ a(t, { variant: "bordered", children: [
         /* @__PURE__ */ a(s, { variant: "bordered", children: [
-          /* @__PURE__ */ e(n, { variant: "bordered", icon: /* @__PURE__ */ e(g, { size: 16 }), children: "Messages" }),
-          /* @__PURE__ */ e(n, { variant: "bordered", icon: /* @__PURE__ */ e(N, { size: 16 }), children: "Alerts" }),
-          /* @__PURE__ */ e(n, { variant: "bordered", icon: /* @__PURE__ */ e(P, { size: 16 }), children: "Schedule" })
+          /* @__PURE__ */ e(l, { variant: "bordered", icon: /* @__PURE__ */ e(T, { size: 16 }), children: "Messages" }),
+          /* @__PURE__ */ e(l, { variant: "bordered", icon: /* @__PURE__ */ e(g, { size: 16 }), children: "Alerts" }),
+          /* @__PURE__ */ e(l, { variant: "bordered", icon: /* @__PURE__ */ e(u, { size: 16 }), children: "Schedule" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Your messages and conversations." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "System alerts and notifications." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Calendar and scheduled events." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Your messages and conversations." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "System alerts and notifications." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Calendar and scheduled events." }) }) })
         ] })
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
     /* @__PURE__ */ a("div", { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Small Size" }),
       /* @__PURE__ */ a(t, { variant: "pills", children: [
         /* @__PURE__ */ a(s, { variant: "pills", children: [
-          /* @__PURE__ */ e(n, { variant: "pills", size: "small", children: "Tab 1" }),
-          /* @__PURE__ */ e(n, { variant: "pills", size: "small", children: "Tab 2" }),
-          /* @__PURE__ */ e(n, { variant: "pills", size: "small", children: "Tab 3" })
+          /* @__PURE__ */ e(l, { variant: "pills", size: "small", children: "Tab 1" }),
+          /* @__PURE__ */ e(l, { variant: "pills", size: "small", children: "Tab 2" }),
+          /* @__PURE__ */ e(l, { variant: "pills", size: "small", children: "Tab 3" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Small size tabs content." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Compact design for space-constrained layouts." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Perfect for dense information displays." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Small size tabs content." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Compact design for space-constrained layouts." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Perfect for dense information displays." }) }) })
         ] })
       ] })
     ] }),
@@ -130,31 +130,31 @@ const C = () => /* @__PURE__ */ a(m, { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Large Size" }),
       /* @__PURE__ */ a(t, { variant: "pills", children: [
         /* @__PURE__ */ a(s, { variant: "pills", children: [
-          /* @__PURE__ */ e(n, { variant: "pills", size: "large", children: "Tab 1" }),
-          /* @__PURE__ */ e(n, { variant: "pills", size: "large", children: "Tab 2" }),
-          /* @__PURE__ */ e(n, { variant: "pills", size: "large", children: "Tab 3" })
+          /* @__PURE__ */ e(l, { variant: "pills", size: "large", children: "Tab 1" }),
+          /* @__PURE__ */ e(l, { variant: "pills", size: "large", children: "Tab 2" }),
+          /* @__PURE__ */ e(l, { variant: "pills", size: "large", children: "Tab 3" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Large size tabs content." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Prominent design for main navigation." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Great for primary interface elements." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Large size tabs content." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Prominent design for main navigation." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Great for primary interface elements." }) }) })
         ] })
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "States", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "States", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
     /* @__PURE__ */ a("div", { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Disabled Tab" }),
       /* @__PURE__ */ a(t, { variant: "pills", children: [
         /* @__PURE__ */ a(s, { variant: "pills", children: [
-          /* @__PURE__ */ e(n, { variant: "pills", children: "Active" }),
-          /* @__PURE__ */ e(n, { variant: "pills", disabled: !0, children: "Disabled" }),
-          /* @__PURE__ */ e(n, { variant: "pills", children: "Available" })
+          /* @__PURE__ */ e(l, { variant: "pills", children: "Active" }),
+          /* @__PURE__ */ e(l, { variant: "pills", disabled: !0, children: "Disabled" }),
+          /* @__PURE__ */ e(l, { variant: "pills", children: "Available" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Active tab content." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "This tab is disabled." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Available tab content." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Active tab content." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "This tab is disabled." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Available tab content." }) }) })
         ] })
       ] })
     ] }),
@@ -162,81 +162,21 @@ const C = () => /* @__PURE__ */ a(m, { children: [
       /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Color Variants" }),
       /* @__PURE__ */ a(t, { variant: "underline", children: [
         /* @__PURE__ */ a(s, { variant: "underline", children: [
-          /* @__PURE__ */ e(n, { variant: "underline", color: "primary", children: "Primary" }),
-          /* @__PURE__ */ e(n, { variant: "underline", color: "success", children: "Success" }),
-          /* @__PURE__ */ e(n, { variant: "underline", color: "danger", children: "Danger" })
+          /* @__PURE__ */ e(l, { variant: "underline", color: "primary", children: "Primary" }),
+          /* @__PURE__ */ e(l, { variant: "underline", color: "success", children: "Success" }),
+          /* @__PURE__ */ e(l, { variant: "underline", color: "danger", children: "Danger" })
         ] }),
-        /* @__PURE__ */ a(d, { children: [
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Primary color theme." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Success color theme." }) }) }),
-          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(l, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Danger color theme." }) }) })
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Primary color theme." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Success color theme." }) }) }),
+          /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(n, { className: "p-4", children: /* @__PURE__ */ e(i, { tag: "p", children: "Danger color theme." }) }) })
         ] })
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(b, { columns: [
-    {
-      key: "prop",
-      label: "Prop",
-      render: (o) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(o) })
-    },
-    {
-      key: "type",
-      label: "Type",
-      render: (o) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(o) })
-    },
-    {
-      key: "default",
-      label: "Default",
-      render: (o) => {
-        const h = String(o);
-        return h === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: h });
-      }
-    },
-    {
-      key: "description",
-      label: "Description"
-    }
-  ], data: [
-    {
-      prop: "variant",
-      type: "'underline' | 'pills' | 'bordered' | 'solid'",
-      default: "'underline'",
-      description: "Visual style variant of the tabs"
-    },
-    {
-      prop: "size",
-      type: "'small' | 'medium' | 'large'",
-      default: "'medium'",
-      description: "Size of the tab items"
-    },
-    {
-      prop: "color",
-      type: "'primary' | 'secondary' | 'success' | 'danger'",
-      default: "-",
-      description: "Color theme for unselected tabs"
-    },
-    {
-      prop: "icon",
-      type: "React.ReactNode",
-      default: "-",
-      description: "Icon to display before tab label"
-    },
-    {
-      prop: "disabled",
-      type: "boolean",
-      default: "false",
-      description: "Whether the tab is disabled"
-    },
-    {
-      prop: "showMobileIndicator",
-      type: "boolean",
-      default: "true",
-      description: "Show indicator on mobile devices"
-    }
-  ] }) }) }) }),
-  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    p,
+  /* @__PURE__ */ e(o, { componentName: "Tab" }),
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    m,
     {
       language: "tsx",
       code: `import {
@@ -327,5 +267,5 @@ import { Home, User, Settings } from 'lucide-react';
   ) }) }) })
 ] });
 export {
-  C as default
+  S as default
 };