@beyondcorp/beyond-ui 1.2.87 → 1.2.91

package/dist/components/Alert/Alert.js

@@ -6,11 +6,11 @@ import { cn } from '../../utils/cn.js';
 const alertVariants = cva("relative w-full rounded-lg border p-4", {
     variants: {
         variant: {
-            default: "bg-white text-gray-950 border-gray-200",
-            success: "bg-success-50 text-success-800 border-success-200",
-            warning: "bg-warning-50 text-warning-800 border-warning-200",
-            danger: "bg-danger-50 text-danger-800 border-danger-200",
-            info: "bg-primary-50 text-primary-800 border-primary-200",
+            default: "bg-white dark:bg-gray-900 text-gray-950 dark:text-gray-50 border-gray-200 dark:border-gray-800",
+            success: "bg-success-50 dark:bg-success-900/30 text-success-800 dark:text-success-400 border-success-200 dark:border-success-800",
+            warning: "bg-warning-50 dark:bg-warning-900/30 text-warning-800 dark:text-warning-400 border-warning-200 dark:border-warning-800",
+            danger: "bg-danger-50 dark:bg-danger-900/30 text-danger-800 dark:text-danger-400 border-danger-200 dark:border-danger-800",
+            info: "bg-primary-50 dark:bg-primary-900/30 text-primary-800 dark:text-primary-400 border-primary-200 dark:border-primary-800",
         },
     },
     defaultVariants: {

package/dist/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-white text-gray-950 border-gray-200\",\n        success: \"bg-success-50 text-success-800 border-success-200\",\n        warning: \"bg-warning-50 text-warning-800 border-warning-200\",\n        danger: \"bg-danger-50 text-danger-800 border-danger-200\",\n        info: \"bg-primary-50 text-primary-800 border-primary-200\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n));\nAlert.displayName = \"Alert\";\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n));\nAlertTitle.displayName = \"AlertTitle\";\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n));\nAlertDescription.displayName = \"AlertDescription\";\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,aAAa,GAAG,GAAG,CACvB,uCAAuC,EACvC;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,wCAAwC;AACjD,YAAA,OAAO,EAAE,mDAAmD;AAC5D,YAAA,OAAO,EAAE,mDAAmD;AAC5D,YAAA,MAAM,EAAE,gDAAgD;AACxD,YAAA,IAAI,EAAE,mDAAmD;AAC1D,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AACnB,KAAA;AACF,CAAA;AAGH,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACtCA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAChD,KAAK,EAAA,CACT,CACH;AACD,KAAK,CAAC,WAAW,GAAG,OAAO;AAE3B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,SAAS,CAAC,EAAA,GACpE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,EAAA,GACrD,KAAK,EAAA,CACT,CACH;AACD,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}
+{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-white dark:bg-gray-900 text-gray-950 dark:text-gray-50 border-gray-200 dark:border-gray-800\",\n        success: \"bg-success-50 dark:bg-success-900/30 text-success-800 dark:text-success-400 border-success-200 dark:border-success-800\",\n        warning: \"bg-warning-50 dark:bg-warning-900/30 text-warning-800 dark:text-warning-400 border-warning-200 dark:border-warning-800\",\n        danger: \"bg-danger-50 dark:bg-danger-900/30 text-danger-800 dark:text-danger-400 border-danger-200 dark:border-danger-800\",\n        info: \"bg-primary-50 dark:bg-primary-900/30 text-primary-800 dark:text-primary-400 border-primary-200 dark:border-primary-800\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n));\nAlert.displayName = \"Alert\";\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\n    {...props}\n  />\n));\nAlertTitle.displayName = \"AlertTitle\";\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\n    {...props}\n  />\n));\nAlertDescription.displayName = \"AlertDescription\";\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,aAAa,GAAG,GAAG,CACvB,uCAAuC,EACvC;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,gGAAgG;AACzG,YAAA,OAAO,EAAE,wHAAwH;AACjI,YAAA,OAAO,EAAE,wHAAwH;AACjI,YAAA,MAAM,EAAE,kHAAkH;AAC1H,YAAA,IAAI,EAAE,wHAAwH;AAC/H,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AACnB,KAAA;AACF,CAAA;AAGH,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACtCA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAChD,KAAK,EAAA,CACT,CACH;AACD,KAAK,CAAC,WAAW,GAAG,OAAO;AAE3B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,SAAS,CAAC,EAAA,GACpE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,EAAA,GACrD,KAAK,EAAA,CACT,CACH;AACD,gBAAgB,CAAC,WAAW,GAAG,kBAAkB;;;;"}

package/dist/components/Avatar/Avatar.js

@@ -20,7 +20,7 @@ const Avatar = React.forwardRef(({ className, size, ...props }, ref) => (jsx("di
 Avatar.displayName = "Avatar";
 const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (jsx("img", { ref: ref, className: cn("aspect-square h-full w-full object-cover", className), ...props })));
 AvatarImage.displayName = "AvatarImage";
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-gray-100 text-gray-600 font-medium", className), ...props })));
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-medium", className), ...props })));
 AvatarFallback.displayName = "AvatarFallback";
 
 export { Avatar, AvatarFallback, AvatarImage, avatarVariants };

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst avatarVariants = cva(\n  \"relative flex shrink-0 overflow-hidden rounded-full\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 w-8\",\n        md: \"h-10 w-10\",\n        lg: \"h-16 w-16\",\n        xl: \"h-20 w-20\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nconst Avatar = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarVariants>\n>(({ className, size, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(avatarVariants({ size }), className)}\n    {...props}\n  />\n));\nAvatar.displayName = \"Avatar\";\n\nconst AvatarImage = React.forwardRef<\n  HTMLImageElement,\n  React.ImgHTMLAttributes<HTMLImageElement>\n>(({ className, ...props }, ref) => (\n  <img\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full object-cover\", className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = \"AvatarImage\";\n\nconst AvatarFallback = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-gray-100 text-gray-600 font-medium\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport { Avatar, AvatarImage, AvatarFallback, avatarVariants };"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,cAAc,GAAG,GAAG,CACxB,qDAAqD,EACrD;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,WAAW;AAChB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA;AAGH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACnCA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAC9C,KAAK,EAAA,CACT,CACH;AACD,MAAM,CAAC,WAAW,GAAG,QAAQ;AAE7B,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAGrC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,mGAAmG,EACnG,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst avatarVariants = cva(\n  \"relative flex shrink-0 overflow-hidden rounded-full\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 w-8\",\n        md: \"h-10 w-10\",\n        lg: \"h-16 w-16\",\n        xl: \"h-20 w-20\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nconst Avatar = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarVariants>\n>(({ className, size, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(avatarVariants({ size }), className)}\n    {...props}\n  />\n));\nAvatar.displayName = \"Avatar\";\n\nconst AvatarImage = React.forwardRef<\n  HTMLImageElement,\n  React.ImgHTMLAttributes<HTMLImageElement>\n>(({ className, ...props }, ref) => (\n  <img\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full object-cover\", className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = \"AvatarImage\";\n\nconst AvatarFallback = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 font-medium\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport { Avatar, AvatarImage, AvatarFallback, avatarVariants };"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,cAAc,GAAG,GAAG,CACxB,qDAAqD,EACrD;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,WAAW;AAChB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA;AAGH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MACnCA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,EAAA,GAC9C,KAAK,EAAA,CACT,CACH;AACD,MAAM,CAAC,WAAW,GAAG,QAAQ;AAE7B,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAGrC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,uIAAuI,EACvI,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/dist/components/Badge/Badge.js

@@ -5,12 +5,12 @@ import { cn } from '../../utils/cn.js';
 const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2", {
     variants: {
         variant: {
-            default: "border-transparent bg-primary-600 text-white hover:bg-primary-700",
-            secondary: "border-transparent bg-secondary-600 text-white hover:bg-secondary-700",
-            success: "border-transparent bg-success-600 text-white hover:bg-success-700",
-            danger: "border-transparent bg-danger-600 text-white hover:bg-danger-700",
-            warning: "border-transparent bg-warning-600 text-white hover:bg-warning-700",
-            outline: "text-gray-700 border-gray-300",
+            default: "border-transparent bg-primary-600 dark:bg-primary-500 text-white hover:bg-primary-700 dark:hover:bg-primary-600",
+            secondary: "border-transparent bg-secondary-600 dark:bg-secondary-500 text-white hover:bg-secondary-700 dark:hover:bg-secondary-600",
+            success: "border-transparent bg-success-600 dark:bg-success-500 text-white hover:bg-success-700 dark:hover:bg-success-600",
+            danger: "border-transparent bg-danger-600 dark:bg-danger-500 text-white hover:bg-danger-700 dark:hover:bg-danger-600",
+            warning: "border-transparent bg-warning-600 dark:bg-warning-500 text-white hover:bg-warning-700 dark:hover:bg-warning-600",
+            outline: "text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600",
         },
     },
     defaultVariants: {

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary-600 text-white hover:bg-primary-700\",\n        secondary: \"border-transparent bg-secondary-600 text-white hover:bg-secondary-700\",\n        success: \"border-transparent bg-success-600 text-white hover:bg-success-700\",\n        danger: \"border-transparent bg-danger-600 text-white hover:bg-danger-700\",\n        warning: \"border-transparent bg-warning-600 text-white hover:bg-warning-700\",\n        outline: \"text-gray-700 border-gray-300\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };"],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,aAAa,GAAG,GAAG,CACvB,+KAA+K,EAC/K;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,mEAAmE;AAC5E,YAAA,SAAS,EAAE,uEAAuE;AAClF,YAAA,OAAO,EAAE,mEAAmE;AAC5E,YAAA,MAAM,EAAE,iEAAiE;AACzE,YAAA,OAAO,EAAE,mEAAmE;AAC5E,YAAA,OAAO,EAAE,+BAA+B;AACzC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AACnB,KAAA;AACF,CAAA;AAOH,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAc,EAAA;AACzD,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,CAAI;AAE5E;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent bg-primary-600 dark:bg-primary-500 text-white hover:bg-primary-700 dark:hover:bg-primary-600\",\n        secondary: \"border-transparent bg-secondary-600 dark:bg-secondary-500 text-white hover:bg-secondary-700 dark:hover:bg-secondary-600\",\n        success: \"border-transparent bg-success-600 dark:bg-success-500 text-white hover:bg-success-700 dark:hover:bg-success-600\",\n        danger: \"border-transparent bg-danger-600 dark:bg-danger-500 text-white hover:bg-danger-700 dark:hover:bg-danger-600\",\n        warning: \"border-transparent bg-warning-600 dark:bg-warning-500 text-white hover:bg-warning-700 dark:hover:bg-warning-600\",\n        outline: \"text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };"],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,aAAa,GAAG,GAAG,CACvB,+KAA+K,EAC/K;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,iHAAiH;AAC1H,YAAA,SAAS,EAAE,yHAAyH;AACpI,YAAA,OAAO,EAAE,iHAAiH;AAC1H,YAAA,MAAM,EAAE,6GAA6G;AACrH,YAAA,OAAO,EAAE,iHAAiH;AAC1H,YAAA,OAAO,EAAE,uEAAuE;AACjF,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AACnB,KAAA;AACF,CAAA;AAOH,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAc,EAAA;AACzD,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,EAAA,CAAI;AAE5E;;;;"}

package/dist/components/Button/Button.js

@@ -4,17 +4,17 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn.js';
 
-const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
     variants: {
         variant: {
-            primary: "bg-primary-600 text-white hover:bg-primary-700",
-            secondary: "bg-secondary-600 text-white hover:bg-secondary-700",
-            danger: "bg-danger-600 text-white hover:bg-danger-700",
-            success: "bg-success-600 text-white hover:bg-success-700",
-            warning: "bg-warning-600 text-white hover:bg-warning-700",
-            outline: "border border-primary-300 bg-white hover:bg-primary-50",
-            ghost: "bg-transparent hover:bg-primary-50",
-            link: "text-primary-600 underline-offset-4 hover:underline",
+            primary: "bg-primary-600 dark:bg-primary-500 text-white hover:bg-primary-700 dark:hover:bg-primary-600",
+            secondary: "bg-secondary-600 dark:bg-secondary-500 text-white hover:bg-secondary-700 dark:hover:bg-secondary-600",
+            danger: "bg-danger-600 dark:bg-danger-500 text-white hover:bg-danger-700 dark:hover:bg-danger-600",
+            success: "bg-success-600 dark:bg-success-500 text-white hover:bg-success-700 dark:hover:bg-success-600",
+            warning: "bg-warning-600 dark:bg-warning-500 text-white hover:bg-warning-700 dark:hover:bg-warning-600",
+            outline: "border border-primary-300 dark:border-primary-700 bg-white dark:bg-transparent dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30",
+            ghost: "bg-transparent hover:bg-primary-50 dark:hover:bg-primary-900/30 dark:text-gray-300 dark:hover:text-primary-400",
+            link: "text-primary-600 dark:text-primary-400 underline-offset-4 hover:underline",
         },
         size: {
             sm: "h-8 px-3 text-xs",

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        primary: \"bg-primary-600 text-white hover:bg-primary-700\",\n        secondary: \"bg-secondary-600 text-white hover:bg-secondary-700\",\n        danger: \"bg-danger-600 text-white hover:bg-danger-700\",\n        success: \"bg-success-600 text-white hover:bg-success-700\",\n        warning: \"bg-warning-600 text-white hover:bg-warning-700\",\n        outline: \"border border-primary-300 bg-white hover:bg-primary-50\",\n        ghost: \"bg-transparent hover:bg-primary-50\",\n        link: \"text-primary-600 underline-offset-4 hover:underline\",\n      },\n      size: {\n        sm: \"h-8 px-3 text-xs\",\n        md: \"h-10 px-4 py-2\",\n        lg: \"h-11 px-8\",\n        xl: \"h-12 px-10 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };"],"names":["_jsx"],"mappings":";;;;;;AAKA,MAAM,cAAc,GAAG,GAAG,CACxB,0RAA0R,EAC1R;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,gDAAgD;AACzD,YAAA,SAAS,EAAE,oDAAoD;AAC/D,YAAA,MAAM,EAAE,8CAA8C;AACtD,YAAA,OAAO,EAAE,gDAAgD;AACzD,YAAA,OAAO,EAAE,gDAAgD;AACzD,YAAA,OAAO,EAAE,wDAAwD;AACjE,YAAA,KAAK,EAAE,oCAAoC;AAC3C,YAAA,IAAI,EAAE,qDAAqD;AAC5D,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,kBAAkB;AACtB,YAAA,EAAE,EAAE,gBAAgB;AACpB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,sBAAsB;AAC3B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA;AASH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IAC/D,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ;IACtC,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,EAC3D,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EAAA,CACT;AAEN,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white dark:ring-offset-gray-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        primary: \"bg-primary-600 dark:bg-primary-500 text-white hover:bg-primary-700 dark:hover:bg-primary-600\",\n        secondary: \"bg-secondary-600 dark:bg-secondary-500 text-white hover:bg-secondary-700 dark:hover:bg-secondary-600\",\n        danger: \"bg-danger-600 dark:bg-danger-500 text-white hover:bg-danger-700 dark:hover:bg-danger-600\",\n        success: \"bg-success-600 dark:bg-success-500 text-white hover:bg-success-700 dark:hover:bg-success-600\",\n        warning: \"bg-warning-600 dark:bg-warning-500 text-white hover:bg-warning-700 dark:hover:bg-warning-600\",\n        outline: \"border border-primary-300 dark:border-primary-700 bg-white dark:bg-transparent dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30\",\n        ghost: \"bg-transparent hover:bg-primary-50 dark:hover:bg-primary-900/30 dark:text-gray-300 dark:hover:text-primary-400\",\n        link: \"text-primary-600 dark:text-primary-400 underline-offset-4 hover:underline\",\n      },\n      size: {\n        sm: \"h-8 px-3 text-xs\",\n        md: \"h-10 px-4 py-2\",\n        lg: \"h-11 px-8\",\n        xl: \"h-12 px-10 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };"],"names":["_jsx"],"mappings":";;;;;;AAKA,MAAM,cAAc,GAAG,GAAG,CACxB,wVAAwV,EACxV;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,8FAA8F;AACvG,YAAA,SAAS,EAAE,sGAAsG;AACjH,YAAA,MAAM,EAAE,0FAA0F;AAClG,YAAA,OAAO,EAAE,8FAA8F;AACvG,YAAA,OAAO,EAAE,8FAA8F;AACvG,YAAA,OAAO,EAAE,uJAAuJ;AAChK,YAAA,KAAK,EAAE,gHAAgH;AACvH,YAAA,IAAI,EAAE,2EAA2E;AAClF,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,kBAAkB;AACtB,YAAA,EAAE,EAAE,gBAAgB;AACpB,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,sBAAsB;AAC3B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA;AASH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;IAC/D,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ;IACtC,QACEA,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,EAC3D,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EAAA,CACT;AAEN,CAAC;AAEH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/components/Card/Card.js

@@ -5,12 +5,12 @@ import { cn } from '../../utils/cn.js';
 
 const cardVariants = cva(
 // Mobile-first responsive, content-fitting, vertical stacking
-"w-full max-w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm", {
+"w-full max-w-full flex flex-col rounded-lg border bg-white dark:bg-gray-900 text-gray-950 dark:text-gray-50 shadow-sm", {
     variants: {
         variant: {
-            default: "border-gray-200",
-            elevated: "border-gray-200 shadow-md",
-            outlined: "border-2 border-primary-200",
+            default: "border-gray-200 dark:border-gray-800",
+            elevated: "border-gray-200 dark:border-gray-800 shadow-md",
+            outlined: "border-2 border-primary-200 dark:border-primary-800",
         },
         padding: {
             none: "p-0",
@@ -30,7 +30,7 @@ const CardHeader = React.forwardRef(({ className, ...props }, ref) => (jsx("div"
 CardHeader.displayName = "CardHeader";
 const CardTitle = React.forwardRef(({ className, ...props }, ref) => (jsx("h3", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })));
 CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => (jsx("p", { ref: ref, className: cn("text-sm text-gray-500", className), ...props })));
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (jsx("p", { ref: ref, className: cn("text-sm text-gray-500 dark:text-gray-400", className), ...props })));
 CardDescription.displayName = "CardDescription";
 const CardContent = React.forwardRef(({ className, ...props }, ref) => (jsx("div", { ref: ref, className: cn("p-2 sm:p-4 md:p-6 pt-0", className), ...props })));
 CardContent.displayName = "CardContent";

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst cardVariants = cva(\n  // Mobile-first responsive, content-fitting, vertical stacking\n  \"w-full max-w-full flex flex-col rounded-lg border bg-white text-gray-950 shadow-sm\",\n  {\n    variants: {\n      variant: {\n        default: \"border-gray-200\",\n        elevated: \"border-gray-200 shadow-md\",\n        outlined: \"border-2 border-primary-200\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-2 sm:p-4\",\n        md: \"p-3 sm:p-6\",\n        lg: \"p-4 sm:p-8\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      padding: \"md\",\n    },\n  }\n);\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, padding, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ variant, padding, className }))}\n      {...props}\n    />\n  )\n);\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-2 sm:p-4 md:p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-gray-500\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-2 sm:p-4 md:p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-2 sm:p-4 md:p-6 pt-0\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  cardVariants,\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG;AACtB;AACA,oFAAoF,EACpF;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,iBAAiB;AAC1B,YAAA,QAAQ,EAAE,2BAA2B;AACrC,YAAA,QAAQ,EAAE,6BAA6B;AACxC,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AACjB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAOH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7CA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KACxD,KAAK,EAAA,CACT,CACH;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;AAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,SAAS,CAAC,EAAA,GACnE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,SAAS,CAAC,WAAW,GAAG,WAAW;AAEnC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,CACT,CACH;AACD,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI,CACjF;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst cardVariants = cva(\n  // Mobile-first responsive, content-fitting, vertical stacking\n  \"w-full max-w-full flex flex-col rounded-lg border bg-white dark:bg-gray-900 text-gray-950 dark:text-gray-50 shadow-sm\",\n  {\n    variants: {\n      variant: {\n        default: \"border-gray-200 dark:border-gray-800\",\n        elevated: \"border-gray-200 dark:border-gray-800 shadow-md\",\n        outlined: \"border-2 border-primary-200 dark:border-primary-800\",\n      },\n      padding: {\n        none: \"p-0\",\n        sm: \"p-2 sm:p-4\",\n        md: \"p-3 sm:p-6\",\n        lg: \"p-4 sm:p-8\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      padding: \"md\",\n    },\n  }\n);\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, padding, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(cardVariants({ variant, padding, className }))}\n      {...props}\n    />\n  )\n);\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-2 sm:p-4 md:p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-gray-500 dark:text-gray-400\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-2 sm:p-4 md:p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-2 sm:p-4 md:p-6 pt-0\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  cardVariants,\n};"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,YAAY,GAAG,GAAG;AACtB;AACA,uHAAuH,EACvH;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,OAAO,EAAE,sCAAsC;AAC/C,YAAA,QAAQ,EAAE,gDAAgD;AAC1D,YAAA,QAAQ,EAAE,qDAAqD;AAChE,SAAA;AACD,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AAChB,YAAA,EAAE,EAAE,YAAY;AACjB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,OAAO,EAAE,IAAI;AACd,KAAA;AACF,CAAA;AAOH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC3B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7CA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KACxD,KAAK,EAAA,CACT,CACH;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM;AAEzB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6CAA6C,EAAE,SAAS,CAAC,EAAA,GACnE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT,CACH;AACD,SAAS,CAAC,WAAW,GAAG,WAAW;AAEnC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,GAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI,CACjF;AACD,WAAW,CAAC,WAAW,GAAG,aAAa;AAEvC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,MAC7BA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,EAAA,GAChE,KAAK,EAAA,CACT,CACH;AACD,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/components/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import { Check } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../utils/cn.js';
 
-const checkboxVariants = cva("peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=checked]:text-white data-[state=checked]:border-primary-600", {
+const checkboxVariants = cva("peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 dark:border-gray-700 ring-offset-white dark:ring-offset-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 dark:data-[state=checked]:bg-primary-500 data-[state=checked]:text-white data-[state=checked]:border-primary-600 dark:data-[state=checked]:border-primary-500", {
     variants: {
         size: {
             sm: "h-3 w-3",

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst checkboxVariants = cva(\n  \"peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=checked]:text-white data-[state=checked]:border-primary-600\",\n  {\n    variants: {\n      size: {\n        sm: \"h-3 w-3\",\n        md: \"h-4 w-4\",\n        lg: \"h-5 w-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nexport interface CheckboxProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof checkboxVariants> {}\n\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size, ...props }, ref) => {\n    return (\n      <div className=\"relative inline-flex items-center\">\n        <input\n          type=\"checkbox\"\n          className={cn(checkboxVariants({ size }), \"appearance-none\", className)}\n          ref={ref}\n          data-state={props.checked ? \"checked\" : \"unchecked\"}\n          {...props}\n        />\n        {props.checked && (\n          <Check\n            className={cn(\n              \"absolute pointer-events-none text-current\",\n              size === \"sm\" && \"h-2 w-2\",\n              size === \"md\" && \"h-3 w-3\",\n              size === \"lg\" && \"h-4 w-4\"\n            )}\n          />\n        )}\n      </div>\n    );\n  }\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox, checkboxVariants };"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,gBAAgB,GAAG,GAAG,CAC1B,kVAAkV,EAClV;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,SAAS;AACd,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA;AAOH,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAC/B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACrC,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDC,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,iBAAiB,EAAE,SAAS,CAAC,EACvE,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW,EAAA,GAC/C,KAAK,EAAA,CACT,EACD,KAAK,CAAC,OAAO,KACZA,GAAA,CAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CACX,2CAA2C,EAC3C,IAAI,KAAK,IAAI,IAAI,SAAS,EAC1B,IAAI,KAAK,IAAI,IAAI,SAAS,EAC1B,IAAI,KAAK,IAAI,IAAI,SAAS,CAC3B,GACD,CACH,CAAA,EAAA,CACG;AAEV,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst checkboxVariants = cva(\n  \"peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 dark:border-gray-700 ring-offset-white dark:ring-offset-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 dark:data-[state=checked]:bg-primary-500 data-[state=checked]:text-white data-[state=checked]:border-primary-600 dark:data-[state=checked]:border-primary-500\",\n  {\n    variants: {\n      size: {\n        sm: \"h-3 w-3\",\n        md: \"h-4 w-4\",\n        lg: \"h-5 w-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nexport interface CheckboxProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof checkboxVariants> {}\n\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size, ...props }, ref) => {\n    return (\n      <div className=\"relative inline-flex items-center\">\n        <input\n          type=\"checkbox\"\n          className={cn(checkboxVariants({ size }), \"appearance-none\", className)}\n          ref={ref}\n          data-state={props.checked ? \"checked\" : \"unchecked\"}\n          {...props}\n        />\n        {props.checked && (\n          <Check\n            className={cn(\n              \"absolute pointer-events-none text-current\",\n              size === \"sm\" && \"h-2 w-2\",\n              size === \"md\" && \"h-3 w-3\",\n              size === \"lg\" && \"h-4 w-4\"\n            )}\n          />\n        )}\n      </div>\n    );\n  }\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox, checkboxVariants };"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,gBAAgB,GAAG,GAAG,CAC1B,2fAA2f,EAC3f;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,SAAS;AACd,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA;AAOH,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAC/B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACrC,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mCAAmC,aAChDC,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,iBAAiB,EAAE,SAAS,CAAC,EACvE,GAAG,EAAE,GAAG,EAAA,YAAA,EACI,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,WAAW,EAAA,GAC/C,KAAK,EAAA,CACT,EACD,KAAK,CAAC,OAAO,KACZA,GAAA,CAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CACX,2CAA2C,EAC3C,IAAI,KAAK,IAAI,IAAI,SAAS,EAC1B,IAAI,KAAK,IAAI,IAAI,SAAS,EAC1B,IAAI,KAAK,IAAI,IAAI,SAAS,CAC3B,GACD,CACH,CAAA,EAAA,CACG;AAEV,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/ComponentShowcase/ComponentShowcase.js

@@ -148,17 +148,17 @@ const ComponentShowcase = ({ className }) => {
                 return "w-full";
         }
     };
-    return (jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [jsx(Toast, {}), jsxs("div", { ref: sidebarRef, className: cn("bg-white border-r border-gray-200 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), tabIndex: sidebarCollapsed ? -1 : 0, onKeyDown: handleKeyNavigation, "aria-label": "Component navigation", children: [jsxs("div", { className: "p-4 border-b border-gray-200", children: [!sidebarCollapsed && (jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsx("div", { className: "flex justify-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (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, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [jsxs("button", { onClick: () => !sidebarCollapsed && toggleCategory(categoryName), className: cn("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors", "hover:bg-gray-100 text-gray-700", sidebarCollapsed ? "justify-center" : "justify-between"), children: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => {
+    return (jsxs("div", { className: cn("flex h-screen bg-gray-50 dark:bg-gray-950", darkMode && "dark", className), children: [jsx(Toast, {}), jsxs("div", { ref: sidebarRef, className: cn("bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), tabIndex: sidebarCollapsed ? -1 : 0, onKeyDown: handleKeyNavigation, "aria-label": "Component navigation", children: [jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: [!sidebarCollapsed && (jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900 dark:text-white", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsx("div", { className: "flex justify-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (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, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [jsxs("button", { onClick: () => !sidebarCollapsed && toggleCategory(categoryName), className: cn("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors", "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300", sidebarCollapsed ? "justify-center" : "justify-between"), children: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => {
                                         const isActive = selectedComponent === component.id;
                                         return (jsx("button", { "data-component-id": component.id, onClick: () => {
                                                 setSelectedComponent(component.id);
                                                 setFocusedIndex(flatComponents.indexOf(component.id));
                                             }, className: cn("flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isActive
-                                                ? "bg-primary-50 text-primary-700 border-r-2 border-primary-600"
-                                                : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"), "aria-current": isActive ? "page" : undefined, children: component.name }, component.id));
-                                    }) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }), jsxs("div", { children: [jsxs("div", { className: "flex gap-3 mb-4", role: "tablist", "aria-label": "Component details tabs", children: [jsxs(Button, { variant: activeTab === "preview" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("preview"), role: "tab", "aria-selected": activeTab === "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(Button, { variant: activeTab === "code" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("code"), role: "tab", "aria-selected": activeTab === "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(Button, { variant: activeTab === "props" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("props"), role: "tab", "aria-selected": activeTab === "props", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxs("div", { children: [jsx("div", { className: "mt-6", children: jsx("div", { className: "bg-white rounded-lg shadow p-6", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { className: cn(darkMode && "dark"), children: showcaseRegistry[selectedComponent]
+                                                ? "bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border-r-2 border-primary-600 dark:border-primary-500"
+                                                : "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white"), "aria-current": isActive ? "page" : undefined, children: component.name }, component.id));
+                                    }) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600 dark:text-gray-400", children: currentDoc.description }) }), jsxs("div", { children: [jsxs("div", { className: "flex gap-3 mb-4", role: "tablist", "aria-label": "Component details tabs", children: [jsxs(Button, { variant: activeTab === "preview" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("preview"), role: "tab", "aria-selected": activeTab === "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(Button, { variant: activeTab === "code" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("code"), role: "tab", "aria-selected": activeTab === "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(Button, { variant: activeTab === "props" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("props"), role: "tab", "aria-selected": activeTab === "props", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxs("div", { children: [jsx("div", { className: "mt-6", children: jsx("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow p-6", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { children: showcaseRegistry[selectedComponent]
                                                                     ? React.createElement(showcaseRegistry[selectedComponent])
-                                                                    : null }) }) }) }), activeTab === "code" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Code example", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentExample), children: [copiedCode === currentExample ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentExample }) })] }) })), activeTab === "props" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Component props", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsx("h2", { className: "text-lg font-semibold mb-4", children: "Component Props" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })] }) }), jsx("tbody", { children: currentProps.length > 0 ? (currentProps.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }), prop.required && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600", children: prop.type }), jsx("td", { className: "p-3 text-gray-600", children: prop.default ? (jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600", children: prop.description })] }, prop.name ?? index)))) : (jsx("tr", { children: jsx("td", { colSpan: 4, className: "p-4 text-center text-gray-500", children: "No props documented for this component yet." }) })) })] }) })] }) }))] })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
+                                                                    : null }) }) }) }), activeTab === "code" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Code example", children: jsxs("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0 dark:text-white", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentExample), children: [copiedCode === currentExample ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentExample }) })] }) })), activeTab === "props" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Component props", children: jsxs("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow p-6", children: [jsx("h2", { className: "text-lg font-semibold mb-4 dark:text-white", children: "Component Props" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200 dark:border-gray-800", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Description" })] }) }), jsx("tbody", { children: currentProps.length > 0 ? (currentProps.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100 dark:border-gray-800/50", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300", children: prop.name }), prop.required && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: prop.type }), jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: prop.default ? (jsx("code", { className: "bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: prop.description })] }, prop.name ?? index)))) : (jsx("tr", { children: jsx("td", { colSpan: 4, className: "p-4 text-center text-gray-500 dark:text-gray-400", children: "No props documented for this component yet." }) })) })] }) })] }) }))] })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 dark:text-gray-600 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
 };
 
 export { ComponentShowcase };

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

@@ -1 +1 @@
-{"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useRef, useEffect } from \"react\";\nimport {\n  Search,\n  Copy,\n  Check,\n  Monitor,\n  Tablet,\n  Smartphone,\n  Sun,\n  Moon,\n  ChevronRight,\n  ChevronDown,\n  Code,\n  Eye,\n  Book,\n  Palette,\n  Layout,\n  MousePointer,\n  AlertCircle,\n  BarChart3,\n  Settings,\n  Shield\n} from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Badge } from \"../Badge\";\nimport { Toast, showToast } from \"../Toast\";\n\nimport { showcaseRegistry } from \"./showcaseRegistry\";\nimport { componentDocs } from \"./componentDocs\";\n\n// Component categories and their items\nconst componentCategories = {\n  Forms: {\n    icon: <MousePointer className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Button\", id: \"button\" },\n      { name: \"Input\", id: \"input\" },\n      { name: \"Textarea\", id: \"textarea\" },\n      { name: \"Checkbox\", id: \"checkbox\" },\n      { name: \"Switch\", id: \"switch\" }\n    ]\n  },\n  \"Data Display\": {\n    icon: <BarChart3 className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Card\", id: \"card\" },\n      { name: \"Badge\", id: \"badge\" },\n      { name: \"Avatar\", id: \"avatar\" },\n      { name: \"StatsCard\", id: \"statscard\" },\n      { name: \"Tabs\", id: \"tabs\" },\n      { name: \"DataTable\", id: \"datatable\" }\n    ]\n  },\n  Feedback: {\n    icon: <AlertCircle className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Alert\", id: \"alert\" },\n      { name: \"Toast\", id: \"toast\" },\n      { name: \"Modal\", id: \"modal\" },\n      { name: \"Spinner\", id: \"spinner\" },\n      { name: \"Skeleton\", id: \"skeleton\" }\n    ]\n  },\n  Authentication: {\n    icon: <Shield className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Auth System\", id: \"auth\" },\n      { name: \"Login Page\", id: \"login\" },\n      { name: \"Signup Page\", id: \"signup\" },\n      { name: \"Password Reset\", id: \"password-reset\" },\n      { name: \"!isAuthenticated Shield\", id: \"shield\" },\n    ]\n  },\n  Layout: {\n    icon: <Layout className=\"h-4 w-4\" />,\n    components: [\n      { name: \"DashboardLayout\", id: \"dashboard-layout\" },\n      { name: \"Page Layout\", id: \"page-layout\" },\n      { name: \"DashboardGrid\", id: \"dashboard-grid\" },\n      { name: \"Sidebar\", id: \"sidebar\" },\n      { name: \"Navbar\", id: \"navbar\" }\n    ]\n  }\n};\n\n// Prop documentation interface\ninterface PropDoc {\n  name: string;\n  type: string;\n  default?: string;\n  description?: string;\n  required?: boolean;\n}\n\n// Props\ninterface ComponentShowcaseProps {\n  className?: string;\n}\n\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\n  const [selectedComponent, setSelectedComponent] = useState(\"button\");\n  const [activeTab, setActiveTab] = useState<\"preview\" | \"code\" | \"props\">(\"preview\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\n  const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\n  const [viewMode, setViewMode] = useState<\"desktop\" | \"tablet\" | \"mobile\">(\"desktop\");\n  const [darkMode, setDarkMode] = useState(false);\n  const [copiedCode, setCopiedCode] = useState<string | null>(null);\n  const sidebarRef = useRef<HTMLDivElement | null>(null);\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n  const toggleCategory = (category: string) => {\n    setExpandedCategories((prev) =>\n      prev.includes(category)\n        ? prev.filter((c) => c !== category)\n        : [...prev, category]\n    );\n  };\n\n  const flatComponents = useMemo(() => {\n    return Object.values(componentCategories).flatMap((category) =>\n      category.components.map((component) => component.id)\n    );\n  }, []);\n\n  useEffect(() => {\n    if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {\n      const buttons = sidebarRef.current.querySelectorAll<HTMLButtonElement>(\n        '[data-component-id]'\n      );\n      const target = buttons[focusedIndex];\n      if (target) {\n        target.focus();\n      }\n    }\n  }, [focusedIndex, sidebarCollapsed]);\n\n  const handleKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (sidebarCollapsed) return;\n\n    const currentIndex = flatComponents.indexOf(selectedComponent);\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;\n      setFocusedIndex(nextIndex);\n      setSelectedComponent(flatComponents[nextIndex]);\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;\n      setFocusedIndex(prevIndex);\n      setSelectedComponent(flatComponents[prevIndex]);\n    }\n  };\n\n  const copyToClipboard = async (code: string) => {\n    try {\n      if (navigator?.clipboard?.writeText) {\n        await navigator.clipboard.writeText(code);\n        setCopiedCode(code);\n        showToast.success(\"Code copied to clipboard!\");\n        setTimeout(() => setCopiedCode(null), 2000);\n      } else {\n        throw new Error(\"Clipboard API unavailable\");\n      }\n    } catch (err) {\n      showToast.error(\"Failed to copy code\");\n    }\n  };\n\n  const filteredCategories = Object.entries(componentCategories).reduce(\n    (acc, [categoryName, categoryData]) => {\n      const filteredComponents = categoryData.components.filter((component) =>\n        component.name.toLowerCase().includes(searchQuery.toLowerCase())\n      );\n\n      if (filteredComponents.length > 0) {\n        (acc as any)[categoryName] = {\n          ...categoryData,\n          components: filteredComponents\n        };\n      }\n\n      return acc;\n    },\n    {} as Partial<typeof componentCategories>\n  );\n\n  const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\n  const currentExample = currentDoc?.example ?? '';\n  const currentProps = (currentDoc?.props ?? []) as PropDoc[];\n\n  const getViewportClass = () => {\n    switch (viewMode) {\n      case \"tablet\":\n        return \"max-w-2xl\";\n      case \"mobile\":\n        return \"max-w-sm\";\n      default:\n        return \"w-full\";\n    }\n  };\n\n  return (\n    <div className={cn(\"flex h-screen bg-gray-50\", className)}>\n      <Toast />\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={cn(\n          \"bg-white border-r border-gray-200 transition-all duration-300 flex flex-col\",\n          sidebarCollapsed ? \"w-16\" : \"w-80\"\n        )}\n        tabIndex={sidebarCollapsed ? -1 : 0}\n        onKeyDown={handleKeyNavigation}\n        aria-label=\"Component navigation\"\n      >\n        {/* Sidebar Header */}\n        <div className=\"p-4 border-b border-gray-200\">\n          {!sidebarCollapsed && (\n            <div className=\"flex items-center justify-between mb-4\">\n              <div className=\"flex items-center space-x-2\">\n                <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n                  <Palette className=\"h-4 w-4 text-white\" />\n                </div>\n                <span className=\"font-bold text-lg text-gray-900\">Beyond UI</span>\n              </div>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setSidebarCollapsed(true)}\n              >\n                <ChevronRight className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n\n          {sidebarCollapsed && (\n            <div className=\"flex justify-center\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setSidebarCollapsed(false)}\n              >\n                <Palette className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n\n          {!sidebarCollapsed && (\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                placeholder=\"Search components...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"pl-10\"\n              />\n            </div>\n          )}\n        </div>\n\n        {/* Navigation */}\n        <nav className=\"flex-1 p-4 overflow-y-auto\">\n          {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\n            <div key={categoryName} className=\"mb-4\">\n              <button\n                onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\n                className={cn(\n                  \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\n                  \"hover:bg-gray-100 text-gray-700\",\n                  sidebarCollapsed ? \"justify-center\" : \"justify-between\"\n                )}\n              >\n                <div className=\"flex items-center space-x-2\">\n                  {categoryData.icon}\n                  {!sidebarCollapsed && <span>{categoryName}</span>}\n                </div>\n                {!sidebarCollapsed && (\n                  <ChevronDown\n                    className={cn(\n                      \"h-4 w-4 transition-transform\",\n                      expandedCategories.includes(categoryName) && \"rotate-180\"\n                    )}\n                  />\n                )}\n              </button>\n\n              {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\n                <div className=\"mt-2 ml-6 space-y-1\">\n                  {categoryData.components.map((component) => {\n                    const isActive = selectedComponent === component.id;\n                    return (\n                      <button\n                        key={component.id}\n                        data-component-id={component.id}\n                        onClick={() => {\n                          setSelectedComponent(component.id);\n                          setFocusedIndex(flatComponents.indexOf(component.id));\n                        }}\n                        className={cn(\n                          \"flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\",\n                          isActive\n                            ? \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\"\n                            : \"text-gray-600 hover:bg-gray-50 hover:text-gray-900\"\n                        )}\n                        aria-current={isActive ? \"page\" : undefined}\n                      >\n                        {component.name}\n                      </button>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n          ))}\n        </nav>\n      </div>\n\n      {/* Main Content */}\n      <div className=\"flex-1 flex flex-col overflow-hidden\">\n        {/* Header */}\n        <header className=\"bg-white border-b border-gray-200 p-4\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center space-x-4\">\n              <h1 className=\"text-2xl font-bold text-gray-900\">\n                {currentDoc?.name || \"Component Showcase\"}\n              </h1>\n              {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\n            </div>\n\n            <div className=\"flex items-center space-x-2\">\n              {/* Viewport Controls */}\n              <div className=\"flex items-center bg-gray-100 rounded-lg p-1\">\n                <Button\n                  variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"desktop\")}\n                >\n                  <Monitor className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"tablet\")}\n                >\n                  <Tablet className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"mobile\")}\n                >\n                  <Smartphone className=\"h-4 w-4\" />\n                </Button>\n              </div>\n\n              {/* Dark Mode Toggle */}\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setDarkMode(!darkMode)}\n              >\n                {darkMode ? (\n                  <Sun className=\"h-4 w-4\" />\n                ) : (\n                  <Moon className=\"h-4 w-4\" />\n                )}\n              </Button>\n            </div>\n          </div>\n        </header>\n\n        {/* Content */}\n        <main className=\"flex-1 overflow-auto p-6\">\n          {currentDoc ? (\n            <div className=\"max-w-6xl mx-auto space-y-8\">\n              {/* Description */}\n              <div>\n                <p className=\"text-lg text-gray-600\">{currentDoc.description}</p>\n              </div>\n\n              {/* Tabs */}\n              <div>\n                <div className=\"flex gap-3 mb-4\" role=\"tablist\" aria-label=\"Component details tabs\">\n                  <Button\n                    variant={activeTab === \"preview\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"preview\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"preview\"}\n                  >\n                    <Eye className=\"h-4 w-4 mr-2\" />\n                    Preview\n                  </Button>\n                  <Button\n                    variant={activeTab === \"code\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"code\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"code\"}\n                  >\n                    <Code className=\"h-4 w-4 mr-2\" />\n                    Code\n                  </Button>\n                  <Button\n                    variant={activeTab === \"props\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"props\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"props\"}\n                  >\n                    <Settings className=\"h-4 w-4 mr-2\" />\n                    Props\n                  </Button>\n                </div>\n                <div>\n                  <div className=\"mt-6\">\n                    <div className=\"bg-white rounded-lg shadow p-6\">\n                      {/* Preview */}\n                      <div\n                        className={cn(\n                          \"mx-auto transition-all duration-300\",\n                          getViewportClass()\n                        )}\n                      >\n                        <div className={cn(darkMode && \"dark\")}>\n                          {showcaseRegistry[selectedComponent]\n                            ? React.createElement(\n                                showcaseRegistry[selectedComponent]\n                              )\n                            : null}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  {activeTab === \"code\" && (\n                    <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Code example\">\n                      <div className=\"bg-white rounded-lg shadow p-6\">\n                        <div className=\"flex flex-row items-center justify-between\">\n                          <h2 className=\"text-lg font-semibold mb-0\">\n                            Usage Example\n                          </h2>\n                          <Button\n                            variant=\"outline\"\n                            size=\"sm\"\n                            onClick={() => copyToClipboard(currentExample)}\n                          >\n                            {copiedCode === currentExample ? (\n                              <Check className=\"h-4 w-4 mr-2\" />\n                            ) : (\n                              <Copy className=\"h-4 w-4 mr-2\" />\n                            )}\n                            Copy\n                          </Button>\n                        </div>\n                        <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\n                          <code>{currentExample}</code>\n                        </pre>\n                      </div>\n                    </div>\n                  )}\n\n                  {activeTab === \"props\" && (\n                    <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Component props\">\n                      <div className=\"bg-white rounded-lg shadow p-6\">\n                        <h2 className=\"text-lg font-semibold mb-4\">\n                          Component Props\n                        </h2>\n                        <div className=\"overflow-x-auto\">\n                          <table className=\"w-full border-collapse\">\n                            <thead>\n                              <tr className=\"border-b border-gray-200\">\n                                <th className=\"text-left p-3 font-medium text-gray-900\">\n                                  Prop\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900\">\n                                  Type\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900\">\n                                  Default\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900\">\n                                  Description\n                                </th>\n                              </tr>\n                            </thead>\n                            <tbody>\n                              {currentProps.length > 0 ? (\n                                currentProps.map((prop: PropDoc, index) => (\n                                  <tr key={prop.name ?? index} className=\"border-b border-gray-100\">\n                                    <td className=\"p-3\">\n                                      <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\n                                        {prop.name}\n                                      </code>\n                                      {prop.required && (\n                                        <Badge variant=\"danger\" className=\"ml-2 text-xs\">\n                                          Required\n                                        </Badge>\n                                      )}\n                                    </td>\n                                    <td className=\"p-3 text-gray-600\">{prop.type}</td>\n                                    <td className=\"p-3 text-gray-600\">\n                                      {prop.default ? (\n                                        <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\n                                          {prop.default}\n                                        </code>\n                                      ) : null}\n                                    </td>\n                                    <td className=\"p-3 text-gray-600\">{prop.description}</td>\n                                  </tr>\n                                ))\n                              ) : (\n                                <tr>\n                                  <td colSpan={4} className=\"p-4 text-center text-gray-500\">\n                                    No props documented for this component yet.\n                                  </td>\n                                </tr>\n                              )}\n                            </tbody>\n                          </table>\n                        </div>\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex items-center justify-center h-full\">\n              <div className=\"text-center\">\n                <Book className=\"h-16 w-16 text-gray-400 mx-auto mb-4\" />\n                <h2 className=\"text-xl font-semibold text-gray-900 mb-2\">\n                  Select a Component\n                </h2>\n                <p className=\"text-gray-600\">\n                  Choose a component from the sidebar to view its documentation and examples.\n                </p>\n              </div>\n            </div>\n          )}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useRef, useEffect } from \"react\";\nimport {\n  Search,\n  Copy,\n  Check,\n  Monitor,\n  Tablet,\n  Smartphone,\n  Sun,\n  Moon,\n  ChevronRight,\n  ChevronDown,\n  Code,\n  Eye,\n  Book,\n  Palette,\n  Layout,\n  MousePointer,\n  AlertCircle,\n  BarChart3,\n  Settings,\n  Shield\n} from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Badge } from \"../Badge\";\nimport { Toast, showToast } from \"../Toast\";\n\nimport { showcaseRegistry } from \"./showcaseRegistry\";\nimport { componentDocs } from \"./componentDocs\";\n\n// Component categories and their items\nconst componentCategories = {\n  Forms: {\n    icon: <MousePointer className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Button\", id: \"button\" },\n      { name: \"Input\", id: \"input\" },\n      { name: \"Textarea\", id: \"textarea\" },\n      { name: \"Checkbox\", id: \"checkbox\" },\n      { name: \"Switch\", id: \"switch\" }\n    ]\n  },\n  \"Data Display\": {\n    icon: <BarChart3 className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Card\", id: \"card\" },\n      { name: \"Badge\", id: \"badge\" },\n      { name: \"Avatar\", id: \"avatar\" },\n      { name: \"StatsCard\", id: \"statscard\" },\n      { name: \"Tabs\", id: \"tabs\" },\n      { name: \"DataTable\", id: \"datatable\" }\n    ]\n  },\n  Feedback: {\n    icon: <AlertCircle className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Alert\", id: \"alert\" },\n      { name: \"Toast\", id: \"toast\" },\n      { name: \"Modal\", id: \"modal\" },\n      { name: \"Spinner\", id: \"spinner\" },\n      { name: \"Skeleton\", id: \"skeleton\" }\n    ]\n  },\n  Authentication: {\n    icon: <Shield className=\"h-4 w-4\" />,\n    components: [\n      { name: \"Auth System\", id: \"auth\" },\n      { name: \"Login Page\", id: \"login\" },\n      { name: \"Signup Page\", id: \"signup\" },\n      { name: \"Password Reset\", id: \"password-reset\" },\n      { name: \"!isAuthenticated Shield\", id: \"shield\" },\n    ]\n  },\n  Layout: {\n    icon: <Layout className=\"h-4 w-4\" />,\n    components: [\n      { name: \"DashboardLayout\", id: \"dashboard-layout\" },\n      { name: \"Page Layout\", id: \"page-layout\" },\n      { name: \"DashboardGrid\", id: \"dashboard-grid\" },\n      { name: \"Sidebar\", id: \"sidebar\" },\n      { name: \"Navbar\", id: \"navbar\" }\n    ]\n  }\n};\n\n// Prop documentation interface\ninterface PropDoc {\n  name: string;\n  type: string;\n  default?: string;\n  description?: string;\n  required?: boolean;\n}\n\n// Props\ninterface ComponentShowcaseProps {\n  className?: string;\n}\n\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\n  const [selectedComponent, setSelectedComponent] = useState(\"button\");\n  const [activeTab, setActiveTab] = useState<\"preview\" | \"code\" | \"props\">(\"preview\");\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\n  const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\n  const [viewMode, setViewMode] = useState<\"desktop\" | \"tablet\" | \"mobile\">(\"desktop\");\n  const [darkMode, setDarkMode] = useState(false);\n  const [copiedCode, setCopiedCode] = useState<string | null>(null);\n  const sidebarRef = useRef<HTMLDivElement | null>(null);\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n  const toggleCategory = (category: string) => {\n    setExpandedCategories((prev) =>\n      prev.includes(category)\n        ? prev.filter((c) => c !== category)\n        : [...prev, category]\n    );\n  };\n\n  const flatComponents = useMemo(() => {\n    return Object.values(componentCategories).flatMap((category) =>\n      category.components.map((component) => component.id)\n    );\n  }, []);\n\n  useEffect(() => {\n    if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {\n      const buttons = sidebarRef.current.querySelectorAll<HTMLButtonElement>(\n        '[data-component-id]'\n      );\n      const target = buttons[focusedIndex];\n      if (target) {\n        target.focus();\n      }\n    }\n  }, [focusedIndex, sidebarCollapsed]);\n\n  const handleKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (sidebarCollapsed) return;\n\n    const currentIndex = flatComponents.indexOf(selectedComponent);\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;\n      setFocusedIndex(nextIndex);\n      setSelectedComponent(flatComponents[nextIndex]);\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;\n      setFocusedIndex(prevIndex);\n      setSelectedComponent(flatComponents[prevIndex]);\n    }\n  };\n\n  const copyToClipboard = async (code: string) => {\n    try {\n      if (navigator?.clipboard?.writeText) {\n        await navigator.clipboard.writeText(code);\n        setCopiedCode(code);\n        showToast.success(\"Code copied to clipboard!\");\n        setTimeout(() => setCopiedCode(null), 2000);\n      } else {\n        throw new Error(\"Clipboard API unavailable\");\n      }\n    } catch (err) {\n      showToast.error(\"Failed to copy code\");\n    }\n  };\n\n  const filteredCategories = Object.entries(componentCategories).reduce(\n    (acc, [categoryName, categoryData]) => {\n      const filteredComponents = categoryData.components.filter((component) =>\n        component.name.toLowerCase().includes(searchQuery.toLowerCase())\n      );\n\n      if (filteredComponents.length > 0) {\n        (acc as any)[categoryName] = {\n          ...categoryData,\n          components: filteredComponents\n        };\n      }\n\n      return acc;\n    },\n    {} as Partial<typeof componentCategories>\n  );\n\n  const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\n  const currentExample = currentDoc?.example ?? '';\n  const currentProps = (currentDoc?.props ?? []) as PropDoc[];\n\n  const getViewportClass = () => {\n    switch (viewMode) {\n      case \"tablet\":\n        return \"max-w-2xl\";\n      case \"mobile\":\n        return \"max-w-sm\";\n      default:\n        return \"w-full\";\n    }\n  };\n\n  return (\n    <div className={cn(\"flex h-screen bg-gray-50 dark:bg-gray-950\", darkMode && \"dark\", className)}>\n      <Toast />\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={cn(\n          \"bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-all duration-300 flex flex-col\",\n          sidebarCollapsed ? \"w-16\" : \"w-80\"\n        )}\n        tabIndex={sidebarCollapsed ? -1 : 0}\n        onKeyDown={handleKeyNavigation}\n        aria-label=\"Component navigation\"\n      >\n        {/* Sidebar Header */}\n        <div className=\"p-4 border-b border-gray-200 dark:border-gray-800\">\n          {!sidebarCollapsed && (\n            <div className=\"flex items-center justify-between mb-4\">\n              <div className=\"flex items-center space-x-2\">\n                <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n                  <Palette className=\"h-4 w-4 text-white\" />\n                </div>\n                <span className=\"font-bold text-lg text-gray-900 dark:text-white\">Beyond UI</span>\n              </div>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setSidebarCollapsed(true)}\n              >\n                <ChevronRight className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n\n          {sidebarCollapsed && (\n            <div className=\"flex justify-center\">\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setSidebarCollapsed(false)}\n              >\n                <Palette className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n\n          {!sidebarCollapsed && (\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                placeholder=\"Search components...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className=\"pl-10\"\n              />\n            </div>\n          )}\n        </div>\n\n        {/* Navigation */}\n        <nav className=\"flex-1 p-4 overflow-y-auto\">\n          {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\n            <div key={categoryName} className=\"mb-4\">\n              <button\n                onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\n                className={cn(\n                  \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\n                \"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300\",\n                  sidebarCollapsed ? \"justify-center\" : \"justify-between\"\n                )}\n              >\n                <div className=\"flex items-center space-x-2\">\n                  {categoryData.icon}\n                  {!sidebarCollapsed && <span>{categoryName}</span>}\n                </div>\n                {!sidebarCollapsed && (\n                  <ChevronDown\n                    className={cn(\n                      \"h-4 w-4 transition-transform\",\n                      expandedCategories.includes(categoryName) && \"rotate-180\"\n                    )}\n                  />\n                )}\n              </button>\n\n              {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\n                <div className=\"mt-2 ml-6 space-y-1\">\n                  {categoryData.components.map((component) => {\n                    const isActive = selectedComponent === component.id;\n                    return (\n                      <button\n                        key={component.id}\n                        data-component-id={component.id}\n                        onClick={() => {\n                          setSelectedComponent(component.id);\n                          setFocusedIndex(flatComponents.indexOf(component.id));\n                        }}\n                        className={cn(\n                          \"flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\",\n                          isActive\n                          ? \"bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border-r-2 border-primary-600 dark:border-primary-500\"\n                          : \"text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white\"\n                        )}\n                        aria-current={isActive ? \"page\" : undefined}\n                      >\n                        {component.name}\n                      </button>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n          ))}\n        </nav>\n      </div>\n\n      {/* Main Content */}\n      <div className=\"flex-1 flex flex-col overflow-hidden\">\n        {/* Header */}\n        <header className=\"bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4\">\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center space-x-4\">\n              <h1 className=\"text-2xl font-bold text-gray-900 dark:text-white\">\n                {currentDoc?.name || \"Component Showcase\"}\n              </h1>\n              {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\n            </div>\n\n            <div className=\"flex items-center space-x-2\">\n              {/* Viewport Controls */}\n              <div className=\"flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1\">\n                <Button\n                  variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"desktop\")}\n                >\n                  <Monitor className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"tablet\")}\n                >\n                  <Tablet className=\"h-4 w-4\" />\n                </Button>\n                <Button\n                  variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\n                  size=\"sm\"\n                  onClick={() => setViewMode(\"mobile\")}\n                >\n                  <Smartphone className=\"h-4 w-4\" />\n                </Button>\n              </div>\n\n              {/* Dark Mode Toggle */}\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setDarkMode(!darkMode)}\n              >\n                {darkMode ? (\n                  <Sun className=\"h-4 w-4\" />\n                ) : (\n                  <Moon className=\"h-4 w-4\" />\n                )}\n              </Button>\n            </div>\n          </div>\n        </header>\n\n        {/* Content */}\n        <main className=\"flex-1 overflow-auto p-6\">\n          {currentDoc ? (\n            <div className=\"max-w-6xl mx-auto space-y-8\">\n              {/* Description */}\n              <div>\n                <p className=\"text-lg text-gray-600 dark:text-gray-400\">{currentDoc.description}</p>\n              </div>\n\n              {/* Tabs */}\n              <div>\n                <div className=\"flex gap-3 mb-4\" role=\"tablist\" aria-label=\"Component details tabs\">\n                  <Button\n                    variant={activeTab === \"preview\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"preview\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"preview\"}\n                  >\n                    <Eye className=\"h-4 w-4 mr-2\" />\n                    Preview\n                  </Button>\n                  <Button\n                    variant={activeTab === \"code\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"code\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"code\"}\n                  >\n                    <Code className=\"h-4 w-4 mr-2\" />\n                    Code\n                  </Button>\n                  <Button\n                    variant={activeTab === \"props\" ? \"primary\" : \"ghost\"}\n                    size=\"sm\"\n                    onClick={() => setActiveTab(\"props\")}\n                    role=\"tab\"\n                    aria-selected={activeTab === \"props\"}\n                  >\n                    <Settings className=\"h-4 w-4 mr-2\" />\n                    Props\n                  </Button>\n                </div>\n                <div>\n                  <div className=\"mt-6\">\n                    <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n                      {/* Preview */}\n                      <div\n                        className={cn(\n                          \"mx-auto transition-all duration-300\",\n                          getViewportClass()\n                        )}\n                      >\n                        <div>\n                          {showcaseRegistry[selectedComponent]\n                            ? React.createElement(\n                                showcaseRegistry[selectedComponent]\n                              )\n                            : null}\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  {activeTab === \"code\" && (\n                    <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Code example\">\n                      <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n                        <div className=\"flex flex-row items-center justify-between\">\n                          <h2 className=\"text-lg font-semibold mb-0 dark:text-white\">\n                            Usage Example\n                          </h2>\n                          <Button\n                            variant=\"outline\"\n                            size=\"sm\"\n                            onClick={() => copyToClipboard(currentExample)}\n                          >\n                            {copiedCode === currentExample ? (\n                              <Check className=\"h-4 w-4 mr-2\" />\n                            ) : (\n                              <Copy className=\"h-4 w-4 mr-2\" />\n                            )}\n                            Copy\n                          </Button>\n                        </div>\n                        <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\n                          <code>{currentExample}</code>\n                        </pre>\n                      </div>\n                    </div>\n                  )}\n\n                  {activeTab === \"props\" && (\n                    <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Component props\">\n                      <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n                        <h2 className=\"text-lg font-semibold mb-4 dark:text-white\">\n                          Component Props\n                        </h2>\n                        <div className=\"overflow-x-auto\">\n                          <table className=\"w-full border-collapse\">\n                            <thead>\n                              <tr className=\"border-b border-gray-200 dark:border-gray-800\">\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Prop\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Type\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Default\n                                </th>\n                                <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n                                  Description\n                                </th>\n                              </tr>\n                            </thead>\n                            <tbody>\n                              {currentProps.length > 0 ? (\n                                currentProps.map((prop: PropDoc, index) => (\n                                  <tr key={prop.name ?? index} className=\"border-b border-gray-100 dark:border-gray-800/50\">\n                                    <td className=\"p-3\">\n                                      <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n                                        {prop.name}\n                                      </code>\n                                      {prop.required && (\n                                        <Badge variant=\"danger\" className=\"ml-2 text-xs\">\n                                          Required\n                                        </Badge>\n                                      )}\n                                    </td>\n                                    <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.type}</td>\n                                    <td className=\"p-3 text-gray-600 dark:text-gray-400\">\n                                      {prop.default ? (\n                                        <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n                                          {prop.default}\n                                        </code>\n                                      ) : null}\n                                    </td>\n                                    <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.description}</td>\n                                  </tr>\n                                ))\n                              ) : (\n                                <tr>\n                                  <td colSpan={4} className=\"p-4 text-center text-gray-500 dark:text-gray-400\">\n                                    No props documented for this component yet.\n                                  </td>\n                                </tr>\n                              )}\n                            </tbody>\n                          </table>\n                        </div>\n                      </div>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div className=\"flex items-center justify-center h-full\">\n              <div className=\"text-center\">\n                <Book className=\"h-16 w-16 text-gray-400 dark:text-gray-600 mx-auto mb-4\" />\n                <h2 className=\"text-xl font-semibold text-gray-900 dark:text-white mb-2\">\n                  Select a Component\n                </h2>\n                <p className=\"text-gray-600 dark:text-gray-400\">\n                  Choose a component from the sidebar to view its documentation and examples.\n                </p>\n              </div>\n            </div>\n          )}\n        </main>\n      </div>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { DashboardGrid } from './DashboardGrid.js';
 
-const DashboardGridExample = () => (jsxs(DashboardGrid, { children: [jsx("div", { className: "p-4 bg-gray-100 rounded", children: "Widget 1" }), jsx("div", { className: "p-4 bg-gray-100 rounded", children: "Widget 2" }), jsx("div", { className: "p-4 bg-gray-100 rounded", children: "Widget 3" }), jsx("div", { className: "p-4 bg-gray-100 rounded", children: "Widget 4" })] }));
+const DashboardGridExample = () => (jsxs(DashboardGrid, { children: [jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded", children: "Widget 1" }), jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded", children: "Widget 2" }), jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded", children: "Widget 3" }), jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded", children: "Widget 4" })] }));
 
 export { DashboardGridExample };
 //# sourceMappingURL=DashboardGrid.example.js.map

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\";\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;;;;"}
+{"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 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded\">Widget 1</div>\n    <div className=\"p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded\">Widget 2</div>\n    <div className=\"p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded\">Widget 3</div>\n    <div className=\"p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-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,2EAA2E,yBAAe,EACzGA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2EAA2E,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,EACzGA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2EAA2E,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,EACzGA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2EAA2E,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,CAAA,EAAA,CAC3F;;;;"}

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

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { DashboardLayout } from './DashboardLayout.js';
 
-const DashboardLayoutExample = () => (jsx(DashboardLayout, { sidebarTitle: "Mazao", sidebarTitleLetter: "A", children: jsx("div", { className: "p-4", children: "This is the dashboard content area." }) }));
+const DashboardLayoutExample = () => (jsx(DashboardLayout, { sidebarTitle: "Mazao", sidebarTitleLetter: "A", children: jsx("div", { className: "p-4 text-gray-900 dark:text-gray-100", children: "This is the dashboard content area." }) }));
 
 export { DashboardLayoutExample };
 //# sourceMappingURL=DashboardLayout.example.js.map

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\";\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;;;;"}
+{"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 text-gray-900 dark:text-gray-100\">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,sCAAsC,EAAA,QAAA,EAAA,qCAAA,EAAA,CAA0C,EAAA,CAC/E;;;;"}

package/dist/components/DataTable/DataTable.d.ts

@@ -1,5 +1,8 @@
+import * as React from "react";
 import type { DataTableProps } from "./DataTable.types";
 export declare const DataTable: {
-    <T extends Record<string, any>>({ columns, dataSource, loading, rowKey, pagination, rowSelection, size, bordered, showHeader, title, footer, className, onSort, onFilter, onChange, ...props }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends Record<string, any>>({ columns, dataSource, loading, rowKey, pagination, rowSelection, size, bordered, showHeader, title, footer, className, onSort, onFilter, onChange, emptyLabel, ...props }: DataTableProps<T> & {
+        emptyLabel?: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };