@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/SystemOverviewSection-BigtfVY7.js

@@ -1,93 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { T as r, C as n, J as l } from "../index-B919yoKU.js";
-import { Router as d, Menu as c, Layers3 as m, Box as u } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const v = () => /* @__PURE__ */ a("div", { className: "space-y-8", children: [
-  /* @__PURE__ */ a("div", { className: "text-center", children: [
-    /* @__PURE__ */ e(
-      r,
-      {
-        tag: "h2",
-        className: "mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",
-        children: "System Overview"
-      }
-    ),
-    /* @__PURE__ */ e(
-      r,
-      {
-        tag: "p",
-        className: "text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",
-        children: "Built on React Router with automatic menu generation and nested route support. Supports both Standalone and Micro Frontend (MFE) architectural patterns."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", children: [
-    {
-      icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-      title: "React Router Integration",
-      description: "Built on React Router v6 with full compatibility and modern routing features",
-      features: ["Browser History", "Nested Routes", "Route Guards"],
-      color: "from-blue-500 to-cyan-500"
-    },
-    {
-      icon: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-      title: "Automatic Navigation",
-      description: "Generate navigation menus automatically from route configuration",
-      features: ["Auto Sidebar", "Breadcrumb Support", "Active States"],
-      color: "from-green-500 to-emerald-500"
-    },
-    {
-      icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-      title: "Nested Route Support",
-      description: "Support for unlimited nesting levels with dropdown menus and sub-navigation",
-      features: ["Multi-level", "Dropdown Menus", "Hierarchical"],
-      color: "from-purple-500 to-indigo-500"
-    },
-    {
-      icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
-      title: "Architectural Patterns",
-      description: "Support for both Standalone and Micro Frontend (MFE) patterns with type-safe configuration",
-      features: ["Standalone", "MFE", "Type-Safe"],
-      color: "from-orange-500 to-amber-500"
-    }
-  ].map((t, o) => /* @__PURE__ */ e(
-    n,
-    {
-      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
-      children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: `p-3 rounded-xl bg-linear-to-br ${t.color} text-white shadow-lg group-hover:scale-110 transition-all duration-300`,
-              children: t.icon
-            }
-          ),
-          /* @__PURE__ */ e(
-            r,
-            {
-              tag: "h3",
-              className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
-              children: t.title
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            tag: "p",
-            className: "text-gray-600 dark:text-gray-400 leading-relaxed",
-            children: t.description
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: t.features.map((i, s) => /* @__PURE__ */ e(l, { variant: "outline", className: "text-xs", children: i }, s)) })
-      ] })
-    },
-    o
-  )) })
-] });
-export {
-  v as default
-};

package/documentation/TabModalSection-BkJ1YqWc.js

@@ -1,51 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),t=require("../index-COj1N7FC.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[l,a]=i.useState(!1),[r,n]=i.useState(!1),[c,o]=i.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"TabModal"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A modal dialog with built-in tab navigation, header with icon/badge, expandable footer, and mobile-first responsive design."})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Tabs"}),e.jsx(t.Button,{onClick:()=>n(!0),children:"Open TabModal (Tabs)"}),r&&e.jsx(t.TabModal,{icon:s.Activity,title:"Dashboard",subtitle:"View your activity and stats",badgeHeader:"LIVE",badgeHeaderClassName:"text-green-600 bg-green-100 border-green-300",tabs:[{icon:s.BarChart3,name:"Overview",content:e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h5",children:"Overview Tab"}),e.jsx(t.Typography,{tag:"p",children:"This is the overview content with charts and metrics."})]})},{icon:s.Settings,name:"Settings",content:e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h5",children:"Settings Tab"}),e.jsx(t.Typography,{tag:"p",children:"Configure your preferences here."})]})}],footerLabel:"Last updated: 2 minutes ago",successButton:{label:"Save",onClick:()=>n(!1)},onClose:()=>n(!1)})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Direct Content"}),e.jsx(t.Button,{onClick:()=>o(!0),children:"Open TabModal (Content)"}),c&&e.jsx(t.TabModal,{icon:s.Settings,title:"Preferences",subtitle:"Manage your account settings",content:e.jsx("div",{className:"space-y-4",children:e.jsxs(t.Typography,{tag:"p",children:["When you pass the ",e.jsx("code",{children:"content"})," prop directly, the tab bar is hidden and this content fills the body."]})}),onClose:()=>o(!1)})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Minimal (No Tabs, No Content)"}),e.jsx(t.Button,{onClick:()=>a(!0),children:"Open Minimal TabModal"}),l&&e.jsx(t.TabModal,{title:"Confirmation",successButton:{label:"Confirm",onClick:()=>a(!1)},closeButton:{label:"Cancel",onClick:()=>a(!1)},onClose:()=>a(!1)})]})]})})})}),e.jsx(t.AutoPropsTable,{componentName:"TabModal"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { TabModal } from '@e-burgos/tucu-ui';
-import { Activity, BarChart3, Settings } from 'lucide-react';
-import { useState } from 'react';
-
-function MyComponent() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(true)}>Open</button>
-      {isOpen && (
-        <TabModal
-          icon={Activity}
-          title="Dashboard"
-          subtitle="Activity overview"
-          badgeHeader="LIVE"
-          tabs={[
-            {
-              icon: BarChart3,
-              name: 'Overview',
-              content: <div>Overview content</div>,
-            },
-            {
-              icon: Settings,
-              name: 'Settings',
-              content: <div>Settings content</div>,
-            },
-          ]}
-          footerLabel="Last updated: 2 min ago"
-          successButton={{ label: 'Save', onClick: () => setIsOpen(false) }}
-          onClose={() => setIsOpen(false)}
-        />
-      )}
-    </>
-  );
-}
-
-// Direct content (no tabs)
-<TabModal
-  title="Preferences"
-  content={<div>Direct body content</div>}
-  onClose={() => setIsOpen(false)}
-/>
-
-// With expandable footer label
-<TabModal
-  title="Details"
-  content={<div>Body</div>}
-  footerLabel="Long description that expands on click..."
-  onClose={() => setIsOpen(false)}
-/>`})})})})]})};exports.default=d;

package/documentation/TabSection-Di0SYL7X.js

@@ -1,84 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-COj1N7FC.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/documentation/TabSelectSection-BpbqlP7n.js

@@ -1,100 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../index-COj1N7FC.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");const g=()=>{const[i,p]=r.useState(0),[d,m]=r.useState(0),[s,x]=r.useState(0),c=[{title:"Dashboard",path:"dashboard"},{title:"Analytics",path:"analytics"},{title:"Reports",path:"reports"},{title:"Settings",path:"settings"}],o=[{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(n.Home,{size:16}),"Home"]}),path:"home"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(n.User,{size:16}),"Profile"]}),path:"profile"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(n.Settings,{size:16}),"Settings"]}),path:"settings"}],l=[{title:"Orders",path:"orders"},{title:"Products",path:"products"},{title:"Customers",path:"customers"},{title:"Analytics",path:"analytics"},{title:"Marketing",path:"marketing"},{title:"Reports",path:"reports"},{title:"Integrations",path:"integrations"},{title:"Settings",path:"settings"}],h=[{prop:"title",type:"React.ReactNode",default:"required",description:"Tab label (can be text, JSX, or components)"},{prop:"path",type:"string",default:"required",description:"Unique identifier/route path for the tab"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"TabSelect"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A mobile-friendly dropdown tab selector with smooth animations and transitions, designed for responsive tab navigation in constrained spaces."})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic TabSelect"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Standard dropdown selector with text options. Click to expand and select a tab."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:c,selectedTabIndex:i,onChange:p})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Selected:"," ",e.jsx("span",{className:"font-semibold text-brand",children:c[i].title})]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Icons"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Enhanced dropdown with icon support for better visual clarity."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:o,selectedTabIndex:d,onChange:m})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Current selection:"," ",e.jsx("span",{className:"font-semibold text-brand",children:o[d].path})]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Many Options"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Handles large lists efficiently with scrollable dropdown."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:l,selectedTabIndex:s,onChange:x})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Selected option:"," ",e.jsx("span",{className:"font-semibold text-brand",children:l[s].title})," ","(",s+1," of ",l.length,")"]})})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Use Cases",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Mobile Navigation"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:["Perfect for replacing horizontal tab bars on mobile devices where space is limited.",e.jsx("code",{className:"ml-1 text-xs border border-gray-300 dark:border-gray-600 px-2 py-1 rounded",children:"ParamTab"})," ","automatically switches to TabSelect on mobile breakpoints."]}),e.jsx(t.CardContainer,{className:"p-4 bg-blue-50 dark:bg-blue-900/20",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("span",{role:"img","aria-label":"tip",children:"💡"})," ",e.jsx("span",{className:"font-semibold",children:"Tip:"})," Use TabSelect when you have 4+ tabs and limited horizontal space."]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Form Filters"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Use as a filter selector in forms and data tables to switch between different views or data categories."})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Settings Panels"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Navigate between different settings sections in a compact, accessible dropdown format."})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Features",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"palette",children:"🎨"})," ","Smooth Animations"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Chevron rotation and dropdown transitions with translate-y effects."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"moon",children:"🌙"})," ","Dark Mode"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Full dark mode support with automatic theme adaptation."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"lightning",children:"⚡"})," ","Performance"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Optimized rendering with proper key management for large lists."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"target",children:"🎯"})," ","Accessibility"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Keyboard navigation and focus management built-in."})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"TabSelectMenuItem Interface",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("table",{className:"w-full text-sm text-left",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-gray-200 dark:border-gray-700",children:[e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Prop"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Type"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Default"}),e.jsx("th",{className:"px-3 py-2 font-semibold",children:"Description"})]})}),e.jsx("tbody",{children:h.map(a=>e.jsxs("tr",{className:"border-b border-gray-100 dark:border-gray-800",children:[e.jsx("td",{className:"px-3 py-2",children:e.jsx("code",{className:"text-xs text-brand",children:a.prop})}),e.jsx("td",{className:"px-3 py-2",children:e.jsx("code",{className:"text-xs",children:a.type})}),e.jsx("td",{className:"px-3 py-2",children:a.default==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:a.default})}),e.jsx("td",{className:"px-3 py-2 text-gray-600 dark:text-gray-400",children:a.description})]},a.prop))})]})})})}),e.jsx(t.AutoPropsTable,{componentName:"TabSelect"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { TabSelect } from '@e-burgos/tucu-ui';
-import { useState } from 'react';
-import { Home, Settings, User } from 'lucide-react';
-
-// Basic usage
-function BasicExample() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const tabMenu = [
-    { title: 'Dashboard', path: 'dashboard' },
-    { title: 'Analytics', path: 'analytics' },
-    { title: 'Reports', path: 'reports' },
-    { title: 'Settings', path: 'settings' },
-  ];
-
-  return (
-    <TabSelect
-      tabMenu={tabMenu}
-      selectedTabIndex={selectedIndex}
-      onChange={setSelectedIndex}
-    />
-  );
-}
-
-// With icons
-function IconExample() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const tabMenu = [
-    { 
-      title: (
-        <span className="flex items-center gap-2">
-          <Home size={16} />
-          Home
-        </span>
-      ), 
-      path: 'home' 
-    },
-    { 
-      title: (
-        <span className="flex items-center gap-2">
-          <User size={16} />
-          Profile
-        </span>
-      ), 
-      path: 'profile' 
-    },
-  ];
-
-  return (
-    <TabSelect
-      tabMenu={tabMenu}
-      selectedTabIndex={selectedIndex}
-      onChange={setSelectedIndex}
-    />
-  );
-}
-
-// Integration with ParamTab
-// ParamTab automatically uses TabSelect on mobile devices
-import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
-
-function ResponsiveTabs() {
-  const tabMenu = [
-    { title: 'Overview', path: 'overview' },
-    { title: 'Details', path: 'details' },
-    { title: 'Settings', path: 'settings' },
-  ];
-
-  return (
-    <ParamTab tabMenu={tabMenu}>
-      <TabPanel>Overview content</TabPanel>
-      <TabPanel>Details content</TabPanel>
-      <TabPanel>Settings content</TabPanel>
-    </ParamTab>
-  );
-}
-
-// Custom styling
-function CustomExample() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  const tabMenu = [
-    { title: 'Option 1', path: 'opt1' },
-    { title: 'Option 2', path: 'opt2' },
-  ];
-
-  return (
-    <div className="max-w-md">
-      <TabSelect
-        tabMenu={tabMenu}
-        selectedTabIndex={selectedIndex}
-        onChange={(index) => {
-          console.log('Selected:', tabMenu[index].path);
-          setSelectedIndex(index);
-        }}
-      />
-    </div>
-  );
-}`})})})})]})};exports.default=g;

