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

package/dist/tailwind/forms.css

@@ -0,0 +1 @@
+@newui forms;

package/dist/tailwind/foundations.css

@@ -0,0 +1 @@
+@newui foundations;

package/dist/tailwind/layout.css

@@ -0,0 +1 @@
+@newui layout;

package/dist/tailwind/navigation.css

@@ -0,0 +1 @@
+@newui navigation;

package/dist/tailwind/overlays.css

@@ -0,0 +1 @@
+@newui overlays;

package/dist/tailwind/preset.css

@@ -0,0 +1,138 @@
+/* Shared by the prefixed components and the optional application preset. */
+@theme inline {
+  --default-font-family: var(--nui-font-sans);
+  --default-mono-font-family: var(--nui-font-mono);
+  --text-xs: var(--nui-font-size-xs);
+  --text-sm: var(--nui-font-size-sm);
+  --text-base: var(--nui-font-size-base);
+  --text-lg: var(--nui-font-size-lg);
+  --text-xl: var(--nui-font-size-xl);
+  --text-2xl: var(--nui-font-size-2xl);
+  --text-3xl: var(--nui-font-size-3xl);
+  --text-4xl: var(--nui-font-size-4xl);
+  --text-5xl: var(--nui-font-size-5xl);
+  --text-display-sm: var(--nui-font-size-display-sm);
+  --text-display-md: var(--nui-font-size-display-md);
+  --spacing: var(--nui-space-unit);
+  --default-transition-duration: var(--nui-motion-duration);
+  --default-transition-timing-function: var(--nui-motion-easing);
+  --font-sans: var(--nui-font-sans);
+  --font-mono: var(--nui-font-mono);
+  --font-weight-normal: var(--nui-font-weight-normal);
+  --font-weight-medium: var(--nui-font-weight-medium);
+  --font-weight-semibold: var(--nui-font-weight-semibold);
+  --leading-tight: var(--nui-leading-tight);
+  --leading-snug: var(--nui-leading-snug);
+  --leading-normal: var(--nui-leading-normal);
+  --leading-relaxed: var(--nui-leading-relaxed);
+  --tracking-tight: var(--nui-tracking-tight);
+  --radius-xs: var(--nui-radius-xs);
+  --radius-sm: var(--nui-radius-sm);
+  --radius-md: var(--nui-radius-md);
+  --radius-lg: var(--nui-radius-lg);
+  --radius-xl: var(--nui-radius-xl);
+  --radius-2xl: var(--nui-radius-2xl);
+  --radius-3xl: var(--nui-radius-3xl);
+  --radius-4xl: var(--nui-radius-4xl);
+  --color-background: var(--nui-background);
+  --color-focus-ring: var(--nui-focus-ring);
+  --color-muted: var(--nui-muted);
+  --color-foreground: var(--nui-foreground);
+  --color-muted-foreground: var(--nui-muted-foreground);
+  --color-surface: var(--nui-surface);
+  --color-border: var(--nui-border);
+  --color-control-border: var(--nui-control-border);
+  --color-control-border-hover: var(--nui-control-border-hover);
+  --color-disabled-background: var(--nui-disabled-background);
+  --color-disabled-foreground: var(--nui-disabled-foreground);
+  --color-disabled-border: var(--nui-disabled-border);
+  --color-primary: var(--nui-primary);
+  --color-primary-hover: var(--nui-primary-hover);
+  --color-primary-soft: var(--nui-primary-soft);
+  --color-primary-soft-hover: var(--nui-primary-soft-hover);
+  --color-primary-soft-active: var(--nui-primary-soft-active);
+  --color-primary-border: var(--nui-primary-border);
+  --color-primary-border-hover: var(--nui-primary-border-hover);
+  --color-primary-text: var(--nui-primary-text);
+  --color-primary-text-strong: var(--nui-primary-text-strong);
+  --color-primary-focus: var(--nui-primary-focus);
+  --color-on-primary: var(--nui-on-primary);
+  --color-neutral: var(--nui-neutral);
+  --color-neutral-hover: var(--nui-neutral-hover);
+  --color-neutral-soft: var(--nui-neutral-soft);
+  --color-neutral-soft-hover: var(--nui-neutral-soft-hover);
+  --color-neutral-soft-active: var(--nui-neutral-soft-active);
+  --color-neutral-border: var(--nui-neutral-border);
+  --color-neutral-border-hover: var(--nui-neutral-border-hover);
+  --color-neutral-text: var(--nui-neutral-text);
+  --color-neutral-text-strong: var(--nui-neutral-text-strong);
+  --color-neutral-focus: var(--nui-neutral-focus);
+  --color-on-neutral: var(--nui-on-neutral);
+  --color-info: var(--nui-info);
+  --color-info-hover: var(--nui-info-hover);
+  --color-info-soft: var(--nui-info-soft);
+  --color-info-soft-hover: var(--nui-info-soft-hover);
+  --color-info-soft-active: var(--nui-info-soft-active);
+  --color-info-border: var(--nui-info-border);
+  --color-info-border-hover: var(--nui-info-border-hover);
+  --color-info-text: var(--nui-info-text);
+  --color-info-text-strong: var(--nui-info-text-strong);
+  --color-info-focus: var(--nui-info-focus);
+  --color-on-info: var(--nui-on-info);
+  --color-success: var(--nui-success);
+  --color-success-hover: var(--nui-success-hover);
+  --color-success-soft: var(--nui-success-soft);
+  --color-success-soft-hover: var(--nui-success-soft-hover);
+  --color-success-soft-active: var(--nui-success-soft-active);
+  --color-success-border: var(--nui-success-border);
+  --color-success-border-hover: var(--nui-success-border-hover);
+  --color-success-text: var(--nui-success-text);
+  --color-success-text-strong: var(--nui-success-text-strong);
+  --color-success-focus: var(--nui-success-focus);
+  --color-on-success: var(--nui-on-success);
+  --color-warning: var(--nui-warning);
+  --color-warning-hover: var(--nui-warning-hover);
+  --color-warning-soft: var(--nui-warning-soft);
+  --color-warning-soft-hover: var(--nui-warning-soft-hover);
+  --color-warning-soft-active: var(--nui-warning-soft-active);
+  --color-warning-border: var(--nui-warning-border);
+  --color-warning-border-hover: var(--nui-warning-border-hover);
+  --color-warning-text: var(--nui-warning-text);
+  --color-warning-text-strong: var(--nui-warning-text-strong);
+  --color-warning-focus: var(--nui-warning-focus);
+  --color-on-warning: var(--nui-on-warning);
+  --color-danger: var(--nui-danger);
+  --color-danger-hover: var(--nui-danger-hover);
+  --color-danger-soft: var(--nui-danger-soft);
+  --color-danger-soft-hover: var(--nui-danger-soft-hover);
+  --color-danger-soft-active: var(--nui-danger-soft-active);
+  --color-danger-border: var(--nui-danger-border);
+  --color-danger-border-hover: var(--nui-danger-border-hover);
+  --color-danger-text: var(--nui-danger-text);
+  --color-danger-text-strong: var(--nui-danger-text-strong);
+  --color-danger-focus: var(--nui-danger-focus);
+  --color-on-danger: var(--nui-on-danger);
+  --shadow-elevated: var(--nui-elevated-shadow);
+  --shadow-overlay: var(--nui-overlay-shadow);
+  --shadow-popover: var(--nui-popover-shadow);
+  --shadow-tooltip: var(--nui-tooltip-shadow);
+  --shadow-hover-card: var(--nui-hover-card-shadow);
+  --shadow-toast: var(--nui-toast-shadow);
+  --ease-ui: var(--nui-motion-easing);
+}
+
+@custom-variant motion-reduce {
+  @media (prefers-reduced-motion: reduce) {
+    @slot;
+  }
+  &:where([data-motion="reduced"], [data-motion="reduced"] *) {
+    @slot;
+  }
+}
+
+@utility focus-ring {
+  outline: var(--nui-focus-width) solid var(--nui-focus-ring);
+  outline-offset: var(--nui-focus-offset);
+}
+
+@newui foundations;

