import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
import { H as m, C as n, a as c, T as i, an as t, ao as d, ap as l, aq as s, ar as r, P as b, A as p, c as v } from "../index-sdOMz8GW.js";
import { LayoutList as T, Home as g, User as u, Settings as N, Mail as P, Bell as f, Calendar as w } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const A = () => /* @__PURE__ */ a(o, { children: [
  /* @__PURE__ */ e(
    m,
    {
      title: "Tabs",
      description: `A flexible tab component system with multiple variants, smooth
          animations, and mobile-responsive design built on Headless UI.`,
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-purple-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(T, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(n, { 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__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Underline Variant (Default)" }),
      /* @__PURE__ */ a(t, { variant: "underline", children: [
        /* @__PURE__ */ a(d, { variant: "underline", children: [
          /* @__PURE__ */ e(l, { variant: "underline", children: "Overview" }),
          /* @__PURE__ */ e(l, { variant: "underline", children: "Details" }),
          /* @__PURE__ */ e(l, { variant: "underline", children: "Settings" })
        ] }),
        /* @__PURE__ */ a(s, { 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." }) }) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Pills Variant" }),
      /* @__PURE__ */ a(t, { variant: "pills", children: [
        /* @__PURE__ */ a(d, { variant: "pills", children: [
          /* @__PURE__ */ e(l, { variant: "pills", children: "Dashboard" }),
          /* @__PURE__ */ e(l, { variant: "pills", children: "Analytics" }),
          /* @__PURE__ */ e(l, { variant: "pills", children: "Reports" })
        ] }),
        /* @__PURE__ */ a(s, { 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." }) }) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Bordered Variant" }),
      /* @__PURE__ */ a(t, { variant: "bordered", children: [
        /* @__PURE__ */ a(d, { variant: "bordered", children: [
          /* @__PURE__ */ e(l, { variant: "bordered", children: "Account" }),
          /* @__PURE__ */ e(l, { variant: "bordered", children: "Security" }),
          /* @__PURE__ */ e(l, { variant: "bordered", children: "Billing" })
        ] }),
        /* @__PURE__ */ a(s, { 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." }) }) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Solid Variant" }),
      /* @__PURE__ */ a(t, { variant: "solid", children: [
        /* @__PURE__ */ a(d, { variant: "solid", children: [
          /* @__PURE__ */ e(l, { variant: "solid", children: "Profile" }),
          /* @__PURE__ */ e(l, { variant: "solid", children: "Notifications" }),
          /* @__PURE__ */ e(l, { variant: "solid", children: "Privacy" })
        ] }),
        /* @__PURE__ */ a(s, { 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(n, { 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__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Pills with Icons" }),
      /* @__PURE__ */ a(t, { variant: "pills", children: [
        /* @__PURE__ */ a(d, { variant: "pills", children: [
          /* @__PURE__ */ e(l, { variant: "pills", icon: /* @__PURE__ */ e(g, { size: 16 }), children: "Home" }),
          /* @__PURE__ */ e(l, { variant: "pills", icon: /* @__PURE__ */ e(u, { size: 16 }), children: "Profile" }),
          /* @__PURE__ */ e(l, { variant: "pills", icon: /* @__PURE__ */ e(N, { size: 16 }), children: "Settings" })
        ] }),
        /* @__PURE__ */ a(s, { 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." }) }) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Bordered with Icons" }),
      /* @__PURE__ */ a(t, { variant: "bordered", children: [
        /* @__PURE__ */ a(d, { variant: "bordered", children: [
          /* @__PURE__ */ e(l, { variant: "bordered", icon: /* @__PURE__ */ e(P, { size: 16 }), children: "Messages" }),
          /* @__PURE__ */ e(l, { variant: "bordered", icon: /* @__PURE__ */ e(f, { size: 16 }), children: "Alerts" }),
          /* @__PURE__ */ e(l, { variant: "bordered", icon: /* @__PURE__ */ e(w, { size: 16 }), children: "Schedule" })
        ] }),
        /* @__PURE__ */ a(s, { 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(n, { 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__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Small Size" }),
      /* @__PURE__ */ a(t, { variant: "pills", children: [
        /* @__PURE__ */ a(d, { variant: "pills", children: [
          /* @__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(s, { 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." }) }) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Large Size" }),
      /* @__PURE__ */ a(t, { variant: "pills", children: [
        /* @__PURE__ */ a(d, { variant: "pills", children: [
          /* @__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(s, { 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(n, { 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__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Disabled Tab" }),
      /* @__PURE__ */ a(t, { variant: "pills", children: [
        /* @__PURE__ */ a(d, { variant: "pills", children: [
          /* @__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(s, { 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." }) }) })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ a("div", { children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Color Variants" }),
      /* @__PURE__ */ a(t, { variant: "underline", children: [
        /* @__PURE__ */ a(d, { variant: "underline", children: [
          /* @__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(s, { 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(
    b,
    {
      componentName: "TabGroup",
      title: "Tab Playground",
      defaultValues: {
        variant: "solid",
        defaultIndex: 0
      },
      excludeProps: ["onChange", "selectedIndex", "className"],
      children: (h) => /* @__PURE__ */ a(t, { ...h, children: [
        /* @__PURE__ */ a(d, { children: [
          /* @__PURE__ */ e(l, { children: "Tab 1" }),
          /* @__PURE__ */ e(l, { children: "Tab 2" }),
          /* @__PURE__ */ e(l, { children: "Tab 3" })
        ] }),
        /* @__PURE__ */ a(s, { children: [
          /* @__PURE__ */ e(r, { children: "Content 1" }),
          /* @__PURE__ */ e(r, { children: "Content 2" }),
          /* @__PURE__ */ e(r, { children: "Content 3" })
        ] })
      ] })
    }
  ),
  /* @__PURE__ */ e(p, { componentName: "Tab" }),
  /* @__PURE__ */ e(n, { 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(
    v,
    {
      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>`
    }
  ) }) }) })
] });
export {
  A as default
};
