@vamos-ui/react 0.3.0 → 0.4.1

package/dist/charts/gauge.js

@@ -44,7 +44,7 @@ function a11yProps(semantic, value, max, valueText, label) {
  * <ProgressRing value={85} aria-label="Profile completeness" format="percent" size="md" />
  * ```
  */
-export const ProgressRing = React.forwardRef(function ProgressRing({ value, max = 100, size = "md", thickness, color = "chart-1", thresholds, label, format, semantic = "progress", labels, className, style, "aria-label": ariaLabel, ...props }, ref) {
+export const ProgressRing = /*#__PURE__*/ React.forwardRef(function ProgressRing({ value, max = 100, size = "md", thickness, color = "chart-1", thresholds, label, format, semantic = "progress", labels, className, style, "aria-label": ariaLabel, ...props }, ref) {
     const px = typeof size === "number" ? size : SIZES[size];
     const sw = thickness ?? Math.max(2.5, Math.round(px * 0.09 * 10) / 10);
     const threshold = pickThreshold(value, thresholds);
@@ -64,7 +64,7 @@ export const ProgressRing = React.forwardRef(function ProgressRing({ value, max
  * <Gauge value={64} aria-label="SEO score" semantic="meter" thresholds={[{ at: 0, color: "danger", label: "Poor" }, { at: 50, color: "warning", label: "Fair" }, { at: 80, color: "success", label: "Good" }]} color="auto" />
  * ```
  */
-export const Gauge = React.forwardRef(function Gauge({ value, max = 100, size = "lg", thickness, color = "chart-1", thresholds, label, format, semantic = "meter", arc = 270, showThresholdBands, target, labels, className, style, "aria-label": ariaLabel, ...props }, ref) {
+export const Gauge = /*#__PURE__*/ React.forwardRef(function Gauge({ value, max = 100, size = "lg", thickness, color = "chart-1", thresholds, label, format, semantic = "meter", arc = 270, showThresholdBands, target, labels, className, style, "aria-label": ariaLabel, ...props }, ref) {
     const px = typeof size === "number" ? size : SIZES[size];
     const sw = thickness ?? Math.max(3, Math.round(px * 0.075 * 10) / 10);
     const threshold = pickThreshold(value, thresholds);

package/dist/charts/utils.d.ts

@@ -100,6 +100,16 @@ export declare function niceStep(v: number): number;
  * Returns domains with the same negative share, so neither axis exaggerates.
  */
 export declare function alignZeroDomains(a: [number, number], b: [number, number]): [[number, number], [number, number]];
+/**
+ * Two value axes (Combo) with nice, evenly spaced ticks whose zero lines meet: both axes get the
+ * same number of steps below and above zero, each with its own nice step (1, 2, 2.5, 5… × 10ⁿ), so
+ * one set of grid lines serves both scales. An axis whose data never goes below zero keeps only its
+ * non-negative ticks (its domain still reaches below zero to line up with the other axis).
+ */
+export declare function alignedAxes(a: [number, number], b: [number, number]): {
+    domains: [[number, number], [number, number]];
+    ticks: [number[], number[]];
+};
 export interface SeriesStats {
     key: string;
     min: number;

package/dist/charts/utils.js

@@ -188,6 +188,52 @@ export function alignZeroDomains(a, b) {
     };
     return [fit(aLo, aHi), fit(bLo, bHi)];
 }
+/**
+ * Two value axes (Combo) with nice, evenly spaced ticks whose zero lines meet: both axes get the
+ * same number of steps below and above zero, each with its own nice step (1, 2, 2.5, 5… × 10ⁿ), so
+ * one set of grid lines serves both scales. An axis whose data never goes below zero keeps only its
+ * non-negative ticks (its domain still reaches below zero to line up with the other axis).
+ */
+export function alignedAxes(a, b) {
+    const norm = ([lo, hi]) => [Math.min(0, Number.isFinite(lo) ? lo : 0), Math.max(0, Number.isFinite(hi) ? hi : 0)];
+    const axes = [norm(a), norm(b)];
+    const round = (v) => Number(v.toPrecision(12));
+    const build = (neg, pos, steps) => axes.map(([lo], i) => {
+        const step = steps[i];
+        const all = Array.from({ length: neg + pos + 1 }, (_, k) => round((k - neg) * step));
+        return { domain: [round(-neg * step), round(pos * step)], ticks: lo < 0 ? all : all.filter((v) => v >= 0) };
+    });
+    const anyNeg = axes.some(([lo]) => lo < 0);
+    const anyPos = axes.some(([, hi]) => hi > 0);
+    if (!anyNeg) {
+        // Non-negative data: four equal steps on both axes.
+        const steps = axes.map(([, hi]) => niceStep(hi / 4) || 0.25);
+        const [x, y] = build(0, 4, steps);
+        return { domains: [x.domain, y.domain], ticks: [x.ticks, y.ticks] };
+    }
+    let best = null;
+    for (const total of [4, 5, 6]) {
+        for (let neg = 1; neg <= total; neg++) {
+            const pos = total - neg;
+            if (anyPos && pos === 0)
+                continue;
+            const steps = axes.map(([lo, hi]) => {
+                const need = Math.max(neg ? -lo / neg : 0, pos ? hi / pos : hi > 0 ? Infinity : 0);
+                return Number.isFinite(need) ? niceStep(need) || 1 : Infinity;
+            });
+            if (!steps.every(Number.isFinite))
+                continue;
+            // Share of each axis left empty, plus a small cost per extra step.
+            const waste = axes.reduce((sum, [lo, hi], i) => sum + 1 - (hi - lo) / (steps[i] * total || 1), 0);
+            const score = waste + (total - 4) * 0.06;
+            if (!best || score < best.score - 1e-9)
+                best = { score, neg, pos, steps };
+        }
+    }
+    const { neg, pos, steps } = best;
+    const [x, y] = build(neg, pos, steps);
+    return { domains: [x.domain, y.domain], ticks: [x.ticks, y.ticks] };
+}
 /** Min / max / average of one series (nulls skipped). `null` when the series has no numbers. */
 export function seriesStats(rows, key) {
     let min = Infinity;

package/dist/components/accordion.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Accordion as RadixAccordion } from "radix-ui";
+import * as RadixAccordion from "radix-ui/accordion";
 type AccordionVariant = "plain" | "separated" | "card";
 type AccordionSize = "sm" | "md";
 type AccordionRootProps = React.ComponentPropsWithoutRef<typeof RadixAccordion.Root>;

package/dist/components/accordion.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Accordion as RadixAccordion } from "radix-ui";
+import * as RadixAccordion from "radix-ui/accordion";
 import { ChevronDown } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
-const AccordionContext = React.createContext({
+const AccordionContext = /*#__PURE__*/ React.createContext({
     variant: "plain",
     size: "md",
     headingLevel: 3,
 });
-const rootVariants = cva("w-full", {
+const rootVariants = /*#__PURE__*/ cva("w-full", {
     variants: {
         variant: {
             /** Ruled list: hairlines between items. */
@@ -38,11 +38,11 @@ const rootVariants = cva("w-full", {
  *
  * Persisting the open sections is the consumer's job: control `value` and store it.
  */
-export const Accordion = React.forwardRef(function Accordion({ variant = "plain", size = "md", headingLevel = 3, className, ...props }, ref) {
+export const Accordion = /*#__PURE__*/ React.forwardRef(function Accordion({ variant = "plain", size = "md", headingLevel = 3, className, ...props }, ref) {
     const ctx = React.useMemo(() => ({ variant, size, headingLevel }), [variant, size, headingLevel]);
     return (_jsx(AccordionContext.Provider, { value: ctx, children: _jsx(RadixAccordion.Root, { ref: ref, "data-slot": "accordion", "data-variant": variant, className: cn(rootVariants({ variant }), className), ...props }) }));
 });
-const accordionItemVariants = cva("group/acc-item", {
+const accordionItemVariants = /*#__PURE__*/ cva("group/acc-item", {
     variants: {
         variant: {
             plain: "border-b border-line last:border-b-0",
@@ -52,19 +52,19 @@ const accordionItemVariants = cva("group/acc-item", {
     },
 });
 /** One section. `value` identifies it; `disabled` locks it. */
-export const AccordionItem = React.forwardRef(function AccordionItem({ className, ...props }, ref) {
+export const AccordionItem = /*#__PURE__*/ React.forwardRef(function AccordionItem({ className, ...props }, ref) {
     const { variant } = React.useContext(AccordionContext);
     return _jsx(RadixAccordion.Item, { ref: ref, "data-slot": "accordion-item", className: cn(accordionItemVariants({ variant }), className), ...props });
 });
 const pad = { plain: "", separated: "px-4", card: "px-(--gap)" };
 /** The section header: a heading with the toggle button (and optional actions beside it). */
-export const AccordionTrigger = React.forwardRef(function AccordionTrigger({ icon, meta, actions, className, children, ...props }, ref) {
+export const AccordionTrigger = /*#__PURE__*/ React.forwardRef(function AccordionTrigger({ icon, meta, actions, className, children, ...props }, ref) {
     const { variant, size, headingLevel } = React.useContext(AccordionContext);
     const Heading = `h${headingLevel}`;
     return (_jsx(RadixAccordion.Header, { asChild: true, children: _jsxs(Heading, { "data-slot": "accordion-header", className: cn("flex items-center gap-1", pad[variant], actions && "pe-2"), children: [_jsxs(RadixAccordion.Trigger, { ref: ref, "data-slot": "accordion-trigger", className: cn("group/acc flex min-w-0 flex-1 items-center gap-3 rounded-ui-sm text-start font-medium text-fg outline-none transition-colors focus-ring", "disabled:cursor-not-allowed disabled:opacity-45", "hover:[&_[data-slot=accordion-title]]:underline hover:[&_[data-slot=accordion-title]]:decoration-line hover:[&_[data-slot=accordion-title]]:underline-offset-4", size === "sm" ? "py-2.5 text-[13px] [&_svg]:size-3.5" : "py-3.5 text-sm [&_svg]:size-4", variant === "plain" && (size === "sm" ? "py-2" : "py-3"), className), ...props, children: [icon ? _jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 text-fg-muted [&_svg]:shrink-0", children: icon }) : null, _jsx("span", { "data-slot": "accordion-title", className: "min-w-0 flex-1 text-pretty", children: children }), meta ? _jsx("span", { className: "sr-only", children: ", " }) : null, meta ? (_jsx("span", { "data-slot": "accordion-meta", className: "tabular shrink-0 truncate text-[13px] font-normal text-fg-subtle", children: meta })) : null, _jsx(ChevronDown, { "aria-hidden": true, className: "shrink-0 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none group-data-[state=open]/acc:rotate-180" })] }), actions ? (_jsx("span", { "data-slot": "accordion-actions", className: "flex shrink-0 items-center gap-0.5", children: actions })) : null] }) }));
 });
 /** The collapsible body. Animates its height (`ui-collapse`, reduced-motion safe). */
-export const AccordionContent = React.forwardRef(function AccordionContent({ className, children, ...props }, ref) {
+export const AccordionContent = /*#__PURE__*/ React.forwardRef(function AccordionContent({ className, children, ...props }, ref) {
     const { variant, size } = React.useContext(AccordionContext);
     return (_jsx(RadixAccordion.Content, { ref: ref, "data-slot": "accordion-content", className: "ui-collapse", ...props, children: _jsx("div", { className: cn("text-fg-muted", size === "sm" ? "pb-3 text-[13px]" : "pb-4 text-sm leading-relaxed", pad[variant], className), children: children }) }));
 });

package/dist/components/activity-timeline.js

@@ -13,28 +13,28 @@ export { RelativeTime } from "../lib/data-islands.js";
  * Composable timeline (`<ol>`). For data use `ActivityTimeline`; compose these parts for
  * custom rows: `Timeline › TimelineGroup › TimelineItem › TimelineIndicator + TimelineContent`.
  */
-export const Timeline = React.forwardRef(function Timeline({ variant = "feed", density = "inherit", className, ...props }, ref) {
+export const Timeline = /*#__PURE__*/ React.forwardRef(function Timeline({ variant = "feed", density = "inherit", className, ...props }, ref) {
     return (_jsx("ol", { ref: ref, "data-slot": "timeline", "data-variant": variant, "data-density": density === "inherit" ? undefined : density, className: cn("group/timeline m-0 grid list-none gap-(--tl-gap) p-0 [--tl-gap:calc(var(--row-h)*0.3)] [--tl-ind:1.75rem]", "data-[density=compact]:[--tl-ind:1.5rem] [[data-density=compact]_&]:[--tl-ind:1.5rem]", className), ...props }));
 });
 /** A labelled section (a day). Children are TimelineItems. */
-export const TimelineGroup = React.forwardRef(function TimelineGroup({ date, label, now, labels, className, children, ...props }, ref) {
+export const TimelineGroup = /*#__PURE__*/ React.forwardRef(function TimelineGroup({ date, label, now, labels, className, children, ...props }, ref) {
     const id = React.useId();
     return (_jsxs("li", { ref: ref, "data-slot": "timeline-group", "aria-labelledby": id, className: cn("grid gap-(--tl-gap)", className), ...props, children: [_jsxs("div", { id: id, className: "flex items-center gap-3 font-mono text-[11px] font-medium tracking-[0.06em] text-fg-subtle", children: [_jsx("span", { className: "shrink-0", children: label ?? (date ? _jsx(TimelineDayLabel, { date: date, now: now, labels: labels }) : null) }), _jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-line" })] }), _jsx("ol", { className: "m-0 grid list-none gap-(--tl-gap) p-0", children: children })] }));
 });
-export const TimelineItem = React.forwardRef(function TimelineItem({ status, highlight, className, ...props }, ref) {
+export const TimelineItem = /*#__PURE__*/ React.forwardRef(function TimelineItem({ status, highlight, className, ...props }, ref) {
     return (_jsx("li", { ref: ref, "data-slot": "timeline-item", "data-status": status, "data-highlight": highlight ? "" : undefined, "aria-current": status === "current" ? "step" : undefined, className: cn("relative grid grid-cols-[var(--tl-ind)_minmax(0,1fr)] gap-x-3", 
         // connector from below this indicator to the next one (start side, RTL-aware)
         "before:absolute before:start-[calc(var(--tl-ind)/2-0.5px)] before:top-[calc(var(--tl-ind)+0.25rem)] before:-bottom-[calc(var(--tl-gap)-0.25rem)] before:w-px before:bg-line last:before:hidden", "data-[status=upcoming]:before:w-0 data-[status=upcoming]:before:border-s data-[status=upcoming]:before:border-dashed data-[status=upcoming]:before:border-line data-[status=upcoming]:before:bg-transparent", "data-[status=current]:before:w-0 data-[status=current]:before:border-s data-[status=current]:before:border-dashed data-[status=current]:before:border-line data-[status=current]:before:bg-transparent", className), ...props }));
 });
-const indicatorVariants = cva("relative z-[1] grid size-(--tl-ind) shrink-0 place-items-center rounded-full border text-fg-muted [&_svg]:size-[calc(var(--tl-ind)*0.5)] [&_svg]:shrink-0", {
+const indicatorVariants = /*#__PURE__*/ cva("relative z-[1] grid size-(--tl-ind) shrink-0 place-items-center rounded-full border text-fg-muted [&_svg]:size-[calc(var(--tl-ind)*0.5)] [&_svg]:shrink-0", {
     variants: {
         tone: {
             neutral: "border-line bg-[color-mix(in_oklch,var(--surface)_90%,var(--scene))]",
-            accent: "tone-accent border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            success: "tone-success border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            warning: "tone-warning border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            danger: "tone-danger border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
-            info: "tone-info border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone)",
+            accent: "tone-accent border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            success: "tone-success border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            warning: "tone-warning border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            danger: "tone-danger border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
+            info: "tone-info border-[color-mix(in_srgb,var(--tone)_35%,var(--line))] bg-[color-mix(in_oklch,var(--tone)_14%,color-mix(in_oklch,var(--surface)_92%,var(--scene)))] text-(--tone-ink)",
         },
     },
     defaultVariants: { tone: "neutral" },
@@ -70,7 +70,7 @@ export function TimelineActions({ className, ...props }) {
     return _jsx("div", { "data-slot": "timeline-actions", className: cn("mt-2 flex flex-wrap items-center gap-1.5", className), ...props });
 }
 /** "3 new updates" pill for live feeds: new items wait above instead of shifting the list. */
-export const TimelineNewItems = React.forwardRef(function TimelineNewItems({ count, labels, className, children, ...props }, ref) {
+export const TimelineNewItems = /*#__PURE__*/ React.forwardRef(function TimelineNewItems({ count, labels, className, children, ...props }, ref) {
     if (count <= 0)
         return null;
     return (_jsxs("button", { ref: ref, type: "button", "data-slot": "timeline-new-items", className: cn("mx-auto inline-flex h-7 items-center gap-1.5 rounded-full bg-accent-soft px-3 text-xs font-medium text-accent-ink transition-[filter] hover:brightness-95 focus-ring motion-safe:ui-fade", className), ...props, children: [_jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full bg-current" }), children ?? _jsx(DataLabel, { ns: "timeline", id: "newItems", vars: { count }, override: labels })] }));
@@ -91,7 +91,7 @@ export function TimelineSkeleton({ count = 3, className }) {
  * ]} />
  * ```
  */
-export const ActivityTimeline = React.forwardRef(function ActivityTimeline({ items, variant = "feed", groupBy = "none", order, timeZone = "UTC", now, timeMode, loading, empty, hasMore, onLoadMore, newCount = 0, onShowNew, announcement, filter, labels, className, density, ...props }, ref) {
+export const ActivityTimeline = /*#__PURE__*/ React.forwardRef(function ActivityTimeline({ items, variant = "feed", groupBy = "none", order, timeZone = "UTC", now, timeMode, loading, empty, hasMore, onLoadMore, newCount = 0, onShowNew, announcement, filter, labels, className, density, ...props }, ref) {
     const dir = order ?? (variant === "steps" ? "asc" : "desc");
     const sorted = variant === "steps" && order === undefined ? items : [...items].sort((a, b) => cmp(a.at, b.at) * (dir === "asc" ? 1 : -1));
     const renderItem = (it, inGroup) => (_jsxs(TimelineItem, { status: it.status, children: [_jsx(TimelineIndicator, { icon: it.icon, avatar: it.avatar, tone: it.tone, status: variant === "steps" ? (it.status ?? "upcoming") : undefined, labels: labels }), _jsxs(TimelineContent, { children: [_jsxs(TimelineTitle, { className: it.status === "upcoming" ? "text-fg-subtle" : undefined, children: [it.actor ? _jsxs("b", { children: [it.actor, " "] }) : null, it.href ? (_jsx("a", { href: it.href, className: "rounded-[2px] underline-offset-2 hover:text-fg hover:underline focus-ring", children: it.title })) : (it.title)] }), variant === "steps" && it.status === "upcoming" ? null : _jsx(TimelineTime, { value: toIsoInstant(it.at), now: now, mode: timeMode ?? (inGroup ? "absolute" : "relative") }), it.body ? _jsx(TimelineBody, { children: it.body }) : null, it.actions ? _jsx(TimelineActions, { children: it.actions }) : null] })] }, it.id));

package/dist/components/address-field.js

@@ -65,7 +65,7 @@ export function formatAddress(a, opts = {}) {
         lines.push(displayNames(locale)?.of(c) ?? c);
     return lines.map((l) => l?.trim()).filter((l) => !!l);
 }
-const NativeSelect = React.forwardRef(function NativeSelect({ className, size = "md", invalid, children, ...rest }, ref) {
+const NativeSelect = /*#__PURE__*/ React.forwardRef(function NativeSelect({ className, size = "md", invalid, children, ...rest }, ref) {
     const props = useFieldControl({ ...rest, "aria-invalid": invalid ? true : rest["aria-invalid"] });
     return (_jsxs("div", { "data-slot": "address-select", className: cn(controlVariants({ size }), "px-0", className), children: [_jsx("select", { ref: ref, ...props, className: cn("h-full w-full min-w-0 cursor-pointer appearance-none rounded-[inherit] bg-transparent ps-3 pe-9 text-[length:inherit] text-fg outline-none disabled:cursor-not-allowed", props.value === "" && "text-fg-subtle"), children: children }), _jsx(ChevronDown, { "aria-hidden": true, className: "pointer-events-none absolute end-3 size-4 text-fg-subtle" })] }));
 });
@@ -120,7 +120,7 @@ function useRegions(source, level, province) {
  * <Field label="Province"><RegionSelect source={trAddress} level="province" /></Field>
  * ```
  */
-export const RegionSelect = React.forwardRef(function RegionSelect({ source, level, province, value, defaultValue, onValueChange, placeholder, labels, disabled, ...rest }, ref) {
+export const RegionSelect = /*#__PURE__*/ React.forwardRef(function RegionSelect({ source, level, province, value, defaultValue, onValueChange, placeholder, labels, disabled, ...rest }, ref) {
     const t = useLabels("address", addressLabels, labels);
     const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? "", onChange: onValueChange, name: "RegionSelect" });
     const { items } = useRegions(source, level, province);
@@ -140,7 +140,7 @@ const DEFAULT_FIELDS = ["country", "region1", "region2", "line1", "line2", "post
  * <AddressField legend="Billing address" name="billing" defaultValue={{ country: "TR" }} required={["line1", "region1", "region2"]} />
  * ```
  */
-export const AddressField = React.forwardRef(function AddressField(props, ref) {
+export const AddressField = /*#__PURE__*/ React.forwardRef(function AddressField(props, ref) {
     const { value, defaultValue, onValueChange, sources = { TR: trAddress }, countries, defaultCountry, fields = DEFAULT_FIELDS, required = [], layout = "grid", name, legend, hint, errors, readOnly, disabled, size, labels, className, ...rest } = props;
     const { locale } = useLocale();
     const t = useLabels("address", addressLabels, labels);

package/dist/components/alert-dialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as AlertDialogPrimitive from "radix-ui/alert-dialog";
 import { type ButtonProps } from "./button.js";
 import { type LayerHeaderProps } from "./dialog.js";
 type Tone = "default" | "danger";

package/dist/components/alert-dialog.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 { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as AlertDialogPrimitive from "radix-ui/alert-dialog";
 import { TriangleAlert } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useLabels } from "../lib/labels.js";
@@ -12,7 +12,7 @@ import { Button } from "./button.js";
 import { Field, Input } from "./input.js";
 import { Alert } from "./alert.js";
 import { LayerBody, LayerFooter, LayerHeader, LayerPartsProvider } from "./dialog.js";
-const AlertDialogContentContext = React.createContext({ tone: "default", actionRef: { current: null } });
+const AlertDialogContentContext = /*#__PURE__*/ React.createContext({ tone: "default", actionRef: { current: null } });
 /**
  * Confirms an irreversible or high-stakes action. `role="alertdialog"`; the overlay never closes it.
  *
@@ -34,7 +34,7 @@ const AlertDialogContentContext = React.createContext({ tone: "default", actionR
 export const AlertDialog = AlertDialogPrimitive.Root;
 export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 /** Fixed 420px panel. Below 640px it anchors to the bottom and stacks the buttons, action on top. */
-export const AlertDialogContent = React.forwardRef(function AlertDialogContent({ tone = "default", dismissible = true, container, className, children, onEscapeKeyDown, onOpenAutoFocus, onCloseAutoFocus, ...props }, ref) {
+export const AlertDialogContent = /*#__PURE__*/ React.forwardRef(function AlertDialogContent({ tone = "default", dismissible = true, container, className, children, onEscapeKeyDown, onOpenAutoFocus, onCloseAutoFocus, ...props }, ref) {
     const scope = usePortalContainer();
     const depth = useLayerDepth() + 1;
     const actionRef = React.useRef(null);
@@ -82,24 +82,24 @@ export function AlertDialogIcon({ className, children }) {
     return (_jsx("span", { "aria-hidden": true, className: cn("flex size-10 items-center justify-center rounded-ui tone-danger bg-[color-mix(in_srgb,var(--danger)_12%,transparent)] text-danger [&_svg]:size-5", className), children: children ?? _jsx(TriangleAlert, {}) }));
 }
 /** `LayerHeader` that adds the warning icon well when the content is `tone="danger"` (pass `icon={null}` to drop it). */
-export const AlertDialogHeader = React.forwardRef(function AlertDialogHeader({ icon, className, ...props }, ref) {
+export const AlertDialogHeader = /*#__PURE__*/ React.forwardRef(function AlertDialogHeader({ icon, className, ...props }, ref) {
     const { tone } = React.useContext(AlertDialogContentContext);
     const resolvedIcon = icon === undefined ? (tone === "danger" ? _jsx(AlertDialogIcon, {}) : undefined) : icon;
     return _jsx(LayerHeader, { ref: ref, icon: resolvedIcon, className: cn("pt-6", className), ...props });
 });
 export const AlertDialogBody = LayerBody;
 /** Footer without the hairline; buttons at the end, stacked on mobile. */
-export const AlertDialogFooter = React.forwardRef(function AlertDialogFooter({ className, ...props }, ref) {
+export const AlertDialogFooter = /*#__PURE__*/ React.forwardRef(function AlertDialogFooter({ className, ...props }, ref) {
     return _jsx(LayerFooter, { ref: ref, className: cn("border-t-0 pt-1 pb-5", className), ...props });
 });
 const confirmLabels = { cancel: "Cancel", confirm: "Confirm", typeToConfirm: "Type {text} to confirm", error: "That didn't work. Try again." };
 /** Closes without acting. Receives initial focus in a danger dialog. Default label "Cancel". */
-export const AlertDialogCancel = React.forwardRef(function AlertDialogCancel({ children, labels, variant = "secondary", ...props }, ref) {
+export const AlertDialogCancel = /*#__PURE__*/ React.forwardRef(function AlertDialogCancel({ children, labels, variant = "secondary", ...props }, ref) {
     const t = useLabels("confirm", confirmLabels, labels);
     return (_jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: _jsx(Button, { ref: ref, variant: variant, ...props, children: children ?? t("cancel") }) }));
 });
 /** Runs the action and closes. `variant` follows the content tone (`danger` or `primary`). */
-export const AlertDialogAction = React.forwardRef(function AlertDialogAction({ children, labels, variant, keepOpen, onClick, ...props }, ref) {
+export const AlertDialogAction = /*#__PURE__*/ React.forwardRef(function AlertDialogAction({ children, labels, variant, keepOpen, onClick, ...props }, ref) {
     const { tone, actionRef } = React.useContext(AlertDialogContentContext);
     const t = useLabels("confirm", confirmLabels, labels);
     const setRefs = React.useCallback((node) => {
@@ -155,7 +155,7 @@ export function ConfirmDialog({ open, onResult, title, description, tone = "defa
                                     }
                                 } }) })) : null] })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: busy, children: cancelLabel ?? t("cancel") }), _jsx(AlertDialogAction, { keepOpen: true, disabled: !matches, loading: busy, onClick: () => void run(), children: confirmLabel ?? t("confirm") })] })] }) }));
 }
-const ConfirmContext = React.createContext(null);
+const ConfirmContext = /*#__PURE__*/ React.createContext(null);
 /**
  * Provides `useConfirm()` to its subtree and renders the one shared confirmation dialog.
  * App shell includes it; mount it yourself at the app root otherwise.

package/dist/components/alert.js

@@ -5,7 +5,7 @@ import { CircleAlert, CircleCheck, Info, Lightbulb, TriangleAlert, X } from "luc
 import { cn } from "../lib/cn.js";
 import { useLabels } from "../lib/labels.js";
 import { IconButton } from "./button.js";
-export const alertVariants = cva([
+export const alertVariants = /*#__PURE__*/ cva([
     "vui-alert relative grid grid-cols-[auto_minmax(0,1fr)_auto] items-start text-fg",
     // Tinted surface + hairline in the tone colour; body text stays --fg for contrast.
     "[--alert-tone:var(--tone)]",
@@ -56,7 +56,7 @@ const alertLabels = { dismiss: "Dismiss" };
  *
  * Critical information must not live only in a toast — show it here too.
  */
-export const Alert = React.forwardRef(function Alert({ tone, variant, size, title, icon, actions, onDismiss, dismissLabel, live, className, children, ...props }, ref) {
+export const Alert = /*#__PURE__*/ React.forwardRef(function Alert({ tone, variant, size, title, icon, actions, onDismiss, dismissLabel, live, className, children, ...props }, ref) {
     const t = tone ?? "neutral";
     const DefaultIcon = defaultIcons[t];
     const iconNode = icon === false ? null : (icon ?? _jsx(DefaultIcon, { "aria-hidden": true }));

package/dist/components/app-shell.js

@@ -33,9 +33,9 @@ const appShellLabels = {
     noAppsDescription: "Your account doesn't have access to any app yet. Ask an administrator to invite you.",
     pageChanged: "{title}",
 };
-const AppShellContext = React.createContext(null);
+const AppShellContext = /*#__PURE__*/ React.createContext(null);
 /** Rail state as resolved by the layout (preference or width). */
-const CollapsedContext = React.createContext(false);
+const CollapsedContext = /*#__PURE__*/ React.createContext(false);
 function writeCookie(v) {
     try {
         document.cookie = `${SIDEBAR_COOKIE}=${v ? "1" : "0"}; path=/; max-age=31536000; samesite=lax`;
@@ -226,7 +226,7 @@ export function AppShellBreadcrumb({ includeApp = true, className }) {
  * </AppShellProvider>
  * ```
  */
-export const AppShell = React.forwardRef(function AppShell({ sidebar, topbar, banner, notifications, actions, user, badges, sidebarFooter, appSwitcherFooter, layout = "sidebar", loading, announceRouteChanges = true, height = "screen", globals = true, labels, className, children, ...props }, ref) {
+export const AppShell = /*#__PURE__*/ React.forwardRef(function AppShell({ sidebar, topbar, banner, notifications, actions, user, badges, sidebarFooter, appSwitcherFooter, layout = "sidebar", loading, announceRouteChanges = true, height = "screen", globals = true, labels, className, children, ...props }, ref) {
     const ctx = React.useContext(AppShellContext);
     if (!ctx)
         throw new Error("AppShell must be used inside <AppShellProvider>.");

package/dist/components/aspect-ratio.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/** `"16/9"`, `"4/3"`, `"1/1"`… or a number (`1.5`). */
+export type AspectRatioValue = `${number}/${number}` | number;
+/** `"16/9"` → 1.777…, `"16:9"` → 1.777…, `1.5` → 1.5. Invalid values return `undefined`. */
+export declare function parseAspectRatio(ratio: AspectRatioValue | string | undefined): number | undefined;
+export declare const aspectRatioVariants: (props?: ({
+    rounded?: "ui" | "ui-lg" | "full" | "none" | null | undefined;
+    fit?: "fill" | "contain" | "cover" | null | undefined;
+    tone?: "inset" | "none" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof aspectRatioVariants> {
+    /** Width ÷ height. `"16/9"` (default), `"4/3"`, `"1/1"`, `"21/9"` or a number. */
+    ratio?: AspectRatioValue;
+}
+/**
+ * Keeps a box at a fixed ratio whatever its width, and stretches the direct child to fill it —
+ * an iframe, a video, a map, an image or any element. Pure CSS (`aspect-ratio`), server-safe.
+ *
+ * ```tsx
+ * <AspectRatio ratio="16/9" rounded="ui-lg">
+ *   <iframe src="https://www.youtube-nocookie.com/embed/…" title="Product tour" />
+ * </AspectRatio>
+ * ```
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/aspect-ratio.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+/** `"16/9"` → 1.777…, `"16:9"` → 1.777…, `1.5` → 1.5. Invalid values return `undefined`. */
+export function parseAspectRatio(ratio) {
+    if (typeof ratio === "number")
+        return Number.isFinite(ratio) && ratio > 0 ? ratio : undefined;
+    if (!ratio)
+        return undefined;
+    const [w, h] = ratio.split(/[/:]/).map((s) => Number(s.trim()));
+    if (w && h && w > 0 && h > 0)
+        return w / h;
+    const n = Number(ratio);
+    return Number.isFinite(n) && n > 0 ? n : undefined;
+}
+export const aspectRatioVariants = /*#__PURE__*/ cva("relative isolate block w-full overflow-hidden", {
+    variants: {
+        rounded: { none: "", ui: "rounded-ui", "ui-lg": "rounded-ui-lg", full: "rounded-full" },
+        /** How a direct `img` / `video` child fills the box. */
+        fit: { cover: "[&>img]:object-cover [&>video]:object-cover", contain: "[&>img]:object-contain [&>video]:object-contain", fill: "[&>img]:object-fill [&>video]:object-fill" },
+        /** `inset`: a `surface-2` backdrop (letterboxing for `contain`, a frame while an iframe loads). */
+        tone: { none: "", inset: "bg-surface-2" },
+    },
+    defaultVariants: { rounded: "none", fit: "cover", tone: "none" },
+});
+/**
+ * Keeps a box at a fixed ratio whatever its width, and stretches the direct child to fill it —
+ * an iframe, a video, a map, an image or any element. Pure CSS (`aspect-ratio`), server-safe.
+ *
+ * ```tsx
+ * <AspectRatio ratio="16/9" rounded="ui-lg">
+ *   <iframe src="https://www.youtube-nocookie.com/embed/…" title="Product tour" />
+ * </AspectRatio>
+ * ```
+ */
+export const AspectRatio = /*#__PURE__*/ React.forwardRef(function AspectRatio({ ratio = "16/9", rounded, fit, tone, className, style, children, ...props }, ref) {
+    const value = parseAspectRatio(ratio) ?? 16 / 9;
+    return (_jsx("div", { ref: ref, "data-slot": "aspect-ratio", className: cn(aspectRatioVariants({ rounded, fit, tone }), 
+        // The child fills the box; iframes lose their default border.
+        "[&>*]:absolute [&>*]:inset-0 [&>*]:size-full [&>iframe]:border-0", className), style: { aspectRatio: String(value), ...style }, ...props, children: children }));
+});

package/dist/components/attachment-list.js

@@ -110,7 +110,7 @@ export function AttachmentName({ name, className, ...props }) {
 /* ------------------------------------------------------------------ */
 /* AttachmentList                                                       */
 /* ------------------------------------------------------------------ */
-const listVariants = cva("", {
+const listVariants = /*#__PURE__*/ cva("", {
     variants: {
         layout: {
             list: "flex flex-col divide-y divide-line overflow-hidden rounded-ui border border-line",
@@ -131,7 +131,7 @@ const listVariants = cva("", {
  * <AttachmentList layout="chips" items={commentFiles} readOnly />
  * ```
  */
-export const AttachmentList = React.forwardRef(function AttachmentList({ items, layout = "list", size = "md", onPreview, onDownload, onRemove, onRetry, onAddFiles, accept, uploadSlot, readOnly, empty, labels, className, "aria-label": ariaLabel, ...props }, ref) {
+export const AttachmentList = /*#__PURE__*/ React.forwardRef(function AttachmentList({ items, layout = "list", size = "md", onPreview, onDownload, onRemove, onRetry, onAddFiles, accept, uploadSlot, readOnly, empty, labels, className, "aria-label": ariaLabel, ...props }, ref) {
     const t = useLabels("attachments", attachmentLabels, labels);
     const [removing, setRemoving] = React.useState(() => new Set());
     const inputRef = React.useRef(null);

package/dist/components/audit-log.js

@@ -96,7 +96,7 @@ export function filterAuditEvents(events, filters, locale, actionLabels) {
  * />
  * ```
  */
-export const AuditLog = React.forwardRef(function AuditLog({ events, rowCount, actionLabels, changeFields, filters: filtersProp, defaultFilters, onFiltersChange, manualFiltering, showFilters = true, toolbar, notice, onExport, hasMore, onLoadMore, loading, height = "32rem", virtualizeAfter = 80, variant = "table", now, labels, className, ...props }, ref) {
+export const AuditLog = /*#__PURE__*/ React.forwardRef(function AuditLog({ events, rowCount, actionLabels, changeFields, filters: filtersProp, defaultFilters, onFiltersChange, manualFiltering, showFilters = true, toolbar, notice, onExport, hasMore, onLoadMore, loading, height = "32rem", virtualizeAfter = 80, variant = "table", now, labels, className, ...props }, ref) {
     const t = useLabels("auditLog", auditLogLabels, labels);
     const f = useFormat();
     const { locale } = useLocale();

package/dist/components/avatar.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Avatar as AvatarPrimitive } from "radix-ui";
+import * as AvatarPrimitive from "radix-ui/avatar";
 declare const avatarLabels: {
     online: string;
     away: string;

package/dist/components/avatar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Avatar as AvatarPrimitive } from "radix-ui";
+import * as AvatarPrimitive from "radix-ui/avatar";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
 import { useLabels } from "../lib/labels.js";
@@ -16,7 +16,7 @@ const avatarLabels = {
     overflow: "+{count}",
     more: "{count, plural, one {# more person} other {# more people}}",
 };
-export const avatarVariants = cva("relative inline-flex shrink-0 select-none items-center justify-center align-middle font-medium leading-none tracking-[0.01em]", {
+export const avatarVariants = /*#__PURE__*/ cva("relative inline-flex shrink-0 select-none items-center justify-center align-middle font-medium leading-none tracking-[0.01em]", {
     variants: {
         size: {
             xs: "size-5 text-[8.5px]",
@@ -61,20 +61,20 @@ export function avatarColor(seed) {
         color: `color-mix(in oklch, ${c} 60%, var(--fg))`,
     };
 }
-const AvatarGroupContext = React.createContext(null);
+const AvatarGroupContext = /*#__PURE__*/ React.createContext(null);
 /** Root of the composite API: `<AvatarRoot><AvatarImage/><AvatarFallback/></AvatarRoot>`. */
-export const AvatarRoot = React.forwardRef(function AvatarRoot({ size, shape, className, ...props }, ref) {
+export const AvatarRoot = /*#__PURE__*/ React.forwardRef(function AvatarRoot({ size, shape, className, ...props }, ref) {
     const group = React.useContext(AvatarGroupContext);
     const s = size ?? group?.size ?? "md";
     const sh = shape ?? group?.shape ?? "circle";
     return (_jsx(AvatarPrimitive.Root, { ref: ref, "data-slot": "avatar", "data-size": s, "data-shape": sh, className: cn(avatarVariants({ size: s, shape: sh }), group && "ring-2 ring-(--avatar-ring)", className), ...props }));
 });
 /** The photo. Pass `asChild` to render a framework image (Next `<Image>`). */
-export const AvatarImage = React.forwardRef(function AvatarImage({ className, ...props }, ref) {
+export const AvatarImage = /*#__PURE__*/ React.forwardRef(function AvatarImage({ className, ...props }, ref) {
     return _jsx(AvatarPrimitive.Image, { ref: ref, "data-slot": "avatar-image", className: cn("size-full rounded-[inherit] object-cover", className), ...props });
 });
 /** Shown while the image loads (after `delayMs`), when it fails, or when there is none. */
-export const AvatarFallback = React.forwardRef(function AvatarFallback({ className, ...props }, ref) {
+export const AvatarFallback = /*#__PURE__*/ React.forwardRef(function AvatarFallback({ className, ...props }, ref) {
     return (_jsx(AvatarPrimitive.Fallback, { ref: ref, "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-[inherit] bg-selected text-fg-muted [&_svg]:size-[55%]", className), ...props }));
 });
 /**
@@ -87,7 +87,7 @@ export const AvatarFallback = React.forwardRef(function AvatarFallback({ classNa
  * <Avatar name="Northwind Traders" shape="square" size="lg" />
  * ```
  */
-export const Avatar = React.forwardRef(function Avatar({ src, name, size, shape, status, statusLabel, fallback, delayMs = 300, neutral, labels, className, style, ...props }, ref) {
+export const Avatar = /*#__PURE__*/ React.forwardRef(function Avatar({ src, name, size, shape, status, statusLabel, fallback, delayMs = 300, neutral, labels, className, style, ...props }, ref) {
     const t = useLabels("avatar", avatarLabels, labels);
     const { locale } = useLocale();
     const group = React.useContext(AvatarGroupContext);
@@ -114,7 +114,7 @@ const overlap = {
  * </AvatarGroup>
  * ```
  */
-export const AvatarGroup = React.forwardRef(function AvatarGroup({ max = 4, total, size = "md", shape = "circle", onOverflowClick, spacing = "md", labels, className, children, ...props }, ref) {
+export const AvatarGroup = /*#__PURE__*/ React.forwardRef(function AvatarGroup({ max = 4, total, size = "md", shape = "circle", onOverflowClick, spacing = "md", labels, className, children, ...props }, ref) {
     const t = useLabels("avatar", avatarLabels, labels);
     const items = React.Children.toArray(children).filter(React.isValidElement);
     const shown = items.slice(0, Math.max(0, max));

package/dist/components/backup-codes.js

@@ -25,7 +25,7 @@ export const backupCodesLabels = {
  * <BackupCodes codes={codes} used={["4K7Q-PX2M"]} onRegenerate={regenerate} />
  * ```
  */
-export const BackupCodes = React.forwardRef(function BackupCodes({ codes, used = [], title, filename = "backup-codes.txt", fileNote, onCopy, onDownload, onRegenerate, regenerating, labels, className, ...props }, ref) {
+export const BackupCodes = /*#__PURE__*/ React.forwardRef(function BackupCodes({ codes, used = [], title, filename = "backup-codes.txt", fileNote, onCopy, onDownload, onRegenerate, regenerating, labels, className, ...props }, ref) {
     const t = useLabels("backupCodes", backupCodesLabels, labels);
     const f = useFormat();
     const [copied, setCopied] = React.useState(false);

package/dist/components/badge.js

@@ -1,10 +1,10 @@
 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 { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
 import { ChipRemoveButton, LocaleCount } from "../lib/islands.js";
-export const badgeVariants = cva("inline-flex shrink-0 items-center gap-1 whitespace-nowrap font-medium leading-none [&_svg]:size-3 [&_svg]:shrink-0", {
+export const badgeVariants = /*#__PURE__*/ cva("inline-flex shrink-0 items-center gap-1 whitespace-nowrap font-medium leading-none [&_svg]:size-3 [&_svg]:shrink-0", {
     variants: {
         tone: {
             neutral: "bg-selected text-fg-muted",
@@ -47,7 +47,7 @@ export const badgeVariants = cva("inline-flex shrink-0 items-center gap-1 whites
  *
  * No CSS `uppercase` — it breaks Turkish (i → I) without the right `lang`; use `upperText()`.
  */
-export const Badge = React.forwardRef(function Badge({ className, tone, size, shape, dot, color, count, max = 99, onRemove, removeLabel, disabled, asChild, children, style, ...props }, ref) {
+export const Badge = /*#__PURE__*/ React.forwardRef(function Badge({ className, tone, size, shape, dot, color, count, max = 99, onRemove, removeLabel, disabled, asChild, children, style, ...props }, ref) {
     const removable = Boolean(onRemove);
     const Comp = asChild && !removable ? Slot.Root : "span";
     const classes = cn(badgeVariants({ tone: color ? "custom" : tone, size, shape, interactive: asChild && !removable ? true : undefined }), count !== undefined && "tabular justify-center", count !== undefined && (size === "lg" ? "min-w-7 px-2" : size === "md" ? "min-w-6 px-2" : "min-w-5 px-1.5"), removable && "pe-1.5", disabled && "pointer-events-none opacity-50", className);