@egcs/newui 0.0.0-stage → 0.1.0-alpha.1

package/dist/tailwind/source/foundations/tokens.css

@@ -0,0 +1,233 @@
+@import "./radix.css";
+
+/* Native color-scheme follows the OS and supports nested explicit themes. */
+:root {
+  color-scheme: light dark;
+}
+[data-nui-theme="light"] {
+  color-scheme: light;
+}
+[data-nui-theme="dark"] {
+  color-scheme: dark;
+}
+[data-nui-theme="system"] {
+  color-scheme: light dark;
+}
+
+:root,
+[data-nui-theme="system"] {
+  --nui-button-solid-active-filter: brightness(0.92) saturate(1.1);
+}
+@media (prefers-color-scheme: dark) {
+  :root,
+  [data-nui-theme="system"] {
+    --nui-button-solid-active-filter: brightness(1.08);
+  }
+}
+[data-nui-theme="light"] {
+  --nui-button-solid-active-filter: brightness(0.92) saturate(1.1);
+}
+[data-nui-theme="dark"] {
+  --nui-button-solid-active-filter: brightness(1.08);
+}
+
+:root {
+  --nui-z-overlay: 1000;
+  --nui-resizable-handle-size: 0.5rem;
+  --nui-header-gap: 0.125rem;
+  --nui-loading-track: var(--nui-slate-6);
+  --nui-progress-track: var(--nui-slate-3);
+  --nui-toast-width: 24rem;
+  --nui-toast-shadow: 0 8px 24px color-mix(in srgb, var(--nui-shadow-ink) 18%, transparent);
+  --nui-z-tooltip: 1100;
+  --nui-z-popover: 1050;
+  --nui-z-hover-card: 1050;
+  --nui-hover-card-width: 20rem;
+  --nui-hover-card-shadow: var(--nui-popover-shadow);
+  --nui-popover-width: 20rem;
+  --nui-popover-shadow: 0 8px 24px color-mix(in srgb, var(--nui-shadow-ink) 18%, transparent);
+  --nui-tooltip-background: var(--nui-slate-12);
+  --nui-tooltip-foreground: var(--nui-slate-1);
+  --nui-tooltip-shadow: 0 4px 12px color-mix(in srgb, var(--nui-shadow-ink) 16%, transparent);
+  --nui-overlay-backdrop: color-mix(
+    in srgb,
+    light-dark(var(--nui-slate-12), var(--nui-slate-1)) 72%,
+    transparent
+  );
+  --nui-overlay-shadow: 0 16px 64px
+    color-mix(in srgb, light-dark(var(--nui-slate-12), var(--nui-slate-1)) 30%, transparent);
+  --nui-background: var(--nui-slate-1);
+  --nui-surface: var(--nui-slate-2);
+  --nui-elevated-border: color-mix(in srgb, var(--nui-slate-6) 45%, var(--nui-surface));
+  --nui-elevated-shadow:
+    8px 8px 20px
+    light-dark(
+      color-mix(in srgb, var(--nui-shadow-ink) 14%, transparent),
+      color-mix(in srgb, var(--nui-shadow-ink) 50%, transparent)
+    ),
+    -6px -6px 18px
+    light-dark(
+      color-mix(in srgb, var(--nui-highlight-ink) 90%, transparent),
+      color-mix(in srgb, var(--nui-highlight-ink) 4%, transparent)
+    ),
+    inset 0 1px 0
+    light-dark(
+      color-mix(in srgb, var(--nui-highlight-ink) 90%, transparent),
+      color-mix(in srgb, var(--nui-highlight-ink) 6%, transparent)
+    );
+  --nui-foreground: var(--nui-slate-12);
+  --nui-muted-foreground: var(--nui-slate-11);
+  --nui-border: var(--nui-slate-6);
+  --nui-control-border: var(--nui-slate-7);
+  --nui-control-border-hover: var(--nui-slate-8);
+  --nui-disabled-background: var(--nui-slate-3);
+  --nui-disabled-foreground: var(--nui-slate-8);
+  --nui-disabled-border: var(--nui-slate-6);
+  --nui-focus-ring: var(--nui-blue-8);
+
+  --nui-primary-1: var(--nui-blue-1);
+  --nui-primary-2: var(--nui-blue-2);
+  --nui-primary-3: var(--nui-blue-3);
+  --nui-primary-4: var(--nui-blue-4);
+  --nui-primary-5: var(--nui-blue-5);
+  --nui-primary-6: var(--nui-blue-6);
+  --nui-primary-7: var(--nui-blue-7);
+  --nui-primary-8: var(--nui-blue-8);
+  --nui-primary-9: var(--nui-blue-9);
+  --nui-primary-10: var(--nui-blue-10);
+  --nui-primary-11: var(--nui-blue-11);
+  --nui-primary-12: var(--nui-blue-12);
+  --nui-primary: var(--nui-primary-9);
+  --nui-primary-hover: var(--nui-primary-10);
+  --nui-primary-soft: var(--nui-primary-3);
+  --nui-primary-soft-hover: var(--nui-primary-4);
+  --nui-primary-soft-active: var(--nui-primary-5);
+  --nui-primary-border: var(--nui-primary-7);
+  --nui-primary-border-hover: var(--nui-primary-8);
+  --nui-primary-text: var(--nui-primary-11);
+  --nui-primary-text-strong: var(--nui-primary-12);
+  --nui-primary-focus: var(--nui-primary-8);
+  --nui-on-primary: var(--nui-on-blue);
+
+  --nui-neutral-1: var(--nui-slate-1);
+  --nui-neutral-2: var(--nui-slate-2);
+  --nui-neutral-3: var(--nui-slate-3);
+  --nui-neutral-4: var(--nui-slate-4);
+  --nui-neutral-5: var(--nui-slate-5);
+  --nui-neutral-6: var(--nui-slate-6);
+  --nui-neutral-7: var(--nui-slate-7);
+  --nui-neutral-8: var(--nui-slate-8);
+  --nui-neutral-9: var(--nui-slate-9);
+  --nui-neutral-10: var(--nui-slate-10);
+  --nui-neutral-11: var(--nui-slate-11);
+  --nui-neutral-12: var(--nui-slate-12);
+  --nui-neutral: var(--nui-neutral-12);
+  --nui-neutral-hover: var(--nui-neutral-11);
+  --nui-neutral-soft: var(--nui-neutral-3);
+  --nui-neutral-soft-hover: var(--nui-neutral-4);
+  --nui-neutral-soft-active: var(--nui-neutral-5);
+  --nui-neutral-border: var(--nui-neutral-7);
+  --nui-neutral-border-hover: var(--nui-neutral-8);
+  --nui-neutral-text: var(--nui-neutral-11);
+  --nui-neutral-text-strong: var(--nui-neutral-12);
+  --nui-neutral-focus: var(--nui-neutral-8);
+  --nui-on-neutral: var(--nui-slate-1);
+
+  --nui-info-1: var(--nui-sky-1);
+  --nui-info-2: var(--nui-sky-2);
+  --nui-info-3: var(--nui-sky-3);
+  --nui-info-4: var(--nui-sky-4);
+  --nui-info-5: var(--nui-sky-5);
+  --nui-info-6: var(--nui-sky-6);
+  --nui-info-7: var(--nui-sky-7);
+  --nui-info-8: var(--nui-sky-8);
+  --nui-info-9: var(--nui-sky-9);
+  --nui-info-10: var(--nui-sky-10);
+  --nui-info-11: var(--nui-sky-11);
+  --nui-info-12: var(--nui-sky-12);
+  --nui-info: var(--nui-info-9);
+  --nui-info-hover: var(--nui-info-10);
+  --nui-info-soft: var(--nui-info-3);
+  --nui-info-soft-hover: var(--nui-info-4);
+  --nui-info-soft-active: var(--nui-info-5);
+  --nui-info-border: var(--nui-info-7);
+  --nui-info-border-hover: var(--nui-info-8);
+  --nui-info-text: var(--nui-info-11);
+  --nui-info-text-strong: var(--nui-info-12);
+  --nui-info-focus: var(--nui-info-8);
+  --nui-on-info: var(--nui-on-sky);
+
+  --nui-success-1: var(--nui-green-1);
+  --nui-success-2: var(--nui-green-2);
+  --nui-success-3: var(--nui-green-3);
+  --nui-success-4: var(--nui-green-4);
+  --nui-success-5: var(--nui-green-5);
+  --nui-success-6: var(--nui-green-6);
+  --nui-success-7: var(--nui-green-7);
+  --nui-success-8: var(--nui-green-8);
+  --nui-success-9: var(--nui-green-9);
+  --nui-success-10: var(--nui-green-10);
+  --nui-success-11: var(--nui-green-11);
+  --nui-success-12: var(--nui-green-12);
+  --nui-success: var(--nui-success-9);
+  --nui-success-hover: var(--nui-success-10);
+  --nui-success-soft: var(--nui-success-3);
+  --nui-success-soft-hover: var(--nui-success-4);
+  --nui-success-soft-active: var(--nui-success-5);
+  --nui-success-border: var(--nui-success-7);
+  --nui-success-border-hover: var(--nui-success-8);
+  --nui-success-text: var(--nui-success-11);
+  --nui-success-text-strong: var(--nui-success-12);
+  --nui-success-focus: var(--nui-success-8);
+  --nui-on-success: var(--nui-on-green);
+
+  --nui-warning-1: var(--nui-amber-1);
+  --nui-warning-2: var(--nui-amber-2);
+  --nui-warning-3: var(--nui-amber-3);
+  --nui-warning-4: var(--nui-amber-4);
+  --nui-warning-5: var(--nui-amber-5);
+  --nui-warning-6: var(--nui-amber-6);
+  --nui-warning-7: var(--nui-amber-7);
+  --nui-warning-8: var(--nui-amber-8);
+  --nui-warning-9: var(--nui-amber-9);
+  --nui-warning-10: var(--nui-amber-10);
+  --nui-warning-11: var(--nui-amber-11);
+  --nui-warning-12: var(--nui-amber-12);
+  --nui-warning: var(--nui-warning-9);
+  --nui-warning-hover: var(--nui-warning-10);
+  --nui-warning-soft: var(--nui-warning-3);
+  --nui-warning-soft-hover: var(--nui-warning-4);
+  --nui-warning-soft-active: var(--nui-warning-5);
+  --nui-warning-border: var(--nui-warning-7);
+  --nui-warning-border-hover: var(--nui-warning-8);
+  --nui-warning-text: var(--nui-warning-11);
+  --nui-warning-text-strong: var(--nui-warning-12);
+  --nui-warning-focus: var(--nui-warning-8);
+  --nui-on-warning: var(--nui-on-amber);
+
+  --nui-danger-1: var(--nui-red-1);
+  --nui-danger-2: var(--nui-red-2);
+  --nui-danger-3: var(--nui-red-3);
+  --nui-danger-4: var(--nui-red-4);
+  --nui-danger-5: var(--nui-red-5);
+  --nui-danger-6: var(--nui-red-6);
+  --nui-danger-7: var(--nui-red-7);
+  --nui-danger-8: var(--nui-red-8);
+  --nui-danger-9: var(--nui-red-9);
+  --nui-danger-10: var(--nui-red-10);
+  --nui-danger-11: var(--nui-red-11);
+  --nui-danger-12: var(--nui-red-12);
+  --nui-danger: var(--nui-danger-9);
+  --nui-danger-hover: var(--nui-danger-10);
+  --nui-danger-soft: var(--nui-danger-3);
+  --nui-danger-soft-hover: var(--nui-danger-4);
+  --nui-danger-soft-active: var(--nui-danger-5);
+  --nui-danger-border: var(--nui-danger-7);
+  --nui-danger-border-hover: var(--nui-danger-8);
+  --nui-danger-text: var(--nui-danger-11);
+  --nui-danger-text-strong: var(--nui-danger-12);
+  --nui-danger-focus: var(--nui-danger-8);
+  --nui-on-danger: var(--nui-on-red);
+
+  --nui-muted: var(--nui-primary-soft);
+}