package/dist/tailwind/source/actions/button/button.css

@@ -0,0 +1,55 @@
+@layer components {
+  .nui-button-content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    min-width: 0;
+  }
+  .nui-button-icon {
+    display: inline-flex;
+    flex: none;
+  }
+  .nui-button-icon > svg {
+    width: var(--nui-button-icon-size);
+    height: var(--nui-button-icon-size);
+  }
+  .nui-button-spinner {
+    position: absolute;
+    width: var(--nui-button-icon-size);
+    height: var(--nui-button-icon-size);
+    border: 2px solid currentColor;
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    animation: nui-button-spin 0.7s linear infinite;
+  }
+  @keyframes nui-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nui-button-spinner {
+      animation: none;
+    }
+  }
+  [data-motion="reduced"] .nui-button-spinner {
+    animation: none;
+  }
+  .nui-button[data-nui-button-variant="solid"]:enabled:active:not([data-state="open"]) {
+    filter: var(--nui-button-solid-active-filter);
+  }
+}
+
+@layer utilities {
+  .nui-button[data-nui-button]:disabled {
+    background: var(--nui-disabled-background);
+    color: var(--nui-disabled-foreground);
+    border-color: var(--nui-disabled-border);
+    text-decoration: none;
+    box-shadow: none;
+  }
+  .nui-button[data-icon-only="true"] {
+    padding-inline: 0;
+  }
+}

package/dist/tailwind/source/actions/button/button.recipe.ts

