@hanzo/docs-base-ui 16.4.8 → 16.5.3

package/dist/provider/react-router.d.ts

@@ -1,7 +1,7 @@
 import { RootProvider as RootProvider$1 } from "./base.js";
-import { Framework } from "@hanzo/docs-core/framework";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
 import { ComponentProps } from "react";
+import { Framework } from "@hanzo/docs-core/framework";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/provider/react-router.d.ts
 interface RootProviderProps extends ComponentProps<typeof RootProvider$1> {
@@ -16,7 +16,7 @@ interface RootProviderProps extends ComponentProps<typeof RootProvider$1> {
 declare function RootProvider({
   components,
   ...props
-}: RootProviderProps): react_jsx_runtime13.JSX.Element;
+}: RootProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { RootProvider, RootProviderProps };
 //# sourceMappingURL=react-router.d.ts.map

package/dist/provider/react-router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-router.d.ts","names":[],"sources":["../../src/provider/react-router.tsx"],"sourcesContent":[],"mappings":";;;;;;UAMiB,iBAAA,SAA0B,sBAAsB;;;AAAjE;EAAiE,UAAA,CAAA,EAAA;IAKtD,IAAA,CAAA,EAAA,SAAA,CAAA,MAAA,CAAA;IACC,KAAA,CAAA,EAAA,SAAA,CAAA,OAAA,CAAA;EAN+B,CAAA;;AAU3B,iBAAA,YAAA,CAAY;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAA2B,iBAA3B,CAAA,EAA4C,mBAAA,CAAA,GAAA,CAAA,OAA5C"}
+{"version":3,"file":"react-router.d.ts","names":[],"sources":["../../src/provider/react-router.tsx"],"mappings":";;;;;;UAMiB,iBAAA,SAA0B,cAAA,QAAsB,cAAA;;;AAAjE;EAIE,UAAA;IACE,IAAA,GAAO,SAAA;IACP,KAAA,GAAQ,SAAA;EAAA;AAAA;AAAA,iBAII,YAAA,CAAA;EAAe,UAAA;EAAA,GAAe;AAAA,GAAS,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/provider/tanstack.d.ts

@@ -1,7 +1,7 @@
 import { RootProvider as RootProvider$1 } from "./base.js";
-import { Framework } from "@hanzo/docs-core/framework";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
 import { ComponentProps } from "react";
+import { Framework } from "@hanzo/docs-core/framework";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/provider/tanstack.d.ts
 interface RootProviderProps extends ComponentProps<typeof RootProvider$1> {
@@ -16,7 +16,7 @@ interface RootProviderProps extends ComponentProps<typeof RootProvider$1> {
 declare function RootProvider({
   components,
   ...props
-}: RootProviderProps): react_jsx_runtime11.JSX.Element;
+}: RootProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { RootProvider, RootProviderProps };
 //# sourceMappingURL=tanstack.d.ts.map

package/dist/provider/tanstack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tanstack.d.ts","names":[],"sources":["../../src/provider/tanstack.tsx"],"sourcesContent":[],"mappings":";;;;;;UAMiB,iBAAA,SAA0B,sBAAsB;;;AAAjE;EAAiE,UAAA,CAAA,EAAA;IAKtD,IAAA,CAAA,EAAA,SAAA,CAAA,MAAA,CAAA;IACC,KAAA,CAAA,EAAA,SAAA,CAAA,OAAA,CAAA;EAN+B,CAAA;;AAU3B,iBAAA,YAAA,CAAY;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAA2B,iBAA3B,CAAA,EAA4C,mBAAA,CAAA,GAAA,CAAA,OAA5C"}
+{"version":3,"file":"tanstack.d.ts","names":[],"sources":["../../src/provider/tanstack.tsx"],"mappings":";;;;;;UAMiB,iBAAA,SAA0B,cAAA,QAAsB,cAAA;;;AAAjE;EAIE,UAAA;IACE,IAAA,GAAO,SAAA;IACP,KAAA,GAAQ,SAAA;EAAA;AAAA;AAAA,iBAII,YAAA,CAAA;EAAe,UAAA;EAAA,GAAe;AAAA,GAAS,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/provider/waku.d.ts

@@ -1,7 +1,7 @@
 import { RootProvider as RootProvider$1 } from "./base.js";
-import { Framework } from "@hanzo/docs-core/framework";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
 import { ComponentProps } from "react";
+import { Framework } from "@hanzo/docs-core/framework";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/provider/waku.d.ts
 interface RootProviderProps extends ComponentProps<typeof RootProvider$1> {
@@ -16,7 +16,7 @@ interface RootProviderProps extends ComponentProps<typeof RootProvider$1> {
 declare function RootProvider({
   components,
   ...props
-}: RootProviderProps): react_jsx_runtime12.JSX.Element;
+}: RootProviderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { RootProvider, RootProviderProps };
 //# sourceMappingURL=waku.d.ts.map

package/dist/provider/waku.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"waku.d.ts","names":[],"sources":["../../src/provider/waku.tsx"],"sourcesContent":[],"mappings":";;;;;;UAMiB,iBAAA,SAA0B,sBAAsB;;;AAAjE;EAAiE,UAAA,CAAA,EAAA;IAKtD,IAAA,CAAA,EAAA,SAAA,CAAA,MAAA,CAAA;IACC,KAAA,CAAA,EAAA,SAAA,CAAA,OAAA,CAAA;EAN+B,CAAA;;AAU3B,iBAAA,YAAA,CAAY;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAA2B,iBAA3B,CAAA,EAA4C,mBAAA,CAAA,GAAA,CAAA,OAA5C"}
+{"version":3,"file":"waku.d.ts","names":[],"sources":["../../src/provider/waku.tsx"],"mappings":";;;;;;UAMiB,iBAAA,SAA0B,cAAA,QAAsB,cAAA;;;AAAjE;EAIE,UAAA;IACE,IAAA,GAAO,SAAA;IACP,KAAA,GAAQ,SAAA;EAAA;AAAA;AAAA,iBAII,YAAA,CAAA;EAAe,UAAA;EAAA,GAAe;AAAA,GAAS,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/style.css

@@ -32,6 +32,7 @@
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-xs: 4px;
     --blur-sm: 8px;
+    --blur-md: 12px;
     --blur-lg: 16px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -231,9 +232,6 @@
   .invisible {
     visibility: hidden;
   }
-  .visible {
-    visibility: visible;
-  }
   .fd-step {
     &:before {
       background-color: var(--color-fd-secondary);
@@ -350,6 +348,9 @@
   .bottom-1\.5 {
     bottom: calc(var(--spacing) * 1.5);
   }
+  .bottom-26 {
+    bottom: calc(var(--spacing) * 26);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -425,6 +426,9 @@
   .-ms-1\.5 {
     margin-inline-start: calc(var(--spacing) * -1.5);
   }
+  .ms-1 {
+    margin-inline-start: calc(var(--spacing) * 1);
+  }
   .ms-2 {
     margin-inline-start: calc(var(--spacing) * 2);
   }
@@ -950,6 +954,12 @@
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
+  .h-8\.5 {
+    height: calc(var(--spacing) * 8.5);
+  }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
   .h-9\.5 {
     height: calc(var(--spacing) * 9.5);
   }
@@ -992,6 +1002,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .min-h-11 {
+    min-height: calc(var(--spacing) * 11);
+  }
   .w-\(--anchor-width\) {
     width: var(--anchor-width);
   }
@@ -1028,6 +1041,9 @@
   .w-\[calc\(100\%-1rem\)\] {
     width: calc(100% - 1rem);
   }
+  .w-\[calc\(100\%-var\(--removed-body-scroll-bar-size\,0px\)\)\] {
+    width: calc(100% - var(--removed-body-scroll-bar-size,0px));
+  }
   .w-fit {
     width: fit-content;
   }
@@ -1073,6 +1089,9 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-svw {
+    max-width: 100svw;
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1106,6 +1125,10 @@
     --tw-translate-x: calc(var(--spacing) * 2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-\[calc\(-50\%-var\(--removed-body-scroll-bar-size\,0px\)\/2\)\] {
+    --tw-translate-x: calc(-50% - var(--removed-body-scroll-bar-size,0px) / 2);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1127,6 +1150,9 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-fd-fade-in {
+    animation: var(--animate-fd-fade-in);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1248,6 +1274,9 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
   .overscroll-contain {
     overscroll-behavior: contain;
   }
@@ -1284,6 +1313,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .border-s {
     border-inline-start-style: var(--tw-border-style);
     border-inline-start-width: 1px;
@@ -1335,6 +1368,12 @@
   .bg-fd-background {
     background-color: var(--color-fd-background);
   }
+  .bg-fd-background\/60 {
+    background-color: color-mix(in srgb, hsl(0, 0%, 96%) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-background) 60%, transparent);
+    }
+  }
   .bg-fd-background\/80 {
     background-color: color-mix(in srgb, hsl(0, 0%, 96%) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1368,6 +1407,12 @@
       background-color: color-mix(in oklab, var(--color-fd-popover) 60%, transparent);
     }
   }
+  .bg-fd-popover\/80 {
+    background-color: color-mix(in srgb, hsl(0, 0%, 98%) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-fd-popover) 80%, transparent);
+    }
+  }
   .bg-fd-primary {
     background-color: var(--color-fd-primary);
   }
@@ -1392,6 +1437,9 @@
   .mask-\[linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
   }
+  .mask-\[linear-gradient\(to_bottom\,transparent\,white_calc\(var\(--spacing\)\*14\)\,white_calc\(100\%-var\(--spacing\)\*14\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - var(--spacing) * 14),transparent);
+  }
   .fill-\(--callout-color\) {
     fill: var(--callout-color);
   }
@@ -1428,6 +1476,12 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .px-0\.5 {
+    padding-inline: calc(var(--spacing) * 0.5);
+  }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1446,6 +1500,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1470,9 +1527,15 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
   .ps-1 {
     padding-inline-start: calc(var(--spacing) * 1);
   }
@@ -1515,6 +1578,9 @@
   .pt-12 {
     padding-top: calc(var(--spacing) * 12);
   }
+  .pr-\(--removed-body-scroll-bar-size\,0\) {
+    padding-right: var(--removed-body-scroll-bar-size,0);
+  }
   .pb-1\.5 {
     padding-bottom: calc(var(--spacing) * 1.5);
   }
@@ -1524,6 +1590,9 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-24 {
+    padding-bottom: calc(var(--spacing) * 24);
+  }
   .text-center {
     text-align: center;
   }
@@ -1679,6 +1748,11 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1874,6 +1948,16 @@
       flex-direction: column;
     }
   }
+  .\*\:rounded-full {
+    :is(& > *) {
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .\*\:rounded-lg {
+    :is(& > *) {
+      border-radius: var(--radius-lg);
+    }
+  }
   .\*\:border-b {
     :is(& > *) {
       border-bottom-style: var(--tw-border-style);
@@ -1885,6 +1969,11 @@
       margin-bottom: calc(var(--spacing) * 2);
     }
   }
+  .group-data-panel-open\:rotate-180 {
+    &:is(:where(.group)[data-panel-open] *) {
+      rotate: 180deg;
+    }
+  }
   .group-data-\[active\]\:bg-fd-primary {
     &:is(:where(.group)[data-active] *) {
       background-color: var(--color-fd-primary);
@@ -1900,11 +1989,6 @@
       rotate: 90deg;
     }
   }
-  .group-data-\[panel-open\]\:rotate-180 {
-    &:is(:where(.group)[data-panel-open] *) {
-      rotate: 180deg;
-    }
-  }
   .peer-hover\:opacity-100 {
     &:is(:where(.peer):hover ~ *) {
       @media (hover: hover) {
@@ -2140,6 +2224,58 @@
       color: var(--color-fd-accent-foreground);
     }
   }
+  .data-ending-style\:scale-90 {
+    &[data-ending-style] {
+      --tw-scale-x: 90%;
+      --tw-scale-y: 90%;
+      --tw-scale-z: 90%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .data-ending-style\:opacity-0 {
+    &[data-ending-style] {
+      opacity: 0%;
+    }
+  }
+  .data-ending-style\:duration-150 {
+    &[data-ending-style] {
+      --tw-duration: 150ms;
+      transition-duration: 150ms;
+    }
+  }
+  .data-instant\:transition-none {
+    &[data-instant] {
+      transition-property: none;
+    }
+  }
+  .data-open\:bg-fd-accent {
+    &[data-open] {
+      background-color: var(--color-fd-accent);
+    }
+  }
+  .data-open\:text-fd-accent-foreground {
+    &[data-open] {
+      color: var(--color-fd-accent-foreground);
+    }
+  }
+  .data-popup-open\:text-fd-primary {
+    &[data-popup-open] {
+      color: var(--color-fd-primary);
+    }
+  }
+  .data-starting-style\:scale-90 {
+    &[data-starting-style] {
+      --tw-scale-x: 90%;
+      --tw-scale-y: 90%;
+      --tw-scale-z: 90%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+  .data-starting-style\:opacity-0 {
+    &[data-starting-style] {
+      opacity: 0%;
+    }
+  }
   .data-\[active\]\:border-fd-primary {
     &[data-active] {
       border-color: var(--color-fd-primary);
@@ -2261,25 +2397,11 @@
       height: calc(var(--spacing) * 0);
     }
   }
-  .data-\[ending-style\]\:scale-90 {
-    &[data-ending-style] {
-      --tw-scale-x: 90%;
-      --tw-scale-y: 90%;
-      --tw-scale-z: 90%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
   .data-\[ending-style\]\:opacity-0 {
     &[data-ending-style] {
       opacity: 0%;
     }
   }
-  .data-\[ending-style\]\:duration-150 {
-    &[data-ending-style] {
-      --tw-duration: 150ms;
-      transition-duration: 150ms;
-    }
-  }
   .data-\[ending-style\]\:data-\[activation-direction\=left\]\:translate-x-1\/2 {
     &[data-ending-style] {
       &[data-activation-direction="left"] {
@@ -2301,11 +2423,6 @@
       display: none;
     }
   }
-  .data-\[instant\]\:transition-none {
-    &[data-instant] {
-      transition-property: none;
-    }
-  }
   .data-\[open\]\:animate-fd-dialog-in {
     &[data-open] {
       animation: var(--animate-fd-dialog-in);
@@ -2321,34 +2438,11 @@
       animation: var(--animate-fd-popover-in);
     }
   }
-  .data-\[open\]\:bg-fd-accent {
-    &[data-open] {
-      background-color: var(--color-fd-accent);
-    }
-  }
-  .data-\[open\]\:text-fd-accent-foreground {
-    &[data-open] {
-      color: var(--color-fd-accent-foreground);
-    }
-  }
-  .data-\[popup-open\]\:text-fd-primary {
-    &[data-popup-open] {
-      color: var(--color-fd-primary);
-    }
-  }
   .data-\[starting-style\]\:h-0 {
     &[data-starting-style] {
       height: calc(var(--spacing) * 0);
     }
   }
-  .data-\[starting-style\]\:scale-90 {
-    &[data-starting-style] {
-      --tw-scale-x: 90%;
-      --tw-scale-y: 90%;
-      --tw-scale-z: 90%;
-      scale: var(--tw-scale-x) var(--tw-scale-y);
-    }
-  }
   .data-\[starting-style\]\:opacity-0 {
     &[data-starting-style] {
       opacity: 0%;
@@ -2454,11 +2548,42 @@
       display: none;
     }
   }
+  .sm\:bottom-6 {
+    @media (width >= 40rem) {
+      bottom: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:hidden {
     @media (width >= 40rem) {
       display: none;
     }
   }
+  .sm\:max-w-\[380px\] {
+    @media (width >= 40rem) {
+      max-width: 380px;
+    }
+  }
+  .sm\:max-w-\[400px\] {
+    @media (width >= 40rem) {
+      max-width: 400px;
+    }
+  }
+  .sm\:rounded-2xl {
+    @media (width >= 40rem) {
+      border-radius: var(--radius-2xl);
+    }
+  }
+  .sm\:border {
+    @media (width >= 40rem) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .sm\:p-1 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 1);
+    }
+  }
   .md\:top-\[calc\(50\%-250px\)\] {
     @media (width >= 48rem) {
       top: calc(50% - 250px);
@@ -2527,6 +2652,12 @@
       align-items: center;
     }
   }
+  .lg\:text-sm {
+    @media (width >= 64rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
   .xl\:hidden {
     @media (width >= 80rem) {
       display: none;
@@ -2581,41 +2712,41 @@
     }
   }
   .layout\:\[--fd-header-height\:--spacing\(14\)\] {
-    #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+    #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
       --fd-header-height: calc(var(--spacing) * 14);
     }
   }
   .max-xl\:layout\:\[--fd-toc-popover-height\:--spacing\(10\)\] {
     @media (width < 80rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-toc-popover-height: calc(var(--spacing) * 10);
       }
     }
   }
   .max-md\:layout\:\[--fd-header-height\:--spacing\(14\)\] {
     @media (width < 48rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-header-height: calc(var(--spacing) * 14);
       }
     }
   }
   .md\:layout\:\[--fd-sidebar-width\:268px\] {
     @media (width >= 48rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-sidebar-width: 268px;
       }
     }
   }
   .lg\:layout\:\[--fd-header-height\:--spacing\(24\)\] {
     @media (width >= 64rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-header-height: calc(var(--spacing) * 24);
       }
     }
   }
   .xl\:layout\:\[--fd-toc-width\:268px\] {
     @media (width >= 80rem) {
-      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&) {
+      #nd-docs-layout:has(&), #nd-notebook-layout:has(&), #nd-home-layout:has(&), #nd-flux-layout:has(&) {
         --fd-toc-width: 268px;
       }
     }

package/dist/utils/cn.js

@@ -0,0 +1,3 @@
+import { twMerge as cn } from "tailwind-merge";
+
+export { cn };

package/dist/utils/link-item.d.ts

@@ -0,0 +1,86 @@
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/utils/link-item.d.ts
+interface Filterable {
+  /**
+   * Restrict where the item is displayed
+   *
+   * @defaultValue 'all'
+   */
+  on?: 'menu' | 'nav' | 'all';
+}
+interface WithHref {
+  url: string;
+  /**
+   * When the item is marked as active
+   *
+   * @defaultValue 'url'
+   */
+  active?: 'url' | 'nested-url' | 'none';
+  external?: boolean;
+}
+interface MainItemType extends WithHref, Filterable {
+  type?: 'main';
+  icon?: ReactNode;
+  text: ReactNode;
+  description?: ReactNode;
+}
+interface IconItemType extends WithHref, Filterable {
+  type: 'icon';
+  /**
+   * `aria-label` of icon button
+   */
+  label?: string;
+  icon: ReactNode;
+  text: ReactNode;
+  /**
+   * @defaultValue true
+   */
+  secondary?: boolean;
+}
+interface ButtonItemType extends WithHref, Filterable {
+  type: 'button';
+  icon?: ReactNode;
+  text: ReactNode;
+  /**
+   * @defaultValue false
+   */
+  secondary?: boolean;
+}
+interface MenuItemType extends Partial<WithHref>, Filterable {
+  type: 'menu';
+  icon?: ReactNode;
+  text: ReactNode;
+  items: ((MainItemType & {
+    /**
+     * Options when displayed on navigation menu
+     */
+    menu?: ComponentProps<'a'> & {
+      banner?: ReactNode;
+    };
+  }) | CustomItemType)[];
+  /**
+   * @defaultValue false
+   */
+  secondary?: boolean;
+}
+interface CustomItemType extends Filterable {
+  type: 'custom';
+  /**
+   * @defaultValue false
+   */
+  secondary?: boolean;
+  children: ReactNode;
+}
+type LinkItemType = MainItemType | IconItemType | ButtonItemType | MenuItemType | CustomItemType;
+declare function LinkItem({
+  ref,
+  item,
+  ...props
+}: Omit<ComponentProps<'a'>, 'href'> & {
+  item: WithHref;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType };
+//# sourceMappingURL=link-item.d.ts.map

package/dist/utils/link-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-item.d.ts","names":[],"sources":["../../src/utils/link-item.tsx"],"mappings":";;;;UAMU,UAAA;;;AAL6C;;;EAWrD,EAAA;AAAA;AAAA,UAGQ,QAAA;EACR,GAAA;;;;;;EAMA,MAAA;EACA,QAAA;AAAA;AAAA,UAGe,YAAA,SAAqB,QAAA,EAAU,UAAA;EAC9C,IAAA;EACA,IAAA,GAAO,SAAA;EACP,IAAA,EAAM,SAAA;EACN,WAAA,GAAc,SAAA;AAAA;AAAA,UAGC,YAAA,SAAqB,QAAA,EAAU,UAAA;EAC9C,IAAA;EARwD;;;EAYxD,KAAA;EACA,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,SAAA;EAXN;;;EAeA,SAAA;AAAA;AAAA,UAGe,cAAA,SAAuB,QAAA,EAAU,UAAA;EAChD,IAAA;EACA,IAAA,GAAO,SAAA;EACP,IAAA,EAAM,SAAA;EAXA;;;EAeN,SAAA;AAAA;AAAA,UAGe,YAAA,SAAqB,OAAA,CAAQ,QAAA,GAAW,UAAA;EACvD,IAAA;EACA,IAAA,GAAO,SAAA;EACP,IAAA,EAAM,SAAA;EAEN,KAAA,IACK,YAAA;IAxBL;;;IA4BM,IAAA,GAAO,cAAA;MACL,MAAA,GAAS,SAAA;IAAA;EAAA,KAGb,cAAA;EAxBW;;;EA8Bf,SAAA;AAAA;AAAA,UAGe,cAAA,SAAuB,UAAA;EACtC,IAAA;EAlC0D;;;EAsC1D,SAAA;EACA,QAAA,EAAU,SAAA;AAAA;AAAA,KAGA,YAAA,GACR,YAAA,GACA,YAAA,GACA,cAAA,GACA,YAAA,GACA,cAAA;AAAA,iBAEY,QAAA,CAAA;EACd,GAAA;EACA,IAAA;EAAA,GACG;AAAA,GACF,IAAA,CAAK,cAAA;EAAiC,IAAA,EAAM,QAAA;AAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/utils/link-item.js

@@ -0,0 +1,25 @@
+'use client';
+
+import { isActive } from "./urls.js";
+import { usePathname } from "@hanzo/docs-core/framework";
+import { jsx } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
+
+//#region src/utils/link-item.tsx
+function LinkItem({ ref, item, ...props }) {
+	const pathname = usePathname();
+	const activeType = item.active ?? "url";
+	const active = activeType !== "none" && isActive(item.url, pathname, activeType === "nested-url");
+	return /* @__PURE__ */ jsx(Link, {
+		ref,
+		href: item.url,
+		external: item.external,
+		...props,
+		"data-active": active,
+		children: props.children
+	});
+}
+
+//#endregion
+export { LinkItem };
+//# sourceMappingURL=link-item.js.map