@jameskabz/nextcraft-ui 0.7.1 → 0.7.3

package/dist/components/layout/app-template.js

@@ -15,17 +15,29 @@ function AppTemplate({
   icons,
   activePath,
   getActivePath,
+  sidebarDefaultExpanded = false,
+  sidebarExpanded,
+  onSidebarExpandedChange,
+  sidebarCollapsedWidth = "72px",
+  sidebarExpandedWidth = "224px",
+  sidebarHoverExpand = true,
   children
 }) {
   const sidebarConfig = config.sidebar;
   const headerConfig = config.header;
+  const [internalExpanded, setInternalExpanded] = React.useState(sidebarDefaultExpanded);
+  const resolvedExpanded = sidebarExpanded != null ? sidebarExpanded : internalExpanded;
+  const setExpanded = (next) => {
+    if (sidebarExpanded === void 0) setInternalExpanded(next);
+    onSidebarExpandedChange == null ? void 0 : onSidebarExpandedChange(next);
+  };
   const resolvedActivePath = activePath != null ? activePath : getActivePath == null ? void 0 : getActivePath();
   const buildIcon = React.useCallback(
     (name) => {
       if (!name) return void 0;
       if (resolveIcon) return resolveIcon(name);
       if (icons == null ? void 0 : icons[name]) return icons[name];
-      return /* @__PURE__ */ jsx(CraftIcon, { name });
+      return /* @__PURE__ */ jsx(CraftIcon, { name, size: "lg" });
     },
     [icons, resolveIcon]
   );
@@ -43,12 +55,20 @@ function AppTemplate({
   return /* @__PURE__ */ jsx(
     AppShell,
     {
+      style: {
+        "--nc-sidebar-width": resolvedExpanded ? sidebarExpandedWidth : sidebarCollapsedWidth
+      },
       sidebar: sidebarConfig && sidebarItems ? /* @__PURE__ */ jsx(
         Sidebar,
         {
           title: sidebarConfig.title,
           items: sidebarItems,
-          footer: sidebarFooterNode
+          footer: sidebarFooterNode,
+          hoverExpand: sidebarHoverExpand,
+          expanded: resolvedExpanded,
+          onExpandedChange: setExpanded,
+          collapsedWidth: sidebarCollapsedWidth,
+          expandedWidth: sidebarExpandedWidth
         }
       ) : void 0,
       topNav: headerConfig ? /* @__PURE__ */ jsx(

package/dist/components/layout/app-template.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/app-template.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { AppShell } from \"./app-shell\";\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\nimport { Sidebar, type SidebarItem } from \"./sidebar\";\nimport { TopNav } from \"./top-nav\";\nimport type { LayoutConfig, LayoutSidebarItem } from \"./layout-config\";\n\nexport type AppTemplateProps = {\n  config: LayoutConfig;\n  headerActions?: React.ReactNode;\n  headerBreadcrumb?: React.ReactNode;\n  sidebarFooter?: React.ReactNode;\n  resolveIcon?: (name: string) => React.ReactNode;\n  icons?: Record<string, React.ReactNode>;\n  activePath?: string;\n  getActivePath?: () => string | undefined;\n  children: React.ReactNode;\n};\n\nexport function AppTemplate({\n  config,\n  headerActions,\n  headerBreadcrumb,\n  sidebarFooter,\n  resolveIcon,\n  icons,\n  activePath,\n  getActivePath,\n  children,\n}: AppTemplateProps) {\n  const sidebarConfig = config.sidebar;\n  const headerConfig = config.header;\n\n  const resolvedActivePath = activePath ?? getActivePath?.();\n\n  const buildIcon = React.useCallback(\n    (name?: string) => {\n      if (!name) return undefined;\n      if (resolveIcon) return resolveIcon(name);\n      if (icons?.[name]) return icons[name];\n      return <CraftIcon name={name} />;\n    },\n    [icons, resolveIcon]\n  );\n\n  const sidebarItems: SidebarItem[] | null = sidebarConfig\n    ? sidebarConfig.items.map((item: LayoutSidebarItem) => ({\n        label: item.label,\n        href: item.href,\n        active:\n          item.active ??\n          (resolvedActivePath && item.href\n            ? item.href === resolvedActivePath\n            : false),\n        icon: buildIcon(item.icon),\n      }))\n    : null;\n\n  const breadcrumbNode =\n    headerBreadcrumb ??\n    (headerConfig?.breadcrumb ? (\n      <Breadcrumbs items={headerConfig.breadcrumb} />\n    ) : null);\n\n  const sidebarFooterNode =\n    sidebarFooter ??\n    (sidebarConfig?.footerText ? (\n      <div className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">\n        {sidebarConfig.footerText}\n      </div>\n    ) : null);\n\n  return (\n    <AppShell\n      sidebar={\n        sidebarConfig && sidebarItems ? (\n          <Sidebar\n            title={sidebarConfig.title}\n            items={sidebarItems}\n            footer={sidebarFooterNode}\n          />\n        ) : undefined\n      }\n      topNav={\n        headerConfig ? (\n          <TopNav\n            title={headerConfig.title}\n            breadcrumb={breadcrumbNode}\n            actions={headerActions}\n          />\n        ) : undefined\n      }\n    >\n      {children}\n    </AppShell>\n  );\n}\n"],"mappings":";AA4Ca;AA1Cb,YAAY,WAAW;AAEvB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,eAAiC;AAC1C,SAAS,cAAc;AAehB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,gBAAgB,OAAO;AAC7B,QAAM,eAAe,OAAO;AAE5B,QAAM,qBAAqB,kCAAc;AAEzC,QAAM,YAAY,MAAM;AAAA,IACtB,CAAC,SAAkB;AACjB,UAAI,CAAC,KAAM,QAAO;AAClB,UAAI,YAAa,QAAO,YAAY,IAAI;AACxC,UAAI,+BAAQ,MAAO,QAAO,MAAM,IAAI;AACpC,aAAO,oBAAC,aAAU,MAAY;AAAA,IAChC;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,QAAM,eAAqC,gBACvC,cAAc,MAAM,IAAI,CAAC,SAAyB;AAlDxD;AAkD4D;AAAA,MACpD,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,SACE,UAAK,WAAL,YACC,sBAAsB,KAAK,OACxB,KAAK,SAAS,qBACd;AAAA,MACN,MAAM,UAAU,KAAK,IAAI;AAAA,IAC3B;AAAA,GAAE,IACF;AAEJ,QAAM,iBACJ,+CACC,6CAAc,cACb,oBAAC,eAAY,OAAO,aAAa,YAAY,IAC3C;AAEN,QAAM,oBACJ,yCACC,+CAAe,cACd,oBAAC,SAAI,WAAU,0CACZ,wBAAc,YACjB,IACE;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SACE,iBAAiB,eACf;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,cAAc;AAAA,UACrB,OAAO;AAAA,UACP,QAAQ;AAAA;AAAA,MACV,IACE;AAAA,MAEN,QACE,eACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,aAAa;AAAA,UACpB,YAAY;AAAA,UACZ,SAAS;AAAA;AAAA,MACX,IACE;AAAA,MAGL;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layout/app-template.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { AppShell } from \"./app-shell\";\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\nimport { Sidebar, type SidebarItem } from \"./sidebar\";\nimport { TopNav } from \"./top-nav\";\nimport type { LayoutConfig, LayoutSidebarItem } from \"./layout-config\";\n\nexport type AppTemplateProps = {\n  config: LayoutConfig;\n  headerActions?: React.ReactNode;\n  headerBreadcrumb?: React.ReactNode;\n  sidebarFooter?: React.ReactNode;\n  resolveIcon?: (name: string) => React.ReactNode;\n  icons?: Record<string, React.ReactNode>;\n  activePath?: string;\n  getActivePath?: () => string | undefined;\n  sidebarDefaultExpanded?: boolean;\n  sidebarExpanded?: boolean;\n  onSidebarExpandedChange?: (expanded: boolean) => void;\n  sidebarCollapsedWidth?: string;\n  sidebarExpandedWidth?: string;\n  sidebarHoverExpand?: boolean;\n  children: React.ReactNode;\n};\n\nexport function AppTemplate({\n  config,\n  headerActions,\n  headerBreadcrumb,\n  sidebarFooter,\n  resolveIcon,\n  icons,\n  activePath,\n  getActivePath,\n  sidebarDefaultExpanded = false,\n  sidebarExpanded,\n  onSidebarExpandedChange,\n  sidebarCollapsedWidth = \"72px\",\n  sidebarExpandedWidth = \"224px\",\n  sidebarHoverExpand = true,\n  children,\n}: AppTemplateProps) {\n  const sidebarConfig = config.sidebar;\n  const headerConfig = config.header;\n\n  const [internalExpanded, setInternalExpanded] =\n    React.useState(sidebarDefaultExpanded);\n  const resolvedExpanded = sidebarExpanded ?? internalExpanded;\n  const setExpanded = (next: boolean) => {\n    if (sidebarExpanded === undefined) setInternalExpanded(next);\n    onSidebarExpandedChange?.(next);\n  };\n\n  const resolvedActivePath = activePath ?? getActivePath?.();\n\n  const buildIcon = React.useCallback(\n    (name?: string) => {\n      if (!name) return undefined;\n      if (resolveIcon) return resolveIcon(name);\n      if (icons?.[name]) return icons[name];\n      return <CraftIcon name={name} size=\"lg\"/>;\n    },\n    [icons, resolveIcon]\n  );\n\n  const sidebarItems: SidebarItem[] | null = sidebarConfig\n    ? sidebarConfig.items.map((item: LayoutSidebarItem) => ({\n        label: item.label,\n        href: item.href,\n        active:\n          item.active ??\n          (resolvedActivePath && item.href\n            ? item.href === resolvedActivePath\n            : false),\n        icon: buildIcon(item.icon),\n      }))\n    : null;\n\n  const breadcrumbNode =\n    headerBreadcrumb ??\n    (headerConfig?.breadcrumb ? (\n      <Breadcrumbs items={headerConfig.breadcrumb} />\n    ) : null);\n\n  const sidebarFooterNode =\n    sidebarFooter ??\n    (sidebarConfig?.footerText ? (\n      <div className=\"text-xs text-[rgb(var(--nc-fg-muted))]\">\n        {sidebarConfig.footerText}\n      </div>\n    ) : null);\n\n  return (\n    <AppShell\n      style={\n        {\n          \"--nc-sidebar-width\": resolvedExpanded\n            ? sidebarExpandedWidth\n            : sidebarCollapsedWidth,\n        } as React.CSSProperties\n      }\n      sidebar={\n        sidebarConfig && sidebarItems ? (\n          <Sidebar\n            title={sidebarConfig.title}\n            items={sidebarItems}\n            footer={sidebarFooterNode}\n            hoverExpand={sidebarHoverExpand}\n            expanded={resolvedExpanded}\n            onExpandedChange={setExpanded}\n            collapsedWidth={sidebarCollapsedWidth}\n            expandedWidth={sidebarExpandedWidth}\n          />\n        ) : undefined\n      }\n      topNav={\n        headerConfig ? (\n          <TopNav\n            title={headerConfig.title}\n            breadcrumb={breadcrumbNode}\n            actions={headerActions}\n          />\n        ) : undefined\n      }\n    >\n      {children}\n    </AppShell>\n  );\n}\n"],"mappings":";AAgEa;AA9Db,YAAY,WAAW;AAEvB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,eAAiC;AAC1C,SAAS,cAAc;AAqBhB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,uBAAuB;AAAA,EACvB,qBAAqB;AAAA,EACrB;AACF,GAAqB;AACnB,QAAM,gBAAgB,OAAO;AAC7B,QAAM,eAAe,OAAO;AAE5B,QAAM,CAAC,kBAAkB,mBAAmB,IAC1C,MAAM,SAAS,sBAAsB;AACvC,QAAM,mBAAmB,4CAAmB;AAC5C,QAAM,cAAc,CAAC,SAAkB;AACrC,QAAI,oBAAoB,OAAW,qBAAoB,IAAI;AAC3D,uEAA0B;AAAA,EAC5B;AAEA,QAAM,qBAAqB,kCAAc;AAEzC,QAAM,YAAY,MAAM;AAAA,IACtB,CAAC,SAAkB;AACjB,UAAI,CAAC,KAAM,QAAO;AAClB,UAAI,YAAa,QAAO,YAAY,IAAI;AACxC,UAAI,+BAAQ,MAAO,QAAO,MAAM,IAAI;AACpC,aAAO,oBAAC,aAAU,MAAY,MAAK,MAAI;AAAA,IACzC;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,QAAM,eAAqC,gBACvC,cAAc,MAAM,IAAI,CAAC,SAAyB;AAtExD;AAsE4D;AAAA,MACpD,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,SACE,UAAK,WAAL,YACC,sBAAsB,KAAK,OACxB,KAAK,SAAS,qBACd;AAAA,MACN,MAAM,UAAU,KAAK,IAAI;AAAA,IAC3B;AAAA,GAAE,IACF;AAEJ,QAAM,iBACJ,+CACC,6CAAc,cACb,oBAAC,eAAY,OAAO,aAAa,YAAY,IAC3C;AAEN,QAAM,oBACJ,yCACC,+CAAe,cACd,oBAAC,SAAI,WAAU,0CACZ,wBAAc,YACjB,IACE;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OACE;AAAA,QACE,sBAAsB,mBAClB,uBACA;AAAA,MACN;AAAA,MAEF,SACE,iBAAiB,eACf;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,cAAc;AAAA,UACrB,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,aAAa;AAAA,UACb,UAAU;AAAA,UACV,kBAAkB;AAAA,UAClB,gBAAgB;AAAA,UAChB,eAAe;AAAA;AAAA,MACjB,IACE;AAAA,MAEN,QACE,eACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,aAAa;AAAA,UACpB,YAAY;AAAA,UACZ,SAAS;AAAA;AAAA,MACX,IACE;AAAA,MAGL;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/layout/breadcrumbs.cjs

@@ -24,13 +24,23 @@ module.exports = __toCommonJS(breadcrumbs_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_cn = require("../../utils/cn");
 function Breadcrumbs({ className, items, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: (0, import_cn.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_runtime.jsx)("a", { href: item.href, className: "transition hover:text-[rgb(var(--nc-fg))]", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[rgb(var(--nc-fg))]", children: item.label });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center", children: [
-      content,
-      index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mx-2 text-[rgb(var(--nc-fg-soft))]", children: "/" })
-    ] }, `${item.label}-${index}`);
-  }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      className: (0, import_cn.cn)(
+        "flex items-center text-xs text-[rgb(var(--nc-fg-muted))]",
+        className
+      ),
+      ...props,
+      children: items.map((item, index) => {
+        const content = item.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: item.href, className: "transition hover:text-[rgb(var(--nc-fg))]", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[rgb(var(--nc-fg))]", children: item.label });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center", children: [
+          content,
+          index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mx-2 text-[rgb(var(--nc-fg-soft))]", children: "/" })
+        ] }, `${item.label}-${index}`);
+      })
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/components/layout/breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/breadcrumbs.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport type BreadcrumbItem = {\n  label: React.ReactNode;\n  href?: string;\n};\n\nexport type BreadcrumbsProps = React.HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[];\n};\n\nexport function Breadcrumbs({ className, items, ...props }: BreadcrumbsProps) {\n  return (\n    <nav className={cn(\"flex items-center text-sm text-[rgb(var(--nc-fg-muted))]\", className)} {...props}>\n      {items.map((item, index) => {\n        const content = item.href ? (\n          <a href={item.href} className=\"transition hover:text-[rgb(var(--nc-fg))]\">\n            {item.label}\n          </a>\n        ) : (\n          <span className=\"text-[rgb(var(--nc-fg))]\">{item.label}</span>\n        );\n\n        return (\n          <span key={`${item.label}-${index}`} className=\"flex items-center\">\n            {content}\n            {index < items.length - 1 && (\n              <span className=\"mx-2 text-[rgb(var(--nc-fg-soft))]\">/</span>\n            )}\n          </span>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBU;AAhBV,gBAAmB;AAWZ,SAAS,YAAY,EAAE,WAAW,OAAO,GAAG,MAAM,GAAqB;AAC5E,SACE,4CAAC,SAAI,eAAW,cAAG,4DAA4D,SAAS,GAAI,GAAG,OAC5F,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,UAAU,KAAK,OACnB,4CAAC,OAAE,MAAM,KAAK,MAAM,WAAU,6CAC3B,eAAK,OACR,IAEA,4CAAC,UAAK,WAAU,4BAA4B,eAAK,OAAM;AAGzD,WACE,6CAAC,UAAoC,WAAU,qBAC5C;AAAA;AAAA,MACA,QAAQ,MAAM,SAAS,KACtB,4CAAC,UAAK,WAAU,sCAAqC,eAAC;AAAA,SAH/C,GAAG,KAAK,KAAK,IAAI,KAAK,EAKjC;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layout/breadcrumbs.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport type BreadcrumbItem = {\n  label: React.ReactNode;\n  href?: string;\n};\n\nexport type BreadcrumbsProps = React.HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[];\n};\n\nexport function Breadcrumbs({ className, items, ...props }: BreadcrumbsProps) {\n  return (\n    <nav\n      className={cn(\n        \"flex items-center text-xs text-[rgb(var(--nc-fg-muted))]\",\n        className\n      )}\n      {...props}\n    >\n      {items.map((item, index) => {\n        const content = item.href ? (\n          <a href={item.href} className=\"transition hover:text-[rgb(var(--nc-fg))]\">\n            {item.label}\n          </a>\n        ) : (\n          <span className=\"text-[rgb(var(--nc-fg))]\">{item.label}</span>\n        );\n\n        return (\n          <span key={`${item.label}-${index}`} className=\"flex items-center\">\n            {content}\n            {index < items.length - 1 && (\n              <span className=\"mx-2 text-[rgb(var(--nc-fg-soft))]\">/</span>\n            )}\n          </span>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBU;AAtBV,gBAAmB;AAWZ,SAAS,YAAY,EAAE,WAAW,OAAO,GAAG,MAAM,GAAqB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,cAAM,UAAU,KAAK,OACnB,4CAAC,OAAE,MAAM,KAAK,MAAM,WAAU,6CAC3B,eAAK,OACR,IAEA,4CAAC,UAAK,WAAU,4BAA4B,eAAK,OAAM;AAGzD,eACE,6CAAC,UAAoC,WAAU,qBAC5C;AAAA;AAAA,UACA,QAAQ,MAAM,SAAS,KACtB,4CAAC,UAAK,WAAU,sCAAqC,eAAC;AAAA,aAH/C,GAAG,KAAK,KAAK,IAAI,KAAK,EAKjC;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/layout/breadcrumbs.js

@@ -1,13 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn";
 function Breadcrumbs({ className, items, ...props }) {
-  return /* @__PURE__ */ 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__ */ jsx("a", { href: item.href, className: "transition hover:text-[rgb(var(--nc-fg))]", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "text-[rgb(var(--nc-fg))]", children: item.label });
-    return /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
-      content,
-      index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: "mx-2 text-[rgb(var(--nc-fg-soft))]", children: "/" })
-    ] }, `${item.label}-${index}`);
-  }) });
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "flex items-center text-xs text-[rgb(var(--nc-fg-muted))]",
+        className
+      ),
+      ...props,
+      children: items.map((item, index) => {
+        const content = item.href ? /* @__PURE__ */ jsx("a", { href: item.href, className: "transition hover:text-[rgb(var(--nc-fg))]", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "text-[rgb(var(--nc-fg))]", children: item.label });
+        return /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
+          content,
+          index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: "mx-2 text-[rgb(var(--nc-fg-soft))]", children: "/" })
+        ] }, `${item.label}-${index}`);
+      })
+    }
+  );
 }
 export {
   Breadcrumbs

package/dist/components/layout/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/breadcrumbs.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport type BreadcrumbItem = {\n  label: React.ReactNode;\n  href?: string;\n};\n\nexport type BreadcrumbsProps = React.HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[];\n};\n\nexport function Breadcrumbs({ className, items, ...props }: BreadcrumbsProps) {\n  return (\n    <nav className={cn(\"flex items-center text-sm text-[rgb(var(--nc-fg-muted))]\", className)} {...props}>\n      {items.map((item, index) => {\n        const content = item.href ? (\n          <a href={item.href} className=\"transition hover:text-[rgb(var(--nc-fg))]\">\n            {item.label}\n          </a>\n        ) : (\n          <span className=\"text-[rgb(var(--nc-fg))]\">{item.label}</span>\n        );\n\n        return (\n          <span key={`${item.label}-${index}`} className=\"flex items-center\">\n            {content}\n            {index < items.length - 1 && (\n              <span className=\"mx-2 text-[rgb(var(--nc-fg-soft))]\">/</span>\n            )}\n          </span>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":"AAkBU,cAQA,YARA;AAhBV,SAAS,UAAU;AAWZ,SAAS,YAAY,EAAE,WAAW,OAAO,GAAG,MAAM,GAAqB;AAC5E,SACE,oBAAC,SAAI,WAAW,GAAG,4DAA4D,SAAS,GAAI,GAAG,OAC5F,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,UAAU,KAAK,OACnB,oBAAC,OAAE,MAAM,KAAK,MAAM,WAAU,6CAC3B,eAAK,OACR,IAEA,oBAAC,UAAK,WAAU,4BAA4B,eAAK,OAAM;AAGzD,WACE,qBAAC,UAAoC,WAAU,qBAC5C;AAAA;AAAA,MACA,QAAQ,MAAM,SAAS,KACtB,oBAAC,UAAK,WAAU,sCAAqC,eAAC;AAAA,SAH/C,GAAG,KAAK,KAAK,IAAI,KAAK,EAKjC;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layout/breadcrumbs.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport type BreadcrumbItem = {\n  label: React.ReactNode;\n  href?: string;\n};\n\nexport type BreadcrumbsProps = React.HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[];\n};\n\nexport function Breadcrumbs({ className, items, ...props }: BreadcrumbsProps) {\n  return (\n    <nav\n      className={cn(\n        \"flex items-center text-xs text-[rgb(var(--nc-fg-muted))]\",\n        className\n      )}\n      {...props}\n    >\n      {items.map((item, index) => {\n        const content = item.href ? (\n          <a href={item.href} className=\"transition hover:text-[rgb(var(--nc-fg))]\">\n            {item.label}\n          </a>\n        ) : (\n          <span className=\"text-[rgb(var(--nc-fg))]\">{item.label}</span>\n        );\n\n        return (\n          <span key={`${item.label}-${index}`} className=\"flex items-center\">\n            {content}\n            {index < items.length - 1 && (\n              <span className=\"mx-2 text-[rgb(var(--nc-fg-soft))]\">/</span>\n            )}\n          </span>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":"AAwBU,cAQA,YARA;AAtBV,SAAS,UAAU;AAWZ,SAAS,YAAY,EAAE,WAAW,OAAO,GAAG,MAAM,GAAqB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,cAAM,UAAU,KAAK,OACnB,oBAAC,OAAE,MAAM,KAAK,MAAM,WAAU,6CAC3B,eAAK,OACR,IAEA,oBAAC,UAAK,WAAU,4BAA4B,eAAK,OAAM;AAGzD,eACE,qBAAC,UAAoC,WAAU,qBAC5C;AAAA;AAAA,UACA,QAAQ,MAAM,SAAS,KACtB,oBAAC,UAAK,WAAU,sCAAqC,eAAC;AAAA,aAH/C,GAAG,KAAK,KAAK,IAAI,KAAK,EAKjC;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/layout/sidebar.cjs

@@ -1,7 +1,10 @@
 "use strict";
+"use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var sidebar_exports = {};
 __export(sidebar_exports, {
@@ -22,38 +33,124 @@ __export(sidebar_exports, {
 });
 module.exports = __toCommonJS(sidebar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"), 1);
+var import_link = __toESM(require("next/link"), 1);
 var import_craft_icon = require("../../components/craft-icon");
 var import_cn = require("../../utils/cn");
-function Sidebar({ className, title, items, footer, ...props }) {
+function Sidebar({
+  className,
+  title,
+  items,
+  footer,
+  hoverExpand = true,
+  expanded,
+  onExpandedChange,
+  defaultExpanded = false,
+  collapsedWidth = "72px",
+  expandedWidth = "224px",
+  ...props
+}) {
+  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
+  const isExpanded = expanded != null ? expanded : internalExpanded;
+  const toggleSidebar = () => {
+    const next = !isExpanded;
+    if (expanded === void 0) setInternalExpanded(next);
+    onExpandedChange == null ? void 0 : onExpandedChange(next);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "aside",
     {
       className: (0, import_cn.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",
+        "group flex h-full flex-col gap-4 rounded-2xl border border-[rgb(var(--nc-border)/0.2)] bg-[rgb(var(--nc-surface)/0.04)] p-3 text-[rgb(var(--nc-fg))] backdrop-blur-xl transition-all duration-300 ease-in-out",
+        "w-(--nc-sidebar-width)",
+        hoverExpand && !isExpanded ? "hover:w-(--nc-sidebar-expanded)" : "",
+        hoverExpand ? "fixed left-0 top-0 z-50 shadow-[0_16px_40px_rgba(0,0,0,0.18)]" : "relative",
         className
       ),
+      style: {
+        "--nc-sidebar-width": isExpanded ? expandedWidth : collapsedWidth,
+        "--nc-sidebar-expanded": expandedWidth
+      },
       ...props,
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "flex flex-col gap-2", children: items.map((item, index) => {
+        title && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3 px-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[rgb(var(--nc-accent-1)/0.18)] text-2xl font-semibold", children: typeof title === "string" ? title.slice(0, 1) : title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: (0, import_cn.cn)(
+                "truncate text-sm font-semibold transition-all duration-300 ease-in-out",
+                hoverExpand && !isExpanded ? "max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100" : "max-w-40 opacity-100"
+              ),
+              children: title
+            }
+          )
+        ] }),
+        hoverExpand && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            onClick: toggleSidebar,
+            className: (0, import_cn.cn)(
+              "flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out",
+              !isExpanded ? "justify-center px-0.5 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-0.5" : "justify-start gap-3 px-0.5 py-2",
+              "hover:bg-[rgb(var(--nc-surface)/0.1)]",
+              isExpanded ? "text-[rgb(var(--nc-fg))] bg-[rgb(var(--nc-surface)/0.08)]" : "text-[rgb(var(--nc-fg-muted))]"
+            ),
+            "aria-label": isExpanded ? "Collapse sidebar" : "Expand sidebar",
+            "aria-expanded": isExpanded,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_icon.CraftIcon, { name: "bars", size: "4xl" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: (0, import_cn.cn)(
+                    "truncate whitespace-nowrap transition-all duration-300 ease-in-out",
+                    !isExpanded ? "max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100" : "max-w-40 opacity-100"
+                  ),
+                  children: isExpanded ? "Collapse" : "Expand"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "flex flex-col gap-2.5", children: items.map((item, index) => {
           var _a;
           return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "a",
+            import_link.default,
             {
               href: (_a = item.href) != null ? _a : "#",
               className: (0, import_cn.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))]"
+                "flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out",
+                !isExpanded ? "justify-center px-2 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-3" : "justify-start gap-3 px-3 py-2",
+                item.active ? "bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]" : "text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]"
               ),
               children: [
-                typeof item.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_icon.CraftIcon, { name: item.icon, className: "h-4 w-4" }) : item.icon,
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.label })
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out", children: typeof item.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_icon.CraftIcon, { name: item.icon, size: "3xl" }) : item.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: (0, import_cn.cn)(
+                      "truncate whitespace-nowrap transition-all duration-300 ease-in-out",
+                      !isExpanded ? "max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100" : "max-w-40 opacity-100"
+                    ),
+                    children: item.label
+                  }
+                )
               ]
             },
             `${item.label}-${index}`
           );
         }) }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-auto pt-4", children: footer })