@@ -0,0 +1,62 @@
+import { tv } from "tailwind-variants/lite";
+
+export const buttonRecipe = tv({
+  base: "nui-button nui:relative nui:inline-flex nui:shrink-0 nui:items-center nui:justify-center nui:gap-2 nui:border nui:font-medium nui:leading-none nui:cursor-pointer nui:select-none nui:transition-colors nui:motion-reduce:transition-none 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-[var(--nui-button-focus)] nui:disabled:cursor-not-allowed",
+  variants: {
+    variant: {
+      solid:
+        "nui:border-transparent nui:bg-[var(--nui-button-color)] nui:text-[var(--nui-button-on-color)] nui:enabled:hover:bg-[var(--nui-button-hover)] nui:enabled:active:bg-[var(--nui-button-hover)] nui:aria-pressed:bg-[var(--nui-button-hover)] nui:aria-pressed:border-[var(--nui-button-border-hover)]",
+      outline:
+        "nui:border-[var(--nui-button-border)] nui:bg-transparent nui:text-[var(--nui-button-text)] nui:enabled:hover:border-[var(--nui-button-border-hover)] nui:enabled:hover:bg-[var(--nui-button-soft)] nui:enabled:active:bg-[var(--nui-button-soft-active)] nui:aria-pressed:bg-[var(--nui-button-soft-active)] nui:aria-pressed:border-[var(--nui-button-border-hover)]",
+      soft: "nui:border-transparent nui:bg-[var(--nui-button-soft)] nui:text-[var(--nui-button-text)] nui:enabled:hover:bg-[var(--nui-button-soft-hover)] nui:enabled:active:bg-[var(--nui-button-soft-active)] nui:aria-pressed:bg-[var(--nui-button-soft-active)]",
+      ghost:
+        "nui:border-transparent nui:bg-transparent nui:text-[var(--nui-button-text)] nui:enabled:hover:bg-[var(--nui-button-soft)] nui:enabled:active:bg-[var(--nui-button-soft-active)] nui:aria-pressed:bg-[var(--nui-button-soft-active)]",
+      link: "nui:border-transparent nui:bg-transparent nui:text-[var(--nui-button-text)] nui:underline nui:underline-offset-4 nui:enabled:hover:text-[var(--nui-button-text-strong)] nui:enabled:active:text-[var(--nui-button-text-strong)] nui:aria-pressed:text-[var(--nui-button-text-strong)]",
+    },
+    tone: {
+      primary:
+        "nui:[--nui-button-color:var(--nui-primary)] nui:[--nui-button-hover:var(--nui-primary-hover)] nui:[--nui-button-on-color:var(--nui-on-primary)] nui:[--nui-button-soft:var(--nui-primary-soft)] nui:[--nui-button-soft-hover:var(--nui-primary-soft-hover)] nui:[--nui-button-soft-active:var(--nui-primary-soft-active)] nui:[--nui-button-border:var(--nui-primary-border)] nui:[--nui-button-border-hover:var(--nui-primary-border-hover)] nui:[--nui-button-text:var(--nui-primary-text)] nui:[--nui-button-text-strong:var(--nui-primary-text-strong)] nui:[--nui-button-focus:var(--nui-primary-focus)]",
+      neutral:
+        "nui:[--nui-button-color:var(--nui-neutral)] nui:[--nui-button-hover:var(--nui-neutral-hover)] nui:[--nui-button-on-color:var(--nui-on-neutral)] nui:[--nui-button-soft:var(--nui-neutral-soft)] nui:[--nui-button-soft-hover:var(--nui-neutral-soft-hover)] nui:[--nui-button-soft-active:var(--nui-neutral-soft-active)] nui:[--nui-button-border:var(--nui-neutral-border)] nui:[--nui-button-border-hover:var(--nui-neutral-border-hover)] nui:[--nui-button-text:var(--nui-neutral-text)] nui:[--nui-button-text-strong:var(--nui-neutral-text-strong)] nui:[--nui-button-focus:var(--nui-neutral-focus)]",
+      info: "nui:[--nui-button-color:var(--nui-info)] nui:[--nui-button-hover:var(--nui-info-hover)] nui:[--nui-button-on-color:var(--nui-on-info)] nui:[--nui-button-soft:var(--nui-info-soft)] nui:[--nui-button-soft-hover:var(--nui-info-soft-hover)] nui:[--nui-button-soft-active:var(--nui-info-soft-active)] nui:[--nui-button-border:var(--nui-info-border)] nui:[--nui-button-border-hover:var(--nui-info-border-hover)] nui:[--nui-button-text:var(--nui-info-text)] nui:[--nui-button-text-strong:var(--nui-info-text-strong)] nui:[--nui-button-focus:var(--nui-info-focus)]",
+      success:
+        "nui:[--nui-button-color:var(--nui-success)] nui:[--nui-button-hover:var(--nui-success-hover)] nui:[--nui-button-on-color:var(--nui-on-success)] nui:[--nui-button-soft:var(--nui-success-soft)] nui:[--nui-button-soft-hover:var(--nui-success-soft-hover)] nui:[--nui-button-soft-active:var(--nui-success-soft-active)] nui:[--nui-button-border:var(--nui-success-border)] nui:[--nui-button-border-hover:var(--nui-success-border-hover)] nui:[--nui-button-text:var(--nui-success-text)] nui:[--nui-button-text-strong:var(--nui-success-text-strong)] nui:[--nui-button-focus:var(--nui-success-focus)]",
+      warning:
+        "nui:[--nui-button-color:var(--nui-warning)] nui:[--nui-button-hover:var(--nui-warning-hover)] nui:[--nui-button-on-color:var(--nui-on-warning)] nui:[--nui-button-soft:var(--nui-warning-soft)] nui:[--nui-button-soft-hover:var(--nui-warning-soft-hover)] nui:[--nui-button-soft-active:var(--nui-warning-soft-active)] nui:[--nui-button-border:var(--nui-warning-border)] nui:[--nui-button-border-hover:var(--nui-warning-border-hover)] nui:[--nui-button-text:var(--nui-warning-text)] nui:[--nui-button-text-strong:var(--nui-warning-text-strong)] nui:[--nui-button-focus:var(--nui-warning-focus)]",
+      danger:
+        "nui:[--nui-button-color:var(--nui-danger)] nui:[--nui-button-hover:var(--nui-danger-hover)] nui:[--nui-button-on-color:var(--nui-on-danger)] nui:[--nui-button-soft:var(--nui-danger-soft)] nui:[--nui-button-soft-hover:var(--nui-danger-soft-hover)] nui:[--nui-button-soft-active:var(--nui-danger-soft-active)] nui:[--nui-button-border:var(--nui-danger-border)] nui:[--nui-button-border-hover:var(--nui-danger-border-hover)] nui:[--nui-button-text:var(--nui-danger-text)] nui:[--nui-button-text-strong:var(--nui-danger-text-strong)] nui:[--nui-button-focus:var(--nui-danger-focus)]",
+    },
+    size: {
+      xs: "nui:h-[var(--nui-control-height-xs)] nui:px-2 nui:text-xs nui:[--nui-button-icon-size:0.75rem]",
+      sm: "nui:h-[var(--nui-control-height-sm)] nui:px-3 nui:text-sm nui:[--nui-button-icon-size:1rem]",
+      md: "nui:h-[var(--nui-control-height-md)] nui:px-4 nui:text-base nui:[--nui-button-icon-size:1.25rem]",
+      lg: "nui:h-[var(--nui-control-height-lg)] nui:px-6 nui:text-lg nui:[--nui-button-icon-size:1.5rem]",
+    },
+    rounded: { true: "nui:rounded-full", false: "nui:rounded-md" },
+    fullWidth: { true: "nui:w-full" },
+    responsive: { true: "" },
+    iconOnly: { true: "nui:aspect-square" },
+  },
+  compoundVariants: [
+    {
+      responsive: true,
+      size: "sm",
+      class:
+        "nui:max-sm:h-[var(--nui-control-height-xs)] nui:max-sm:px-2 nui:max-sm:text-xs nui:max-sm:[--nui-button-icon-size:0.75rem]",
+    },
+    {
+      responsive: true,
+      size: "md",
+      class:
+        "nui:max-sm:h-[var(--nui-control-height-sm)] nui:max-sm:px-3 nui:max-sm:text-sm nui:max-sm:[--nui-button-icon-size:1rem]",
+    },
+    {
+      responsive: true,
+      size: "lg",
+      class:
+        "nui:max-sm:h-[var(--nui-control-height-md)] nui:max-sm:px-4 nui:max-sm:text-base nui:max-sm:[--nui-button-icon-size:1.25rem]",
+    },
+    { responsive: true, iconOnly: true, class: "nui:max-sm:px-0" },
+  ],
+  defaultVariants: { variant: "solid", tone: "primary", size: "md", rounded: false },
+});