package/dist/tailwind/source/layout/container/container.recipe.ts

@@ -0,0 +1,14 @@
+import { tv } from "tailwind-variants/lite";
+
+export const containerRecipe = tv({
+  base: "nui:mx-auto nui:w-full nui:min-w-0 nui:px-4 nui:sm:px-6 nui:lg:px-8",
+  variants: {
+    size: {
+      sm: "nui:max-w-3xl",
+      md: "nui:max-w-5xl",
+      lg: "nui:max-w-7xl",
+      full: "nui:max-w-none",
+    },
+  },
+  defaultVariants: { size: "lg" },
+});

package/dist/tailwind/source/layout/container/container.styles.css

@@ -0,0 +1,3 @@
+@import "../../styles/foundations.css";
+
+@source "./container.recipe.ts";

package/dist/tailwind/source/layout/resizable/resizable.css

@@ -0,0 +1,53 @@
+.nui-resizable-handle[data-orientation="horizontal"] {
+  width: var(--nui-resizable-handle-size);
+  align-self: stretch;
+}
+.nui-resizable-handle[data-orientation="vertical"] {
+  height: var(--nui-resizable-handle-size);
+  align-self: stretch;
+}
+.nui-resizable-handle::before {
+  content: "";
+  position: absolute;
+  background: var(--nui-border);
+}
+.nui-resizable-handle[data-orientation="horizontal"]::before {
+  width: 1px;
+  height: 100%;
+}
+.nui-resizable-handle[data-orientation="vertical"]::before {
+  height: 1px;
+  width: 100%;
+}
+.nui-resizable-handle:hover:not([data-disabled])::before,
+.nui-resizable-handle[data-focus]:not([data-disabled])::before,
+.nui-resizable-handle[data-dragging]::before {
+  background: var(--nui-primary-focus);
+}
+.nui-resizable-grip {
+  width: 0.75rem;
+  height: 1.5rem;
+}
+.nui-resizable-handle[data-orientation="vertical"] > .nui-resizable-grip {
+  width: 1.5rem;
+  height: 0.75rem;
+}
+.nui-resizable-handle[data-orientation="vertical"] > .nui-resizable-grip > svg {
+  rotate: 90deg;
+}
+.nui-resizable-handle[data-disabled] {
+  cursor: not-allowed;
+}
+.nui-resizable-handle[data-disabled] > .nui-resizable-grip {
+  border-color: var(--nui-disabled-border);
+  background: var(--nui-disabled-background);
+  color: var(--nui-disabled-foreground);
+}
+@media (pointer: coarse) {
+  .nui-resizable-handle[data-orientation="horizontal"] {
+    width: max(var(--nui-resizable-handle-size), 1.5rem);
+  }
+  .nui-resizable-handle[data-orientation="vertical"] {
+    height: max(var(--nui-resizable-handle-size), 1.5rem);
+  }
+}

