@jameskabz/nextcraft-ui 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -30,11 +30,36 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AppShell: () => AppShell,
+  AuthLayout: () => AuthLayout,
+  Breadcrumbs: () => Breadcrumbs,
+  Container: () => Container,
+  CraftBadge: () => CraftBadge,
   CraftButton: () => CraftButton,
+  CraftCard: () => CraftCard,
+  CraftCheckbox: () => CraftCheckbox,
+  CraftCurrencyInput: () => CraftCurrencyInput,
+  CraftDatePicker: () => CraftDatePicker,
+  CraftDrawer: () => CraftDrawer,
+  CraftEmptyState: () => CraftEmptyState,
   CraftInput: () => CraftInput,
+  CraftModal: () => CraftModal,
+  CraftNumberInput: () => CraftNumberInput,
+  CraftSelect: () => CraftSelect,
+  CraftSkeleton: () => CraftSkeleton,
+  CraftSwitch: () => CraftSwitch,
+  CraftTabs: () => CraftTabs,
+  CraftTextarea: () => CraftTextarea,
+  CraftToastHost: () => CraftToastHost,
+  CraftTooltip: () => CraftTooltip,
   GlassCard: () => GlassCard,
+  Grid: () => Grid,
+  PageHeader: () => PageHeader,
+  Sidebar: () => Sidebar,
   ThemeProvider: () => ThemeProvider,
   ThemeSwitcher: () => ThemeSwitcher,
+  TopNav: () => TopNav,
+  useCraftToast: () => useCraftToast,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
@@ -53,7 +78,7 @@ var sizeClasses = {
 };
 var variantClasses = {
   solid: "bg-gradient-to-br from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-1)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-1)/0.6)] hover:scale-[1.02] active:scale-[0.98]",
-  ghost: "bg-white/5 text-white hover:bg-white/10 backdrop-blur-sm border border-white/10 hover:border-white/20",
+  ghost: "bg-[color:rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] hover:bg-[color:rgb(var(--nc-surface)/0.18)] backdrop-blur-sm border border-[rgb(var(--nc-border)/0.35)] hover:border-[color:rgb(var(--nc-border)/0.5)]",
   outline: "bg-transparent text-[color:rgb(var(--nc-accent-1))] border-2 border-[color:rgb(var(--nc-accent-1)/0.5)] hover:border-[color:rgb(var(--nc-accent-1))] hover:bg-[color:rgb(var(--nc-accent-1)/0.1)]",
   gradient: "bg-gradient-to-r from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-2)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-2)/0.6)] hover:scale-[1.02] active:scale-[0.98]"
 };
