@vamos-ui/react 0.3.0 → 0.4.1

package/dist/components/hover-card.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { HoverCard as HoverCardPrimitive } from "radix-ui";
+import * as HoverCardPrimitive from "radix-ui/hover-card";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
 import { usePortalContainer } from "../lib/theme-scope.js";
@@ -16,7 +16,7 @@ export function HoverCard({ openDelay = 500, closeDelay = 150, ...props }) {
     return _jsx(HoverCardPrimitive.Root, { openDelay: openDelay, closeDelay: closeDelay, ...props });
 }
 export const HoverCardTrigger = HoverCardPrimitive.Trigger;
-export const hoverCardContentVariants = cva("surface-popover ui-pop z-(--z-popover) rounded-ui-lg p-[calc(var(--gap)*0.85)] outline-none max-w-[calc(100vw-1.5rem)]", {
+export const hoverCardContentVariants = /*#__PURE__*/ cva("surface-popover ui-pop z-(--z-popover) rounded-ui-lg p-[calc(var(--gap)*0.85)] outline-none max-w-[calc(100vw-1.5rem)]", {
     variants: {
         size: {
             sm: "w-64",
@@ -26,7 +26,7 @@ export const hoverCardContentVariants = cva("surface-popover ui-pop z-(--z-popov
     defaultVariants: { size: "md" },
 });
 /** The preview panel. Portals into the nearest `ThemeScope` and follows the layer-depth glass rules. */
-export const HoverCardContent = React.forwardRef(function HoverCardContent({ className, size, arrow = false, sideOffset = 8, collisionPadding = 12, children, ...props }, ref) {
+export const HoverCardContent = /*#__PURE__*/ React.forwardRef(function HoverCardContent({ className, size, arrow = false, sideOffset = 8, collisionPadding = 12, children, ...props }, ref) {
     const container = usePortalContainer();
     return (_jsx(HoverCardPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(HoverCardPrimitive.Content, { ref: ref, "data-slot": "hover-card-content", sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(hoverCardContentVariants({ size }), className), ...props, children: [children, arrow ? (_jsx(HoverCardPrimitive.Arrow, { asChild: true, width: 14, height: 7, children: _jsx(FloatingArrow, {}) })) : null] }) }) }));
 });

package/dist/components/iban-input.js

@@ -40,7 +40,7 @@ const accept = (ch) => /^[0-9A-Za-z]$/.test(ch);
  * </Field>
  * ```
  */
-export const IbanInput = React.forwardRef(function IbanInput({ countries, rules = [trIbanRule], showBank = true, value, defaultValue, onValueChange, validateOn = "blur", onValidate, mono = true, labels, name, invalid, trailing, inputClassName, onBlur, onKeyDown, disabled, placeholder, ...rest }, forwardedRef) {
+export const IbanInput = /*#__PURE__*/ React.forwardRef(function IbanInput({ countries, rules = [trIbanRule], showBank = true, value, defaultValue, onValueChange, validateOn = "blur", onValidate, mono = true, labels, name, invalid, trailing, inputClassName, onBlur, onKeyDown, disabled, placeholder, ...rest }, forwardedRef) {
     const { locale } = useLocale();
     const t = useLabels("ibanInput", ibanInputLabels, labels);
     const v = useFormattedValidity(validateOn, onValidate);

package/dist/components/id-input.js

@@ -56,7 +56,7 @@ const idInputLabels = {
  * </Field>
  * ```
  */
-export const IdInput = React.forwardRef(function IdInput({ kind, masked = false, value, defaultValue, onValueChange, validateOn = "blur", onValidate, mono = true, labels, name, invalid, inputClassName, onBlur, onFocus, onKeyDown, disabled, placeholder, ...rest }, forwardedRef) {
+export const IdInput = /*#__PURE__*/ React.forwardRef(function IdInput({ kind, masked = false, value, defaultValue, onValueChange, validateOn = "blur", onValidate, mono = true, labels, name, invalid, inputClassName, onBlur, onFocus, onKeyDown, disabled, placeholder, ...rest }, forwardedRef) {
     const rule = typeof kind === "string" ? registry.get(kind) : kind;
     if (!rule && process.env.NODE_ENV !== "production")
         console.warn(`IdInput: no rule registered for "${String(kind)}".`);
@@ -121,10 +121,10 @@ export const IdInput = React.forwardRef(function IdInput({ kind, masked = false,
                     } }) }), submitName ? _jsx("input", { type: "hidden", name: submitName, value: engine.raw ?? "", disabled: disabled }) : null] }));
 });
 /** `IdInput` preset for personal IDs. Default kind `tr-tckn`. */
