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

package/dist/chunks/solid-OQFJ2GQI.jsx

@@ -0,0 +1,15 @@
+// actions/menu/menu.recipe.ts
+import { tv } from "tailwind-variants/lite";
+var 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"
+  }
+});
+export { menuRecipe };

package/dist/chunks/solid-P4E6OEET.jsx

@@ -0,0 +1,43 @@
+import { MenubarMenuContext, useMenubar, useMenubarMenu } from "./solid-KPLD252F.jsx";
+import { menuRecipe } from "./solid-OQFJ2GQI.jsx";
+
+// actions/menubar/menubar.parts.tsx
+import { Menu as Ark } from "@ark-ui/solid/menu";
+import { onCleanup, onMount, splitProps } from "solid-js";
+var styles = menuRecipe();
+function MenubarMenu(props) {
+  return <MenubarMenuContext.Provider value={props.value}>{props.children}</MenubarMenuContext.Provider>;
+}
+function MenubarTrigger(props) {
+  const bar = useMenubar();
+  const value = useMenubarMenu();
+  const [local, rest] = splitProps(props, ["class", "onFocus", "onPointerEnter", "onKeyDown"]);
+  onMount(() => {
+    if (!bar.active() && !props.disabled) bar.activate(value);
+  });
+  return <Ark.Trigger {...rest} value={value} role="menuitem" data-nui-menubar-trigger="" data-state={bar.api().open && bar.api().triggerValue === value ? "open" : "closed"} tabIndex={bar.active() === value && !props.disabled ? 0 : -1} class={styles.trigger({
+    class: local.class
+  })} onFocus={event => {
+    bar.activate(value);
+    if (typeof local.onFocus === "function") local.onFocus(event);else local.onFocus?.[0](local.onFocus[1], event);
+  }} onPointerEnter={event => {
+    if (typeof local.onPointerEnter === "function") local.onPointerEnter(event);else local.onPointerEnter?.[0](local.onPointerEnter[1], event);
+    if (!event.defaultPrevented && event.pointerType === "mouse" && !props.disabled && bar.api().open && bar.api().triggerValue !== value) {
+      bar.activate(value);
+      bar.api().setHighlightedValue("");
+      bar.api().setTriggerValue(value);
+    }
+  }} onKeyDown={event => {
+    if (typeof local.onKeyDown === "function") local.onKeyDown(event);else local.onKeyDown?.[0](local.onKeyDown[1], event);
+    if (event.defaultPrevented || !["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    bar.move(event.key, value, bar.api().open);
+  }} />;
+}
+function MenubarContent(props) {
+  const bar = useMenubar();
+  const value = useMenubarMenu();
+  onCleanup(bar.register(value, props));
+  return null;
+}
+export { MenubarMenu, MenubarTrigger, MenubarContent };

package/dist/chunks/solid-PBGRGZFY.jsx

@@ -0,0 +1,35 @@
+import { sheetRecipe } from "./solid-LAJCKO5Y.jsx";
+import { Dialog } from "./solid-MY46IU4O.jsx";
+
+// overlays/sheet/sheet.content.tsx
+import { Dialog as ArkDialog } from "@ark-ui/solid/dialog";
+import { splitProps } from "solid-js";
+function SheetSurface(props) {
+  const [local, rest] = splitProps(props, ["side", "size", "class"]);
+  return <ArkDialog.Content {...rest} data-side={local.side ?? "right"} class={sheetRecipe({
+    side: local.side,
+    size: local.size
+  }).content({
+    class: local.class
+  })} />;
+}
+function SheetPositioner(props) {
+  const [local, rest] = splitProps(props, ["side", "class"]);
+  return <ArkDialog.Positioner {...rest} class={sheetRecipe({
+    side: local.side
+  }).positioner({
+    class: local.class
+  })} />;
+}
+function SheetContent(props) {
+  const [local, rest] = splitProps(props, ["mount"]);
+  return <Dialog.Portal {...local.mount ? {
+    mount: local.mount
+  } : {}}>
+      <Dialog.Backdrop />
+      <SheetPositioner side={props.side}>
+        <SheetSurface {...rest} />
+      </SheetPositioner>
+    </Dialog.Portal>;
+}
+export { SheetSurface, SheetPositioner, SheetContent };

package/dist/chunks/solid-PUJN3TBX.jsx

@@ -0,0 +1,18 @@
+import { textRecipe } from "./solid-TI4B54T5.jsx";
+
+// content/text/text.tsx
+import { mergeProps, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+function Text(props) {
+  const [local, rest] = splitProps(mergeProps({
+    as: "p"
+  }, props), ["as", "size", "tone", "class", "children"]);
+  return <Dynamic component={local.as} {...rest} class={textRecipe({
+    size: local.size,
+    tone: local.tone,
+    class: local.class
+  })}>
+      {local.children}
+    </Dynamic>;
+}
+export { Text };

package/dist/chunks/solid-QF7JLZ35.jsx

@@ -0,0 +1,45 @@
+import { navigationLinkBase } from "./solid-IPWL5E2I.jsx";
+
+// navigation/vertical-menu/vertical-menu.recipe.ts
+import { tv } from "tailwind-variants/lite";
+var 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"
+  }
+});
+export { verticalMenuRecipe };

