@vamos-ui/react 0.3.0 → 0.4.1

package/dist/components/breadcrumb.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { DropdownMenu, Slot } from "radix-ui";
+import * as DropdownMenu from "radix-ui/dropdown-menu";
+import * as Slot from "radix-ui/slot";
 import { ChevronRight, ChevronsUpDown, MoreHorizontal } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
@@ -15,7 +16,7 @@ const breadcrumbLabels = {
     showHidden: "Show hidden pages",
     siblings: "Pages next to {label}",
 };
-const SizeContext = React.createContext("md");
+const SizeContext = /*#__PURE__*/ React.createContext("md");
 /**
  * Shows where a page sits in a hierarchy and offers a way up (WAI-ARIA Breadcrumb: `nav` + `ol`,
  * `aria-current="page"` on the last item). Links go through the app's router `Link`.
@@ -26,7 +27,7 @@ const SizeContext = React.createContext("md");
  *
  * Compound: `<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href/></BreadcrumbItem><BreadcrumbSeparator/>…<BreadcrumbPage/></BreadcrumbList></Breadcrumb>`.
  */
-export const Breadcrumb = React.forwardRef(function Breadcrumb({ items, maxItems, separator, size = "md", jsonLd, baseUrl, labels, className, children, ...props }, ref) {
+export const Breadcrumb = /*#__PURE__*/ React.forwardRef(function Breadcrumb({ items, maxItems, separator, size = "md", jsonLd, baseUrl, labels, className, children, ...props }, ref) {
     const t = useLabels("breadcrumb", breadcrumbLabels, labels);
     return (_jsx(SizeContext.Provider, { value: size, children: _jsxs("nav", { ref: ref, "aria-label": t("label"), "data-slot": "breadcrumb", className: cn("min-w-0", className), ...props, children: [items ? _jsx(BreadcrumbTrail, { items: items, maxItems: maxItems, separator: separator, labels: labels }) : children, items && jsonLd ? _jsx(BreadcrumbJsonLd, { items: items, baseUrl: baseUrl }) : null] }) }));
 });
@@ -47,29 +48,29 @@ function BreadcrumbTrail({ items, maxItems, separator, labels }) {
             return (_jsxs(React.Fragment, { children: [sep, _jsxs(BreadcrumbItem, { children: [last || !item.href ? (_jsx(BreadcrumbPage, { icon: item.icon, "aria-current": last ? "page" : undefined, children: item.label })) : (_jsx(BreadcrumbLink, { href: item.href, icon: item.icon, children: item.label })), item.menu?.length ? _jsx(BreadcrumbSiblings, { label: item.label, items: item.menu, labels: labels }) : null] })] }, index));
         }) }));
 }
