veryfront 0.1.1237 → 0.1.1239

package/esm/src/react/components/ui/alert-dialog.js

@@ -0,0 +1,181 @@
+/**
+ * AlertDialog - a confirmation modal. Semantically a {@link Dialog} with
+ * `role="alertdialog"`, a REQUIRED title + description, and explicit
+ * Action / Cancel buttons. Unlike `Dialog` it does NOT dismiss on outside-click
+ * or `Escape`: the user must choose an option.
+ *
+ * It reuses the Dialog primitive's open-state context (`dialog.Root` /
+ * `dialog.Trigger` / `dialog.useDialog` resolved from the active adapter) so
+ * trigger + open state behave identically, but renders its own alert-specific
+ * overlay + panel - the panel carries `role="alertdialog"` and its
+ * `aria-labelledby` / `aria-describedby` are wired to the Title / Description
+ * ids, and neither the overlay nor a key listener dismisses it.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+ *   AlertDialogDescription, AlertDialogFooter, AlertDialogTitle, AlertDialogTrigger,
+ * } from "veryfront/ui";
+ *
+ * <AlertDialog>
+ *   <AlertDialogTrigger>Delete account</AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogTitle>Delete account?</AlertDialogTitle>
+ *     <AlertDialogDescription>This permanently removes your account.</AlertDialogDescription>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *       <AlertDialogAction variant="destructive" onClick={remove}>Delete</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>;
+ * ```
+ *
+ * @module react/components/ui/alert-dialog
+ */
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cx as cn } from "./cva.js";
+import { Button } from "./button.js";
+import { useAdapter } from "./adapter/context.js";
+import { getModalTokenScope, useModalContentEffect } from "./modal-surface.js";
+import { composeRefs } from "./slot.js";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+const AlertDialogContext = React.createContext(null);
+const AlertDialogRootContext = React.createContext(null);
+function useAlertDialogRoot() {
+    const ctx = React.useContext(AlertDialogRootContext);
+    if (!ctx)
+        throw new Error("AlertDialog parts must be used within <AlertDialog>");
+    return ctx;
+}
+/** Read the Content-provided ids; throws when a labelled part is used outside `<AlertDialogContent>`. */
+function useAlertDialogIds() {
+    const ctx = React.useContext(AlertDialogContext);
+    if (!ctx)
+        throw new Error("AlertDialog parts must be used within <AlertDialogContent>");
+    return ctx;
+}
+/** AlertDialog root - owns open state (shares the Dialog adapter slot). */
+export function AlertDialog(props) {
+    const { dialog } = useAdapter();
+    const triggerRef = React.useRef(null);
+    const value = React.useMemo(() => ({ triggerRef }), []);
+    return (React.createElement(AlertDialogRootContext.Provider, { value: value },
+        React.createElement(dialog.Root, { ...props })));
+}
+/** Trigger - opens the alert dialog. `asChild` merges onto the child element. */
+export function AlertDialogTrigger({ ref, ...props }) {
+    const { dialog } = useAdapter();
+    const ctx = useAlertDialogRoot();
+    const setTrigger = React.useCallback((node) => {
+        ctx.triggerRef.current = node;
+        return () => {
+            if (ctx.triggerRef.current === node)
+                ctx.triggerRef.current = null;
+        };
+    }, [ctx.triggerRef]);
+    const composedRef = React.useMemo(() => composeRefs(setTrigger, ref), [ref, setTrigger]);
+    return React.createElement(dialog.Trigger, { ...props, ref: composedRef });
+}
+/**
+ * Alert surface - non-dismissing overlay + centered `role="alertdialog"` panel,
+ * rendered only while open. Generates the title / description ids, wires them to
+ * `aria-labelledby` / `aria-describedby`, traps focus, restores it on close,
+ * and portals outside clipping ancestors while retaining the token scope.
+ */
+export function AlertDialogContent({ className, children, id, ref, ...props }) {
+    const { dialog } = useAdapter();
+    const modal = dialog.useDialog();
+    const root = useAlertDialogRoot();
+    const defaultTitleId = React.useId();
+    const defaultDescriptionId = React.useId();
+    const [titleId, setTitleId] = React.useState(defaultTitleId);
+    const [descriptionId, setDescriptionId] = React.useState(defaultDescriptionId);
+    const panelRef = React.useRef(null);
+    const [portalReady, setPortalReady] = React.useState(false);
+    React.useEffect(() => setPortalReady(true), []);
+    const resolvedContentId = id ?? modal.defaultContentId;
+    useIsomorphicLayoutEffect(() => {
+        modal.setContentId(resolvedContentId);
+        return () => {
+            modal.setContentId((current) => current === resolvedContentId ? modal.defaultContentId : current);
+        };
+    }, [modal.defaultContentId, modal.setContentId, resolvedContentId]);
+    // Merge the internal panel ref (read by the focus effect) with any consumer
+    // ref via `composeRefs`, which tracks + runs ref cleanups for us.
+    const setNode = React.useMemo(() => composeRefs(panelRef, ref), [ref]);
+    useModalContentEffect(modal.open && portalReady, modal.setOpen, panelRef, root.triggerRef, false);
+    const ids = React.useMemo(() => ({
+        defaultTitleId,
+        defaultDescriptionId,
+        titleId,
+        descriptionId,
+        setTitleId,
+        setDescriptionId,
+    }), [
+        defaultTitleId,
+        defaultDescriptionId,
+        titleId,
+        descriptionId,
+    ]);
+    if (!modal.open || !portalReady)
+        return null;
+    const trigger = root.triggerRef.current;
+    const document = trigger?.ownerDocument ?? globalThis.document;
+    if (!document?.body)
+        return null;
+    const container = getModalTokenScope(document, trigger);
+    return createPortal(React.createElement(AlertDialogContext.Provider, { value: ids },
+        React.createElement("div", { className: "fixed inset-0 z-50", "data-state": "open" },
+            React.createElement("div", { className: "fixed inset-0 bg-[var(--overlay)]", "data-state": "open" }),
+            React.createElement("div", { ref: setNode, id: resolvedContentId, role: "alertdialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": descriptionId, "data-state": "open", tabIndex: -1, className: cn("fixed left-1/2 top-1/2 z-50 w-[calc(100%_-_3rem)] max-w-md -translate-x-1/2 -translate-y-1/2", "rounded-xl bg-[var(--dialog)] text-[var(--foreground)] shadow-lg outline-none", "flex flex-col gap-4 p-6", className), ...props }, children))), container);
+}
+/** Required accessible name - adopts the Content-generated `aria-labelledby` id. */
+export function AlertDialogTitle({ className, id, ref, ...props }) {
+    const ids = useAlertDialogIds();
+    const resolvedId = id ?? ids.defaultTitleId;
+    useIsomorphicLayoutEffect(() => {
+        ids.setTitleId(resolvedId);
+        return () => {
+            ids.setTitleId((current) => current === resolvedId ? ids.defaultTitleId : current);
+        };
+    }, [ids.defaultTitleId, ids.setTitleId, resolvedId]);
+    return (React.createElement("h2", { ref: ref, ...props, id: resolvedId, className: cn("text-lg font-semibold text-[var(--foreground)]", className) }));
+}
+/** Required supporting copy - adopts the Content-generated `aria-describedby` id. */
+export function AlertDialogDescription({ className, id, ref, ...props }) {
+    const ids = useAlertDialogIds();
+    const resolvedId = id ?? ids.defaultDescriptionId;
+    useIsomorphicLayoutEffect(() => {
+        ids.setDescriptionId(resolvedId);
+        return () => {
+            ids.setDescriptionId((current) => current === resolvedId ? ids.defaultDescriptionId : current);
+        };
+    }, [ids.defaultDescriptionId, ids.setDescriptionId, resolvedId]);
+    return (React.createElement("p", { ref: ref, ...props, id: resolvedId, className: cn("text-sm font-normal text-[var(--muted-foreground)]", className) }));
+}
+/** Right-aligned action row - Cancel first, then the Action. */
+export function AlertDialogFooter({ className, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, "data-slot": "footer", className: cn("mt-2 flex justify-end gap-3", className), ...props }));
+}
+/** Confirming action - runs `onClick`, then closes unless it calls `preventDefault()`. */
+export function AlertDialogAction({ variant = "primary", size = "default", type = "button", onClick, ...props }) {
+    const { dialog } = useAdapter();
+    const ctx = dialog.useDialog();
+    return (React.createElement(Button, { type: type, variant: variant, size: size, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                ctx.setOpen(false);
+        }, ...props }));
+}
+/** Dismissing action - runs `onClick`, then closes unless it calls `preventDefault()`. */
+export function AlertDialogCancel({ variant = "secondary", size = "default", type = "button", onClick, ...props }) {
+    const { dialog } = useAdapter();
+    const ctx = dialog.useDialog();
+    return (React.createElement(Button, { type: type, variant: variant, size: size, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                ctx.setOpen(false);
+        }, ...props }));
+}

