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

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

@@ -0,0 +1,53 @@
+@layer components {
+  .nui-steps-list[data-orientation="horizontal"] {
+    display: flex;
+  }
+  .nui-steps-item[data-orientation="horizontal"] {
+    flex: 1 0 10rem;
+    padding-right: 1.5rem;
+  }
+  .nui-steps-item[data-orientation="horizontal"]:last-child {
+    flex: 0 0 auto;
+    max-width: 14rem;
+    padding-right: 0;
+  }
+  .nui-steps-trigger {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  .nui-steps-trigger[data-orientation="horizontal"] {
+    flex-direction: column;
+  }
+  .nui-steps-separator[data-orientation="horizontal"] {
+    top: calc(1rem - 0.5px);
+    right: 0.5rem;
+    left: 2.5rem;
+    height: 1px;
+  }
+  .nui-steps-item[data-orientation="vertical"]:not(:last-child) {
+    padding-bottom: 1.5rem;
+  }
+  .nui-steps-separator[data-orientation="vertical"] {
+    top: 2.5rem;
+    bottom: 0.5rem;
+    left: calc(1rem - 0.5px);
+    width: 1px;
+  }
+  @media (width >= 48rem) {
+    .nui-steps[data-orientation="vertical"] {
+      grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
+    }
+    .nui-steps[data-orientation="vertical"] > .nui-steps-list {
+      grid-row: 1 / span 2;
+    }
+    .nui-steps[data-orientation="vertical"] > .nui-steps-content {
+      grid-column: 2;
+      grid-row: 1;
+    }
+    .nui-steps[data-orientation="vertical"] > .nui-steps-actions {
+      grid-column: 2;
+      grid-row: 2;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import { tv } from "tailwind-variants/lite";
+
+export const stepsRecipe = tv({
+  slots: {
+    root: "nui-steps nui:grid nui:w-full nui:min-w-0 nui:gap-6 nui:text-foreground",
+    list: "nui-steps-list nui:min-w-0 nui:overflow-x-auto nui:overscroll-x-contain nui:pb-2",
+    item: "nui-steps-item nui:relative nui:min-w-0",
+    trigger:
+      "nui-steps-trigger nui:relative nui:min-w-0 nui:max-w-full nui:rounded-md nui:text-start nui:cursor-pointer nui:outline-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:disabled:cursor-not-allowed nui:disabled:text-[var(--nui-neutral-8)]",
+    indicator:
+      "nui:relative nui:z-1 nui:flex nui:size-8 nui:shrink-0 nui:items-center nui:justify-center nui:rounded-full nui:border nui:border-border nui:bg-surface nui:text-sm nui:font-medium nui:tabular-nums nui:text-muted-foreground nui:data-current:border-[var(--nui-primary-focus)] nui:data-current:bg-[var(--nui-primary-soft)] nui:data-current:text-[var(--nui-primary-text)] nui:data-complete:border-[var(--nui-success-border)] nui:data-complete:bg-[var(--nui-success-soft)] nui:data-complete:text-[var(--nui-success-text)] nui:[&>svg]:size-4",
+    label: "nui:grid nui:min-w-0 nui:gap-y-[var(--nui-header-gap)] nui:wrap-anywhere",
+    title: "nui:text-sm nui:font-medium nui:leading-snug",
+    description: "nui:text-sm nui:leading-relaxed nui:text-muted-foreground",
+    separator:
+      "nui-steps-separator nui:absolute nui:bg-border nui:data-complete:bg-[var(--nui-success-border)]",
+    content:
+      "nui-steps-content nui:min-w-0 nui:wrap-anywhere nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring",
+    actions: "nui-steps-actions nui:flex nui:min-w-0 nui:flex-wrap nui:items-center nui:gap-2",
+  },
+});

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

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

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

@@ -0,0 +1,141 @@
+@layer components {
+  .nui-tabs-list {
+    display: flex;
+    max-width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    /* Safe alignment keeps the first tab reachable when the row overflows. */
+    justify-content: safe start;
+    color: var(--nui-tabs-foreground, var(--nui-muted-foreground));
+  }
+  .nui-tabs-list.nui\:justify-center {
+    justify-content: safe center;
+  }
+  .nui-tabs-list.nui\:justify-end {
+    justify-content: safe end;
+  }
+  .nui-tabs-trigger {
+    display: inline-flex;
+    position: relative;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: var(--nui-tab-height);
+    padding: 0.375rem var(--nui-tab-padding);
+    border: 1px solid transparent;
+    background: transparent;
+    color: inherit;
+    font-size: var(--nui-tab-font);
+    font-weight: 500;
+    line-height: 1.5;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  .nui-tabs-trigger:hover:not(:disabled) {
+    background: var(--nui-tabs-hover, var(--nui-neutral-soft));
+    color: var(--nui-tabs-foreground, var(--nui-foreground));
+  }
+  .nui-tabs-trigger:focus-visible {
+    z-index: 2;
+    outline: var(--nui-focus-width) solid var(--nui-focus-ring);
+    outline-offset: -3px;
+  }
+  .nui-tabs-segmented {
+    width: fit-content;
+    gap: 0.25rem;
+    padding: 0.25rem;
+    border-radius: 0.75rem;
+    background: var(--nui-tabs-track, var(--nui-neutral-soft));
+  }
+  .nui-tabs-segmented > .nui-tabs-trigger {
+    min-height: calc(var(--nui-tab-height) - 0.5rem);
+    border-radius: 0.5rem;
+  }
+  .nui-tabs-segmented > .nui-tabs-trigger[data-selected] {
+    background: var(--nui-tabs-selected-bg, var(--nui-background));
+    color: var(--nui-tabs-selected-fg, var(--nui-tabs-tone));
+    box-shadow: 0 1px 3px color-mix(in srgb, var(--nui-neutral-12) 12%, transparent);
+  }
+  .nui-tabs-full {
+    width: 100%;
+  }
+  .nui-tabs-full > .nui-tabs-trigger {
+    flex: 1 0 0;
+    min-width: max-content;
+  }
+  .nui-tabs-underline {
+    border-bottom: 1px solid var(--nui-tabs-border, var(--nui-border));
+  }
+  .nui-tabs-underline > .nui-tabs-trigger {
+    border-bottom: 2px solid transparent;
+  }
+  .nui-tabs-underline > .nui-tabs-trigger[data-selected] {
+    border-bottom-color: var(--nui-tabs-accent, var(--nui-tabs-tone));
+    color: var(--nui-tabs-accent, var(--nui-tabs-tone));
+  }
+  .nui-tabs-boxed {
+    background: linear-gradient(
+      to top,
+      var(--nui-tabs-border, var(--nui-border)) 1px,
+      transparent 1px
+    );
+  }
+  .nui-tabs-boxed > .nui-tabs-trigger {
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+  .nui-tabs-boxed > .nui-tabs-trigger[data-selected] {
+    border-color: var(--nui-tabs-border, var(--nui-border));
+    border-bottom-color: var(--nui-tabs-selected-bg, var(--nui-background));
+    background: var(--nui-tabs-selected-bg, var(--nui-background));
+    color: var(--nui-tabs-selected-fg, var(--nui-tabs-tone));
+  }
+  .nui-tabs-toggle > .nui-tabs-trigger {
+    border-color: var(--nui-tabs-border, var(--nui-control-border));
+  }
+  .nui-tabs-toggle > .nui-tabs-trigger + .nui-tabs-trigger {
+    margin-left: -1px;
+  }
+  .nui-tabs-toggle > .nui-tabs-trigger:first-child {
+    border-radius: 0.5rem 0 0 0.5rem;
+  }
+  .nui-tabs-toggle > .nui-tabs-trigger:last-child {
+    border-radius: 0 0.5rem 0.5rem 0;
+  }
+  .nui-tabs-rounded > .nui-tabs-trigger:first-child {
+    border-radius: 999px 0 0 999px;
+  }
+  .nui-tabs-rounded > .nui-tabs-trigger:last-child {
+    border-radius: 0 999px 999px 0;
+  }
+  .nui-tabs-toggle > .nui-tabs-trigger:only-child {
+    border-radius: 0.5rem;
+  }
+  .nui-tabs-rounded > .nui-tabs-trigger:only-child {
+    border-radius: 999px;
+  }
+  .nui-tabs-toggle > .nui-tabs-trigger[data-selected] {
+    z-index: 1;
+    border-color: var(--nui-tabs-selected-bg, var(--nui-tabs-solid));
+    background: var(--nui-tabs-selected-bg, var(--nui-tabs-solid));
+    color: var(--nui-tabs-selected-fg, var(--nui-tabs-on-solid));
+  }
+  .nui-tabs-list > .nui-tabs-trigger:disabled {
+    border-color: var(--nui-neutral-6);
+    background: var(--nui-neutral-3);
+    color: var(--nui-neutral-8);
+    cursor: not-allowed;
+  }
+  .nui-tabs-underline > .nui-tabs-trigger:disabled {
+    border-bottom-color: transparent;
+  }
+  .nui-tabs-content[hidden] {
+    display: none;
+  }
+}
+
+.nui-tabs-trigger:disabled .nui-badge {
+  background: var(--nui-neutral-3);
+  border-color: var(--nui-neutral-6);
+  color: var(--nui-neutral-8);
+}

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

@@ -0,0 +1,61 @@
+import { tv } from "tailwind-variants/lite";
+
+export const tabsRecipe = tv({
+  slots: {
+    root: "nui:min-w-0",
+    list: "nui-tabs-list",
+    trigger: "nui-tabs-trigger",
+    content:
+      "nui-tabs-content nui:min-w-0 nui:pt-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",
+  },
+  variants: {
+    variant: {
+      underline: { list: "nui-tabs-underline" },
+      boxed: { list: "nui-tabs-boxed" },
+      toggle: { list: "nui-tabs-toggle" },
+      rounded: { list: "nui-tabs-toggle nui-tabs-rounded" },
+      segmented: { list: "nui-tabs-segmented" },
+    },
+    tone: {
+      neutral: {
+        root: "nui:[--nui-tabs-tone:var(--nui-neutral-text)] nui:[--nui-tabs-solid:var(--nui-neutral)] nui:[--nui-tabs-on-solid:var(--nui-on-neutral)]",
+      },
+      primary: {
+        root: "nui:[--nui-tabs-tone:var(--nui-primary-text)] nui:[--nui-tabs-solid:var(--nui-primary)] nui:[--nui-tabs-on-solid:var(--nui-on-primary)]",
+      },
+      info: {
+        root: "nui:[--nui-tabs-tone:var(--nui-info-text)] nui:[--nui-tabs-solid:var(--nui-info)] nui:[--nui-tabs-on-solid:var(--nui-on-info)]",
+      },
+      success: {
+        root: "nui:[--nui-tabs-tone:var(--nui-success-text)] nui:[--nui-tabs-solid:var(--nui-success)] nui:[--nui-tabs-on-solid:var(--nui-on-success)]",
+      },
+      warning: {
+        root: "nui:[--nui-tabs-tone:var(--nui-warning-text)] nui:[--nui-tabs-solid:var(--nui-warning)] nui:[--nui-tabs-on-solid:var(--nui-on-warning)]",
+      },
+      danger: {
+        root: "nui:[--nui-tabs-tone:var(--nui-danger-text)] nui:[--nui-tabs-solid:var(--nui-danger)] nui:[--nui-tabs-on-solid:var(--nui-on-danger)]",
+      },
+    },
+    size: {
+      sm: {
+        list: "nui:[--nui-tab-height:2rem] nui:[--nui-tab-font:0.75rem] nui:[--nui-tab-padding:0.75rem]",
+      },
+      md: {
+        list: "nui:[--nui-tab-height:2.5rem] nui:[--nui-tab-font:0.875rem] nui:[--nui-tab-padding:1rem]",
+      },
+      lg: {
+        list: "nui:[--nui-tab-height:3rem] nui:[--nui-tab-font:1rem] nui:[--nui-tab-padding:1.25rem]",
+      },
+      xl: {
+        list: "nui:[--nui-tab-height:3.5rem] nui:[--nui-tab-font:1.125rem] nui:[--nui-tab-padding:1.5rem]",
+      },
+    },
+    align: {
+      start: { list: "nui:justify-start" },
+      center: { list: "nui:justify-center" },
+      end: { list: "nui:justify-end" },
+    },
+    fullWidth: { true: { list: "nui-tabs-full" } },
+  },
+  defaultVariants: { variant: "underline", tone: "primary", size: "md", align: "start" },
+});

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

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

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

@@ -0,0 +1,38 @@
+import { tv } from "tailwind-variants/lite";
+import { navigationLinkBase } from "../navigation-link.recipe";
+
+export const verticalMenuRecipe = tv({
+  slots: {
+    root: "nui:grid nui:w-full nui:min-w-0 nui:content-start nui:gap-6 nui:text-foreground",
+    group: "nui:grid nui:min-w-0 nui:gap-2",
+    label: "nui:px-3 nui:font-semibold nui:uppercase nui:tracking-wider",
+    list: "nui:m-0 nui:grid nui:min-w-0 nui:list-none nui:gap-1 nui:p-0",
+    item: "nui:min-w-0",
+    link: `nui-vertical-menu-link ${navigationLinkBase}`,
+    subList:
+      "nui:ms-3 nui:mt-1 nui:grid nui:min-w-0 nui:list-none nui:gap-1 nui:border-s nui:border-border nui:ps-3",
+    branch: "nui:min-w-0",
+    branchTrigger: `${navigationLinkBase} nui:w-full nui:justify-between nui:text-start nui:cursor-pointer nui:data-[state=open]:text-foreground nui:disabled:cursor-not-allowed nui:disabled:text-[var(--nui-disabled-foreground)] nui:[&_svg]:shrink-0`,
+    branchIndicator:
+      "nui:transition-transform nui:motion-reduce:transition-none nui:data-[state=open]:rotate-180",
+    branchContent: "nui:min-w-0",
+    icon: "nui:inline-flex nui:shrink-0 nui:items-center nui:justify-center nui:[&_svg]:size-4",
+  },
+  variants: {
+    variant: {
+      plain: { root: "" },
+      surface: { root: "nui:rounded-lg nui:border nui:border-border nui:bg-surface nui:p-3" },
+    },
+    density: {
+      comfortable: {
+        link: "nui:min-h-10 nui:px-3 nui:py-2",
+        branchTrigger: "nui:min-h-10 nui:px-3 nui:py-2",
+      },
+      compact: {
+        link: "nui:min-h-8 nui:px-3 nui:py-1.5",
+        branchTrigger: "nui:min-h-8 nui:px-3 nui:py-1.5",
+      },
+    },
+  },
+  defaultVariants: { variant: "plain", density: "comfortable" },
+});

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

@@ -0,0 +1,5 @@
+@import "../../styles/foundations.css";
+@import "../navigation-link.styles.css";
+@import "../../content/heading/heading.styles.css";
+
+@source "./vertical-menu.recipe.ts";

package/dist/tailwind/source/overlays/alert-dialog/alert-dialog.styles.css

@@ -0,0 +1,3 @@
+@import "../../styles/foundations.css";
+@import "../dialog/dialog.styles.css";
+@import "../../actions/button/button.styles.css";

package/dist/tailwind/source/overlays/dialog/dialog.css

@@ -0,0 +1,56 @@
+.nui-dialog-content {
+  z-index: calc(var(--nui-z-overlay) + var(--layer-index, 0) * 2 + 1);
+}
+.nui-dialog-positioner {
+  z-index: var(--z-index, calc(var(--nui-z-overlay) + 1));
+}
+.nui-dialog-backdrop {
+  z-index: calc(var(--z-index, calc(var(--nui-z-overlay) + 1)) - 1);
+}
+.nui-dialog-backdrop[data-state="open"] {
+  animation: nui-dialog-fade-in 140ms ease-out;
+}
+.nui-dialog-backdrop[data-state="closed"] {
+  animation: nui-dialog-fade-out 100ms ease-in;
+}
+.nui-dialog-content[data-state="open"] {
+  animation: nui-dialog-enter 160ms ease-out;
+}
+.nui-dialog-content[data-state="closed"] {
+  animation: nui-dialog-fade-out 100ms ease-in;
+}
+@keyframes nui-dialog-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes nui-dialog-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes nui-dialog-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nui-dialog-content,
+  .nui-dialog-backdrop {
+    animation: none;
+  }
+}
+[data-nui-overlay-root][data-motion="reduced"] :is(.nui-dialog-content, .nui-dialog-backdrop) {
+  animation: none;
+}

package/dist/tailwind/source/overlays/dialog/dialog.recipe.ts

@@ -0,0 +1,37 @@
+import { tv } from "tailwind-variants/lite";
+
+export const dialogRecipe = tv({
+  slots: {
+    backdrop: "nui-dialog-backdrop nui:fixed nui:inset-0 nui:bg-[var(--nui-overlay-backdrop)]",
+    positioner:
+      "nui-dialog-positioner nui:fixed nui:inset-0 nui:flex nui:items-center nui:justify-center nui:p-4 nui:sm:p-6",
+    content:
+      "nui-dialog-content nui:relative nui:flex nui:max-h-[calc(100dvh-2rem)] nui:min-h-0 nui:w-full nui:min-w-0 nui:flex-col nui:text-foreground nui:wrap-anywhere nui:outline-none nui:sm:max-h-[calc(100dvh-3rem)]",
+    header:
+      "nui:grid nui:shrink-0 nui:grid-cols-1 nui:items-start nui:gap-x-5 nui:gap-y-[var(--nui-header-gap)] nui:border-b nui:border-border nui:bg-surface nui:px-5 nui:py-3 nui:sm:px-6 nui:has-[[data-part=close-trigger]]:grid-cols-[minmax(0,1fr)_auto] nui:[&>[data-part=close-trigger]]:col-start-2 nui:[&>[data-part=close-trigger]]:row-start-1 nui:[&>[data-part=close-trigger]]:row-span-2",
+    title:
+      "nui:col-start-1 nui:m-0 nui:text-xl nui:leading-snug nui:font-semibold nui:tracking-tight nui:text-foreground",
+    description:
+      "nui:col-start-1 nui:m-0 nui:text-sm nui:leading-relaxed nui:text-muted-foreground",
+    body: "nui:grid nui:min-h-0 nui:gap-4 nui:overflow-y-auto nui:overscroll-contain nui:p-5 nui:text-base nui:leading-relaxed nui:sm:p-6",
+    footer:
+      "nui:flex nui:shrink-0 nui:flex-wrap nui:items-center nui:justify-end nui:gap-2 nui:border-t nui:border-border nui:bg-surface nui:px-5 nui:py-3 nui:sm:px-6",
+    close:
+      "nui:inline-flex nui:size-8 nui:shrink-0 nui:cursor-pointer nui:items-center nui:justify-center nui:rounded-full nui:border-0 nui:bg-[var(--nui-neutral-soft)] nui:text-[var(--nui-neutral-text)] nui:enabled:hover:bg-[var(--nui-neutral-soft-hover)] nui:enabled:active:bg-[var(--nui-neutral-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 nui:disabled:cursor-not-allowed nui:disabled:bg-[var(--nui-disabled-background)] nui:disabled:text-[var(--nui-disabled-foreground)]",
+  },
+  variants: {
+    size: {
+      sm: { content: "nui:max-w-md" },
+      md: { content: "nui:max-w-[40rem]" },
+      lg: { content: "nui:max-w-4xl" },
+    },
+    variant: {
+      card: {
+        content:
+          "nui:overflow-hidden nui:rounded-xl nui:border nui:border-border nui:bg-background nui:shadow-[var(--nui-overlay-shadow)]",
+      },
+      free: { content: "nui:bg-transparent" },
+    },
+  },
+  defaultVariants: { size: "md", variant: "card" },
+});

package/dist/tailwind/source/overlays/dialog/dialog.styles.css

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

package/dist/tailwind/source/overlays/hover-card/hover-card.css

@@ -0,0 +1,43 @@
+.nui-hover-card-positioner,
+.nui-hover-card-content {
+  z-index: calc(var(--nui-z-hover-card) + var(--layer-index, 0));
+}
+.nui-hover-card-content {
+  transform-origin: var(--transform-origin);
+}
+.nui-hover-card-content > [data-scope="hover-card"][data-part="arrow"] > [data-part="arrow-tip"] {
+  border-top: 1px solid var(--nui-border);
+  border-left: 1px solid var(--nui-border);
+}
+.nui-hover-card-content[data-state="open"] {
+  animation: nui-hover-card-enter 140ms ease-out;
+}
+.nui-hover-card-content[data-state="closed"] {
+  animation: nui-hover-card-exit 100ms ease-in;
+}
+@keyframes nui-hover-card-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes nui-hover-card-exit {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nui-hover-card-content {
+    animation: none;
+  }
+}
+[data-nui-overlay-root][data-motion="reduced"] .nui-hover-card-content {
+  animation: none;
+}

package/dist/tailwind/source/overlays/hover-card/hover-card.recipe.ts

@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants/lite";
+
+export const hoverCardRecipe = tv({
+  slots: {
+    trigger:
+      "nui:rounded-sm nui:font-medium nui:text-[var(--nui-primary-text)] nui:underline nui:decoration-[var(--nui-primary-border)] nui:underline-offset-4 nui:hover:decoration-current nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-4 nui:focus-visible:outline-focus-ring",
+    positioner:
+      "nui-hover-card-positioner nui:w-[min(var(--nui-hover-card-width),calc(100vw-2rem))] nui:[--arrow-size:8px] nui:[--arrow-background:var(--nui-background)]",
+    content:
+      "nui-hover-card-content nui:flex nui:max-h-[min(var(--available-height,100dvh),calc(100dvh-2rem))] nui:w-full nui:min-w-0 nui:max-w-[calc(100vw-2rem)] nui:flex-col nui:rounded-xl nui:border nui:border-border nui:bg-background nui:text-foreground nui:wrap-anywhere nui:shadow-[var(--nui-hover-card-shadow)] nui:outline-none",
+    body: "nui:grid nui:min-h-0 nui:gap-3 nui:overflow-y-auto nui:overscroll-contain nui:p-5 nui:text-sm nui:leading-relaxed",
+  },
+});

package/dist/tailwind/source/overlays/hover-card/hover-card.styles.css

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

package/dist/tailwind/source/overlays/popover/popover.css

@@ -0,0 +1,50 @@
+.nui-popover-positioner,
+.nui-popover-content {
+  z-index: calc(var(--nui-z-popover) + var(--layer-index, 0));
+}
+.nui-popover-content {
+  transform-origin: var(--transform-origin);
+}
+.nui-popover-content[data-side="bottom"]:has(> [data-nui-popover-header]),
+.nui-popover-content[data-side="top"]:has(> [data-nui-popover-footer]),
+.nui-popover-content:has(> [data-nui-popover-header]):not(:has(> [data-nui-popover-body])):not(
+  :has(> [data-nui-popover-footer])
+) {
+  --arrow-background: var(--nui-surface);
+}
+.nui-popover-content > [data-scope="popover"][data-part="arrow"] > [data-part="arrow-tip"] {
+  border-top: 1px solid var(--nui-border);
+  border-left: 1px solid var(--nui-border);
+}
+.nui-popover-content[data-state="open"] {
+  animation: nui-popover-enter 140ms ease-out;
+}
+.nui-popover-content[data-state="closed"] {
+  animation: nui-popover-exit 100ms ease-in;
+}
+@keyframes nui-popover-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes nui-popover-exit {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nui-popover-content {
+    animation: none;
+  }
+}
+[data-nui-overlay-root][data-motion="reduced"] .nui-popover-content {
+  animation: none;
+}

package/dist/tailwind/source/overlays/popover/popover.recipe.ts

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants/lite";
+
+export const popoverRecipe = tv({
+  slots: {
+    positioner:
+      "nui-popover-positioner nui:w-[min(var(--nui-popover-width),calc(100vw-2rem))] nui:[--arrow-size:8px] nui:[--arrow-background:var(--nui-background)]",
+    content:
+      "nui-popover-content nui:flex nui:max-h-[min(var(--available-height,100dvh),calc(100dvh-2rem))] nui:w-full nui:min-w-0 nui:max-w-[calc(100vw-2rem)] nui:flex-col nui:rounded-xl nui:border nui:border-border nui:bg-background nui:text-foreground nui:wrap-anywhere nui:shadow-[var(--nui-popover-shadow)] nui:outline-none",
+    header:
+      "nui:grid nui:shrink-0 nui:grid-cols-1 nui:items-start nui:gap-x-3 nui:gap-y-[var(--nui-header-gap)] nui:rounded-t-xl nui:border-b nui:border-border nui:bg-surface nui:p-4 nui:has-[[data-part=close-trigger]]:grid-cols-[minmax(0,1fr)_auto] nui:[&>[data-part=close-trigger]]:col-start-2 nui:[&>[data-part=close-trigger]]:row-start-1 nui:[&>[data-part=close-trigger]]:row-span-2",
+    title:
+      "nui:col-start-1 nui:m-0 nui:text-base nui:leading-snug nui:font-semibold nui:tracking-tight",
+    description:
+      "nui:col-start-1 nui:m-0 nui:text-sm nui:leading-relaxed nui:text-muted-foreground",
+    body: "nui:grid nui:min-h-0 nui:gap-3 nui:overflow-y-auto nui:overscroll-contain nui:p-4 nui:text-sm nui:leading-relaxed",
+    footer:
+      "nui:flex nui:shrink-0 nui:flex-wrap nui:items-center nui:justify-end nui:gap-2 nui:rounded-b-xl nui:border-t nui:border-border nui:bg-surface nui:px-4 nui:py-3",
+  },
+});

package/dist/tailwind/source/overlays/popover/popover.styles.css

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

package/dist/tailwind/source/overlays/sheet/sheet.css

@@ -0,0 +1,61 @@
+.nui-sheet-positioner {
+  z-index: var(--z-index, calc(var(--nui-z-overlay) + 1));
+}
+.nui-sheet-content {
+  --nui-sheet-x: 0%;
+  --nui-sheet-y: 0%;
+  z-index: calc(var(--nui-z-overlay) + var(--layer-index, 0) * 2 + 1);
+}
+.nui-sheet-content[data-side="right"] {
+  --nui-sheet-x: 100%;
+}
+.nui-sheet-content[data-side="left"] {
+  --nui-sheet-x: -100%;
+}
+.nui-sheet-content[data-side="top"] {
+  --nui-sheet-y: -100%;
+}
+.nui-sheet-content[data-side="bottom"] {
+  --nui-sheet-y: 100%;
+}
+.nui-sheet-content[data-state="open"] {
+  animation: nui-sheet-enter 220ms ease-out;
+}
+.nui-sheet-content[data-state="closed"] {
+  animation: nui-sheet-exit 160ms ease-in;
+}
+.nui-sheet-content > [data-nui-dialog-footer] {
+  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+}
+.nui-sheet-content > [data-nui-dialog-body] {
+  flex: 1 1 auto;
+  align-content: start;
+}
+.nui-sheet-content:is([data-side="left"], [data-side="right"], [data-side="top"])
+  > [data-nui-dialog-header] {
+  padding-top: max(0.75rem, env(safe-area-inset-top));
+}
+@keyframes nui-sheet-enter {
+  from {
+    transform: translate(var(--nui-sheet-x), var(--nui-sheet-y));
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+@keyframes nui-sheet-exit {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(var(--nui-sheet-x), var(--nui-sheet-y));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nui-sheet-content {
+    animation: none;
+  }
+}
+[data-nui-overlay-root][data-motion="reduced"] .nui-sheet-content {
+  animation: none;
+}