package/dist/tailwind/source/actions/button/button.styles.css

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

package/dist/tailwind/source/actions/button-group/button-group.css

@@ -0,0 +1,32 @@
+/* Utilities layer keeps joined corners above individual radius utilities. */
+@layer utilities {
+  .nui-button-group[data-attached="true"] > [data-nui-button] {
+    border-radius: 0;
+  }
+  .nui-button-group[data-attached="true"][data-orientation="horizontal"] {
+    & > [data-nui-button]:first-child {
+      border-start-start-radius: 0.375rem;
+      border-end-start-radius: 0.375rem;
+    }
+    & > [data-nui-button]:last-child {
+      border-start-end-radius: 0.375rem;
+      border-end-end-radius: 0.375rem;
+    }
+    & > [data-nui-button] + [data-nui-button] {
+      margin-inline-start: -1px;
+    }
+  }
+  .nui-button-group[data-attached="true"][data-orientation="vertical"] {
+    & > [data-nui-button]:first-child {
+      border-start-start-radius: 0.375rem;
+      border-start-end-radius: 0.375rem;
+    }
+    & > [data-nui-button]:last-child {
+      border-end-start-radius: 0.375rem;
+      border-end-end-radius: 0.375rem;
+    }
+    & > [data-nui-button] + [data-nui-button] {
+      margin-block-start: -1px;
+    }
+  }
+}