package/esm/src/react/components/ui/aspect-ratio.d.ts

@@ -0,0 +1,18 @@
+/**
+ * AspectRatio - constrains its content to a fixed width/height ratio. Pure-visual
+ * CSS primitive (no engine needed): sets the `aspect-ratio` on a single node and
+ * lets the child fill it. Handy for media, embeds, and skeleton placeholders.
+ *
+ * @module react/components/ui/aspect-ratio
+ */
+import * as React from "react";
+/** Props accepted by `<AspectRatio>`. */
+export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Width ÷ height (e.g. `16 / 9`, `1`, `4 / 3`). @default 1 */
+    ratio?: number;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** Constrain content to a fixed aspect ratio. */
+export declare function AspectRatio({ className, ratio, style, ref, ...props }: AspectRatioProps): React.ReactElement;
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/esm/src/react/components/ui/aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/aspect-ratio.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,iDAAiD;AACjD,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAUvC"}

package/esm/src/react/components/ui/aspect-ratio.js

@@ -0,0 +1,13 @@
+/**
+ * AspectRatio - constrains its content to a fixed width/height ratio. Pure-visual
+ * CSS primitive (no engine needed): sets the `aspect-ratio` on a single node and
+ * lets the child fill it. Handy for media, embeds, and skeleton placeholders.
+ *
+ * @module react/components/ui/aspect-ratio
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+/** Constrain content to a fixed aspect ratio. */
+export function AspectRatio({ className, ratio = 1, style, ref, ...props }) {
+    return (React.createElement("div", { ref: ref, "data-orientation": ratio >= 1 ? "landscape" : "portrait", className: cn("relative w-full overflow-hidden", className), style: { aspectRatio: String(ratio), ...style }, ...props }));
+}