+        footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_cn.cn)(
+              "mt-auto px-2 pt-3 text-xs text-[rgb(var(--nc-fg-muted))] transition-all duration-300 ease-in-out",
+              !isExpanded ? "max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100" : "max-w-40 opacity-100"
+            ),
+            children: footer
+          }
+        )
       ]
     }
   );

package/dist/components/layout/sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { cn } from \"@/utils/cn\";\n\nexport type SidebarItem = {\n  label: React.ReactNode;\n  href?: string;\n  icon?: React.ReactNode | string;\n  active?: boolean;\n};\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n  title?: React.ReactNode;\n  items: SidebarItem[];\n  footer?: React.ReactNode;\n};\n\nexport function Sidebar({ className, title, items, footer, ...props }: SidebarProps) {\n  return (\n    <aside\n      className={cn(\n        \"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\",\n        className\n      )}\n      {...props}\n    >\n      {title && <div className=\"text-lg font-semibold\">{title}</div>}\n      <nav className=\"flex flex-col gap-2\">\n        {items.map((item, index) => (\n          <a\n            key={`${item.label}-${index}`}\n            href={item.href ?? \"#\"}\n            className={cn(\n              \"flex items-center gap-3 rounded-2xl px-3 py-2 text-sm transition\",\n              item.active\n                ? \"bg-[rgb(var(--nc-accent-1)/0.25)] text-[rgb(var(--nc-fg))]\"\n                : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.12)] hover:text-[rgb(var(--nc-fg))]\"\n            )}\n          >\n            {typeof item.icon === \"string\" ? (\n              <CraftIcon name={item.icon} className=\"h-4 w-4\" />\n            ) : (\n              item.icon\n            )}\n            <span>{item.label}</span>\n          </a>\n        ))}\n      </nav>\n      {footer && <div className=\"mt-auto pt-4\">{footer}</div>}\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BgB;AAzBhB,wBAA0B;AAC1B,gBAAmB;AAeZ,SAAS,QAAQ,EAAE,WAAW,OAAO,OAAO,QAAQ,GAAG,MAAM,GAAiB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,iBAAS,4CAAC,SAAI,WAAU,yBAAyB,iBAAM;AAAA,QACxD,4CAAC,SAAI,WAAU,uBACZ,gBAAM,IAAI,CAAC,MAAM,UAAO;AA7BjC;AA8BU;AAAA,YAAC;AAAA;AAAA,cAEC,OAAM,UAAK,SAAL,YAAa;AAAA,cACnB,eAAW;AAAA,gBACT;AAAA,gBACA,KAAK,SACD,+DACA;AAAA,cACN;AAAA,cAEC;AAAA,uBAAO,KAAK,SAAS,WACpB,4CAAC,+BAAU,MAAM,KAAK,MAAM,WAAU,WAAU,IAEhD,KAAK;AAAA,gBAEP,4CAAC,UAAM,eAAK,OAAM;AAAA;AAAA;AAAA,YAdb,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAe7B;AAAA,SACD,GACH;AAAA,QACC,UAAU,4CAAC,SAAI,WAAU,gBAAgB,kBAAO;AAAA;AAAA;AAAA,EACnD;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layout/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\n\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { cn } from \"@/utils/cn\";\n\nexport type SidebarItem = {\n  label: React.ReactNode;\n  href?: string;\n  icon?: React.ReactNode | string;\n  active?: boolean;\n};\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n  title?: React.ReactNode;\n  items: SidebarItem[];\n  footer?: React.ReactNode;\n  hoverExpand?: boolean;\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  defaultExpanded?: boolean;\n  collapsedWidth?: string;\n  expandedWidth?: string;\n};\n\nexport function Sidebar({\n  className,\n  title,\n  items,\n  footer,\n  hoverExpand = true,\n  expanded,\n  onExpandedChange,\n  defaultExpanded = false,\n  collapsedWidth = \"72px\",\n  expandedWidth = \"224px\",\n  ...props\n}: SidebarProps) {\n  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);\n  const isExpanded = expanded ?? internalExpanded;\n\n  const toggleSidebar = () => {\n    const next = !isExpanded;\n    if (expanded === undefined) setInternalExpanded(next);\n    onExpandedChange?.(next);\n  };\n\n  return (\n    <aside\n      className={cn(\n        \"group flex h-full flex-col gap-4 rounded-2xl border border-[rgb(var(--nc-border)/0.2)] bg-[rgb(var(--nc-surface)/0.04)] p-3 text-[rgb(var(--nc-fg))] backdrop-blur-xl transition-all duration-300 ease-in-out\",\n        \"w-(--nc-sidebar-width)\",\n        hoverExpand && !isExpanded ? \"hover:w-(--nc-sidebar-expanded)\" : \"\",\n        hoverExpand\n          ? \"fixed left-0 top-0 z-50 shadow-[0_16px_40px_rgba(0,0,0,0.18)]\"\n          : \"relative\",\n        className\n      )}\n      style={\n        {\n          \"--nc-sidebar-width\": isExpanded ? expandedWidth : collapsedWidth,\n          \"--nc-sidebar-expanded\": expandedWidth,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {title && (\n        <div className=\"flex items-center gap-3 px-1\">\n          <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[rgb(var(--nc-accent-1)/0.18)] text-2xl font-semibold\">\n            {typeof title === \"string\" ? title.slice(0, 1) : title}\n          </div>\n          <span\n            className={cn(\n              \"truncate text-sm font-semibold transition-all duration-300 ease-in-out\",\n              hoverExpand && !isExpanded\n                ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n                : \"max-w-40 opacity-100\"\n            )}\n          >\n            {title}\n          </span>\n        </div>\n      )}\n\n      {hoverExpand && (\n        <button\n          onClick={toggleSidebar}\n          className={cn(\n            \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n            !isExpanded\n              ? \"justify-center px-0.5 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-0.5\"\n              : \"justify-start gap-3 px-0.5 py-2\",\n            \"hover:bg-[rgb(var(--nc-surface)/0.1)]\",\n            isExpanded\n              ? \"text-[rgb(var(--nc-fg))] bg-[rgb(var(--nc-surface)/0.08)]\"\n              : \"text-[rgb(var(--nc-fg-muted))]\"\n          )}\n          aria-label={isExpanded ? \"Collapse sidebar\" : \"Expand sidebar\"}\n          aria-expanded={isExpanded}\n        >\n          <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n            <CraftIcon name=\"bars\" size=\"4xl\" />\n          </div>\n          <span\n            className={cn(\n              \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n              !isExpanded\n                ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n                : \"max-w-40 opacity-100\"\n            )}\n          >\n            {isExpanded ? \"Collapse\" : \"Expand\"}\n          </span>\n        </button>\n      )}\n\n      <nav className=\"flex flex-col gap-2.5\">\n        {items.map((item, index) => (\n          <Link\n            key={`${item.label}-${index}`}\n            href={item.href ?? \"#\"}\n            className={cn(\n              \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n              !isExpanded\n                ? \"justify-center px-2 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-3\"\n                : \"justify-start gap-3 px-3 py-2\",\n              item.active\n                ? \"bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]\"\n                : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]\"\n            )}\n          >\n            <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n              {typeof item.icon === \"string\" ? (\n                <CraftIcon name={item.icon} size=\"3xl\" />\n              ) : (\n                item.icon\n              )}\n            </div>\n            <span\n              className={cn(\n                \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n                !isExpanded\n                  ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n                  : \"max-w-40 opacity-100\"\n              )}\n            >\n              {item.label}\n            </span>\n          </Link>\n        ))}\n      </nav>\n\n      {footer && (\n        <div\n          className={cn(\n            \"mt-auto px-2 pt-3 text-xs text-[rgb(var(--nc-fg-muted))] transition-all duration-300 ease-in-out\",\n            !isExpanded\n              ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n              : \"max-w-40 opacity-100\"\n          )}\n        >\n          {footer}\n        </div>\n      )}\n    </aside>\n  );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqEQ;AAnER,YAAuB;AACvB,kBAAiB;AAEjB,wBAA0B;AAC1B,gBAAmB;AAqBZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAiB;AACf,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,eAAe;AAC9E,QAAM,aAAa,8BAAY;AAE/B,QAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,CAAC;AACd,QAAI,aAAa,OAAW,qBAAoB,IAAI;AACpD,yDAAmB;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,eAAe,CAAC,aAAa,oCAAoC;AAAA,QACjE,cACI,kEACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,OACE;AAAA,QACE,sBAAsB,aAAa,gBAAgB;AAAA,QACnD,yBAAyB;AAAA,MAC3B;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,iBACC,6CAAC,SAAI,WAAU,gCACb;AAAA,sDAAC,SAAI,WAAU,yHACZ,iBAAO,UAAU,WAAW,MAAM,MAAM,GAAG,CAAC,IAAI,OACnD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,gBACT;AAAA,gBACA,eAAe,CAAC,aACZ,mEACA;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA,QAGD,eACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAW;AAAA,cACT;AAAA,cACA,CAAC,aACG,8FACA;AAAA,cACJ;AAAA,cACA,aACI,8DACA;AAAA,YACN;AAAA,YACA,cAAY,aAAa,qBAAqB;AAAA,YAC9C,iBAAe;AAAA,YAEf;AAAA,0DAAC,SAAI,WAAU,qFACb,sDAAC,+BAAU,MAAK,QAAO,MAAK,OAAM,GACpC;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,oBACT;AAAA,oBACA,CAAC,aACG,mEACA;AAAA,kBACN;AAAA,kBAEC,uBAAa,aAAa;AAAA;AAAA,cAC7B;AAAA;AAAA;AAAA,QACF;AAAA,QAGF,4CAAC,SAAI,WAAU,yBACZ,gBAAM,IAAI,CAAC,MAAM,UAAO;AAvHjC;AAwHU;AAAA,YAAC,YAAAA;AAAA,YAAA;AAAA,cAEC,OAAM,UAAK,SAAL,YAAa;AAAA,cACnB,eAAW;AAAA,gBACT;AAAA,gBACA,CAAC,aACG,0FACA;AAAA,gBACJ,KAAK,SACD,qHACA;AAAA,cACN;AAAA,cAEA;AAAA,4DAAC,SAAI,WAAU,qFACZ,iBAAO,KAAK,SAAS,WACpB,4CAAC,+BAAU,MAAM,KAAK,MAAM,MAAK,OAAM,IAEvC,KAAK,MAET;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAW;AAAA,sBACT;AAAA,sBACA,CAAC,aACG,mEACA;AAAA,oBACN;AAAA,oBAEC,eAAK;AAAA;AAAA,gBACR;AAAA;AAAA;AAAA,YA5BK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UA6B7B;AAAA,SACD,GACH;AAAA,QAEC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,CAAC,aACG,mEACA;AAAA,YACN;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["Link"]}

