@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/pin-map.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useFormat } from "../lib/locale.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+const mercY = (lat) => Math.log(Math.tan(Math.PI / 4 + (Math.max(-85, Math.min(85, lat)) * Math.PI) / 360));
+const toRad = (deg) => (deg * Math.PI) / 180;
+/** Percent string with fixed precision — identical on server and client. */
+const pct = (v) => `${(v * 100).toFixed(3)}%`;
+function fitBounds(pins, bounds, aspect) {
+    let b = bounds;
+    if (!b) {
+        if (pins.length === 0)
+            b = { north: 1, south: -1, west: -1, east: 1 };
+        else {
+            const lats = pins.map((p) => p.lat);
+            const lngs = pins.map((p) => p.lng);
+            const [n, s, w, e] = [Math.max(...lats), Math.min(...lats), Math.min(...lngs), Math.max(...lngs)];
+            const padLat = Math.max((n - s) * 0.14, 0.01);
+            const padLng = Math.max((e - w) * 0.1, 0.01);
+            b = { north: n + padLat, south: s - padLat, west: w - padLng, east: e + padLng };
+        }
+    }
+    // Expand the short side so the Mercator projection keeps true shapes at this aspect ratio.
+    const xSpan = toRad(b.east - b.west);
+    const ySpan = mercY(b.north) - mercY(b.south);
+    if (xSpan / ySpan < aspect) {
+        const extra = (ySpan * aspect - xSpan) / 2;
+        const d = (extra * 180) / Math.PI;
+        return { ...b, west: b.west - d, east: b.east + d };
+    }
+    const targetY = xSpan / aspect;
+    const mid = (mercY(b.north) + mercY(b.south)) / 2;
+    const inv = (y) => (Math.atan(Math.exp(y)) * 360) / Math.PI - 90;
+    return { ...b, north: inv(mid + targetY / 2), south: inv(mid - targetY / 2) };
+}
+const toneFill = {
+    accent: "bg-accent text-accent-fg",
+    neutral: "bg-fg-muted text-scene",
+    info: "bg-info text-scene",
+    success: "bg-success text-scene",
+    warning: "bg-warning text-scene",
+    danger: "bg-danger text-scene",
+};
+const toneVar = {
+    accent: "var(--accent)",
+    neutral: "var(--fg-muted)",
+    info: "var(--info)",
+    success: "var(--success)",
+    warning: "var(--warning)",
+    danger: "var(--danger)",
+};
+/** A tidy step for ticks: 0.01, 0.02, 0.05, 0.1 … */
+function niceStep(span, target) {
+    const raw = span / target;
+    const pow = 10 ** Math.floor(Math.log10(raw));
+    const m = raw / pow;
+    return (m < 1.5 ? 1 : m < 3.5 ? 2 : m < 7.5 ? 5 : 10) * pow;
+}
+/**
+ * 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 const PinMap = React.forwardRef(function PinMap({ pins, bounds, aspectRatio = 16 / 10, variant = "pin", selectedId: selectedProp, defaultSelectedId = null, onSelectedIdChange, callout, showLabels, backdrop, bare, className, style, children, ...props }, ref) {
+    const f = useFormat();
+    const [selectedId, setSelectedId] = useControllableState({ value: selectedProp, defaultValue: defaultSelectedId, onChange: onSelectedIdChange, name: "PinMap" });
+    const [focusId, setFocusId] = React.useState(null);
+    const pinRefs = React.useRef(new Map());
+    const calloutId = React.useId();
+    const b = React.useMemo(() => fitBounds(pins, bounds, aspectRatio), [pins, bounds, aspectRatio]);
+    const yTop = mercY(b.north);
+    const ySpan = yTop - mercY(b.south);
+    const project = React.useCallback((lat, lng) => ({ x: (lng - b.west) / (b.east - b.west), y: (yTop - mercY(lat)) / ySpan }), [b, yTop, ySpan]);
+    const placed = React.useMemo(() => pins.map((p) => ({ pin: p, ...project(p.lat, p.lng) })), [pins, project]);
+    const maxValue = Math.max(1, ...pins.map((p) => p.value ?? 0));
+    const tabStop = focusId && pins.some((p) => p.id === focusId) ? focusId : selectedId && pins.some((p) => p.id === selectedId) ? selectedId : pins[0]?.id;
+    const moveFocus = (id) => {
+        if (!id)
+            return;
+        setFocusId(id);
+        pinRefs.current.get(id)?.focus();
+    };
+    const onKeyDown = (e, from) => {
+        const dir = { ArrowRight: [1, 0], ArrowLeft: [-1, 0], ArrowDown: [0, 1], ArrowUp: [0, -1] }[e.key];
+        if (dir) {
+            e.preventDefault();
+            const rtl = getComputedStyle(e.currentTarget).direction === "rtl" && dir[0] !== 0;
+            const [dx, dy] = rtl ? [-dir[0], dir[1]] : dir;
+            let best;
+            let bestScore = Infinity;
+            for (const p of placed) {
+                if (p.pin.id === from.pin.id)
+                    continue;
+                const vx = (p.x - from.x) * aspectRatio;
+                const vy = p.y - from.y;
+                const along = vx * dx + vy * dy;
+                if (along <= 0.0001)
+                    continue;
+                const across = Math.abs(vx * dy - vy * dx);
+                const score = along + across * 2;
+                if (score < bestScore) {
+                    bestScore = score;
+                    best = p;
+                }
+            }
+            moveFocus(best?.pin.id);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            moveFocus(pins[0]?.id);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            moveFocus(pins.at(-1)?.id);
+        }
+        else if (e.key === "Escape" && selectedId) {
+            e.preventDefault();
+            setSelectedId(null);
+        }
+    };
+    // Ticks and scale bar.
+    const latStep = niceStep(b.north - b.south, 4);
+    const lngStep = niceStep(b.east - b.west, 6);
+    const latTicks = [];
+    for (let v = Math.ceil(b.south / latStep) * latStep; v <= b.north; v += latStep)
+        latTicks.push(Number(v.toFixed(6)));
+    const lngTicks = [];
+    for (let v = Math.ceil(b.west / lngStep) * lngStep; v <= b.east; v += lngStep)
+        lngTicks.push(Number(v.toFixed(6)));
+    const decimals = Math.max(0, -Math.floor(Math.log10(Math.min(latStep, lngStep))));
+    const widthKm = (b.east - b.west) * 111.32 * Math.cos(toRad((b.north + b.south) / 2));
+    const scaleKm = niceStep(widthKm, 5);
+    const scaleShare = scaleKm / widthKm;
+    const scaleLabel = scaleKm >= 1 ? f.number(scaleKm, { style: "unit", unit: "kilometer", unitDisplay: "short" }) : f.number(Math.round(scaleKm * 1000), { style: "unit", unit: "meter", unitDisplay: "short" });
+    const selected = placed.find((p) => p.pin.id === selectedId);
+    const renderCallout = callout === false ? null : (callout ?? ((p) => (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-[13px] font-medium text-fg", children: p.label }), p.description ? _jsx("div", { className: "mt-0.5 text-xs text-fg-muted", children: p.description }) : null] }))));
+    return (_jsxs("div", { ref: ref, role: "group", "data-slot": "pin-map", className: cn("relative isolate w-full overflow-hidden rounded-ui border border-line bg-surface-2 select-none", className), style: { aspectRatio: String(aspectRatio), ...style }, ...props, children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-0 -z-10", children: backdrop ?? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-[radial-gradient(color-mix(in_oklch,var(--fg)_14%,transparent)_0.8px,transparent_1px)] bg-[length:14px_14px] opacity-70" }), _jsxs("svg", { className: "absolute inset-0 size-full", preserveAspectRatio: "none", viewBox: "0 0 100 100", children: [latTicks.map((v) => {
+                                    const y = project(v, b.west).y * 100;
+                                    return _jsx("line", { x1: "0", x2: "100", y1: y, y2: y, vectorEffect: "non-scaling-stroke", stroke: "var(--line)", strokeWidth: "1" }, `la${v}`);
+                                }), lngTicks.map((v) => {
+                                    const x = project(b.north, v).x * 100;
+                                    return _jsx("line", { y1: "0", y2: "100", x1: x, x2: x, vectorEffect: "non-scaling-stroke", stroke: "var(--line)", strokeWidth: "1" }, `lo${v}`);
+                                })] })] })) }), !bare ? (_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 font-mono text-[9.5px] text-fg-subtle tabular", children: [latTicks.map((v) => (_jsxs("span", { className: "absolute start-1.5 -translate-y-full pb-0.5", style: { top: pct(project(v, b.west).y) }, children: [Math.abs(v).toFixed(decimals), "\u00B0", v >= 0 ? "N" : "S"] }, `tl${v}`))), lngTicks.slice(1).map((v) => (_jsxs("span", { className: "absolute top-1.5 ps-1", style: { left: pct(project(b.north, v).x) }, children: [Math.abs(v).toFixed(decimals), "\u00B0", v >= 0 ? "E" : "W"] }, `tg${v}`))), _jsxs("span", { className: "absolute inset-x-3 bottom-2.5 flex flex-col items-end gap-1", children: [_jsx("span", { children: scaleLabel }), _jsx("span", { className: "block h-1 border-x border-b border-fg-subtle", style: { width: pct(scaleShare) } })] })] })) : null, _jsxs("div", { className: "absolute inset-0", children: [placed.map(({ pin, x, y }) => {
+                        const tone = pin.tone ?? "accent";
+                        const isSelected = pin.id === selectedId;
+                        const size = variant === "bubble" ? Math.round(10 + Math.sqrt((pin.value ?? 0) / maxValue) * 34) : variant === "dot" ? 10 : 22;
+                        return (_jsxs("button", { ref: (el) => {
+                                if (el)
+                                    pinRefs.current.set(pin.id, el);
+                                else
+                                    pinRefs.current.delete(pin.id);
+                            }, type: "button", "data-slot": "pin-map-pin", "data-selected": isSelected || undefined, "aria-pressed": isSelected, "aria-label": pin.label, "aria-describedby": isSelected && renderCallout ? calloutId : undefined, tabIndex: pin.id === tabStop ? 0 : -1, onFocus: () => setFocusId(pin.id), onClick: () => setSelectedId(isSelected ? null : pin.id), onKeyDown: (e) => onKeyDown(e, { pin, x, y }), className: cn("group/pin absolute grid -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]", isSelected ? "z-20" : "z-10 hover:z-20 focus-visible:z-20"), style: { left: pct(x), top: pct(y), width: Math.max(size, 24), height: Math.max(size, 24) }, children: [pin.pulse ? (_jsx("span", { "aria-hidden": "true", className: "absolute rounded-full opacity-60 motion-safe:animate-ping", style: { width: Math.min(size, 22), height: Math.min(size, 22), background: toneVar[tone] } })) : null, variant === "bubble" ? (_jsx("span", { "aria-hidden": "true", className: "rounded-full border transition-transform duration-200 group-hover/pin:scale-105 motion-reduce:transition-none", style: {
+                                        width: size,
+                                        height: size,
+                                        background: `color-mix(in oklch, ${toneVar[tone]} ${isSelected ? 55 : 30}%, transparent)`,
+                                        borderColor: toneVar[tone],
+                                    } })) : (_jsx("span", { "aria-hidden": "true", className: cn("relative grid place-items-center rounded-full ring-2 ring-[var(--surface-solid)] shadow-[0_1px_3px_rgb(0_0_0/0.25)] transition-transform duration-200 group-hover/pin:scale-110 motion-reduce:transition-none [&_svg]:size-3", toneFill[tone], isSelected && "scale-125 ring-[var(--fg)]"), style: { width: variant === "dot" ? 9 : 18, height: variant === "dot" ? 9 : 18 }, children: variant === "pin" ? pin.icon : null })), showLabels ? (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute start-full ms-0.5 rounded-ui-sm bg-[color-mix(in_oklch,var(--surface-solid)_82%,transparent)] px-1 text-[11px] font-medium whitespace-nowrap text-fg", children: pin.label })) : null] }, pin.id));
+                    }), selected && renderCallout ? (_jsx("div", { id: calloutId, "data-slot": "pin-map-callout", className: cn("surface-popover ui-pop pointer-events-none absolute z-30 w-max max-w-56 -translate-x-1/2 rounded-ui px-3 py-2", selected.y < 0.35 ? "mt-4" : "-translate-y-full -mt-4"), style: { left: `clamp(7rem, ${pct(selected.x)}, calc(100% - 7rem))`, top: pct(selected.y) }, children: renderCallout(selected.pin) })) : null] }), children] }));
+});

package/dist/components/popover.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+/** Root. Controlled (`open` / `onOpenChange`) or uncontrolled (`defaultOpen`). */
+export declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Position the content against something other than the trigger. */
+export declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+/** Closes the popover; use `asChild` with a Button. */
+export declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const popoverContentVariants: (props?: ({
+    size?: "auto" | "trigger" | "sm" | "md" | "lg" | null | undefined;
+    padded?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, VariantProps<typeof popoverContentVariants> {
+    /** Show the pointer arrow. Default `false`. */
+    arrow?: boolean;
+}
+/**
+ * The floating panel. Portals into the nearest `ThemeScope`, sets the layer depth
+ * (only the first layer blurs in glass mode; a popover inside a dialog turns opaque),
+ * and is labelled by its `PopoverTitle` when one is rendered.
+ */
+export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Heading; becomes the popover's accessible name. */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Trailing element (a close button, a badge). */
+    action?: React.ReactNode;
+}
+/** Title + optional description at the top of the content. */
+export declare const PopoverHeader: React.ForwardRefExoticComponent<PopoverHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/** Heading inside the content; wired to `aria-labelledby`. */
+export declare const PopoverTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+export declare function PopoverDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+/** Bottom row for actions. Bleeds to the panel edge with a hairline on top. */
+export declare const PopoverFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/popover.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Popover as PopoverPrimitive } 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 { FloatingArrow } from "../lib/floating-arrow.js";
+/** Root. Controlled (`open` / `onOpenChange`) or uncontrolled (`defaultOpen`). */
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+/** Position the content against something other than the trigger. */
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+/** Closes the popover; use `asChild` with a Button. */
+export const PopoverClose = PopoverPrimitive.Close;
+export const popoverContentVariants = cva(["surface-popover ui-pop z-(--z-popover) rounded-ui-lg outline-none", "max-h-(--radix-popover-content-available-height) overflow-y-auto overscroll-contain"], {
+    variants: {
+        size: {
+            auto: "w-auto max-w-[calc(100vw-1.5rem)]",
+            sm: "w-64 max-w-[calc(100vw-1.5rem)]",
+            md: "w-80 max-w-[calc(100vw-1.5rem)]",
+            lg: "w-[26rem] max-w-[calc(100vw-1.5rem)]",
+            /** Same width as the trigger (lists, comboboxes). */
+            trigger: "w-(--radix-popover-trigger-width) min-w-40",
+        },
+        padded: {
+            true: "p-(--popover-p) [--popover-p:calc(var(--gap)*0.85)]",
+            false: "p-0 [--popover-p:0px]",
+        },
+    },
+    defaultVariants: { size: "md", padded: true },
+});
+const PopoverTitleContext = React.createContext(null);
+/**
+ * The floating panel. Portals into the nearest `ThemeScope`, sets the layer depth
+ * (only the first layer blurs in glass mode; a popover inside a dialog turns opaque),
+ * and is labelled by its `PopoverTitle` when one is rendered.
+ */
+export const PopoverContent = React.forwardRef(function PopoverContent({ className, size, padded, arrow = false, sideOffset = 6, collisionPadding = 12, align = "center", children, ...props }, ref) {
+    const container = usePortalContainer();
+    const titleId = React.useId();
+    const [hasTitle, setHasTitle] = React.useState(false);
+    const titleCtx = React.useMemo(() => ({ id: titleId, register: setHasTitle }), [titleId]);
+    return (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { ref: ref, "data-slot": "popover-content", sideOffset: sideOffset, collisionPadding: collisionPadding, align: align, "aria-labelledby": hasTitle ? titleId : undefined, className: cn(popoverContentVariants({ size, padded }), className), ...props, children: [_jsx(PopoverTitleContext.Provider, { value: titleCtx, children: children }), arrow ? (_jsx(PopoverPrimitive.Arrow, { asChild: true, width: 14, height: 7, children: _jsx(FloatingArrow, {}) })) : null] }) }) }));
+});
+/** Title + optional description at the top of the content. */
+export const PopoverHeader = React.forwardRef(function PopoverHeader({ title, description, action, className, children, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, "data-slot": "popover-header", className: cn("mb-3 flex items-start gap-3", className), ...props, children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [title != null ? _jsx(PopoverTitle, { children: title }) : null, description != null ? _jsx(PopoverDescription, { children: description }) : null, children] }), action ? _jsx("div", { className: "-me-1 -mt-1 shrink-0", children: action }) : null] }));
+});
+/** Heading inside the content; wired to `aria-labelledby`. */
+export const PopoverTitle = React.forwardRef(function PopoverTitle({ className, id, ...props }, ref) {
+    const ctx = React.useContext(PopoverTitleContext);
+    const register = ctx?.register;
+    React.useEffect(() => {
+        if (!register || id)
+            return;
+        register(true);
+        return () => register(false);
+    }, [register, id]);
+    return _jsx("h3", { ref: ref, id: id ?? ctx?.id, "data-slot": "popover-title", className: cn("text-sm font-semibold leading-tight tracking-[-0.005em] text-fg", className), ...props });
+});
+export function PopoverDescription({ className, ...props }) {
+    return _jsx("p", { "data-slot": "popover-description", className: cn("text-[13px] leading-snug text-fg-muted", className), ...props });
+}
+/** Bottom row for actions. Bleeds to the panel edge with a hairline on top. */
+export const PopoverFooter = React.forwardRef(function PopoverFooter({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "data-slot": "popover-footer", className: cn("-mx-(--popover-p) -mb-(--popover-p) mt-4 flex items-center justify-end gap-2 border-t border-line px-(--popover-p) py-[calc(var(--popover-p)*0.7)]", className), ...props }));
+});