package/esm/src/react/components/ui/autocomplete.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Autocomplete - a free-text input with a suggestions dropdown. Unlike
+ * {@link Combobox} (where the value must be one of the listed options), the
+ * value here is *whatever the user types*; suggestions are optional completions
+ * that fill the input when chosen. It reuses the zero-dependency `combobox`
+ * adapter for its mechanics (filtering, `aria-activedescendant` keyboard nav,
+ * open/dismiss, token-scope portalling) - swap it via `UIAdapterProvider` like
+ * any other primitive.
+ *
+ * @example
+ * ```tsx
+ * import { Autocomplete, AutocompleteContent, AutocompleteInput, AutocompleteItem } from "veryfront/ui";
+ *
+ * <Autocomplete onValueChange={setQuery}>
+ *   <AutocompleteInput placeholder="Search cities…" />
+ *   <AutocompleteContent>
+ *     {suggestions.map((s) => <AutocompleteItem key={s} value={s} />)}
+ *   </AutocompleteContent>
+ * </Autocomplete>;
+ * ```
+ *
+ * @module react/components/ui/autocomplete
+ */
+import * as React from "react";
+/** Props accepted by `<Autocomplete>` (the root; owns the input text + open state). */
+export interface AutocompleteProps {
+    /** `AutocompleteInput` + `AutocompleteContent` parts to compose. */
+    children: React.ReactNode;
+    /** Initial input text when uncontrolled. */
+    defaultValue?: string;
+    /** Fires with the current text on every change - typing OR choosing a suggestion. */
+    onValueChange?: (value: string) => void;
+    /** Controlled open state of the suggestions list (pair with `onOpenChange`). */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Fires when the suggestions list opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/** Autocomplete root - renders no node of its own (state + context only). */
+export declare function Autocomplete({ children, defaultValue, onValueChange, open, defaultOpen, onOpenChange, }: AutocompleteProps): React.ReactElement;
+/** Props accepted by `<AutocompleteInput>`. */
+export interface AutocompleteInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** The free-text input that drives the suggestions. */
+export declare function AutocompleteInput({ className, ...props }: AutocompleteInputProps): React.ReactElement;
+/** Props accepted by `<AutocompleteContent>`. */
+export interface AutocompleteContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** The floating `role="listbox"` of suggestions, shown while typing. */
+export declare function AutocompleteContent({ className, children, ...props }: AutocompleteContentProps): React.ReactElement | null;
+/** Props accepted by `<AutocompleteItem>`. */
+export interface AutocompleteItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** The suggestion text - filled into the input when chosen, and used for filtering. */
+    value: string;
+    /** Disable this suggestion and dim it. */
+    disabled?: boolean;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** A single suggestion. Fills the input when chosen; hides when it doesn't match. */
+export declare function AutocompleteItem({ value, disabled, className, children, onClick, ref, ...props }: AutocompleteItemProps): React.ReactElement | null;
+//# sourceMappingURL=autocomplete.d.ts.map

package/esm/src/react/components/ui/autocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/autocomplete.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,uFAAuF;AACvF,MAAM,WAAW,iBAAiB;IAChC,oEAAoE;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gFAAgF;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,WAAW,EACX,YAAY,GACb,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAaxC;AAED,+CAA+C;AAC/C,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACzF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,uDAAuD;AACvD,wBAAgB,iBAAiB,CAC/B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,GAC9C,KAAK,CAAC,YAAY,CAcpB;AAED,iDAAiD;AACjD,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACpF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,wEAAwE;AACxE,wBAAgB,mBAAmB,CACjC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,GAC1D,KAAK,CAAC,YAAY,GAAG,IAAI,CAc3B;AAED,8CAA8C;AAC9C,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,uFAAuF;IACvF,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,qFAAqF;AACrF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAsCnD"}

package/esm/src/react/components/ui/autocomplete.js

@@ -0,0 +1,59 @@
+/**
+ * Autocomplete - a free-text input with a suggestions dropdown. Unlike
+ * {@link Combobox} (where the value must be one of the listed options), the
+ * value here is *whatever the user types*; suggestions are optional completions
+ * that fill the input when chosen. It reuses the zero-dependency `combobox`
+ * adapter for its mechanics (filtering, `aria-activedescendant` keyboard nav,
+ * open/dismiss, token-scope portalling) - swap it via `UIAdapterProvider` like
+ * any other primitive.
+ *
+ * @example
+ * ```tsx
+ * import { Autocomplete, AutocompleteContent, AutocompleteInput, AutocompleteItem } from "veryfront/ui";
+ *
+ * <Autocomplete onValueChange={setQuery}>
+ *   <AutocompleteInput placeholder="Search cities…" />
+ *   <AutocompleteContent>
+ *     {suggestions.map((s) => <AutocompleteItem key={s} value={s} />)}
+ *   </AutocompleteContent>
+ * </Autocomplete>;
+ * ```
+ *
+ * @module react/components/ui/autocomplete
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+import { useAdapter } from "./adapter/context.js";
+/** Autocomplete root - renders no node of its own (state + context only). */
+export function Autocomplete({ children, defaultValue, onValueChange, open, defaultOpen, onOpenChange, }) {
+    const { combobox } = useAdapter();
+    return (React.createElement(combobox.Root, { defaultInputValue: defaultValue, onInputValueChange: onValueChange, open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange }, children));
+}
+/** The free-text input that drives the suggestions. */
+export function AutocompleteInput({ className, ...props }) {
+    const { combobox } = useAdapter();
+    return (React.createElement(combobox.Input, { className: cn("h-[38px] w-full rounded-md px-3 text-base", "bg-[var(--input-bg)] text-[var(--foreground)] border border-[var(--outline-border)]", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--edge-medium)]", "disabled:cursor-not-allowed disabled:opacity-50", className), ...props }));
+}
+/** The floating `role="listbox"` of suggestions, shown while typing. */
+export function AutocompleteContent({ className, children, ...props }) {
+    const { combobox } = useAdapter();
+    return (React.createElement(combobox.Content, { className: cn("z-50 max-h-64 min-w-[220px] overflow-auto rounded-lg", "bg-[var(--popover)] text-[var(--foreground)] shadow-sm outline-none", className), ...props }, children));
+}
+/** A single suggestion. Fills the input when chosen; hides when it doesn't match. */
+export function AutocompleteItem({ value, disabled, className, children, onClick, ref, ...props }) {
+    const { combobox } = useAdapter();
+    const ctx = combobox.useCombobox();
+    const id = React.useId();
+    React.useEffect(() => {
+        ctx.registerOption(id, value, value, disabled);
+        return () => ctx.unregisterOption(id);
+    }, [ctx, disabled, id, value]);
+    if (!ctx.matches(value))
+        return null;
+    const active = ctx.activeId === id;
+    return (React.createElement("div", { ref: ref, id: id, role: "option", "aria-selected": false, "aria-disabled": disabled || undefined, "data-active": active ? "" : undefined, "data-disabled": disabled ? "" : undefined, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented && !disabled)
+                ctx.select(value, value);
+        }, className: cn("flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-base", "data-[active]:bg-[var(--accent)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props }, children ?? value));
+}

package/esm/src/react/components/ui/breadcrumb.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Breadcrumb: a non-interactive navigation trail showing the current page's
+ * location within a hierarchy. Pure-structure primitive (no engine needed): a
+ * labelled `<nav>` wrapping an ordered `<BreadcrumbList>` of `<BreadcrumbItem>`s,
+ * with `<BreadcrumbLink>`s for ancestors, a single `<BreadcrumbPage>` for the
+ * current page (`aria-current="page"`), decorative `<BreadcrumbSeparator>`s
+ * between them, and an optional `<BreadcrumbEllipsis>` to collapse a long trail.
+ * Skinned with the veryfront theme tokens.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Breadcrumb,
+ *   BreadcrumbList,
+ *   BreadcrumbItem,
+ *   BreadcrumbLink,
+ *   BreadcrumbSeparator,
+ *   BreadcrumbPage,
+ * } from "veryfront/ui";
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Settings</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>;
+ * ```
+ *
+ * @module react/components/ui/breadcrumb
+ */
+import * as React from "react";
+/** Props accepted by `<Breadcrumb>`. */
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLElement>;
+}
+/** The landmark `<nav aria-label="Breadcrumb">` wrapping the trail. */
+export declare function Breadcrumb({ className, children, ref, ...props }: BreadcrumbProps): React.ReactElement;
+/** Props accepted by `<BreadcrumbList>`. */
+export interface BreadcrumbListProps extends React.OlHTMLAttributes<HTMLOListElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLOListElement>;
+}
+/** The ordered list of trail items. */
+export declare function BreadcrumbList({ className, children, ref, ...props }: BreadcrumbListProps): React.ReactElement;
+/** Props accepted by `<BreadcrumbItem>`. */
+export interface BreadcrumbItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLLIElement>;
+}
+/** A single item in the trail: wraps a link, the current page, or an ellipsis. */
+export declare function BreadcrumbItem({ className, children, ref, ...props }: BreadcrumbItemProps): React.ReactElement;
+/** Props accepted by `<BreadcrumbLink>`. */
+export interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLAnchorElement>;
+}
+/** A navigable ancestor link in the trail. */
+export declare function BreadcrumbLink({ className, children, ref, ...props }: BreadcrumbLinkProps): React.ReactElement;
+/** Props accepted by `<BreadcrumbPage>`. */
+export interface BreadcrumbPageProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLSpanElement>;
+}
+/** The current page: a non-interactive `role="link"` marked `aria-current="page"`. */
+export declare function BreadcrumbPage({ className, children, ref, ...props }: BreadcrumbPageProps): React.ReactElement;
+/** Props accepted by `<BreadcrumbSeparator>`. */
+export interface BreadcrumbSeparatorProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLLIElement>;
+}
+/** A decorative divider between items; renders its children or a default `/`. */
+export declare function BreadcrumbSeparator({ className, children, ref, ...props }: BreadcrumbSeparatorProps): React.ReactElement;
+/** Props accepted by `<BreadcrumbEllipsis>`. */
+export interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLSpanElement>;
+}
+/** A collapsed-trail indicator: renders `…` with an sr-only "More" label. */
+export declare function BreadcrumbEllipsis({ className, ref, ...props }: BreadcrumbEllipsisProps): React.ReactElement;
+//# sourceMappingURL=breadcrumb.d.ts.map

package/esm/src/react/components/ui/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,wCAAwC;AACxC,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACxE,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,uEAAuE;AACvE,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAYtC;AAED,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;IACnF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,uCAAuC;AACvC,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAc1C;AAED,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAChF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAED,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAW1C;AAED,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACxF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,8CAA8C;AAC9C,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAW1C;AAED,4CAA4C;AAC5C,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAChF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;CAClC;AAED,sFAAsF;AACtF,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAc1C;AAED,iDAAiD;AACjD,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACrF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AAED,iFAAiF;AACjF,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,wBAAwB,GAAG,KAAK,CAAC,YAAY,CAa/C;AAED,gDAAgD;AAChD,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACpF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;CAClC;AAED,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAiB9C"}

package/esm/src/react/components/ui/breadcrumb.js

@@ -0,0 +1,67 @@
+/**
+ * Breadcrumb: a non-interactive navigation trail showing the current page's
+ * location within a hierarchy. Pure-structure primitive (no engine needed): a
+ * labelled `<nav>` wrapping an ordered `<BreadcrumbList>` of `<BreadcrumbItem>`s,
+ * with `<BreadcrumbLink>`s for ancestors, a single `<BreadcrumbPage>` for the
+ * current page (`aria-current="page"`), decorative `<BreadcrumbSeparator>`s
+ * between them, and an optional `<BreadcrumbEllipsis>` to collapse a long trail.
+ * Skinned with the veryfront theme tokens.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   Breadcrumb,
+ *   BreadcrumbList,
+ *   BreadcrumbItem,
+ *   BreadcrumbLink,
+ *   BreadcrumbSeparator,
+ *   BreadcrumbPage,
+ * } from "veryfront/ui";
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Settings</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>;
+ * ```
+ *
+ * @module react/components/ui/breadcrumb
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+/** The landmark `<nav aria-label="Breadcrumb">` wrapping the trail. */
+export function Breadcrumb({ className, children, ref, ...props }) {
+    return (React.createElement("nav", { ref: ref, "aria-label": "Breadcrumb", "data-slot": "breadcrumb", className: className, ...props }, children));
+}
+/** The ordered list of trail items. */
+export function BreadcrumbList({ className, children, ref, ...props }) {
+    return (React.createElement("ol", { ref: ref, "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-[var(--muted-foreground)] sm:gap-2.5", className), ...props }, children));
+}
+/** A single item in the trail: wraps a link, the current page, or an ellipsis. */
+export function BreadcrumbItem({ className, children, ref, ...props }) {
+    return (React.createElement("li", { ref: ref, "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props }, children));
+}
+/** A navigable ancestor link in the trail. */
+export function BreadcrumbLink({ className, children, ref, ...props }) {
+    return (React.createElement("a", { ref: ref, "data-slot": "breadcrumb-link", className: cn("transition-colors hover:text-[var(--foreground)]", className), ...props }, children));
+}
+/** The current page: a non-interactive `role="link"` marked `aria-current="page"`. */
+export function BreadcrumbPage({ className, children, ref, ...props }) {
+    return (React.createElement("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", "data-slot": "breadcrumb-page", className: cn("font-normal text-[var(--foreground)]", className), ...props }, children));
+}
+/** A decorative divider between items; renders its children or a default `/`. */
+export function BreadcrumbSeparator({ className, children, ref, ...props }) {
+    return (React.createElement("li", { ref: ref, role: "presentation", "aria-hidden": "true", "data-slot": "breadcrumb-separator", className: cn("[&>svg]:size-3.5", className), ...props }, children ?? "/"));
+}
+/** A collapsed-trail indicator: renders `…` with an sr-only "More" label. */
+export function BreadcrumbEllipsis({ className, ref, ...props }) {
+    return (React.createElement("span", { ref: ref, role: "presentation", "data-slot": "breadcrumb-ellipsis", className: cn("flex size-9 items-center justify-center", className), ...props },
+        React.createElement("span", { "aria-hidden": "true" }, "\u2026"),
+        React.createElement("span", { className: "sr-only" }, "More")));
+}

package/esm/src/react/components/ui/calendar.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Calendar: a dependency-free single-month date grid. Renders a header row
+ * (previous-month button, "Month YYYY" caption, and next-month button), a
+ * weekday header, and a `role="grid"` table of days. One day participates in
+ * the tab order. Arrow keys move by day or week, Home and End move to week
+ * boundaries, and Page Up and Page Down move by month. The selected day is
+ * controlled via `value`; selecting a day fires `onChange`. The displayed month
+ * is tracked internally (seeded from `defaultMonth ?? value ?? today`) and moved
+ * by the previous and next buttons. Self-contained: no `react-day-picker`, no
+ * floating engine; skinned with the veryfront theme tokens.
+ *
+ * @example
+ * ```tsx
+ * import { Calendar } from "veryfront/ui";
+ *
+ * function Example() {
+ *   const [day, setDay] = React.useState<Date>();
+ *   return <Calendar value={day} onChange={setDay} />;
+ * }
+ * ```
+ *
+ * @module react/components/ui/calendar
+ */
+import * as React from "react";
+/** Props accepted by `<Calendar>`. */
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** The selected day (controlled). @default undefined */
+    value?: Date;
+    /** Fires with the selected day. @default undefined */
+    onChange?: (date: Date) => void;
+    /** Month shown initially; the displayed month is tracked internally and moved by the prev/next buttons. @default value ?? today */
+    defaultMonth?: Date;
+    /** First day of the week: `0` = Sunday, `1` = Monday. @default 0 */
+    weekStartsOn?: 0 | 1;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** A dependency-free single-month date grid. */
+export declare function Calendar({ value, onChange, defaultMonth, weekStartsOn, className, ref, ...props }: CalendarProps): React.ReactElement;
+//# sourceMappingURL=calendar.d.ts.map

package/esm/src/react/components/ui/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/calendar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2D/B,sCAAsC;AACtC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,wDAAwD;IACxD,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,mIAAmI;IACnI,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAgB,EAChB,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CA0KpC"}