@@ -102,7 +127,7 @@ function GlassCard({
     "div",
     {
       className: cn(
-        "relative overflow-hidden rounded-3xl p-6 text-white",
+        "relative overflow-hidden rounded-3xl p-6 text-[rgb(var(--nc-fg))]",
         "shadow-[0_8px_32px_rgba(0,0,0,0.3)]",
         "transition-all duration-300",
         "hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]",
@@ -131,21 +156,21 @@ var inputSizeClasses = {
 var CraftInput = React.forwardRef(
   ({ className, tone, inputSize = "md", glow = true, icon, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-white/50", children: icon }),
+      icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-[rgb(var(--nc-fg-soft))]", children: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
         {
           ref,
           className: cn(
-            "w-full rounded-2xl border-2 bg-white/5 text-white backdrop-blur-xl",
+            "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
             "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
             "focus:outline-none focus:ring-4",
             "transition-all duration-300",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             inputSizeClasses[inputSize],
-            "border-[rgb(var(--nc-accent-1)/0.3)]",
+            "border-[rgb(var(--nc-border)/0.35)]",
             "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
-            "placeholder:text-[rgb(var(--nc-accent-soft)/0.4)]",
+            "placeholder:text-[rgb(var(--nc-fg-soft))]",
             glow ? "focus:shadow-[0_0_30px_-5px_var(--glow-color)]" : "",
             icon ? "pl-12" : "",
             className
@@ -161,9 +186,1118 @@ var CraftInput = React.forwardRef(
 );
 CraftInput.displayName = "CraftInput";
 
-// src/theme/theme-context.tsx
+// src/components/craft-textarea.tsx
 var React2 = __toESM(require("react"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var CraftTextarea = React2.forwardRef(
+  ({ className, tone, rows = 4, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "relative w-full", "data-nc-theme": tone, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "textarea",
+      {
+        ref,
+        rows,
+        className: cn(
+          "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+          "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
+          "focus:outline-none focus:ring-4",
+          "transition-all duration-300",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          "border-[rgb(var(--nc-border)/0.35)]",
+          "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
+          "placeholder:text-[rgb(var(--nc-fg-soft))]",
+          "px-5 py-3 text-base",
+          className
+        ),
+        style: {
+          "--glow-color": "rgb(var(--nc-accent-1) / 0.5)"
+        },
+        ...props
+      }
+    ) });
+  }
+);
+CraftTextarea.displayName = "CraftTextarea";
+
+// src/components/craft-select.tsx
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CraftSelect = React3.forwardRef(
+  ({ className, tone, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "select",
+        {
+          ref,
+          className: cn(
+            "w-full appearance-none rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+            "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
+            "focus:outline-none focus:ring-4",
+            "transition-all duration-300",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            "border-[rgb(var(--nc-border)/0.35)]",
+            "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
+            "px-5 py-3 pr-10 text-base",
+            className
+          ),
+          ...props,
+          children
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "svg",
+        {
+          className: "pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-[rgb(var(--nc-fg-soft))]",
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.7a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z",
+              clipRule: "evenodd"
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+CraftSelect.displayName = "CraftSelect";
+
+// src/components/craft-checkbox.tsx
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CraftCheckbox = React4.forwardRef(
+  ({ className, tone, label, description, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "label",
+      {
+        className: cn(
+          "flex items-start gap-3 text-sm text-[rgb(var(--nc-fg))]",
+          props.disabled ? "opacity-60" : "cursor-pointer",
+          className
+        ),
+        "data-nc-theme": tone,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "relative mt-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "input",
+              {
+                ref,
+                type: "checkbox",
+                className: "peer sr-only",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "span",
+              {
+                className: cn(
+                  "flex h-5 w-5 items-center justify-center rounded-md border-2",
+                  "border-[rgb(var(--nc-border)/0.45)] bg-[rgb(var(--nc-surface)/0.08)]",
+                  "transition-all duration-200",
+                  "peer-checked:border-[rgb(var(--nc-accent-1))] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]",
+                  "peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "svg",
+                  {
+                    className: "h-3 w-3 text-[rgb(var(--nc-fg))] opacity-0 transition-opacity peer-checked:opacity-100",
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M16.704 5.29a1 1 0 010 1.415l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.415-1.415l2.492 2.493 6.493-6.493a1 1 0 011.415 0z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "space-y-1", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block font-medium text-[rgb(var(--nc-fg))]", children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block text-xs text-[rgb(var(--nc-fg-muted))]", children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+CraftCheckbox.displayName = "CraftCheckbox";
+
+// src/components/craft-switch.tsx
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CraftSwitch = React5.forwardRef(
+  ({ className, tone, label, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "label",
+      {
+        className: cn(
+          "inline-flex items-center gap-3 text-sm text-[rgb(var(--nc-fg))]",
+          props.disabled ? "opacity-60" : "cursor-pointer",
+          className
+        ),
+        "data-nc-theme": tone,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref, type: "checkbox", className: "peer sr-only", ...props }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "span",
+            {
+              className: cn(
+                "relative h-6 w-11 rounded-full border-2 border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]",
+                "transition-all duration-200",
+                "peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]",
+                "peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-[rgb(var(--nc-surface-muted)/0.9)]",
+                    "transition-all duration-200",
+                    "peer-checked:translate-x-5 peer-checked:bg-[rgb(var(--nc-surface-muted))]"
+                  )
+                }
+              )
+            }
+          ),
+          label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+CraftSwitch.displayName = "CraftSwitch";
+
+// src/components/craft-badge.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var variantClasses2 = {
+  solid: "bg-[color:rgb(var(--nc-accent-1))] text-white shadow-[0_10px_20px_rgb(var(--nc-accent-1)/0.35)]",
+  soft: "bg-[color:rgb(var(--nc-accent-1)/0.2)] text-[rgb(var(--nc-fg))]",
+  outline: "border border-[color:rgb(var(--nc-accent-1)/0.6)] text-[rgb(var(--nc-fg))]"
+};
+function CraftBadge({
+  className,
+  variant = "soft",
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
+        variantClasses2[variant],
+        className
+      ),
+      "data-nc-theme": tone,
+      ...props
+    }
+  );
+}
+
+// src/components/craft-card.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function CraftCard({ className, tone, elevated = true, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: cn(
+        "rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] p-6 text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+        elevated && "shadow-[0_18px_40px_rgba(0,0,0,0.35)]",
+        "transition-all duration-300",
+        className
+      ),
+      "data-nc-theme": tone,
+      ...props
+    }
+  );
+}
+
+// src/components/craft-modal.tsx
+var React6 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var FOCUSABLE_SELECTORS = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+function useFocusTrap(active) {
+  const ref = React6.useRef(null);
+  React6.useEffect(() => {
+    if (!active || !ref.current) return;
+    const root = ref.current;
+    const getFocusable = () => Array.from(root.querySelectorAll(FOCUSABLE_SELECTORS));
+    const focusables = getFocusable();
+    if (focusables.length) {
+      focusables[0].focus();
+    } else {
+      root.focus();
+    }
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const items = getFocusable();
+      if (!items.length) return;
+      const first = items[0];
+      const last = items[items.length - 1];
+      const activeEl = document.activeElement;
+      if (event.shiftKey && activeEl === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && activeEl === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    root.addEventListener("keydown", handleKeyDown);
+    return () => root.removeEventListener("keydown", handleKeyDown);
+  }, [active]);
+  return ref;
+}
+function CraftModal({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  tone,
+  title,
+  description,
+  children,
+  trigger,
+  footer,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(defaultOpen);
+  const isControlled = typeof open === "boolean";
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const setOpen = React6.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  React6.useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, setOpen]);
+  const ref = useFocusTrap(isOpen);
+  const content = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center px-4 py-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 backdrop-blur-sm",
+        onClick: () => setOpen(false)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        ref,
+        tabIndex: -1,
+        className: cn(
+          "relative z-10 w-full max-w-lg rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-6 text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.45)] backdrop-blur-2xl",
+          className
+        ),
+        "data-nc-theme": tone,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-2xl font-semibold", children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[rgb(var(--nc-fg-muted))]", children: description })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "button",
+              {
+                className: "rounded-full border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-2 text-[rgb(var(--nc-fg-soft))] transition hover:text-[rgb(var(--nc-fg))]",
+                onClick: () => setOpen(false),
+                "aria-label": "Close",
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-5 space-y-4", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-6", children: footer })
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    trigger && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "span",
+      {
+        onClick: () => setOpen(true),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") setOpen(true);
+        },
+        role: "button",
+        tabIndex: 0,
+        className: "inline-flex",
+        children: trigger
+      }
+    ),
+    typeof document !== "undefined" && content ? (0, import_react_dom.createPortal)(content, document.body) : content
+  ] });
+}
+
+// src/components/craft-drawer.tsx
+var React7 = __toESM(require("react"), 1);
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function CraftDrawer({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  tone,
+  side = "left",
+  title,
+  children,
+  trigger,
+  footer,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React7.useState(defaultOpen);
+  const isControlled = typeof open === "boolean";
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const setOpen = React7.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  React7.useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [isOpen, setOpen]);
+  const content = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "fixed inset-0 z-50 overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 backdrop-blur-sm",
+        onClick: () => setOpen(false)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        className: cn(
+          "absolute top-0 h-full w-full max-w-md border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.45)] backdrop-blur-2xl",
+          side === "right" ? "right-0" : "left-0",
+          className
+        ),
+        "data-nc-theme": tone,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between border-b border-[rgb(var(--nc-border)/0.3)] p-6", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-xl font-semibold", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "button",
+              {
+                className: "rounded-full border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-2 text-[rgb(var(--nc-fg-soft))] transition hover:text-[rgb(var(--nc-fg))]",
+                onClick: () => setOpen(false),
+                "aria-label": "Close",
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "p-6 space-y-4 overflow-y-auto h-[calc(100%-5.5rem)]", children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "border-t border-[rgb(var(--nc-border)/0.3)] p-6", children: footer })
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    trigger && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "span",
+      {
+        onClick: () => setOpen(true),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") setOpen(true);
+        },
+        role: "button",
+        tabIndex: 0,
+        className: "inline-flex",
+        children: trigger
+      }
+    ),
+    typeof document !== "undefined" && content ? (0, import_react_dom2.createPortal)(content, document.body) : content
+  ] });
+}
+
+// src/components/craft-tabs.tsx
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CraftTabs({
+  value,
+  defaultValue,
+  onValueChange,
+  tone,
+  tabs,
+  panels,
+  className
+}) {
+  var _a, _b;
+  const fallback = (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "";
+  const [uncontrolledValue, setUncontrolledValue] = React8.useState(
+    defaultValue != null ? defaultValue : fallback
+  );
+  const isControlled = value !== void 0;
+  const activeValue = isControlled ? value : uncontrolledValue;
+  const setValue = React8.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledValue(next);
+      onValueChange == null ? void 0 : onValueChange(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const onKeyDown = (event) => {
+    if (!tabs.length) return;
+    const currentIndex = tabs.findIndex((tab) => tab.value === activeValue);
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      const next = tabs[(currentIndex + 1) % tabs.length];
+      setValue(next.value);
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      const next = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+      setValue(next.value);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("space-y-4", className), "data-nc-theme": tone, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        className: "inline-flex flex-wrap items-center gap-2 rounded-full border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] p-2",
+        role: "tablist",
+        onKeyDown,
+        children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": activeValue === tab.value,
+            onClick: () => setValue(tab.value),
+            className: cn(
+              "rounded-full px-4 py-2 text-sm font-semibold transition-all",
+              activeValue === tab.value ? "bg-[rgb(var(--nc-accent-1)/0.65)] text-white shadow-[0_7px_5px_rgb(var(--nc-accent-1)/0.35)]" : "text-[rgb(var(--nc-fg-muted))] hover:text-[rgb(var(--nc-fg))]"
+            ),
+            children: tab.label
+          },
+          tab.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-2xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] p-4 text-[rgb(var(--nc-fg))]", children: panels[activeValue] })
+  ] });
+}
+
+// src/components/craft-tooltip.tsx
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function CraftTooltip({ content, tone, children, side = "top" }) {
+  const [open, setOpen] = React9.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "span",
+    {
+      className: "relative inline-flex",
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "span",
+          {
+            className: cn(
+              "pointer-events-none absolute z-20 whitespace-nowrap rounded-lg border border-white/10 bg-black/80 px-3 py-2 text-xs text-white shadow-lg transition-all",
+              "backdrop-blur-xl",
+              open ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1",
+              side === "top" && "bottom-full left-1/2 -translate-x-1/2 -translate-y-2",
+              side === "bottom" && "top-full left-1/2 -translate-x-1/2 translate-y-2",
+              side === "left" && "right-full top-1/2 -translate-y-1/2 -translate-x-2",
+              side === "right" && "left-full top-1/2 -translate-y-1/2 translate-x-2"
+            ),
+            "data-nc-theme": tone,
+            role: "tooltip",
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/craft-toast.tsx
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var variantClasses3 = {
+  info: "border-[color:rgb(var(--nc-accent-1)/0.4)]",
+  success: "border-emerald-400/40",
+  warning: "border-amber-400/40",
+  error: "border-rose-400/40"
+};
+function useCraftToast() {
+  const [toasts, setToasts] = React10.useState([]);
+  const push = React10.useCallback((toast) => {
+    const id = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+    setToasts((prev) => [...prev, { ...toast, id }]);
+    return id;
+  }, []);
+  const remove = React10.useCallback((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  return { toasts, push, remove };
+}
+function CraftToastHost({ toasts, onDismiss, tone }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      className: "fixed right-6 top-6 z-50 flex w-full max-w-sm flex-col gap-3",
+      "data-nc-theme": tone,
+      children: toasts.map((toast) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "div",
+          {
+            className: cn(
+              "rounded-2xl border bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_15px_35px_rgba(0,0,0,0.35)] backdrop-blur-xl",
+              variantClasses3[(_a = toast.variant) != null ? _a : "info"]
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm font-semibold", children: toast.title }),
+                toast.description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs text-[rgb(var(--nc-fg-muted))]", children: toast.description })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "button",
+                {
+                  className: "text-[rgb(var(--nc-fg-soft))] hover:text-[rgb(var(--nc-fg))]",
+                  onClick: () => onDismiss(toast.id),
+                  children: "\u2715"
+                }
+              )
+            ] })
+          },
+          toast.id
+        );
+      })
+    }
+  );
+}
+
+// src/components/craft-skeleton.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function CraftSkeleton({ className, tone, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-2xl bg-[rgb(var(--nc-surface)/0.12)]",
+        "after:absolute after:inset-0 after:-translate-x-full after:bg-linear-to-r after:from-transparent after:via-white/20 after:to-transparent",
+        "after:animate-[shimmer_1.6s_infinite]",
+        className
+      ),
+      "data-nc-theme": tone,
+      ...props
+    }
+  );
+}
+
+// src/components/craft-empty-state.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function CraftEmptyState({
+  className,
+  tone,
+  title,
+  description,
+  icon,
+  action,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      className: cn(
+        "rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] p-8 text-center text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+        "shadow-[0_18px_40px_rgba(0,0,0,0.25)]",
+        className
+      ),
+      "data-nc-theme": tone,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[rgb(var(--nc-accent-1)/0.2)] text-[rgb(var(--nc-accent-1))]", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-xl font-semibold", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-2 text-sm text-[rgb(var(--nc-fg-muted))]", children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-6 flex justify-center", children: action })
+      ]
+    }
+  );
+}
+
+// src/components/craft-date-picker.tsx
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var WEEK_DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
+  const day = `${date.getDate()}`.padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function parseDate(value) {
+  if (!value) return null;
+  const [year, month, day] = value.split("-").map(Number);
+  if (!year || !month || !day) return null;
+  return new Date(year, month - 1, day);
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isOutsideRange(date, min, max) {
+  const minDate = parseDate(min);
+  const maxDate = parseDate(max);
+  if (minDate && date < minDate) return true;
+  if (maxDate && date > maxDate) return true;
+  return false;
+}
+function CraftDatePicker({
+  value,
+  defaultValue,
+  onChange,
+  tone,
+  min,
+  max,
+  placeholder = "Select date",
+  className
+}) {
+  const [open, setOpen] = React11.useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = React11.useState(defaultValue != null ? defaultValue : "");
+  const isControlled = value !== void 0;
+  const selectedValue = isControlled ? value != null ? value : "" : uncontrolledValue;
+  const selectedDate = parseDate(selectedValue);
+  const initialMonth = selectedDate != null ? selectedDate : /* @__PURE__ */ new Date();
+  const [viewDate, setViewDate] = React11.useState(initialMonth);
+  React11.useEffect(() => {
+    if (selectedDate) setViewDate(selectedDate);
+  }, [selectedDate]);
+  const wrapperRef = React11.useRef(null);
+  React11.useEffect(() => {
+    if (!open) return;
+    const handleClick = (event) => {
+      var _a;
+      if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(event.target))) {
+        setOpen(false);
+      }
+    };
+    const handleKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open]);
+  const setValue = React11.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledValue(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [isControlled, onChange]
+  );
+  const monthStart = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
+  const monthEnd = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);
+  const startDay = monthStart.getDay();
+  const daysInMonth = monthEnd.getDate();
+  const cells = Array.from({ length: startDay + daysInMonth }, (_, i) => {
+    const dayNumber = i - startDay + 1;
+    if (dayNumber < 1) return null;
+    return new Date(viewDate.getFullYear(), viewDate.getMonth(), dayNumber);
+  });
+  const handleDaySelect = (date) => {
+    if (isOutsideRange(date, min, max)) return;
+    const next = formatDate(date);
+    setValue(next);
+    setOpen(false);
+  };
+  const handleKeyDown = (event) => {
+    if (!open) return;
+    if (!selectedDate) return;
+    const next = new Date(selectedDate);
+    if (event.key === "ArrowRight") next.setDate(next.getDate() + 1);
+    if (event.key === "ArrowLeft") next.setDate(next.getDate() - 1);
+    if (event.key === "ArrowDown") next.setDate(next.getDate() + 7);
+    if (event.key === "ArrowUp") next.setDate(next.getDate() - 7);
+    if (event.key === "Enter") {
+      event.preventDefault();
+      handleDaySelect(selectedDate);
+      return;
+    }
+    if (next.getTime() !== selectedDate.getTime()) {
+      event.preventDefault();
+      if (!isOutsideRange(next, min, max)) {
+        setValue(formatDate(next));
+        setViewDate(next);
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, ref: wrapperRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((prev) => !prev),
+        className: cn(
+          "flex w-full items-center justify-between rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] px-5 py-3 text-left text-base text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+          "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
+          "transition-all duration-300",
+          "border-[rgb(var(--nc-border)/0.35)]",
+          "focus:outline-none focus:ring-4 focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: selectedValue ? "text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-soft))]", children: selectedValue || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "h-4 w-4 text-[rgb(var(--nc-fg-soft))]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 2a1 1 0 011 1v1h6V3a1 1 0 112 0v1h1a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zm10 6H4v8h12V8z" }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        className: cn(
+          "absolute left-0 top-full z-20 mt-3 w-full rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/1.52)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.55)] backdrop-blur-10xl"
+        ),
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]",
+                onClick: () => setViewDate(
+                  new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)
+                ),
+                children: "Prev"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleString(void 0, { month: "long", year: "numeric" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]",
+                onClick: () => setViewDate(
+                  new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)
+                ),
+                children: "Next"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mt-4 grid grid-cols-7 gap-2 text-xs text-[rgb(var(--nc-fg-muted))]", children: WEEK_DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-center", children: day }, day)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mt-2 grid grid-cols-7 gap-2", children: cells.map((date, index) => {
+            if (!date) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", {}, `empty-${index}`);
+            const disabled = isOutsideRange(date, min, max);
+            const selected = selectedDate && isSameDay(date, selectedDate);
+            return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleDaySelect(date),
+                disabled,
+                className: cn(
+                  "rounded-lg py-2 text-sm transition-all",
+                  selected ? "bg-[rgb(var(--nc-accent-1)/0.3)] text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.12)]",
+                  disabled && "opacity-40 hover:bg-transparent"
+                ),
+                children: date.getDate()
+              },
+              date.toISOString()
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/craft-number-input.tsx
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var CraftNumberInput = React12.forwardRef(({ className, tone, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative w-full", "data-nc-theme": tone, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "input",
+    {
+      ref,
+      type: "number",
+      className: cn(
+        "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+        "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
+        "focus:outline-none focus:ring-4",
+        "transition-all duration-300",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        "border-[rgb(var(--nc-border)/0.35)]",
+        "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
+        "px-5 py-3 text-base",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+CraftNumberInput.displayName = "CraftNumberInput";
+
+// src/components/craft-currency-input.tsx
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var CraftCurrencyInput = React13.forwardRef(({ className, tone, currencySymbol = "$", ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-[rgb(var(--nc-fg-soft))]", children: currencySymbol }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "input",
+      {
+        ref,
+        type: "text",
+        inputMode: "decimal",
+        className: cn(
+          "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+          "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
+          "focus:outline-none focus:ring-4",
+          "transition-all duration-300",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          "border-[rgb(var(--nc-border)/0.35)]",
+          "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
+          "placeholder:text-[rgb(var(--nc-fg-soft))]",
+          "px-5 py-3 pl-9 text-base",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+});
+CraftCurrencyInput.displayName = "CraftCurrencyInput";
+
+// src/components/layout/app-shell.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function AppShell({ className, sidebar, topNav, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: cn(
+        "grid min-h-screen grid-cols-1 gap-6 bg-background p-6 lg:grid-cols-[260px_1fr]",
+        className
+      ),
+      ...props,
+      children: [
+        sidebar && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "h-full", children: sidebar }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col gap-6", children: [
+          topNav,
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("main", { className: "flex-1", children })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/layout/sidebar.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Sidebar({ className, title, items, footer, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "aside",
+    {
+      className: cn(
+        "flex h-full w-full flex-col gap-6 rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] p-6 text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+        className
+      ),
+      ...props,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-lg font-semibold", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("nav", { className: "flex flex-col gap-2", children: items.map((item, index) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            "a",
+            {
+              href: (_a = item.href) != null ? _a : "#",
+              className: cn(
+                "flex items-center gap-3 rounded-2xl px-3 py-2 text-sm transition",
+                item.active ? "bg-[rgb(var(--nc-accent-1)/0.25)] text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.12)] hover:text-[rgb(var(--nc-fg))]"
+              ),
+              children: [
+                item.icon,
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: item.label })
+              ]
+            },
+            `${item.label}-${index}`
+          );
+        }) }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mt-auto pt-4", children: footer })
+      ]
+    }
+  );
+}
+
+// src/components/layout/top-nav.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function TopNav({ className, title, actions, breadcrumb, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "header",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-4 rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] px-6 py-4 text-[rgb(var(--nc-fg))] backdrop-blur-xl",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1", children: [
+          breadcrumb,
+          title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xl font-semibold", children: title })
+        ] }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-wrap gap-3", children: actions })
+      ]
+    }
+  );
+}
+
+// src/components/layout/page-header.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function PageHeader({
+  className,
+  title,
+  description,
+  actions,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: cn("flex flex-wrap items-start justify-between gap-6", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h1", { className: "text-3xl font-bold text-[rgb(var(--nc-fg))]", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[rgb(var(--nc-fg-muted))]", children: description })
+        ] }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-wrap gap-3", children: actions })
+      ]
+    }
+  );
+}
+
+// src/components/layout/breadcrumbs.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Breadcrumbs({ className, items, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("nav", { className: cn("flex items-center text-sm text-[rgb(var(--nc-fg-muted))]", className), ...props, children: items.map((item, index) => {
+    const content = item.href ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: item.href, className: "transition hover:text-[rgb(var(--nc-fg))]", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[rgb(var(--nc-fg))]", children: item.label });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex items-center", children: [
+      content,
+      index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "mx-2 text-[rgb(var(--nc-fg-soft))]", children: "/" })
+    ] }, `${item.label}-${index}`);
+  }) });
+}
+
+// src/components/layout/auth-layout.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function AuthLayout({
+  className,
+  title,
+  description,
+  footer,
+  graphic,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      className: cn(
+        "grid min-h-screen grid-cols-1 bg-background",
+        "lg:grid-cols-[1.1fr_0.9fr]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-col justify-center px-6 py-16 sm:px-12", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mx-auto w-full max-w-md space-y-6", children: [
+          (title || description) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "space-y-2", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: "text-3xl font-bold text-[rgb(var(--nc-fg))]", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-[rgb(var(--nc-fg-muted))]", children: description })
+          ] }),
+          children,
+          footer && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: footer })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden items-center justify-center border-l border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] p-12 text-[rgb(var(--nc-fg))] lg:flex", children: graphic != null ? graphic : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "max-w-sm space-y-4 text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "text-2xl font-semibold", children: "Crafted experiences" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-[rgb(var(--nc-fg-muted))]", children: "Build authentication flows that feel premium and cohesive." })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/components/layout/container.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var sizeClasses2 = {
+  sm: "max-w-3xl",
+  md: "max-w-5xl",
+  lg: "max-w-6xl",
+  xl: "max-w-7xl"
+};
+function Container({ className, size = "lg", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "div",
+    {
+      className: cn("mx-auto w-full px-4 sm:px-6 lg:px-8", sizeClasses2[size], className),
+      ...props
+    }
+  );
+}
+
+// src/components/layout/grid.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var colClasses = {
+  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",
+  5: "grid-cols-1 md:grid-cols-2 lg:grid-cols-5",
+  6: "grid-cols-1 md:grid-cols-3 lg:grid-cols-6"
+};
+var gapClasses = {
+  sm: "gap-4",
+  md: "gap-6",
+  lg: "gap-8",
+  xl: "gap-10"
+};
+function Grid({ className, columns = 3, gap = "md", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("grid", colClasses[columns], gapClasses[gap], className), ...props });
+}
+
+// src/theme/theme-context.tsx
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var THEME_NAMES = [
   "aurora",
   "ember",
@@ -171,7 +1305,7 @@ var THEME_NAMES = [
   "midnight",
   "cosmic"
 ];
-var ThemeContext = React2.createContext(null);
+var ThemeContext = React14.createContext(null);
 var DEFAULT_THEME_KEY = "nextcraft-theme";
 var DEFAULT_MODE_KEY = "nextcraft-mode";
 function ThemeProvider({
@@ -181,9 +1315,9 @@ function ThemeProvider({
   storageKeyTheme = DEFAULT_THEME_KEY,
   storageKeyMode = DEFAULT_MODE_KEY
 }) {
-  const [theme, setTheme] = React2.useState(defaultTheme);
-  const [mode, setMode] = React2.useState(defaultMode);
-  React2.useEffect(() => {
+  const [theme, setTheme] = React14.useState(defaultTheme);
+  const [mode, setMode] = React14.useState(defaultMode);
+  React14.useEffect(() => {
     if (typeof window === "undefined") return;
     try {
       const storedTheme = window.localStorage.getItem(storageKeyTheme);
@@ -193,7 +1327,7 @@ function ThemeProvider({
     } catch {
     }
   }, [storageKeyTheme, storageKeyMode]);
-  React2.useEffect(() => {
+  React14.useEffect(() => {
     if (typeof window === "undefined") return;
     try {
       window.localStorage.setItem(storageKeyTheme, theme);
@@ -201,7 +1335,7 @@ function ThemeProvider({
     } catch {
     }
   }, [theme, mode, storageKeyTheme, storageKeyMode]);
-  React2.useEffect(() => {
+  React14.useEffect(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     root.dataset.ncTheme = theme;
@@ -221,14 +1355,14 @@ function ThemeProvider({
     mediaQuery.addListener(applySystem);
     return () => mediaQuery.removeListener(applySystem);
   }, [theme, mode]);
-  const value = React2.useMemo(
+  const value = React14.useMemo(
     () => ({ theme, mode, setTheme, setMode }),
     [theme, mode]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  const context = React2.useContext(ThemeContext);
+  const context = React14.useContext(ThemeContext);
   if (!context) {
     throw new Error("useTheme must be used within ThemeProvider");
   }
@@ -236,40 +1370,40 @@ function useTheme() {
 }
 
 // src/components/theme-switcher.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var MODE_OPTIONS = ["system", "light", "dark"];
 function ThemeSwitcher({ className, showLabels = true, ...props }) {
   const { theme, mode, setTheme, setMode } = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       className: cn(
-        "flex flex-wrap items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]",
+        "flex flex-wrap items-center gap-3 rounded-2xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] px-4 py-3 text-sm text-[rgb(var(--nc-fg))] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2", children: [
-          showLabels && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-white/70", children: "Theme" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: "flex items-center gap-2", children: [
+          showLabels && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[rgb(var(--nc-fg-muted))]", children: "Theme" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "select",
             {
-              className: "rounded-lg border border-white/10 bg-white/10 px-3 py-1 text-white outline-none focus:ring-2 focus:ring-[rgb(var(--nc-accent-1)/0.5)]",
+              className: "rounded-lg border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-[rgb(var(--nc-fg))] outline-none focus:ring-2 focus:ring-[rgb(var(--nc-accent-1)/0.5)]",
               value: theme,
               onChange: (event) => setTheme(event.target.value),
-              children: THEME_NAMES.map((name) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: name, className: "text-slate-900", children: name }, name))
+              children: THEME_NAMES.map((name) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value: name, className: "text-slate-900", children: name }, name))
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex items-center gap-2", children: [
-          showLabels && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-white/70", children: "Mode" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: "flex items-center gap-2", children: [
+          showLabels && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[rgb(var(--nc-fg-muted))]", children: "Mode" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "select",
             {
-              className: "rounded-lg border border-white/10 bg-white/10 px-3 py-1 text-white outline-none focus:ring-2 focus:ring-[rgb(var(--nc-accent-1)/0.5)]",
+              className: "rounded-lg border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-[rgb(var(--nc-fg))] outline-none focus:ring-2 focus:ring-[rgb(var(--nc-accent-1)/0.5)]",
               value: mode,
               onChange: (event) => setMode(event.target.value),
-              children: MODE_OPTIONS.map((value) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value, className: "text-slate-900", children: value }, value))
+              children: MODE_OPTIONS.map((value) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("option", { value, className: "text-slate-900", children: value }, value))
             }
           )
         ] })
@@ -279,11 +1413,36 @@ function ThemeSwitcher({ className, showLabels = true, ...props }) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AppShell,
+  AuthLayout,
+  Breadcrumbs,
+  Container,
+  CraftBadge,
   CraftButton,
+  CraftCard,
+  CraftCheckbox,
+  CraftCurrencyInput,
+  CraftDatePicker,
+  CraftDrawer,
+  CraftEmptyState,
   CraftInput,
+  CraftModal,
+  CraftNumberInput,
+  CraftSelect,
+  CraftSkeleton,
+  CraftSwitch,
+  CraftTabs,
+  CraftTextarea,
+  CraftToastHost,
+  CraftTooltip,
   GlassCard,
+  Grid,
+  PageHeader,
+  Sidebar,
   ThemeProvider,
   ThemeSwitcher,
+  TopNav,
+  useCraftToast,
   useTheme
 });
 //# sourceMappingURL=index.cjs.map