package/dist/chunks/solid-QTWMTWYM.jsx

@@ -0,0 +1,6 @@
+// forms/text-control.defaults.ts
+function initializeTextControl(element, defaultValue, ref) {
+  if (defaultValue !== void 0) element.defaultValue = defaultValue;
+  if (typeof ref === "function") ref(element);
+}
+export { initializeTextControl };

package/dist/chunks/solid-R2JYQNIM.jsx

@@ -0,0 +1,21 @@
+import { initializeTextControl } from "./solid-QTWMTWYM.jsx";
+import { useTextControl } from "./solid-O5IKGAYR.jsx";
+import { textControlRecipe } from "./solid-R4UMEUAE.jsx";
+
+// forms/textarea/textarea.tsx
+import { Field as ArkField } from "@ark-ui/solid/field";
+import { mergeProps, splitProps, untrack } from "solid-js";
+function Textarea(props) {
+  const [local, rest] = splitProps(mergeProps({
+    rows: 4,
+    resize: "vertical"
+  }, props), ["size", "tone", "valid", "invalid", "loading", "disabled", "readOnly", "resize", "class", "aria-describedby", "aria-invalid", "aria-busy", "defaultValue", "ref"]);
+  const control = useTextControl(local);
+  const initialValue = untrack(() => local.defaultValue);
+  return <ArkField.Textarea {...rest} ref={element => initializeTextControl(element, initialValue, local.ref)} disabled={control.disabled()} readOnly={control.readOnly()} aria-describedby={control.describedBy(local["aria-describedby"])} aria-invalid={control.invalid() ? "true" : local["aria-invalid"]} aria-busy={control.loading() || local["aria-busy"]} data-invalid={control.invalid() ? "" : void 0} data-valid={control.valid() ? "" : void 0} data-resize={local.resize} data-loading={control.loading() ? "" : void 0} class={textControlRecipe({
+    size: control.size(),
+    tone: control.tone(),
+    class: local.class
+  })} />;
+}
+export { Textarea };

package/dist/chunks/solid-R3U4M5TL.jsx

@@ -0,0 +1,26 @@
+// navigation/navbar/navbar.recipe.ts
+import { tv } from "tailwind-variants/lite";
+var 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"
+  }
+});
+export { navbarRecipe };

package/dist/chunks/solid-R4UMEUAE.jsx