package/dist/tailwind/source/layout/resizable/resizable.recipe.ts

@@ -0,0 +1,11 @@
+import { tv } from "tailwind-variants/lite";
+
+export const resizableRecipe = tv({
+  slots: {
+    root: "nui:min-h-0 nui:min-w-0 nui:text-foreground",
+    panel: "nui:min-h-0 nui:min-w-0",
+    handle:
+      "nui-resizable-handle nui:relative nui:flex nui:shrink-0 nui:items-center nui:justify-center nui:border-0 nui:bg-transparent nui:p-0 nui:focus-visible:z-10 nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:-outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring",
+    grip: "nui-resizable-grip nui:pointer-events-none nui:relative nui:z-1 nui:flex nui:shrink-0 nui:items-center nui:justify-center nui:rounded-sm nui:border nui:border-[var(--nui-control-border)] nui:bg-surface nui:text-muted-foreground",
+  },
+});

package/dist/tailwind/source/layout/resizable/resizable.styles.css

@@ -0,0 +1,4 @@
+@import "../../styles/foundations.css";
+@import "./resizable.css";
+
+@source "./resizable.recipe.ts";

package/dist/tailwind/source/layout/section/section.recipe.ts

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants/lite";
+
+export const sectionRecipe = tv({
+  variants: {
+    spacing: {
+      sm: "nui:py-6 nui:md:py-8",
+      md: "nui:py-10 nui:md:py-16",
+      lg: "nui:py-16 nui:md:py-24",
+    },
+  },
+  defaultVariants: { spacing: "md" },
+});