package/dist/components/layout/sidebar.d.cts

@@ -11,7 +11,13 @@ type SidebarProps = React.HTMLAttributes<HTMLElement> & {
     title?: React.ReactNode;
     items: SidebarItem[];
     footer?: React.ReactNode;
+    hoverExpand?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    defaultExpanded?: boolean;
+    collapsedWidth?: string;
+    expandedWidth?: string;
 };
-declare function Sidebar({ className, title, items, footer, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ className, title, items, footer, hoverExpand, expanded, onExpandedChange, defaultExpanded, collapsedWidth, expandedWidth, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 export { Sidebar, type SidebarItem, type SidebarProps };

package/dist/components/layout/sidebar.d.ts

@@ -11,7 +11,13 @@ type SidebarProps = React.HTMLAttributes<HTMLElement> & {
     title?: React.ReactNode;
     items: SidebarItem[];
     footer?: React.ReactNode;
+    hoverExpand?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    defaultExpanded?: boolean;
+    collapsedWidth?: string;
+    expandedWidth?: string;
 };
-declare function Sidebar({ className, title, items, footer, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ className, title, items, footer, hoverExpand, expanded, onExpandedChange, defaultExpanded, collapsedWidth, expandedWidth, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 export { Sidebar, type SidebarItem, type SidebarProps };

package/dist/components/layout/sidebar.js

@@ -1,36 +1,123 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Link from "next/link";
 import { CraftIcon } from "../../components/craft-icon";
 import { cn } from "../../utils/cn";
-function Sidebar({ className, title, items, footer, ...props }) {
+function Sidebar({
+  className,
+  title,
+  items,
+  footer,
+  hoverExpand = true,
+  expanded,
+  onExpandedChange,
+  defaultExpanded = false,
+  collapsedWidth = "72px",
+  expandedWidth = "224px",
+  ...props
+}) {
+  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
+  const isExpanded = expanded != null ? expanded : internalExpanded;
+  const toggleSidebar = () => {
+    const next = !isExpanded;
+    if (expanded === void 0) setInternalExpanded(next);
+    onExpandedChange == null ? void 0 : onExpandedChange(next);
+  };
   return /* @__PURE__ */ 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",
+        "group flex h-full flex-col gap-4 rounded-2xl border border-[rgb(var(--nc-border)/0.2)] bg-[rgb(var(--nc-surface)/0.04)] p-3 text-[rgb(var(--nc-fg))] backdrop-blur-xl transition-all duration-300 ease-in-out",
+        "w-(--nc-sidebar-width)",
+        hoverExpand && !isExpanded ? "hover:w-(--nc-sidebar-expanded)" : "",
+        hoverExpand ? "fixed left-0 top-0 z-50 shadow-[0_16px_40px_rgba(0,0,0,0.18)]" : "relative",
         className
       ),
+      style: {
+        "--nc-sidebar-width": isExpanded ? expandedWidth : collapsedWidth,
+        "--nc-sidebar-expanded": expandedWidth
+      },
       ...props,
       children: [
-        title && /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold", children: title }),
-        /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-2", children: items.map((item, index) => {
+        title && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[rgb(var(--nc-accent-1)/0.18)] text-2xl font-semibold", children: typeof title === "string" ? title.slice(0, 1) : title }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "truncate text-sm font-semibold transition-all duration-300 ease-in-out",
+                hoverExpand && !isExpanded ? "max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100" : "max-w-40 opacity-100"
+              ),
+              children: title
+            }
+          )
+        ] }),
+        hoverExpand && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: toggleSidebar,
+            className: cn(
+              "flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out",
+              !isExpanded ? "justify-center px-0.5 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-0.5" : "justify-start gap-3 px-0.5 py-2",
+              "hover:bg-[rgb(var(--nc-surface)/0.1)]",
+              isExpanded ? "text-[rgb(var(--nc-fg))] bg-[rgb(var(--nc-surface)/0.08)]" : "text-[rgb(var(--nc-fg-muted))]"
+            ),
+            "aria-label": isExpanded ? "Collapse sidebar" : "Expand sidebar",
+            "aria-expanded": isExpanded,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out", children: /* @__PURE__ */ jsx(CraftIcon, { name: "bars", size: "4xl" }) }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "truncate whitespace-nowrap transition-all duration-300 ease-in-out",
+                    !isExpanded ? "max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100" : "max-w-40 opacity-100"
+                  ),
+                  children: isExpanded ? "Collapse" : "Expand"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-2.5", children: items.map((item, index) => {
           var _a;
           return /* @__PURE__ */ jsxs(
-            "a",
+            Link,
             {
               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))]"
