@beyondcorp/beyond-ui 1.0.6 → 1.0.9

package/dist/index.cjs

@@ -1,3467 +0,0 @@
-'use strict';
-
-var React11 = require('react');
-var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var toast = require('react-hot-toast');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
-var toast__default = /*#__PURE__*/_interopDefault(toast);
-
-// src/components/Button/Button.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var buttonVariants = classVarianceAuthority.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",
-  {
-    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"
-      },
-      size: {
-        sm: "h-8 px-3 text-xs",
-        md: "h-10 px-4 py-2",
-        lg: "h-11 px-8",
-        xl: "h-12 px-10 text-base"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-var Button = React11__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var inputVariants = classVarianceAuthority.cva(
-  "flex w-full rounded-md border bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 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",
-  {
-    variants: {
-      variant: {
-        default: "border-gray-300",
-        error: "border-danger-500 focus-visible:ring-danger-500",
-        success: "border-success-500 focus-visible:ring-success-500"
-      },
-      inputSize: {
-        sm: "h-8 px-2 text-xs",
-        md: "h-10 px-3",
-        lg: "h-12 px-4 text-base"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      inputSize: "md"
-    }
-  }
-);
-var Input = React11__namespace.forwardRef(
-  ({ className, variant, inputSize, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type,
-        className: cn(inputVariants({ variant, inputSize, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
-var cardVariants = classVarianceAuthority.cva(
-  "rounded-lg border bg-white text-gray-950 shadow-sm",
-  {
-    variants: {
-      variant: {
-        default: "border-gray-200",
-        elevated: "border-gray-200 shadow-md",
-        outlined: "border-2 border-primary-200"
-      },
-      padding: {
-        none: "p-0",
-        sm: "p-4",
-        md: "p-6",
-        lg: "p-8"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      padding: "md"
-    }
-  }
-);
-var Card = React11__namespace.forwardRef(
-  ({ className, variant, padding, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn(cardVariants({ variant, padding, className })),
-      ...props
-    }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "h3",
-  {
-    ref,
-    className: cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    ),
-    ...props
-  }
-));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-sm text-gray-500", className),
-    ...props
-  }
-));
-CardDescription.displayName = "CardDescription";
-var CardContent = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
-CardFooter.displayName = "CardFooter";
-var badgeVariants = classVarianceAuthority.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"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-var alertVariants = classVarianceAuthority.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"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var Alert = React11__namespace.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    role: "alert",
-    className: cn(alertVariants({ variant }), className),
-    ...props
-  }
-));
-Alert.displayName = "Alert";
-var AlertTitle = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "h5",
-  {
-    ref,
-    className: cn("mb-1 font-medium leading-none tracking-tight", className),
-    ...props
-  }
-));
-AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn("text-sm [&_p]:leading-relaxed", className),
-    ...props
-  }
-));
-AlertDescription.displayName = "AlertDescription";
-var avatarVariants = classVarianceAuthority.cva(
-  "relative flex shrink-0 overflow-hidden rounded-full",
-  {
-    variants: {
-      size: {
-        sm: "h-8 w-8",
-        md: "h-10 w-10",
-        lg: "h-16 w-16",
-        xl: "h-20 w-20"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var Avatar = React11__namespace.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn(avatarVariants({ size }), className),
-    ...props
-  }
-));
-Avatar.displayName = "Avatar";
-var AvatarImage = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "img",
-  {
-    ref,
-    className: cn("aspect-square h-full w-full object-cover", className),
-    ...props
-  }
-));
-AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ref,
-    className: cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-gray-100 text-gray-600 font-medium",
-      className
-    ),
-    ...props
-  }
-));
-AvatarFallback.displayName = "AvatarFallback";
-var spinnerVariants = classVarianceAuthority.cva(
-  "animate-spin rounded-full border-2 border-current border-t-transparent",
-  {
-    variants: {
-      size: {
-        sm: "h-4 w-4",
-        md: "h-6 w-6",
-        lg: "h-8 w-8",
-        xl: "h-12 w-12"
-      },
-      variant: {
-        primary: "text-primary-600",
-        secondary: "text-secondary-600",
-        white: "text-white",
-        current: "text-current"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "primary"
-    }
-  }
-);
-var Spinner = React11__namespace.forwardRef(
-  ({ className, size, variant, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn(spinnerVariants({ size, variant }), className),
-        ...props
-      }
-    );
-  }
-);
-Spinner.displayName = "Spinner";
-var skeletonVariants = classVarianceAuthority.cva(
-  "animate-pulse rounded-md bg-gray-200",
-  {
-    variants: {
-      variant: {
-        default: "bg-gray-200",
-        darker: "bg-gray-300"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var Skeleton = React11__namespace.forwardRef(
-  ({ className, variant, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn(skeletonVariants({ variant }), className),
-        ...props
-      }
-    );
-  }
-);
-Skeleton.displayName = "Skeleton";
-var textareaVariants = classVarianceAuthority.cva(
-  "flex min-h-[80px] w-full rounded-md border bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 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",
-  {
-    variants: {
-      variant: {
-        default: "border-gray-300",
-        error: "border-danger-500 focus-visible:ring-danger-500",
-        success: "border-success-500 focus-visible:ring-success-500"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var Textarea = React11__namespace.forwardRef(
-  ({ className, variant, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        className: cn(textareaVariants({ variant, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Textarea.displayName = "Textarea";
-var switchVariants = classVarianceAuthority.cva(
-  "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-gray-200",
-  {
-    variants: {
-      size: {
-        sm: "h-5 w-9",
-        md: "h-6 w-11",
-        lg: "h-7 w-13"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var switchThumbVariants = classVarianceAuthority.cva(
-  "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform",
-  {
-    variants: {
-      size: {
-        sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-        md: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-        lg: "h-6 w-6 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var Switch = React11__namespace.forwardRef(
-  ({ className, size, checked = false, onCheckedChange, ...props }, ref) => {
-    const handleClick = () => {
-      onCheckedChange?.(!checked);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        role: "switch",
-        "aria-checked": checked,
-        "data-state": checked ? "checked" : "unchecked",
-        className: cn(switchVariants({ size }), className),
-        onClick: handleClick,
-        ref,
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "data-state": checked ? "checked" : "unchecked",
-            className: cn(switchThumbVariants({ size }))
-          }
-        )
-      }
-    );
-  }
-);
-Switch.displayName = "Switch";
-var checkboxVariants = classVarianceAuthority.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",
-  {
-    variants: {
-      size: {
-        sm: "h-3 w-3",
-        md: "h-4 w-4",
-        lg: "h-5 w-5"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var Checkbox = React11__namespace.forwardRef(
-  ({ className, size, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-flex items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "checkbox",
-          className: cn(checkboxVariants({ size }), "appearance-none", className),
-          ref,
-          "data-state": props.checked ? "checked" : "unchecked",
-          ...props
-        }
-      ),
-      props.checked && /* @__PURE__ */ jsxRuntime.jsx(
-        lucideReact.Check,
-        {
-          className: cn(
-            "absolute pointer-events-none text-current",
-            size === "sm" && "h-2 w-2",
-            size === "md" && "h-3 w-3",
-            size === "lg" && "h-4 w-4"
-          )
-        }
-      )
-    ] });
-  }
-);
-Checkbox.displayName = "Checkbox";
-var modalVariants = classVarianceAuthority.cva(
-  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 sm:rounded-lg",
-  {
-    variants: {
-      size: {
-        sm: "max-w-sm",
-        md: "max-w-lg",
-        lg: "max-w-2xl",
-        xl: "max-w-4xl",
-        full: "max-w-[95vw] max-h-[95vh]"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var Modal = ({
-  open,
-  onOpenChange,
-  children,
-  size
-}) => {
-  const handleClose = () => {
-    onOpenChange?.(false);
-  };
-  if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
-        onClick: handleClose
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(modalVariants({ size })), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: handleClose,
-          className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:pointer-events-none",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-          ]
-        }
-      ),
-      children
-    ] })
-  ] });
-};
-var ModalHeader = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
-var ModalTitle = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "h2",
-  {
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    ),
-    ...props
-  }
-);
-var ModalDescription = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "p",
-  {
-    className: cn("text-sm text-gray-500", className),
-    ...props
-  }
-);
-var ModalContent = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-4 py-4", className), ...props });
-var ModalFooter = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-);
-var toastVariants = classVarianceAuthority.cva(
-  "flex items-center gap-2 p-4 rounded-lg shadow-lg border max-w-md",
-  {
-    variants: {
-      variant: {
-        default: "bg-white border-gray-200 text-gray-900",
-        success: "bg-success-50 border-success-200 text-success-800",
-        error: "bg-danger-50 border-danger-200 text-danger-800",
-        warning: "bg-warning-50 border-warning-200 text-warning-800",
-        info: "bg-primary-50 border-primary-200 text-primary-800"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var getIcon = (variant) => {
-  switch (variant) {
-    case "success":
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-5 w-5 text-success-600" });
-    case "error":
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-5 w-5 text-danger-600" });
-    case "warning":
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-warning-600" });
-    case "info":
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-5 w-5 text-primary-600" });
-    default:
-      return null;
-  }
-};
-var showToast = {
-  success: (message, options) => toast__default.default.success(message, {
-    duration: options?.duration || 4e3
-  }),
-  error: (message, options) => toast__default.default.error(message, {
-    duration: options?.duration || 5e3
-  }),
-  warning: (message, options) => toast__default.default(message, {
-    icon: "\u26A0\uFE0F",
-    duration: options?.duration || 4e3
-  }),
-  info: (message, options) => toast__default.default(message, {
-    icon: "\u2139\uFE0F",
-    duration: options?.duration || 4e3
-  }),
-  default: (message, options) => toast__default.default(message, {
-    duration: options?.duration || 4e3
-  })
-};
-var Toast = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    toast.Toaster,
-    {
-      position: "top-right",
-      toastOptions: {
-        duration: 4e3,
-        className: "",
-        style: {
-          background: "transparent",
-          boxShadow: "none",
-          padding: 0
-        }
-      },
-      children: (t) => /* @__PURE__ */ jsxRuntime.jsx(toast.ToastBar, { toast: t, children: ({ icon, message }) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            toastVariants({
-              variant: t.type === "success" ? "success" : t.type === "error" ? "error" : "default"
-            })
-          ),
-          children: [
-            getIcon(t.type === "success" ? "success" : t.type === "error" ? "error" : "default") || icon,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-sm font-medium", children: message }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => toast__default.default.dismiss(t.id),
-                className: "inline-flex h-5 w-5 items-center justify-center rounded-full hover:bg-black/10",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
-              }
-            )
-          ]
-        }
-      ) })
-    }
-  );
-};
-var tabsListVariants = classVarianceAuthority.cva(
-  "inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500",
-  {
-    variants: {
-      variant: {
-        default: "bg-gray-100",
-        pills: "bg-transparent gap-2",
-        underline: "bg-transparent border-b border-gray-200"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var tabsTriggerVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all 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",
-  {
-    variants: {
-      variant: {
-        default: "data-[state=active]:bg-white data-[state=active]:text-gray-950 data-[state=active]:shadow-sm",
-        pills: "data-[state=active]:bg-primary-100 data-[state=active]:text-primary-700 hover:bg-gray-100",
-        underline: "data-[state=active]:border-b-2 data-[state=active]:border-primary-600 data-[state=active]:text-primary-600 hover:text-gray-900 rounded-none border-b-2 border-transparent"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var TabsContext = React11__namespace.createContext(void 0);
-var Tabs = ({ value, onValueChange, variant, children, className }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value, onValueChange, variant }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), children }) });
-};
-var TabsList = React11__namespace.forwardRef(({ className, ...props }, ref) => {
-  const context = React11__namespace.useContext(TabsContext);
-  if (!context) throw new Error("TabsList must be used within Tabs");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn(tabsListVariants({ variant: context.variant }), className),
-      ...props
-    }
-  );
-});
-TabsList.displayName = "TabsList";
-var TabsTrigger = React11__namespace.forwardRef(
-  ({ className, value, ...props }, ref) => {
-    const context = React11__namespace.useContext(TabsContext);
-    if (!context) throw new Error("TabsTrigger must be used within Tabs");
-    const isActive = context.value === value;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        ref,
-        className: cn(
-          tabsTriggerVariants({ variant: context.variant }),
-          className
-        ),
-        "data-state": isActive ? "active" : "inactive",
-        onClick: () => context.onValueChange(value),
-        ...props
-      }
-    );
-  }
-);
-TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React11__namespace.forwardRef(
-  ({ className, value, ...props }, ref) => {
-    const context = React11__namespace.useContext(TabsContext);
-    if (!context) throw new Error("TabsContent must be used within Tabs");
-    if (context.value !== value) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-TabsContent.displayName = "TabsContent";
-var statsCardVariants = classVarianceAuthority.cva(
-  "relative overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "",
-        gradient: "bg-gradient-to-br"
-      },
-      color: {
-        primary: "from-primary-500 to-primary-600 text-white",
-        secondary: "from-secondary-500 to-secondary-600 text-white",
-        success: "from-success-500 to-success-600 text-white",
-        warning: "from-warning-500 to-warning-600 text-white",
-        danger: "from-danger-500 to-danger-600 text-white"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var StatsCard = React11__namespace.forwardRef(
-  ({ className, variant, color, title, value, trend, icon, ...props }, ref) => {
-    const getTrendIcon = (direction) => {
-      switch (direction) {
-        case "up":
-          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-4 w-4" });
-        case "down":
-          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-4 w-4" });
-        default:
-          return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-4 w-4" });
-      }
-    };
-    const getTrendColor = (direction) => {
-      if (variant === "gradient") return "text-white/80";
-      switch (direction) {
-        case "up":
-          return "text-success-600";
-        case "down":
-          return "text-danger-600";
-        default:
-          return "text-gray-600";
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Card,
-      {
-        ref,
-        className: cn(statsCardVariants({ variant, color }), className),
-        padding: "none",
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
-              "text-sm font-medium",
-              variant === "gradient" ? "text-white/80" : "text-gray-600"
-            ), children: title }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(
-                "text-3xl font-bold",
-                variant === "gradient" ? "text-white" : "text-gray-900"
-              ), children: value }),
-              trend && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-                "flex items-center gap-1 mt-1 text-sm",
-                getTrendColor(trend.direction)
-              ), children: [
-                getTrendIcon(trend.direction),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: trend.value }),
-                trend.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                  variant === "gradient" ? "text-white/60" : "text-gray-500"
-                ), children: trend.label })
-              ] })
-            ] })
-          ] }),
-          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "p-3 rounded-full",
-            variant === "gradient" ? "bg-white/20" : "bg-gray-100"
-          ), children: icon })
-        ] }) })
-      }
-    );
-  }
-);
-StatsCard.displayName = "StatsCard";
-var navbarVariants = classVarianceAuthority.cva(
-  "flex items-center justify-between w-full px-4 py-3 bg-white border-b border-gray-200",
-  {
-    variants: {
-      variant: {
-        default: "bg-white border-gray-200",
-        dark: "bg-gray-900 border-gray-700 text-white",
-        transparent: "bg-transparent border-transparent"
-      },
-      size: {
-        sm: "px-4 py-2",
-        md: "px-6 py-3",
-        lg: "px-8 py-4"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md"
-    }
-  }
-);
-var Navbar = React11__namespace.forwardRef(
-  ({ className, variant, size, logo, children, ...props }, ref) => {
-    const [isOpen, setIsOpen] = React11__namespace.useState(false);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "nav",
-      {
-        ref,
-        className: cn(navbarVariants({ variant, size }), className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
-            logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: logo }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center space-x-4 ml-auto", children }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: "md:hidden p-2 rounded-md hover:bg-gray-100",
-                onClick: () => setIsOpen(!isOpen),
-                children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-6 w-6" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-6 w-6" })
-              }
-            )
-          ] }),
-          isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden absolute top-full left-0 right-0 bg-white border-b border-gray-200 shadow-lg z-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 space-y-2", children }) })
-        ]
-      }
-    );
-  }
-);
-Navbar.displayName = "Navbar";
-var NavItem = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "a",
-  {
-    ref,
-    className: cn(
-      "text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium transition-colors",
-      className
-    ),
-    ...props
-  }
-));
-NavItem.displayName = "NavItem";
-var sidebarVariants = classVarianceAuthority.cva(
-  "fixed left-0 top-0 z-40 h-screen bg-white border-r border-gray-200 transition-all duration-300 ease-in-out",
-  {
-    variants: {
-      collapsed: {
-        false: "w-72",
-        true: "w-16"
-      }
-    },
-    defaultVariants: {
-      collapsed: false
-    }
-  }
-);
-var menuItemVariants = classVarianceAuthority.cva(
-  "flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 group",
-  {
-    variants: {
-      active: {
-        true: "bg-primary-50 text-primary-700 border-r-2 border-primary-600",
-        false: "text-gray-700 hover:bg-gray-50 hover:text-gray-900"
-      },
-      collapsed: {
-        true: "justify-center px-2",
-        false: "justify-start"
-      }
-    },
-    defaultVariants: {
-      active: false,
-      collapsed: false
-    }
-  }
-);
-var defaultMenuItems = [
-  {
-    id: "dashboard",
-    label: "Dashboard",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "h-5 w-5" }),
-    href: "/dashboard"
-  },
-  {
-    id: "analytics",
-    label: "Analytics",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-5 w-5" }),
-    href: "/analytics",
-    badge: "New"
-  },
-  {
-    id: "users",
-    label: "Users",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "h-5 w-5" }),
-    children: [
-      { id: "all-users", label: "All Users", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "h-4 w-4" }) },
-      { id: "user-roles", label: "User Roles", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4" }) }
-    ]
-  },
-  {
-    id: "reports",
-    label: "Reports",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "h-5 w-5" }),
-    href: "/reports"
-  },
-  {
-    id: "calendar",
-    label: "Calendar",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-5 w-5" }),
-    href: "/calendar"
-  },
-  {
-    id: "messages",
-    label: "Messages",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { className: "h-5 w-5" }),
-    href: "/messages",
-    badge: "3"
-  },
-  {
-    id: "notifications",
-    label: "Notifications",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: "h-5 w-5" }),
-    href: "/notifications"
-  },
-  {
-    id: "settings",
-    label: "Settings",
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-5 w-5" }),
-    href: "/settings"
-  }
-];
-var Sidebar = React11__namespace.forwardRef(
-  ({
-    className,
-    collapsed = false,
-    onToggle,
-    menuItems = defaultMenuItems,
-    activeItem = "dashboard",
-    onItemClick,
-    ...props
-  }, ref) => {
-    const [expandedItems, setExpandedItems] = React11__namespace.useState([]);
-    const toggleExpanded = (itemId) => {
-      setExpandedItems(
-        (prev) => prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]
-      );
-    };
-    const handleItemClick = (item) => {
-      if (item.children) {
-        toggleExpanded(item.id);
-      } else {
-        onItemClick?.(item.id);
-      }
-    };
-    const renderMenuItem = (item, level = 0) => {
-      const isActive = activeItem === item.id;
-      const isExpanded = expandedItems.includes(item.id);
-      const hasChildren = item.children && item.children.length > 0;
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => handleItemClick(item),
-            className: cn(
-              menuItemVariants({ active: isActive, collapsed }),
-              level > 0 && "ml-4 pl-8",
-              "relative"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: item.icon }),
-              !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-3 truncate", children: item.label }),
-                item.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "danger", className: "ml-auto text-xs", children: item.badge }),
-                hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
-                  lucideReact.ChevronDown,
-                  {
-                    className: cn(
-                      "ml-auto h-4 w-4 transition-transform duration-200",
-                      isExpanded && "rotate-180"
-                    )
-                  }
-                )
-              ] })
-            ] })
-          }
-        ),
-        hasChildren && !collapsed && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 space-y-1", children: item.children?.map((child) => renderMenuItem(child, level + 1)) })
-      ] }, item.id);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: cn(sidebarVariants({ collapsed }), className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [
-            !collapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white font-bold text-sm", children: "B" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-xl text-gray-900", children: "Beyond" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: onToggle,
-                className: "p-1.5 rounded-lg hover:bg-gray-100 transition-colors",
-                children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-gray-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4 text-gray-600" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 px-4 py-6 space-y-2 overflow-y-auto", children: menuItems.map((item) => renderMenuItem(item)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-200 p-4", children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }),
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "JD" })
-          ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "sm", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }),
-                /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "JD" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: "John Doe" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 truncate", children: "john@company.com" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-3 w-3 mr-1" }),
-                "Profile"
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium text-gray-700 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "h-3 w-3 mr-1" }),
-                "Logout"
-              ] })
-            ] })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-Sidebar.displayName = "Sidebar";
-var DashboardHeader = React11__namespace.forwardRef(
-  ({
-    className,
-    breadcrumbs = [{ label: "Dashboard" }],
-    onMenuToggle,
-    sidebarCollapsed = false,
-    showSearch = true,
-    searchPlaceholder = "Search...",
-    onSearchChange,
-    ...props
-  }, ref) => {
-    const [searchValue, setSearchValue] = React11__namespace.useState("");
-    const handleSearchChange = (e) => {
-      const value = e.target.value;
-      setSearchValue(value);
-      onSearchChange?.(value);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "header",
-      {
-        ref,
-        className: cn(
-          "sticky top-0 z-30 bg-white border-b border-gray-200 transition-all duration-300",
-          sidebarCollapsed ? "ml-16" : "ml-72",
-          className
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                onClick: onMenuToggle,
-                className: "md:hidden",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "h-5 w-5" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex items-center space-x-2 text-sm", children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React11__namespace.Fragment, { children: [
-              index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "/" }),
-              item.href ? /* @__PURE__ */ jsxRuntime.jsx(
-                "a",
-                {
-                  href: item.href,
-                  className: "text-gray-600 hover:text-gray-900 transition-colors",
-                  children: item.label
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900 font-medium", children: item.label })
-            ] }, index)) })
-          ] }),
-          showSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-md mx-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Input,
-              {
-                type: "text",
-                placeholder: searchPlaceholder,
-                value: searchValue,
-                onChange: handleSearchChange,
-                className: "pl-10 bg-gray-50 border-gray-200 focus:bg-white"
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "sm", className: "relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bell, { className: "h-5 w-5" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Badge,
-                {
-                  variant: "danger",
-                  className: "absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center",
-                  children: "3"
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-5 w-5" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 pl-3 border-l border-gray-200", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:block text-right", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: "John Doe" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: "Administrator" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "sm", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }),
-                /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "JD" })
-              ] })
-            ] })
-          ] })
-        ] })
-      }
-    );
-  }
-);
-DashboardHeader.displayName = "DashboardHeader";
-var DashboardLayout = React11__namespace.forwardRef(
-  ({
-    children,
-    className,
-    sidebarMenuItems,
-    activeSidebarItem,
-    breadcrumbs,
-    onSidebarItemClick,
-    showSearch,
-    searchPlaceholder,
-    onSearchChange,
-    ...props
-  }, ref) => {
-    const [sidebarCollapsed, setSidebarCollapsed] = React11__namespace.useState(false);
-    const toggleSidebar = () => {
-      setSidebarCollapsed((prev) => !prev);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("min-h-screen bg-gray-50", className), ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Sidebar,
-        {
-          collapsed: sidebarCollapsed,
-          onToggle: toggleSidebar,
-          menuItems: sidebarMenuItems,
-          activeItem: activeSidebarItem,
-          onItemClick: onSidebarItemClick,
-          className: props.sidebarClassName
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-h-screen", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DashboardHeader,
-          {
-            sidebarCollapsed,
-            onMenuToggle: toggleSidebar,
-            breadcrumbs,
-            showSearch,
-            searchPlaceholder,
-            onSearchChange
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "main",
-          {
-            className: cn(
-              "flex-1 transition-all duration-300 p-6",
-              props.disableSidebarMargin ? "" : sidebarCollapsed ? "ml-16" : "ml-72"
-            ),
-            children
-          }
-        )
-      ] }),
-      !sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden",
-          onClick: toggleSidebar
-        }
-      )
-    ] });
-  }
-);
-DashboardLayout.displayName = "DashboardLayout";
-var gridVariants = classVarianceAuthority.cva(
-  "grid gap-6",
-  {
-    variants: {
-      columns: {
-        1: "grid-cols-1",
-        2: "grid-cols-1 md:grid-cols-2",
-        3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-        4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
-        6: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6",
-        12: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-12"
-      }
-    },
-    defaultVariants: {
-      columns: 12
-    }
-  }
-);
-var gridItemVariants = classVarianceAuthority.cva(
-  "min-h-0",
-  // Prevents grid items from growing unnecessarily
-  {
-    variants: {
-      colSpan: {
-        1: "col-span-1",
-        2: "col-span-1 md:col-span-2",
-        3: "col-span-1 md:col-span-2 lg:col-span-3",
-        4: "col-span-1 md:col-span-2 lg:col-span-4",
-        6: "col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-6",
-        12: "col-span-full"
-      },
-      rowSpan: {
-        1: "row-span-1",
-        2: "row-span-2",
-        3: "row-span-3",
-        4: "row-span-4"
-      }
-    },
-    defaultVariants: {
-      colSpan: 1,
-      rowSpan: 1
-    }
-  }
-);
-var DashboardGrid = React11__namespace.forwardRef(
-  ({ className, columns, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn(gridVariants({ columns }), className),
-        ...props
-      }
-    );
-  }
-);
-var DashboardGridItem = React11__namespace.forwardRef(
-  ({ className, colSpan, rowSpan, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn(gridItemVariants({ colSpan, rowSpan }), className),
-        ...props
-      }
-    );
-  }
-);
-DashboardGrid.displayName = "DashboardGrid";
-DashboardGridItem.displayName = "DashboardGridItem";
-var tableVariants = classVarianceAuthority.cva(
-  "w-full border-collapse bg-white",
-  {
-    variants: {
-      size: {
-        small: "text-xs",
-        middle: "text-sm",
-        large: "text-base"
-      },
-      bordered: {
-        true: "border border-gray-200",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "middle",
-      bordered: false
-    }
-  }
-);
-var cellVariants = classVarianceAuthority.cva(
-  "border-b border-gray-200 transition-colors",
-  {
-    variants: {
-      size: {
-        small: "px-2 py-1",
-        middle: "px-4 py-3",
-        large: "px-6 py-4"
-      },
-      align: {
-        left: "text-left",
-        center: "text-center",
-        right: "text-right"
-      },
-      type: {
-        header: "bg-gray-50 font-semibold text-gray-900 border-b-2 border-gray-200",
-        body: "text-gray-700 hover:bg-gray-50"
-      }
-    },
-    defaultVariants: {
-      size: "middle",
-      align: "left",
-      type: "body"
-    }
-  }
-);
-var ColumnFilter = ({
-  column,
-  value,
-  onChange
-}) => {
-  const [isOpen, setIsOpen] = React11.useState(false);
-  const [tempValue, setTempValue] = React11.useState(value || "");
-  const handleApply = () => {
-    onChange(tempValue);
-    setIsOpen(false);
-  };
-  const handleClear = () => {
-    setTempValue("");
-    onChange("");
-    setIsOpen(false);
-  };
-  if (!column.filterable) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-block", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant: "ghost",
-        size: "sm",
-        onClick: () => setIsOpen(!isOpen),
-        className: cn(
-          "p-1 h-6 w-6",
-          value && "text-primary-600"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-3 w-3" })
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "fixed inset-0 z-10",
-          onClick: () => setIsOpen(false)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-full left-0 z-20 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg p-3 min-w-[200px]", children: [
-        column.filterType === "select" && column.filterOptions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: column.filterOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Checkbox,
-            {
-              checked: tempValue === option.value,
-              onChange: () => setTempValue(
-                tempValue === option.value ? "" : option.value
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: option.label })
-        ] }, option.value)) }) : /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            placeholder: `Filter ${column.title}`,
-            value: tempValue,
-            onChange: (e) => setTempValue(e.target.value),
-            className: "mb-2"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end space-x-2 mt-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleClear, children: "Clear" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "sm", onClick: handleApply, children: "Apply" })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-var TablePagination = ({ pagination, onChange }) => {
-  const { current, pageSize, total, showSizeChanger = true, pageSizeOptions = [10, 20, 50, 100] } = pagination;
-  const totalPages = Math.ceil(total / pageSize);
-  const startRecord = (current - 1) * pageSize + 1;
-  const endRecord = Math.min(current * pageSize, total);
-  const getPageNumbers = () => {
-    const pages = [];
-    const maxVisible = 5;
-    if (totalPages <= maxVisible) {
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      const start = Math.max(1, current - 2);
-      const end = Math.min(totalPages, start + maxVisible - 1);
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-    }
-    return pages;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-700", children: [
-        "Showing ",
-        startRecord,
-        " to ",
-        endRecord,
-        " of ",
-        total,
-        " results"
-      ] }),
-      showSizeChanger && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700", children: "Show" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "select",
-          {
-            value: pageSize,
-            onChange: (e) => onChange(1, Number(e.target.value)),
-            className: "border border-gray-300 rounded px-2 py-1 text-sm",
-            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700", children: "per page" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          onClick: () => onChange(1, pageSize),
-          disabled: current === 1,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          onClick: () => onChange(current - 1, pageSize),
-          disabled: current === 1,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
-        }
-      ),
-      getPageNumbers().map((page) => /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: current === page ? "primary" : "ghost",
-          size: "sm",
-          onClick: () => onChange(page, pageSize),
-          className: "min-w-[32px]",
-          children: page
-        },
-        page
-      )),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          onClick: () => onChange(current + 1, pageSize),
-          disabled: current === totalPages,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          onClick: () => onChange(totalPages, pageSize),
-          disabled: current === totalPages,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" })
-        }
-      )
-    ] })
-  ] });
-};
-var DataTable = ({
-  columns,
-  dataSource,
-  loading = false,
-  rowKey = "id",
-  pagination = { current: 1, pageSize: 10, total: 0 },
-  rowSelection,
-  size = "middle",
-  bordered = false,
-  showHeader = true,
-  title,
-  footer,
-  className,
-  onSort,
-  onFilter,
-  onChange,
-  ...props
-}) => {
-  const [sortConfig, setSortConfig] = React11.useState({ key: "", direction: null });
-  const [filters, setFilters] = React11.useState({});
-  const [selectedRowKeys, setSelectedRowKeys] = React11.useState(
-    rowSelection?.selectedRowKeys || []
-  );
-  const getRowKey = React11.useCallback((record, index) => {
-    if (typeof rowKey === "function") {
-      return rowKey(record);
-    }
-    return record[rowKey] || index;
-  }, [rowKey]);
-  const handleSort = React11.useCallback((columnKey) => {
-    let newDirection;
-    if (sortConfig.key !== columnKey) {
-      newDirection = "asc";
-    } else if (sortConfig.direction === "asc") {
-      newDirection = "desc";
-    } else if (sortConfig.direction === "desc") {
-      newDirection = null;
-    } else {
-      newDirection = "asc";
-    }
-    const newSortConfig = { key: columnKey, direction: newDirection };
-    setSortConfig(newSortConfig);
-    onSort?.(newSortConfig);
-    onChange?.(pagination, filters, newSortConfig);
-  }, [sortConfig, pagination, filters, onSort, onChange]);
-  const handleFilter = React11.useCallback((columnKey, value) => {
-    const newFilters = { ...filters };
-    if (value === "" || value === null || value === void 0) {
-      delete newFilters[columnKey];
-    } else {
-      newFilters[columnKey] = value;
-    }
-    setFilters(newFilters);
-    onFilter?.(newFilters);
-    onChange?.(pagination, newFilters, sortConfig);
-  }, [filters, pagination, sortConfig, onFilter, onChange]);
-  const handleRowSelect = React11.useCallback((record, selected) => {
-    const key = getRowKey(record, 0);
-    let newSelectedKeys;
-    if (rowSelection?.type === "radio") {
-      newSelectedKeys = selected ? [key] : [];
-    } else {
-      newSelectedKeys = selected ? [...selectedRowKeys, key] : selectedRowKeys.filter((k) => k !== key);
-    }
-    setSelectedRowKeys(newSelectedKeys);
-    const selectedRows = dataSource.filter(
-      (item) => newSelectedKeys.includes(getRowKey(item, 0))
-    );
-    rowSelection?.onChange?.(newSelectedKeys, selectedRows);
-    rowSelection?.onSelect?.(record, selected, selectedRows, {});
-  }, [selectedRowKeys, rowSelection, dataSource, getRowKey]);
-  const handleSelectAll = React11.useCallback((selected) => {
-    const newSelectedKeys = selected ? dataSource.map((item, index) => getRowKey(item, index)) : [];
-    setSelectedRowKeys(newSelectedKeys);
-    const selectedRows = selected ? dataSource : [];
-    rowSelection?.onChange?.(newSelectedKeys, selectedRows);
-    rowSelection?.onSelectAll?.(selected, selectedRows, dataSource);
-  }, [dataSource, rowSelection, getRowKey]);
-  const processedData = React11.useMemo(() => {
-    let result = [...dataSource];
-    Object.entries(filters).forEach(([key, value]) => {
-      if (value !== "" && value !== null && value !== void 0) {
-        result = result.filter((item) => {
-          const itemValue = item[key];
-          if (typeof itemValue === "string") {
-            return itemValue.toLowerCase().includes(String(value).toLowerCase());
-          }
-          return itemValue === value;
-        });
-      }
-    });
-    if (sortConfig.key && sortConfig.direction) {
-      result.sort((a, b) => {
-        const aValue = a[sortConfig.key];
-        const bValue = b[sortConfig.key];
-        if (aValue === bValue) return 0;
-        const comparison = aValue < bValue ? -1 : 1;
-        return sortConfig.direction === "asc" ? comparison : -comparison;
-      });
-    }
-    return result;
-  }, [dataSource, filters, sortConfig]);
-  const paginatedData = React11.useMemo(() => {
-    if (!pagination) return processedData;
-    const { current, pageSize } = pagination;
-    const startIndex = (current - 1) * pageSize;
-    return processedData.slice(startIndex, startIndex + pageSize);
-  }, [processedData, pagination]);
-  const currentPagination = React11.useMemo(() => {
-    if (!pagination) return false;
-    return {
-      ...pagination,
-      total: processedData.length
-    };
-  }, [pagination, processedData.length]);
-  const isAllSelected = selectedRowKeys.length === dataSource.length && dataSource.length > 0;
-  const isIndeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < dataSource.length;
-  if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
-      title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: title() }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-8" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 flex-1" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-24" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-16" })
-      ] }, i)) }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", className), children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: title() }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: cn(tableVariants({ size, bordered })), children: [
-        showHeader && /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-          rowSelection && /* @__PURE__ */ jsxRuntime.jsx("th", { className: cn(cellVariants({ size, type: "header" }), "w-12"), children: rowSelection.type !== "radio" && /* @__PURE__ */ jsxRuntime.jsx(
-            Checkbox,
-            {
-              checked: isAllSelected,
-              onChange: (e) => handleSelectAll(e.target.checked),
-              className: cn(isIndeterminate && "indeterminate")
-            }
-          ) }),
-          columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-            "th",
-            {
-              className: cn(
-                cellVariants({
-                  size,
-                  align: column.align,
-                  type: "header"
-                }),
-                column.width && `w-[${column.width}]`
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.title }),
-                  column.sortable && /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      onClick: () => handleSort(column.key),
-                      className: "flex flex-col items-center hover:text-primary-600",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          lucideReact.ChevronUp,
-                          {
-                            className: cn(
-                              "h-3 w-3",
-                              sortConfig.key === column.key && sortConfig.direction === "asc" ? "text-primary-600" : "text-gray-400"
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          lucideReact.ChevronDown,
-                          {
-                            className: cn(
-                              "h-3 w-3 -mt-1",
-                              sortConfig.key === column.key && sortConfig.direction === "desc" ? "text-primary-600" : "text-gray-400"
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ColumnFilter,
-                  {
-                    column,
-                    value: filters[column.key],
-                    onChange: (value) => handleFilter(column.key, value)
-                  }
-                )
-              ] })
-            },
-            column.key
-          ))
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
-          "td",
-          {
-            colSpan: columns.length + (rowSelection ? 1 : 0),
-            className: cn(cellVariants({ size, align: "center" }), "py-8"),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-500", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl mb-2", children: "\u{1F4CB}" }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: "No data available" })
-            ] })
-          }
-        ) }) : paginatedData.map((record, index) => {
-          const key = getRowKey(record, index);
-          const isSelected = selectedRowKeys.includes(key);
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            "tr",
-            {
-              className: cn(
-                "hover:bg-gray-50 transition-colors",
-                isSelected && "bg-primary-50"
-              ),
-              ...props.onRow?.(record, index) ?? {},
-              children: [
-                rowSelection && /* @__PURE__ */ jsxRuntime.jsx("td", { className: cn(cellVariants({ size })), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Checkbox,
-                  {
-                    checked: isSelected,
-                    onChange: (e) => handleRowSelect(record, e.target.checked),
-                    ...rowSelection.getCheckboxProps?.(record)
-                  }
-                ) }),
-                columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "td",
-                  {
-                    className: cn(cellVariants({
-                      size,
-                      align: column.align
-                    })),
-                    children: column.render ? column.render(record[column.dataIndex], record, index) : String(record[column.dataIndex] || "")
-                  },
-                  column.key
-                ))
-              ]
-            },
-            key
-          );
-        }) })
-      ] }) }),
-      currentPagination && /* @__PURE__ */ jsxRuntime.jsx(
-        TablePagination,
-        {
-          pagination: currentPagination,
-          onChange: (page, pageSize) => {
-            const newPagination = { ...currentPagination, current: page, pageSize };
-            onChange?.(newPagination, filters, sortConfig);
-          }
-        }
-      )
-    ] }),
-    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: footer() })
-  ] });
-};
-DataTable.displayName = "DataTable";
-var generateUsers = () => {
-  const roles = ["Admin", "Manager", "Developer", "Designer", "Analyst"];
-  const departments = ["Engineering", "Design", "Marketing", "Sales", "HR"];
-  const statuses = ["active", "inactive", "pending"];
-  return Array.from({ length: 50 }, (_, i) => ({
-    id: i + 1,
-    name: `User ${i + 1}`,
-    email: `user${i + 1}@company.com`,
-    role: roles[Math.floor(Math.random() * roles.length)],
-    status: statuses[Math.floor(Math.random() * statuses.length)],
-    avatar: `https://images.pexels.com/photos/${774909 + i}/pexels-photo-${774909 + i}.jpeg?auto=compress&cs=tinysrgb&w=64`,
-    joinDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toISOString().split("T")[0],
-    lastLogin: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1e3).toISOString().split("T")[0],
-    department: departments[Math.floor(Math.random() * departments.length)]
-  }));
-};
-var generateSales = () => {
-  const products = ["Pro Plan", "Basic Plan", "Enterprise", "Starter", "Premium"];
-  const regions = ["North America", "Europe", "Asia Pacific", "Latin America"];
-  const statuses = ["completed", "pending", "cancelled"];
-  return Array.from({ length: 75 }, (_, i) => ({
-    id: i + 1,
-    product: products[Math.floor(Math.random() * products.length)],
-    customer: `Customer ${i + 1}`,
-    amount: Math.floor(Math.random() * 1e4) + 100,
-    status: statuses[Math.floor(Math.random() * statuses.length)],
-    date: new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toISOString().split("T")[0],
-    region: regions[Math.floor(Math.random() * regions.length)],
-    salesperson: `Sales Rep ${Math.floor(Math.random() * 10) + 1}`
-  }));
-};
-var generateTasks = () => {
-  const priorities = ["low", "medium", "high", "urgent"];
-  const statuses = ["todo", "in-progress", "review", "completed"];
-  const projects = ["Website Redesign", "Mobile App", "API Integration", "Dashboard", "Marketing Campaign"];
-  const tagOptions = ["frontend", "backend", "design", "testing", "documentation", "bug", "feature"];
-  return Array.from({ length: 60 }, (_, i) => ({
-    id: i + 1,
-    title: `Task ${i + 1}: Implement feature`,
-    assignee: `Developer ${Math.floor(Math.random() * 8) + 1}`,
-    priority: priorities[Math.floor(Math.random() * priorities.length)],
-    status: statuses[Math.floor(Math.random() * statuses.length)],
-    dueDate: new Date(Date.now() + Math.floor(Math.random() * 60) * 24 * 60 * 60 * 1e3).toISOString().split("T")[0],
-    project: projects[Math.floor(Math.random() * projects.length)],
-    tags: Array.from(
-      { length: Math.floor(Math.random() * 3) + 1 },
-      () => tagOptions[Math.floor(Math.random() * tagOptions.length)]
-    ).filter((tag, index, arr) => arr.indexOf(tag) === index)
-  }));
-};
-var usersData = generateUsers();
-var salesData = generateSales();
-var tasksData = generateTasks();
-var DataTableShowcase = () => {
-  const [selectedTab, setSelectedTab] = React11.useState("users");
-  const [selectedRows, setSelectedRows] = React11.useState([]);
-  const userColumns = [
-    {
-      key: "user",
-      title: "User",
-      dataIndex: "name",
-      sortable: true,
-      filterable: true,
-      filterType: "text",
-      render: (_, record) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: "sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: record.avatar }),
-          /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: record.name.split(" ").map((n) => n[0]).join("") })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900", children: record.name }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: record.email })
-        ] })
-      ] })
-    },
-    {
-      key: "role",
-      title: "Role",
-      dataIndex: "role",
-      sortable: true,
-      filterable: true,
-      filterType: "select",
-      filterOptions: [
-        { label: "Admin", value: "Admin" },
-        { label: "Manager", value: "Manager" },
-        { label: "Developer", value: "Developer" },
-        { label: "Designer", value: "Designer" },
-        { label: "Analyst", value: "Analyst" }
-      ]
-    },
-    {
-      key: "department",
-      title: "Department",
-      dataIndex: "department",
-      sortable: true,
-      filterable: true,
-      filterType: "select",
-      filterOptions: [
-        { label: "Engineering", value: "Engineering" },
-        { label: "Design", value: "Design" },
-        { label: "Marketing", value: "Marketing" },
-        { label: "Sales", value: "Sales" },
-        { label: "HR", value: "HR" }
-      ]
-    },
-    {
-      key: "status",
-      title: "Status",
-      dataIndex: "status",
-      sortable: true,
-      filterable: true,
-      filterType: "select",
-      filterOptions: [
-        { label: "Active", value: "active" },
-        { label: "Inactive", value: "inactive" },
-        { label: "Pending", value: "pending" }
-      ],
-      render: (status) => /* @__PURE__ */ jsxRuntime.jsx(
-        Badge,
-        {
-          variant: status === "active" ? "success" : status === "inactive" ? "secondary" : "warning",
-          children: status.charAt(0).toUpperCase() + status.slice(1)
-        }
-      )
-    },
-    {
-      key: "joinDate",
-      title: "Join Date",
-      dataIndex: "joinDate",
-      sortable: true,
-      filterable: true,
-      filterType: "date"
-    },
-    {
-      key: "actions",
-      title: "Actions",
-      dataIndex: "id",
-      align: "center",
-      render: (_, record) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center space-x-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: () => showToast.info(`View user ${record.name}`), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: () => showToast.info(`Edit user ${record.name}`), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: () => showToast.warning(`Delete user ${record.name}`), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4 text-danger-600" }) })
-      ] })
-    }
-  ];
-  const salesColumns = [
-    {
-      key: "product",
-      title: "Product",
-      dataIndex: "product",
-      sortable: true,
-      filterable: true,
-      filterType: "text",
-      render: (product) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900", children: product })
-    },
-    {
-      key: "customer",
-      title: "Customer",
-      dataIndex: "customer",
-      sortable: true,
-      filterable: true,
-      filterType: "text"
-    },
-    {
-      key: "amount",
-      title: "Amount",
-      dataIndex: "amount",
-      sortable: true,
-      filterable: true,
-      filterType: "number",
-      align: "right",
-      render: (amount) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end space-x-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DollarSign, { className: "h-4 w-4 text-gray-400" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: amount.toLocaleString() })
-      ] })
-    },
-    {
-      key: "status",
-      title: "Status",
-      dataIndex: "status",
-      sortable: true,
-      filterable: true,
-      filterType: "select",
-      filterOptions: [
-        { label: "Completed", value: "completed" },
-        { label: "Pending", value: "pending" },
-        { label: "Cancelled", value: "cancelled" }
-      ],
-      render: (status) => /* @__PURE__ */ jsxRuntime.jsx(
-        Badge,
-        {
-          variant: status === "completed" ? "success" : status === "pending" ? "warning" : "danger",
-          children: status.charAt(0).toUpperCase() + status.slice(1)
-        }
-      )
-    },
-    {
-      key: "region",
-      title: "Region",
-      dataIndex: "region",
-      sortable: true,
-      filterable: true,
-      filterType: "select",
-      filterOptions: [
-        { label: "North America", value: "North America" },
-        { label: "Europe", value: "Europe" },
-        { label: "Asia Pacific", value: "Asia Pacific" },
-        { label: "Latin America", value: "Latin America" }
-      ]
-    },
-    {
-      key: "date",
-      title: "Date",
-      dataIndex: "date",
-      sortable: true,
-      filterable: true,
-      filterType: "date"
-    }
-  ];
-  const taskColumns = [
-    {
-      key: "title",
-      title: "Task",
-      dataIndex: "title",
-      sortable: true,
-      filterable: true,
-      filterType: "text",
-      render: (title, record) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900", children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: record.project })
-      ] })
-    },
-    {
-      key: "assignee",
-      title: "Assignee",
-      dataIndex: "assignee",
-      sortable: true,
-      filterable: true,
-      filterType: "text"
-    },
-    {
-      key: "priority",
-      title: "Priority",
-      dataIndex: "priority",
-      sortable: true,
-      filterable: true,
-      filterType: "select",
-      filterOptions: [
-        { label: "Low", value: "low" },
-        { label: "Medium", value: "medium" },
-        { label: "High", value: "high" },
-        { label: "Urgent", value: "urgent" }
-      ],
-      render: (priority) => /* @__PURE__ */ jsxRuntime.jsx(
-        Badge,
-        {
-          variant: priority === "urgent" ? "danger" : priority === "high" ? "warning" : priority === "medium" ? "secondary" : "outline",
-          children: priority.charAt(0).toUpperCase() + priority.slice(1)
-        }
-      )
-    },
-    {
-      key: "status",
-      title: "Status",
-      dataIndex: "status",
-      sortable: true,
-      filterable: true,
-      filterType: "select",
-      filterOptions: [
-        { label: "To Do", value: "todo" },
-        { label: "In Progress", value: "in-progress" },
-        { label: "Review", value: "review" },
-        { label: "Completed", value: "completed" }
-      ],
-      render: (status) => /* @__PURE__ */ jsxRuntime.jsx(
-        Badge,
-        {
-          variant: status === "completed" ? "success" : status === "in-progress" ? "warning" : status === "review" ? "secondary" : "outline",
-          children: status.replace("-", " ").replace(/\b\w/g, (l) => l.toUpperCase())
-        }
-      )
-    },
-    {
-      key: "dueDate",
-      title: "Due Date",
-      dataIndex: "dueDate",
-      sortable: true,
-      filterable: true,
-      filterType: "date"
-    },
-    {
-      key: "tags",
-      title: "Tags",
-      dataIndex: "tags",
-      render: (tags) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1", children: [
-        tags.slice(0, 2).map((tag) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-xs", children: tag }, tag)),
-        tags.length > 2 && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "text-xs", children: [
-          "+",
-          tags.length - 2
-        ] })
-      ] })
-    }
-  ];
-  const getCurrentData = () => {
-    switch (selectedTab) {
-      case "users":
-        return usersData;
-      case "sales":
-        return salesData;
-      case "tasks":
-        return tasksData;
-      default:
-        return [];
-    }
-  };
-  const getCurrentColumns = () => {
-    switch (selectedTab) {
-      case "users":
-        return userColumns;
-      case "sales":
-        return salesColumns;
-      case "tasks":
-        return taskColumns;
-      default:
-        return [];
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold text-gray-900", children: "DataTable Component" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 mt-1", children: "A comprehensive table component with filtering, sorting, and pagination" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", onClick: () => showToast.info("Export functionality"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4 mr-2" }),
-          "Export"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "primary", onClick: () => showToast.success("Add new item"), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }),
-          "Add New"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "-mb-px flex space-x-8", children: [
-      { key: "users", label: "Users", icon: lucideReact.Users },
-      { key: "sales", label: "Sales", icon: lucideReact.DollarSign },
-      { key: "tasks", label: "Tasks", icon: lucideReact.Calendar }
-    ].map(({ key, label, icon: Icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick: () => setSelectedTab(key),
-        className: `
-                flex items-center space-x-2 py-2 px-1 border-b-2 font-medium text-sm
-                ${selectedTab === key ? "border-primary-500 text-primary-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}
-              `,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-        ]
-      },
-      key
-    )) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-600", children: "Total Records" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900", children: getCurrentData().length })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 bg-primary-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "h-6 w-6 text-primary-600" }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-600", children: "Selected" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900", children: selectedRows.length })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 bg-success-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-6 w-6 text-success-600" }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-600", children: "Active Filters" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900", children: "0" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 bg-warning-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-6 w-6 text-warning-600" }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-600", children: "Performance" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-4 w-4 text-success-600" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900", children: "Fast" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 bg-success-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-6 w-6 text-success-600" }) })
-      ] }) }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-      DataTable,
-      {
-        columns: getCurrentColumns(),
-        dataSource: getCurrentData(),
-        rowKey: "id",
-        pagination: {
-          current: 1,
-          pageSize: 10,
-          total: getCurrentData().length,
-          showSizeChanger: true,
-          pageSizeOptions: [5, 10, 20, 50]
-        },
-        rowSelection: {
-          type: "checkbox",
-          selectedRowKeys: selectedRows,
-          onChange: (keys) => {
-            setSelectedRows(keys);
-            showToast.info(`Selected ${keys.length} items`);
-          }
-        },
-        size: "middle",
-        bordered: false,
-        title: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-semibold text-gray-900", children: [
-            selectedTab.charAt(0).toUpperCase() + selectedTab.slice(1),
-            " Data"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", children: [
-              getCurrentData().length,
-              " total"
-            ] }),
-            selectedRows.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "primary", children: [
-              selectedRows.length,
-              " selected"
-            ] })
-          ] })
-        ] }),
-        onChange: (pagination, filters, sorter) => {
-          console.log("Table changed:", { pagination, filters, sorter });
-        }
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Component Features" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-gray-900 mb-2", children: "Core Features" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-1 text-sm text-gray-600", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Sortable columns with visual indicators" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Advanced filtering (text, select, date)" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Pagination with configurable page sizes" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Row selection (single/multiple)" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Responsive design for all screen sizes" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Loading and empty states" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-gray-900 mb-2", children: "Advanced Features" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-1 text-sm text-gray-600", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Custom cell renderers" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 TypeScript support with full typing" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Accessibility features (ARIA labels)" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Performance optimizations" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Customizable styling and themes" }),
-            /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Export and bulk actions support" })
-          ] })
-        ] })
-      ] }) })
-    ] })
-  ] });
-};
-function ShowcaseButtonDemo() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", children: "Primary" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", children: "Secondary" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "danger", children: "Danger" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "success", children: "Success" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "warning", children: "Warning" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", children: "Outline" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", children: "Ghost" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "link", children: "Link" })
-  ] });
-}
-function ShowcaseInputDemo() {
-  const [v, setV] = React11__namespace.useState("");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 max-w-md", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Default input", value: v, onChange: (e) => setV(e.target.value) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Success state", variant: "success" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Error state", variant: "error" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Small", inputSize: "sm" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Medium", inputSize: "md" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Input, { placeholder: "Large", inputSize: "lg" })
-    ] })
-  ] });
-}
-function ShowcaseTextareaDemo() {
-  const [tv, setTv] = React11__namespace.useState("");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 max-w-md", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Default textarea", value: tv, onChange: (e) => setTv(e.target.value) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Success state", variant: "success" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Error state", variant: "error" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Small (default)" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Textarea, { placeholder: "Disabled", disabled: true })
-    ] })
-  ] });
-}
-function ShowcaseSwitchDemo() {
-  const [checked, setChecked] = React11__namespace.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked, onCheckedChange: setChecked }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Default" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Switch, { checked: true }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Checked" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Switch, { disabled: true }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Disabled" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Switch, { size: "sm" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Small" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Switch, { size: "lg" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Large" })
-    ] })
-  ] });
-}
-function ShowcaseCheckboxDemo() {
-  const [checked, setChecked] = React11__namespace.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked, onChange: () => setChecked(!checked) }),
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Default" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: true }),
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Checked" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { disabled: true }),
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Disabled" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { size: "sm" }),
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Small" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { size: "lg" }),
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Large" })
-    ] })
-  ] });
-}
-function ShowcaseCardDemo() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Default Card" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "This is a default card with standard styling." }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Card, { variant: "elevated", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: "Elevated Card" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "This card has elevated shadow styling." }) })
-    ] })
-  ] });
-}
-function ShowcaseBadgeDemo() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: "Default" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: "Secondary" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "success", children: "Success" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "danger", children: "Danger" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warning", children: "Warning" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: "Outline" })
-  ] });
-}
-function ShowcaseAvatarDemo() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://randomuser.me/api/portraits/men/32.jpg" }),
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "AB" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "" }),
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "CD" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: "https://randomuser.me/api/portraits/women/44.jpg" }),
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: "EF" })
-    ] })
-  ] });
-}
-function ShowcaseModalDemo() {
-  const [open, setOpen] = React11__namespace.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => setOpen(true), children: "Show Modal" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: "Demo Modal" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ModalContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "This is a basic modal dialog." }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ModalFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: () => setOpen(false), children: "Close" }) })
-    ] })
-  ] });
-}
-function ShowcaseToastDemo() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: () => showToast.success("This is a toast notification!"), children: "Show Toast" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Toast, {})
-  ] });
-}
-function ShowcaseSpinnerDemo() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading data..." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "primary", disabled: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: "mr-2 h-4 w-4" }),
-      " Processing"
-    ] })
-  ] });
-}
-var showcasePreviewMap = {
-  button: ShowcaseButtonDemo,
-  input: ShowcaseInputDemo,
-  textarea: ShowcaseTextareaDemo,
-  checkbox: ShowcaseCheckboxDemo,
-  switch: ShowcaseSwitchDemo,
-  card: ShowcaseCardDemo,
-  badge: ShowcaseBadgeDemo,
-  avatar: ShowcaseAvatarDemo,
-  alert: ShowcaseAlertDemo,
-  statscard: ShowcaseStatsCardDemo,
-  tabs: ShowcaseTabsDemo,
-  modal: ShowcaseModalDemo,
-  toast: ShowcaseToastDemo,
-  spinner: ShowcaseSpinnerDemo,
-  skeleton: function ShowcaseSkeletonDemo() {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-1/2" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-4 w-3/4" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-8 rounded-full" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-8 w-32" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-24 w-full" })
-    ] });
-  },
-  navbar: function ShowcaseNavbarDemo() {
-    return /* @__PURE__ */ jsxRuntime.jsx(Navbar, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between px-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-lg", children: "Beyond UI" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex gap-4 ml-auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "text-blue-500", children: "Home" }),
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "text-blue-500", children: "Features" }),
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: "text-blue-500", children: "Pricing" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-6", children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "rounded bg-primary-600 text-white px-3 py-1 text-sm", children: "Profile" }) })
-    ] }) });
-  },
-  sidebar: function ShowcaseSidebarDemo() {
-    const menuItems = [
-      { id: "dashboard", label: "Dashboard", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-5 w-5" }) },
-      { id: "settings", label: "Settings", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-5 w-5" }) },
-      { id: "profile", label: "Profile", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-5 w-5" }) }
-    ];
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[260px] h-[480px] bg-white border rounded overflow-auto flex items-stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Sidebar,
-      {
-        menuItems,
-        className: "static relative w-full h-full border-none shadow-none"
-      }
-    ) });
-  },
-  "dashboard-grid": function ShowcaseDashboardGridDemo() {
-    return /* @__PURE__ */ jsxRuntime.jsxs(DashboardGrid, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 1" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 2" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-white rounded shadow", children: "Widget 4" })
-    ] });
-  },
-  "dashboard-header": function ShowcaseDashboardHeaderDemo() {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center py-4 border-b", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: "Dashboard" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 text-sm", children: "Insights & analytics" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", children: "Settings" })
-    ] });
-  },
-  "dashboard-layout": function ShowcaseDashboardLayoutDemo() {
-    const sidebarMenuItems = [
-      { id: "dashboard", label: "Dashboard", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-4 w-4" }) },
-      { id: "users", label: "Users", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4" }) },
-      { id: "settings", label: "Settings", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4" }) }
-    ];
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[600px] h-[480px] bg-white border rounded overflow-auto flex items-stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
-      DashboardLayout,
-      {
-        sidebarMenuItems,
-        className: "relative w-full min-h-0 h-full",
-        sidebarClassName: "static relative w-full h-full border-none shadow-none",
-        disableSidebarMargin: true,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 h-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold mb-2", children: "Welcome to DashboardLayout" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-gray-600", children: "Main content appears here. The sidebar and header are real reusable components." }),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", children: "Dashboard Action" })
-        ] })
-      }
-    ) });
-  },
-  datatable: DataTableShowcase
-};
-function ShowcaseAlertDemo() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "info", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Information" }),
-      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "This is an informational alert message." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "success", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Success" }),
-      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Operation completed successfully!" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Warning" }),
-      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Please review your input before proceeding." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "danger", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Error" }),
-      /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Something went wrong. Please try again." })
-    ] })
-  ] });
-}
-function ShowcaseStatsCardDemo() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      StatsCard,
-      {
-        title: "Total Users",
-        value: "2,543",
-        trend: {
-          direction: "up",
-          value: "+12%",
-          label: "from last month"
-        },
-        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-6 w-6 text-primary-600" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      StatsCard,
-      {
-        variant: "gradient",
-        color: "success",
-        title: "Revenue",
-        value: "$45,231",
-        trend: {
-          direction: "up",
-          value: "+8.2%",
-          label: "from last month"
-        },
-        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-6 w-6" })
-      }
-    )
-  ] });
-}
-function ShowcaseTabsDemo() {
-  const [activeTab, setActiveTab] = React11__namespace.useState("tab-1");
-  return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "tab-1", children: "Tab One" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "tab-2", children: "Tab Two" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TabsTrigger, { value: "tab-3", children: "Tab Three" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "tab-1", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block p-4", children: "Content for Tab One" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "tab-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block p-4", children: "Content for Tab Two" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "tab-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block p-4", children: "Content for Tab Three" }) })
-  ] });
-}
-Object.assign(showcasePreviewMap, {
-  alert: ShowcaseAlertDemo,
-  statscard: ShowcaseStatsCardDemo,
-  tabs: ShowcaseTabsDemo
-});
-var componentCategories = {
-  "Forms": {
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointer, { className: "h-4 w-4" }),
-    components: [
-      { name: "Button", id: "button" },
-      { name: "Input", id: "input" },
-      { name: "Textarea", id: "textarea" },
-      { name: "Checkbox", id: "checkbox" },
-      { name: "Switch", id: "switch" }
-    ]
-  },
-  "Data Display": {
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-4 w-4" }),
-    components: [
-      { name: "Card", id: "card" },
-      { name: "Badge", id: "badge" },
-      { name: "Avatar", id: "avatar" },
-      { name: "StatsCard", id: "statscard" },
-      { name: "Tabs", id: "tabs" },
-      { name: "DataTable", id: "datatable" }
-    ]
-  },
-  "Feedback": {
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4" }),
-    components: [
-      { name: "Alert", id: "alert" },
-      { name: "Toast", id: "toast" },
-      { name: "Modal", id: "modal" },
-      { name: "Spinner", id: "spinner" },
-      { name: "Skeleton", id: "skeleton" }
-    ]
-  },
-  "Layout": {
-    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layout, { className: "h-4 w-4" }),
-    components: [
-      { name: "DashboardLayout", id: "dashboard-layout" },
-      { name: "DashboardGrid", id: "dashboard-grid" },
-      { name: "Sidebar", id: "sidebar" },
-      { name: "Navbar", id: "navbar" },
-      { name: "DataTable", id: "datatable" }
-    ]
-  }
-};
-var componentDocs = {
-  button: {
-    name: "Button",
-    description: "A versatile button component with multiple variants and sizes.",
-    example: `<Button variant="primary" size="md">
-  Click me
-</Button>`,
-    props: [
-      { name: "variant", type: "string", default: "primary", description: "Button style variant" },
-      { name: "size", type: "string", default: "md", description: "Button size" },
-      { name: "disabled", type: "boolean", default: "false", description: "Disable the button" }
-    ],
-    component: null
-  },
-  input: {
-    name: "Input",
-    description: "A flexible input component with validation states and different sizes.",
-    example: `<Input
-  placeholder="Enter your email"
-  variant="default"
-  inputSize="md"
-/>`,
-    props: [
-      { name: "variant", type: "string", default: "default", description: "Input validation state" },
-      { name: "inputSize", type: "string", default: "md", description: "Input size" },
-      { name: "placeholder", type: "string", default: "", description: "Placeholder text" }
-    ],
-    component: null
-  },
-  checkbox: {
-    name: "Checkbox",
-    description: "A standard checkbox component for forms. Supports checked, unchecked, disabled, and size variants.",
-    example: `<Checkbox checked={true} onChange={() => {}} />`,
-    props: [
-      { name: "checked", type: "boolean", default: "false", description: "Whether the checkbox is checked" },
-      { name: "onChange", type: "(event) => void", description: "Callback when checkbox changes" },
-      { name: "disabled", type: "boolean", default: "false", description: "Disable the checkbox" },
-      { name: "size", type: `"sm" | "md" | "lg"`, default: "md", description: "Size of the checkbox" }
-    ],
-    component: showcasePreviewMap["checkbox"]
-  },
-  switch: {
-    name: "Switch",
-    description: "A toggle switch component for representing boolean states. Supports size variants and disabled state.",
-    example: `<Switch checked={true} onCheckedChange={() => {}} />`,
-    props: [
-      { name: "checked", type: "boolean", default: "false", description: "Whether the switch is on" },
-      { name: "onCheckedChange", type: "(checked: boolean) => void", description: "Callback when switch state changes" },
-      { name: "disabled", type: "boolean", default: "false", description: "Disable the switch" },
-      { name: "size", type: `"sm" | "md" | "lg"`, default: "md", description: "Size of the switch" }
-    ],
-    component: showcasePreviewMap["switch"]
-  },
-  textarea: {
-    name: "Textarea",
-    description: "A multi-line input control suitable for entering longer blocks of text. Supports success/error states and various sizes.",
-    example: `<Textarea placeholder="Enter your message..." variant="default" />`,
-    props: [
-      { name: "variant", type: "string", default: "default", description: "Textarea validation state" },
-      { name: "rows", type: "number", default: "3", description: "Number of visible text lines" },
-      { name: "disabled", type: "boolean", default: "false", description: "Disabled state" },
-      { name: "placeholder", type: "string", default: "", description: "Placeholder text" }
-    ],
-    component: showcasePreviewMap["textarea"]
-  },
-  card: {
-    name: "Card",
-    description: "A flexible container component for grouping related content.",
-    example: `<Card>
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-  </CardHeader>
-  <CardContent>
-    Card content goes here.
-  </CardContent>
-  </Card>`,
-    props: [
-      { name: "variant", type: "string", default: "default", description: "Card style variant" },
-      { name: "padding", type: "string", default: "md", description: "Card padding size" }
-    ],
-    component: null
-  },
-  avatar: {
-    name: "Avatar",
-    description: "Displays a user's profile image or initials, with customizable size and fallback.",
-    example: '<Avatar size="sm"><AvatarImage src="https://randomuser.me/api/portraits/men/32.jpg" alt="User"/><AvatarFallback>AB</AvatarFallback></Avatar>',
-    props: [
-      { name: "size", type: '"sm" | "md" | "lg"', default: "md", description: "Avatar size" },
-      { name: "children", type: "ReactNode", required: true, description: "Avatar image and fallback" }
-    ],
-    component: showcasePreviewMap["avatar"]
-  },
-  badge: {
-    name: "Badge",
-    description: "A small, customizable tag for displaying statuses or labels.",
-    example: `<Badge variant="default">Default</Badge>`,
-    props: [
-      { name: "variant", type: `"default" | "secondary" | "success" | "danger" | "warning" | "outline"`, default: "default", description: "Badge color or style variant" },
-      { name: "children", type: "ReactNode", required: true, description: "Badge label content" }
-    ],
-    component: showcasePreviewMap["badge"]
-  },
-  tabs: {
-    name: "Tabs",
-    description: "A flexible tabbed navigation component. Allows users to switch between views.",
-    example: `<Tabs value="tab-1" onValueChange={() => {}}>
-  <TabsList>
-    <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
-    <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
-  </TabsList>
-  <TabsContent value="tab-1">Content 1</TabsContent>
-  <TabsContent value="tab-2">Content 2</TabsContent>
-</Tabs>`,
-    props: [
-      { name: "value", type: "string", required: true, description: "The value of the currently selected tab" },
-      { name: "onValueChange", type: "(value: string) => void", description: "Called when a different tab is selected" },
-      { name: "children", type: "ReactNode", required: true, description: "Tab triggers and contents" }
-    ],
-    component: showcasePreviewMap["tabs"]
-  },
-  toast: {
-    name: "Toast",
-    description: "A notification/toast component to display feedback messages over the UI.",
-    example: `<Button onClick={() => showToast.success("Saved successfully!")}>Show Toast</Button>
-<Toast />`,
-    props: [
-      { name: "children", type: "ReactNode", description: "Toast content (commonly used internally)" }
-    ],
-    component: showcasePreviewMap["toast"]
-  },
-  modal: {
-    name: "Modal",
-    description: "A dialog/modal overlay component for displaying actions, forms, or confirmation content.",
-    example: `<Modal open={open} onOpenChange={setOpen}>
-  <ModalHeader>Modal Title</ModalHeader>
-  <ModalContent>Modal body</ModalContent>
-  <ModalFooter>
-    <Button onClick={() => setOpen(false)}>Close</Button>
-  </ModalFooter>
-</Modal>`,
-    props: [
-      { name: "open", type: "boolean", required: true, description: "Whether the modal is open" },
-      { name: "onOpenChange", type: "(open: boolean) => void", required: true, description: "Called with new open state when modal is toggled" },
-      { name: "children", type: "ReactNode", required: true, description: "Content of the modal dialog" }
-    ],
-    component: showcasePreviewMap["modal"]
-  },
-  spinner: {
-    name: "Spinner",
-    description: "A loading spinner to indicate ongoing processing or loading state.",
-    example: `<Spinner size="md" />`,
-    props: [
-      { name: "size", type: `"sm" | "md" | "lg"`, default: "md", description: "Spinner size" },
-      { name: "color", type: "string", default: "primary", description: "Spinner color (optional)" },
-      { name: "className", type: "string", description: "Custom CSS class for the spinner" }
-    ],
-    component: showcasePreviewMap["spinner"]
-  },
-  skeleton: {
-    name: "Skeleton",
-    description: "A placeholder skeleton component for loading states. Use to display a placeholder UI while content loads.",
-    example: `<Skeleton className="h-6 w-32" />`,
-    props: [
-      { name: "className", type: "string", description: "Custom class for size and style" }
-    ],
-    component: showcasePreviewMap["skeleton"]
-  },
-  alert: {
-    name: "Alert",
-    description: "Display important messages and notifications to users.",
-    example: `<Alert variant="info">
-  <AlertTitle>Information</AlertTitle>
-  <AlertDescription>
-    This is an informational alert.
-  </AlertDescription>
-</Alert>`,
-    props: [
-      { name: "variant", type: "string", default: "default", description: "Alert type variant" }
-    ],
-    component: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "info", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Information" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "This is an informational alert message." })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "success", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Success" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Operation completed successfully!" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "warning", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Warning" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Please review your input before proceeding." })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Alert, { variant: "danger", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AlertTitle, { children: "Error" }),
-        /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: "Something went wrong. Please try again." })
-      ] })
-    ] })
-  },
-  statscard: {
-    name: "StatsCard",
-    description: "Display key metrics and statistics with trend indicators.",
-    example: `<StatsCard
-  title="Total Users"
-  value="2,543"
-  trend={{
-    direction: "up",
-    value: "+12%",
-    label: "from last month"
-  }}
-  icon={<Users className="h-6 w-6" />}
-/>`,
-    props: [
-      { name: "title", type: "string", required: true, description: "Card title" },
-      { name: "value", type: "string | number", required: true, description: "Main value to display" },
-      { name: "trend", type: "object", description: "Trend information" },
-      { name: "icon", type: "ReactNode", description: "Icon to display" }
-    ],
-    component: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StatsCard,
-        {
-          title: "Total Users",
-          value: "2,543",
-          trend: {
-            direction: "up",
-            value: "+12%",
-            label: "from last month"
-          },
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-6 w-6 text-primary-600" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StatsCard,
-        {
-          variant: "gradient",
-          color: "success",
-          title: "Revenue",
-          value: "$45,231",
-          trend: {
-            direction: "up",
-            value: "+8.2%",
-            label: "from last month"
-          },
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BarChart3, { className: "h-6 w-6" })
-        }
-      )
-    ] })
-  },
-  "dashboard-layout": {
-    name: "DashboardLayout",
-    description: "Layout component for admin dashboards and analytics panels. Useful for wrapping dashboard structure with sidebars and content.",
-    example: `<DashboardLayout>
-  <Sidebar />
-  <main>
-    Dashboard content here
-  </main>
-</DashboardLayout>`,
-    props: [
-      { name: "children", type: "ReactNode", required: true, description: "Dashboard page content" }
-    ],
-    component: showcasePreviewMap["dashboard-layout"]
-  },
-  datatable: {
-    name: "DataTable",
-    description: "A comprehensive table component with filtering, sorting, pagination, and row selection capabilities.",
-    example: `<DataTable
-  columns={columns}
-  dataSource={data}
-  rowKey="id"
-  pagination={{
-    current: 1,
-    pageSize: 10,
-    total: data.length,
-  }}
-  rowSelection={{
-    type: 'checkbox',
-    onChange: (keys, rows) => console.log('Selected:', keys, rows),
-  }}
-/>`,
-    props: [
-      { name: "columns", type: "Column[]", required: true, description: "Table column configuration" },
-      { name: "dataSource", type: "T[]", required: true, description: "Data to display in the table" },
-      { name: "rowKey", type: "string | function", default: "id", description: "Unique key for each row" },
-      { name: "pagination", type: "PaginationConfig | false", description: "Pagination configuration" },
-      { name: "rowSelection", type: "RowSelection", description: "Row selection configuration" },
-      { name: "loading", type: "boolean", default: "false", description: "Loading state" },
-      { name: "size", type: `"small" | "middle" | "large"`, default: "middle", description: "Table size" },
-      { name: "bordered", type: "boolean", default: "false", description: "Show borders" }
-    ],
-    component: /* @__PURE__ */ jsxRuntime.jsx(DataTableShowcase, {})
-  },
-  "dashboard-grid": {
-    name: "DashboardGrid",
-    description: "Grid container for dashboard widgets.",
-    example: `<DashboardGrid>
-  <Widget />
-  <Widget />
-</DashboardGrid>`,
-    props: [
-      { name: "children", type: "ReactNode", required: true, description: "Widgets to show in the grid" }
-    ],
-    component: showcasePreviewMap["dashboard-grid"]
-  },
-  "sidebar": {
-    name: "Sidebar",
-    description: "Navigation sidebar for layouts. Supports menu items and responsive display.",
-    example: `<Sidebar menuItems={menuItems} />`,
-    props: [
-      { name: "menuItems", type: "Array", required: true, description: "Sidebar navigation items" }
-    ],
-    component: showcasePreviewMap["sidebar"]
-  },
-  "navbar": {
-    name: "Navbar",
-    description: "Navigation bar for app layout. Add links, branding, user actions etc.",
-    example: `<Navbar>
-  <NavbarBrand>My App</NavbarBrand>
-  <NavbarLinks>
-    <a href="#">Home</a>
-    <a href="#">About</a>
-  </NavbarLinks>
-</Navbar>`,
-    props: [
-      { name: "children", type: "ReactNode", required: true, description: "Navbar content (branding, links, actions)" }
-    ],
-    component: showcasePreviewMap["navbar"]
-  }
-};
-var ComponentShowcase = ({ className }) => {
-  const [selectedComponent, setSelectedComponent] = React11.useState("button");
-  const [searchQuery, setSearchQuery] = React11.useState("");
-  const [sidebarCollapsed, setSidebarCollapsed] = React11.useState(false);
-  const [expandedCategories, setExpandedCategories] = React11.useState(["Forms"]);
-  const [viewMode, setViewMode] = React11.useState("desktop");
-  const [darkMode, setDarkMode] = React11.useState(false);
-  const [copiedCode, setCopiedCode] = React11.useState(null);
-  const toggleCategory = (category) => {
-    setExpandedCategories(
-      (prev) => prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category]
-    );
-  };
-  const copyToClipboard = async (code) => {
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopiedCode(code);
-      showToast.success("Code copied to clipboard!");
-      setTimeout(() => setCopiedCode(null), 2e3);
-    } catch (err) {
-      showToast.error("Failed to copy code");
-    }
-  };
-  const filteredCategories = Object.entries(componentCategories).reduce((acc, [categoryName, categoryData]) => {
-    const filteredComponents = categoryData.components.filter(
-      (component) => component.name.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-    if (filteredComponents.length > 0) {
-      acc[categoryName] = {
-        ...categoryData,
-        components: filteredComponents
-      };
-    }
-    return acc;
-  }, {});
-  const currentDoc = componentDocs[selectedComponent];
-  const getViewportClass = () => {
-    switch (viewMode) {
-      case "tablet":
-        return "max-w-2xl";
-      case "mobile":
-        return "max-w-sm";
-      default:
-        return "w-full";
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Toast, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-      "bg-white border-r border-gray-200 transition-all duration-300 flex flex-col",
-      sidebarCollapsed ? "w-16" : "w-80"
-    ), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b border-gray-200", children: [
-        !sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "h-4 w-4 text-white" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              onClick: () => setSidebarCollapsed(true),
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-            }
-          )
-        ] }),
-        sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            onClick: () => setSidebarCollapsed(false),
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "h-4 w-4" })
-          }
-        ) }),
-        !sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
-            {
-              placeholder: "Search components...",
-              value: searchQuery,
-              onChange: (e) => setSearchQuery(e.target.value),
-              className: "pl-10"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-        /* @__PURE__ */ jsxRuntime.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: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                categoryData.icon,
-                !sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { children: categoryName })
-              ] }),
-              !sidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn(
-                "h-4 w-4 transition-transform",
-                expandedCategories.includes(categoryName) && "rotate-180"
-              ) })
-            ]
-          }
-        ),
-        !sidebarCollapsed && expandedCategories.includes(categoryName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => setSelectedComponent(component.id),
-            className: cn(
-              "flex items-center w-full p-2 text-sm rounded-lg transition-colors",
-              selectedComponent === component.id ? "bg-primary-50 text-primary-700 border-r-2 border-primary-600" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
-            ),
-            children: component.name
-          },
-          component.id
-        )) })
-      ] }, categoryName)) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }),
-          currentDoc && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: currentDoc.name })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: viewMode === "desktop" ? "primary" : "ghost",
-                size: "sm",
-                onClick: () => setViewMode("desktop"),
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: viewMode === "tablet" ? "primary" : "ghost",
-                size: "sm",
-                onClick: () => setViewMode("tablet"),
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Tablet, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: viewMode === "mobile" ? "primary" : "ghost",
-                size: "sm",
-                onClick: () => setViewMode("mobile"),
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Smartphone, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "sm",
-              onClick: () => setDarkMode(!darkMode),
-              children: darkMode ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4" })
-            }
-          )
-        ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: "preview", onValueChange: () => {
-        }, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "preview", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4 mr-2" }),
-              "Preview"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "code", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-4 w-4 mr-2" }),
-              "Code"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: "props", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "h-4 w-4 mr-2" }),
-              "Props"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "preview", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(darkMode && "dark"), children: showcasePreviewMap[selectedComponent] ? React11__namespace.createElement(showcasePreviewMap[selectedComponent]) : null }) }) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "code", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-lg", children: "Usage Example" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  size: "sm",
-                  onClick: () => copyToClipboard(currentDoc.example),
-                  children: [
-                    copiedCode === currentDoc.example ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-2" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-4 w-4 mr-2" }),
-                    "Copy"
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: currentDoc.example }) }) })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: "props", className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-lg", children: "Component Props" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-gray-200", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }),
-                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }),
-                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }),
-                /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: currentDoc.props?.map((prop, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-gray-100", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "p-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }),
-                  "required" in prop && prop.required && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 text-gray-600", children: prop.type }),
-                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 text-gray-600", children: "default" in prop && prop.default ? /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default }) : null }),
-                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-3 text-gray-600", children: prop.description })
-              ] }, index)) })
-            ] }) }) })
-          ] }) })
-        ] })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }),
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })
-      ] }) }) })
-    ] })
-  ] });
-};
-function useDarkMode() {
-  const [isDarkMode, setIsDarkMode] = React11.useState(() => {
-    if (typeof window !== "undefined") {
-      const stored = localStorage.getItem("darkMode");
-      if (stored) {
-        return JSON.parse(stored);
-      }
-      return window.matchMedia("(prefers-color-scheme: dark)").matches;
-    }
-    return false;
-  });
-  React11.useEffect(() => {
-    const root = window.document.documentElement;
-    if (isDarkMode) {
-      root.classList.add("dark");
-    } else {
-      root.classList.remove("dark");
-    }
-    localStorage.setItem("darkMode", JSON.stringify(isDarkMode));
-  }, [isDarkMode]);
-  const toggle = () => setIsDarkMode((prev) => !prev);
-  return { isDarkMode, toggle };
-}
-function useDebounce(value, delay) {
-  const [debouncedValue, setDebouncedValue] = React11.useState(value);
-  React11.useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = React11.useState(() => {
-    if (typeof window === "undefined") {
-      return initialValue;
-    }
-    try {
-      const item = window.localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
-    } catch (error) {
-      console.error(`Error reading localStorage key "${key}":`, error);
-      return initialValue;
-    }
-  });
-  const setValue = React11.useCallback((value) => {
-    try {
-      const valueToStore = value instanceof Function ? value(storedValue) : value;
-      setStoredValue(valueToStore);
-      if (typeof window !== "undefined") {
-        window.localStorage.setItem(key, JSON.stringify(valueToStore));
-      }
-    } catch (error) {
-      console.error(`Error setting localStorage key "${key}":`, error);
-    }
-  }, [key, storedValue]);
-  const removeValue = React11.useCallback(() => {
-    try {
-      setStoredValue(initialValue);
-      if (typeof window !== "undefined") {
-        window.localStorage.removeItem(key);
-      }
-    } catch (error) {
-      console.error(`Error removing localStorage key "${key}":`, error);
-    }
-  }, [key, initialValue]);
-  return [storedValue, setValue, removeValue];
-}
-function useToggle(initialValue = false) {
-  const [value, setValue] = React11.useState(initialValue);
-  const toggle = React11.useCallback(() => setValue((prev) => !prev), []);
-  const setToggle = React11.useCallback((newValue) => setValue(newValue), []);
-  return [value, toggle, setToggle];
-}
-var breakpoints = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-  "2xl": 1536
-};
-function useBreakpoint() {
-  const [currentBreakpoint, setCurrentBreakpoint] = React11.useState("sm");
-  React11.useEffect(() => {
-    const checkBreakpoint = () => {
-      const width = window.innerWidth;
-      let breakpoint = "sm";
-      if (width >= breakpoints["2xl"]) breakpoint = "2xl";
-      else if (width >= breakpoints.xl) breakpoint = "xl";
-      else if (width >= breakpoints.lg) breakpoint = "lg";
-      else if (width >= breakpoints.md) breakpoint = "md";
-      setCurrentBreakpoint(breakpoint);
-    };
-    checkBreakpoint();
-    window.addEventListener("resize", checkBreakpoint);
-    return () => window.removeEventListener("resize", checkBreakpoint);
-  }, []);
-  const isAbove = (breakpoint) => {
-    return breakpoints[currentBreakpoint] >= breakpoints[breakpoint];
-  };
-  const isBelow = (breakpoint) => {
-    return breakpoints[currentBreakpoint] < breakpoints[breakpoint];
-  };
-  return { currentBreakpoint, isAbove, isBelow };
-}
-
-// src/theme/default.ts
-var defaultTheme = {
-  colors: {
-    primary: {
-      50: "#eff6ff",
-      100: "#dbeafe",
-      200: "#bfdbfe",
-      300: "#93c5fd",
-      400: "#60a5fa",
-      500: "#3b82f6",
-      600: "#2563eb",
-      700: "#1d4ed8",
-      800: "#1e40af",
-      900: "#1e3a8a",
-      950: "#172554"
-    },
-    secondary: {
-      50: "#f8fafc",
-      100: "#f1f5f9",
-      200: "#e2e8f0",
-      300: "#cbd5e1",
-      400: "#94a3b8",
-      500: "#64748b",
-      600: "#475569",
-      700: "#334155",
-      800: "#1e293b",
-      900: "#0f172a",
-      950: "#020617"
-    },
-    danger: {
-      50: "#fef2f2",
-      100: "#fee2e2",
-      200: "#fecaca",
-      300: "#fca5a5",
-      400: "#f87171",
-      500: "#ef4444",
-      600: "#dc2626",
-      700: "#b91c1c",
-      800: "#991b1b",
-      900: "#7f1d1d",
-      950: "#450a0a"
-    },
-    success: {
-      50: "#f0fdf4",
-      100: "#dcfce7",
-      200: "#bbf7d0",
-      300: "#86efac",
-      400: "#4ade80",
-      500: "#22c55e",
-      600: "#16a34a",
-      700: "#15803d",
-      800: "#166534",
-      900: "#14532d",
-      950: "#052e16"
-    },
-    warning: {
-      50: "#fffbeb",
-      100: "#fef3c7",
-      200: "#fde68a",
-      300: "#fcd34d",
-      400: "#fbbf24",
-      500: "#f59e0b",
-      600: "#d97706",
-      700: "#b45309",
-      800: "#92400e",
-      900: "#78350f",
-      950: "#451a03"
-    }
-  }
-};
-
-exports.Alert = Alert;
-exports.AlertDescription = AlertDescription;
-exports.AlertTitle = AlertTitle;
-exports.Avatar = Avatar;
-exports.AvatarFallback = AvatarFallback;
-exports.AvatarImage = AvatarImage;
-exports.Badge = Badge;
-exports.Button = Button;
-exports.Card = Card;
-exports.CardContent = CardContent;
-exports.CardDescription = CardDescription;
-exports.CardFooter = CardFooter;
-exports.CardHeader = CardHeader;
-exports.CardTitle = CardTitle;
-exports.Checkbox = Checkbox;
-exports.ComponentShowcase = ComponentShowcase;
-exports.DashboardGrid = DashboardGrid;
-exports.DashboardGridItem = DashboardGridItem;
-exports.DashboardHeader = DashboardHeader;
-exports.DashboardLayout = DashboardLayout;
-exports.DataTable = DataTable;
-exports.Input = Input;
-exports.Modal = Modal;
-exports.ModalContent = ModalContent;
-exports.ModalDescription = ModalDescription;
-exports.ModalFooter = ModalFooter;
-exports.ModalHeader = ModalHeader;
-exports.ModalTitle = ModalTitle;
-exports.NavItem = NavItem;
-exports.Navbar = Navbar;
-exports.Sidebar = Sidebar;
-exports.Skeleton = Skeleton;
-exports.Spinner = Spinner;
-exports.StatsCard = StatsCard;
-exports.Switch = Switch;
-exports.Tabs = Tabs;
-exports.TabsContent = TabsContent;
-exports.TabsList = TabsList;
-exports.TabsTrigger = TabsTrigger;
-exports.Textarea = Textarea;
-exports.Toast = Toast;
-exports.alertVariants = alertVariants;
-exports.avatarVariants = avatarVariants;
-exports.badgeVariants = badgeVariants;
-exports.buttonVariants = buttonVariants;
-exports.cardVariants = cardVariants;
-exports.checkboxVariants = checkboxVariants;
-exports.cn = cn;
-exports.defaultTheme = defaultTheme;
-exports.gridItemVariants = gridItemVariants;
-exports.gridVariants = gridVariants;
-exports.inputVariants = inputVariants;
-exports.modalVariants = modalVariants;
-exports.navbarVariants = navbarVariants;
-exports.showToast = showToast;
-exports.sidebarVariants = sidebarVariants;
-exports.skeletonVariants = skeletonVariants;
-exports.spinnerVariants = spinnerVariants;
-exports.statsCardVariants = statsCardVariants;
-exports.switchVariants = switchVariants;
-exports.tabsListVariants = tabsListVariants;
-exports.tabsTriggerVariants = tabsTriggerVariants;
-exports.textareaVariants = textareaVariants;
-exports.toastVariants = toastVariants;
-exports.useBreakpoint = useBreakpoint;
-exports.useDarkMode = useDarkMode;
-exports.useDebounce = useDebounce;
-exports.useLocalStorage = useLocalStorage;
-exports.useToggle = useToggle;