package/dist/tailwind/source/layout/section/section.styles.css

@@ -0,0 +1,3 @@
+@import "../../styles/foundations.css";
+
+@source "./section.recipe.ts";

package/dist/tailwind/source/navigation/breadcrumb/breadcrumb.css

@@ -0,0 +1,5 @@
+@layer components {
+  .nui-breadcrumb-item:first-child > .nui-breadcrumb-separator {
+    display: none;
+  }
+}

package/dist/tailwind/source/navigation/breadcrumb/breadcrumb.recipe.ts

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants/lite";
+
+export const breadcrumbRecipe = tv({
+  slots: {
+    root: "nui:min-w-0 nui:text-sm nui:leading-relaxed",
+    list: "nui:m-0 nui:flex nui:min-w-0 nui:list-none nui:flex-wrap nui:items-center nui:gap-x-2 nui:gap-y-1 nui:p-0",
+    item: "nui-breadcrumb-item nui:inline-flex nui:min-w-0 nui:max-w-full nui:items-center nui:gap-2",
+    separator: "nui-breadcrumb-separator nui:shrink-0 nui:text-muted-foreground",
+    link: "nui:min-w-0 nui:rounded-sm nui:text-muted-foreground nui:no-underline nui:wrap-anywhere nui:transition-colors nui:hover:text-foreground nui:hover:underline nui:underline-offset-4 nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring nui:motion-reduce:transition-none",
+    page: "nui:min-w-0 nui:font-medium nui:text-foreground nui:wrap-anywhere",
+  },
+});

