@beyondcorp/beyond-ui 1.2.83 → 1.2.87

package/dist/components/ComponentShowcase/componentDocs.js

@@ -7,8 +7,8 @@ const componentDocs = {
     button: {
         name: "Button",
         description: "A versatile button component with multiple variants and sizes.",
-        example: `<Button variant="primary" size="md">
-  Click me
+        example: `<Button variant="primary" size="md">
+  Click me
 </Button>`,
         props: [
             { name: "variant", type: "string", default: "primary", description: "Button style variant" },
@@ -166,25 +166,25 @@ const componentDocs = {
     "page-layout": {
         name: "Page Layout",
         description: "Flexible, semantic layout system for landing pages, products, blogs, and more. Compose with PageHeader, PageHero, PageContent, PageSidebar, and PageFooter for complete responsive UIs.",
-        example: `import { PageLayout, PageHeader, PageContent, PageFooter } from "@/components/PageLayout";
-
-function Example() {
-  return (
-    <PageLayout variant="default" maxWidth="xl">
-      <PageHeader>
-        <nav>
-          <span>My App</span>
-        </nav>
-      </PageHeader>
-      <PageContent maxWidth="lg">
-        <h1>Welcome!</h1>
-        <p>Your content here...</p>
-      </PageContent>
-      <PageFooter variant="simple">
-        <p>&copy; 2024 My App. All rights reserved.</p>
-      </PageFooter>
-    </PageLayout>
-  );
+        example: `import { PageLayout, PageHeader, PageContent, PageFooter } from "@/components/PageLayout";
+
+function Example() {
+  return (
+    <PageLayout variant="default" maxWidth="xl">
+      <PageHeader>
+        <nav>
+          <span>My App</span>
+        </nav>
+      </PageHeader>
+      <PageContent maxWidth="lg">
+        <h1>Welcome!</h1>
+        <p>Your content here...</p>
+      </PageContent>
+      <PageFooter variant="simple">
+        <p>&copy; 2024 My App. All rights reserved.</p>
+      </PageFooter>
+    </PageLayout>
+  );
 }`,
         props: [
             { name: "variant", type: "\"default\"|\"centered\"|\"sidebar\"|\"landing\"|\"product\"|\"blog\"", default: "\"default\"", description: "Sets page color and layout preset" },

package/dist/components/ComponentShowcase/componentDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentDocs.js","sources":["../../../src/components/ComponentShowcase/componentDocs.ts"],"sourcesContent":["/**\r\n * Centralized docs/config for all showcased components:\r\n * - description, usage example, props table, etc.\r\n * Used for ComponentShowcase main screen documentation.\r\n */\r\nexport const componentDocs = {\r\n  button: {\r\n    name: \"Button\",\r\n    description: \"A versatile button component with multiple variants and sizes.\",\r\n    example: `<Button variant=\"primary\" size=\"md\">\r\n  Click me\r\n</Button>`,\r\n    props: [\r\n      { name: \"variant\", type: \"string\", default: \"primary\", description: \"Button style variant\" },\r\n      { name: \"size\", type: \"string\", default: \"md\", description: \"Button size\" },\r\n      { name: \"disabled\", type: \"boolean\", default: \"false\", description: \"Disable the button\" }\r\n    ]\r\n  },\r\n  input: {\r\n    name: \"Input\",\r\n    description: \"A flexible input component with validation states and different sizes.\",\r\n    example: `<Input placeholder=\"Enter your email\" />`,\r\n    props: [\r\n      { name: \"variant\", type: \"string\", default: \"default\", description: \"Input variant (default/success/error)\" },\r\n      { name: \"inputSize\", type: \"string\", default: \"md\", description: \"Input size\" },\r\n      { name: \"placeholder\", type: \"string\", default: \"\", description: \"Placeholder text\" }\r\n    ]\r\n  },\r\n  badge: {\r\n    name: \"Badge\",\r\n    description: \"A small tag for statuses or classifications.\",\r\n    example: `<Badge>Default</Badge>`,\r\n    props: [\r\n      { name: \"variant\", type: \"string\", default: \"default\", description: \"Badge style variant\" }\r\n    ]\r\n  },\r\n  card: {\r\n    name: \"Card\",\r\n    description: \"A container element for grouping content.\",\r\n    example: `<Card><CardContent>Example</CardContent></Card>`,\r\n    props: [\r\n      { name: \"children\", type: \"ReactNode\", description: \"Card content\" }\r\n    ]\r\n  },\r\n  textarea: {\r\n    name: \"Textarea\",\r\n    description: \"A multi-line text input component.\",\r\n    example: `<Textarea placeholder=\"Write here...\" />`,\r\n    props: [\r\n      { name: \"rows\", type: \"number\", default: 3, description: \"Number of rows\" }\r\n    ]\r\n  },\r\n  checkbox: {\r\n    name: \"Checkbox\",\r\n    description: \"A standard form checkbox.\",\r\n    example: `<Checkbox checked={true} />`,\r\n    props: [\r\n      { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\r\n    ]\r\n  },\r\n  switch: {\r\n    name: \"Switch\",\r\n    description: \"A boolean toggle control.\",\r\n    example: `<Switch checked={true} />`,\r\n    props: [\r\n      { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\r\n    ]\r\n  },\r\n  avatar: {\r\n    name: \"Avatar\",\r\n    description: \"Displays a user profile image or initials.\",\r\n    example: `<Avatar><AvatarFallback>U</AvatarFallback></Avatar>`,\r\n    props: [\r\n      { name: \"size\", type: \"\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"\", default: \"md\", description: \"Avatar size\" }\r\n    ]\r\n  },\r\n  alert: {\r\n    name: \"Alert\",\r\n    description: \"Displays messages for important info.\",\r\n    example: `<Alert variant=\"info\"><AlertTitle>Info</AlertTitle></Alert>`,\r\n    props: [\r\n      { name: \"variant\", type: \"string\", default: \"info\", description: \"Alert type\" }\r\n    ]\r\n  },\r\n  toast: {\r\n    name: \"Toast\",\r\n    description: \"Transient notification message overlay.\",\r\n    example: `<Toast />`,\r\n    props: []\r\n  },\r\n  modal: {\r\n    name: \"Modal\",\r\n    description: \"A dialog overlay for user attention.\",\r\n    example: `<Modal open={true} onOpenChange={() => {}} />`,\r\n    props: [\r\n      { name: \"open\", type: \"boolean\", description: \"Show or hide the modal\" }\r\n    ]\r\n  },\r\n  spinner: {\r\n    name: \"Spinner\",\r\n    description: \"Animated indicator for loading states.\",\r\n    example: `<Spinner />`,\r\n    props: []\r\n  },\r\n  skeleton: {\r\n    name: \"Skeleton\",\r\n    description: \"Shimmer placeholder for loading UIs.\",\r\n    example: `<Skeleton className=\"h-6 w-32\" />`,\r\n    props: [\r\n      { name: \"className\", type: \"string\", description: \"Skeleton custom styles\" }\r\n    ]\r\n  },\r\n  statscard: {\r\n    name: \"StatsCard\",\r\n    description: \"Shows key metrics and trends.\",\r\n    example: `<StatsCard title=\"Users\" value=\"2,543\" />`,\r\n    props: [\r\n      { name: \"title\", type: \"string\", description: \"Card title\" },\r\n      { name: \"value\", type: \"string|number\", description: \"Main value\" }\r\n    ]\r\n  },\r\n  tabs: {\r\n    name: \"Tabs\",\r\n    description: \"Navigation between content views.\",\r\n    example: `<Tabs value=\"tab-1\"><TabsList>...</TabsList></Tabs>`,\r\n    props: [\r\n      { name: \"value\", type: \"string\", description: \"Selected tab value\" }\r\n    ]\r\n  },\r\n  sidebar: {\r\n    name: \"Sidebar\",\r\n    description: \"Persistent vertical navigation panel.\",\r\n    example: `<Sidebar menuItems={[]} />`,\r\n    props: []\r\n  },\r\n  navbar: {\r\n    name: \"Navbar\",\r\n    description: \"Top navigation bar for branding and links.\",\r\n    example: `<Navbar>...</Navbar>`,\r\n    props: []\r\n  },\r\n  \"dashboard-layout\": {\r\n    name: \"DashboardLayout\",\r\n    description: \"Layout for dashboards with sidebar and content.\",\r\n    example: `<DashboardLayout>...</DashboardLayout>`,\r\n    props: []\r\n  },\r\n  \"dashboard-header\": {\r\n    name: \"DashboardHeader\",\r\n    description: \"Header for dashboard screens.\",\r\n    example: `<DashboardHeader />`,\r\n    props: []\r\n  },\r\n  \"dashboard-grid\": {\r\n    name: \"DashboardGrid\",\r\n    description: \"Grid container for dashboard widgets.\",\r\n    example: `<DashboardGrid>...</DashboardGrid>`,\r\n    props: []\r\n  },\r\n  datatable: {\r\n    name: \"DataTable\",\r\n    description: \"Advanced table for displaying data collections.\",\r\n    example: `<DataTable columns={[]} dataSource={[]} />`,\r\n    props: []\r\n  },\r\n  \"page-layout\": {\r\n    name: \"Page Layout\",\r\n    description: \"Flexible, semantic layout system for landing pages, products, blogs, and more. Compose with PageHeader, PageHero, PageContent, PageSidebar, and PageFooter for complete responsive UIs.\",\r\n    example: `import { PageLayout, PageHeader, PageContent, PageFooter } from \"@/components/PageLayout\";\r\n\r\nfunction Example() {\r\n  return (\r\n    <PageLayout variant=\"default\" maxWidth=\"xl\">\r\n      <PageHeader>\r\n        <nav>\r\n          <span>My App</span>\r\n        </nav>\r\n      </PageHeader>\r\n      <PageContent maxWidth=\"lg\">\r\n        <h1>Welcome!</h1>\r\n        <p>Your content here...</p>\r\n      </PageContent>\r\n      <PageFooter variant=\"simple\">\r\n        <p>&copy; 2024 My App. All rights reserved.</p>\r\n      </PageFooter>\r\n    </PageLayout>\r\n  );\r\n}`,\r\n    props: [\r\n      { name: \"variant\", type: \"\\\"default\\\"|\\\"centered\\\"|\\\"sidebar\\\"|\\\"landing\\\"|\\\"product\\\"|\\\"blog\\\"\", default: \"\\\"default\\\"\", description: \"Sets page color and layout preset\" },\r\n      { name: \"maxWidth\", type: \"\\\"none\\\"|\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"|\\\"xl\\\"|\\\"2xl\\\"|\\\"full\\\"\", default: \"\\\"xl\\\"\", description: \"Limits overall page width for content\" },\r\n      { name: \"contentLayout\", type: \"\\\"default\\\"|\\\"centered\\\"|\\\"sidebar\\\"|\\\"fullWidth\\\"\", default: \"\\\"default\\\"\", description: \"Layout mode for PageLayoutContent\" },\r\n      { name: \"contentSpacing\", type: \"\\\"none\\\"|\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"|\\\"xl\\\"\", default: \"\\\"md\\\"\", description: \"Vertical padding spacing\" },\r\n      { name: \"children\", type: \"ReactNode\", description: \"Page structure (usually header, content, sidebar, footer)\" },\r\n      // Optionally highlight subcomponent props\r\n      { name: \"PageHeader\", type: \"Sticky/Transparent, children\", description: \"Header settings for navigation bar\" },\r\n      { name: \"PageHero\", type: \"fullHeight, backgroundImage, overlay, children\", description: \"Hero section for landing visuals\" },\r\n      { name: \"PageContent\", type: \"maxWidth, children\", description: \"Content area for main body text/components\" },\r\n      { name: \"PageSidebar\", type: \"position, width, children\", description: \"Sidebar area (e.g. for menu or extra info)\" },\r\n      { name: \"PageFooter\", type: \"variant, children\", description: \"Footer configuration\" }\r\n    ]\r\n  },\r\n  // --- AUTHENTICATION DEMOS ---\r\n  login: {\r\n    name: \"Login Page\",\r\n    description: \"Showcases the reusable LoginForm component as a full login page example.\",\r\n    example: `<LoginForm />`,\r\n    props: []\r\n  },\r\n  signup: {\r\n    name: \"Signup Page\",\r\n    description: \"Showcases the reusable SignupForm component as a full signup page example.\",\r\n    example: `<SignupForm />`,\r\n    props: []\r\n  },\r\n  shield: {\r\n    name: \"!isAuthenticated Shield\",\r\n    description: \"ProtectedRoute gate which only renders content when authenticated; otherwise shows fallback.\",\r\n    example: `<ProtectedRoute>Protected Content</ProtectedRoute>`,\r\n    props: []\r\n  },\r\n  auth: {\r\n    name: \"Auth System\",\r\n    description: \"Demo of authentication UI and flows.\",\r\n    example: `<AuthShowcase />`,\r\n    props: []\r\n  },\r\n  \"password-reset\": {\r\n    name: \"Password Reset\",\r\n    description: \"Showcases the reusable PasswordResetForm component, allowing users to request a password reset via email.\",\r\n    example: `<PasswordResetForm onReset={email => { ... }} />`,\r\n    props: [\r\n      { name: \"onReset\", type: \"(email: string) => Promise<void> | void\", description: \"Submit reset request callback\" },\r\n      { name: \"isLoading\", type: \"boolean\", description: \"Loading indicator\" },\r\n      { name: \"successMessage\", type: \"string\", description: \"Message displayed on success\" },\r\n      { name: \"errorMessage\", type: \"string\", description: \"Error feedback message\" }\r\n    ],\r\n  },\r\n};\r\n"],"names":[],"mappings":"AAAA;;;;AAIG;AACI,MAAM,aAAa,GAAG;AAC3B,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,WAAW,EAAE,gEAAgE;AAC7E,QAAA,OAAO,EAAE,CAAA;;AAEH,SAAA,CAAA;AACN,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,sBAAsB,EAAE;AAC5F,YAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE;AAC3E,YAAA,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,oBAAoB;AACzF;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,wEAAwE;AACrF,QAAA,OAAO,EAAE,CAAA,wCAAA,CAA0C;AACnD,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,uCAAuC,EAAE;AAC7G,YAAA,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE;AAC/E,YAAA,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,kBAAkB;AACpF;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,8CAA8C;AAC3D,QAAA,OAAO,EAAE,CAAA,sBAAA,CAAwB;AACjC,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,qBAAqB;AAC1F;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,WAAW,EAAE,2CAA2C;AACxD,QAAA,OAAO,EAAE,CAAA,+CAAA,CAAiD;AAC1D,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc;AACnE;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,WAAW,EAAE,oCAAoC;AACjD,QAAA,OAAO,EAAE,CAAA,wCAAA,CAA0C;AACnD,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAE,gBAAgB;AAC1E;AACF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,WAAW,EAAE,2BAA2B;AACxC,QAAA,OAAO,EAAE,CAAA,2BAAA,CAA6B;AACtC,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe;AACjE;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,WAAW,EAAE,2BAA2B;AACxC,QAAA,OAAO,EAAE,CAAA,yBAAA,CAA2B;AACpC,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe;AACjE;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,WAAW,EAAE,4CAA4C;AACzD,QAAA,OAAO,EAAE,CAAA,mDAAA,CAAqD;AAC9D,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,sBAAsB,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa;AACxF;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,uCAAuC;AACpD,QAAA,OAAO,EAAE,CAAA,2DAAA,CAA6D;AACtE,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY;AAC9E;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,yCAAyC;AACtD,QAAA,OAAO,EAAE,CAAA,SAAA,CAAW;AACpB,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,sCAAsC;AACnD,QAAA,OAAO,EAAE,CAAA,6CAAA,CAA+C;AACxD,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,wBAAwB;AACvE;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,WAAW,EAAE,wCAAwC;AACrD,QAAA,OAAO,EAAE,CAAA,WAAA,CAAa;AACtB,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,WAAW,EAAE,sCAAsC;AACnD,QAAA,OAAO,EAAE,CAAA,iCAAA,CAAmC;AAC5C,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,wBAAwB;AAC3E;AACF,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,WAAW,EAAE,+BAA+B;AAC5C,QAAA,OAAO,EAAE,CAAA,yCAAA,CAA2C;AACpD,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE;YAC5D,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY;AAClE;AACF,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,WAAW,EAAE,mCAAmC;AAChD,QAAA,OAAO,EAAE,CAAA,mDAAA,CAAqD;AAC9D,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,oBAAoB;AACnE;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,WAAW,EAAE,uCAAuC;AACpD,QAAA,OAAO,EAAE,CAAA,0BAAA,CAA4B;AACrC,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,WAAW,EAAE,4CAA4C;AACzD,QAAA,OAAO,EAAE,CAAA,oBAAA,CAAsB;AAC/B,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,kBAAkB,EAAE;AAClB,QAAA,IAAI,EAAE,iBAAiB;AACvB,QAAA,WAAW,EAAE,iDAAiD;AAC9D,QAAA,OAAO,EAAE,CAAA,sCAAA,CAAwC;AACjD,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,kBAAkB,EAAE;AAClB,QAAA,IAAI,EAAE,iBAAiB;AACvB,QAAA,WAAW,EAAE,+BAA+B;AAC5C,QAAA,OAAO,EAAE,CAAA,mBAAA,CAAqB;AAC9B,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,IAAI,EAAE,eAAe;AACrB,QAAA,WAAW,EAAE,uCAAuC;AACpD,QAAA,OAAO,EAAE,CAAA,kCAAA,CAAoC;AAC7C,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,WAAW,EAAE,iDAAiD;AAC9D,QAAA,OAAO,EAAE,CAAA,0CAAA,CAA4C;AACrD,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,WAAW,EAAE,yLAAyL;AACtM,QAAA,OAAO,EAAE,CAAA;;;;;;;;;;;;;;;;;;;AAmBX,CAAA,CAAA;AACE,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uEAAuE,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,mCAAmC,EAAE;AAC5K,YAAA,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,uDAAuD,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,uCAAuC,EAAE;AAC5J,YAAA,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,oDAAoD,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,mCAAmC,EAAE;AAC/J,YAAA,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,sCAAsC,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,0BAA0B,EAAE;YACpI,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,2DAA2D,EAAE;;YAEjH,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,8BAA8B,EAAE,WAAW,EAAE,oCAAoC,EAAE;YAC/G,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,gDAAgD,EAAE,WAAW,EAAE,kCAAkC,EAAE;YAC7H,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,oBAAoB,EAAE,WAAW,EAAE,4CAA4C,EAAE;YAC9G,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,2BAA2B,EAAE,WAAW,EAAE,4CAA4C,EAAE;YACrH,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,mBAAmB,EAAE,WAAW,EAAE,sBAAsB;AACrF;AACF,KAAA;;AAED,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,YAAY;AAClB,QAAA,WAAW,EAAE,0EAA0E;AACvF,QAAA,OAAO,EAAE,CAAA,aAAA,CAAe;AACxB,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,WAAW,EAAE,4EAA4E;AACzF,QAAA,OAAO,EAAE,CAAA,cAAA,CAAgB;AACzB,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,yBAAyB;AAC/B,QAAA,WAAW,EAAE,8FAA8F;AAC3G,QAAA,OAAO,EAAE,CAAA,kDAAA,CAAoD;AAC7D,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,WAAW,EAAE,sCAAsC;AACnD,QAAA,OAAO,EAAE,CAAA,gBAAA,CAAkB;AAC3B,QAAA,KAAK,EAAE;AACR,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA,IAAI,EAAE,gBAAgB;AACtB,QAAA,WAAW,EAAE,2GAA2G;AACxH,QAAA,OAAO,EAAE,CAAA,gDAAA,CAAkD;AAC3D,QAAA,KAAK,EAAE;YACL,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,yCAAyC,EAAE,WAAW,EAAE,+BAA+B,EAAE;YAClH,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,mBAAmB,EAAE;YACxE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,8BAA8B,EAAE;YACvF,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,wBAAwB;AAC9E,SAAA;AACF,KAAA;;;;;"}
+{"version":3,"file":"componentDocs.js","sources":["../../../src/components/ComponentShowcase/componentDocs.ts"],"sourcesContent":["/**\n * Centralized docs/config for all showcased components:\n * - description, usage example, props table, etc.\n * Used for ComponentShowcase main screen documentation.\n */\nexport const componentDocs = {\n  button: {\n    name: \"Button\",\n    description: \"A versatile button component with multiple variants and sizes.\",\n    example: `<Button variant=\"primary\" size=\"md\">\n  Click me\n</Button>`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"primary\", description: \"Button style variant\" },\n      { name: \"size\", type: \"string\", default: \"md\", description: \"Button size\" },\n      { name: \"disabled\", type: \"boolean\", default: \"false\", description: \"Disable the button\" }\n    ]\n  },\n  input: {\n    name: \"Input\",\n    description: \"A flexible input component with validation states and different sizes.\",\n    example: `<Input placeholder=\"Enter your email\" />`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"default\", description: \"Input variant (default/success/error)\" },\n      { name: \"inputSize\", type: \"string\", default: \"md\", description: \"Input size\" },\n      { name: \"placeholder\", type: \"string\", default: \"\", description: \"Placeholder text\" }\n    ]\n  },\n  badge: {\n    name: \"Badge\",\n    description: \"A small tag for statuses or classifications.\",\n    example: `<Badge>Default</Badge>`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"default\", description: \"Badge style variant\" }\n    ]\n  },\n  card: {\n    name: \"Card\",\n    description: \"A container element for grouping content.\",\n    example: `<Card><CardContent>Example</CardContent></Card>`,\n    props: [\n      { name: \"children\", type: \"ReactNode\", description: \"Card content\" }\n    ]\n  },\n  textarea: {\n    name: \"Textarea\",\n    description: \"A multi-line text input component.\",\n    example: `<Textarea placeholder=\"Write here...\" />`,\n    props: [\n      { name: \"rows\", type: \"number\", default: 3, description: \"Number of rows\" }\n    ]\n  },\n  checkbox: {\n    name: \"Checkbox\",\n    description: \"A standard form checkbox.\",\n    example: `<Checkbox checked={true} />`,\n    props: [\n      { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\n    ]\n  },\n  switch: {\n    name: \"Switch\",\n    description: \"A boolean toggle control.\",\n    example: `<Switch checked={true} />`,\n    props: [\n      { name: \"checked\", type: \"boolean\", description: \"Checked state\" }\n    ]\n  },\n  avatar: {\n    name: \"Avatar\",\n    description: \"Displays a user profile image or initials.\",\n    example: `<Avatar><AvatarFallback>U</AvatarFallback></Avatar>`,\n    props: [\n      { name: \"size\", type: \"\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"\", default: \"md\", description: \"Avatar size\" }\n    ]\n  },\n  alert: {\n    name: \"Alert\",\n    description: \"Displays messages for important info.\",\n    example: `<Alert variant=\"info\"><AlertTitle>Info</AlertTitle></Alert>`,\n    props: [\n      { name: \"variant\", type: \"string\", default: \"info\", description: \"Alert type\" }\n    ]\n  },\n  toast: {\n    name: \"Toast\",\n    description: \"Transient notification message overlay.\",\n    example: `<Toast />`,\n    props: []\n  },\n  modal: {\n    name: \"Modal\",\n    description: \"A dialog overlay for user attention.\",\n    example: `<Modal open={true} onOpenChange={() => {}} />`,\n    props: [\n      { name: \"open\", type: \"boolean\", description: \"Show or hide the modal\" }\n    ]\n  },\n  spinner: {\n    name: \"Spinner\",\n    description: \"Animated indicator for loading states.\",\n    example: `<Spinner />`,\n    props: []\n  },\n  skeleton: {\n    name: \"Skeleton\",\n    description: \"Shimmer placeholder for loading UIs.\",\n    example: `<Skeleton className=\"h-6 w-32\" />`,\n    props: [\n      { name: \"className\", type: \"string\", description: \"Skeleton custom styles\" }\n    ]\n  },\n  statscard: {\n    name: \"StatsCard\",\n    description: \"Shows key metrics and trends.\",\n    example: `<StatsCard title=\"Users\" value=\"2,543\" />`,\n    props: [\n      { name: \"title\", type: \"string\", description: \"Card title\" },\n      { name: \"value\", type: \"string|number\", description: \"Main value\" }\n    ]\n  },\n  tabs: {\n    name: \"Tabs\",\n    description: \"Navigation between content views.\",\n    example: `<Tabs value=\"tab-1\"><TabsList>...</TabsList></Tabs>`,\n    props: [\n      { name: \"value\", type: \"string\", description: \"Selected tab value\" }\n    ]\n  },\n  sidebar: {\n    name: \"Sidebar\",\n    description: \"Persistent vertical navigation panel.\",\n    example: `<Sidebar menuItems={[]} />`,\n    props: []\n  },\n  navbar: {\n    name: \"Navbar\",\n    description: \"Top navigation bar for branding and links.\",\n    example: `<Navbar>...</Navbar>`,\n    props: []\n  },\n  \"dashboard-layout\": {\n    name: \"DashboardLayout\",\n    description: \"Layout for dashboards with sidebar and content.\",\n    example: `<DashboardLayout>...</DashboardLayout>`,\n    props: []\n  },\n  \"dashboard-header\": {\n    name: \"DashboardHeader\",\n    description: \"Header for dashboard screens.\",\n    example: `<DashboardHeader />`,\n    props: []\n  },\n  \"dashboard-grid\": {\n    name: \"DashboardGrid\",\n    description: \"Grid container for dashboard widgets.\",\n    example: `<DashboardGrid>...</DashboardGrid>`,\n    props: []\n  },\n  datatable: {\n    name: \"DataTable\",\n    description: \"Advanced table for displaying data collections.\",\n    example: `<DataTable columns={[]} dataSource={[]} />`,\n    props: []\n  },\n  \"page-layout\": {\n    name: \"Page Layout\",\n    description: \"Flexible, semantic layout system for landing pages, products, blogs, and more. Compose with PageHeader, PageHero, PageContent, PageSidebar, and PageFooter for complete responsive UIs.\",\n    example: `import { PageLayout, PageHeader, PageContent, PageFooter } from \"@/components/PageLayout\";\n\nfunction Example() {\n  return (\n    <PageLayout variant=\"default\" maxWidth=\"xl\">\n      <PageHeader>\n        <nav>\n          <span>My App</span>\n        </nav>\n      </PageHeader>\n      <PageContent maxWidth=\"lg\">\n        <h1>Welcome!</h1>\n        <p>Your content here...</p>\n      </PageContent>\n      <PageFooter variant=\"simple\">\n        <p>&copy; 2024 My App. All rights reserved.</p>\n      </PageFooter>\n    </PageLayout>\n  );\n}`,\n    props: [\n      { name: \"variant\", type: \"\\\"default\\\"|\\\"centered\\\"|\\\"sidebar\\\"|\\\"landing\\\"|\\\"product\\\"|\\\"blog\\\"\", default: \"\\\"default\\\"\", description: \"Sets page color and layout preset\" },\n      { name: \"maxWidth\", type: \"\\\"none\\\"|\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"|\\\"xl\\\"|\\\"2xl\\\"|\\\"full\\\"\", default: \"\\\"xl\\\"\", description: \"Limits overall page width for content\" },\n      { name: \"contentLayout\", type: \"\\\"default\\\"|\\\"centered\\\"|\\\"sidebar\\\"|\\\"fullWidth\\\"\", default: \"\\\"default\\\"\", description: \"Layout mode for PageLayoutContent\" },\n      { name: \"contentSpacing\", type: \"\\\"none\\\"|\\\"sm\\\"|\\\"md\\\"|\\\"lg\\\"|\\\"xl\\\"\", default: \"\\\"md\\\"\", description: \"Vertical padding spacing\" },\n      { name: \"children\", type: \"ReactNode\", description: \"Page structure (usually header, content, sidebar, footer)\" },\n      // Optionally highlight subcomponent props\n      { name: \"PageHeader\", type: \"Sticky/Transparent, children\", description: \"Header settings for navigation bar\" },\n      { name: \"PageHero\", type: \"fullHeight, backgroundImage, overlay, children\", description: \"Hero section for landing visuals\" },\n      { name: \"PageContent\", type: \"maxWidth, children\", description: \"Content area for main body text/components\" },\n      { name: \"PageSidebar\", type: \"position, width, children\", description: \"Sidebar area (e.g. for menu or extra info)\" },\n      { name: \"PageFooter\", type: \"variant, children\", description: \"Footer configuration\" }\n    ]\n  },\n  // --- AUTHENTICATION DEMOS ---\n  login: {\n    name: \"Login Page\",\n    description: \"Showcases the reusable LoginForm component as a full login page example.\",\n    example: `<LoginForm />`,\n    props: []\n  },\n  signup: {\n    name: \"Signup Page\",\n    description: \"Showcases the reusable SignupForm component as a full signup page example.\",\n    example: `<SignupForm />`,\n    props: []\n  },\n  shield: {\n    name: \"!isAuthenticated Shield\",\n    description: \"ProtectedRoute gate which only renders content when authenticated; otherwise shows fallback.\",\n    example: `<ProtectedRoute>Protected Content</ProtectedRoute>`,\n    props: []\n  },\n  auth: {\n    name: \"Auth System\",\n    description: \"Demo of authentication UI and flows.\",\n    example: `<AuthShowcase />`,\n    props: []\n  },\n  \"password-reset\": {\n    name: \"Password Reset\",\n    description: \"Showcases the reusable PasswordResetForm component, allowing users to request a password reset via email.\",\n    example: `<PasswordResetForm onReset={email => { ... }} />`,\n    props: [\n      { name: \"onReset\", type: \"(email: string) => Promise<void> | void\", description: \"Submit reset request callback\" },\n      { name: \"isLoading\", type: \"boolean\", description: \"Loading indicator\" },\n      { name: \"successMessage\", type: \"string\", description: \"Message displayed on success\" },\n      { name: \"errorMessage\", type: \"string\", description: \"Error feedback message\" }\n    ],\n  },\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ComponentShowcase/showcaseRegistry.js.map

@@ -1 +1 @@
-{"version":3,"file":"showcaseRegistry.js","sources":["../../../src/components/ComponentShowcase/showcaseRegistry.ts"],"sourcesContent":["/**\r\n * Showcase registry maps component ids to their example/demo modules.\r\n * Usage: import { showcaseRegistry } from './showcaseRegistry';\r\n * Then: const Demo = showcaseRegistry['button'];\r\n */\r\nimport { ButtonExample } from '../Button/Button.example';\r\nimport { InputExample } from '../Input/Input.example';\r\nimport { TextareaExample } from '../Textarea/Textarea.example';\r\nimport { CheckboxExample } from '../Checkbox/Checkbox.example';\r\nimport { SwitchExample } from '../Switch/Switch.example';\r\nimport { CardExample } from '../Card/Card.example';\r\nimport { BadgeExample } from '../Badge/Badge.example';\r\nimport { AvatarExample } from '../Avatar/Avatar.example';\r\nimport { AlertExample } from '../Alert/Alert.example';\r\nimport { ToastExample } from '../Toast/Toast.example';\r\nimport { ModalExample } from '../Modal/Modal.example';\r\nimport { SpinnerExample } from '../Spinner/Spinner.example';\r\nimport { SkeletonExample } from '../Skeleton/Skeleton.example';\r\nimport { StatsCardExample } from '../StatsCard/StatsCard.example';\r\nimport { TabsExample } from '../Tabs/Tabs.example';\r\nimport { SidebarExample } from '../Sidebar/Sidebar.example';\r\nimport { NavbarExample } from '../Navbar/Navbar.example';\r\nimport { DashboardLayoutExample } from '../DashboardLayout/DashboardLayout.example';\r\nimport { DashboardHeaderExample } from '../DashboardHeader/DashboardHeader.example';\r\nimport { DashboardGridExample } from '../DashboardGrid/DashboardGrid.example';\r\nimport { DataTableShowcase } from '../DataTable/DataTableShowcase';\r\nimport { AuthShowcase } from '../Auth/AuthShowcase';\r\nimport { LoginFormExample } from \"../Auth/LoginForm.example\";\r\nimport { SignupFormExample } from \"../Auth/SignupForm.example\";\r\nimport { ProtectedRouteExample } from \"../Auth/ProtectedRoute.example\";\r\nimport { PasswordResetFormExample } from \"../Auth/PasswordResetForm.example\";\r\nimport { PageLayoutShowcase } from '../PageLayout/PageLayoutShowcase';\r\n\r\n\r\n\r\nexport const showcaseRegistry: Record<string, React.FC> = {\r\n  button: ButtonExample,\r\n  input: InputExample,\r\n  textarea: TextareaExample,\r\n  checkbox: CheckboxExample,\r\n  switch: SwitchExample,\r\n  card: CardExample,\r\n  badge: BadgeExample,\r\n  avatar: AvatarExample,\r\n  alert: AlertExample,\r\n  toast: ToastExample,\r\n  modal: ModalExample,\r\n  spinner: SpinnerExample,\r\n  skeleton: SkeletonExample,\r\n  statscard: StatsCardExample,\r\n  tabs: TabsExample,\r\n  sidebar: SidebarExample,\r\n  navbar: NavbarExample,\r\n  \"dashboard-layout\": DashboardLayoutExample,\r\n  \"dashboard-header\": DashboardHeaderExample,\r\n  \"dashboard-grid\": DashboardGridExample,\r\n  datatable: DataTableShowcase,\r\n  auth: AuthShowcase,\r\n  login: LoginFormExample,\r\n  signup: SignupFormExample,\r\n  \"password-reset\": PasswordResetFormExample,\r\n  shield: ProtectedRouteExample,\r\n  \"page-layout\": PageLayoutShowcase\r\n  // Extend with other demos as needed\r\n};"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;AAIG;AA+BI,MAAM,gBAAgB,GAA6B;AACxD,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,SAAS,EAAE,gBAAgB;AAC3B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,gBAAgB,EAAE,oBAAoB;AACtC,IAAA,SAAS,EAAE,iBAAiB;AAC5B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,MAAM,EAAE,iBAAiB;AACzB,IAAA,gBAAgB,EAAE,wBAAwB;AAC1C,IAAA,MAAM,EAAE,qBAAqB;AAC7B,IAAA,aAAa,EAAE;;;;;;"}
+{"version":3,"file":"showcaseRegistry.js","sources":["../../../src/components/ComponentShowcase/showcaseRegistry.ts"],"sourcesContent":["/**\n * Showcase registry maps component ids to their example/demo modules.\n * Usage: import { showcaseRegistry } from './showcaseRegistry';\n * Then: const Demo = showcaseRegistry['button'];\n */\nimport { ButtonExample } from '../Button/Button.example';\nimport { InputExample } from '../Input/Input.example';\nimport { TextareaExample } from '../Textarea/Textarea.example';\nimport { CheckboxExample } from '../Checkbox/Checkbox.example';\nimport { SwitchExample } from '../Switch/Switch.example';\nimport { CardExample } from '../Card/Card.example';\nimport { BadgeExample } from '../Badge/Badge.example';\nimport { AvatarExample } from '../Avatar/Avatar.example';\nimport { AlertExample } from '../Alert/Alert.example';\nimport { ToastExample } from '../Toast/Toast.example';\nimport { ModalExample } from '../Modal/Modal.example';\nimport { SpinnerExample } from '../Spinner/Spinner.example';\nimport { SkeletonExample } from '../Skeleton/Skeleton.example';\nimport { StatsCardExample } from '../StatsCard/StatsCard.example';\nimport { TabsExample } from '../Tabs/Tabs.example';\nimport { SidebarExample } from '../Sidebar/Sidebar.example';\nimport { NavbarExample } from '../Navbar/Navbar.example';\nimport { DashboardLayoutExample } from '../DashboardLayout/DashboardLayout.example';\nimport { DashboardHeaderExample } from '../DashboardHeader/DashboardHeader.example';\nimport { DashboardGridExample } from '../DashboardGrid/DashboardGrid.example';\nimport { DataTableShowcase } from '../DataTable/DataTableShowcase';\nimport { AuthShowcase } from '../Auth/AuthShowcase';\nimport { LoginFormExample } from \"../Auth/LoginForm.example\";\nimport { SignupFormExample } from \"../Auth/SignupForm.example\";\nimport { ProtectedRouteExample } from \"../Auth/ProtectedRoute.example\";\nimport { PasswordResetFormExample } from \"../Auth/PasswordResetForm.example\";\nimport { PageLayoutShowcase } from '../PageLayout/PageLayoutShowcase';\n\n\n\nexport const showcaseRegistry: Record<string, React.FC> = {\n  button: ButtonExample,\n  input: InputExample,\n  textarea: TextareaExample,\n  checkbox: CheckboxExample,\n  switch: SwitchExample,\n  card: CardExample,\n  badge: BadgeExample,\n  avatar: AvatarExample,\n  alert: AlertExample,\n  toast: ToastExample,\n  modal: ModalExample,\n  spinner: SpinnerExample,\n  skeleton: SkeletonExample,\n  statscard: StatsCardExample,\n  tabs: TabsExample,\n  sidebar: SidebarExample,\n  navbar: NavbarExample,\n  \"dashboard-layout\": DashboardLayoutExample,\n  \"dashboard-header\": DashboardHeaderExample,\n  \"dashboard-grid\": DashboardGridExample,\n  datatable: DataTableShowcase,\n  auth: AuthShowcase,\n  login: LoginFormExample,\n  signup: SignupFormExample,\n  \"password-reset\": PasswordResetFormExample,\n  shield: ProtectedRouteExample,\n  \"page-layout\": PageLayoutShowcase\n  // Extend with other demos as needed\n};"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;AAIG;AA+BI,MAAM,gBAAgB,GAA6B;AACxD,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,SAAS,EAAE,gBAAgB;AAC3B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,kBAAkB,EAAE,sBAAsB;AAC1C,IAAA,gBAAgB,EAAE,oBAAoB;AACtC,IAAA,SAAS,EAAE,iBAAiB;AAC5B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE,gBAAgB;AACvB,IAAA,MAAM,EAAE,iBAAiB;AACzB,IAAA,gBAAgB,EAAE,wBAAwB;AAC1C,IAAA,MAAM,EAAE,qBAAqB;AAC7B,IAAA,aAAa,EAAE;;;;;;"}

package/dist/components/DashboardGrid/DashboardGrid.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardGrid.example.js","sources":["../../../src/components/DashboardGrid/DashboardGrid.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { DashboardGrid } from \"./DashboardGrid\";\r\n\r\nexport const DashboardGridExample: React.FC = () => (\r\n  <DashboardGrid>\r\n    <div className=\"p-4 bg-gray-100 rounded\">Widget 1</div>\r\n    <div className=\"p-4 bg-gray-100 rounded\">Widget 2</div>\r\n    <div className=\"p-4 bg-gray-100 rounded\">Widget 3</div>\r\n    <div className=\"p-4 bg-gray-100 rounded\">Widget 4</div>\r\n  </DashboardGrid>\r\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,oBAAoB,GAAa,OAC5CA,IAAA,CAAC,aAAa,eACZC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,yBAAe,EACvDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,EACvDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,EACvDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,CAAA,EAAA,CACzC;;;;"}
+{"version":3,"file":"DashboardGrid.example.js","sources":["../../../src/components/DashboardGrid/DashboardGrid.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DashboardGrid } from \"./DashboardGrid\";\n\nexport const DashboardGridExample: React.FC = () => (\n  <DashboardGrid>\n    <div className=\"p-4 bg-gray-100 rounded\">Widget 1</div>\n    <div className=\"p-4 bg-gray-100 rounded\">Widget 2</div>\n    <div className=\"p-4 bg-gray-100 rounded\">Widget 3</div>\n    <div className=\"p-4 bg-gray-100 rounded\">Widget 4</div>\n  </DashboardGrid>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,oBAAoB,GAAa,OAC5CA,IAAA,CAAC,aAAa,eACZC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,yBAAe,EACvDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,EACvDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,EACvDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,CAAA,EAAA,CACzC;;;;"}

package/dist/components/DashboardGrid/DashboardGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardGrid.js","sources":["../../../src/components/DashboardGrid/DashboardGrid.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst gridVariants = cva(\r\n  \"grid gap-6\",\r\n  {\r\n    variants: {\r\n      columns: {\r\n        1: \"grid-cols-1\",\r\n        2: \"grid-cols-1 md:grid-cols-2\",\r\n        3: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\r\n        4: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\r\n        6: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6\",\r\n        12: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      columns: 12,\r\n    },\r\n  }\r\n);\r\n\r\nconst gridItemVariants = cva(\r\n  \"min-h-0\", // Prevents grid items from growing unnecessarily\r\n  {\r\n    variants: {\r\n      colSpan: {\r\n        1: \"col-span-1\",\r\n        2: \"col-span-1 md:col-span-2\",\r\n        3: \"col-span-1 md:col-span-2 lg:col-span-3\",\r\n        4: \"col-span-1 md:col-span-2 lg:col-span-4\",\r\n        6: \"col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-6\",\r\n        12: \"col-span-full\",\r\n      },\r\n      rowSpan: {\r\n        1: \"row-span-1\",\r\n        2: \"row-span-2\",\r\n        3: \"row-span-3\",\r\n        4: \"row-span-4\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      colSpan: 1,\r\n      rowSpan: 1,\r\n    },\r\n  }\r\n);\r\n\r\ninterface DashboardGridProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof gridVariants> {}\r\n\r\ninterface DashboardGridItemProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof gridItemVariants> {}\r\n\r\nconst DashboardGrid = React.forwardRef<HTMLDivElement, DashboardGridProps>(\r\n  ({ className, columns, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(gridVariants({ columns }), className)}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\n\r\nconst DashboardGridItem = React.forwardRef<HTMLDivElement, DashboardGridItemProps>(\r\n  ({ className, colSpan, rowSpan, ...props }, ref) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(gridItemVariants({ colSpan, rowSpan }), className)}\r\n        {...props}\r\n      />\r\n    );\r\n  }\r\n);\r\n\r\nDashboardGrid.displayName = \"DashboardGrid\";\r\nDashboardGridItem.displayName = \"DashboardGridItem\";\r\n\r\nexport { \r\n  DashboardGrid, \r\n  DashboardGridItem, \r\n  gridVariants, \r\n  gridItemVariants \r\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG,CACtB,YAAY,EACZ;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,CAAC,EAAE,4BAA4B;AAC/B,YAAA,CAAC,EAAE,2CAA2C;AAC9C,YAAA,CAAC,EAAE,2CAA2C;AAC9C,YAAA,CAAC,EAAE,0DAA0D;AAC7D,YAAA,EAAE,EAAE,2EAA2E;AAChF,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,EAAE;AACZ,KAAA;AACF,CAAA;AAGH,MAAM,gBAAgB,GAAG,GAAG,CAC1B,SAAS;AACT;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,0BAA0B;AAC7B,YAAA,CAAC,EAAE,wCAAwC;AAC3C,YAAA,CAAC,EAAE,wCAAwC;AAC3C,YAAA,CAAC,EAAE,sDAAsD;AACzD,YAAA,EAAE,EAAE,eAAe;AACpB,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,YAAY;AAChB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AACF,CAAA;AAWH,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACxC,QACEA,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAC/C,KAAK,EAAA,CACT;AAEN,CAAC;AAGH,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACjD,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAC5D,KAAK,EAAA,CACT;AAEN,CAAC;AAGH,aAAa,CAAC,WAAW,GAAG,eAAe;AAC3C,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}
+{"version":3,"file":"DashboardGrid.js","sources":["../../../src/components/DashboardGrid/DashboardGrid.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst gridVariants = cva(\n  \"grid gap-6\",\n  {\n    variants: {\n      columns: {\n        1: \"grid-cols-1\",\n        2: \"grid-cols-1 md:grid-cols-2\",\n        3: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\n        4: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n        6: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6\",\n        12: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12\",\n      },\n    },\n    defaultVariants: {\n      columns: 12,\n    },\n  }\n);\n\nconst gridItemVariants = cva(\n  \"min-h-0\", // Prevents grid items from growing unnecessarily\n  {\n    variants: {\n      colSpan: {\n        1: \"col-span-1\",\n        2: \"col-span-1 md:col-span-2\",\n        3: \"col-span-1 md:col-span-2 lg:col-span-3\",\n        4: \"col-span-1 md:col-span-2 lg:col-span-4\",\n        6: \"col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-6\",\n        12: \"col-span-full\",\n      },\n      rowSpan: {\n        1: \"row-span-1\",\n        2: \"row-span-2\",\n        3: \"row-span-3\",\n        4: \"row-span-4\",\n      },\n    },\n    defaultVariants: {\n      colSpan: 1,\n      rowSpan: 1,\n    },\n  }\n);\n\ninterface DashboardGridProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof gridVariants> {}\n\ninterface DashboardGridItemProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof gridItemVariants> {}\n\nconst DashboardGrid = React.forwardRef<HTMLDivElement, DashboardGridProps>(\n  ({ className, columns, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(gridVariants({ columns }), className)}\n        {...props}\n      />\n    );\n  }\n);\n\nconst DashboardGridItem = React.forwardRef<HTMLDivElement, DashboardGridItemProps>(\n  ({ className, colSpan, rowSpan, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(gridItemVariants({ colSpan, rowSpan }), className)}\n        {...props}\n      />\n    );\n  }\n);\n\nDashboardGrid.displayName = \"DashboardGrid\";\nDashboardGridItem.displayName = \"DashboardGridItem\";\n\nexport { \n  DashboardGrid, \n  DashboardGridItem, \n  gridVariants, \n  gridItemVariants \n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG,CACtB,YAAY,EACZ;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,CAAC,EAAE,aAAa;AAChB,YAAA,CAAC,EAAE,4BAA4B;AAC/B,YAAA,CAAC,EAAE,2CAA2C;AAC9C,YAAA,CAAC,EAAE,2CAA2C;AAC9C,YAAA,CAAC,EAAE,0DAA0D;AAC7D,YAAA,EAAE,EAAE,2EAA2E;AAChF,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,EAAE;AACZ,KAAA;AACF,CAAA;AAGH,MAAM,gBAAgB,GAAG,GAAG,CAC1B,SAAS;AACT;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,0BAA0B;AAC7B,YAAA,CAAC,EAAE,wCAAwC;AAC3C,YAAA,CAAC,EAAE,wCAAwC;AAC3C,YAAA,CAAC,EAAE,sDAAsD;AACzD,YAAA,EAAE,EAAE,eAAe;AACpB,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,YAAY;AACf,YAAA,CAAC,EAAE,YAAY;AAChB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,CAAC;AACX,KAAA;AACF,CAAA;AAWH,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACxC,QACEA,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAC/C,KAAK,EAAA,CACT;AAEN,CAAC;AAGH,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IACjD,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAC5D,KAAK,EAAA,CACT;AAEN,CAAC;AAGH,aAAa,CAAC,WAAW,GAAG,eAAe;AAC3C,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/dist/components/DashboardHeader/DashboardHeader.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardHeader.example.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { DashboardHeader } from \"./DashboardHeader\";\r\n\r\nexport const DashboardHeaderExample: React.FC = () => (\r\n  <DashboardHeader breadcrumbs={[{ label: \"Dashboard\" }, { label: \"Insights\" }]} />\r\n);"],"names":["_jsx"],"mappings":";;;AAGO,MAAM,sBAAsB,GAAa,OAC9CA,GAAA,CAAC,eAAe,EAAA,EAAC,WAAW,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EAAA,CAAI;;;;"}
+{"version":3,"file":"DashboardHeader.example.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DashboardHeader } from \"./DashboardHeader\";\n\nexport const DashboardHeaderExample: React.FC = () => (\n  <DashboardHeader breadcrumbs={[{ label: \"Dashboard\" }, { label: \"Insights\" }]} />\n);"],"names":["_jsx"],"mappings":";;;AAGO,MAAM,sBAAsB,GAAa,OAC9CA,GAAA,CAAC,eAAe,EAAA,EAAC,WAAW,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EAAA,CAAI;;;;"}

package/dist/components/DashboardHeader/DashboardHeader.js

@@ -29,25 +29,25 @@ const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "
         setSearchValue(value);
         onSearchChange?.(value);
     };
-    return (jsx("header", { ref: ref, className: cn("z-30 bg-white border-b border-gray-200 transition-all duration-300", className), style: props.style, ...props, children: jsxs("div", { className: "flex w-full items-center justify-between px-6 py-4", children: [jsxs("div", { className: "flex items-center space-x-4 flex-shrink-0 flex-grow-0 min-w-0", children: [Array.isArray(leftSlot)
+    return (jsx("header", { ref: ref, className: cn("z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-all duration-300", className), style: props.style, ...props, children: jsxs("div", { className: "flex w-full items-center justify-between px-6 py-4", children: [jsxs("div", { className: "flex items-center space-x-4 flex-shrink-0 flex-grow-0 min-w-0", children: [Array.isArray(leftSlot)
                             ? leftSlot.map((item, idx) => (jsx("span", { onClick: item.onClick, className: item.onClick ? "cursor-pointer" : undefined, children: item.element }, item.id || idx)))
                             : leftSlot, (isSectionVisible(showMenuButton, isMobile ? "mobile" : "desktop")) && (jsx(Button, { variant: "ghost", size: "sm", onClick: e => {
                                 onMenuButtonClick?.();
                                 onMenuToggle?.();
-                            }, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) })), isSectionVisible(showBreadcrumbs, isMobile ? "mobile" : "desktop") && (jsx("nav", { className: cn("flex items-center space-x-2 text-sm", isMobile ? "w-full overflow-x-auto whitespace-nowrap py-1" : ""), children: breadcrumbs.map((item, index) => (jsxs(React.Fragment, { children: [index > 0 && (jsx("span", { className: "text-gray-400", children: "/" })), item.href ? (jsx("a", { href: item.href, className: "text-gray-600 hover:text-gray-900 transition-colors", onClick: e => {
+                            }, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) })), isSectionVisible(showBreadcrumbs, isMobile ? "mobile" : "desktop") && (jsx("nav", { className: cn("flex items-center space-x-2 text-sm", isMobile ? "w-full overflow-x-auto whitespace-nowrap py-1" : ""), children: breadcrumbs.map((item, index) => (jsxs(React.Fragment, { children: [index > 0 && (jsx("span", { className: "text-gray-400", children: "/" })), item.href ? (jsx("a", { href: item.href, className: "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors", onClick: e => {
                                             onBreadcrumbClick?.(item, index);
-                                        }, children: item.label })) : (jsx("span", { className: "text-gray-900 font-medium", onClick: e => {
+                                        }, children: item.label })) : (jsx("span", { className: "text-gray-900 dark:text-white font-medium", onClick: e => {
                                             onBreadcrumbClick?.(item, index);
                                         }, style: onBreadcrumbClick ? { cursor: "pointer" } : undefined, children: item.label }))] }, index))) }))] }), centerSlot ? (jsx("div", { className: "flex-1 min-w-0 flex justify-center", children: Array.isArray(centerSlot)
                         ? centerSlot.map((item, idx) => (jsx("span", { onClick: item.onClick, className: item.onClick ? "cursor-pointer" : undefined, children: item.element }, item.id || idx)))
-                        : centerSlot })) : (isSectionVisible(showSearch, isMobile ? "mobile" : "desktop") && (jsx("div", { className: "flex-1 min-w-0 mx-2", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: handleSearchChange, className: "pl-10 bg-gray-50 border-gray-200 focus:bg-white w-full" })] }) }))), jsxs("div", { className: "flex items-center space-x-3 flex-shrink-0 flex-grow-0 min-w-0", children: [Array.isArray(rightSlot)
+                        : centerSlot })) : (isSectionVisible(showSearch, isMobile ? "mobile" : "desktop") && (jsx("div", { className: "flex-1 min-w-0 mx-2", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500" }), jsx(Input, { type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: handleSearchChange, className: "pl-10 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 focus:bg-white dark:focus:bg-gray-900 dark:text-white w-full" })] }) }))), jsxs("div", { className: "flex items-center space-x-3 flex-shrink-0 flex-grow-0 min-w-0", children: [Array.isArray(rightSlot)
                             ? rightSlot.map((item, idx) => (jsx("span", { onClick: item.onClick, className: item.onClick ? "cursor-pointer" : undefined, children: item.element }, item.id || idx)))
                             : rightSlot, isSectionVisible(showNotifications, isMobile ? "mobile" : "desktop") && (jsx("div", { className: "relative", children: jsxs(Button, { variant: "ghost", size: "sm", className: "relative", onClick: onNotificationClick, children: [jsx(Bell, { className: "h-5 w-5" }), jsx(Badge, { variant: "danger", className: "absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center", children: "3" })] }) })), isSectionVisible(showSettings, isMobile ? "mobile" : "desktop") && (jsx(Button, { variant: "ghost", size: "sm", onClick: onSettingsClick, children: jsx(Settings, { className: "h-5 w-5" }) })), isSectionVisible(showProfile, isMobile ? "mobile" : "desktop") && (jsxs("div", { className: cn("flex items-center space-x-3 pl-3 border-l border-gray-200", onProfileClick ? "cursor-pointer hover:bg-gray-100 transition" : ""), onClick: onProfileClick, tabIndex: onProfileClick ? 0 : undefined, role: onProfileClick ? "button" : undefined, onKeyDown: onProfileClick ? (e) => {
                                 if (e.key === "Enter" || e.key === " ") {
                                     e.preventDefault();
                                     onProfileClick();
                                 }
-                            } : undefined, "aria-label": onProfileClick ? "Profile section" : undefined, children: [jsxs("div", { className: "hidden sm:block text-right", children: [jsx("p", { className: "text-sm font-medium text-gray-900", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500", children: "Administrator" })] }), jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] })] }))] })] }) }));
+                            } : undefined, "aria-label": onProfileClick ? "Profile section" : undefined, children: [jsxs("div", { className: "hidden sm:block text-right", children: [jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Administrator" })] }), jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] })] }))] })] }) }));
 });
 DashboardHeader.displayName = "DashboardHeader";
 

package/dist/components/DashboardHeader/DashboardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardHeader.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Search, Bell, Settings, Menu } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\n\ninterface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\ntype ResponsiveShow = boolean | { mobile?: boolean; desktop?: boolean };\n\ntype DashboardHeaderSlotItem = {\n  element: React.ReactNode;\n  onClick?: () => void;\n  id?: string;\n};\ntype DashboardHeaderSlot = React.ReactNode | DashboardHeaderSlotItem[];\n\ninterface DashboardHeaderProps {\n  className?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  onMenuToggle?: () => void;\n  sidebarCollapsed?: boolean;\n  showSearch?: ResponsiveShow;\n  searchPlaceholder?: string;\n  onSearchChange?: (value: string) => void;\n  style?: React.CSSProperties;\n\n  // New flexible API\n  showBreadcrumbs?: ResponsiveShow; // default true\n  showNotifications?: ResponsiveShow; // default true\n  showSettings?: ResponsiveShow; // default true\n  showProfile?: ResponsiveShow; // default true\n  showMenuButton?: ResponsiveShow; // default true\n\n  // OnClick handlers for standard components\n  onMenuButtonClick?: () => void;\n  onNotificationClick?: () => void;\n  onSettingsClick?: () => void;\n  onProfileClick?: () => void;\n  onBreadcrumbClick?: (item: BreadcrumbItem, index: number) => void;\n\n  // Custom slots\n  leftSlot?: DashboardHeaderSlot;\n  centerSlot?: DashboardHeaderSlot;\n  rightSlot?: DashboardHeaderSlot;\n}\n\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nconst DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(\n  ({\n    className,\n    breadcrumbs = [{ label: \"Dashboard\" }],\n    onMenuToggle,\n    sidebarCollapsed = false,\n    showSearch = true,\n    searchPlaceholder = \"Search...\",\n    onSearchChange,\n    showBreadcrumbs = true,\n    showNotifications = true,\n    showSettings = true,\n    showProfile = true,\n    showMenuButton = true,\n    leftSlot,\n    centerSlot,\n    rightSlot,\n    onMenuButtonClick,\n    onNotificationClick,\n    onSettingsClick,\n    onProfileClick,\n    onBreadcrumbClick,\n    ...props\n  }, ref) => {\n    const [searchValue, setSearchValue] = React.useState(\"\");\n    const { currentBreakpoint } = useBreakpoint();\n\n    // Helper to resolve ResponsiveShow prop\n    const isSectionVisible = (\n      prop: ResponsiveShow | undefined,\n      view: \"mobile\" | \"desktop\"\n    ): boolean => {\n      if (typeof prop === \"boolean\") return prop;\n      if (!prop) return true;\n      if (view === \"mobile\") return prop.mobile ?? false;\n      if (view === \"desktop\") return prop.desktop ?? false;\n      return true;\n    };\n\n    const isMobile = currentBreakpoint === \"sm\" || currentBreakpoint === \"md\";\n    const isDesktop = currentBreakpoint === \"lg\" || currentBreakpoint === \"xl\" || currentBreakpoint === \"2xl\";\n\n    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      setSearchValue(value);\n      onSearchChange?.(value);\n    };\n\n    return (\n      <header\n        ref={ref}\n        className={cn(\n          \"z-30 bg-white border-b border-gray-200 transition-all duration-300\",\n          className\n        )}\n        style={props.style}\n        {...props}\n      >\n        <div className=\"flex w-full items-center justify-between px-6 py-4\">\n          {/* Left Section */}\n          <div className=\"flex items-center space-x-4 flex-shrink-0 flex-grow-0 min-w-0\">\n            {/* Custom left slot */}\n            {Array.isArray(leftSlot)\n              ? leftSlot.map((item, idx) => (\n                  <span\n                    key={item.id || idx}\n                    onClick={item.onClick}\n                    className={item.onClick ? \"cursor-pointer\" : undefined}\n                  >\n                    {item.element}\n                  </span>\n                ))\n              : leftSlot}\n\n            {/* Mobile Menu Button */}\n            {(isSectionVisible(showMenuButton, isMobile ? \"mobile\" : \"desktop\")) && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={e => {\n                  onMenuButtonClick?.();\n                  onMenuToggle?.();\n                }}\n                className=\"md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n              </Button>\n            )}\n\n            {/* Breadcrumbs */}\n            {isSectionVisible(showBreadcrumbs, isMobile ? \"mobile\" : \"desktop\") && (\n              <nav\n                className={cn(\n                  \"flex items-center space-x-2 text-sm\",\n                  isMobile ? \"w-full overflow-x-auto whitespace-nowrap py-1\" : \"\"\n                )}\n              >\n                {breadcrumbs.map((item, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && (\n                      <span className=\"text-gray-400\">/</span>\n                    )}\n                    {item.href ? (\n                      <a\n                        href={item.href}\n                        className=\"text-gray-600 hover:text-gray-900 transition-colors\"\n                        onClick={e => {\n                          onBreadcrumbClick?.(item, index);\n                        }}\n                      >\n                        {item.label}\n                      </a>\n                    ) : (\n                      <span\n                        className=\"text-gray-900 font-medium\"\n                        onClick={e => {\n                          onBreadcrumbClick?.(item, index);\n                        }}\n                        style={onBreadcrumbClick ? { cursor: \"pointer\" } : undefined}\n                      >\n                        {item.label}\n                      </span>\n                    )}\n                  </React.Fragment>\n                ))}\n              </nav>\n            )}\n          </div>\n\n          {/* Center Section - Search or custom center slot */}\n          {centerSlot ? (\n            <div className=\"flex-1 min-w-0 flex justify-center\">\n              {Array.isArray(centerSlot)\n                ? centerSlot.map((item, idx) => (\n                    <span\n                      key={item.id || idx}\n                      onClick={item.onClick}\n                      className={item.onClick ? \"cursor-pointer\" : undefined}\n                    >\n                      {item.element}\n                    </span>\n                  ))\n                : centerSlot}\n            </div>\n          ) : (\n            isSectionVisible(showSearch, isMobile ? \"mobile\" : \"desktop\") && (\n              <div className=\"flex-1 min-w-0 mx-2\">\n                <div className=\"relative\">\n                  <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\n                  <Input\n                    type=\"text\"\n                    placeholder={searchPlaceholder}\n                    value={searchValue}\n                    onChange={handleSearchChange}\n                    className=\"pl-10 bg-gray-50 border-gray-200 focus:bg-white w-full\"\n                  />\n                </div>\n              </div>\n            )\n          )}\n\n          {/* Right Section */}\n          <div className=\"flex items-center space-x-3 flex-shrink-0 flex-grow-0 min-w-0\">\n            {/* Custom right slot */}\n            {Array.isArray(rightSlot)\n              ? rightSlot.map((item, idx) => (\n                  <span\n                    key={item.id || idx}\n                    onClick={item.onClick}\n                    className={item.onClick ? \"cursor-pointer\" : undefined}\n                  >\n                    {item.element}\n                  </span>\n                ))\n              : rightSlot}\n\n            {/* Notifications */}\n            {isSectionVisible(showNotifications, isMobile ? \"mobile\" : \"desktop\") && (\n              <div className=\"relative\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"relative\"\n                  onClick={onNotificationClick}\n                >\n                  <Bell className=\"h-5 w-5\" />\n                  <Badge\n                    variant=\"danger\"\n                    className=\"absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center\"\n                  >\n                    3\n                  </Badge>\n                </Button>\n              </div>\n            )}\n\n            {/* Settings */}\n            {isSectionVisible(showSettings, isMobile ? \"mobile\" : \"desktop\") && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={onSettingsClick}\n              >\n                <Settings className=\"h-5 w-5\" />\n              </Button>\n            )}\n\n            {/* User Profile */}\n            {isSectionVisible(showProfile, isMobile ? \"mobile\" : \"desktop\") && (\n              <div\n                className={cn(\n                  \"flex items-center space-x-3 pl-3 border-l border-gray-200\",\n                  onProfileClick ? \"cursor-pointer hover:bg-gray-100 transition\" : \"\"\n                )}\n                onClick={onProfileClick}\n                tabIndex={onProfileClick ? 0 : undefined}\n                role={onProfileClick ? \"button\" : undefined}\n                onKeyDown={onProfileClick ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    onProfileClick();\n                  }\n                } : undefined}\n                aria-label={onProfileClick ? \"Profile section\" : undefined}\n              >\n                <div className=\"hidden sm:block text-right\">\n                  <p className=\"text-sm font-medium text-gray-900\">John Doe</p>\n                  <p className=\"text-xs text-gray-500\">Administrator</p>\n                </div>\n                <Avatar size=\"sm\">\n                  <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n                  <AvatarFallback>JD</AvatarFallback>\n                </Avatar>\n              </div>\n            )}\n          </div>\n        </div>\n      </header>\n    );\n  }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem, type DashboardHeaderProps };"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"DashboardHeader.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Search, Bell, Settings, Menu } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\n\ninterface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\ntype ResponsiveShow = boolean | { mobile?: boolean; desktop?: boolean };\n\ntype DashboardHeaderSlotItem = {\n  element: React.ReactNode;\n  onClick?: () => void;\n  id?: string;\n};\ntype DashboardHeaderSlot = React.ReactNode | DashboardHeaderSlotItem[];\n\ninterface DashboardHeaderProps {\n  className?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  onMenuToggle?: () => void;\n  sidebarCollapsed?: boolean;\n  showSearch?: ResponsiveShow;\n  searchPlaceholder?: string;\n  onSearchChange?: (value: string) => void;\n  style?: React.CSSProperties;\n\n  // New flexible API\n  showBreadcrumbs?: ResponsiveShow; // default true\n  showNotifications?: ResponsiveShow; // default true\n  showSettings?: ResponsiveShow; // default true\n  showProfile?: ResponsiveShow; // default true\n  showMenuButton?: ResponsiveShow; // default true\n\n  // OnClick handlers for standard components\n  onMenuButtonClick?: () => void;\n  onNotificationClick?: () => void;\n  onSettingsClick?: () => void;\n  onProfileClick?: () => void;\n  onBreadcrumbClick?: (item: BreadcrumbItem, index: number) => void;\n\n  // Custom slots\n  leftSlot?: DashboardHeaderSlot;\n  centerSlot?: DashboardHeaderSlot;\n  rightSlot?: DashboardHeaderSlot;\n}\n\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nconst DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(\n  ({\n    className,\n    breadcrumbs = [{ label: \"Dashboard\" }],\n    onMenuToggle,\n    sidebarCollapsed = false,\n    showSearch = true,\n    searchPlaceholder = \"Search...\",\n    onSearchChange,\n    showBreadcrumbs = true,\n    showNotifications = true,\n    showSettings = true,\n    showProfile = true,\n    showMenuButton = true,\n    leftSlot,\n    centerSlot,\n    rightSlot,\n    onMenuButtonClick,\n    onNotificationClick,\n    onSettingsClick,\n    onProfileClick,\n    onBreadcrumbClick,\n    ...props\n  }, ref) => {\n    const [searchValue, setSearchValue] = React.useState(\"\");\n    const { currentBreakpoint } = useBreakpoint();\n\n    // Helper to resolve ResponsiveShow prop\n    const isSectionVisible = (\n      prop: ResponsiveShow | undefined,\n      view: \"mobile\" | \"desktop\"\n    ): boolean => {\n      if (typeof prop === \"boolean\") return prop;\n      if (!prop) return true;\n      if (view === \"mobile\") return prop.mobile ?? false;\n      if (view === \"desktop\") return prop.desktop ?? false;\n      return true;\n    };\n\n    const isMobile = currentBreakpoint === \"sm\" || currentBreakpoint === \"md\";\n    const isDesktop = currentBreakpoint === \"lg\" || currentBreakpoint === \"xl\" || currentBreakpoint === \"2xl\";\n\n    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      setSearchValue(value);\n      onSearchChange?.(value);\n    };\n\n    return (\n      <header\n        ref={ref}\n        className={cn(\n          \"z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-all duration-300\",\n          className\n        )}\n        style={props.style}\n        {...props}\n      >\n        <div className=\"flex w-full items-center justify-between px-6 py-4\">\n          {/* Left Section */}\n          <div className=\"flex items-center space-x-4 flex-shrink-0 flex-grow-0 min-w-0\">\n            {/* Custom left slot */}\n            {Array.isArray(leftSlot)\n              ? leftSlot.map((item, idx) => (\n                  <span\n                    key={item.id || idx}\n                    onClick={item.onClick}\n                    className={item.onClick ? \"cursor-pointer\" : undefined}\n                  >\n                    {item.element}\n                  </span>\n                ))\n              : leftSlot}\n\n            {/* Mobile Menu Button */}\n            {(isSectionVisible(showMenuButton, isMobile ? \"mobile\" : \"desktop\")) && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={e => {\n                  onMenuButtonClick?.();\n                  onMenuToggle?.();\n                }}\n                className=\"md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n              </Button>\n            )}\n\n            {/* Breadcrumbs */}\n            {isSectionVisible(showBreadcrumbs, isMobile ? \"mobile\" : \"desktop\") && (\n              <nav\n                className={cn(\n                  \"flex items-center space-x-2 text-sm\",\n                  isMobile ? \"w-full overflow-x-auto whitespace-nowrap py-1\" : \"\"\n                )}\n              >\n                {breadcrumbs.map((item, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && (\n                      <span className=\"text-gray-400\">/</span>\n                    )}\n                    {item.href ? (\n                      <a\n                        href={item.href}\n                        className=\"text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors\"\n                        onClick={e => {\n                          onBreadcrumbClick?.(item, index);\n                        }}\n                      >\n                        {item.label}\n                      </a>\n                    ) : (\n                      <span\n                        className=\"text-gray-900 dark:text-white font-medium\"\n                        onClick={e => {\n                          onBreadcrumbClick?.(item, index);\n                        }}\n                        style={onBreadcrumbClick ? { cursor: \"pointer\" } : undefined}\n                      >\n                        {item.label}\n                      </span>\n                    )}\n                  </React.Fragment>\n                ))}\n              </nav>\n            )}\n          </div>\n\n          {/* Center Section - Search or custom center slot */}\n          {centerSlot ? (\n            <div className=\"flex-1 min-w-0 flex justify-center\">\n              {Array.isArray(centerSlot)\n                ? centerSlot.map((item, idx) => (\n                    <span\n                      key={item.id || idx}\n                      onClick={item.onClick}\n                      className={item.onClick ? \"cursor-pointer\" : undefined}\n                    >\n                      {item.element}\n                    </span>\n                  ))\n                : centerSlot}\n            </div>\n          ) : (\n            isSectionVisible(showSearch, isMobile ? \"mobile\" : \"desktop\") && (\n              <div className=\"flex-1 min-w-0 mx-2\">\n                <div className=\"relative\">\n                  <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500\" />\n                  <Input\n                    type=\"text\"\n                    placeholder={searchPlaceholder}\n                    value={searchValue}\n                    onChange={handleSearchChange}\n                    className=\"pl-10 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 focus:bg-white dark:focus:bg-gray-900 dark:text-white w-full\"\n                  />\n                </div>\n              </div>\n            )\n          )}\n\n          {/* Right Section */}\n          <div className=\"flex items-center space-x-3 flex-shrink-0 flex-grow-0 min-w-0\">\n            {/* Custom right slot */}\n            {Array.isArray(rightSlot)\n              ? rightSlot.map((item, idx) => (\n                  <span\n                    key={item.id || idx}\n                    onClick={item.onClick}\n                    className={item.onClick ? \"cursor-pointer\" : undefined}\n                  >\n                    {item.element}\n                  </span>\n                ))\n              : rightSlot}\n\n            {/* Notifications */}\n            {isSectionVisible(showNotifications, isMobile ? \"mobile\" : \"desktop\") && (\n              <div className=\"relative\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"relative\"\n                  onClick={onNotificationClick}\n                >\n                  <Bell className=\"h-5 w-5\" />\n                  <Badge\n                    variant=\"danger\"\n                    className=\"absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center\"\n                  >\n                    3\n                  </Badge>\n                </Button>\n              </div>\n            )}\n\n            {/* Settings */}\n            {isSectionVisible(showSettings, isMobile ? \"mobile\" : \"desktop\") && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={onSettingsClick}\n              >\n                <Settings className=\"h-5 w-5\" />\n              </Button>\n            )}\n\n            {/* User Profile */}\n            {isSectionVisible(showProfile, isMobile ? \"mobile\" : \"desktop\") && (\n              <div\n                className={cn(\n                  \"flex items-center space-x-3 pl-3 border-l border-gray-200\",\n                  onProfileClick ? \"cursor-pointer hover:bg-gray-100 transition\" : \"\"\n                )}\n                onClick={onProfileClick}\n                tabIndex={onProfileClick ? 0 : undefined}\n                role={onProfileClick ? \"button\" : undefined}\n                onKeyDown={onProfileClick ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    onProfileClick();\n                  }\n                } : undefined}\n                aria-label={onProfileClick ? \"Profile section\" : undefined}\n              >\n                <div className=\"hidden sm:block text-right\">\n              <p className=\"text-sm font-medium text-gray-900 dark:text-white\">John Doe</p>\n              <p className=\"text-xs text-gray-500 dark:text-gray-400\">Administrator</p>\n                </div>\n                <Avatar size=\"sm\">\n                  <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n                  <AvatarFallback>JD</AvatarFallback>\n                </Avatar>\n              </div>\n            )}\n          </div>\n        </div>\n      </header>\n    );\n  }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem, type DashboardHeaderProps };"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/DashboardLayout/DashboardLayout.example.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardLayout.example.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { DashboardLayout } from \"./DashboardLayout\";\r\n\r\nexport const DashboardLayoutExample: React.FC = () => (\r\n  <DashboardLayout sidebarTitle=\"Mazao\" sidebarTitleLetter=\"A\">\r\n    <div className=\"p-4\">This is the dashboard content area.</div>\r\n  </DashboardLayout>\r\n);"],"names":["_jsx"],"mappings":";;;AAGO,MAAM,sBAAsB,GAAa,OAC9CA,GAAA,CAAC,eAAe,EAAA,EAAC,YAAY,EAAC,OAAO,EAAC,kBAAkB,EAAC,GAAG,EAAA,QAAA,EAC1DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,qCAAA,EAAA,CAA0C,EAAA,CAC9C;;;;"}
+{"version":3,"file":"DashboardLayout.example.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DashboardLayout } from \"./DashboardLayout\";\n\nexport const DashboardLayoutExample: React.FC = () => (\n  <DashboardLayout sidebarTitle=\"Mazao\" sidebarTitleLetter=\"A\">\n    <div className=\"p-4\">This is the dashboard content area.</div>\n  </DashboardLayout>\n);"],"names":["_jsx"],"mappings":";;;AAGO,MAAM,sBAAsB,GAAa,OAC9CA,GAAA,CAAC,eAAe,EAAA,EAAC,YAAY,EAAC,OAAO,EAAC,kBAAkB,EAAC,GAAG,EAAA,QAAA,EAC1DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,qCAAA,EAAA,CAA0C,EAAA,CAC9C;;;;"}

package/dist/components/DashboardLayout/DashboardLayout.js

@@ -9,7 +9,7 @@ const DashboardLayout = React.forwardRef(({ children, className, sidebarMenuItem
     const toggleSidebar = () => {
         setSidebarCollapsed(prev => !prev);
     };
-    return (jsxs("div", { ref: ref, className: cn("bg-gray-50 w-full h-screen overflow-hidden", className), ...props, children: [jsx(Sidebar, { collapsed: sidebarCollapsed, onToggle: toggleSidebar, menuItems: sidebarMenuItems, activeItem: activeSidebarItem, onItemClick: onSidebarItemClick, className: props.sidebarClassName, title: sidebarTitle, titleLetter: sidebarTitleLetter, headerClassName: sidebarHeaderClassName, style: {
+    return (jsxs("div", { ref: ref, className: cn("bg-gray-50 dark:bg-gray-900 w-full h-screen overflow-hidden", className), ...props, children: [jsx(Sidebar, { collapsed: sidebarCollapsed, onToggle: toggleSidebar, menuItems: sidebarMenuItems, activeItem: activeSidebarItem, onItemClick: onSidebarItemClick, className: props.sidebarClassName, title: sidebarTitle, titleLetter: sidebarTitleLetter, headerClassName: sidebarHeaderClassName, style: {
                     zIndex: 50,
                     position: "fixed",
                     left: 0,

package/dist/components/DashboardLayout/DashboardLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardLayout.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Sidebar, type MenuItem, type SidebarProfileSectionProps } from \"../Sidebar\";\r\nimport { DashboardHeader, type BreadcrumbItem } from \"../DashboardHeader\";\r\n\r\n/**\r\n * DashboardLayoutProps\r\n * - sidebarTitle: Title text for Sidebar header (default: \"Beyond\")\r\n * - sidebarTitleLetter: Letter/initial for Sidebar header (default: \"B\")\r\n * - sidebarHeaderClassName: Optional className for SidebarHeader\r\n *\r\n * These props are forwarded to Sidebar for dynamic header branding.\r\n */\r\nimport type { DashboardHeaderProps } from \"../DashboardHeader\";\r\n\r\ninterface DashboardLayoutProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  sidebarMenuItems?: MenuItem[];\r\n  activeSidebarItem?: string;\r\n  breadcrumbs?: BreadcrumbItem[];\r\n  onSidebarItemClick?: (itemId: string) => void;\r\n  showSearch?: boolean;\r\n  searchPlaceholder?: string;\r\n  onSearchChange?: (value: string) => void;\r\n  sidebarClassName?: string;\r\n  disableSidebarMargin?: boolean;\r\n  /** Sidebar header title (default: \"Beyond\") */\r\n  sidebarTitle?: string;\r\n  /** Sidebar header letter (default: \"B\") */\r\n  sidebarTitleLetter?: string;\r\n  /** Optional className for SidebarHeader */\r\n  sidebarHeaderClassName?: string;\r\n  /** Props for ProfileButton in Sidebar */\r\n  profileButtonProps?: import(\"../Sidebar/ProfileButton\").ProfileButtonProps;\r\n  /** Props for LogoutButton in Sidebar */\r\n  logoutButtonProps?: import(\"../Sidebar/LogoutButton\").LogoutButtonProps;\r\n  /** Props for Sidebar profile section (avatar, name, email, etc.) */\r\n  profileSectionProps?: SidebarProfileSectionProps;\r\n\r\n  /** Props to customize DashboardHeader */\r\n  dashboardHeaderProps?: DashboardHeaderProps;\r\n}\r\n\r\nconst DashboardLayout = React.forwardRef<HTMLDivElement, DashboardLayoutProps>(\r\n  ({\r\n    children,\r\n    className,\r\n    sidebarMenuItems,\r\n    activeSidebarItem,\r\n    breadcrumbs,\r\n    onSidebarItemClick,\r\n    showSearch,\r\n    searchPlaceholder,\r\n    onSearchChange,\r\n    sidebarTitle,\r\n    sidebarTitleLetter,\r\n    sidebarHeaderClassName,\r\n    profileButtonProps,\r\n    logoutButtonProps,\r\n    profileSectionProps,\r\n    dashboardHeaderProps,\r\n    ...props\r\n  }, ref) => {\r\n    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);\r\n\r\n    const toggleSidebar = () => {\r\n      setSidebarCollapsed(prev => !prev);\r\n    };\r\n\r\n    return (\r\n      <div ref={ref} className={cn(\"bg-gray-50 w-full h-screen overflow-hidden\", className)} {...props}>\r\n        {/* Fixed Sidebar */}\r\n        <Sidebar\r\n          collapsed={sidebarCollapsed}\r\n          onToggle={toggleSidebar}\r\n          menuItems={sidebarMenuItems}\r\n          activeItem={activeSidebarItem}\r\n          onItemClick={onSidebarItemClick}\r\n          className={props.sidebarClassName}\r\n          title={sidebarTitle}\r\n          titleLetter={sidebarTitleLetter}\r\n          headerClassName={sidebarHeaderClassName}\r\n          style={{\r\n            zIndex: 50,\r\n            position: \"fixed\",\r\n            left: 0,\r\n            top: 0,\r\n            height: \"100vh\",\r\n            width: sidebarCollapsed ? \"4rem\" : \"18rem\", // Tailwind: w-16 or w-72\r\n            transition: \"width 0.3s\",\r\n          }}\r\n          profileButtonProps={profileButtonProps}\r\n          logoutButtonProps={logoutButtonProps}\r\n          profileSectionProps={profileSectionProps}\r\n        />\r\n\r\n        {/* Fixed Header */}\r\n        <DashboardHeader\r\n          sidebarCollapsed={sidebarCollapsed}\r\n          onMenuToggle={toggleSidebar}\r\n          breadcrumbs={breadcrumbs}\r\n          showSearch={showSearch}\r\n          searchPlaceholder={searchPlaceholder}\r\n          onSearchChange={onSearchChange}\r\n          style={{\r\n            zIndex: 30,\r\n            position: \"fixed\",\r\n            top: 0,\r\n            left: sidebarCollapsed ? \"4rem\" : \"18rem\",\r\n            right: 0,\r\n            width: `calc(100% - ${sidebarCollapsed ? \"4rem\" : \"18rem\"})`,\r\n            transition: \"left 0.3s, width 0.3s\",\r\n          }}\r\n          {...dashboardHeaderProps}\r\n        />\r\n\r\n        {/* Main Content Area (scrollable) */}\r\n        <div\r\n          className={cn(\r\n            \"relative w-full h-full\",\r\n            props.disableSidebarMargin ? \"\" : \"\"\r\n          )}\r\n          style={{\r\n            marginLeft: sidebarCollapsed ? \"4rem\" : \"18rem\",\r\n            marginTop: \"4.5rem\", // Header height (py-4 + border)\r\n            height: \"calc(100vh - 4.5rem)\",\r\n            overflowY: \"auto\",\r\n            transition: \"margin-left 0.3s\",\r\n          }}\r\n        >\r\n          <main className=\"p-10 w-[90vw]\">\r\n            {children}\r\n          </main>\r\n        </div>\r\n\r\n        {/* Mobile Overlay */}\r\n        {!sidebarCollapsed && (\r\n          <div\r\n            className=\"fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden\"\r\n            onClick={toggleSidebar}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nDashboardLayout.displayName = \"DashboardLayout\";\r\n\r\nexport { DashboardLayout };"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"DashboardLayout.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Sidebar, type MenuItem, type SidebarProfileSectionProps } from \"../Sidebar\";\nimport { DashboardHeader, type BreadcrumbItem } from \"../DashboardHeader\";\n\n/**\n * DashboardLayoutProps\n * - sidebarTitle: Title text for Sidebar header (default: \"Beyond\")\n * - sidebarTitleLetter: Letter/initial for Sidebar header (default: \"B\")\n * - sidebarHeaderClassName: Optional className for SidebarHeader\n *\n * These props are forwarded to Sidebar for dynamic header branding.\n */\nimport type { DashboardHeaderProps } from \"../DashboardHeader\";\n\ninterface DashboardLayoutProps {\n  children: React.ReactNode;\n  className?: string;\n  sidebarMenuItems?: MenuItem[];\n  activeSidebarItem?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  onSidebarItemClick?: (itemId: string) => void;\n  showSearch?: boolean;\n  searchPlaceholder?: string;\n  onSearchChange?: (value: string) => void;\n  sidebarClassName?: string;\n  disableSidebarMargin?: boolean;\n  /** Sidebar header title (default: \"Beyond\") */\n  sidebarTitle?: string;\n  /** Sidebar header letter (default: \"B\") */\n  sidebarTitleLetter?: string;\n  /** Optional className for SidebarHeader */\n  sidebarHeaderClassName?: string;\n  /** Props for ProfileButton in Sidebar */\n  profileButtonProps?: import(\"../Sidebar/ProfileButton\").ProfileButtonProps;\n  /** Props for LogoutButton in Sidebar */\n  logoutButtonProps?: import(\"../Sidebar/LogoutButton\").LogoutButtonProps;\n  /** Props for Sidebar profile section (avatar, name, email, etc.) */\n  profileSectionProps?: SidebarProfileSectionProps;\n\n  /** Props to customize DashboardHeader */\n  dashboardHeaderProps?: DashboardHeaderProps;\n}\n\nconst DashboardLayout = React.forwardRef<HTMLDivElement, DashboardLayoutProps>(\n  ({\n    children,\n    className,\n    sidebarMenuItems,\n    activeSidebarItem,\n    breadcrumbs,\n    onSidebarItemClick,\n    showSearch,\n    searchPlaceholder,\n    onSearchChange,\n    sidebarTitle,\n    sidebarTitleLetter,\n    sidebarHeaderClassName,\n    profileButtonProps,\n    logoutButtonProps,\n    profileSectionProps,\n    dashboardHeaderProps,\n    ...props\n  }, ref) => {\n    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);\n\n    const toggleSidebar = () => {\n      setSidebarCollapsed(prev => !prev);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"bg-gray-50 dark:bg-gray-900 w-full h-screen overflow-hidden\", className)} {...props}>\n        {/* Fixed Sidebar */}\n        <Sidebar\n          collapsed={sidebarCollapsed}\n          onToggle={toggleSidebar}\n          menuItems={sidebarMenuItems}\n          activeItem={activeSidebarItem}\n          onItemClick={onSidebarItemClick}\n          className={props.sidebarClassName}\n          title={sidebarTitle}\n          titleLetter={sidebarTitleLetter}\n          headerClassName={sidebarHeaderClassName}\n          style={{\n            zIndex: 50,\n            position: \"fixed\",\n            left: 0,\n            top: 0,\n            height: \"100vh\",\n            width: sidebarCollapsed ? \"4rem\" : \"18rem\", // Tailwind: w-16 or w-72\n            transition: \"width 0.3s\",\n          }}\n          profileButtonProps={profileButtonProps}\n          logoutButtonProps={logoutButtonProps}\n          profileSectionProps={profileSectionProps}\n        />\n\n        {/* Fixed Header */}\n        <DashboardHeader\n          sidebarCollapsed={sidebarCollapsed}\n          onMenuToggle={toggleSidebar}\n          breadcrumbs={breadcrumbs}\n          showSearch={showSearch}\n          searchPlaceholder={searchPlaceholder}\n          onSearchChange={onSearchChange}\n          style={{\n            zIndex: 30,\n            position: \"fixed\",\n            top: 0,\n            left: sidebarCollapsed ? \"4rem\" : \"18rem\",\n            right: 0,\n            width: `calc(100% - ${sidebarCollapsed ? \"4rem\" : \"18rem\"})`,\n            transition: \"left 0.3s, width 0.3s\",\n          }}\n          {...dashboardHeaderProps}\n        />\n\n        {/* Main Content Area (scrollable) */}\n        <div\n          className={cn(\n            \"relative w-full h-full\",\n            props.disableSidebarMargin ? \"\" : \"\"\n          )}\n          style={{\n            marginLeft: sidebarCollapsed ? \"4rem\" : \"18rem\",\n            marginTop: \"4.5rem\", // Header height (py-4 + border)\n            height: \"calc(100vh - 4.5rem)\",\n            overflowY: \"auto\",\n            transition: \"margin-left 0.3s\",\n          }}\n        >\n          <main className=\"p-10 w-[90vw]\">\n            {children}\n          </main>\n        </div>\n\n        {/* Mobile Overlay */}\n        {!sidebarCollapsed && (\n          <div\n            className=\"fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden\"\n            onClick={toggleSidebar}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nDashboardLayout.displayName = \"DashboardLayout\";\n\nexport { DashboardLayout };"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AA4CA,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EACC,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,sBAAsB,EACtB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,GAAG,KAAI;AACR,IAAA,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;IAErE,MAAM,aAAa,GAAG,MAAK;QACzB,mBAAmB,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;AACpC,IAAA,CAAC;IAED,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,6DAA6D,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EAAA,CAE/GC,GAAA,CAAC,OAAO,EAAA,EACN,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,WAAW,EAAE,kBAAkB,EAC/B,SAAS,EAAE,KAAK,CAAC,gBAAgB,EACjC,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,kBAAkB,EAC/B,eAAe,EAAE,sBAAsB,EACvC,KAAK,EAAE;AACL,oBAAA,MAAM,EAAE,EAAE;AACV,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,MAAM,EAAE,OAAO;oBACf,KAAK,EAAE,gBAAgB,GAAG,MAAM,GAAG,OAAO;AAC1C,oBAAA,UAAU,EAAE,YAAY;AACzB,iBAAA,EACD,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,EACpC,mBAAmB,EAAE,mBAAmB,GACxC,EAGFA,GAAA,CAAC,eAAe,EAAA,EACd,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,aAAa,EAC3B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE;AACL,oBAAA,MAAM,EAAE,EAAE;AACV,oBAAA,QAAQ,EAAE,OAAO;AACjB,oBAAA,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,gBAAgB,GAAG,MAAM,GAAG,OAAO;AACzC,oBAAA,KAAK,EAAE,CAAC;oBACR,KAAK,EAAE,CAAA,YAAA,EAAe,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA,CAAA,CAAG;AAC5D,oBAAA,UAAU,EAAE,uBAAuB;iBACpC,EAAA,GACG,oBAAoB,EAAA,CACxB,EAGFA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,wBAAwB,EACxB,KAAK,CAAC,oBAAoB,GAAG,EAAE,GAAG,EAAE,CACrC,EACD,KAAK,EAAE;oBACL,UAAU,EAAE,gBAAgB,GAAG,MAAM,GAAG,OAAO;oBAC/C,SAAS,EAAE,QAAQ;AACnB,oBAAA,MAAM,EAAE,sBAAsB;AAC9B,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,UAAU,EAAE,kBAAkB;iBAC/B,EAAA,QAAA,EAEDA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAC5B,QAAQ,EAAA,CACJ,EAAA,CACH,EAGL,CAAC,gBAAgB,KAChBA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,qDAAqD,EAC/D,OAAO,EAAE,aAAa,EAAA,CACtB,CACH,CAAA,EAAA,CACG;AAEV,CAAC;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}

package/dist/components/DataTable/DataTable.js

@@ -11,7 +11,7 @@ import { Card, CardContent } from '../Card/Card.js';
 import { useBreakpoint } from '../../hooks/useBreakpoint.js';
 import { Select } from '../Select/Select.js';
 
-const tableVariants = cva("w-full border-collapse bg-white", {
+const tableVariants = cva("w-full border-collapse bg-white dark:bg-gray-900", {
     variants: {
         size: {
             small: "text-xs",
@@ -19,7 +19,7 @@ const tableVariants = cva("w-full border-collapse bg-white", {
             large: "text-base",
         },
         bordered: {
-            true: "border border-gray-200",
+            true: "border border-gray-200 dark:border-gray-800",
             false: "",
         },
     },
@@ -28,7 +28,7 @@ const tableVariants = cva("w-full border-collapse bg-white", {
         bordered: false,
     },
 });
-const cellVariants = cva("border-b border-gray-200 transition-colors", {
+const cellVariants = cva("border-b border-gray-200 dark:border-gray-800 transition-colors", {
     variants: {
         size: {
             small: "px-2 py-1",
@@ -41,8 +41,8 @@ const cellVariants = cva("border-b border-gray-200 transition-colors", {
             right: "text-right",
         },
         type: {
-            header: "bg-gray-50 font-semibold text-gray-900 border-b-2 border-gray-200",
-            body: "text-gray-700 hover:bg-gray-50",
+            header: "bg-gray-50 dark:bg-gray-800/50 font-semibold text-gray-900 dark:text-gray-100 border-b-2 border-gray-200 dark:border-gray-800",
+            body: "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800/50",
         },
     },
     defaultVariants: {
@@ -217,12 +217,12 @@ const DataTable = ({ columns, dataSource, loading = false, rowKey = 'id', pagina
     // Selection state
     const isAllSelected = selectedRowKeys.length === dataSource.length && dataSource.length > 0;
     const isIndeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < dataSource.length;
-    if (loading) {
-        return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: jsx("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, i) => (jsxs("div", { className: "flex space-x-4", children: [jsx(Skeleton, { className: "h-4 w-8" }), jsx(Skeleton, { className: "h-4 flex-1" }), jsx(Skeleton, { className: "h-4 w-24" }), jsx(Skeleton, { className: "h-4 w-16" })] }, i))) }) })] }));
-    }
     // Mobile-first responsive: useBreakpoint to switch between table and card layouts
     const { isBelow } = useBreakpoint();
-    return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [isBelow('md') ? (jsx("div", { className: "space-y-4 p-2", children: paginatedData.length === 0 ? (jsxs("div", { className: "text-gray-500 text-center py-8", children: [jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCCB" }), jsx("div", { children: "No data available" })] })) : (paginatedData.map((record, index) => {
+    if (loading) {
+        return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsx("div", { className: "border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden", children: jsx("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, i) => (jsxs("div", { className: "flex space-x-4", children: [jsx(Skeleton, { className: "h-4 w-8" }), jsx(Skeleton, { className: "h-4 flex-1" }), jsx(Skeleton, { className: "h-4 w-24" }), jsx(Skeleton, { className: "h-4 w-16" })] }, i))) }) })] }));
+    }
+    return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsxs("div", { className: "border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden", children: [isBelow('md') ? (jsx("div", { className: "space-y-4 p-2", children: paginatedData.length === 0 ? (jsxs("div", { className: "text-gray-500 dark:text-gray-400 text-center py-8", children: [jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCCB" }), jsx("div", { children: "No data available" })] })) : (paginatedData.map((record, index) => {
                             const key = getRowKey(record, index);
                             const isSelected = selectedRowKeys.includes(key);
                             return (jsx(Card, { variant: isSelected ? "elevated" : "default", padding: "sm", className: cn("transition-shadow", isSelected && "border-primary-600 shadow-lg"), children: jsxs(CardContent, { className: "space-y-2", children: [rowSelection && (jsxs("div", { className: "flex items-center mb-2", children: [jsx(Checkbox, { checked: isSelected, onChange: (e) => handleRowSelect(record, e.target.checked), ...rowSelection.getCheckboxProps?.(record) }), jsx("span", { className: "ml-2 text-xs text-gray-500", children: "Select" })] })), columns.map((column) => (jsxs("div", { className: "flex justify-between items-center py-1 border-b last:border-b-0", children: [jsx("span", { className: "font-medium text-gray-700", children: column.title }), jsx("span", { className: "text-gray-900", children: column.render