+                "flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out",
+                !isExpanded ? "justify-center px-2 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-3" : "justify-start gap-3 px-3 py-2",
+                item.active ? "bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]" : "text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]"
               ),
               children: [
-                typeof item.icon === "string" ? /* @__PURE__ */ jsx(CraftIcon, { name: item.icon, className: "h-4 w-4" }) : item.icon,
-                /* @__PURE__ */ jsx("span", { children: item.label })
+                /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out", children: typeof item.icon === "string" ? /* @__PURE__ */ jsx(CraftIcon, { name: item.icon, size: "3xl" }) : item.icon }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "truncate whitespace-nowrap transition-all duration-300 ease-in-out",
+                      !isExpanded ? "max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100" : "max-w-40 opacity-100"
+                    ),
+                    children: item.label
+                  }
+                )
               ]
             },
             `${item.label}-${index}`
           );
         }) }),
-        footer && /* @__PURE__ */ jsx("div", { className: "mt-auto pt-4", children: footer })
+        footer && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-auto px-2 pt-3 text-xs text-[rgb(var(--nc-fg-muted))] transition-all duration-300 ease-in-out",
+              !isExpanded ? "max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100" : "max-w-40 opacity-100"
+            ),
+            children: footer
+          }
+        )
       ]
     }
   );