@@ -0,0 +1,30 @@
+// forms/text-control.recipe.ts
+import { tv } from "tailwind-variants/lite";
+var textControlRecipe = tv({
+  base: "nui-text-control",
+  variants: {
+    size: {
+      sm: "nui:[--nui-text-height:var(--nui-control-height-sm)] nui:[--nui-text-font:var(--nui-font-size-sm)] nui:[--nui-text-padding:0.625rem] nui:[--nui-text-block:0.25rem]",
+      md: "nui:[--nui-text-height:var(--nui-control-height-md)] nui:[--nui-text-font:var(--nui-font-size-base)] nui:[--nui-text-padding:0.75rem] nui:[--nui-text-block:0.375rem]",
+      lg: "nui:[--nui-text-height:var(--nui-control-height-lg)] nui:[--nui-text-font:var(--nui-font-size-lg)] nui:[--nui-text-padding:1rem] nui:[--nui-text-block:0.5rem]"
+    },
+    tone: {
+      neutral: "nui:[--nui-text-border:var(--nui-control-border)] nui:[--nui-text-hover:var(--nui-control-border-hover)] nui:[--nui-text-focus:var(--nui-focus-ring)]",
+      primary: "nui:[--nui-text-border:var(--nui-primary-border)] nui:[--nui-text-hover:var(--nui-primary-border-hover)] nui:[--nui-text-focus:var(--nui-primary-focus)]",
+      info: "nui:[--nui-text-border:var(--nui-info-border)] nui:[--nui-text-hover:var(--nui-info-border-hover)] nui:[--nui-text-focus:var(--nui-info-focus)]",
+      success: "nui:[--nui-text-border:var(--nui-success-border)] nui:[--nui-text-hover:var(--nui-success-border-hover)] nui:[--nui-text-focus:var(--nui-success-focus)]",
+      warning: "nui:[--nui-text-border:var(--nui-warning-border)] nui:[--nui-text-hover:var(--nui-warning-border-hover)] nui:[--nui-text-focus:var(--nui-warning-focus)]",
+      danger: "nui:[--nui-text-border:var(--nui-danger-border)] nui:[--nui-text-hover:var(--nui-danger-border-hover)] nui:[--nui-text-focus:var(--nui-danger-focus)]"
+    },
+    rounded: {
+      true: "nui:[--nui-text-radius:999px]",
+      false: "nui:[--nui-text-radius:var(--nui-radius-md)]"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    tone: "neutral",
+    rounded: false
+  }
+});
+export { textControlRecipe };

package/dist/chunks/solid-RBYJ5HXP.jsx

@@ -0,0 +1,33 @@
+import { CalloutCloseButton } from "./solid-BX25HKIG.jsx";
+import { CalloutActions, CalloutBody, CalloutContent, CalloutDescription, CalloutHeader, CalloutTitle } from "./solid-IPGZZSLN.jsx";
+import { CalloutIcon } from "./solid-DSMYPMW5.jsx";
+import { CalloutOptions } from "./solid-AMCFDBB4.jsx";
+import { calloutRecipe } from "./solid-SMANDXOR.jsx";
+
+// feedback/callout/callout.tsx
+import { splitProps } from "solid-js";
+function CalloutRoot(props) {
+  const [local, rest] = splitProps(props, ["tone", "variant", "class"]);
+  return <CalloutOptions.Provider value={() => ({
+    tone: local.tone ?? "info"
+  })}>
+      <div {...rest} data-nui-callout="" class={calloutRecipe({
+      tone: local.tone,
+      variant: local.variant
+    }).root({
+      class: local.class
+    })} />
+    </CalloutOptions.Provider>;
+}
+var Callout = {
+  Root: CalloutRoot,
+  Header: CalloutHeader,
+  Body: CalloutBody,
+  Icon: CalloutIcon,
+  Content: CalloutContent,
+  Title: CalloutTitle,
+  Description: CalloutDescription,
+  Actions: CalloutActions,
+  CloseButton: CalloutCloseButton
+};
+export { CalloutRoot, Callout };

package/dist/chunks/solid-RLDFB2IP.jsx

@@ -0,0 +1,58 @@
+// data/table/table.recipe.ts
+import { tv } from "tailwind-variants/lite";
+var tableRecipe = tv({
+  slots: {
+    container: "nui:w-full nui:min-w-0 nui:max-w-full nui:overflow-x-auto nui:overscroll-x-contain nui:focus-visible:outline-[length:var(--nui-focus-width)] nui:focus-visible:outline-offset-[var(--nui-focus-offset)] nui:focus-visible:outline-focus-ring",
+    root: "nui-table nui:border-collapse nui:bg-background nui:text-sm nui:leading-relaxed nui:text-foreground",
+    header: "nui:text-muted-foreground",
+    body: "",
+    footer: "nui:bg-surface nui:font-medium",
+    row: "",
+    head: "nui:font-medium",
+    cell: "",
+    caption: "nui:caption-bottom nui:px-3 nui:pt-3 nui:text-sm nui:font-normal nui:text-muted-foreground"
+  },
+  variants: {
+    variant: {
+      plain: {},
+      bordered: {
+        root: "nui:border nui:border-border"
+      }
+    },
+    density: {
+      compact: {
+        root: "nui:[--nui-table-cell-px:0.75rem] nui:[--nui-table-cell-py:0.375rem]"
+      },
+      comfortable: {
+        root: "nui:[--nui-table-cell-px:1rem] nui:[--nui-table-cell-py:0.75rem]"
+      }
+    },
+    fullWidth: {
+      true: {
+        root: "nui:w-full"
+      },
+      false: {
+        root: "nui:w-auto"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "plain",
+    density: "comfortable",
+    fullWidth: true
+  }
+});
+var tableCellRecipe = tv({
+  base: "nui:align-middle",
+  variants: {
+    align: {
+      start: "nui:text-start",
+      center: "nui:text-center",
+      end: "nui:text-end nui:tabular-nums"
+    }
+  },
+  defaultVariants: {
+    align: "start"
+  }
+});
+export { tableRecipe, tableCellRecipe };

package/dist/chunks/solid-RU2KYFIN.jsx

@@ -0,0 +1,53 @@
+import { dialogRecipe } from "./solid-ZOQSPK4F.jsx";
+import { useDialogOptions } from "./solid-EGK5JLXD.jsx";
+
+// overlays/dialog/dialog.parts.tsx
+import { Dialog as ArkDialog } from "@ark-ui/solid/dialog";
+import { Show, splitProps } from "solid-js";
+var styles = dialogRecipe();
+function DialogBackdrop(props) {
+  const options = useDialogOptions();
+  const [local, rest] = splitProps(props, ["class"]);
+  return <Show when={options().modal}>
+      <ArkDialog.Backdrop {...rest} class={styles.backdrop({
+      class: local.class
+    })} />
+    </Show>;
+}
+function DialogPositioner(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <ArkDialog.Positioner {...rest} class={styles.positioner({
+    class: local.class
+  })} />;
+}
+function DialogHeader(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} data-nui-dialog-header="" class={styles.header({
+    class: local.class
+  })} />;
+}
+function DialogTitle(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <ArkDialog.Title {...rest} class={styles.title({
+    class: local.class
+  })} />;
+}
+function DialogDescription(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <ArkDialog.Description {...rest} class={styles.description({
+    class: local.class
+  })} />;
+}
+function DialogBody(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} data-nui-dialog-body="" class={styles.body({
+    class: local.class
+  })} />;
+}
+function DialogFooter(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} data-nui-dialog-footer="" class={styles.footer({
+    class: local.class
+  })} />;
+}
+export { DialogBackdrop, DialogPositioner, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter };

package/dist/chunks/solid-RWXWHN3P.jsx

@@ -0,0 +1,49 @@
+import { footerRecipe } from "./solid-IEVIFPWF.jsx";
+import { Heading } from "./solid-ESE6JAHG.jsx";
+
+// compositions/footer/footer.parts.tsx
+import { mergeProps, splitProps } from "solid-js";
+var styles = footerRecipe();
+function FooterContent(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} class={styles.content({
+    class: local.class
+  })} />;
+}
+function FooterBrand(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} class={styles.brand({
+    class: local.class
+  })} />;
+}
+function FooterLinks(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} class={styles.links({
+    class: local.class
+  })} />;
+}
+function FooterGroup(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <nav {...rest} class={styles.group({
+    class: local.class
+  })} />;
+}
+function FooterTitle(props) {
+  return <Heading {...mergeProps({
+    as: "h2",
+    size: "6"
+  }, props)} />;
+}
+function FooterLink(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <a {...rest} class={styles.link({
+    class: local.class
+  })} />;
+}
+function FooterMeta(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} class={styles.meta({
+    class: local.class
+  })} />;
+}
+export { FooterContent, FooterBrand, FooterLinks, FooterGroup, FooterTitle, FooterLink, FooterMeta };

package/dist/chunks/solid-SMANDXOR.jsx