package/dist/tailwind/source/actions/button-group/button-group.recipe.ts

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants/lite";
+
+export const buttonGroupRecipe = tv({
+  base: "nui-button-group nui:flex nui:min-w-0",
+  variants: {
+    orientation: {
+      horizontal: "nui:flex-row nui:items-center",
+      vertical: "nui:w-fit nui:flex-col nui:items-stretch",
+    },
+    align: { start: "nui:justify-start", center: "nui:justify-center", end: "nui:justify-end" },
+    attached: { true: "nui:gap-0 nui:flex-nowrap", false: "nui:gap-2" },
+    fullWidth: {
+      true: "nui:w-full nui:[&>[data-nui-button]]:min-w-0 nui:[&>[data-nui-button]]:flex-1",
+    },
+  },
+  compoundVariants: [{ orientation: "horizontal", attached: false, class: "nui:flex-wrap" }],
+  defaultVariants: { orientation: "horizontal", align: "start", attached: false },
+});

package/dist/tailwind/source/actions/button-group/button-group.styles.css

@@ -0,0 +1,5 @@
+@import "../../styles/foundations.css";
+@import "../button/button.styles.css";
+@import "./button-group.css";
+
+@source "./button-group.recipe.ts";

package/dist/tailwind/source/actions/context-menu/context-menu.styles.css

@@ -0,0 +1,2 @@
+@import "../../styles/foundations.css";
+@import "../menu/menu.styles.css";

package/dist/tailwind/source/actions/dropdown-menu/dropdown-menu.styles.css

@@ -0,0 +1,2 @@
+@import "../../styles/foundations.css";
+@import "../menu/menu.styles.css";

package/dist/tailwind/source/actions/menu/menu.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  .nui-menu-content:not(:has([data-nui-menu-icon])) .nui-menu-icon {
+    display: none;
+  }
+}

package/dist/tailwind/source/actions/menu/menu.recipe.ts

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants/lite";
+
+export const menuRecipe = tv({
+  slots: {
+    trigger:
+      "nui:inline-flex nui:min-h-8 nui:items-center nui:justify-center nui:gap-2 nui:rounded-md nui:px-3 nui:py-1.5 nui:text-sm nui:font-medium nui:leading-snug nui:text-foreground nui:cursor-pointer nui:outline-none nui:transition-colors nui:enabled:hover:bg-[var(--nui-neutral-soft)] nui:enabled:data-[state=open]:bg-[var(--nui-neutral-soft)] 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-neutral-8)] nui:motion-reduce:transition-none",
+    positioner: "nui:z-[calc(var(--nui-z-popover)+var(--layer-index,0))]",
+    content:
+      "nui-menu-content nui:w-56 nui:max-w-[calc(100vw-2rem)] nui:max-h-[min(var(--available-height,100dvh),calc(100dvh-2rem))] nui:overflow-y-auto nui:overscroll-contain nui:rounded-lg nui:border nui:border-border nui:bg-background nui:p-1 nui:text-sm nui:text-foreground nui:shadow-[var(--nui-popover-shadow)] nui:outline-none",
+    item: "nui:flex nui:min-h-8 nui:min-w-0 nui:items-center nui:gap-2 nui:rounded-md nui:border nui:border-transparent nui:px-2 nui:py-1.5 nui:leading-snug nui:wrap-anywhere nui:cursor-default nui:select-none nui:outline-none nui:data-highlighted:bg-[var(--nui-neutral-soft)] nui:data-highlighted:text-foreground nui:data-[destructive]:text-[var(--nui-danger-text)] nui:data-[destructive]:data-highlighted:bg-[var(--nui-danger-soft)] nui:data-[destructive]:data-highlighted:text-[var(--nui-danger-text)] nui:data-disabled:cursor-not-allowed nui:data-disabled:text-[var(--nui-neutral-8)]",
+    separator: "nui:my-1 nui:border-0 nui:border-t nui:border-border",
+    groupLabel:
+      "nui:px-2 nui:py-1.5 nui:text-xs nui:font-medium nui:leading-relaxed nui:text-muted-foreground",
+    icon: "nui-menu-icon nui:inline-flex nui:size-4 nui:shrink-0 nui:items-center nui:justify-center",
+    label: "nui:min-w-0 nui:flex-1",
+  },
+});