package/dist/components/layout/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { cn } from \"@/utils/cn\";\n\nexport type SidebarItem = {\n  label: React.ReactNode;\n  href?: string;\n  icon?: React.ReactNode | string;\n  active?: boolean;\n};\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n  title?: React.ReactNode;\n  items: SidebarItem[];\n  footer?: React.ReactNode;\n};\n\nexport function Sidebar({ className, title, items, footer, ...props }: SidebarProps) {\n  return (\n    <aside\n      className={cn(\n        \"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\",\n        className\n      )}\n      {...props}\n    >\n      {title && <div className=\"text-lg font-semibold\">{title}</div>}\n      <nav className=\"flex flex-col gap-2\">\n        {items.map((item, index) => (\n          <a\n            key={`${item.label}-${index}`}\n            href={item.href ?? \"#\"}\n            className={cn(\n              \"flex items-center gap-3 rounded-2xl px-3 py-2 text-sm transition\",\n              item.active\n                ? \"bg-[rgb(var(--nc-accent-1)/0.25)] text-[rgb(var(--nc-fg))]\"\n                : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.12)] hover:text-[rgb(var(--nc-fg))]\"\n            )}\n          >\n            {typeof item.icon === \"string\" ? (\n              <CraftIcon name={item.icon} className=\"h-4 w-4\" />\n            ) : (\n              item.icon\n            )}\n            <span>{item.label}</span>\n          </a>\n        ))}\n      </nav>\n      {footer && <div className=\"mt-auto pt-4\">{footer}</div>}\n    </aside>\n  );\n}\n"],"mappings":"AA2BgB,cAGN,YAHM;AAzBhB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAeZ,SAAS,QAAQ,EAAE,WAAW,OAAO,OAAO,QAAQ,GAAG,MAAM,GAAiB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,iBAAS,oBAAC,SAAI,WAAU,yBAAyB,iBAAM;AAAA,QACxD,oBAAC,SAAI,WAAU,uBACZ,gBAAM,IAAI,CAAC,MAAM,UAAO;AA7BjC;AA8BU;AAAA,YAAC;AAAA;AAAA,cAEC,OAAM,UAAK,SAAL,YAAa;AAAA,cACnB,WAAW;AAAA,gBACT;AAAA,gBACA,KAAK,SACD,+DACA;AAAA,cACN;AAAA,cAEC;AAAA,uBAAO,KAAK,SAAS,WACpB,oBAAC,aAAU,MAAM,KAAK,MAAM,WAAU,WAAU,IAEhD,KAAK;AAAA,gBAEP,oBAAC,UAAM,eAAK,OAAM;AAAA;AAAA;AAAA,YAdb,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UAe7B;AAAA,SACD,GACH;AAAA,QACC,UAAU,oBAAC,SAAI,WAAU,gBAAgB,kBAAO;AAAA;AAAA;AAAA,EACnD;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layout/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\n\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { cn } from \"@/utils/cn\";\n\nexport type SidebarItem = {\n  label: React.ReactNode;\n  href?: string;\n  icon?: React.ReactNode | string;\n  active?: boolean;\n};\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n  title?: React.ReactNode;\n  items: SidebarItem[];\n  footer?: React.ReactNode;\n  hoverExpand?: boolean;\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  defaultExpanded?: boolean;\n  collapsedWidth?: string;\n  expandedWidth?: string;\n};\n\nexport function Sidebar({\n  className,\n  title,\n  items,\n  footer,\n  hoverExpand = true,\n  expanded,\n  onExpandedChange,\n  defaultExpanded = false,\n  collapsedWidth = \"72px\",\n  expandedWidth = \"224px\",\n  ...props\n}: SidebarProps) {\n  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);\n  const isExpanded = expanded ?? internalExpanded;\n\n  const toggleSidebar = () => {\n    const next = !isExpanded;\n    if (expanded === undefined) setInternalExpanded(next);\n    onExpandedChange?.(next);\n  };\n\n  return (\n    <aside\n      className={cn(\n        \"group flex h-full flex-col gap-4 rounded-2xl border border-[rgb(var(--nc-border)/0.2)] bg-[rgb(var(--nc-surface)/0.04)] p-3 text-[rgb(var(--nc-fg))] backdrop-blur-xl transition-all duration-300 ease-in-out\",\n        \"w-(--nc-sidebar-width)\",\n        hoverExpand && !isExpanded ? \"hover:w-(--nc-sidebar-expanded)\" : \"\",\n        hoverExpand\n          ? \"fixed left-0 top-0 z-50 shadow-[0_16px_40px_rgba(0,0,0,0.18)]\"\n          : \"relative\",\n        className\n      )}\n      style={\n        {\n          \"--nc-sidebar-width\": isExpanded ? expandedWidth : collapsedWidth,\n          \"--nc-sidebar-expanded\": expandedWidth,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {title && (\n        <div className=\"flex items-center gap-3 px-1\">\n          <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[rgb(var(--nc-accent-1)/0.18)] text-2xl font-semibold\">\n            {typeof title === \"string\" ? title.slice(0, 1) : title}\n          </div>\n          <span\n            className={cn(\n              \"truncate text-sm font-semibold transition-all duration-300 ease-in-out\",\n              hoverExpand && !isExpanded\n                ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n                : \"max-w-40 opacity-100\"\n            )}\n          >\n            {title}\n          </span>\n        </div>\n      )}\n\n      {hoverExpand && (\n        <button\n          onClick={toggleSidebar}\n          className={cn(\n            \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n            !isExpanded\n              ? \"justify-center px-0.5 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-0.5\"\n              : \"justify-start gap-3 px-0.5 py-2\",\n            \"hover:bg-[rgb(var(--nc-surface)/0.1)]\",\n            isExpanded\n              ? \"text-[rgb(var(--nc-fg))] bg-[rgb(var(--nc-surface)/0.08)]\"\n              : \"text-[rgb(var(--nc-fg-muted))]\"\n          )}\n          aria-label={isExpanded ? \"Collapse sidebar\" : \"Expand sidebar\"}\n          aria-expanded={isExpanded}\n        >\n          <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n            <CraftIcon name=\"bars\" size=\"4xl\" />\n          </div>\n          <span\n            className={cn(\n              \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n              !isExpanded\n                ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n                : \"max-w-40 opacity-100\"\n            )}\n          >\n            {isExpanded ? \"Collapse\" : \"Expand\"}\n          </span>\n        </button>\n      )}\n\n      <nav className=\"flex flex-col gap-2.5\">\n        {items.map((item, index) => (\n          <Link\n            key={`${item.label}-${index}`}\n            href={item.href ?? \"#\"}\n            className={cn(\n              \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n              !isExpanded\n                ? \"justify-center px-2 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-3\"\n                : \"justify-start gap-3 px-3 py-2\",\n              item.active\n                ? \"bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]\"\n                : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]\"\n            )}\n          >\n            <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n              {typeof item.icon === \"string\" ? (\n                <CraftIcon name={item.icon} size=\"3xl\" />\n              ) : (\n                item.icon\n              )}\n            </div>\n            <span\n              className={cn(\n                \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n                !isExpanded\n                  ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n                  : \"max-w-40 opacity-100\"\n              )}\n            >\n              {item.label}\n            </span>\n          </Link>\n        ))}\n      </nav>\n\n      {footer && (\n        <div\n          className={cn(\n            \"mt-auto px-2 pt-3 text-xs text-[rgb(var(--nc-fg-muted))] transition-all duration-300 ease-in-out\",\n            !isExpanded\n              ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n              : \"max-w-40 opacity-100\"\n          )}\n        >\n          {footer}\n        </div>\n      )}\n    </aside>\n  );\n}"],"mappings":";AAqEQ,SACE,KADF;AAnER,YAAY,WAAW;AACvB,OAAO,UAAU;AAEjB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAqBZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAiB;AACf,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,eAAe;AAC9E,QAAM,aAAa,8BAAY;AAE/B,QAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,CAAC;AACd,QAAI,aAAa,OAAW,qBAAoB,IAAI;AACpD,yDAAmB;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,eAAe,CAAC,aAAa,oCAAoC;AAAA,QACjE,cACI,kEACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,OACE;AAAA,QACE,sBAAsB,aAAa,gBAAgB;AAAA,QACnD,yBAAyB;AAAA,MAC3B;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,iBACC,qBAAC,SAAI,WAAU,gCACb;AAAA,8BAAC,SAAI,WAAU,yHACZ,iBAAO,UAAU,WAAW,MAAM,MAAM,GAAG,CAAC,IAAI,OACnD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,eAAe,CAAC,aACZ,mEACA;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA,QAGD,eACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAW;AAAA,cACT;AAAA,cACA,CAAC,aACG,8FACA;AAAA,cACJ;AAAA,cACA,aACI,8DACA;AAAA,YACN;AAAA,YACA,cAAY,aAAa,qBAAqB;AAAA,YAC9C,iBAAe;AAAA,YAEf;AAAA,kCAAC,SAAI,WAAU,qFACb,8BAAC,aAAU,MAAK,QAAO,MAAK,OAAM,GACpC;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,CAAC,aACG,mEACA;AAAA,kBACN;AAAA,kBAEC,uBAAa,aAAa;AAAA;AAAA,cAC7B;AAAA;AAAA;AAAA,QACF;AAAA,QAGF,oBAAC,SAAI,WAAU,yBACZ,gBAAM,IAAI,CAAC,MAAM,UAAO;AAvHjC;AAwHU;AAAA,YAAC;AAAA;AAAA,cAEC,OAAM,UAAK,SAAL,YAAa;AAAA,cACnB,WAAW;AAAA,gBACT;AAAA,gBACA,CAAC,aACG,0FACA;AAAA,gBACJ,KAAK,SACD,qHACA;AAAA,cACN;AAAA,cAEA;AAAA,oCAAC,SAAI,WAAU,qFACZ,iBAAO,KAAK,SAAS,WACpB,oBAAC,aAAU,MAAM,KAAK,MAAM,MAAK,OAAM,IAEvC,KAAK,MAET;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW;AAAA,sBACT;AAAA,sBACA,CAAC,aACG,mEACA;AAAA,oBACN;AAAA,oBAEC,eAAK;AAAA;AAAA,gBACR;AAAA;AAAA;AAAA,YA5BK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UA6B7B;AAAA,SACD,GACH;AAAA,QAEC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,CAAC,aACG,mEACA;AAAA,YACN;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/layout/top-nav.cjs

@@ -23,21 +23,33 @@ __export(top_nav_exports, {
 module.exports = __toCommonJS(top_nav_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_cn = require("../../utils/cn");
-function TopNav({ className, title, actions, breadcrumb, ...props }) {
+function TopNav({
+  className,
+  title,
+  actions,
+  breadcrumb,
+  leading,
+  search,
+  ...props
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "header",
     {
       className: (0, import_cn.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",
+        "flex flex-wrap items-center gap-3 rounded-2xl border border-[rgb(var(--nc-border)/0.2)] bg-[rgb(var(--nc-surface)/0.04)] px-4 py-3 text-[rgb(var(--nc-fg))] backdrop-blur-xl",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1", children: [
-          breadcrumb,
-          title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xl font-semibold", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          leading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: leading }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 space-y-1", children: [
+            breadcrumb,
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-lg font-semibold", children: title })
+          ] })
         ] }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-3", children: actions })
+        search && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "order-last w-full min-w-[220px] flex-1 sm:order-none sm:w-auto sm:max-w-[480px]", children: search }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: actions })
       ]
     }
   );