package/dist/tailwind/source/navigation/breadcrumb/breadcrumb.styles.css

@@ -0,0 +1,4 @@
+@import "../../styles/foundations.css";
+@import "./breadcrumb.css";
+
+@source "./breadcrumb.recipe.ts";

package/dist/tailwind/source/navigation/navbar/navbar.recipe.ts

@@ -0,0 +1,20 @@
+import { tv } from "tailwind-variants/lite";
+
+export const navbarRecipe = tv({
+  slots: {
+    root: "nui-navbar nui:relative nui:z-20 nui:border-b nui:border-border nui:text-foreground",
+    frame:
+      "nui:grid nui:min-w-0 nui:grid-cols-[minmax(0,1fr)_auto] nui:items-center nui:gap-x-6 nui:md:grid-cols-[auto_minmax(0,1fr)]",
+    brand:
+      "nui:my-4 nui:min-w-0 nui:rounded-sm nui:text-xl nui:font-semibold nui:text-foreground nui:no-underline nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-4 nui:focus-visible:outline-focus-ring",
+    toggle:
+      "nui:my-3 nui:inline-flex nui:min-h-10 nui:items-center nui:justify-center nui:gap-2 nui:rounded-md nui:border nui:border-[var(--nui-control-border)] nui:px-3 nui:py-2 nui:text-sm nui:font-medium nui:cursor-pointer nui:hover:bg-[var(--nui-neutral-soft-hover)] nui:hover:border-[var(--nui-control-border-hover)] nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring nui:disabled:cursor-not-allowed nui:disabled:text-[var(--nui-disabled-foreground)] nui:md:hidden",
+    content:
+      "nui:col-span-2 nui:flex nui:min-w-0 nui:flex-col nui:gap-4 nui:pb-4 nui:md:col-span-1 nui:md:flex-row nui:md:items-center nui:md:justify-between nui:md:pb-0",
+    actions: "nui:flex nui:min-w-0 nui:flex-wrap nui:items-center nui:gap-2 nui:md:ms-auto",
+  },
+  variants: {
+    tone: { default: { root: "nui:bg-background" }, subtle: { root: "nui:bg-surface" } },
+  },
+  defaultVariants: { tone: "default" },
+});

package/dist/tailwind/source/navigation/navbar/navbar.styles.css

@@ -0,0 +1,5 @@
+@import "../../styles/foundations.css";
+@import "../../layout/container/container.styles.css";
+@import "../navigation-menu/navigation-menu.styles.css";
+
+@source "./navbar.recipe.ts";

package/dist/tailwind/source/navigation/navigation-link.recipe.ts