package/dist/tailwind/source/actions/menu/menu.styles.css

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

package/dist/tailwind/source/actions/menubar/menubar.recipe.ts

@@ -0,0 +1,5 @@
+import { tv } from "tailwind-variants/lite";
+
+export const menubarRecipe = tv({
+  base: "nui:flex nui:w-fit nui:max-w-full nui:self-start nui:items-center nui:gap-1 nui:rounded-md nui:border nui:border-border nui:bg-background nui:p-1",
+});

package/dist/tailwind/source/actions/menubar/menubar.styles.css

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

package/dist/tailwind/source/compositions/action-bar/action-bar.recipe.ts

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants/lite";
+
+export const actionBarRecipe = tv({
+  slots: {
+    root: "nui:flex nui:min-w-0 nui:flex-col nui:items-stretch nui:gap-4 nui:sm:flex-row nui:sm:items-center nui:sm:justify-between",
+    content: "nui:grid nui:min-w-0 nui:flex-1 nui:gap-1",
+    actions:
+      "nui:flex nui:min-w-0 nui:flex-wrap nui:items-center nui:gap-2 nui:sm:ms-auto nui:sm:justify-end",
+  },
+  variants: {
+    variant: {
+      plain: { root: "" },
+      surface: { root: "nui:rounded-lg nui:border nui:border-border nui:bg-surface nui:p-4" },
+    },
+  },
+  defaultVariants: { variant: "plain" },
+});

package/dist/tailwind/source/compositions/action-bar/action-bar.styles.css

@@ -0,0 +1,5 @@
+@import "../../styles/foundations.css";
+@import "../../content/heading/heading.styles.css";
+@import "../../content/text/text.styles.css";
+
+@source "./action-bar.recipe.ts";

package/dist/tailwind/source/compositions/footer/footer.recipe.ts

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants/lite";
+
+export const footerRecipe = tv({
+  slots: {
+    root: "nui:border-t nui:border-border nui:py-10 nui:text-foreground nui:md:py-14",
+    content: "nui:grid nui:min-w-0 nui:gap-10 nui:md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]",
+    brand: "nui:grid nui:min-w-0 nui:content-start nui:gap-3",
+    links:
+      "nui:grid nui:min-w-0 nui:grid-cols-[repeat(auto-fit,minmax(min(100%,10rem),1fr))] nui:gap-8",
+    group: "nui:grid nui:min-w-0 nui:content-start nui:justify-items-start nui:gap-3",
+    link: "nui:rounded-sm nui:text-sm nui:text-muted-foreground nui:underline-offset-4 nui:hover:text-foreground nui:hover:underline nui:aria-[current=page]:text-foreground nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-4 nui:focus-visible:outline-focus-ring",
+    meta: "nui:mt-10 nui:flex nui:flex-wrap nui:items-center nui:justify-between nui:gap-4 nui:border-t nui:border-border nui:pt-6 nui:text-sm nui:text-muted-foreground",
+  },
+  variants: {
+    tone: { default: { root: "nui:bg-background" }, subtle: { root: "nui:bg-surface" } },
+  },
+  defaultVariants: { tone: "default" },
+});

package/dist/tailwind/source/compositions/footer/footer.styles.css

@@ -0,0 +1,5 @@
+@import "../../styles/foundations.css";
+@import "../../content/heading/heading.styles.css";
+@import "../../layout/container/container.styles.css";
+
+@source "./footer.recipe.ts";

package/dist/tailwind/source/compositions/hero/hero.recipe.ts

@@ -0,0 +1,33 @@
+import { tv } from "tailwind-variants/lite";
+
+export const heroRecipe = tv({
+  slots: {
+    root: "nui:text-foreground",
+    layout: "nui:grid nui:min-w-0 nui:items-center nui:gap-10 nui:lg:gap-16",
+    content: "nui:grid nui:min-w-0 nui:gap-6",
+    eyebrow: "nui:font-semibold nui:uppercase nui:tracking-widest",
+    title: "nui:max-w-[20ch]",
+    description: "nui:max-w-[55ch]",
+    actions: "nui:flex nui:flex-wrap nui:items-center nui:gap-3",
+    media: "nui:min-w-0 nui:overflow-hidden nui:rounded-xl nui:[&_img]:h-auto nui:[&_img]:w-full",
+  },
+  variants: {
+    tone: {
+      default: { root: "nui:bg-background" },
+      subtle: { root: "nui:bg-surface" },
+      accent: { root: "nui:bg-[var(--nui-primary-2)]" },
+    },
+    layout: {
+      stacked: { layout: "nui:grid-cols-1" },
+      split: { layout: "nui:grid-cols-1 nui:md:grid-cols-2" },
+    },
+    align: {
+      start: { content: "nui:justify-items-start nui:text-start", actions: "nui:justify-start" },
+      center: {
+        content: "nui:justify-items-center nui:text-center",
+        actions: "nui:justify-center",
+      },
+    },
+  },
+  defaultVariants: { tone: "default", layout: "stacked", align: "start" },
+});

