@vamos-ui/react 0.3.0 → 0.4.1

package/dist/components/qr-code.js

@@ -11,7 +11,7 @@ export { encodeQr, qrPath };
  * <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) {
+export const QrCode = /*#__PURE__*/ 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 {

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import * as RadioGroupPrimitive from "radix-ui/radio-group";
 export interface RadioGroupOption<V extends string = string> {
     value: V;
     label: React.ReactNode;

package/dist/components/radio-group.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import * as RadioGroupPrimitive from "radix-ui/radio-group";
 import { cn } from "../lib/cn.js";
 import { mergeIds } from "../lib/compose-refs.js";
 import { FieldContextReset, useFieldContext } from "../lib/field-context.js";
 import { useControllableState } from "../lib/use-controllable-state.js";
-const RadioGroupContext = React.createContext({ variant: "default", size: "md", value: null });
+const RadioGroupContext = /*#__PURE__*/ React.createContext({ variant: "default", size: "md", value: null });
 const segmentedTrack = "inline-flex w-fit max-w-full items-stretch gap-0.5 rounded-ui border border-line bg-selected p-[3px] has-[:focus-visible]:border-ring aria-invalid:border-danger";
 /**
  * Pick exactly one of a small set: post visibility, invoice type, plan. WAI-ARIA radio group on
@@ -51,10 +51,10 @@ function RadioGroupInner({ value: valueProp, defaultValue, onValueChange, items,
                     ? "flex flex-wrap items-start gap-x-6 gap-y-2.5"
                     : "grid gap-2.5", className), children: _jsx(FieldContextReset, { children: _jsxs(RadioGroupContext.Provider, { value: ctx, children: [items?.map((item) => (_jsx(RadioGroupItem, { value: item.value, label: item.label, description: item.description, icon: item.icon, disabled: item.disabled }, item.value))), children] }) }) }));
 }
-export const RadioGroup = React.forwardRef(RadioGroupInner);
+export const RadioGroup = /*#__PURE__*/ React.forwardRef(RadioGroupInner);
 const circle = "peer relative inline-flex shrink-0 items-center justify-center rounded-full border border-field-border-hover bg-field outline-none transition-[border-color,box-shadow,background-color] duration-150 hover:border-fg-subtle focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_var(--accent-soft)] data-[state=checked]:border-accent-ink disabled:cursor-not-allowed disabled:opacity-45 group-aria-invalid/radio:border-danger";
 /** One option inside a `RadioGroup`. */
-export const RadioGroupItem = React.forwardRef(function RadioGroupItem({ label, description, icon, children, className, controlClassName, id: idProp, "aria-describedby": describedBy, onKeyDown, ...props }, ref) {
+export const RadioGroupItem = /*#__PURE__*/ React.forwardRef(function RadioGroupItem({ label, description, icon, children, className, controlClassName, id: idProp, "aria-describedby": describedBy, onKeyDown, ...props }, ref) {
     const { variant, size, value: selected, readOnly } = React.useContext(RadioGroupContext);
     const autoId = React.useId();
     const id = idProp ?? `rd${autoId.replace(/:/g, "")}`;

package/dist/components/record-detail-layout.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { Collapsible } from "radix-ui";
+import * as Collapsible from "radix-ui/collapsible";
 import { ArrowLeft, ChevronDown, ChevronLeft, ChevronRight, LockKeyhole, SearchX } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useLabels } from "../lib/labels.js";
@@ -36,7 +36,7 @@ const recordLabels = {
 };
 /** Below this container width (42rem) the side column moves under the header as collapsed sections. Matches navigation.css. */
 const NARROW = 672;
-const RecordLayoutContext = React.createContext({
+const RecordLayoutContext = /*#__PURE__*/ React.createContext({
     narrow: false,
     readOnly: false,
     asidePosition: "end",
@@ -52,7 +52,7 @@ const RecordLayoutContext = React.createContext({
  * `aria-valuenow`; arrows resize, Shift+arrows in bigger steps, Home/End jump to min/max,
  * double-click resets). Logical: works in RTL.
  */
-export const SidePaneHandle = React.forwardRef(function SidePaneHandle({ value, min = 240, max = 560, defaultValue, onValueChange, edge = "start", step = 16, className, onKeyDown, onDoubleClick, ...props }, ref) {
+export const SidePaneHandle = /*#__PURE__*/ React.forwardRef(function SidePaneHandle({ value, min = 240, max = 560, defaultValue, onValueChange, edge = "start", step = 16, className, onKeyDown, onDoubleClick, ...props }, ref) {
     const innerRef = React.useRef(null);
     const composed = useComposedRefs(ref, innerRef);
     const [dragging, setDragging] = React.useState(false);
@@ -122,7 +122,7 @@ export const SidePaneHandle = React.forwardRef(function SidePaneHandle({ value,
  * </RecordLayout>
  * ```
  */
-export const RecordLayout = React.forwardRef(function RecordLayout({ asidePosition = "end", asideWidth: asideWidthProp, defaultAsideWidth = 320, onAsideWidthChange, resizable = false, minAsideWidth = 260, maxAsideWidth = 520, state = "ready", notFound, forbidden, readOnly = false, labels, className, style, children, ...props }, ref) {
+export const RecordLayout = /*#__PURE__*/ React.forwardRef(function RecordLayout({ asidePosition = "end", asideWidth: asideWidthProp, defaultAsideWidth = 320, onAsideWidthChange, resizable = false, minAsideWidth = 260, maxAsideWidth = 520, state = "ready", notFound, forbidden, readOnly = false, labels, className, style, children, ...props }, ref) {
     const t = useLabels("record", recordLabels, labels);
     const { ref: measureRef, width } = useContainerWidth();
     const composed = useComposedRefs(ref, measureRef);
@@ -147,7 +147,7 @@ function RecordLayoutSkeleton({ label }) {
     return (_jsxs(_Fragment, { children: [_jsxs("div", { role: "status", "aria-label": label, "aria-busy": "true", className: "flex items-center gap-4 [grid-area:header]", children: [_jsx(SkeletonAvatar, { size: "xl" }), _jsxs("div", { className: "grid flex-1 gap-2", children: [_jsx(Skeleton, { className: "h-6 w-56 rounded-ui-sm" }), _jsx(Skeleton, { className: "h-4 w-40 rounded-ui-sm" })] })] }), _jsxs("div", { className: "grid gap-(--gap) [grid-area:main]", children: [_jsx("div", { className: "surface rounded-ui-lg p-(--gap)", children: _jsx(SkeletonText, { lines: 4 }) }), _jsx("div", { className: "surface rounded-ui-lg p-(--gap)", children: _jsx(SkeletonText, { lines: 3 }) })] }), _jsx("div", { className: "grid gap-3 [grid-area:aside]", children: _jsx("div", { className: "surface-2 rounded-ui-lg p-4", children: _jsx(SkeletonText, { lines: 5 }) }) })] }));
 }
 /** The record's header: back link + pager, media, h1, status, subtitle, actions and key facts. */
-export const RecordHeader = React.forwardRef(function RecordHeader({ media, title, subtitle, status, facts, actions, back, pager, saving, size = "md", loading, labels, className, children, ...props }, ref) {
+export const RecordHeader = /*#__PURE__*/ React.forwardRef(function RecordHeader({ media, title, subtitle, status, facts, actions, back, pager, saving, size = "md", loading, labels, className, children, ...props }, ref) {
     const ctx = React.useContext(RecordLayoutContext);
     const t = useLabels("record", recordLabels, labels ?? ctx.labels);
     const showActions = actions && !ctx.readOnly;
@@ -156,7 +156,7 @@ export const RecordHeader = React.forwardRef(function RecordHeader({ media, titl
     return (_jsxs("header", { ref: ref, "data-slot": "record-header", "data-size": size, className: cn("flex min-w-0 flex-col gap-4 [grid-area:header]", className), ...props, children: [back || pager ? (_jsxs("div", { className: "flex min-h-8 items-center justify-between gap-3", children: [back ? (_jsxs(SmartLink, { href: back.href, className: "-ms-0.5 inline-flex w-fit items-center gap-1.5 rounded-ui-sm text-[13px] text-fg-muted transition-colors hover:text-fg focus-ring", children: [_jsx(ArrowLeft, { "aria-hidden": true, className: "size-3.5 rtl:-scale-x-100" }), back.label] })) : (_jsx("span", {})), pager] })) : null, _jsxs("div", { className: "flex flex-wrap items-start gap-x-5 gap-y-4", children: [media ? _jsx("div", { "data-slot": "record-header-media", className: "shrink-0", children: media }) : null, _jsxs("div", { className: "min-w-0 flex-[1_1_16rem] self-center", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [_jsx("h1", { "aria-busy": loading || undefined, className: cn("font-display min-w-0 text-fg [text-wrap:balance]", size === "md" ? "text-[length:calc(28px*var(--display-scale))] leading-[1.1]" : "text-[length:calc(20px*var(--display-scale))] leading-[1.15]"), children: loading ? _jsx(Skeleton, { className: "inline-block h-[0.8em] w-[min(16rem,55vw)] rounded-ui-sm align-middle" }) : title }), status && !loading ? _jsx("span", { className: "inline-flex items-center gap-2", children: status }) : null, saving ? (_jsxs("span", { role: "status", className: "inline-flex items-center gap-1.5 text-[13px] text-fg-subtle", children: [_jsx(Spinner, { size: "xs" }), " ", t("saving")] })) : null] }), loading ? (_jsx(Skeleton, { className: "mt-2 h-4 w-48 rounded-ui-sm" })) : subtitle ? (_jsx("p", { className: "mt-1 text-[14px] text-fg-muted", children: subtitle })) : null] }), showActions ? _jsx("div", { "data-slot": "record-header-actions", className: "flex flex-wrap items-center gap-2 self-center", children: actions }) : null] }), facts?.length ? (_jsx("div", { ref: factsRef, role: "group", "aria-label": t("facts"), tabIndex: 0, "data-slot": "record-facts", "data-edge-fade": "x", className: "-mx-1 overflow-x-auto scrollbar-none rounded-ui-sm px-1 focus-ring @2xl/record:overflow-visible", children: _jsx("dl", { className: "flex w-max min-w-full items-stretch @2xl/record:w-auto @2xl/record:flex-wrap @2xl/record:gap-y-3", children: facts.map((f, i) => (_jsxs("div", { className: "flex min-w-0 shrink-0 flex-col gap-1 border-s border-line px-5 first:border-s-0 first:ps-0", children: [_jsx("dt", { className: "text-[12px] text-fg-subtle", children: f.label }), _jsx("dd", { className: "tabular text-[14px] font-medium text-fg", children: f.value })] }, i))) }) })) : null, children] }));
 });
 /** "3 of 128" with previous/next buttons and `j` / `k` shortcuts. */
-export const RecordPager = React.forwardRef(function RecordPager({ index, total, prevHref, nextHref, onPrevious, onNext, shortcuts = true, labels, className, ...props }, ref) {
+export const RecordPager = /*#__PURE__*/ React.forwardRef(function RecordPager({ index, total, prevHref, nextHref, onPrevious, onNext, shortcuts = true, labels, className, ...props }, ref) {
     const ctx = React.useContext(RecordLayoutContext);
     const t = useLabels("record", recordLabels, labels ?? ctx.labels);
     const f = useFormat();
@@ -194,23 +194,23 @@ export const RecordPager = React.forwardRef(function RecordPager({ index, total,
     return (_jsxs("nav", { ref: ref, "aria-label": t("pagerLabel"), "data-slot": "record-pager", className: cn("inline-flex items-center gap-1", className), ...props, children: [_jsx("span", { className: "tabular me-1 text-[13px] text-fg-muted", children: t("pager", { index: f.number(index), total: f.number(total) }) }), _jsxs("span", { className: "inline-flex items-center rounded-ui-sm border border-line", children: [step("prev"), _jsx("span", { "aria-hidden": true, className: "h-4 w-px bg-line" }), step("next")] })] }));
 });
 /** The main column: tabs, overview, activity, related lists. */
-export const RecordMain = React.forwardRef(function RecordMain({ tabs, className, children, ...props }, ref) {
+export const RecordMain = /*#__PURE__*/ React.forwardRef(function RecordMain({ tabs, className, children, ...props }, ref) {
     return (_jsxs("div", { ref: ref, "data-slot": "record-main", className: cn("flex min-w-0 flex-col gap-(--gap) [grid-area:main]", className), ...props, children: [tabs ? _jsx("div", { "data-slot": "record-main-tabs", className: "-mb-1", children: tabs }) : null, children] }));
 });
 /** A titled card in the main column: overview, activity, related deals. `<section aria-labelledby>`. */
-export const RecordSection = React.forwardRef(function RecordSection({ title, description, action, padding = "md", className, children, id, ...props }, ref) {
+export const RecordSection = /*#__PURE__*/ React.forwardRef(function RecordSection({ title, description, action, padding = "md", className, children, id, ...props }, ref) {
     const autoId = React.useId();
     const titleId = `${id ?? `record-section${autoId.replace(/:/g, "")}`}-title`;
     return (_jsxs("section", { ref: ref, id: id, "aria-labelledby": titleId, "data-slot": "record-section", className: cn("surface overflow-hidden rounded-ui-lg", className), ...props, children: [_jsxs("div", { className: "flex items-start justify-between gap-3 px-(--gap) pt-[calc(var(--gap)*0.8)]", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: titleId, className: "text-[15px] font-semibold text-fg", children: title }), description ? _jsx("p", { className: "mt-0.5 text-[13px] text-fg-muted", children: description }) : null] }), action ? _jsx("div", { className: "-me-1 -mt-1 flex shrink-0 items-center gap-1.5", children: action }) : null] }), _jsx("div", { className: cn(padding === "md" ? "p-(--gap) pt-3" : "pt-3"), children: children })] }));
 });
 /** The side column (`<aside>`): description lists, owners, tags, related records. */
-export const RecordAside = React.forwardRef(function RecordAside({ className, children, labels, ...props }, ref) {
+export const RecordAside = /*#__PURE__*/ React.forwardRef(function RecordAside({ className, children, labels, ...props }, ref) {
     const ctx = React.useContext(RecordLayoutContext);
     const t = useLabels("record", recordLabels, labels ?? ctx.labels);
     return (_jsxs("aside", { ref: ref, "aria-label": props["aria-label"] ?? t("details"), "data-slot": "record-aside", className: cn("relative flex min-w-0 flex-col gap-3 [grid-area:aside]", className), ...props, children: [ctx.resizable && !ctx.narrow ? (_jsx(SidePaneHandle, { "aria-label": t("resizeAside"), edge: ctx.asidePosition === "end" ? "start" : "end", value: ctx.asideWidth, min: ctx.minAsideWidth, max: ctx.maxAsideWidth, defaultValue: ctx.defaultAsideWidth, onValueChange: ctx.setAsideWidth })) : null, children] }));
 });
 /** A titled block in the side column; folds like an accordion item when space is short. */
-export const RecordAsideSection = React.forwardRef(function RecordAsideSection({ title, action, collapsible = false, defaultOpen = true, open: openProp, onOpenChange, headingLevel = 2, className, children, ...props }, ref) {
+export const RecordAsideSection = /*#__PURE__*/ React.forwardRef(function RecordAsideSection({ title, action, collapsible = false, defaultOpen = true, open: openProp, onOpenChange, headingLevel = 2, className, children, ...props }, ref) {
     const { narrow } = React.useContext(RecordLayoutContext);
     const foldable = collapsible || narrow;
     const touched = React.useRef(false);

package/dist/components/record-picker.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import * as PopoverPrimitive from "radix-ui/popover";
 import { Check, ChevronsUpDown, ExternalLink, LayoutList, Plus, RotateCw, Search, TriangleAlert, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { mergeIds } from "../lib/compose-refs.js";
@@ -647,4 +647,4 @@ function RecordPickerInner(props, forwardedRef) {
  * <Field label="Company"><RecordPicker source={companies} value={companyId} onValueChange={setCompanyId} /></Field>
  * ```
  */
-export const RecordPicker = React.forwardRef(RecordPickerInner);
+export const RecordPicker = /*#__PURE__*/ React.forwardRef(RecordPickerInner);

package/dist/components/resizable.js

@@ -7,7 +7,7 @@ import { cn } from "../lib/cn.js";
 export const useResizablePanelRef = usePanelRef;
 /** Typed ref for a `ResizableGroup`'s `groupRef` (`getLayout()`, `setLayout()`). */
 export const useResizableGroupRef = useGroupRef;
-const OrientationContext = React.createContext("horizontal");
+const OrientationContext = /*#__PURE__*/ React.createContext("horizontal");
 /** localStorage that never throws (private mode, SSR, blocked storage). */
 const safeLocalStorage = {
     getItem(key) {
@@ -45,7 +45,7 @@ const safeLocalStorage = {
  * units (`"35%"`, `"280px"`, `"20rem"`). In glass mode surfaces inside stop blurring while a
  * handle is dragged. On phones, show one pane and open the other in a Sheet (not automatic).
  */
-export const ResizableGroup = React.forwardRef(function ResizableGroup(props, ref) {
+export const ResizableGroup = /*#__PURE__*/ React.forwardRef(function ResizableGroup(props, ref) {
     return props.autoSaveId ? _jsx(PersistedGroup, { ...props, forwardedRef: ref }) : _jsx(BaseGroup, { ...props, forwardedRef: ref });
 });
 function PersistedGroup({ autoSaveId, storage, onLayoutChanged, defaultLayout, ...props }) {

package/dist/components/scroll-area.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ScrollArea as RadixScrollArea } from "radix-ui";
+import * as RadixScrollArea from "radix-ui/scroll-area";
 type BarSize = "sm" | "md";
 export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixScrollArea.Root>, "dir"> {
     /** Which scrollbars to render. Default `"vertical"`. */

package/dist/components/scroll-area.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ScrollArea as RadixScrollArea } from "radix-ui";
+import * as RadixScrollArea from "radix-ui/scroll-area";
 import { cn } from "../lib/cn.js";
 import { useComposedRefs } from "../lib/compose-refs.js";
 import { useEdgeFade } from "../lib/use-edge-fade.js";
 import { useIsomorphicLayoutEffect } from "../lib/use-controllable-state.js";
-const BarSizeContext = React.createContext("sm");
+const BarSizeContext = /*#__PURE__*/ React.createContext("sm");
 const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
 /**
  * A consistent thin scrollbar for bounded, embedded regions: popover and command lists, the
@@ -21,7 +21,7 @@ const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:n
  * only for embedded regions (performance and iOS momentum). The viewport is keyboard-focusable only
  * when its content has nothing focusable of its own.
  */
-export const ScrollArea = React.forwardRef(function ScrollArea({ orientation = "vertical", maxHeight, fade, size = "sm", type = "hover", viewportRef, viewportClassName, className, children, style, "aria-label": ariaLabel, ...props }, ref) {
+export const ScrollArea = /*#__PURE__*/ React.forwardRef(function ScrollArea({ orientation = "vertical", maxHeight, fade, size = "sm", type = "hover", viewportRef, viewportClassName, className, children, style, "aria-label": ariaLabel, ...props }, ref) {
     const innerRef = React.useRef(null);
     const composed = useComposedRefs(viewportRef, innerRef);
     const axis = orientation === "horizontal" ? "x" : "y";
@@ -49,7 +49,7 @@ export const ScrollArea = React.forwardRef(function ScrollArea({ orientation = "
     return (_jsx(BarSizeContext.Provider, { value: size, children: _jsxs(RadixScrollArea.Root, { ref: ref, type: type, "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), style: style, ...props, children: [_jsx(RadixScrollArea.Viewport, { ref: composed, "data-slot": "scroll-area-viewport", "data-orientation": orientation, "data-edge-fade": fade && orientation !== "both" ? axis : undefined, tabIndex: focusable ? 0 : undefined, role: ariaLabel ? "region" : undefined, "aria-label": ariaLabel, className: cn("size-full rounded-[inherit] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring", viewportClassName), style: maxHeight !== undefined ? { maxHeight } : undefined, children: children }), orientation !== "horizontal" ? _jsx(ScrollBar, { orientation: "vertical" }) : null, orientation !== "vertical" ? _jsx(ScrollBar, { orientation: "horizontal" }) : null, _jsx(RadixScrollArea.Corner, {})] }) }));
 });
 /** A scrollbar for `ScrollArea`. Rendered automatically from `orientation`; use it directly for custom layouts. */
-export const ScrollBar = React.forwardRef(function ScrollBar({ orientation = "vertical", size, className, ...props }, ref) {
+export const ScrollBar = /*#__PURE__*/ React.forwardRef(function ScrollBar({ orientation = "vertical", size, className, ...props }, ref) {
     const ctxSize = React.useContext(BarSizeContext);
     const s = size ?? ctxSize;
     return (_jsx(RadixScrollArea.Scrollbar, { ref: ref, orientation: orientation, "data-slot": "scroll-area-bar", className: cn("z-(--z-sticky) flex touch-none select-none p-px transition-[opacity,background-color] duration-150", "data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100", orientation === "vertical" ? (s === "sm" ? "w-2" : "w-2.5") : s === "sm" ? "h-2 flex-col" : "h-2.5 flex-col", orientation === "vertical" ? "h-full border-s border-s-transparent" : "border-t border-t-transparent", "hover:bg-[color-mix(in_srgb,var(--track)_50%,transparent)]", className), ...props, children: _jsx(RadixScrollArea.Thumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full before:absolute before:top-1/2 before:left-1/2 before:size-full before:min-h-8 before:min-w-8 before:-translate-x-1/2 before:-translate-y-1/2" }) }));

package/dist/components/select.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Select as SelectPrimitive } from "radix-ui";
+import * as SelectPrimitive from "radix-ui/select";
 declare const selectLabels: {
     placeholder: string;
     clear: string;

package/dist/components/select.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Select as SelectPrimitive } from "radix-ui";
+import * as SelectPrimitive from "radix-ui/select";
 import { Check, ChevronDown, ChevronUp, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useFieldContext, useFieldControl } from "../lib/field-context.js";
@@ -19,7 +19,7 @@ const selectLabels = {
     loading: "Loading options…",
     empty: "No options",
 };
-const SelectContext = React.createContext({ size: "md", itemSize: "md" });
+const SelectContext = /*#__PURE__*/ React.createContext({ size: "md", itemSize: "md" });
 /* ------------------------------------------------------------------ */
 /* Composite parts                                                     */
 /* ------------------------------------------------------------------ */
@@ -29,21 +29,21 @@ export const SelectRoot = SelectPrimitive.Root;
  * The button that shows the value. Uses `controlVariants`, so it lines up with Input.
  * Reads the surrounding Field (id, description, invalid, disabled).
  */
-export const SelectTrigger = React.forwardRef(function SelectTrigger({ className, size = "md", variant = "default", invalid, readOnly, loading, children, ...rest }, ref) {
+export const SelectTrigger = /*#__PURE__*/ React.forwardRef(function SelectTrigger({ className, size = "md", variant = "default", invalid, readOnly, loading, children, ...rest }, ref) {
     const props = useFieldControl({ ...rest, readOnly, "aria-invalid": invalid ? true : rest["aria-invalid"] });
     const { readOnly: ro, required, name: _name, ...triggerProps } = props;
     void _name;
     return (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", "data-size": size, "data-readonly": ro ? "" : undefined, "aria-readonly": ro || undefined, "aria-required": required || undefined, "aria-busy": loading || undefined, className: cn(controlVariants({ size, variant: variant === "pill" ? "default" : variant, pill: variant === "pill" }), "justify-between text-start whitespace-nowrap cursor-default", "data-placeholder:text-fg-subtle [&>span]:min-w-0 [&>span]:truncate", ro && "cursor-default", className), ...triggerProps, children: [children, loading ? (_jsx(Spinner, { size: size === "lg" ? "md" : "sm", tone: "muted" })) : ro ? null : (_jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { "aria-hidden": true, className: "shrink-0 text-fg-subtle transition-transform duration-150 [[data-state=open]>&]:rotate-180" }) }))] }));
 });
 /** Shows the selected item's text, or the placeholder. Children override the rendering. */
-export const SelectValue = React.forwardRef(function SelectValue({ className, ...props }, ref) {
+export const SelectValue = /*#__PURE__*/ React.forwardRef(function SelectValue({ className, ...props }, ref) {
     return _jsx(SelectPrimitive.Value, { ref: ref, "data-slot": "select-value", className: cn("min-w-0 truncate", className), ...props });
 });
 /**
  * The floating list. Popper-positioned under the trigger, at least as wide as it, portalled into
  * the nearest ThemeScope, and one layer deep (glass blur only at depth 1).
  */
-export const SelectContent = React.forwardRef(function SelectContent({ className, children, position = "popper", sideOffset = 6, collisionPadding = 12, itemSize, ...props }, ref) {
+export const SelectContent = /*#__PURE__*/ React.forwardRef(function SelectContent({ className, children, position = "popper", sideOffset = 6, collisionPadding = 12, itemSize, ...props }, ref) {
     const container = usePortalContainer();
     const parent = React.useContext(SelectContext);
     const ctx = React.useMemo(() => ({ ...parent, itemSize: itemSize ?? parent.itemSize }), [parent, itemSize]);
@@ -54,20 +54,20 @@ export const SelectContent = React.forwardRef(function SelectContent({ className
  * One option. Typeahead uses a locale-folded copy of the text, so typing "i" finds "İstanbul"
  * and "c" finds "Çanakkale". Pass `textValue` when children aren't plain text.
  */
-export const SelectItem = React.forwardRef(function SelectItem({ className, children, icon, description, textValue, ...props }, ref) {
+export const SelectItem = /*#__PURE__*/ React.forwardRef(function SelectItem({ className, children, icon, description, textValue, ...props }, ref) {
     const { itemSize } = React.useContext(SelectContext);
     const { locale } = useLocale();
     const plain = textValue ?? (typeof children === "string" ? children : undefined);
     return (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", textValue: plain !== undefined ? foldText(plain, locale) : undefined, className: cn(itemVariants({ size: itemSize }), "pe-8", description ? "items-start" : undefined, className), ...props, children: [icon ? _jsx("span", { className: cn(itemSlots.icon, "flex items-center justify-center", description && "mt-0.5"), children: icon }) : null, _jsxs("span", { className: "grid min-w-0 flex-1", children: [_jsx(SelectPrimitive.ItemText, { children: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [icon ? _jsx("span", { "aria-hidden": true, className: "hidden items-center text-fg-muted [[data-slot=select-trigger]_&]:flex", children: icon }) : null, _jsx("span", { className: "truncate", children: children })] }) }), description ? _jsx("span", { className: itemSlots.description, children: description }) : null] }), _jsx("span", { className: cn("absolute end-2 flex size-4 items-center justify-center text-accent-ink", description && "top-2"), children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { "aria-hidden": true, strokeWidth: 2.5, className: "size-4" }) }) })] }));
 });
 /** Groups items under a heading; announced as a group. */
-export const SelectGroup = React.forwardRef(function SelectGroup({ label, children, ...props }, ref) {
+export const SelectGroup = /*#__PURE__*/ React.forwardRef(function SelectGroup({ label, children, ...props }, ref) {
     return (_jsxs(SelectPrimitive.Group, { ref: ref, "data-slot": "select-group", ...props, children: [label != null ? _jsx(SelectLabel, { children: label }) : null, children] }));
 });
-export const SelectLabel = React.forwardRef(function SelectLabel({ className, ...props }, ref) {
+export const SelectLabel = /*#__PURE__*/ React.forwardRef(function SelectLabel({ className, ...props }, ref) {
     return _jsx(SelectPrimitive.Label, { ref: ref, "data-slot": "select-label", className: cn(itemSlots.groupLabel, className), ...props });
 });
-export const SelectSeparator = React.forwardRef(function SelectSeparator({ className, ...props }, ref) {
+export const SelectSeparator = /*#__PURE__*/ React.forwardRef(function SelectSeparator({ className, ...props }, ref) {
     return _jsx(SelectPrimitive.Separator, { ref: ref, "data-slot": "select-separator", className: cn(itemSlots.separator, className), ...props });
 });
 function groupItems(items) {
@@ -134,4 +134,4 @@ function SelectInner({ value: valueProp, defaultValue, onValueChange, items, chi
  * </Field>
  * ```
  */
-export const Select = React.forwardRef(SelectInner);
+export const Select = /*#__PURE__*/ React.forwardRef(SelectInner);

package/dist/components/separator.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Separator as SeparatorPrimitive } from "radix-ui";
+import * as SeparatorPrimitive from "radix-ui/separator";
 import { type VariantProps } from "class-variance-authority";
 export declare const separatorVariants: (props?: ({
     tone?: "nav" | "strong" | "line" | null | undefined;

package/dist/components/separator.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Separator as SeparatorPrimitive } from "radix-ui";
+import * as SeparatorPrimitive from "radix-ui/separator";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
-export const separatorVariants = cva("shrink-0 border-0", {
+export const separatorVariants = /*#__PURE__*/ cva("shrink-0 border-0", {
     variants: {
         tone: {
             line: "bg-line",
@@ -32,7 +32,7 @@ export const separatorVariants = cva("shrink-0 border-0", {
  * <Separator label="or continue with" />
  * ```
  */
-export const Separator = React.forwardRef(function Separator({ className, orientation = "horizontal", decorative = true, tone, inset, label, labelAlign = "center", ...props }, ref) {
+export const Separator = /*#__PURE__*/ React.forwardRef(function Separator({ className, orientation = "horizontal", decorative = true, tone, inset, label, labelAlign = "center", ...props }, ref) {
     if (label != null && orientation === "horizontal") {
         const line = _jsx(SeparatorPrimitive.Root, { decorative: true, className: cn(separatorVariants({ tone, orientation: "horizontal" }), "w-auto flex-1") });
         return (_jsxs("div", { ref: ref, "data-slot": "separator", "data-orientation": "horizontal", className: cn("flex w-full items-center gap-3 text-xs text-fg-subtle", inset && "px-(--gap)", className), ...props, children: [labelAlign !== "start" ? line : null, _jsx("span", { className: "shrink-0 tracking-[0.01em]", children: label }), labelAlign !== "end" ? line : null] }));

package/dist/components/settings-layout.js

@@ -25,7 +25,7 @@ const settingsLabels = {
     error: "Couldn't save your changes",
     loading: "Loading settings",
 };
-const SettingsLayoutContext = React.createContext({ readOnly: false });
+const SettingsLayoutContext = /*#__PURE__*/ React.createContext({ readOnly: false });
 /**
  * A shared skeleton for settings pages: section nav, titled sections of label | control rows,
  * a sticky save bar that rises when there are unsaved changes, and a danger zone. Not bound to
@@ -41,7 +41,7 @@ const SettingsLayoutContext = React.createContext({ readOnly: false });
  * </SettingsLayout>
  * ```
  */
-export const SettingsLayout = React.forwardRef(function SettingsLayout({ nav, width = "md", readOnly = false, notice, stickyTop, labels, className, style, children, ...props }, ref) {
+export const SettingsLayout = /*#__PURE__*/ React.forwardRef(function SettingsLayout({ nav, width = "md", readOnly = false, notice, stickyTop, labels, className, style, children, ...props }, ref) {
     const ctx = React.useMemo(() => ({ readOnly, labels }), [readOnly, labels]);
     const top = stickyTop === undefined ? undefined : typeof stickyTop === "number" ? `${stickyTop}px` : stickyTop;
     return (_jsx(SettingsLayoutContext.Provider, { value: ctx, children: _jsx("div", { ref: ref, "data-slot": "settings-layout", "data-read-only": readOnly ? "" : undefined, className: cn("@container/settings mx-auto w-full min-w-0", width === "md" ? "max-w-[64rem]" : "max-w-[80rem]", className), style: top !== undefined ? { "--settings-sticky-top": top, ...style } : style, ...props, children: _jsxs("div", { className: cn("grid min-w-0 gap-x-10 gap-y-5", nav && "@2xl/settings:grid-cols-[11.5rem_minmax(0,1fr)]"), children: [nav ? (_jsx("div", { "data-slot": "settings-layout-nav", className: "min-w-0 @2xl/settings:sticky @2xl/settings:top-[calc(var(--settings-sticky-top,var(--topbar-h))+1.5rem)] @2xl/settings:self-start", children: nav })) : null, _jsxs("div", { "data-slot": "settings-layout-content", className: "flex min-w-0 flex-col gap-[calc(var(--gap)*1.6)]", children: [notice, children] })] }) }) }));
@@ -50,7 +50,7 @@ export const SettingsLayout = React.forwardRef(function SettingsLayout({ nav, wi
  * Section navigation: a `nav` with `aria-current`. Anchor items scroll to their section, move focus
  * to its heading, and follow the scroll (scroll-spy). Link items use the app's router.
  */
-export const SettingsNav = React.forwardRef(function SettingsNav({ items: itemsProp, value: valueProp, defaultValue, onValueChange, scrollSpy = true, labels, className, ...props }, ref) {
+export const SettingsNav = /*#__PURE__*/ React.forwardRef(function SettingsNav({ items: itemsProp, value: valueProp, defaultValue, onValueChange, scrollSpy = true, labels, className, ...props }, ref) {
     const ctx = React.useContext(SettingsLayoutContext);
     const t = useLabels("settings", settingsLabels, labels ?? ctx.labels);
     const can = useCan();
@@ -121,7 +121,7 @@ export const SettingsNav = React.forwardRef(function SettingsNav({ items: itemsP
             }) }) }));
 });
 /** A titled group of setting rows. `<section aria-labelledby>`. */
-export const SettingsSection = React.forwardRef(function SettingsSection({ id, title, description, layout = "stacked", tone = "default", footer, loading, headingLevel = 2, labels, className, children, ...props }, ref) {
+export const SettingsSection = /*#__PURE__*/ React.forwardRef(function SettingsSection({ id, title, description, layout = "stacked", tone = "default", footer, loading, headingLevel = 2, labels, className, children, ...props }, ref) {
     const ctx = React.useContext(SettingsLayoutContext);
     const t = useLabels("settings", settingsLabels, labels ?? ctx.labels);
     const autoId = React.useId();
@@ -135,7 +135,7 @@ export const SettingsSection = React.forwardRef(function SettingsSection({ id, t
  * One setting: label + description | control. Acts like a `Field` for kit controls (Input,
  * Switch, Select…): the id, `aria-describedby` and disabled/invalid state are wired for you.
  */
-export const SettingsRow = React.forwardRef(function SettingsRow({ label, description, htmlFor, layout = "split", badge, error, disabled, className, children, ...props }, ref) {
+export const SettingsRow = /*#__PURE__*/ React.forwardRef(function SettingsRow({ label, description, htmlFor, layout = "split", badge, error, disabled, className, children, ...props }, ref) {
     const { readOnly } = React.useContext(SettingsLayoutContext);
     const autoId = React.useId().replace(/:/g, "");
     const controlId = htmlFor ?? `setting-${autoId}`;
@@ -160,7 +160,7 @@ export const SettingsRow = React.forwardRef(function SettingsRow({ label, descri
  * The sticky "Unsaved changes · Discard · Save" bar. It rises from the bottom of the content when
  * the form is dirty, announces itself politely, and `mod+s` saves.
  */
-export const SettingsSaveBar = React.forwardRef(function SettingsSaveBar({ dirty, saving = false, onSave, onReset, message, error, blockNavigation = true, shortcuts = true, saveLabel, labels, className, ...props }, ref) {
+export const SettingsSaveBar = /*#__PURE__*/ React.forwardRef(function SettingsSaveBar({ dirty, saving = false, onSave, onReset, message, error, blockNavigation = true, shortcuts = true, saveLabel, labels, className, ...props }, ref) {
     const ctx = React.useContext(SettingsLayoutContext);
     const t = useLabels("settings", settingsLabels, labels ?? ctx.labels);
     const visible = dirty || saving || Boolean(error);

package/dist/components/sheet.js

@@ -34,7 +34,7 @@ export const SheetBody = LayerBody;
 /** `LayerFooter` for sheets. */
 export const SheetFooter = LayerFooter;
 const sideAlias = { left: "start", right: "end" };
-export const SheetContent = React.forwardRef(function SheetContent({ side: sideProp = "end", size = "md", inset, className, ...props }, ref) {
+export const SheetContent = /*#__PURE__*/ React.forwardRef(function SheetContent({ side: sideProp = "end", size = "md", inset, className, ...props }, ref) {
     const side = sideProp === "left" || sideProp === "right" ? sideAlias[sideProp] : sideProp;
     return (_jsx(LayerContentShell, { ref: ref, "data-slot": "sheet-content", "data-side": side, "data-size": size, "data-inset": inset ? "" : undefined, className: cn("vui-sheet", `ui-sheet-${side}`, className), ...props }));
 });
@@ -138,14 +138,14 @@ export const DrawerClose = DialogClose;
 export const DrawerHeader = LayerHeader;
 export const DrawerFooter = LayerFooter;
 /** The scrolling body of a drawer; dragging starts from it only while it is scrolled to the top. */
-export const DrawerBody = React.forwardRef(function DrawerBody(props, ref) {
+export const DrawerBody = /*#__PURE__*/ React.forwardRef(function DrawerBody(props, ref) {
     return _jsx(LayerBody, { ref: ref, "data-slot": "drawer-body", ...props });
 });
 /** The grab line at the top of a drawer. Decorative (`aria-hidden`). */
 export function DrawerHandle({ className }) {
     return _jsx("div", { "aria-hidden": true, "data-slot": "drawer-handle", className: cn("vui-drawer-handle", className) });
 }
-export const DrawerContent = React.forwardRef(function DrawerContent({ dragToDismiss = true, handle = true, size = "lg", className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }, ref) {
+export const DrawerContent = /*#__PURE__*/ React.forwardRef(function DrawerContent({ dragToDismiss = true, handle = true, size = "lg", className, children, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }, ref) {
     const root = useDialogRoot();
     const { ref: dragRef, handlers } = useDragDismiss({ onDismiss: () => root.requestOpenChange(false), enabled: dragToDismiss });
     const composed = useComposedRefs(ref, dragRef);

package/dist/components/sidebar.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Collapsible, Popover as PopoverPrimitive } from "radix-ui";
+import * as Collapsible from "radix-ui/collapsible";
+import * as PopoverPrimitive from "radix-ui/popover";
 import { ArrowUpRight, Check, ChevronDown, ChevronRight, ChevronsUpDown, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useLabels } from "../lib/labels.js";
@@ -27,7 +28,7 @@ const sidebarLabels = {
     workspaces: "Workspaces",
     loading: "Loading menu",
 };
-const SidebarContext = React.createContext(null);
+const SidebarContext = /*#__PURE__*/ React.createContext(null);
 /** Collapsed state and helpers of the nearest `Sidebar`. */
 export function useSidebar() {
     const ctx = React.useContext(SidebarContext);
@@ -42,8 +43,8 @@ const useSidebarCtx = () => {
     return ctx;
 };
 /** Active trail from `SidebarNav` (data-driven); `null` in the compound API (each item checks its own href). */
-const TrailContext = React.createContext(null);
-const SubContext = React.createContext({ placement: "inline", depth: 1 });
+const TrailContext = /*#__PURE__*/ React.createContext(null);
+const SubContext = /*#__PURE__*/ React.createContext({ placement: "inline", depth: 1 });
 /**
  * The primary app navigation. Dark in both themes; the active section's submenu stays open in
  * place, other sections open as flyouts, and the rail turns every submenu into a flyout.
@@ -57,7 +58,7 @@ const SubContext = React.createContext({ placement: "inline", depth: 1 });
  * </Sidebar>
  * ```
  */
-export const Sidebar = React.forwardRef(function Sidebar({ variant = "nav", collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, collapsible = true, mode = "desktop", shortcut = false, onNavigate, labels, className, children, ...props }, ref) {
+export const Sidebar = /*#__PURE__*/ React.forwardRef(function Sidebar({ variant = "nav", collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, collapsible = true, mode = "desktop", shortcut = false, onNavigate, labels, className, children, ...props }, ref) {
     const t = useLabels("sidebar", sidebarLabels, labels);
     const [collapsedState, setCollapsed] = useControllableState({ value: collapsedProp, defaultValue: defaultCollapsed, onChange: onCollapsedChange, name: "Sidebar" });
     const collapsed = mode === "desktop" && collapsible && collapsedState;
@@ -66,20 +67,20 @@ export const Sidebar = React.forwardRef(function Sidebar({ variant = "nav", coll
     return (_jsx(SidebarContext.Provider, { value: ctx, children: _jsx("aside", { ref: ref, "data-slot": "sidebar", "data-variant": variant, "data-mode": mode, "data-collapsed": collapsed ? "" : undefined, className: cn("vui-sidebar surface-nav relative flex h-full min-h-0 shrink-0 flex-col text-[13.5px]", mode === "desktop" && "border-e border-nav-line", variant === "surface" && "border-line", className), ...props, children: children }) }));
 });
 /** Top slot: app switcher, workspace switcher, logo. */
-export const SidebarHeader = React.forwardRef(function SidebarHeader({ className, ...props }, ref) {
+export const SidebarHeader = /*#__PURE__*/ React.forwardRef(function SidebarHeader({ className, ...props }, ref) {
     return _jsx("div", { ref: ref, "data-slot": "sidebar-header", className: cn("grid gap-1 border-b border-nav-line p-2", className), ...props });
 });
 /** The scrolling `<nav>` with the menu. */
-export const SidebarContent = React.forwardRef(function SidebarContent({ className, ...props }, ref) {
+export const SidebarContent = /*#__PURE__*/ React.forwardRef(function SidebarContent({ className, ...props }, ref) {
     const { t } = useSidebarCtx();
     return (_jsx("nav", { ref: ref, "data-slot": "sidebar-content", "aria-label": props["aria-label"] ?? t("label"), className: cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-contain py-2 scrollbar-none", className), ...props }));
 });
 /** Bottom slot: shared menu, collapse button, user. */
-export const SidebarFooter = React.forwardRef(function SidebarFooter({ className, ...props }, ref) {
+export const SidebarFooter = /*#__PURE__*/ React.forwardRef(function SidebarFooter({ className, ...props }, ref) {
     return _jsx("div", { ref: ref, "data-slot": "sidebar-footer", className: cn("border-t border-nav-line", className), ...props });
 });
 /** A section: optional heading plus a list of `SidebarItem`s. */
-export const SidebarGroup = React.forwardRef(function SidebarGroup({ label, className, children, ...props }, ref) {
+export const SidebarGroup = /*#__PURE__*/ React.forwardRef(function SidebarGroup({ label, className, children, ...props }, ref) {
     const { collapsed } = useSidebarCtx();
     const id = React.useId();
     return (_jsxs("div", { ref: ref, "data-slot": "sidebar-group", role: label ? "group" : undefined, "aria-labelledby": label ? id : undefined, className: cn("grid", className), ...props, children: [label ? (collapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { id: id, className: "sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-4 my-2 h-px bg-nav-line" })] })) : (_jsx("span", { id: id, className: "px-4.5 pt-4 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }))) : null, _jsx("ul", { className: "grid gap-px", children: children })] }));
@@ -149,7 +150,7 @@ function useItemActive(id, href, children, explicit) {
 }
 const rowBase = "relative flex w-full items-center gap-3 rounded-ui-sm text-start outline-none transition-colors focus-ring";
 /** An `<a>` through the app router, a `<button>` (no href) or a disabled `<span>`. */
-const LinkRow = React.forwardRef(function LinkRow({ href, external, disabled, className, children, onClick, buttonProps, ...rest }, ref) {
+const LinkRow = /*#__PURE__*/ React.forwardRef(function LinkRow({ href, external, disabled, className, children, onClick, buttonProps, ...rest }, ref) {
     const Link = useLink();
     const { onNavigate } = useSidebarCtx();
     if (disabled) {
@@ -356,7 +357,7 @@ export function SidebarNav({ items, badges, features, trail: trailProp, classNam
 /* Collapse button, skeleton                                            */
 /* ------------------------------------------------------------------ */
 /** Toggles the rail. `aria-pressed` is true while collapsed. */
-export const SidebarCollapseButton = React.forwardRef(function SidebarCollapseButton({ className, onClick, ...props }, ref) {
+export const SidebarCollapseButton = /*#__PURE__*/ React.forwardRef(function SidebarCollapseButton({ className, onClick, ...props }, ref) {
     const { collapsed, setCollapsed, collapsible, mode, t } = useSidebarCtx();
     const { dir } = useLocale();
     if (!collapsible || mode === "mobile")

package/dist/components/signature-pad.js

@@ -109,7 +109,7 @@ const signatureLabels = {
  * <Field label="Customer signature" required><SignaturePad name="signature" exportPng /></Field>
  * ```
  */
-export const SignaturePad = React.forwardRef(function SignaturePad(props, ref) {
+export const SignaturePad = /*#__PURE__*/ React.forwardRef(function SignaturePad(props, ref) {
     const { value, defaultValue, onValueChange, modes = ["draw", "type"], height = 176, penColor = "fg", exportPng = false, name, disabled: disabledProp, readOnly: readOnlyProp, invalid: invalidProp, required: requiredProp, labels, className, id, "aria-describedby": describedBy, ...rest } = props;
     const field = useFieldContext();
     const disabled = disabledProp ?? field?.disabled ?? false;

package/dist/components/skeleton.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
 import { LocalizedText } from "../lib/islands.js";
-export const skeletonVariants = cva("block bg-skeleton", {
+export const skeletonVariants = /*#__PURE__*/ cva("block bg-skeleton", {
     variants: {
         shape: {
             rect: "rounded-ui-sm",
@@ -22,11 +22,11 @@ export const skeletonVariants = cva("block bg-skeleton", {
  *
  * The shimmer runs in the reading direction (RTL-aware) and stops under `prefers-reduced-motion`.
  */
-export const Skeleton = React.forwardRef(function Skeleton({ className, shape, shimmer, ...props }, ref) {
+export const Skeleton = /*#__PURE__*/ React.forwardRef(function Skeleton({ className, shape, shimmer, ...props }, ref) {
     return _jsx("div", { ref: ref, "aria-hidden": true, "data-slot": "skeleton", className: cn(skeletonVariants({ shape, shimmer }), className), ...props });
 });
 /** Paragraph placeholder: full-width lines with a shorter last line. */
-export const SkeletonText = React.forwardRef(function SkeletonText({ lines = 3, lastLineWidth = "62%", shimmer, lineClassName, className, ...props }, ref) {
+export const SkeletonText = /*#__PURE__*/ React.forwardRef(function SkeletonText({ lines = 3, lastLineWidth = "62%", shimmer, lineClassName, className, ...props }, ref) {
     return (_jsx("div", { ref: ref, "aria-hidden": true, "data-slot": "skeleton-text", className: cn("grid gap-2.5 text-sm", className), ...props, children: Array.from({ length: lines }, (_, i) => (_jsx(Skeleton, { shape: "text", shimmer: shimmer, className: lineClassName, style: i === lines - 1 && lines > 1 ? { width: lastLineWidth } : undefined }, i))) }));
 });
 const AVATAR = { xs: "size-5", sm: "size-6", md: "size-8", lg: "size-10", xl: "size-14" };
@@ -36,7 +36,7 @@ export function SkeletonAvatar({ size = "md", shape = "circle", className, ...pr
 }
 const COLUMN_WIDTHS = ["72%", "48%", "60%", "36%", "54%", "40%"];
 /** A table/list row placeholder; height follows `--row-h`, padding `--cell-px`. */
-export const SkeletonRow = React.forwardRef(function SkeletonRow({ columns = 4, avatar, shimmer, className, ...props }, ref) {
+export const SkeletonRow = /*#__PURE__*/ React.forwardRef(function SkeletonRow({ columns = 4, avatar, shimmer, className, ...props }, ref) {
     return (_jsx("div", { ref: ref, "aria-hidden": true, "data-slot": "skeleton-row", className: cn("grid h-(--row-h) items-center gap-4 border-b border-line px-(--cell-px) text-sm last:border-b-0", className), style: { gridTemplateColumns: `minmax(0,2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0,1fr))` }, ...props, children: Array.from({ length: columns }, (_, i) => i === 0 && avatar ? (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(SkeletonAvatar, { size: "md", shimmer: shimmer }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-1.5", children: [_jsx(Skeleton, { shape: "text", shimmer: shimmer, style: { width: "70%" } }), _jsx(Skeleton, { shape: "text", shimmer: shimmer, className: "h-[0.65em]", style: { width: "45%" } })] })] }, i)) : (_jsx(Skeleton, { shape: "text", shimmer: shimmer, style: { width: COLUMN_WIDTHS[i % COLUMN_WIDTHS.length] } }, i))) }));
 });
 const skeletonLabels = { loading: "Loading…" };
@@ -48,6 +48,6 @@ const skeletonLabels = { loading: "Loading…" };
  * <SkeletonGroup loading={isLoading}>{isLoading ? <SkeletonText /> : <Article />}</SkeletonGroup>
  * ```
  */
-export const SkeletonGroup = React.forwardRef(function SkeletonGroup({ label, loading = true, children, ...props }, ref) {
+export const SkeletonGroup = /*#__PURE__*/ React.forwardRef(function SkeletonGroup({ label, loading = true, children, ...props }, ref) {
     return (_jsxs("div", { ref: ref, "data-slot": "skeleton-group", "aria-busy": loading || undefined, ...props, children: [loading ? (_jsx("span", { role: "status", className: "sr-only", children: label ?? _jsx(LocalizedText, { namespace: "skeleton", id: "loading", defaults: skeletonLabels }) })) : null, children] }));
 });

package/dist/components/sla-timer.js

@@ -40,7 +40,7 @@ export function slaState({ due, start, completedAt, pausedAt, now, warnAt = 0.25
     const threshold = warnMinutes != null ? warnMinutes * 60_000 : startMs != null ? (dueMs - startMs) * warnAt : 30 * 60_000;
     return { state: remaining <= threshold ? "at-risk" : "on-track", remaining, used };
 }
-const slaTimerVariants = cva("inline-flex items-center gap-1.5 whitespace-nowrap font-medium tabular", {
+const slaTimerVariants = /*#__PURE__*/ cva("inline-flex items-center gap-1.5 whitespace-nowrap font-medium tabular", {
     variants: {
         variant: {
             /** Tinted pill — list rows, inbox items. */
@@ -117,7 +117,7 @@ function useNow(fixed, remaining, live) {
  * <SlaTimer variant="bar" label="Resolution" start={t.createdAt} due={t.resolveDue} completedAt={t.solvedAt} />
  * ```
  */
-export const SlaTimer = React.forwardRef(function SlaTimer({ due, start, completedAt, pausedAt, now: fixedNow, warnAt, warnMinutes, variant = "badge", label, seconds = true, hideIcon, labels, className, ...props }, ref) {
+export const SlaTimer = /*#__PURE__*/ React.forwardRef(function SlaTimer({ due, start, completedAt, pausedAt, now: fixedNow, warnAt, warnMinutes, variant = "badge", label, seconds = true, hideIcon, labels, className, ...props }, ref) {
     const t = useLabels("slaTimer", slaTimerLabels, labels);
     const f = useFormat();
     const frozen = completedAt != null || pausedAt != null;

package/dist/components/slider.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Slider as SliderPrimitive } from "radix-ui";
+import * as SliderPrimitive from "radix-ui/slider";
 declare const sliderLabels: {
     min: string;
     max: string;