-const listVariants = cva("flex min-w-0 flex-wrap items-center text-fg-muted", {
+const listVariants = /*#__PURE__*/ cva("flex min-w-0 flex-wrap items-center text-fg-muted", {
     variants: { size: { sm: "gap-1 text-[13px] [&_svg]:size-3.5", md: "gap-1.5 text-sm [&_svg]:size-4" } },
     defaultVariants: { size: "md" },
 });
 /** The ordered list of crumbs. */
-export const BreadcrumbList = React.forwardRef(function BreadcrumbList({ className, ...props }, ref) {
+export const BreadcrumbList = /*#__PURE__*/ React.forwardRef(function BreadcrumbList({ className, ...props }, ref) {
     const size = React.useContext(SizeContext);
     return _jsx("ol", { ref: ref, "data-slot": "breadcrumb-list", className: cn(listVariants({ size }), className), ...props });
 });
 /** One crumb (`li`). */
-export const BreadcrumbItem = React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
+export const BreadcrumbItem = /*#__PURE__*/ React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
     return _jsx("li", { ref: ref, "data-slot": "breadcrumb-item", className: cn("inline-flex min-w-0 items-center gap-0.5", className), ...props });
 });
 const crumbClass = "inline-flex min-w-0 max-w-[16rem] items-center gap-1.5 rounded-ui-sm [&_svg]:shrink-0";
 /** A crumb that links up the hierarchy. Uses the app's router `Link` (external URLs open in a new tab). */
-export const BreadcrumbLink = React.forwardRef(function BreadcrumbLink({ href, icon, asChild, className, children, title, ...props }, ref) {
+export const BreadcrumbLink = /*#__PURE__*/ React.forwardRef(function BreadcrumbLink({ href, icon, asChild, className, children, title, ...props }, ref) {
     const classes = cn(crumbClass, "transition-colors hover:text-fg focus-ring", className);
     if (asChild)
         return _jsx(Slot.Root, { ref: ref, "data-slot": "breadcrumb-link", className: classes, ...props, children: children });
     return (_jsxs(SmartLink, { ref: ref, href: href ?? "#", "data-slot": "breadcrumb-link", className: classes, title: title ?? (typeof children === "string" ? children : undefined), ...props, children: [icon ? _jsx("span", { "aria-hidden": true, className: "inline-flex", children: icon }) : null, _jsx("span", { className: "truncate", children: children })] }));
 });
 /** The current page: plain text, `aria-current="page"` (override for a non-link middle crumb). */
-export const BreadcrumbPage = React.forwardRef(function BreadcrumbPage({ icon, className, children, title, ...props }, ref) {
+export const BreadcrumbPage = /*#__PURE__*/ React.forwardRef(function BreadcrumbPage({ icon, className, children, title, ...props }, ref) {
     const current = !("aria-current" in props) || props["aria-current"] !== undefined;
     return (_jsxs("span", { ref: ref, "data-slot": "breadcrumb-page", "aria-current": "page", title: title ?? (typeof children === "string" ? children : undefined), className: cn(crumbClass, current ? "font-medium text-fg" : "text-fg-muted", className), ...props, children: [icon ? _jsx("span", { "aria-hidden": true, className: "inline-flex", children: icon }) : null, _jsx("span", { className: "truncate", children: children })] }));
 });
@@ -84,7 +85,7 @@ function CrumbMenu({ trigger, items }) {
 }
 const iconTrigger = "inline-flex size-6 items-center justify-center rounded-ui-sm text-fg-subtle transition-colors hover:bg-hover hover:text-fg focus-ring data-[state=open]:bg-hover data-[state=open]:text-fg";
 /** "…" for collapsed crumbs; opens a menu with the hidden pages. */
-export const BreadcrumbEllipsis = React.forwardRef(function BreadcrumbEllipsis({ items, labels, className, ...props }, ref) {
+export const BreadcrumbEllipsis = /*#__PURE__*/ React.forwardRef(function BreadcrumbEllipsis({ items, labels, className, ...props }, ref) {
     const t = useLabels("breadcrumb", breadcrumbLabels, labels);
     if (!items?.length) {
         return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", className: "inline-flex size-6 items-center justify-center text-fg-subtle", children: [_jsx(MoreHorizontal, { "aria-hidden": true }), _jsx("span", { className: "sr-only", children: t("showHidden") })] }));

package/dist/components/button-group.js

@@ -7,7 +7,7 @@ import { Button, IconButton } from "./button.js";
  * Merged-edge styling for any row of controls. Corner rounding is done with logical
  * properties (`rounded-s` / `rounded-e`), so the group is RTL-safe.
  */
-export const buttonGroupVariants = cva("relative isolate inline-flex w-fit max-w-full", {
+export const buttonGroupVariants = /*#__PURE__*/ cva("relative isolate inline-flex w-fit max-w-full", {
     variants: {
         orientation: {
             horizontal: "flex-row items-stretch",
@@ -48,7 +48,7 @@ export const buttonGroupVariants = cva("relative isolate inline-flex w-fit max-w
  * For a selected state (view switch, text alignment) use `ToggleGroup`; for a form value use
  * `RadioGroup variant="segmented"`.
  */
-export const ButtonGroup = React.forwardRef(function ButtonGroup({ attached = true, orientation = "horizontal", variant, size, className, children, ...props }, ref) {
+export const ButtonGroup = /*#__PURE__*/ React.forwardRef(function ButtonGroup({ attached = true, orientation = "horizontal", variant, size, className, children, ...props }, ref) {
     const content = variant || size
         ? React.Children.map(children, (child) => {
             if (!React.isValidElement(child))
@@ -68,10 +68,10 @@ export const ButtonGroup = React.forwardRef(function ButtonGroup({ attached = tr
  * Hairline between two attached buttons that share a fill (a primary split button), where
  * the merged border would otherwise disappear.
  */
-export const ButtonGroupSeparator = React.forwardRef(function ButtonGroupSeparator({ orientation = "vertical", className, ...props }, ref) {
+export const ButtonGroupSeparator = /*#__PURE__*/ React.forwardRef(function ButtonGroupSeparator({ orientation = "vertical", className, ...props }, ref) {
     return (_jsx("div", { ref: ref, "aria-hidden": true, "data-slot": "button-group-separator", className: cn("relative z-20 shrink-0 self-stretch bg-(--group-sep,var(--field-border))", orientation === "vertical" ? "w-px" : "h-px", className), ...props }));
 });
 /** A static segment inside a group: "21–40 of 340", a unit, a prefix. */
-export const ButtonGroupText = React.forwardRef(function ButtonGroupText({ size = "md", className, ...props }, ref) {
+export const ButtonGroupText = /*#__PURE__*/ React.forwardRef(function ButtonGroupText({ size = "md", className, ...props }, ref) {
     return (_jsx("span", { ref: ref, "data-slot": "button-group-text", className: cn("inline-flex shrink-0 items-center whitespace-nowrap border border-field-border bg-surface-2 font-medium tabular text-fg-muted [&_svg]:size-4", size === "xs" ? "h-7 rounded-ui-sm px-2.5 text-xs" : size === "sm" ? "h-8 rounded-ui-sm px-3 text-[13px]" : size === "lg" ? "h-12 rounded-ui px-5 text-[15px]" : "h-(--control-h) rounded-ui px-3.5 text-sm", className), ...props }));
 });

package/dist/components/button.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { Spinner } from "./spinner.js";
 import { IconButtonTooltip } from "./tooltip.js";
-export const buttonVariants = cva([
+export const buttonVariants = /*#__PURE__*/ cva([
     "relative inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap font-medium",
     "transition-[background-color,border-color,box-shadow,color,filter,opacity] duration-150 focus-ring",
     "disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45",
@@ -56,7 +56,7 @@ const spinnerSize = (size) => (size === "xs" || size === "sm" || size === "icon-
  * Defaults to `type="button"` (no accidental form submits). With `asChild` + `disabled`/`loading`
  * the element gets `aria-disabled`, leaves the tab order and ignores clicks.
  */
-export const Button = React.forwardRef(function Button({ className, variant, size, block, pill, asChild, loading, loadingText, loadingMode = "inline", disabled, children, type, onClick, ...props }, ref) {
+export const Button = /*#__PURE__*/ React.forwardRef(function Button({ className, variant, size, block, pill, asChild, loading, loadingText, loadingMode = "inline", disabled, children, type, onClick, ...props }, ref) {
     const classes = cn(buttonVariants({ variant, size, block, pill }), className);
     const state = {
         "data-slot": "button",
@@ -99,7 +99,7 @@ const iconSize = { xs: "icon-xs", sm: "icon-sm", md: "icon", lg: "icon-lg" };
  * <IconButton label="Edit" shortcut="mod+e"><Pencil /></IconButton>
  * ```
  */
-export const IconButton = React.forwardRef(function IconButton({ label, size = "md", variant = "ghost", title, loading, tooltip = true, tooltipSide, shortcut, children, ...props }, ref) {
+export const IconButton = /*#__PURE__*/ React.forwardRef(function IconButton({ label, size = "md", variant = "ghost", title, loading, tooltip = true, tooltipSide, shortcut, children, ...props }, ref) {
     if (tooltip === false) {
         return (_jsx(Button, { ref: ref, "aria-label": label, title: title ?? label, variant: variant, size: iconSize[size], loading: loading, loadingMode: "replace", ...props, children: children }));
     }

package/dist/components/calendar.js

@@ -73,7 +73,7 @@ export function useCalendarWeek(locale) {
         weekend: info.weekend,
     }), [info]);
 }
-const GridContext = React.createContext({ size: "md" });
+const GridContext = /*#__PURE__*/ React.createContext({ size: "md" });
 // Modifiers surfaced as data attributes on the day cell (in addition to rdp's own).
 const DATA_MODIFIERS = {
     range_start: "data-range-start",
@@ -116,7 +116,7 @@ function GridChevron({ orientation = "left", className }) {
     const Icon = orientation === "right" ? ChevronRight : orientation === "down" ? ChevronDown : orientation === "up" ? ChevronUp : ChevronLeft;
     return _jsx(Icon, { "aria-hidden": true, className: cn("size-4", (orientation === "left" || orientation === "right") && "rtl:-scale-x-100", className) });
 }
-const MonthDateContext = React.createContext(null);
+const MonthDateContext = /*#__PURE__*/ React.createContext(null);
 function GridMonthCaption({ calendarMonth, displayIndex: _i, ...props }) {
     return (_jsx(MonthDateContext.Provider, { value: calendarMonth.date, children: _jsx("div", { ...props }) }));
 }
@@ -262,7 +262,7 @@ function initialSelectionMonth(props) {
  * <Calendar months={12} size="sm" markers={density} />
  * ```
  */
-export const Calendar = React.forwardRef(function Calendar(props, ref) {
+export const Calendar = /*#__PURE__*/ React.forwardRef(function Calendar(props, ref) {
     const { months = 1, month: monthProp, defaultMonth, onMonthChange, onVisibleRangeChange, min, max, disabledDays, required, showWeekNumbers, holidays: holidaysProp, holidayRegion, markers, renderDay, size: sizeProp, variant = "plain", header = true, headerAction, legend, loading, weekStartsOn, footer, gridProps, className, id, labels, } = props;
     const mode = props.mode ?? "single";
     const t = useLabels("calendar", calendarLabels, labels);
@@ -428,7 +428,7 @@ export const Calendar = React.forwardRef(function Calendar(props, ref) {
                 }, ...restGrid }), legendItems.length ? _jsx(CalendarLegend, { items: legendItems }) : null] }));
 });
 /** Key for the marks on a Calendar (dot tones, holidays, today). */
-export const CalendarLegend = React.forwardRef(function CalendarLegend({ items, className, labels: _labels, ...props }, ref) {
+export const CalendarLegend = /*#__PURE__*/ React.forwardRef(function CalendarLegend({ items, className, labels: _labels, ...props }, ref) {
     return (_jsx("ul", { ref: ref, "data-slot": "calendar-legend", className: cn("flex flex-wrap items-center gap-x-4 gap-y-1.5 text-xs text-fg-muted", className), ...props, children: items.map((item, i) => (_jsxs("li", { className: "inline-flex items-center gap-1.5", children: [item.kind === "holiday" ? (_jsx("span", { "aria-hidden": true, className: "ui-cal-legend-holiday" })) : item.kind === "today" ? (_jsx("span", { "aria-hidden": true, className: "h-0.5 w-3 rounded-full bg-accent-ink" })) : (_jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full", style: { background: toneVar[item.tone ?? "accent"] } })), item.label] }, i))) }));
 });
 /**
@@ -439,7 +439,7 @@ export const CalendarLegend = React.forwardRef(function CalendarLegend({ items,
  * <CalendarSlots day={day} slots={slots} value={time} onValueChange={setTime} />
  * ```
  */
-export const CalendarSlots = React.forwardRef(function CalendarSlots({ slots, value: valueProp, defaultValue, onValueChange, day, loading, error, onRetry, hourCycle, columns = 3, labels, className, ...props }, ref) {
+export const CalendarSlots = /*#__PURE__*/ React.forwardRef(function CalendarSlots({ slots, value: valueProp, defaultValue, onValueChange, day, loading, error, onRetry, hourCycle, columns = 3, labels, className, ...props }, ref) {
     const t = useLabels("calendar", calendarLabels, labels);
     const { locale, format } = useLocale();
     const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? null, onChange: onValueChange, name: "CalendarSlots" });

package/dist/components/card.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 { SkeletonText } from "./skeleton.js";
-export const cardVariants = cva("relative block [--card-p:var(--gap)]", {
+export const cardVariants = /*#__PURE__*/ cva("relative block [--card-p:var(--gap)]", {
     variants: {
         variant: {
             /** The main surface: glass or solid from tokens. */
@@ -40,12 +40,12 @@ export const cardVariants = cva("relative block [--card-p:var(--gap)]", {
  * </Card>
  * ```
  */
-export const Card = React.forwardRef(function Card({ className, variant, padding, interactive, asChild, as = "div", loading, selected, ...props }, ref) {
+export const Card = /*#__PURE__*/ React.forwardRef(function Card({ className, variant, padding, interactive, asChild, as = "div", loading, selected, ...props }, ref) {
     const Comp = (asChild ? Slot.Root : as);
     return (_jsx(Comp, { ref: ref, "data-slot": "card", "data-variant": variant ?? "surface", "data-selected": selected ? "" : undefined, "aria-busy": loading || undefined, className: cn(cardVariants({ variant, padding, interactive }), selected && "border-accent-ink! ring-1 ring-accent-ink", className), ...props }));
 });
 /** Prop-based header (title, description, action). For custom layouts compose CardTitle / CardDescription / CardAction. */
-export const CardHeader = React.forwardRef(function CardHeader({ eyebrow, title, description, action, titleAs = "h3", titleId, divider, className, children, ...props }, ref) {
+export const CardHeader = /*#__PURE__*/ React.forwardRef(function CardHeader({ eyebrow, title, description, action, titleAs = "h3", titleId, divider, className, children, ...props }, ref) {
     return (_jsxs("div", { ref: ref, "data-slot": "card-header", className: cn("flex items-start justify-between gap-4 px-(--card-p,1.25rem) pt-[calc(var(--card-p,1.25rem)*0.8)] pb-[calc(var(--card-p,1.25rem)*0.6)]", divider && "border-b border-line pb-[calc(var(--card-p,1.25rem)*0.8)]", className), ...props, children: [_jsxs("div", { className: "min-w-0", children: [eyebrow ? _jsx(CardEyebrow, { children: eyebrow }) : null, title ? (_jsx(CardTitle, { as: titleAs, id: titleId, children: title })) : null, description ? _jsx(CardDescription, { children: description }) : null, children] }), action ? _jsx(CardAction, { children: action }) : null] }));
 });
 /** Small mono line above a title. */
@@ -53,7 +53,7 @@ export function CardEyebrow({ className, ...props }) {
     return _jsx("p", { "data-slot": "card-eyebrow", className: cn("mb-1 font-mono text-[11px] tracking-[0.06em] text-fg-subtle", className), ...props });
 }
 /** Card title. Default `<h3>`. */
-export const CardTitle = React.forwardRef(function CardTitle({ as: Tag = "h3", className, ...props }, ref) {
+export const CardTitle = /*#__PURE__*/ React.forwardRef(function CardTitle({ as: Tag = "h3", className, ...props }, ref) {
     return _jsx(Tag, { ref: ref, "data-slot": "card-title", className: cn("text-[15px] font-semibold tracking-[-0.01em] text-balance text-fg", className), ...props });
 });
 /** Secondary line under the title. */
@@ -64,13 +64,13 @@ export function CardDescription({ className, ...props }) {
 export function CardAction({ className, ...props }) {
     return _jsx("div", { "data-slot": "card-action", className: cn("flex shrink-0 items-center gap-1.5", className), ...props });
 }
-export const CardBody = React.forwardRef(function CardBody({ className, loading, loadingLines = 3, children, ...props }, ref) {
+export const CardBody = /*#__PURE__*/ React.forwardRef(function CardBody({ className, loading, loadingLines = 3, children, ...props }, ref) {
     return (_jsx("div", { ref: ref, "data-slot": "card-body", className: cn("px-(--card-p,1.25rem) pb-(--card-p,1.25rem)", className), ...props, children: loading ? _jsx(SkeletonText, { lines: loadingLines }) : children }));
 });
-export const CardFooter = React.forwardRef(function CardFooter({ className, ...props }, ref) {
+export const CardFooter = /*#__PURE__*/ React.forwardRef(function CardFooter({ className, ...props }, ref) {
     return (_jsx("div", { ref: ref, "data-slot": "card-footer", className: cn("flex items-center gap-2 border-t border-line px-(--card-p,1.25rem) py-[calc(var(--card-p,1.25rem)*0.6)]", className), ...props }));
 });
 /** A secondary tile inside a card (`surface-2`, never blurs). */
-export const Inset = React.forwardRef(function Inset({ className, ...props }, ref) {
+export const Inset = /*#__PURE__*/ React.forwardRef(function Inset({ className, ...props }, ref) {
     return _jsx("div", { ref: ref, "data-slot": "inset", className: cn("surface-2 rounded-ui", className), ...props });
 });

package/dist/components/carousel.d.ts

@@ -19,6 +19,7 @@ declare const carouselLabels: {
     thumbs: string;
     empty: string;
     loading: string;
+    marqueePause: string;
 };
 export type CarouselLabels = typeof carouselLabels;
 export type CarouselPreset = "default" | "gallery" | "hero" | "strip";
@@ -161,10 +162,18 @@ export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Fade the edges. Default `true`. */
     fade?: boolean;
     gap?: "sm" | "md" | "lg";
+    /**
+     * A small pause control (a native checkbox, works without JavaScript). Moving content that runs
+     * longer than five seconds needs one (WCAG 2.2.2). Default `true`.
+     */
+    controls?: boolean;
+    /** Accessible name of the pause control. Default "Pause scrolling" (dictionary `carousel.marqueePause`). */
+    pauseLabel?: string;
 }
 /**
- * Endless logo band in pure CSS: no JS, renders with SSR. The items are listed once for assistive
- * tech; a duplicate track (aria-hidden) closes the loop. Reduced motion: static, scrollable row.
+ * Endless logo band in pure CSS: renders with SSR. The items are listed once for assistive tech;
+ * a duplicate track (`aria-hidden` + `inert`, so its links never take focus) closes the loop.
+ * Pauses on hover/focus and with its pause control. Reduced motion: static, scrollable row.
  */
-export declare function Marquee({ label, duration, reverse, pauseOnHover, fade, gap, className, style, children, ...props }: MarqueeProps): React.JSX.Element;
+export declare function Marquee({ label, duration, reverse, pauseOnHover, fade, gap, controls, pauseLabel, className, style, children, ...props }: MarqueeProps): React.JSX.Element;
 export {};

package/dist/components/carousel.js

@@ -27,8 +27,9 @@ const carouselLabels = {
     thumbs: "Slide thumbnails",
     empty: "Nothing to show yet",
     loading: "Loading slides",
+    marqueePause: "Pause scrolling",
 };
-const CarouselContext = React.createContext(null);
+const CarouselContext = /*#__PURE__*/ React.createContext(null);
 function useCarouselContext(part) {
     const ctx = React.useContext(CarouselContext);
     if (!ctx)
@@ -62,7 +63,7 @@ export function useCarousel() {
 /* ------------------------------------------------------------------ */
 /* Root                                                                 */
 /* ------------------------------------------------------------------ */
-export const carouselVariants = cva("vui-carousel relative min-w-0", {
+export const carouselVariants = /*#__PURE__*/ cva("vui-carousel relative min-w-0", {
     variants: {
         preset: {
             default: "",
@@ -101,7 +102,7 @@ const GAP = {
  * </Carousel>
  * ```
  */
-export const Carousel = React.forwardRef(function Carousel({ label, preset = "default", orientation = "horizontal", slidesPerView, gap = "md", loop = false, align = "start", transition = "slide", autoplay = false, controls: controlsProp, index: indexProp, defaultIndex = 0, onIndexChange, loading = false, options, plugins: extraPlugins, setApi, labels, className, style, onKeyDown, children, ...props }, ref) {
+export const Carousel = /*#__PURE__*/ React.forwardRef(function Carousel({ label, preset = "default", orientation = "horizontal", slidesPerView, gap = "md", loop = false, align = "start", transition = "slide", autoplay = false, controls: controlsProp, index: indexProp, defaultIndex = 0, onIndexChange, loading = false, options, plugins: extraPlugins, setApi, labels, className, style, onKeyDown, children, ...props }, ref) {
     const t = useLabels("carousel", carouselLabels, labels);
     const { dir, locale } = useLocale();
     const reduced = useReducedMotion();
@@ -257,12 +258,12 @@ export const Carousel = React.forwardRef(function Carousel({ label, preset = "de
 /* ------------------------------------------------------------------ */
 /* Viewport + slides                                                    */
 /* ------------------------------------------------------------------ */
-const SlideIndexContext = React.createContext({ index: -1, total: 0 });
+const SlideIndexContext = /*#__PURE__*/ React.createContext({ index: -1, total: 0 });
 /**
  * The clipping viewport and the slide track. Children are `CarouselSlide`s. Renders the arrows
  * (and the pause button with autoplay) on the stage, so they line up with the slides.
  */
-export const CarouselViewport = React.forwardRef(function CarouselViewport({ arrows = true, playPause = true, empty, containerClassName, className, children, ...props }, ref) {
+export const CarouselViewport = /*#__PURE__*/ React.forwardRef(function CarouselViewport({ arrows = true, playPause = true, empty, containerClassName, className, children, ...props }, ref) {
     const c = useCarouselContext("CarouselViewport");
     const slides = React.Children.toArray(children).filter(React.isValidElement);
     const n = slides.length;
@@ -276,7 +277,7 @@ export const CarouselViewport = React.forwardRef(function CarouselViewport({ arr
     return (_jsxs("div", { "data-slot": "carousel-stage", className: "vui-carousel-stage relative", children: [c.autoplay && playPause ? _jsx(CarouselPlayPause, { className: "vui-carousel-playpause absolute end-3 top-3 z-20" }) : null, _jsx("div", { ref: ref, className: cn("vui-carousel-viewport overflow-hidden", className), "data-slot": "carousel-viewport", ...props, children: _jsx("div", { ref: c.viewportRef, className: "h-full", children: _jsx("div", { "data-slot": "carousel-container", "aria-live": c.playing ? "off" : "polite", "aria-busy": c.loading || undefined, className: cn("vui-carousel-container flex", vertical ? "h-full flex-col" : "touch-pan-y", containerClassName), children: c.loading && n === 0 ? (_jsx(CarouselSlide, { "aria-label": c.t("loading"), children: _jsx(Skeleton, { className: "ui-shimmer aspect-video w-full rounded-ui" }) })) : (slides.map((slide, i) => (_jsx(SlideIndexContext.Provider, { value: { index: i, total: n }, children: slide }, slide.key ?? i)))) }) }) }), showArrows ? (_jsxs(_Fragment, { children: [_jsx(CarouselPrev, { className: cn("vui-carousel-arrow absolute z-10", vertical ? "start-1/2 top-2 -translate-x-1/2 rtl:translate-x-1/2" : "start-3 top-1/2 -translate-y-1/2") }), _jsx(CarouselNext, { className: cn("vui-carousel-arrow absolute z-10", vertical ? "start-1/2 bottom-2 -translate-x-1/2 rtl:translate-x-1/2" : "end-3 top-1/2 -translate-y-1/2") })] })) : null] }));
 });
 /** One slide: `role="group"`, `aria-roledescription="slide"`, labelled "3 of 7"; `inert` while off-screen. */
-export const CarouselSlide = React.forwardRef(function CarouselSlide({ className, children, ...props }, ref) {
+export const CarouselSlide = /*#__PURE__*/ React.forwardRef(function CarouselSlide({ className, children, ...props }, ref) {
     const c = useCarouselContext("CarouselSlide");
     const { index: i, total } = React.useContext(SlideIndexContext);
     const hidden = c.inView !== null && i >= 0 && !c.inView.has(i);
@@ -303,14 +304,14 @@ export function CarouselNext(props) {
     return _jsx(ArrowButton, { direction: "next", ...props });
 }
 /** One button per slide; the current one is `aria-current` and painted with `--accent`. */
-export const CarouselDots = React.forwardRef(function CarouselDots({ className, ...props }, ref) {
+export const CarouselDots = /*#__PURE__*/ React.forwardRef(function CarouselDots({ className, ...props }, ref) {
     const c = useCarouselContext("CarouselDots");
     if (c.count <= 1)
         return null;
     return (_jsx("div", { ref: ref, role: "group", "aria-label": c.t("dots"), "data-slot": "carousel-dots", className: cn("vui-carousel-dots flex items-center justify-center gap-1", c.preset === "hero" ? "absolute inset-x-0 bottom-4 z-10" : "mt-4", className), ...props, children: Array.from({ length: c.count }, (_, i) => (_jsx("button", { type: "button", "aria-label": c.t("goTo", { index: c.nf.format(i + 1) }), "aria-current": i === c.index ? "true" : undefined, "data-slot": "carousel-dot", onClick: () => c.scrollTo(i), className: "vui-carousel-dot focus-ring group/dot relative flex h-6 min-w-6 items-center justify-center rounded-full", children: _jsx("span", { "aria-hidden": true, className: "block h-1.5 rounded-full" }) }, i))) }));
 });
 /** A row of thumbnail buttons under a gallery carousel; the selected one gets a `--ring` border. */
-export const CarouselThumbs = React.forwardRef(function CarouselThumbs({ items, aspect = 4 / 3, align = "start", className, ...props }, ref) {
+export const CarouselThumbs = /*#__PURE__*/ React.forwardRef(function CarouselThumbs({ items, aspect = 4 / 3, align = "start", className, ...props }, ref) {
     const c = useCarouselContext("CarouselThumbs");
     const listRef = React.useRef(null);
     React.useEffect(() => {
@@ -331,18 +332,20 @@ export function CarouselPlayPause({ className, size, ...props }) {
     return (_jsx(IconButton, { label: c.t(c.playing ? "pause" : "play"), tooltip: false, size: size ?? "sm", variant: "ghost", "data-slot": "carousel-playpause", "aria-pressed": undefined, onClick: c.playing ? c.pause : c.play, className: cn("surface-popover rounded-full! hover:bg-popover", className), ...props, children: c.playing ? _jsx(Pause, { "aria-hidden": true }) : _jsx(Play, { "aria-hidden": true }) }));
 }
 /** "3 / 7" in the locale's digits. */
-export const CarouselCounter = React.forwardRef(function CarouselCounter({ className, ...props }, ref) {
+export const CarouselCounter = /*#__PURE__*/ React.forwardRef(function CarouselCounter({ className, ...props }, ref) {
     const c = useCarouselContext("CarouselCounter");
     if (c.count === 0)
         return null;
     return (_jsxs("span", { ref: ref, "data-slot": "carousel-counter", className: cn("tabular text-[13px] text-fg-muted", className), ...props, children: [_jsx("span", { className: "sr-only", children: c.t("counter", { index: c.nf.format(c.index + 1), total: c.nf.format(c.count) }) }), _jsxs("span", { "aria-hidden": true, children: [_jsx("span", { className: "font-medium text-fg", children: c.nf.format(c.index + 1) }), _jsx("span", { className: "mx-1 text-fg-subtle", children: "/" }), c.nf.format(c.count)] })] }));
 });
 /**
- * Endless logo band in pure CSS: no JS, renders with SSR. The items are listed once for assistive
- * tech; a duplicate track (aria-hidden) closes the loop. Reduced motion: static, scrollable row.
+ * Endless logo band in pure CSS: renders with SSR. The items are listed once for assistive tech;
+ * a duplicate track (`aria-hidden` + `inert`, so its links never take focus) closes the loop.
+ * Pauses on hover/focus and with its pause control. Reduced motion: static, scrollable row.
  */
-export function Marquee({ label, duration = 40, reverse, pauseOnHover = true, fade = true, gap = "lg", className, style, children, ...props }) {
+export function Marquee({ label, duration = 40, reverse, pauseOnHover = true, fade = true, gap = "lg", controls = true, pauseLabel, className, style, children, ...props }) {
+    const t = useLabels("carousel", carouselLabels, pauseLabel ? { marqueePause: pauseLabel } : undefined);
     const items = React.Children.toArray(children);
-    const track = (hidden) => (_jsx("ul", { "aria-hidden": hidden || undefined, "aria-label": hidden ? undefined : label, className: "vui-marquee-track flex shrink-0 items-center", children: items.map((child, i) => (_jsx("li", { className: "flex shrink-0 items-center", children: child }, i))) }));
-    return (_jsxs("div", { "data-slot": "marquee", "data-reverse": reverse ? "" : undefined, "data-pause-on-hover": pauseOnHover ? "" : undefined, "data-fade": fade ? "" : undefined, className: cn("vui-marquee flex overflow-hidden", className), style: { "--marquee-duration": `${duration}s`, "--marquee-gap": GAP[gap], ...style }, ...props, children: [track(false), track(true)] }));
+    const track = (hidden) => (_jsx("ul", { "aria-hidden": hidden || undefined, inert: hidden || undefined, "aria-label": hidden ? undefined : label, className: "vui-marquee-track flex shrink-0 items-center", children: items.map((child, i) => (_jsx("li", { className: "flex shrink-0 items-center", children: child }, i))) }));
+    return (_jsxs("div", { "data-slot": "marquee", "data-reverse": reverse ? "" : undefined, "data-pause-on-hover": pauseOnHover ? "" : undefined, "data-fade": fade ? "" : undefined, "data-controls": controls ? "" : undefined, className: cn("vui-marquee relative", className), style: { "--marquee-duration": `${duration}s`, "--marquee-gap": GAP[gap], ...style }, ...props, children: [_jsxs("div", { className: "vui-marquee-viewport flex overflow-hidden", children: [track(false), track(true)] }), controls ? (_jsxs("label", { className: "vui-marquee-toggle", children: [_jsx("input", { type: "checkbox", className: "vui-marquee-pause sr-only", "aria-label": t("marqueePause") }), _jsx(Pause, { "aria-hidden": true, className: "vui-marquee-icon-pause" }), _jsx(Play, { "aria-hidden": true, className: "vui-marquee-icon-play" })] })) : null] }));
 }

package/dist/components/checkbox.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import * as CheckboxPrimitive from "radix-ui/checkbox";
 export type CheckboxCheckedState = boolean | "indeterminate";
 export declare const checkboxVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;

package/dist/components/checkbox.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import * as CheckboxPrimitive from "radix-ui/checkbox";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
 import { mergeIds } from "../lib/compose-refs.js";
 import { FieldContextReset, useFieldContext, useFieldControl } from "../lib/field-context.js";
 import { useControllableState } from "../lib/use-controllable-state.js";
-export const checkboxVariants = cva([
+export const checkboxVariants = /*#__PURE__*/ cva([
     "peer relative inline-flex shrink-0 items-center justify-center border bg-field text-accent-fg outline-none",
     // 16–18px boxes need the stronger edge in every material, or they vanish on dark solid
     "border-field-border-hover",
@@ -29,7 +29,7 @@ export const checkboxVariants = cva([
     },
     defaultVariants: { size: "md" },
 });
-const CheckboxGroupContext = React.createContext(null);
+const CheckboxGroupContext = /*#__PURE__*/ React.createContext(null);
 function CheckIcon() {
     return (_jsx("svg", { viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, focusable: "false", children: _jsx("path", { className: "ui-check-path", d: "M3 7.4 5.8 10 11 4.2", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
@@ -46,7 +46,7 @@ function DashIcon() {
  * <Field label="I accept the terms" orientation="horizontal" error={err}><Checkbox name="terms" /></Field>
  * ```
  */
-export const Checkbox = React.forwardRef(function Checkbox(rawProps, ref) {
+export const Checkbox = /*#__PURE__*/ React.forwardRef(function Checkbox(rawProps, ref) {
     const group = React.useContext(CheckboxGroupContext);
     const { checked: checkedProp, defaultChecked, onCheckedChange, label, description, size = group?.size ?? "md", variant = group?.variant ?? "default", icon, invalid, readOnly: readOnlyProp, className, controlClassName, value, style, ...rest } = rawProps;
     const groupValue = value === undefined ? undefined : String(value);
@@ -103,7 +103,7 @@ export const Checkbox = React.forwardRef(function Checkbox(rawProps, ref) {
  * </Field>
  * ```
  */
-export const CheckboxGroup = React.forwardRef(function CheckboxGroup({ value, defaultValue, onValueChange, name, items, orientation = "vertical", variant = "default", size, disabled, readOnly, invalid, required, className, children, id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, ...props }, ref) {
+export const CheckboxGroup = /*#__PURE__*/ React.forwardRef(function CheckboxGroup({ value, defaultValue, onValueChange, name, items, orientation = "vertical", variant = "default", size, disabled, readOnly, invalid, required, className, children, id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, ...props }, ref) {
     const field = useFieldContext();
     const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? [], onChange: onValueChange, name: "CheckboxGroup" });
     const order = React.useRef([]);
@@ -133,6 +133,6 @@ export const CheckboxGroup = React.forwardRef(function CheckboxGroup({ value, de
                 : "grid gap-2.5", className), children: _jsx(FieldContextReset, { children: _jsxs(CheckboxGroupContext.Provider, { value: ctx, children: [items?.map((item) => (_jsx(CheckboxGroupItem, { value: item.value, label: item.label, description: item.description, icon: item.icon, disabled: item.disabled }, item.value))), children] }) }) }));
 });
 /** One option inside a `CheckboxGroup`. */
-export const CheckboxGroupItem = React.forwardRef(function CheckboxGroupItem(props, ref) {
+export const CheckboxGroupItem = /*#__PURE__*/ React.forwardRef(function CheckboxGroupItem(props, ref) {
     return _jsx(Checkbox, { ref: ref, ...props });
 });

package/dist/components/collapsible.d.ts

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

package/dist/components/collapsible.js

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

package/dist/components/color-picker.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { HexAlphaColorPicker, HexColorPicker } from "react-colorful";
-import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import * as RadioGroupPrimitive from "radix-ui/radio-group";
 import { Check, ChevronDown, Pipette } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { mergeIds } from "../lib/compose-refs.js";
@@ -72,7 +72,7 @@ function useSwatches(swatches, probe) {
  * A row of preset colours as a radio group (one tab stop, arrow keys move and select). For label
  * colours, calendar categories and campaign colours where a free picker is too much.
  */
-export const ColorSwatchPicker = React.forwardRef(function ColorSwatchPicker({ swatches: swatchesProp, value: valueProp, defaultValue, onValueChange, size = "md", name: nameProp, disabled, id, className, labels, ...aria }, ref) {
+export const ColorSwatchPicker = /*#__PURE__*/ React.forwardRef(function ColorSwatchPicker({ swatches: swatchesProp, value: valueProp, defaultValue, onValueChange, size = "md", name: nameProp, disabled, id, className, labels, ...aria }, ref) {
     const t = useLabels("colorPicker", colorLabels, labels);
     const field = useFieldContext();
     const probe = React.useRef(null);
@@ -204,7 +204,7 @@ export function ColorPickerPanel({ value, onValueChange, alpha = false, swatches
  * <ColorPicker alpha swatches="tokens" variant="inline" />
  * ```
  */
-export const ColorPicker = React.forwardRef(function ColorPicker(props, ref) {
+export const ColorPicker = /*#__PURE__*/ React.forwardRef(function ColorPicker(props, ref) {
     const { value: valueProp, defaultValue, onValueChange, alpha, swatches, eyeDropper, format: formatProp, defaultFormat, onFormatChange, showFormats, contrastAgainst, variant = "popover", name: nameProp, size = "md", invalid, open: openProp, defaultOpen, onOpenChange, className, labels, } = props;
     const t = useLabels("colorPicker", colorLabels, labels);
     const field = useFieldContext();

package/dist/components/combobox.js

@@ -291,4 +291,4 @@ function ComboboxInner(props, ref) {
  * <Combobox items={categories} onCreate={async (name) => api.createCategory(name)} />
  * ```
  */
-export const Combobox = React.forwardRef(ComboboxInner);
+export const Combobox = /*#__PURE__*/ React.forwardRef(ComboboxInner);