package/dist/tailwind/source/compositions/hero/hero.styles.css

@@ -0,0 +1,7 @@
+@import "../../styles/foundations.css";
+@import "../../content/heading/heading.styles.css";
+@import "../../content/text/text.styles.css";
+@import "../../layout/container/container.styles.css";
+@import "../../layout/section/section.styles.css";
+
+@source "./hero.recipe.ts";

package/dist/tailwind/source/compositions/media-object/media-object.recipe.ts

@@ -0,0 +1,20 @@
+import { tv } from "tailwind-variants/lite";
+
+export const mediaObjectRecipe = tv({
+  slots: {
+    root: "nui:grid nui:min-w-0 nui:grid-cols-[auto_minmax(0,1fr)] nui:gap-x-4 nui:gap-y-3 nui:md:grid-cols-[auto_minmax(0,1fr)_auto]",
+    media:
+      "nui:row-span-2 nui:w-[var(--nui-media-size)] nui:shrink-0 nui:overflow-hidden nui:rounded-md nui:md:row-span-1 nui:[&_img]:h-auto nui:[&_img]:w-full",
+    content: "nui:grid nui:min-w-0 nui:content-start nui:gap-2 nui:wrap-anywhere",
+    actions: "nui:col-start-2 nui:flex nui:min-w-0 nui:flex-wrap nui:gap-2 nui:md:col-start-3",
+  },
+  variants: {
+    size: {
+      sm: { root: "nui:[--nui-media-size:2.5rem]" },
+      md: { root: "nui:[--nui-media-size:4rem]" },
+      lg: { root: "nui:[--nui-media-size:6rem]" },
+    },
+    align: { start: { root: "nui:items-start" }, center: { root: "nui:items-center" } },
+  },
+  defaultVariants: { size: "md", align: "start" },
+});

package/dist/tailwind/source/compositions/media-object/media-object.styles.css

@@ -0,0 +1,5 @@
+@import "../../styles/foundations.css";
+@import "../../content/heading/heading.styles.css";
+@import "../../content/text/text.styles.css";
+
+@source "./media-object.recipe.ts";

package/dist/tailwind/source/compositions/panel/panel-header.recipe.ts

@@ -0,0 +1,28 @@
+import { tv } from "tailwind-variants/lite";
+
+export const panelHeaderRecipe = tv({
+  base: "nui:grid nui:min-w-0 nui:gap-y-[var(--nui-header-gap)]",
+  variants: {
+    density: { default: "nui:p-5", compact: "nui:px-4 nui:py-2.5" },
+    variant: {
+      plain: "",
+      soft: "nui:bg-[var(--nui-neutral-soft)]",
+      solid:
+        "nui:bg-[var(--nui-panel-header-bg)] nui:[--nui-foreground:var(--nui-panel-header-fg)] nui:[--nui-muted-foreground:var(--nui-panel-header-fg)] nui:text-foreground nui:[--nui-focus-ring:var(--nui-panel-header-fg)]",
+    },
+    tone: {
+      neutral:
+        "nui:[--nui-panel-header-bg:var(--nui-neutral)] nui:[--nui-panel-header-fg:var(--nui-on-neutral)]",
+      primary:
+        "nui:[--nui-panel-header-bg:var(--nui-primary)] nui:[--nui-panel-header-fg:var(--nui-on-primary)]",
+      info: "nui:[--nui-panel-header-bg:var(--nui-info)] nui:[--nui-panel-header-fg:var(--nui-on-info)]",
+      success:
+        "nui:[--nui-panel-header-bg:var(--nui-success)] nui:[--nui-panel-header-fg:var(--nui-on-success)]",
+      warning:
+        "nui:[--nui-panel-header-bg:var(--nui-warning)] nui:[--nui-panel-header-fg:var(--nui-on-warning)]",
+      danger:
+        "nui:[--nui-panel-header-bg:var(--nui-danger)] nui:[--nui-panel-header-fg:var(--nui-on-danger)]",
+    },
+  },
+  defaultVariants: { variant: "plain", tone: "neutral", density: "default" },
+});

package/dist/tailwind/source/compositions/panel/panel.recipe.ts