-export const NationalIdInput = React.forwardRef(function NationalIdInput({ kind = "tr-tckn", ...props }, ref) {
+export const NationalIdInput = /*#__PURE__*/ React.forwardRef(function NationalIdInput({ kind = "tr-tckn", ...props }, ref) {
     return _jsx(IdInput, { ref: ref, kind: kind, ...props });
 });
 /** `IdInput` preset for tax numbers. Default kind `tr-tax-id` (VKN or a sole proprietor's TCKN). */
-export const TaxIdInput = React.forwardRef(function TaxIdInput({ kind = "tr-tax-id", ...props }, ref) {
+export const TaxIdInput = /*#__PURE__*/ React.forwardRef(function TaxIdInput({ kind = "tr-tax-id", ...props }, ref) {
     return _jsx(IdInput, { ref: ref, kind: kind, ...props });
 });

package/dist/components/image.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import type { CropRect, ImageLoader, MediaAsset } from "../media/types.js";
+import { type PlaceholderArtPattern } from "./placeholder-art.js";
 export type ImageAspect = "auto" | "1/1" | "4/3" | "3/2" | "16/9" | "21/9" | "4/5" | "1.91/1" | number;
 /** Default `srcset` steps. */
 export declare const IMAGE_WIDTHS: number[];
@@ -57,7 +58,7 @@ declare const imageLabels: {
     error: string;
 };
 export type ImageLabels = typeof imageLabels;
-export type ImagePlaceholder = "blur" | "color" | "skeleton" | "none";
+export type ImagePlaceholder = "blur" | "color" | "skeleton" | "art" | "none";
 export interface ImageBaseProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "placeholder" | "width" | "height" | "alt">, Omit<VariantProps<typeof imageVariants>, "fit"> {
     width?: number;
     height?: number;
@@ -77,8 +78,20 @@ export interface ImageBaseProps extends Omit<React.ImgHTMLAttributes<HTMLImageEl
     quality?: number;
     /** Above the fold: eager loading + `fetchpriority="high"`. */
     priority?: boolean;
-    /** While loading. Default: `blur` with a blur source, `color` with a dominant colour, else `skeleton`. */
+    /**
+     * While loading. Default: `blur` with a blur source, `color` with a dominant colour, else `skeleton`.
+     * `art` shows a seeded token pattern (PlaceholderArt) while loading and on error. Without a `src`
+     * the image always renders as art.
+     */
     placeholder?: ImagePlaceholder;
+    /** Seed for the art placeholder. Default: `alt`, then the URL. Same seed → same pattern. */
+    seed?: string;
+    /** Force the art pattern. Default `"auto"` (from the seed). */
+    placeholderPattern?: PlaceholderArtPattern | "auto";
+    /** Glyph in the art placeholder. `false` hides it. */
+    placeholderIcon?: React.ReactNode | false;
+    /** Print `alt` (or this node) as a small caption on the art placeholder. */
+    placeholderCaption?: boolean | React.ReactNode;
     /** Tiny blurred preview (LQIP data URL or a small URL). Defaults to `asset.placeholder`. */
     blurDataURL?: string;
     /** Placeholder colour. Defaults to `asset.dominantColor`. */
@@ -103,6 +116,9 @@ export type ImageProps = ImageBaseProps & ({
 } | {
     src: MediaAsset;
     alt?: string;
+} | {
+    src?: null | "";
+    alt: string;
 });
 /**
  * The image primitive: no layout shift (width/height + `aspect-ratio`), focal point →

package/dist/components/image.js

@@ -9,6 +9,7 @@ import { DefaultImage, useImage, useMediaAdapter } from "../lib/provider.js";
 import { useComposedRefs } from "../lib/compose-refs.js";
 import { useIsomorphicLayoutEffect } from "../lib/use-controllable-state.js";
 import { Spinner } from "./spinner.js";
+import { PlaceholderArt } from "./placeholder-art.js";
 /** Default `srcset` steps. */
 export const IMAGE_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600, 1920];
 /** `"16/9"` → 1.777…, `1.5` → 1.5, `"auto"` → the intrinsic ratio (or `undefined`). */
@@ -55,7 +56,7 @@ export function getImageSources(source, options = {}) {
 /* ------------------------------------------------------------------ */
 /* Loader context                                                       */
 /* ------------------------------------------------------------------ */
-const ImageLoaderContext = React.createContext(undefined);
+const ImageLoaderContext = /*#__PURE__*/ React.createContext(undefined);
 /**
  * Sets the image loader for every kit `Image` below (CDN URL builder). Same signature as the
  * Next.js loader. The media adapter's `loader` is used when no provider sets one.
@@ -86,7 +87,7 @@ export function useImageSources(source, options = {}) {
 /* ------------------------------------------------------------------ */
 /* Image                                                                */
 /* ------------------------------------------------------------------ */
-export const imageVariants = cva("vui-image relative isolate block max-w-full overflow-hidden bg-skeleton", {
+export const imageVariants = /*#__PURE__*/ cva("vui-image relative isolate block max-w-full overflow-hidden bg-skeleton", {
     variants: {
         rounded: { none: "", ui: "rounded-ui", "ui-lg": "rounded-ui-lg", full: "rounded-full" },
         fit: { cover: "", contain: "" },
@@ -107,9 +108,10 @@ const FILENAME_ALT = /(^(img|dsc|pxl|screenshot)[-_ ]?\d+)|\.(jpe?g|png|gif|webp
  * <Image src={asset} alt="Lobby of the Kadıköy office" aspect="16/9" sizes="(min-width: 1024px) 50vw, 100vw" rounded="ui" />
  * ```
  */
-export const Image = React.forwardRef(function Image({ src: source, alt: altProp, width: widthProp, height: heightProp, aspect = "auto", fit = "cover", focal: focalProp, crop, sizes, widths, quality, priority, placeholder: placeholderProp, blurDataURL, color: colorProp, loader, fallback, processing: processingProp, rounded, frame, className, imgClassName, style, labels, onLoad, onError, loading, decoding, ...props }, forwardedRef) {
+export const Image = /*#__PURE__*/ React.forwardRef(function Image({ src: source, alt: altProp, width: widthProp, height: heightProp, aspect = "auto", fit = "cover", focal: focalProp, crop, sizes, widths, quality, priority, placeholder: placeholderProp, blurDataURL, seed, placeholderPattern, placeholderIcon, placeholderCaption, color: colorProp, loader, fallback, processing: processingProp, rounded, frame, className, imgClassName, style, labels, onLoad, onError, loading, decoding, ...props }, forwardedRef) {
     const t = useLabels("image", imageLabels, labels);
     const Bridge = useImage();
+    const empty = !source || (typeof source === "string" && !source.trim());
     const asset = isAsset(source) ? source : undefined;
     const alt = altProp ?? asset?.alt ?? "";
     const width = widthProp ?? asset?.width;
@@ -118,9 +120,10 @@ export const Image = React.forwardRef(function Image({ src: source, alt: altProp
     const blur = blurDataURL ?? asset?.placeholder;
     const color = colorProp ?? asset?.dominantColor;
     const processing = processingProp ?? asset?.status === "processing";
-    const placeholder = placeholderProp ?? (blur ? "blur" : color ? "color" : "skeleton");
-    const ratio = aspectRatioOf(aspect, width, height);
-    const sources = useImageSources(source, { sizes, widths, loader, quality, focal, crop });
+    const placeholder = empty ? "art" : placeholderProp ?? (blur ? "blur" : color ? "color" : "skeleton");
+    // An empty image has no intrinsic size: fall back to 4:3 so it never collapses.
+    const ratio = aspectRatioOf(aspect, width, height) ?? (empty ? 4 / 3 : undefined);
+    const sources = useImageSources(source || "", { sizes, widths, loader, quality, focal, crop });
     const [state, setState] = React.useState("loading");
     const imgRef = React.useRef(null);
     const ref = useComposedRefs(forwardedRef, imgRef);
@@ -138,6 +141,10 @@ export const Image = React.forwardRef(function Image({ src: source, alt: altProp
     if (process.env.NODE_ENV !== "production" && alt && FILENAME_ALT.test(alt.trim())) {
         console.warn(`Image: alt text "${alt}" looks like a file name. Describe the image instead, or pass alt="" if it is decorative.`);
     }
+    const art = (decorative) => (_jsx(PlaceholderArt, { "data-slot": "image-art", seed: seed ?? (alt || (typeof source === "string" ? source : asset?.id) || ""), pattern: placeholderPattern, icon: placeholderIcon, caption: placeholderCaption === true ? alt || undefined : placeholderCaption, label: decorative ? undefined : alt || undefined, className: "absolute inset-0" }));
+    if (empty) {
+        return (_jsx("span", { "data-slot": "image", "data-state": "empty", "data-placeholder": "art", className: cn(imageVariants({ rounded, frame }), "bg-transparent", className), style: { aspectRatio: String(ratio), ...style }, children: art(false) }));
+    }
     const objectPosition = focalToObjectPosition(focal);
     const positioned = ratio !== undefined;
     const imgClasses = cn("vui-image-img block", positioned ? "absolute inset-0 size-full" : "h-auto w-full", fit === "contain" ? "object-contain" : "object-cover", imgClassName);
@@ -156,13 +163,13 @@ export const Image = React.forwardRef(function Image({ src: source, alt: altProp
             ...(positioned ? { aspectRatio: String(ratio) } : null),
             ...(placeholder === "color" && color ? { backgroundColor: color } : null),
             ...style,
-        }, children: [placeholder === "blur" && blur && state !== "error" ? (_jsx("img", { "aria-hidden": true, alt: "", src: blur, "data-slot": "image-blur", className: "vui-image-blur pointer-events-none absolute inset-0 size-full object-cover", style: imgStyle })) : null, placeholder === "skeleton" && state === "loading" ? _jsx("span", { "aria-hidden": true, "data-slot": "image-skeleton", className: "ui-shimmer absolute inset-0" }) : null, state === "error" ? (fallback ? (_jsx("span", { "data-slot": "image-fallback", className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center"), children: fallback })) : (_jsx("span", { "data-slot": "image-fallback", ...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), title: t("error"), className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center text-fg-subtle [&_svg]:size-6"), children: _jsx(ImageOff, { "aria-hidden": true, strokeWidth: 1.5 }) }))) : (img), processing ? (_jsxs("span", { "data-slot": "image-processing", className: "surface-popover absolute start-2 top-2 z-10 inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium", children: [_jsx(Spinner, { size: "xs", tone: "accent" }), t("processing")] })) : null] }));
+        }, children: [placeholder === "blur" && blur && state !== "error" ? (_jsx("img", { "aria-hidden": true, alt: "", src: blur, "data-slot": "image-blur", className: "vui-image-blur pointer-events-none absolute inset-0 size-full object-cover", style: imgStyle })) : null, placeholder === "skeleton" && state === "loading" ? _jsx("span", { "aria-hidden": true, "data-slot": "image-skeleton", className: "ui-shimmer absolute inset-0" }) : null, placeholder === "art" && state === "loading" ? art(true) : null, state === "error" ? (placeholder === "art" && !fallback ? (_jsx("span", { "data-slot": "image-fallback", title: t("error"), className: cn(positioned ? "absolute inset-0" : "relative block min-h-24"), children: art(false) })) : fallback ? (_jsx("span", { "data-slot": "image-fallback", className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center"), children: fallback })) : (_jsx("span", { "data-slot": "image-fallback", ...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }), title: t("error"), className: cn(positioned ? "absolute inset-0" : "block min-h-24", "flex items-center justify-center text-fg-subtle [&_svg]:size-6"), children: _jsx(ImageOff, { "aria-hidden": true, strokeWidth: 1.5 }) }))) : (img), processing ? (_jsxs("span", { "data-slot": "image-processing", className: "surface-popover absolute start-2 top-2 z-10 inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium", children: [_jsx(Spinner, { size: "xs", tone: "accent" }), t("processing")] })) : null] }));
 });
 /** `<figure>` for a captioned image (blocks, galleries, articles). */
-export const Figure = React.forwardRef(function Figure({ gap = "sm", className, ...props }, ref) {
+export const Figure = /*#__PURE__*/ React.forwardRef(function Figure({ gap = "sm", className, ...props }, ref) {
     return _jsx("figure", { ref: ref, "data-slot": "figure", className: cn("m-0 flex flex-col", gap === "sm" ? "gap-2" : "gap-3", className), ...props });
 });
 /** `<figcaption>`: caption text plus an optional credit. */
-export const FigureCaption = React.forwardRef(function FigureCaption({ credit, className, children, ...props }, ref) {
+export const FigureCaption = /*#__PURE__*/ React.forwardRef(function FigureCaption({ credit, className, children, ...props }, ref) {
     return (_jsxs("figcaption", { ref: ref, "data-slot": "figure-caption", className: cn("text-[13px] leading-relaxed text-pretty text-fg-muted", className), ...props, children: [children, credit ? _jsx("span", { className: "ms-2 text-[11.5px] tracking-wide text-fg-subtle uppercase", children: credit }) : null] }));
 });

package/dist/components/input-otp.js

@@ -16,13 +16,13 @@ const PATTERNS = {
     digits: "^\\d+$",
     alphanumeric: "^[a-zA-Z0-9]+$",
 };
-const OTPStyleContext = React.createContext({ size: "md", mask: false, invalid: false });
+const OTPStyleContext = /*#__PURE__*/ React.createContext({ size: "md", mask: false, invalid: false });
 /**
  * One real `<input>` (screen readers, SMS autofill, password managers and paste all see one
  * field) with visual slots drawn over it. Compose `InputOTPGroup` / `InputOTPSlot` /
  * `InputOTPSeparator`, or use the `InputOTP` shorthand.
  */
-export const InputOTPRoot = React.forwardRef(function InputOTPRoot(rawProps, ref) {
+export const InputOTPRoot = /*#__PURE__*/ React.forwardRef(function InputOTPRoot(rawProps, ref) {
     const { maxLength, value: valueProp, defaultValue, onValueChange, onComplete, pattern = "digits", size = "md", mask = false, invalid, loading, containerClassName, className, labels, children, ...rest } = rawProps;
     const t = useLabels("otp", otpLabels, labels);
     const field = useFieldContext();
@@ -37,11 +37,11 @@ export const InputOTPRoot = React.forwardRef(function InputOTPRoot(rawProps, ref
             dir: "ltr", children: _jsxs(_Fragment, { children: [children, loading ? (_jsx("span", { className: "ms-1 inline-flex items-center", children: _jsx(Spinner, { size: "sm", tone: "muted", label: t("verifying") }) })) : null] }) }) }));
 });
 /** A run of joined slots. */
-export const InputOTPGroup = React.forwardRef(function InputOTPGroup({ className, ...props }, ref) {
+export const InputOTPGroup = /*#__PURE__*/ React.forwardRef(function InputOTPGroup({ className, ...props }, ref) {
     return _jsx("div", { ref: ref, "data-slot": "input-otp-group", className: cn("ui-otp-group flex items-center", className), ...props });
 });
 /** One visual character box: active ring, fake caret, filled state. */
-export const InputOTPSlot = React.forwardRef(function InputOTPSlot({ index, className, ...props }, ref) {
+export const InputOTPSlot = /*#__PURE__*/ React.forwardRef(function InputOTPSlot({ index, className, ...props }, ref) {
     const ctx = React.useContext(OTPInputContext);
     const { size, mask, invalid } = React.useContext(OTPStyleContext);
     const slot = ctx.slots[index];
@@ -49,7 +49,7 @@ export const InputOTPSlot = React.forwardRef(function InputOTPSlot({ index, clas
     return (_jsxs("div", { ref: ref, "data-slot": "input-otp-slot", "data-active": slot?.isActive ? "" : undefined, "data-filled": char ? "" : undefined, "aria-hidden": true, className: cn("relative flex items-center justify-center border-y border-e border-field-border bg-field font-medium text-fg tabular", "transition-[border-color,box-shadow,background-color] duration-150", "first:rounded-s-ui first:border-s last:rounded-e-ui", size === "lg" ? "h-[calc(var(--control-h)+1rem)] w-[calc(var(--control-h)+0.25rem)] text-xl" : "h-[calc(var(--control-h)+0.25rem)] w-[calc(var(--control-h)-0.25rem)] text-lg", "group-hover/otp:border-field-border-hover", slot?.isActive && "z-10 border-ring shadow-[0_0_0_3px_var(--accent-soft)]", slot?.isActive && "border-s", invalid && "border-danger", invalid && slot?.isActive && "shadow-[0_0_0_3px_color-mix(in_srgb,var(--danger)_18%,transparent)]", className), ...props, children: [char ? mask ? _jsx("span", { className: "size-2 rounded-full bg-current" }) : char : null, slot?.hasFakeCaret ? (_jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "ui-otp-caret h-[45%] w-px bg-fg" }) })) : null] }));
 });
 /** Visual divider between groups (123–456). */
-export const InputOTPSeparator = React.forwardRef(function InputOTPSeparator({ className, ...props }, ref) {
+export const InputOTPSeparator = /*#__PURE__*/ React.forwardRef(function InputOTPSeparator({ className, ...props }, ref) {
     return (_jsx("div", { ref: ref, role: "separator", "data-slot": "input-otp-separator", className: cn("flex w-3 items-center justify-center text-fg-subtle", className), ...props, children: _jsx("span", { className: "h-px w-2.5 bg-current" }) }));
 });
 /**
@@ -62,7 +62,7 @@ export const InputOTPSeparator = React.forwardRef(function InputOTPSeparator({ c
  * </Field>
  * ```
  */
-export const InputOTP = React.forwardRef(function InputOTP({ length = 6, groups, ...props }, ref) {
+export const InputOTP = /*#__PURE__*/ React.forwardRef(function InputOTP({ length = 6, groups, ...props }, ref) {
     const sizes = groups && groups.reduce((a, b) => a + b, 0) === length ? groups : [length];
     let start = 0;
     return (_jsx(InputOTPRoot, { ref: ref, maxLength: length, ...props, children: sizes.map((count, gi) => {

package/dist/components/input.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Label as LabelPrimitive } from "radix-ui";
+import * as LabelPrimitive from "radix-ui/label";
 /**
  * The classic field look for a bare `<input>` / `<textarea>`. Kept for compatibility —
  * new controls should use `controlVariants` from `lib/variants`.

package/dist/components/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { Label as LabelPrimitive } from "radix-ui";
+import * as LabelPrimitive from "radix-ui/label";
 import { CircleAlert, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useComposedRefs, mergeIds } from "../lib/compose-refs.js";
@@ -39,7 +39,7 @@ const setNativeValue = (el, value) => {
  * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="northpoint" />
  * ```
  */
-export const Input = React.forwardRef(function Input(rawProps, forwardedRef) {
+export const Input = /*#__PURE__*/ React.forwardRef(function Input(rawProps, forwardedRef) {
     const { className, inputClassName, size = "md", variant = "default", leading, trailing, addonStart, addonEnd, clearable, onClear, showCount, invalid, labels, style, ...rest } = rawProps;
     const props = useFieldControl({ ...rest, "aria-invalid": invalid ? true : rest["aria-invalid"] });
     const t = useLabels("input", inputLabels, labels);
@@ -92,7 +92,7 @@ export const Input = React.forwardRef(function Input(rawProps, forwardedRef) {
  * <Field label="Anything we should know first?"><Textarea maxLength={400} showCount /></Field>
  * ```
  */
-export const Textarea = React.forwardRef(function Textarea({ className, rows = 4, invalid, showCount, labels, ...rest }, ref) {
+export const Textarea = /*#__PURE__*/ React.forwardRef(function Textarea({ className, rows = 4, invalid, showCount, labels, ...rest }, ref) {
     const props = useFieldControl({ ...rest, "aria-invalid": invalid ? true : rest["aria-invalid"] });
     const t = useLabels("input", inputLabels, labels);
     const countId = React.useId();
@@ -114,7 +114,7 @@ export const Textarea = React.forwardRef(function Textarea({ className, rows = 4
 /* Label                                                               */
 /* ------------------------------------------------------------------ */
 /** Form label (Radix Label: no text selection on double-click). */
-export const Label = React.forwardRef(function Label({ className, ...props }, ref) {
+export const Label = /*#__PURE__*/ React.forwardRef(function Label({ className, ...props }, ref) {
     return (_jsx(LabelPrimitive.Root, { ref: ref, "data-slot": "label", className: cn("text-[13px] font-medium text-fg", className), ...props }));
 });
 /* ------------------------------------------------------------------ */
@@ -175,13 +175,13 @@ export function Field({ label, hint, error, id, name, required = false, optional
  * </Fieldset>
  * ```
  */
-export const Fieldset = React.forwardRef(function Fieldset({ legend, hint, error, className, children, "aria-describedby": describedBy, ...props }, ref) {
+export const Fieldset = /*#__PURE__*/ React.forwardRef(function Fieldset({ legend, hint, error, className, children, "aria-describedby": describedBy, ...props }, ref) {
     const id = React.useId();
     const hintId = hint && !error ? `${id}-hint` : undefined;
     const errorId = error ? `${id}-error` : undefined;
     return (_jsxs("fieldset", { ref: ref, "data-slot": "fieldset", "aria-describedby": mergeIds(hintId, errorId, describedBy), "data-invalid": error ? "" : undefined, className: cn("grid min-w-0 gap-3 border-0 p-0 disabled:opacity-60", className), ...props, children: [legend ? _jsx(Legend, { className: "float-left w-full", children: legend }) : null, hint && !error ? (_jsx("p", { id: hintId, className: "-mt-2 text-xs text-fg-subtle", children: hint })) : null, error ? (_jsxs("p", { id: errorId, className: "-mt-2 flex items-start gap-1.5 text-xs text-danger", children: [_jsx(CircleAlert, { "aria-hidden": true, className: "mt-px size-3.5 shrink-0" }), _jsx("span", { children: error })] })) : null, children] }));
 });
 /** Title of a Fieldset. */
-export const Legend = React.forwardRef(function Legend({ className, ...props }, ref) {
+export const Legend = /*#__PURE__*/ React.forwardRef(function Legend({ className, ...props }, ref) {
     return _jsx("legend", { ref: ref, "data-slot": "legend", className: cn("mb-0 p-0 text-sm font-semibold tracking-[-0.005em] text-fg", className), ...props });
 });

package/dist/components/item.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Slot } from "radix-ui";
+import * as Slot from "radix-ui/slot";
 import { Check } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
@@ -16,7 +16,7 @@ import { Skeleton } from "./skeleton.js";
  * </ItemList>
  * ```
  */
-export const ItemList = React.forwardRef(function ItemList({ divided = true, inset, selectable, value, defaultValue, onValueChange, as = "ul", empty, className, children, ...props }, ref) {
+export const ItemList = /*#__PURE__*/ React.forwardRef(function ItemList({ divided = true, inset, selectable, value, defaultValue, onValueChange, as = "ul", empty, className, children, ...props }, ref) {
     const count = React.Children.toArray(children).length;
     const classes = cn("group/list m-0 grid list-none p-0", inset && "-mx-2 gap-0.5", 
     // hairline at the bottom of every row but the last (also through an asChild wrapper)
@@ -34,7 +34,7 @@ export const ItemList = React.forwardRef(function ItemList({ divided = true, ins
 /* ------------------------------------------------------------------ */
 /* Item                                                                 */
 /* ------------------------------------------------------------------ */
-export const itemRowVariants = cva([
+export const itemRowVariants = /*#__PURE__*/ cva([
     "group/item relative flex w-full min-w-0 gap-3 text-start text-[13px] text-fg outline-none",
     "px-(--card-p,1.25rem) group-data-inset/list:rounded-ui-sm group-data-inset/list:px-2",
     // states (also driven by the listbox island via aria-selected / aria-disabled)
@@ -67,7 +67,7 @@ export const itemRowVariants = cva([
  * </Item>
  * ```
  */
-export const Item = React.forwardRef(function Item({ value, asChild, interactive, disabled, size, align, as = "li", className, children, ...props }, ref) {
+export const Item = /*#__PURE__*/ React.forwardRef(function Item({ value, asChild, interactive, disabled, size, align, as = "li", className, children, ...props }, ref) {
     const option = value !== undefined;
     const rowClass = cn(itemRowVariants({ size, align, interactive: interactive ?? (asChild || option) }), className);
     const state = {

package/dist/components/kbd.js

@@ -5,7 +5,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
 import { formatKey, parseShortcut, shortcutKeys, useIsMac } from "../lib/use-hotkeys.js";
 import { useLabels } from "../lib/labels.js";
-export const kbdVariants = cva("ui-keycap inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-[calc(var(--radius)*0.42)] font-mono font-medium leading-none tabular", {
+export const kbdVariants = /*#__PURE__*/ cva("ui-keycap inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-[calc(var(--radius)*0.42)] font-mono font-medium leading-none tabular", {
     variants: {
         size: {
             sm: "h-[1.125rem] min-w-[1.125rem] px-1 text-[10.5px]",
@@ -85,7 +85,7 @@ function spokenKey(token, isMac) {
  * <Kbd keyName="mod" />   // ⌘ on macOS, Ctrl elsewhere
  * ```
  */
-export const Kbd = React.forwardRef(function Kbd({ keyName, size, variant, labels, className, children, ...props }, ref) {
+export const Kbd = /*#__PURE__*/ React.forwardRef(function Kbd({ keyName, size, variant, labels, className, children, ...props }, ref) {
     const isMac = useIsMac();
     const t = useLabels("kbd", kbdLabels, labels);
     let content = children;
@@ -112,7 +112,7 @@ export const Kbd = React.forwardRef(function Kbd({ keyName, size, variant, label
  * <KbdGroup keys={["g", "p"]} separator="then" />
  * ```
  */
-export const KbdGroup = React.forwardRef(function KbdGroup({ keys, separator, size, variant, labels, className, ...props }, ref) {
+export const KbdGroup = /*#__PURE__*/ React.forwardRef(function KbdGroup({ keys, separator, size, variant, labels, className, ...props }, ref) {
     const isMac = useIsMac();
     const tokens = typeof keys === "string" ? shortcutKeys(keys, isMac) : keys;
     return (_jsx("kbd", { ref: ref, dir: "ltr", "data-slot": "kbd-group", className: cn("inline-flex items-center gap-1 font-sans", className), ...props, children: tokens.map((k, i) => (_jsxs(React.Fragment, { children: [i > 0 && separator != null ? (_jsx("span", { "aria-hidden": typeof separator === "string" && /^[+\-–]$/.test(separator) ? true : undefined, className: "text-[11px] text-fg-subtle", children: separator })) : null, _jsx(Kbd, { keyName: k, size: size, variant: variant, labels: labels })] }, `${k}-${i}`))) }));

package/dist/components/list-layout.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import * as ToggleGroupPrimitive from "radix-ui/toggle-group";
 import { cva } from "class-variance-authority";
 import { SlidersHorizontal, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
@@ -35,11 +35,11 @@ const listLabels = {
     error: "Couldn't load this list",
     retry: "Try again",
 };
-const ListLayoutContext = React.createContext(null);
+const ListLayoutContext = /*#__PURE__*/ React.createContext(null);
 /* ------------------------------------------------------------------ */
 /* ListLayout                                                          */
 /* ------------------------------------------------------------------ */
-export const listLayoutVariants = cva("@container/list relative mx-auto flex w-full min-w-0 flex-col", {
+export const listLayoutVariants = /*#__PURE__*/ cva("@container/list relative mx-auto flex w-full min-w-0 flex-col", {
     variants: {
         width: {
             /** Edge to edge of the page area. */
@@ -70,7 +70,7 @@ export const listLayoutVariants = cva("@container/list relative mx-auto flex w-f
  *
  * Responds to its own width (container queries), so it behaves the same in a split view.
  */
-export const ListLayout = React.forwardRef(function ListLayout({ width = "full", stickyToolbar = true, stickyTop, className, style, ...props }, ref) {
+export const ListLayout = /*#__PURE__*/ React.forwardRef(function ListLayout({ width = "full", stickyToolbar = true, stickyTop, className, style, ...props }, ref) {
     const [bulkActive, setBulkActive] = React.useState(false);
     const toolbarRef = React.useRef(null);
     const ctx = React.useMemo(() => ({ stickyToolbar, bulkActive, setBulkActive, toolbarRef }), [stickyToolbar, bulkActive]);
@@ -82,7 +82,7 @@ const stickyBar = "sticky top-(--list-sticky-top,var(--topbar-h)) z-(--z-sticky)
  * The row above the content. Sticky under the top bar on the bar surface; while a selection is
  * active the `ListBulkBar` takes its place.
  */
-export const ListToolbar = React.forwardRef(function ListToolbar({ search, filters, filterCount, views, viewSwitch, actions, searchLabel, labels, className, children, ...props }, ref) {
+export const ListToolbar = /*#__PURE__*/ React.forwardRef(function ListToolbar({ search, filters, filterCount, views, viewSwitch, actions, searchLabel, labels, className, children, ...props }, ref) {
     const t = useLabels("list", listLabels, labels);
     const ctx = React.useContext(ListLayoutContext);
     const setRefs = React.useCallback((node) => {
@@ -102,7 +102,7 @@ export const ListToolbar = React.forwardRef(function ListToolbar({ search, filte
  * Table / grid / board switch: a segmented radio group (one tab stop, arrow keys move, Space selects). Labels
  * collapse to icons below ~640px of list width; the accessible name stays.
  */
-export const ListViewSwitch = React.forwardRef(function ListViewSwitch({ options, value: valueProp, defaultValue, onValueChange, label, labels, className, ...props }, ref) {
+export const ListViewSwitch = /*#__PURE__*/ React.forwardRef(function ListViewSwitch({ options, value: valueProp, defaultValue, onValueChange, label, labels, className, ...props }, ref) {
     const t = useLabels("list", listLabels, labels);
     const [inner, setInner] = React.useState(defaultValue ?? options[0]?.value ?? "");
     const value = valueProp ?? inner;
@@ -118,7 +118,7 @@ export const ListViewSwitch = React.forwardRef(function ListViewSwitch({ options
  * The selection bar. Presentational: the Data Table (or your list) owns the selection. Announces
  * "{n} selected" politely; Esc inside the bar clears the selection and focus returns to the toolbar.
  */
-export const ListBulkBar = React.forwardRef(function ListBulkBar({ count, total, onSelectAll, allSelected, onClear, labels, className, children, onKeyDown, ...props }, ref) {
+export const ListBulkBar = /*#__PURE__*/ React.forwardRef(function ListBulkBar({ count, total, onSelectAll, allSelected, onClear, labels, className, children, onKeyDown, ...props }, ref) {
     const t = useLabels("list", listLabels, labels);
     const f = useFormat();
     const ctx = React.useContext(ListLayoutContext);
@@ -155,7 +155,7 @@ export const ListBulkBar = React.forwardRef(function ListBulkBar({ count, total,
  * The content slot (table, grid or board) with every state. `refreshing` keeps the content and
  * shows a thin indeterminate bar; all states set `aria-busy` while work is pending.
  */
-export const ListContent = React.forwardRef(function ListContent({ state = "ready", empty, noResults, error, onRetry, onClearFilters, skeleton, skeletonRows = 6, resultCount, labels, className, children, ...props }, ref) {
+export const ListContent = /*#__PURE__*/ React.forwardRef(function ListContent({ state = "ready", empty, noResults, error, onRetry, onClearFilters, skeleton, skeletonRows = 6, resultCount, labels, className, children, ...props }, ref) {
     const t = useLabels("list", listLabels, labels);
     const busy = state === "loading" || state === "refreshing";
     // Announce state changes once (not on every render).
@@ -205,6 +205,6 @@ export const ListContent = React.forwardRef(function ListContent({ state = "read
     return (_jsxs("div", { ref: ref, "data-slot": "list-content", "data-state": state, "aria-busy": busy || undefined, className: cn("relative min-w-0 flex-1 py-4", className), ...props, children: [state === "refreshing" ? (_jsx(Progress, { "aria-label": t("refreshing"), value: null, size: "xs", className: "absolute inset-x-0 top-0 rounded-none bg-transparent" })) : null, _jsx("div", { className: cn(state === "refreshing" && "opacity-70 transition-opacity motion-reduce:transition-none"), children: body }), _jsx("div", { "aria-live": "polite", role: "status", className: "sr-only", children: announcement })] }));
 });
 /** The row under the content: `PaginationBar`, "Load more", a summary line. */
-export const ListFooter = React.forwardRef(function ListFooter({ className, ...props }, ref) {
+export const ListFooter = /*#__PURE__*/ React.forwardRef(function ListFooter({ className, ...props }, ref) {
     return _jsx("div", { ref: ref, "data-slot": "list-footer", className: cn("flex flex-wrap items-center gap-3 border-t border-line pt-3 pb-1", className), ...props });
 });

package/dist/components/menubar.d.ts

@@ -0,0 +1,96 @@
+import * as React from "react";
+import * as MenubarPrimitive from "radix-ui/menubar";
+import { type VariantProps } from "class-variance-authority";
+import type { MenuEntry } from "../lib/variants.js";
+export declare const menubarVariants: (props?: ({
+    variant?: "ghost" | "bar" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** One top-level menu in the data-driven form. */
+export interface MenubarMenuEntry {
+    id: string;
+    /** Trigger text ("File", "Edit", "View"…). */
+    label: React.ReactNode;
+    /** The menu's entries — the same `MenuEntry` model as Dropdown Menu, Context Menu and Command. */
+    items: MenuEntry[];
+    disabled?: boolean;
+    /** Hidden unless `can(permission)` is true (see `useCan`). */
+    permission?: string;
+}
+export interface MenubarProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>, VariantProps<typeof menubarVariants> {
+    /** Data-driven menus. Rendered before `children`. */
+    menus?: MenubarMenuEntry[];
+    /** Minimum panel width of every menu: `sm` 180px, `md` 220px. Default `md`. */
+    size?: "sm" | "md";
+}
+/**
+ * A desktop-app menu bar (WAI-ARIA `menubar`): File / Edit / View… One tab stop; ← → move between
+ * menus (and keep the open one open), ↓ / Enter / Space open, Esc closes, typeahead inside a menu.
+ *
+ * ```tsx
+ * <Menubar aria-label="Editor" menus={[
+ *   { id: "file", label: "File", items: [{ id: "new", label: "New document", shortcut: "mod+n", onSelect: create }] },
+ * ]} />
+ * ```
+ */
+export declare const Menubar: React.ForwardRefExoticComponent<MenubarProps & React.RefAttributes<HTMLDivElement>>;
+/** One menu: a `MenubarTrigger` plus its `MenubarContent`. `value` is needed only for a controlled bar. */
+export declare const MenubarMenu: typeof MenubarPrimitive.Menu;
+export declare const MenubarGroup: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenubarSub: React.FC<MenubarPrimitive.MenubarSubProps>;
+export declare const MenubarRadioGroup: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** The top-level button ("File"). */
+export declare const MenubarTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface MenubarContentProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content> {
+    /** Overrides the bar's `size` for this menu. */
+    size?: "sm" | "md";
+}
+/** A menu panel under its trigger. Portals into the nearest `ThemeScope`; only this first layer blurs in glass mode. */
+export declare const MenubarContent: React.ForwardRefExoticComponent<MenubarContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenubarItemProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> {
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Shortcut hint, e.g. `"mod+s"` (rendered with Kbd). Display only — bind it with `useHotkeys`. */
+    shortcut?: string | string[];
+    badge?: React.ReactNode;
+    tone?: "default" | "danger";
+    /** Reserve the indicator gutter so labels align with checkbox/radio items. */
+    inset?: boolean;
+}
+/** One command. `onSelect` fires on click, Enter and Space, then the menu closes (`event.preventDefault()` keeps it open). */
+export declare const MenubarItem: React.ForwardRefExoticComponent<MenubarItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenubarCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem> {
+    shortcut?: string | string[];
+    description?: React.ReactNode;
+}
+/** A toggle (`menuitemcheckbox`) — "Show ruler", "Word wrap". */
+export declare const MenubarCheckboxItem: React.ForwardRefExoticComponent<MenubarCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface MenubarRadioItemProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem> {
+    shortcut?: string | string[];
+    description?: React.ReactNode;
+}
+/** One choice inside a `MenubarRadioGroup` (`menuitemradio`) — zoom level, sort order. */
+export declare const MenubarRadioItem: React.ForwardRefExoticComponent<MenubarRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenubarLabel: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const MenubarSeparator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Trailing text hint (when you don't want keycaps). */
+export declare function MenubarShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+export interface MenubarSubTriggerProps extends React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> {
+    icon?: React.ReactNode;
+    inset?: boolean;
+}
+/** Opens a submenu on hover, Enter, Space or → (← in RTL). */
+export declare const MenubarSubTrigger: React.ForwardRefExoticComponent<MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+/** A submenu panel. One layer deeper, so it is opaque in glass mode. */
+export declare const MenubarSubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: "sm" | "md";
+} & React.RefAttributes<HTMLDivElement>>;
+/** Renders `MenuEntry[]` as menubar items (inside your own `MenubarContent`). */
+export declare function MenubarEntries({ items }: {
+    items: MenuEntry[];
+}): React.JSX.Element;
+/** Renders `MenubarMenuEntry[]` (what `Menubar menus` uses). Menus with no visible entries are dropped. */
+export declare function MenubarMenus({ menus }: {
+    menus: MenubarMenuEntry[];
+}): React.JSX.Element;