@@ -0,0 +1,53 @@
+// feedback/callout/callout.recipe.ts
+import { tv } from "tailwind-variants/lite";
+var calloutRecipe = tv({
+  slots: {
+    header: "nui:flex nui:min-w-0 nui:items-start nui:gap-3 nui:bg-[var(--nui-callout-header-bg)] nui:p-4 nui:text-[var(--nui-callout-header-fg)] nui:[--nui-callout-accent:var(--nui-callout-header-fg)] nui:[--nui-callout-text-strong:var(--nui-callout-header-fg)] nui:[--nui-callout-hover:var(--nui-callout-header-hover)] nui:[--nui-callout-active:var(--nui-callout-header-hover)] nui:[--nui-focus-ring:var(--nui-callout-header-fg)]",
+    body: "nui:min-w-0 nui:p-4",
+    root: "nui:min-w-0 nui:rounded-xl nui:border nui:border-[var(--nui-callout-border)] nui:text-[var(--nui-callout-accent)] nui:wrap-anywhere",
+    icon: "nui:mt-0.5 nui:inline-flex nui:size-5 nui:shrink-0 nui:items-center nui:justify-center nui:text-[var(--nui-callout-accent)] nui:[&>svg]:size-full",
+    content: "nui:grid nui:min-w-0 nui:flex-1 nui:content-start nui:gap-y-[var(--nui-header-gap)]",
+    title: "nui:m-0 nui:text-base nui:leading-snug nui:font-semibold nui:text-[var(--nui-callout-text-strong)]",
+    description: "nui:text-sm nui:leading-relaxed nui:[&_a]:font-medium nui:[&_a]:text-[var(--nui-callout-accent)] nui:[&_a]:underline nui:[&_a]:underline-offset-4 nui:[&_a:focus-visible]:rounded-sm nui:[&_a:focus-visible]:outline-[length:var(--nui-focus-width)] nui:[&_a:focus-visible]:outline-offset-[var(--nui-focus-offset)] nui:[&_a:focus-visible]:outline-focus-ring",
+    actions: "nui:mt-3 nui:flex nui:min-w-0 nui:flex-wrap nui:items-center nui:gap-2",
+    close: "nui:-mt-1 nui:-mr-1 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-transparent nui:text-[var(--nui-callout-accent)] nui:enabled:hover:bg-[var(--nui-callout-hover)] nui:enabled:active:bg-[var(--nui-callout-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: {
+    variant: {
+      soft: {
+        root: "nui:flex nui:items-start nui:gap-3 nui:p-4 nui:bg-[var(--nui-callout-bg)]"
+      },
+      outline: {
+        root: "nui:flex nui:items-start nui:gap-3 nui:p-4 nui:bg-background"
+      },
+      message: {
+        root: "nui:overflow-hidden nui:bg-[var(--nui-callout-bg)]"
+      }
+    },
+    tone: {
+      neutral: {
+        root: "nui:[--nui-callout-bg:var(--nui-neutral-soft)] nui:[--nui-callout-header-bg:var(--nui-neutral)] nui:[--nui-callout-header-fg:var(--nui-on-neutral)] nui:[--nui-callout-header-hover:var(--nui-neutral-hover)] nui:[--nui-callout-border:var(--nui-neutral-6)] nui:[--nui-callout-accent:var(--nui-neutral-text)] nui:[--nui-callout-text-strong:var(--nui-neutral-text-strong)] nui:[--nui-callout-hover:var(--nui-neutral-soft-hover)] nui:[--nui-callout-active:var(--nui-neutral-soft-active)]"
+      },
+      primary: {
+        root: "nui:[--nui-callout-bg:var(--nui-primary-soft)] nui:[--nui-callout-header-bg:var(--nui-primary)] nui:[--nui-callout-header-fg:var(--nui-on-primary)] nui:[--nui-callout-header-hover:var(--nui-primary-hover)] nui:[--nui-callout-border:var(--nui-primary-6)] nui:[--nui-callout-accent:var(--nui-primary-text)] nui:[--nui-callout-text-strong:var(--nui-primary-text-strong)] nui:[--nui-callout-hover:var(--nui-primary-soft-hover)] nui:[--nui-callout-active:var(--nui-primary-soft-active)]"
+      },
+      info: {
+        root: "nui:[--nui-callout-bg:var(--nui-info-soft)] nui:[--nui-callout-header-bg:var(--nui-info)] nui:[--nui-callout-header-fg:var(--nui-on-info)] nui:[--nui-callout-header-hover:var(--nui-info-hover)] nui:[--nui-callout-border:var(--nui-info-6)] nui:[--nui-callout-accent:var(--nui-info-text)] nui:[--nui-callout-text-strong:var(--nui-info-text-strong)] nui:[--nui-callout-hover:var(--nui-info-soft-hover)] nui:[--nui-callout-active:var(--nui-info-soft-active)]"
+      },
+      success: {
+        root: "nui:[--nui-callout-bg:var(--nui-success-soft)] nui:[--nui-callout-header-bg:var(--nui-success)] nui:[--nui-callout-header-fg:var(--nui-on-success)] nui:[--nui-callout-header-hover:var(--nui-success-hover)] nui:[--nui-callout-border:var(--nui-success-6)] nui:[--nui-callout-accent:var(--nui-success-text)] nui:[--nui-callout-text-strong:var(--nui-success-text-strong)] nui:[--nui-callout-hover:var(--nui-success-soft-hover)] nui:[--nui-callout-active:var(--nui-success-soft-active)]"
+      },
+      warning: {
+        root: "nui:[--nui-callout-bg:var(--nui-warning-soft)] nui:[--nui-callout-header-bg:var(--nui-warning)] nui:[--nui-callout-header-fg:var(--nui-on-warning)] nui:[--nui-callout-header-hover:var(--nui-warning-hover)] nui:[--nui-callout-border:var(--nui-warning-6)] nui:[--nui-callout-accent:var(--nui-warning-text)] nui:[--nui-callout-text-strong:var(--nui-warning-text-strong)] nui:[--nui-callout-hover:var(--nui-warning-soft-hover)] nui:[--nui-callout-active:var(--nui-warning-soft-active)]"
+      },
+      danger: {
+        root: "nui:[--nui-callout-bg:var(--nui-danger-soft)] nui:[--nui-callout-header-bg:var(--nui-danger)] nui:[--nui-callout-header-fg:var(--nui-on-danger)] nui:[--nui-callout-header-hover:var(--nui-danger-hover)] nui:[--nui-callout-border:var(--nui-danger-6)] nui:[--nui-callout-accent:var(--nui-danger-text)] nui:[--nui-callout-text-strong:var(--nui-danger-text-strong)] nui:[--nui-callout-hover:var(--nui-danger-soft-hover)] nui:[--nui-callout-active:var(--nui-danger-soft-active)]"
+      }
+    }
+  },
+  defaultVariants: {
+    tone: "info",
+    variant: "soft"
+  }
+});
+export { calloutRecipe };