package/dist/components/progress.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+export type ProgressTone = "accent" | "success" | "warning" | "danger" | "auto";
+declare const progressLabels: {
+    of: string;
+    loading: string;
+};
+interface SharedProgressProps {
+    /** Current value. `null` / `undefined` → indeterminate. Values above `max` are allowed (quota overrun). */
+    value?: number | null;
+    /** Default 100. */
+    max?: number;
+    /**
+     * `"accent"` (default; turns success when complete), a status colour, or `"auto"` for quotas:
+     * above 80% warning, at or above 100% danger.
+     */
+    tone?: ProgressTone;
+    /** How the value reads (visible and `aria-valuetext`): `"42%"` or `"1,240 of 5,000"`. Default `"percent"`. */
+    display?: "percent" | "fraction";
+    /** Override the announced value text entirely. */
+    valueText?: string;
+    labels?: Partial<typeof progressLabels>;
+}
+export declare const progressTrackVariants: (props?: ({
+    size?: "sm" | "md" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ProgressProps extends SharedProgressProps, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 2 / 4 / 8 px. Default `"sm"`. */
+    size?: "xs" | "sm" | "md";
+    /** Visible label above the bar (linked with `aria-labelledby`). Without it, pass `aria-label`. */
+    label?: React.ReactNode;
+    /** Show the value at the end of the label row, or render your own. */
+    showValue?: boolean | ((value: number, max: number) => React.ReactNode);
+    /** Small text under the bar ("About 2 minutes left"). */
+    hint?: React.ReactNode;
+}
+/**
+ * Task progress or quota use. `role="progressbar"` with `aria-valuenow/min/max` and a localized
+ * `aria-valuetext` ("42%" in English, "%42" in Turkish). Fills from the inline start (right in RTL).
+ *
+ * ```tsx
+ * <Progress label="Uploading 4 files" value={42} showValue />
+ * <Progress label="Contacts imported" value={1240} max={5000} display="fraction" showValue />
+ * <Progress label="Storage" value={9.2} max={10} tone="auto" />
+ * <Progress aria-label="Loading" value={null} />
+ * ```
+ */
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+declare const CIRCLE: {
+    readonly sm: {
+        readonly px: 18;
+        readonly stroke: 2.5;
+    };
+    readonly md: {
+        readonly px: 40;
+        readonly stroke: 3.5;
+    };
+    readonly lg: {
+        readonly px: 64;
+        readonly stroke: 4.5;
+    };
+};
+export interface ProgressCircleProps extends SharedProgressProps, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 18 / 40 / 64 px. `sm` sits inline next to text. Default `"md"`. */
+    size?: keyof typeof CIRCLE;
+    /** Show the value in the centre (md and lg). Default `true` for lg. */
+    showValue?: boolean;
+    /** Content in the centre instead of the value (an icon, "3/5"). */
+    children?: React.ReactNode;
+}
+/**
+ * Compact circular progress: profile completion, a step ring, an inline upload. Needs an
+ * accessible name (`aria-label` or `aria-labelledby`).
+ *
+ * ```tsx
+ * <ProgressCircle aria-label="Profile complete" value={72} size="lg" />
+ * ```
+ */
+export declare const ProgressCircle: React.ForwardRefExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/progress.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+const progressLabels = { of: "{value} of {max}", loading: "Loading…" };
+function resolveTone(tone, ratio) {
+    if (tone === "auto")
+        return ratio == null ? "accent" : ratio >= 1 ? "danger" : ratio > 0.8 ? "warning" : "accent";
+    if (tone === "accent" && ratio != null && ratio >= 1)
+        return "success";
+    return tone;
+}
+function useProgressModel({ value, max = 100, tone = "accent", display = "percent", valueText, labels }) {
+    const f = useFormat();
+    const t = useLabels("progress", progressLabels, labels);
+    const indeterminate = value == null || Number.isNaN(value);
+    const safeMax = max > 0 ? max : 100;
+    const ratio = indeterminate ? null : Math.max(0, value) / safeMax;
+    const fill = ratio == null ? 0 : Math.min(1, ratio);
+    const text = indeterminate
+        ? undefined
+        : (valueText ?? (display === "fraction" ? t("of", { value: f.number(value), max: f.number(safeMax) }) : f.percent(ratio, { maximumFractionDigits: 0 })));
+    return { indeterminate, ratio, fill, text, max: safeMax, tone: resolveTone(tone, ratio), t };
+}
+const fillColor = {
+    accent: "bg-accent",
+    success: "bg-success",
+    warning: "bg-warning",
+    danger: "bg-danger",
+};
+const strokeColor = {
+    accent: "stroke-accent-ink",
+    success: "stroke-success",
+    warning: "stroke-warning",
+    danger: "stroke-danger",
+};
+const valueColor = {
+    accent: "text-fg",
+    success: "text-success",
+    warning: "text-warning",
+    danger: "text-danger",
+};
+/* ------------------------------------------------------------------ */
+/* Linear                                                               */
+/* ------------------------------------------------------------------ */
+export const progressTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-track", {
+    variants: {
+        size: { xs: "h-0.5", sm: "h-1", md: "h-2" },
+    },
+    defaultVariants: { size: "sm" },
+});
+/**
+ * Task progress or quota use. `role="progressbar"` with `aria-valuenow/min/max` and a localized
+ * `aria-valuetext` ("42%" in English, "%42" in Turkish). Fills from the inline start (right in RTL).
+ *
+ * ```tsx
+ * <Progress label="Uploading 4 files" value={42} showValue />
+ * <Progress label="Contacts imported" value={1240} max={5000} display="fraction" showValue />
+ * <Progress label="Storage" value={9.2} max={10} tone="auto" />
+ * <Progress aria-label="Loading" value={null} />
+ * ```
+ */
+export const Progress = React.forwardRef(function Progress({ value, max, tone, display, valueText, labels, size, label, showValue, hint, className, id, ...props }, ref) {
+    const m = useProgressModel({ value, max, tone, display, valueText, labels });
+    const autoId = React.useId();
+    const baseId = id ?? `progress${autoId.replace(/:/g, "")}`;
+    const labelId = label ? `${baseId}-label` : undefined;
+    const hintId = hint ? `${baseId}-hint` : undefined;
+    const shownValue = m.indeterminate || !showValue ? null : typeof showValue === "function" ? showValue(value, m.max) : m.text;
+    const bar = (_jsx("div", { ref: label || hint ? undefined : ref, id: label || hint ? undefined : id, role: "progressbar", "aria-labelledby": labelId, "aria-describedby": hintId, "aria-valuemin": 0, "aria-valuemax": m.indeterminate ? undefined : m.max, "aria-valuenow": m.indeterminate ? undefined : Math.min(value, m.max), "aria-valuetext": m.indeterminate ? (label ? undefined : m.t("loading")) : m.text, "data-slot": "progress", "data-state": m.indeterminate ? "indeterminate" : m.ratio >= 1 ? "complete" : "loading", "data-tone": m.tone, className: cn("vui-progress", progressTrackVariants({ size }), !(label || hint) && className), ...(label || hint ? {} : props), children: _jsx("div", { "data-slot": "progress-indicator", className: cn("vui-progress-indicator h-full w-full origin-left rounded-full rtl:origin-right", fillColor[m.tone]), style: m.indeterminate ? undefined : { transform: `scaleX(${m.fill})` } }) }));
+    if (!label && !hint && !shownValue)
+        return bar;
+    return (_jsxs("div", { ref: ref, id: id, "data-slot": "progress-field", className: cn("grid w-full gap-1.5", className), ...props, children: [label || shownValue ? (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-[13px]", children: [label ? (_jsx("span", { id: labelId, className: "min-w-0 truncate font-medium text-fg", children: label })) : (_jsx("span", {})), shownValue ? (_jsx("span", { "aria-hidden": true, className: cn("shrink-0 font-mono text-xs tabular", valueColor[m.tone] === "text-fg" ? "text-fg-muted" : valueColor[m.tone]), children: shownValue })) : null] })) : null, bar, hint ? (_jsx("p", { id: hintId, className: "text-xs text-fg-muted", children: hint })) : null] }));
+});
+/* ------------------------------------------------------------------ */
+/* Circular                                                             */
+/* ------------------------------------------------------------------ */
+const CIRCLE = { sm: { px: 18, stroke: 2.5 }, md: { px: 40, stroke: 3.5 }, lg: { px: 64, stroke: 4.5 } };
+/**
+ * Compact circular progress: profile completion, a step ring, an inline upload. Needs an
+ * accessible name (`aria-label` or `aria-labelledby`).
+ *
+ * ```tsx
+ * <ProgressCircle aria-label="Profile complete" value={72} size="lg" />
+ * ```
+ */
+export const ProgressCircle = React.forwardRef(function ProgressCircle({ value, max, tone, display, valueText, labels, size = "md", showValue, children, className, ...props }, ref) {
+    const m = useProgressModel({ value, max, tone, display, valueText, labels });
+    const { px, stroke } = CIRCLE[size];
+    const r = (px - stroke) / 2;
+    const showCenter = size !== "sm" && (children != null || (showValue ?? size === "lg"));
+    const pct = m.indeterminate ? 26 : m.fill * 100;
+    return (_jsxs("div", { ref: ref, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": m.indeterminate ? undefined : m.max, "aria-valuenow": m.indeterminate ? undefined : Math.min(value, m.max), "aria-valuetext": m.indeterminate ? m.t("loading") : m.text, "data-slot": "progress-circle", "data-state": m.indeterminate ? "indeterminate" : m.ratio >= 1 ? "complete" : "loading", "data-tone": m.tone, className: cn("vui-progress-circle relative inline-flex shrink-0 items-center justify-center", className), style: { width: px, height: px }, ...props, children: [_jsxs("svg", { width: px, height: px, viewBox: `0 0 ${px} ${px}`, "aria-hidden": true, focusable: "false", className: "-rotate-90 rtl:-scale-y-100", children: [_jsx("circle", { cx: px / 2, cy: px / 2, r: r, fill: "none", strokeWidth: stroke, className: "stroke-track" }), _jsx("g", { className: "vui-progress-arc", children: _jsx("circle", { cx: px / 2, cy: px / 2, r: r, fill: "none", strokeWidth: stroke, strokeLinecap: "round", pathLength: 100, strokeDasharray: `${pct} 100`, className: cn(strokeColor[m.tone], "transition-[stroke-dasharray] duration-300 motion-reduce:transition-none", pct === 0 && "opacity-0") }) })] }), showCenter ? (_jsx("span", { "aria-hidden": true, className: cn("absolute inset-0 flex items-center justify-center font-mono tabular", size === "lg" ? "text-[13px] font-medium" : "text-[10px]", valueColor[m.tone]), children: children ?? (m.indeterminate ? null : display === "fraction" ? `${value}/${m.max}` : m.text) })) : null] }));
+});

package/dist/components/qr-code.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { encodeQr, qrPath, type QrErrorCorrection, type QrMatrix } from "./_qr-core.js";
+export { encodeQr, qrPath, type QrErrorCorrection, type QrMatrix };
+export interface QrCodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Text to encode (URL, otpauth:// URI, Wi-Fi string…). UTF-8, byte mode. */
+    value: string;
+    /** Accessible name — say what scanning does: "QR code to add Kiln & Linen to your authenticator app". */
+    "aria-label": string;
+    /** `"M"` (default) recovers ~15% damage; a centre mark switches to `"H"` automatically. */
+    errorCorrection?: QrErrorCorrection;
+    /** Rendered width (px or any CSS length). Default `176`. */
+    size?: number | string;
+    /**
+     * Quiet zone in modules. Default `4` without a plate, `2` on the plate (the plate's padding
+     * adds the rest). Scanners need light space around the code.
+     */
+    margin?: number;
+    /**
+     * Draw the code on a light plate (default). Codes scan most reliably dark-on-light, so the plate
+     * stays light in dark mode. `false` uses the current text colour on a transparent background.
+     */
+    plate?: boolean;
+    /** Shown when `value` is too long for version 40. Default "Too long for a QR code". */
+    fallback?: React.ReactNode;
+    /** Small mark in the centre (logo, icon). Keep it under ~20% of the width. */
+    children?: React.ReactNode;
+}
+/**
+ * A QR code drawn as one SVG path — for two-factor enrolment, invite links, tickets and
+ * payment slips. Encoded on the server or client with no dependency; works in RSC.
+ *
+ * ```tsx
+ * <QrCode value={otpauthUri} aria-label="QR code for your authenticator app" />
+ * ```
+ */
+export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/qr-code.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { encodeQr, qrPath } from "./_qr-core.js";
+export { encodeQr, qrPath };
+/**
+ * A QR code drawn as one SVG path — for two-factor enrolment, invite links, tickets and
+ * payment slips. Encoded on the server or client with no dependency; works in RSC.
+ *
+ * ```tsx
+ * <QrCode value={otpauthUri} aria-label="QR code for your authenticator app" />
+ * ```
+ */
+export const QrCode = React.forwardRef(function QrCode({ value, errorCorrection, size = 176, margin, plate = true, fallback = "Too long for a QR code", children, className, style, ...props }, ref) {
+    const ecl = errorCorrection ?? (children ? "H" : "M");
+    let qr = null;
+    try {
+        qr = encodeQr(value, { errorCorrection: ecl });
+    }
+    catch {
+        qr = null;
+    }
+    const quiet = margin ?? (plate ? 2 : 4);
+    const dim = qr ? qr.size + quiet * 2 : 0;
+    const width = typeof size === "number" ? `${size}px` : size;
+    return (_jsxs("div", { ref: ref, role: "img", "data-slot": "qr-code", "data-version": qr?.version, className: cn("relative inline-grid shrink-0 place-items-center", plate && "light rounded-ui border border-line bg-[var(--surface-solid)] p-2 text-fg shadow-[var(--surface-shadow)]", className), style: { width, ...style }, ...props, children: [qr ? (_jsx("svg", { viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", focusable: "false", shapeRendering: "crispEdges", className: "block size-full", children: _jsx("path", { d: qrPath(qr, quiet), fill: "currentColor" }) })) : (_jsx("span", { className: "grid aspect-square w-full place-items-center p-3 text-center text-xs text-fg-muted", children: fallback })), children && qr ? (_jsx("span", { "data-slot": "qr-code-mark", className: "absolute top-1/2 left-1/2 grid size-[22%] -translate-x-1/2 -translate-y-1/2 place-items-center rounded-ui-sm bg-[var(--surface-solid)] p-[3%] [&>svg]:size-full [&>img]:size-full [&>img]:object-contain", children: children })) : null] }));
+});

package/dist/components/radio-group.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+export interface RadioGroupOption<V extends string = string> {
+    value: V;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps<V extends string = string> extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, "value" | "defaultValue" | "onValueChange" | "orientation"> {
+    /** Selected value; `null` = nothing selected (controlled). */
+    value?: V | null;
+    defaultValue?: V | null;
+    onValueChange?: (value: V) => void;
+    /** Shorthand for the options. Or compose `RadioGroupItem` children. */
+    items?: RadioGroupOption<V>[];
+    /**
+     * `"default"`: circle + label. `"card"`: selectable tiles with icon and description (plans).
+     * `"segmented"`: a compact segmented control for short labels (a form value, not a view switch —
+     * use `ToggleGroup` for toolbar/view state).
+     */
+    variant?: "default" | "card" | "segmented";
+    orientation?: "vertical" | "horizontal";
+    size?: "sm" | "md";
+    invalid?: boolean;
+    /** Focusable, but the selection can't change (`aria-readonly`). */
+    readOnly?: boolean;
+}
+export declare const RadioGroup: <V extends string = string>(props: RadioGroupProps<V> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement;
+export interface RadioGroupItemProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "children"> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Leading icon (card and segmented variants). */
+    icon?: React.ReactNode;
+    /** Free content for a card (price, badge) under the label. */
+    children?: React.ReactNode;
+    /** Classes for the radio circle (default variant). */
+    controlClassName?: string;
+}
+/** One option inside a `RadioGroup`. */
+export declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;