@@ -0,0 +1,2 @@
+export const navigationLinkBase =
+  "nui:flex nui:min-w-0 nui:items-center nui:gap-2 nui:rounded-md nui:font-medium nui:text-sm nui:text-muted-foreground nui:no-underline nui:wrap-anywhere nui:transition-colors nui:motion-reduce:transition-none nui:hover:bg-[var(--nui-neutral-soft-hover)] nui:hover:text-foreground nui:active:bg-[var(--nui-neutral-soft-active)] nui:aria-[current=page]:bg-[var(--nui-primary-soft-active)] nui:aria-[current=page]:text-[var(--nui-primary-text)] nui:aria-[current=page]:hover:bg-[var(--nui-primary-soft-active)] nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring";

package/dist/tailwind/source/navigation/navigation-link.styles.css

@@ -0,0 +1,3 @@
+@import "../styles/foundations.css";
+
+@source "./navigation-link.recipe.ts";

package/dist/tailwind/source/navigation/navigation-menu/navigation-menu.css

@@ -0,0 +1,95 @@
+.nui-navigation-menu-list[data-orientation="vertical"] {
+  flex-direction: column;
+  gap: 0.25rem;
+}
+:where(.nui-navigation-menu-list > [data-part="item"]) > .nui-navigation-menu-link,
+:where(.nui-navigation-menu-list > [data-part="item"]) > .nui-navigation-menu-trigger {
+  position: relative;
+}
+:where(.nui-navigation-menu-list > [data-part="item"])
+  > .nui-navigation-menu-link[aria-current="page"]::after,
+:where(.nui-navigation-menu-list > [data-part="item"])
+  > .nui-navigation-menu-trigger[data-state="open"]::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 2px;
+  background: var(--nui-primary);
+}
+.nui-navigation-menu-content {
+  position: absolute;
+  inset-inline-start: 0;
+  top: calc(100% + 0.375rem);
+  z-index: 30;
+  width: 16rem;
+  max-width: calc(100vw - 2rem);
+}
+.nui-navigation-menu-content[data-align="end"] {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
+.nui-navigation-menu-content[data-layout="wide"] {
+  width: 32rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+.nui-navigation-menu-trigger[data-state="open"] > svg {
+  rotate: 180deg;
+}
+.nui-navigation-menu-subtrigger[data-state="open"] > svg {
+  rotate: 90deg;
+}
+.nui-navigation-menu-content .nui-navigation-menu-link {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  border-radius: var(--nui-radius-sm);
+  padding: 0.5rem 0.75rem;
+}
+.nui-navigation-menu-content .nui-navigation-menu-link:hover,
+.nui-navigation-menu-content .nui-navigation-menu-link[aria-current="page"] {
+  background: var(--nui-neutral-soft);
+}
+.nui-navigation-submenu-positioner {
+  z-index: calc(var(--nui-z-popover) + var(--layer-index, 0));
+}
+.nui-navigation-submenu-positioner > .nui-navigation-menu-content {
+  position: relative;
+  inset: auto;
+  max-height: min(var(--available-height, 100dvh), calc(100dvh - 2rem));
+  overflow-y: auto;
+}
+@media (max-width: 47.999rem) {
+  .nui-navigation-menu > .nui-navigation-menu-list > [data-part="item"] {
+    position: static;
+  }
+  :where(.nui-navigation-menu > .nui-navigation-menu-list > [data-part="item"])
+    > .nui-navigation-menu-content {
+    max-width: 100%;
+  }
+  .nui-navigation-menu-content[data-nui-submenu],
+  .nui-navbar .nui-navigation-menu-content[data-nui-submenu] {
+    position: static;
+    width: auto;
+    margin-inline-start: 0.75rem;
+    box-shadow: none;
+  }
+  .nui-navbar .nui-navigation-menu-list {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .nui-navbar .nui-navigation-menu-trigger {
+    width: 100%;
+  }
+  .nui-navbar .nui-navigation-menu-content {
+    position: static;
+    width: 100%;
+    max-width: none;
+    margin-block: 0.25rem;
+    box-shadow: none;
+  }
+  .nui-navigation-menu-content[data-layout="wide"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/dist/tailwind/source/navigation/navigation-menu/navigation-menu.recipe.ts

@@ -0,0 +1,22 @@
+import { tv } from "tailwind-variants/lite";
+
+const focus =
+  "nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring";
+const entry = `nui:flex nui:min-w-0 nui:items-center nui:gap-2 nui:border-0 nui:bg-transparent nui:py-3 nui:text-sm nui:font-medium nui:text-muted-foreground nui:no-underline nui:wrap-anywhere nui:cursor-pointer nui:hover:text-foreground nui:aria-[current=page]:text-[var(--nui-primary-text)] ${focus}`;
+
+export const navigationMenuRecipe = tv({
+  slots: {
+    root: "nui-navigation-menu nui:relative nui:min-w-0 nui:text-foreground",
+    list: "nui-navigation-menu-list nui:flex nui:min-w-0 nui:gap-6",
+    item: "nui:relative nui:min-w-0",
+    link: `nui-navigation-menu-link ${entry}`,
+    trigger: `nui-navigation-menu-trigger ${entry} nui:justify-between nui:data-[state=open]:text-foreground nui:disabled:cursor-not-allowed nui:disabled:text-[var(--nui-disabled-foreground)] nui:[&>svg]:shrink-0`,
+    content:
+      "nui-navigation-menu-content nui:grid nui:gap-1 nui:rounded-lg nui:border nui:border-border nui:bg-background nui:p-2 nui:text-foreground nui:shadow-[var(--nui-popover-shadow)]",
+    subTrigger: `nui-navigation-menu-subtrigger ${entry} nui:w-full nui:justify-between nui:rounded-sm nui:px-3 nui:py-2 nui:hover:bg-[var(--nui-neutral-soft)] nui:data-[state=open]:bg-[var(--nui-neutral-soft)] nui:disabled:cursor-not-allowed nui:disabled:text-[var(--nui-disabled-foreground)]`,
+    group: "nui:grid nui:min-w-0 nui:content-start nui:gap-1",
+    label: "nui:px-3 nui:pb-1 nui:pt-2 nui:text-xs nui:font-semibold nui:text-muted-foreground",
+    description:
+      "nui:block nui:text-xs nui:font-normal nui:leading-relaxed nui:text-muted-foreground",
+  },
+});

package/dist/tailwind/source/navigation/navigation-menu/navigation-menu.styles.css

@@ -0,0 +1,4 @@
+@import "../../styles/foundations.css";
+@import "./navigation-menu.css";
+
+@source "./navigation-menu.recipe.ts";

package/dist/tailwind/source/navigation/pagination/pagination.recipe.ts

@@ -0,0 +1,31 @@
+import { tv } from "tailwind-variants/lite";
+
+export const paginationRecipe = tv({
+  slots: {
+    root: "nui:flex nui:w-full nui:min-w-0 nui:flex-wrap nui:items-center nui:justify-center nui:gap-x-1 nui:gap-y-2 nui:text-foreground",
+    control:
+      "nui:inline-flex nui:shrink-0 nui:items-center nui:justify-center nui:gap-2 nui:h-[var(--nui-page-size)] nui:min-w-[var(--nui-page-size)] nui:rounded-md nui:border nui:border-transparent nui:bg-transparent nui:px-2 nui:leading-none nui:text-[length:var(--nui-page-font)] nui:font-medium nui:tabular-nums nui:cursor-pointer nui:transition-colors nui:motion-reduce:transition-none nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring nui:enabled:hover:bg-[var(--nui-neutral-soft)] nui:enabled:active:bg-[var(--nui-neutral-soft-active)] nui:enabled:data-selected:bg-background nui:enabled:data-selected:text-foreground nui:enabled:data-selected:border-[var(--nui-control-border)] nui:disabled:cursor-not-allowed nui:disabled:border-[var(--nui-neutral-6)] nui:disabled:bg-[var(--nui-neutral-3)] nui:disabled:text-[var(--nui-neutral-8)]",
+    items: "nui:inline-flex nui:min-w-0 nui:items-center",
+    pages:
+      "nui-pagination-pages nui:max-sm:hidden nui:inline-flex nui:min-w-0 nui:flex-wrap nui:items-center nui:gap-1",
+    label: "nui:max-sm:hidden",
+    ellipsis:
+      "nui:inline-flex nui:h-[var(--nui-page-size)] nui:min-w-6 nui:items-center nui:justify-center nui:text-muted-foreground",
+    compactSummary:
+      "nui-pagination-summary nui:hidden nui:max-sm:inline-flex nui:px-2 nui:text-[length:var(--nui-page-font)] nui:tabular-nums",
+  },
+  variants: {
+    size: {
+      sm: {
+        root: "nui:[--nui-page-size:var(--nui-control-height-sm)] nui:[--nui-page-font:var(--nui-font-size-sm)]",
+      },
+      md: {
+        root: "nui:[--nui-page-size:var(--nui-control-height-md)] nui:[--nui-page-font:var(--nui-font-size-sm)]",
+      },
+      lg: {
+        root: "nui:[--nui-page-size:var(--nui-control-height-lg)] nui:[--nui-page-font:var(--nui-font-size-base)]",
+      },
+    },
+  },
+  defaultVariants: { size: "md" },
+});

package/dist/tailwind/source/navigation/pagination/pagination.styles.css

@@ -0,0 +1,3 @@
+@import "../../styles/foundations.css";
+
+@source "./pagination.recipe.ts";

package/dist/tailwind/source/navigation/sidebar/sidebar.css

@@ -0,0 +1,46 @@
+@layer components {
+  .nui-sidebar-root:not([data-mobile], [data-resizable]) > .nui-sidebar-panel {
+    border-inline-end: 1px solid var(--nui-border);
+  }
+  .nui-sidebar-root[data-mobile] > .nui-sidebar-panel {
+    display: none;
+  }
+  .nui-sidebar-resize-handle {
+    /* Keep the pointer target centered over the boundary without a layout gutter. */
+    margin-inline: calc(var(--nui-resizable-handle-size) * -0.5);
+    z-index: 1;
+  }
+  @media (pointer: coarse) {
+    .nui-sidebar-resize-handle {
+      margin-inline: calc(max(var(--nui-resizable-handle-size), 1.5rem) * -0.5);
+    }
+  }
+  .nui-sidebar-surface[data-collapsed] .nui-sidebar-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .nui-sidebar-surface[data-collapsed] .nui-sidebar-expanded {
+    display: none;
+  }
+  .nui-sidebar-surface[data-collapsed] .nui-vertical-menu-link {
+    justify-content: center;
+    padding-inline: 0;
+  }
+  .nui-sidebar-surface[data-collapsed] :where(a, button) {
+    flex-shrink: 0;
+  }
+  .nui-sidebar-mobile-close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 1;
+  }
+  .nui-sidebar-sheet .nui-sidebar-surface > :first-child {
+    padding-inline-end: 3.5rem;
+  }
+}

package/dist/tailwind/source/navigation/sidebar/sidebar.recipe.ts

@@ -0,0 +1,16 @@
+import { tv } from "tailwind-variants/lite";
+
+export const sidebarRecipe = tv({
+  slots: {
+    root: "nui-sidebar-root nui:w-full nui:min-h-0 nui:min-w-0 nui:bg-background nui:text-foreground",
+    panel: "nui-sidebar-panel",
+    surface:
+      "nui-sidebar-surface nui:flex nui:h-full nui:min-h-0 nui:min-w-0 nui:flex-col nui:overflow-hidden nui:bg-surface nui:text-foreground",
+    header: "nui:flex nui:shrink-0 nui:items-center nui:gap-2 nui:p-3",
+    body: "nui:min-h-0 nui:flex-1 nui:overflow-y-auto nui:overscroll-contain nui:px-2 nui:py-3",
+    footer: "nui:shrink-0 nui:border-t nui:border-border nui:p-3",
+    main: "nui:relative nui:flex nui:h-full nui:min-h-0 nui:min-w-0 nui:flex-col nui:overflow-auto nui:overscroll-contain",
+    label: "nui-sidebar-label nui:min-w-0 nui:truncate",
+    expanded: "nui-sidebar-expanded nui:min-w-0",
+  },
+});

package/dist/tailwind/source/navigation/sidebar/sidebar.styles.css

@@ -0,0 +1,8 @@
+@import "../../styles/foundations.css";
+@import "../../layout/resizable/resizable.styles.css";
+@import "../../overlays/sheet/sheet.styles.css";
+@import "../../actions/button/button.styles.css";
+@import "../vertical-menu/vertical-menu.styles.css";
+@import "./sidebar.css";
+
+@source "./sidebar.recipe.ts";