package/dist/chunks/solid-T26JN25X.jsx

@@ -0,0 +1,51 @@
+// compositions/hero/hero.recipe.ts
+import { tv } from "tailwind-variants/lite";
+var 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"
+  }
+});
+export { heroRecipe };

package/dist/chunks/solid-TBHYQA3G.jsx

@@ -0,0 +1,41 @@
+import { mediaObjectRecipe } from "./solid-MIHOQZ45.jsx";
+import { Text } from "./solid-PUJN3TBX.jsx";
+import { Heading } from "./solid-ESE6JAHG.jsx";
+
+// compositions/media-object/media-object.parts.tsx
+import { mergeProps, splitProps } from "solid-js";
+var styles = mediaObjectRecipe();
+function MediaObjectMedia(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} class={styles.media({
+    class: local.class
+  })} />;
+}
+function MediaObjectContent(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} class={styles.content({
+    class: local.class
+  })} />;
+}
+function MediaObjectTitle(props) {
+  return <Heading {...mergeProps({
+    as: "h3",
+    size: "5",
+    style: {
+      "line-height": "1"
+    }
+  }, props)} />;
+}
+function MediaObjectDescription(props) {
+  return <Text {...mergeProps({
+    size: "6",
+    tone: "muted"
+  }, props)} />;
+}
+function MediaObjectActions(props) {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <div {...rest} class={styles.actions({
+    class: local.class
+  })} />;
+}
+export { MediaObjectMedia, MediaObjectContent, MediaObjectTitle, MediaObjectDescription, MediaObjectActions };

package/dist/chunks/solid-TI4B54T5.jsx

@@ -0,0 +1,25 @@
+// content/text/text.recipe.ts
+import { tv } from "tailwind-variants/lite";
+var textRecipe = tv({
+  base: "nui:m-0 nui:wrap-break-word",
+  variants: {
+    size: {
+      "1": "nui:text-5xl nui:leading-tight",
+      "2": "nui:text-[length:var(--nui-font-size-display-md)] nui:leading-tight",
+      "3": "nui:text-[length:var(--nui-font-size-display-sm)] nui:leading-tight",
+      "4": "nui:text-2xl nui:leading-tight",
+      "5": "nui:text-xl nui:leading-relaxed",
+      "6": "nui:text-base nui:leading-relaxed",
+      "7": "nui:text-xs nui:leading-relaxed"
+    },
+    tone: {
+      default: "nui:text-foreground",
+      muted: "nui:text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    size: "6",
+    tone: "default"
+  }
+});
+export { textRecipe };