package/documentation/TailwindConfigSection-B_csna96.js

@@ -1,19 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-COj1N7FC.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Tailwind CSS Configuration"}),e.jsx(s.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Built on Tailwind CSS v4 with Tucu UI Design Tokens"})]}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Design Tokens & Configuration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"grid grid-cols-1 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-lg",children:e.jsx(a.Palette,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Color Spectrums"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:"The system uses Tucu UI Design Tokens organized into color spectrums:"}),e.jsxs("ul",{className:"space-y-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Circle,{className:"w-2 h-2 mt-1.5 shrink-0 text-brand"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Color Spectrums:"})," Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse"]})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Circle,{className:"w-2 h-2 mt-1.5 shrink-0 text-brand"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Color Scale:"})," Each spectrum has values from 0-100 (e.g., blue-0 to blue-100)"]})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Circle,{className:"w-2 h-2 mt-1.5 shrink-0 text-brand"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Light & Dark Variants:"})," Separate color sets for light and dark modes"]})]})]})]}),e.jsxs("div",{className:"space-y-4 mt-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-lg shadow-lg",children:e.jsx(a.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Semantic Colors"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm mb-3",children:"Semantic colors map design tokens to functional purposes:"}),e.jsx(s.CodeBlock,{language:"css",code:`/* Semantic Background Colors */
---color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
---color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
---color-semantic-bg-positive: var(--color-tucu-ui-green-60);
---color-semantic-bg-negative: var(--color-tucu-ui-red-60);
-
-/* Semantic Foreground Colors */
---color-semantic-fg: var(--color-tucu-ui-gray-100);
---color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
---color-semantic-fg-primary: var(--color-tucu-ui-blue-60);`})]})]}),e.jsxs("div",{className:"space-y-4 mt-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg",children:e.jsx(a.Ruler,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Spacing Scale"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm mb-3",children:"The spacing scale is mapped to Tucu UI Design Tokens. All spacing values use arbitrary values in pixels to maintain consistency:"}),e.jsx(s.CodeBlock,{language:"css",code:`/* Spacing Scale - Mapped to Tucu UI Design Tokens */
---spacing-0: 0px;
---spacing-1: 8px;    /* --spacing-tucu-ui-1 */
---spacing-2: 16px;   /* --spacing-tucu-ui-2 */
---spacing-3: 24px;   /* --spacing-tucu-ui-3 */
---spacing-4: 32px;   /* --spacing-tucu-ui-4 */
---spacing-5: 40px;   /* --spacing-tucu-ui-5 */
---spacing-6: 48px;   /* --spacing-tucu-ui-6 */
---spacing-8: 64px;   /* --spacing-tucu-ui-8 */
---spacing-10: 80px;  /* --spacing-tucu-ui-10 */`}),e.jsxs(s.Alert,{variant:"info",children:[" ",e.jsxs(s.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Note:"})," Components use arbitrary values like"," ",e.jsx("code",{className:"p-1 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"p-[16px]"})," ","instead of"," ",e.jsx("code",{className:"p-1 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"p-4"})," ","to maintain original Tailwind spacing values."]})]})]})]})})})]});exports.default=r;

package/documentation/TailwindConfigSection-BlZrFbRo.js

@@ -1,152 +0,0 @@
-import { jsxs as a, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { T as s, C as c, a as l, c as t, ag as n } from "../index-B919yoKU.js";
-import { Palette as o, Circle as r, Code as d, Ruler as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const N = () => /* @__PURE__ */ a(i, { children: [
-  /* @__PURE__ */ a("div", { className: "text-center", children: [
-    /* @__PURE__ */ e(
-      s,
-      {
-        tag: "h2",
-        className: "mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",
-        children: "Tailwind CSS Configuration"
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        tag: "p",
-        className: "text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",
-        children: "Built on Tailwind CSS v4 with Tucu UI Design Tokens"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
-    l,
-    {
-      title: "Design Tokens & Configuration",
-      className: "mt-2 mb-6",
-      children: /* @__PURE__ */ a("div", { className: "space-y-8", children: [
-        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-6", children: [
-          /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-              /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Color Spectrums" })
-            ] }),
-            /* @__PURE__ */ e(
-              s,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400 text-sm",
-                children: "The system uses Tucu UI Design Tokens organized into color spectrums:"
-              }
-            ),
-            /* @__PURE__ */ a("ul", { className: "space-y-2 text-sm text-gray-600 dark:text-gray-400", children: [
-              /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ e(r, { className: "w-2 h-2 mt-1.5 shrink-0 text-brand" }),
-                /* @__PURE__ */ a("span", { children: [
-                  /* @__PURE__ */ e("strong", { children: "Color Spectrums:" }),
-                  " Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse"
-                ] })
-              ] }),
-              /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ e(r, { className: "w-2 h-2 mt-1.5 shrink-0 text-brand" }),
-                /* @__PURE__ */ a("span", { children: [
-                  /* @__PURE__ */ e("strong", { children: "Color Scale:" }),
-                  " Each spectrum has values from 0-100 (e.g., blue-0 to blue-100)"
-                ] })
-              ] }),
-              /* @__PURE__ */ a("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ e(r, { className: "w-2 h-2 mt-1.5 shrink-0 text-brand" }),
-                /* @__PURE__ */ a("span", { children: [
-                  /* @__PURE__ */ e("strong", { children: "Light & Dark Variants:" }),
-                  " Separate color sets for light and dark modes"
-                ] })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ a("div", { className: "space-y-4 mt-4", children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-              /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Semantic Colors" })
-            ] }),
-            /* @__PURE__ */ e(
-              s,
-              {
-                tag: "p",
-                className: "text-gray-600 dark:text-gray-400 text-sm mb-3",
-                children: "Semantic colors map design tokens to functional purposes:"
-              }
-            ),
-            /* @__PURE__ */ e(
-              t,
-              {
-                language: "css",
-                code: `/* Semantic Background Colors */
---color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
---color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
---color-semantic-bg-positive: var(--color-tucu-ui-green-60);
---color-semantic-bg-negative: var(--color-tucu-ui-red-60);
-
-/* Semantic Foreground Colors */
---color-semantic-fg: var(--color-tucu-ui-gray-100);
---color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
---color-semantic-fg-primary: var(--color-tucu-ui-blue-60);`
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ a("div", { className: "space-y-4 mt-4", children: [
-          /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Spacing Scale" })
-          ] }),
-          /* @__PURE__ */ e(
-            s,
-            {
-              tag: "p",
-              className: "text-gray-600 dark:text-gray-400 text-sm mb-3",
-              children: "The spacing scale is mapped to Tucu UI Design Tokens. All spacing values use arbitrary values in pixels to maintain consistency:"
-            }
-          ),
-          /* @__PURE__ */ e(
-            t,
-            {
-              language: "css",
-              code: `/* Spacing Scale - Mapped to Tucu UI Design Tokens */
---spacing-0: 0px;
---spacing-1: 8px;    /* --spacing-tucu-ui-1 */
---spacing-2: 16px;   /* --spacing-tucu-ui-2 */
---spacing-3: 24px;   /* --spacing-tucu-ui-3 */
---spacing-4: 32px;   /* --spacing-tucu-ui-4 */
---spacing-5: 40px;   /* --spacing-tucu-ui-5 */
---spacing-6: 48px;   /* --spacing-tucu-ui-6 */
---spacing-8: 64px;   /* --spacing-tucu-ui-8 */
---spacing-10: 80px;  /* --spacing-tucu-ui-10 */`
-            }
-          ),
-          /* @__PURE__ */ a(n, { variant: "info", children: [
-            " ",
-            /* @__PURE__ */ a(s, { tag: "p", className: "text-sm", children: [
-              /* @__PURE__ */ e("strong", { children: "Note:" }),
-              " Components use arbitrary values like",
-              " ",
-              /* @__PURE__ */ e("code", { className: "p-1 border border-gray-300 dark:border-gray-700 rounded text-xs", children: "p-[16px]" }),
-              " ",
-              "instead of",
-              " ",
-              /* @__PURE__ */ e("code", { className: "p-1 border border-gray-300 dark:border-gray-700 rounded text-xs", children: "p-4" }),
-              " ",
-              "to maintain original Tailwind spacing values."
-            ] })
-          ] })
-        ] })
-      ] })
-    }
-  ) })
-] });
-export {
-  N as default
-};

package/documentation/TestingSection-CTGhtMbC.js

@@ -1,48 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { C as r, a as l, T as s, c as o } from "../index-B919yoKU.js";
-import { TestTube as c, Check as n } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const f = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Accessibility Testing", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
-  /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-orange-500 via-amber-500 to-yellow-500 shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
-    /* @__PURE__ */ e(s, { tag: "h3", className: "text-xl font-semibold", children: "Testing Guidelines" })
-  ] }),
-  /* @__PURE__ */ a("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Manual Testing Checklist" }),
-      /* @__PURE__ */ e("div", { className: "space-y-2", children: [
-        "Navigate using only keyboard",
-        "Test with screen reader (NVDA, JAWS, VoiceOver)",
-        "Check color contrast ratios",
-        "Verify focus indicators are visible",
-        "Test at 200% zoom level",
-        "Validate HTML markup",
-        "Check for proper heading hierarchy",
-        "Test form labels and error messages"
-      ].map((t, i) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(n, { className: "w-4 h-4 text-green-500" }),
-        /* @__PURE__ */ e(s, { tag: "p", className: "text-sm", children: t })
-      ] }, i)) })
-    ] }),
-    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: "Automated Testing Example" }),
-      /* @__PURE__ */ e(o, { code: `import { render, screen } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-
-expect.extend(toHaveNoViolations);
-
-test('Input has no accessibility violations', async () => {
-  const { container } = render(
-    <Input label="Email" required error="Invalid email" />
-  );
-  const results = await axe(container);
-  expect(results).toHaveNoViolations();
-});`, language: "js" })
-    ] })
-  ] })
-] }) }) }) });
-export {
-  f as default
-};

package/documentation/TestingSection-gDlp2c6i.js

@@ -1,12 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-COj1N7FC.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Accessibility Testing",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-orange-500 via-amber-500 to-yellow-500 shadow-lg",children:e.jsx(a.TestTube,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Testing Guidelines"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Manual Testing Checklist"}),e.jsx("div",{className:"space-y-2",children:["Navigate using only keyboard","Test with screen reader (NVDA, JAWS, VoiceOver)","Check color contrast ratios","Verify focus indicators are visible","Test at 200% zoom level","Validate HTML markup","Check for proper heading hierarchy","Test form labels and error messages"].map((i,t)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500"}),e.jsx(s.Typography,{tag:"p",className:"text-sm",children:i})]},t))})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Automated Testing Example"}),e.jsx(s.CodeBlock,{code:`import { render, screen } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-
-expect.extend(toHaveNoViolations);
-
-test('Input has no accessibility violations', async () => {
-  const { container } = render(
-    <Input label="Email" required error="Invalid email" />
-  );
-  const results = await axe(container);
-  expect(results).toHaveNoViolations();
-});`,language:"js"})]})]})]})})})});exports.default=r;