@vamos-ui/react 0.2.0 → 0.4.0

package/dist/components/carousel.js

@@ -27,6 +27,7 @@ const carouselLabels = {
     thumbs: "Slide thumbnails",
     empty: "Nothing to show yet",
     loading: "Loading slides",
+    marqueePause: "Pause scrolling",
 };
 const CarouselContext = React.createContext(null);
 function useCarouselContext(part) {
@@ -338,11 +339,13 @@ export const CarouselCounter = React.forwardRef(function CarouselCounter({ class
     return (_jsxs("span", { ref: ref, "data-slot": "carousel-counter", className: cn("tabular text-[13px] text-fg-muted", className), ...props, children: [_jsx("span", { className: "sr-only", children: c.t("counter", { index: c.nf.format(c.index + 1), total: c.nf.format(c.count) }) }), _jsxs("span", { "aria-hidden": true, children: [_jsx("span", { className: "font-medium text-fg", children: c.nf.format(c.index + 1) }), _jsx("span", { className: "mx-1 text-fg-subtle", children: "/" }), c.nf.format(c.count)] })] }));
 });
 /**
- * Endless logo band in pure CSS: no JS, renders with SSR. The items are listed once for assistive
- * tech; a duplicate track (aria-hidden) closes the loop. Reduced motion: static, scrollable row.
+ * Endless logo band in pure CSS: renders with SSR. The items are listed once for assistive tech;
+ * a duplicate track (`aria-hidden` + `inert`, so its links never take focus) closes the loop.
+ * Pauses on hover/focus and with its pause control. Reduced motion: static, scrollable row.
  */
-export function Marquee({ label, duration = 40, reverse, pauseOnHover = true, fade = true, gap = "lg", className, style, children, ...props }) {
+export function Marquee({ label, duration = 40, reverse, pauseOnHover = true, fade = true, gap = "lg", controls = true, pauseLabel, className, style, children, ...props }) {
+    const t = useLabels("carousel", carouselLabels, pauseLabel ? { marqueePause: pauseLabel } : undefined);
     const items = React.Children.toArray(children);
-    const track = (hidden) => (_jsx("ul", { "aria-hidden": hidden || undefined, "aria-label": hidden ? undefined : label, className: "vui-marquee-track flex shrink-0 items-center", children: items.map((child, i) => (_jsx("li", { className: "flex shrink-0 items-center", children: child }, i))) }));
-    return (_jsxs("div", { "data-slot": "marquee", "data-reverse": reverse ? "" : undefined, "data-pause-on-hover": pauseOnHover ? "" : undefined, "data-fade": fade ? "" : undefined, className: cn("vui-marquee flex overflow-hidden", className), style: { "--marquee-duration": `${duration}s`, "--marquee-gap": GAP[gap], ...style }, ...props, children: [track(false), track(true)] }));
+    const track = (hidden) => (_jsx("ul", { "aria-hidden": hidden || undefined, inert: hidden || undefined, "aria-label": hidden ? undefined : label, className: "vui-marquee-track flex shrink-0 items-center", children: items.map((child, i) => (_jsx("li", { className: "flex shrink-0 items-center", children: child }, i))) }));
+    return (_jsxs("div", { "data-slot": "marquee", "data-reverse": reverse ? "" : undefined, "data-pause-on-hover": pauseOnHover ? "" : undefined, "data-fade": fade ? "" : undefined, "data-controls": controls ? "" : undefined, className: cn("vui-marquee relative", className), style: { "--marquee-duration": `${duration}s`, "--marquee-gap": GAP[gap], ...style }, ...props, children: [_jsxs("div", { className: "vui-marquee-viewport flex overflow-hidden", children: [track(false), track(true)] }), controls ? (_jsxs("label", { className: "vui-marquee-toggle", children: [_jsx("input", { type: "checkbox", className: "vui-marquee-pause sr-only", "aria-label": t("marqueePause") }), _jsx(Pause, { "aria-hidden": true, className: "vui-marquee-icon-pause" }), _jsx(Play, { "aria-hidden": true, className: "vui-marquee-icon-play" })] })) : null] }));
 }

package/dist/components/collapsible.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+export interface CollapsibleProps extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> {
+}
+/**
+ * One show/hide region with its trigger (WAI-ARIA disclosure). Controlled (`open` / `onOpenChange`)
+ * or uncontrolled (`defaultOpen`). For several sections that coordinate, use Accordion.
+ *
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
+ *   <CollapsibleContent>…</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+export interface CollapsibleTriggerProps extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> {
+    /** Trailing chevron that turns when open. Default `true` (ignored with `asChild`). */
+    chevron?: boolean;
+    /** Leading icon. */
+    icon?: React.ReactNode;
+    /** Right-side summary while closed, e.g. "4 fields". Part of the button's name. */
+    meta?: React.ReactNode;
+}
+/**
+ * The toggle button (`aria-expanded`, `aria-controls`). Styled as a quiet full-width row; pass
+ * `asChild` to make any button (a Button, a link-styled text) the trigger instead.
+ */
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface CollapsibleContentProps extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> {
+}
+/**
+ * The hidden region. Animates its height (`ui-collapse`); no animation with
+ * `prefers-reduced-motion` or inside `data-motion="off"`. `forceMount` keeps it in the DOM while closed.
+ */
+export declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+/**
+ * One show/hide region with its trigger (WAI-ARIA disclosure). Controlled (`open` / `onOpenChange`)
+ * or uncontrolled (`defaultOpen`). For several sections that coordinate, use Accordion.
+ *
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>Advanced settings</CollapsibleTrigger>
+ *   <CollapsibleContent>…</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+export const Collapsible = React.forwardRef(function Collapsible({ className, ...props }, ref) {
+    return _jsx(CollapsiblePrimitive.Root, { ref: ref, "data-slot": "collapsible", className: cn("group/collapsible", className), ...props });
+});
+/**
+ * The toggle button (`aria-expanded`, `aria-controls`). Styled as a quiet full-width row; pass
+ * `asChild` to make any button (a Button, a link-styled text) the trigger instead.
+ */
+export const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger({ className, chevron = true, icon, meta, asChild, children, ...props }, ref) {
+    if (asChild) {
+        return (_jsx(CollapsiblePrimitive.Trigger, { ref: ref, "data-slot": "collapsible-trigger", asChild: true, className: className, ...props, children: children }));
+    }
+    return (_jsxs(CollapsiblePrimitive.Trigger, { ref: ref, "data-slot": "collapsible-trigger", className: cn("group/collapsible-trigger flex w-full min-w-0 items-center gap-2.5 rounded-ui-sm py-2 text-start text-sm font-medium text-fg outline-none transition-colors focus-ring", "hover:[&_[data-slot=collapsible-title]]:underline hover:[&_[data-slot=collapsible-title]]:decoration-line hover:[&_[data-slot=collapsible-title]]:underline-offset-4", "disabled:cursor-not-allowed disabled:opacity-45", "[&_svg]:size-4 [&_svg]:shrink-0", className), ...props, children: [icon ? (_jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 text-fg-muted", children: icon })) : null, _jsx("span", { "data-slot": "collapsible-title", className: "min-w-0 flex-1 text-pretty", children: children }), meta ? _jsx("span", { className: "sr-only", children: ", " }) : null, meta ? (_jsx("span", { "data-slot": "collapsible-meta", className: "tabular shrink-0 truncate text-[13px] font-normal text-fg-subtle", children: meta })) : null, chevron ? (_jsx(ChevronDown, { "aria-hidden": true, className: "text-fg-subtle transition-transform duration-200 group-data-[state=open]/collapsible-trigger:rotate-180 motion-reduce:transition-none in-data-[motion=off]:transition-none" })) : null] }));
+});
+/**
+ * The hidden region. Animates its height (`ui-collapse`); no animation with
+ * `prefers-reduced-motion` or inside `data-motion="off"`. `forceMount` keeps it in the DOM while closed.
+ */
+export const CollapsibleContent = React.forwardRef(function CollapsibleContent({ className, ...props }, ref) {
+    return _jsx(CollapsiblePrimitive.Content, { ref: ref, "data-slot": "collapsible-content", className: cn("ui-collapse in-data-[motion=off]:animate-none", className), ...props });
+});

package/dist/components/command.d.ts

@@ -102,7 +102,10 @@ export interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof
     icon?: React.ReactNode;
     /** Second line under the label. */
     description?: React.ReactNode;
-    /** `"mod+shift+n"` or `["mod","shift","n"]` — display only. */
+    /**
+     * `"mod+shift+n"` or `["mod","shift","n"]` — display only. An array without modifier keys is a
+     * key sequence (`["g","o"]` shows G then O).
+     */
     shortcut?: string | string[];
     /** Trailing meta (an app badge, a count). */
     badge?: React.ReactNode;
@@ -113,7 +116,10 @@ export interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof
 }
 /** One selectable row. Highlighted with the arrow keys; Enter or click runs `onSelect`. */
 export declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>;
-/** Shortcut keycaps at the end of an item. */
+/**
+ * Shortcut keycaps at the end of an item. A string or an array with modifiers is one combination
+ * (`"mod+k"`, `["mod","k"]`); an array of plain keys is a sequence (`["g","o"]` → G O).
+ */
 export declare function CommandShortcut({ keys, className }: {
     keys: string | string[];
     className?: string;

package/dist/components/command.js

@@ -87,9 +87,14 @@ export const CommandSeparator = React.forwardRef(function CommandSeparator({ cla
 export const CommandItem = React.forwardRef(function CommandItem({ className, icon, description, shortcut, badge, chevron, loading, children, ...props }, ref) {
     return (_jsxs(Cmdk.Item, { ref: ref, "data-slot": "command-item", "aria-busy": loading || undefined, className: cn(itemVariants({ size: "md" }), "min-h-[calc(var(--control-h)*0.95)] gap-2.5 px-2.5 data-[selected=true]:bg-selected", className), ...props, children: [loading ? (_jsx(Spinner, { size: "xs", className: "shrink-0" })) : icon ? (_jsx("span", { "aria-hidden": true, className: cn("flex shrink-0 items-center text-fg-muted", description && "self-start pt-0.5"), children: icon })) : null, _jsxs("span", { className: itemSlots.label, children: [children, description ? _jsx("span", { className: cn(itemSlots.description, "mt-0.5 truncate"), children: description }) : null] }), badge != null ? _jsx("span", { className: "ms-auto flex shrink-0 items-center ps-3", children: badge }) : null, shortcut ? _jsx(CommandShortcut, { keys: shortcut, className: badge == null ? "ms-auto" : undefined }) : null, chevron ? _jsx(ChevronRight, { "aria-hidden": true, className: cn("size-3.5! shrink-0 text-fg-subtle rtl:-scale-x-100", !shortcut && badge == null && "ms-auto") }) : null] }));
 });
-/** Shortcut keycaps at the end of an item. */
+const MODIFIER_KEYS = /^(mod|ctrl|control|meta|cmd|command|alt|option|shift)$/i;
+/**
+ * Shortcut keycaps at the end of an item. A string or an array with modifiers is one combination
+ * (`"mod+k"`, `["mod","k"]`); an array of plain keys is a sequence (`["g","o"]` → G O).
+ */
 export function CommandShortcut({ keys, className }) {
-    return _jsx(KbdGroup, { keys: Array.isArray(keys) ? keys.join("+") : keys, size: "sm", variant: "ghost", className: cn("shrink-0 ps-3", className) });
+    const sequence = Array.isArray(keys) && keys.length > 1 && !keys.some((k) => MODIFIER_KEYS.test(k));
+    return (_jsx(KbdGroup, { keys: sequence ? keys : Array.isArray(keys) ? keys.join("+") : keys, size: "sm", variant: "ghost", className: cn("shrink-0 ps-3", className) }));
 }
 /**
  * Command inside a top-anchored dialog (fullscreen on phones). Focus goes to the input; Esc closes

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`). */
@@ -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 = 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,7 +163,7 @@ 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) {

package/dist/components/input.d.ts

@@ -47,7 +47,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
  *   <Input maxLength={60} showCount />
  * </Field>
  * <Input leading={<Search />} placeholder="Search contacts" clearable />
- * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="acme" />
+ * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="northpoint" />
  * ```
  */
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input.js

@@ -36,7 +36,7 @@ const setNativeValue = (el, value) => {
  *   <Input maxLength={60} showCount />
  * </Field>
  * <Input leading={<Search />} placeholder="Search contacts" clearable />
- * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="acme" />
+ * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="northpoint" />
  * ```
  */
 export const Input = React.forwardRef(function Input(rawProps, forwardedRef) {

package/dist/components/menubar.d.ts

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
+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;

package/dist/components/menubar.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { useCan } from "../lib/provider.js";
+import { MenuCheckIcon, MenuEntries, MenuItemContent, MenuRadioDot, MenuSizeContext, menuContentVariants, menuIndicatorClass, menuItemClass, menuLabelClass, menuSeparatorClass, useVisibleEntries, } from "../lib/menu.js";
+/* ------------------------------------------------------------------ */
+/* Bar                                                                 */
+/* ------------------------------------------------------------------ */
+export const menubarVariants = cva("flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none]", {
+    variants: {
+        variant: {
+            /** A hairline surface strip — the top of an editor or a desktop-style app window. */
+            bar: "surface rounded-ui-lg p-1",
+            /** No chrome: sits inside a Top bar, toolbar or window header. */
+            ghost: "",
+        },
+    },
+    defaultVariants: { variant: "bar" },
+});
+/**
+ * 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 const Menubar = React.forwardRef(function Menubar({ className, variant, menus, size = "md", children, loop = true, ...props }, ref) {
+    return (_jsx(MenuSizeContext.Provider, { value: size, children: _jsxs(MenubarPrimitive.Root, { ref: ref, "data-slot": "menubar", "data-variant": variant ?? "bar", loop: loop, className: cn(menubarVariants({ variant }), className), ...props, children: [menus ? _jsx(MenubarMenus, { menus: menus }) : null, children] }) }));
+});
+/** One menu: a `MenubarTrigger` plus its `MenubarContent`. `value` is needed only for a controlled bar. */
+export const MenubarMenu = MenubarPrimitive.Menu;
+export const MenubarGroup = MenubarPrimitive.Group;
+export const MenubarSub = MenubarPrimitive.Sub;
+export const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+/** The top-level button ("File"). */
+export const MenubarTrigger = React.forwardRef(function MenubarTrigger({ className, ...props }, ref) {
+    return (_jsx(MenubarPrimitive.Trigger, { ref: ref, "data-slot": "menubar-trigger", className: cn("inline-flex h-[calc(var(--control-h)-0.5rem)] shrink-0 cursor-default select-none items-center gap-1.5 rounded-ui-sm px-2.5 text-[13px] font-medium text-fg outline-none", "transition-colors duration-100 hover:bg-hover focus-visible:bg-hover focus-ring", "data-highlighted:bg-hover data-[state=open]:bg-selected", "disabled:pointer-events-none disabled:opacity-45 data-disabled:pointer-events-none data-disabled:opacity-45", "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-fg-muted", className), ...props }));
+});
+/** A menu panel under its trigger. Portals into the nearest `ThemeScope`; only this first layer blurs in glass mode. */
+export const MenubarContent = React.forwardRef(function MenubarContent({ className, size: sizeProp, sideOffset = 6, alignOffset = -4, collisionPadding = 12, align = "start", ...props }, ref) {
+    const container = usePortalContainer();
+    const barSize = React.useContext(MenuSizeContext);
+    const size = sizeProp ?? barSize;
+    return (_jsx(MenubarPrimitive.Portal, { container: container, children: _jsx(MenuSizeContext.Provider, { value: size, children: _jsx(Layer, { asChild: true, children: _jsx(MenubarPrimitive.Content, { ref: ref, "data-slot": "menubar-content", sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, align: align, className: cn(menuContentVariants({ size }), "max-h-(--radix-menubar-content-available-height) origin-(--radix-menubar-content-transform-origin)", className), ...props }) }) }) }));
+});
+/** One command. `onSelect` fires on click, Enter and Space, then the menu closes (`event.preventDefault()` keeps it open). */
+export const MenubarItem = React.forwardRef(function MenubarItem({ className, icon, description, shortcut, badge, tone = "default", inset, asChild, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(MenubarPrimitive.Item, { ref: ref, "data-slot": "menubar-item", "data-tone": tone, asChild: asChild, className: menuItemClass({ size, tone, inset, className }), ...props, children: asChild ? (children) : (_jsx(MenuItemContent, { icon: icon, description: description, shortcut: shortcut, badge: badge, children: children })) }));
+});
+/** A toggle (`menuitemcheckbox`) — "Show ruler", "Word wrap". */
+export const MenubarCheckboxItem = React.forwardRef(function MenubarCheckboxItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(MenubarPrimitive.CheckboxItem, { ref: ref, "data-slot": "menubar-checkbox-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(MenuCheckIcon, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+/** One choice inside a `MenubarRadioGroup` (`menuitemradio`) — zoom level, sort order. */
+export const MenubarRadioItem = React.forwardRef(function MenubarRadioItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(MenubarPrimitive.RadioItem, { ref: ref, "data-slot": "menubar-radio-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(MenuRadioDot, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+export const MenubarLabel = React.forwardRef(function MenubarLabel({ className, inset, ...props }, ref) {
+    return _jsx(MenubarPrimitive.Label, { ref: ref, "data-slot": "menubar-label", className: cn(menuLabelClass, inset && "ps-8", className), ...props });
+});
+export const MenubarSeparator = React.forwardRef(function MenubarSeparator({ className, ...props }, ref) {
+    return _jsx(MenubarPrimitive.Separator, { ref: ref, "data-slot": "menubar-separator", className: cn(menuSeparatorClass, className), ...props });
+});
+/** Trailing text hint (when you don't want keycaps). */
+export function MenubarShortcut({ className, ...props }) {
+    return _jsx("span", { "data-slot": "menubar-shortcut", className: cn("ms-auto ps-4 font-mono text-[11px] tracking-wide text-fg-subtle", className), ...props });
+}
+/** Opens a submenu on hover, Enter, Space or → (← in RTL). */
+export const MenubarSubTrigger = React.forwardRef(function MenubarSubTrigger({ className, icon, inset, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(MenubarPrimitive.SubTrigger, { ref: ref, "data-slot": "menubar-sub-trigger", className: menuItemClass({ size, inset, className: cn("data-[state=open]:bg-hover", className) }), ...props, children: _jsx(MenuItemContent, { icon: icon, chevron: true, children: children }) }));
+});
+/** A submenu panel. One layer deeper, so it is opaque in glass mode. */
+export const MenubarSubContent = React.forwardRef(function MenubarSubContent({ className, size: sizeProp, sideOffset = 4, alignOffset = -5, collisionPadding = 12, ...props }, ref) {
+    const container = usePortalContainer();
+    const parentSize = React.useContext(MenuSizeContext);
+    const size = sizeProp ?? parentSize;
+    return (_jsx(MenubarPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsx(MenubarPrimitive.SubContent, { ref: ref, "data-slot": "menubar-sub-content", sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, className: cn(menuContentVariants({ size }), "max-h-(--radix-menubar-content-available-height)", className), ...props }) }) }));
+});
+/* ------------------------------------------------------------------ */
+/* Data-driven                                                         */
+/* ------------------------------------------------------------------ */
+const menubarParts = {
+    Item: MenubarItem,
+    CheckboxItem: MenubarCheckboxItem,
+    RadioGroup: MenubarRadioGroup,
+    RadioItem: MenubarRadioItem,
+    Label: MenubarLabel,
+    Separator: MenubarSeparator,
+    Group: MenubarGroup,
+    Sub: MenubarSub,
+    SubTrigger: MenubarSubTrigger,
+    SubContent: MenubarSubContent,
+};
+/** Renders `MenuEntry[]` as menubar items (inside your own `MenubarContent`). */
+export function MenubarEntries({ items }) {
+    const visible = useVisibleEntries(items);
+    return _jsx(MenuEntries, { entries: visible, parts: menubarParts });
+}
+function MenubarDataMenu({ menu }) {
+    const visible = useVisibleEntries(menu.items);
+    if (visible.length === 0)
+        return null;
+    return (_jsxs(MenubarMenu, { value: menu.id, children: [_jsx(MenubarTrigger, { disabled: menu.disabled, children: menu.label }), _jsx(MenubarContent, { children: _jsx(MenuEntries, { entries: visible, parts: menubarParts }) })] }));
+}
+/** Renders `MenubarMenuEntry[]` (what `Menubar menus` uses). Menus with no visible entries are dropped. */
+export function MenubarMenus({ menus }) {
+    const can = useCan();
+    return (_jsx(_Fragment, { children: menus
+            .filter((m) => !m.permission || can(m.permission))
+            .map((m) => (_jsx(MenubarDataMenu, { menu: m }, m.id))) }));
+}

package/dist/components/pin-map.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+export type MapPinTone = "accent" | "neutral" | "info" | "success" | "warning" | "danger";
+export interface MapPin {
+    id: string;
+    lat: number;
+    lng: number;
+    /** Accessible name and callout title. */
+    label: string;
+    /** Callout body (address, status, ETA). */
+    description?: React.ReactNode;
+    tone?: MapPinTone;
+    /** Size for `variant="bubble"` (visitors, orders). */
+    value?: number;
+    /** Live ring — vehicles en route, new visitors. Off under reduced motion. */
+    pulse?: boolean;
+    /** Small glyph inside the marker (pin variant), e.g. a 12px icon or initials. */
+    icon?: React.ReactNode;
+}
+export interface PinMapBounds {
+    north: number;
+    south: number;
+    west: number;
+    east: number;
+}
+export interface PinMapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    pins: MapPin[];
+    /** Visible area. Omit to fit every pin. Expanded to match `aspectRatio` so nothing distorts. */
+    bounds?: PinMapBounds;
+    /** Width ÷ height. Default `16 / 10`. */
+    aspectRatio?: number;
+    /** `"pin"` (default) markers, small `"dot"`s, or value-sized `"bubble"`s. */
+    variant?: "pin" | "dot" | "bubble";
+    selectedId?: string | null;
+    defaultSelectedId?: string | null;
+    onSelectedIdChange?: (id: string | null) => void;
+    /** Callout for the selected pin. Default: label + description. `false` hides it. */
+    callout?: false | ((pin: MapPin) => React.ReactNode);
+    /** Always show labels next to markers (few pins only). */
+    showLabels?: boolean;
+    /** Replace the drawn sheet with your own layer (a static tile image, an SVG of districts). */
+    backdrop?: React.ReactNode;
+    /** Hide the coordinate ticks and scale bar. */
+    bare?: boolean;
+    /** Required: what the map shows ("Stores in Istanbul"). */
+    "aria-label": string;
+}
+/**
+ * Markers on a projected sheet — stores, field jobs, vehicles, live visitors — without a tile
+ * provider. Pins are positioned in Web Mercator inside `bounds`; pass a `backdrop` to lay them
+ * over your own static map. Selection is controlled or not; arrow keys move to the nearest pin
+ * in that direction, Enter selects, Escape clears.
+ *
+ * ```tsx
+ * <PinMap aria-label="Stores" pins={stores.map((s) => ({ id: s.id, lat: s.lat, lng: s.lng, label: s.name }))}
+ *   selectedId={selected} onSelectedIdChange={setSelected} />
+ * ```
+ */
+export declare const PinMap: React.ForwardRefExoticComponent<PinMapProps & React.RefAttributes<HTMLDivElement>>;