@@ -0,0 +1,29 @@
+import { tv } from "tailwind-variants/lite";
+
+export const panelRecipe = tv({
+  slots: {
+    root: "nui:min-w-0 nui:overflow-hidden nui:rounded-xl nui:border nui:border-border nui:text-foreground",
+    bar: "nui:flex nui:min-w-0 nui:flex-wrap nui:items-center nui:justify-between nui:gap-2 nui:bg-surface nui:px-3 nui:py-2 nui:[--nui-tabs-track:var(--nui-background)] nui:[--nui-tabs-selected-bg:var(--nui-neutral-soft-active)] nui:[--nui-tabs-selected-fg:var(--nui-foreground)]",
+    barGroup:
+      "nui:flex nui:min-w-0 nui:flex-auto nui:flex-wrap nui:items-center nui:gap-x-3 nui:gap-y-2",
+    barActions: "nui:ml-auto nui:flex nui:shrink-0 nui:items-center nui:gap-1",
+    toolbar: "nui:border-t nui:border-border nui:px-5 nui:py-4",
+    body: "nui:border-t nui:border-border nui:p-5",
+    list: "nui:m-0 nui:list-none nui:p-0",
+    item: "nui:border-t nui:border-border",
+    row: "nui:flex nui:min-w-0 nui:items-center nui:justify-between nui:gap-4 nui:px-4 nui:py-3",
+    itemContent: "nui:grid nui:min-w-0 nui:flex-1 nui:gap-y-[var(--nui-header-gap)]",
+    itemTitle:
+      "nui:m-0 nui:text-sm nui:leading-snug nui:font-semibold nui:text-foreground nui:wrap-anywhere",
+    itemDescription:
+      "nui:m-0 nui:text-sm nui:leading-snug nui:text-muted-foreground nui:wrap-anywhere",
+    itemActions: "nui:flex nui:shrink-0 nui:items-center nui:gap-2",
+    link: "nui:flex nui:min-w-0 nui:flex-wrap nui:items-center nui:justify-between nui:gap-3 nui:px-5 nui:py-4 nui:text-[var(--nui-primary-text)] nui:no-underline nui:hover:bg-[var(--nui-neutral-soft)] nui:active:bg-[var(--nui-neutral-soft-active)] nui:aria-[current=page]: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",
+    footer:
+      "nui:flex nui:flex-wrap nui:items-center nui:justify-between nui:gap-3 nui:border-t nui:border-border nui:px-5 nui:py-4",
+  },
+  variants: {
+    tone: { default: { root: "nui:bg-background" }, subtle: { root: "nui:bg-surface" } },
+  },
+  defaultVariants: { tone: "default" },
+});

package/dist/tailwind/source/compositions/panel/panel.styles.css

@@ -0,0 +1,6 @@
+@import "../../styles/foundations.css";
+@import "../../content/heading/heading.styles.css";
+@import "../../content/text/text.styles.css";
+
+@source "./panel.recipe.ts";
+@source "./panel-header.recipe.ts";

package/dist/tailwind/source/content/accordion/accordion.recipe.ts

@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants/lite";
+
+export const accordionRecipe = tv({
+  slots: {
+    root: "nui:w-full nui:min-w-0 nui:overflow-hidden nui:rounded-xl nui:border nui:border-border",
+    item: "nui:min-w-0 nui:border-b nui:border-border nui:last:border-b-0",
+    heading: "nui:m-0",
+  },
+  variants: {
+    variant: { outline: { root: "nui:bg-background" }, soft: { root: "nui:bg-surface" } },
+  },
+  defaultVariants: { variant: "outline" },
+});

package/dist/tailwind/source/content/accordion/accordion.styles.css

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

package/dist/tailwind/source/content/avatar/avatar.recipe.ts

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants/lite";
+
+export const avatarRecipe = tv({
+  slots: {
+    root: "nui:relative nui:inline-flex nui:shrink-0 nui:items-center nui:justify-center nui:overflow-hidden nui:bg-[var(--nui-neutral-soft)] nui:font-medium nui:text-foreground nui:align-middle",
+    image: "nui:h-full nui:w-full nui:object-cover nui:data-[state=hidden]:hidden",
+    fallback:
+      "nui:flex nui:h-full nui:w-full nui:items-center nui:justify-center nui:leading-none nui:data-[state=hidden]:hidden",
+  },
+  variants: {
+    size: {
+      xs: { root: "nui:size-6 nui:text-[0.625rem]" },
+      sm: { root: "nui:size-8 nui:text-xs" },
+      md: { root: "nui:size-10 nui:text-sm" },
+      lg: { root: "nui:size-12 nui:text-base" },
+      xl: { root: "nui:size-16 nui:text-xl" },
+    },
+    shape: { circle: { root: "nui:rounded-full" }, square: { root: "nui:rounded-md" } },
+  },
+  defaultVariants: { size: "md", shape: "circle" },
+});

package/dist/tailwind/source/content/avatar/avatar.styles.css

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