veryfront 0.1.1238 → 0.1.1239

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"}

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

@@ -0,0 +1,170 @@
+/**
+ * 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";
+import { cx as cn } from "./cva.js";
+const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+// Sunday-first weekday labels; rotated when weekStartsOn === 1.
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+/** First day of the month `d` falls in, at local midnight. */
+function startOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+/** True when `a` and `b` are the same calendar day. */
+function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+/** True when `a` and `b` fall in the same calendar month. */
+function isSameMonth(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+/** Return the local calendar day `offset` days from `date`. */
+function addDays(date, offset) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + offset);
+}
+/** Move by whole months, clamping the day to the target month's final day. */
+function addMonths(date, offset) {
+    const target = new Date(date.getFullYear(), date.getMonth() + offset, 1);
+    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+    return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
+}
+/** Chunk the flat cell list into rows of seven. */
+function toWeeks(cells) {
+    const weeks = [];
+    for (let i = 0; i < cells.length; i += 7)
+        weeks.push(cells.slice(i, i + 7));
+    return weeks;
+}
+/** A dependency-free single-month date grid. */
+export function Calendar({ value, onChange, defaultMonth, weekStartsOn = 0, className, ref, ...props }) {
+    const [displayed, setDisplayed] = React.useState(() => startOfMonth(defaultMonth ?? value ?? new Date()));
+    const [activeDate, setActiveDate] = React.useState(() => {
+        const initialMonth = startOfMonth(defaultMonth ?? value ?? new Date());
+        const today = new Date();
+        if (value != null && isSameMonth(value, initialMonth))
+            return value;
+        if (isSameMonth(today, initialMonth))
+            return today;
+        return initialMonth;
+    });
+    const activeButtonRef = React.useRef(null);
+    const shouldFocusActiveRef = React.useRef(false);
+    React.useEffect(() => {
+        if (!shouldFocusActiveRef.current)
+            return;
+        shouldFocusActiveRef.current = false;
+        activeButtonRef.current?.focus();
+    }, [activeDate, displayed]);
+    const today = new Date();
+    const year = displayed.getFullYear();
+    const month = displayed.getMonth();
+    const caption = `${MONTHS[month]} ${year}`;
+    const weekdays = weekStartsOn === 1 ? [...WEEKDAYS.slice(1), WEEKDAYS[0]] : WEEKDAYS;
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const leading = (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
+    const cells = [];
+    for (let i = 0; i < leading; i++)
+        cells.push(null);
+    for (let d = 1; d <= daysInMonth; d++)
+        cells.push(d);
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const weeks = toWeeks(cells);
+    const select = (day) => onChange?.(new Date(year, month, day));
+    const moveFocus = (date) => {
+        shouldFocusActiveRef.current = true;
+        if (!isSameMonth(date, displayed))
+            setDisplayed(startOfMonth(date));
+        setActiveDate(date);
+    };
+    const changeDisplayedMonth = (offset) => {
+        const date = addMonths(activeDate, offset);
+        setDisplayed(startOfMonth(date));
+        setActiveDate(date);
+    };
+    const goPrev = () => changeDisplayedMonth(-1);
+    const goNext = () => changeDisplayedMonth(1);
+    const handleDayKeyDown = (event, date) => {
+        const dayOfWeek = (date.getDay() - weekStartsOn + 7) % 7;
+        const nextDate = event.key === "ArrowLeft"
+            ? addDays(date, -1)
+            : event.key === "ArrowRight"
+                ? addDays(date, 1)
+                : event.key === "ArrowUp"
+                    ? addDays(date, -7)
+                    : event.key === "ArrowDown"
+                        ? addDays(date, 7)
+                        : event.key === "Home"
+                            ? addDays(date, -dayOfWeek)
+                            : event.key === "End"
+                                ? addDays(date, 6 - dayOfWeek)
+                                : event.key === "PageUp"
+                                    ? addMonths(date, -1)
+                                    : event.key === "PageDown"
+                                        ? addMonths(date, 1)
+                                        : null;
+        if (nextDate == null)
+            return;
+        event.preventDefault();
+        moveFocus(nextDate);
+    };
+    return (React.createElement("div", { ref: ref, "data-month": caption, className: cn("w-fit select-none rounded-lg border border-[var(--border)] bg-[var(--background)] p-3 text-[var(--foreground)]", className), ...props },
+        React.createElement("div", { className: "mb-2 flex items-center justify-between" },
+            React.createElement("button", { type: "button", "aria-label": "Previous month", onClick: goPrev, className: "inline-flex size-7 items-center justify-center rounded-md text-[var(--muted-foreground)] hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]" }, "\u2039"),
+            React.createElement("div", { "aria-live": "polite", className: "text-sm font-medium text-[var(--foreground)]" }, caption),
+            React.createElement("button", { type: "button", "aria-label": "Next month", onClick: goNext, className: "inline-flex size-7 items-center justify-center rounded-md text-[var(--muted-foreground)] hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]" }, "\u203A")),
+        React.createElement("table", { role: "grid", "aria-label": caption, className: "border-collapse" },
+            React.createElement("thead", null,
+                React.createElement("tr", { role: "row", className: "flex" }, weekdays.map((label, i) => (React.createElement("th", { key: i, scope: "col", className: "inline-flex size-9 items-center justify-center text-xs font-normal text-[var(--muted-foreground)]" }, label))))),
+            React.createElement("tbody", null, weeks.map((week, wi) => (React.createElement("tr", { key: wi, role: "row", className: "flex" }, week.map((day, di) => {
+                if (day == null) {
+                    return React.createElement("td", { key: di, role: "gridcell", className: "size-9" });
+                }
+                const date = new Date(year, month, day);
+                const selected = value != null && isSameDay(value, date);
+                const isToday = isSameDay(today, date);
+                const active = isSameDay(activeDate, date);
+                return (
+                // aria-selected belongs on the gridcell: ARIA defines it for
+                // gridcell/option/row/tab, not for role="button". The button
+                // carries aria-pressed for its own state instead.
+                React.createElement("td", { key: di, role: "gridcell", "aria-selected": selected, "data-selected": selected ? "true" : undefined, className: "p-0" },
+                    React.createElement("button", { ref: active ? activeButtonRef : undefined, type: "button", tabIndex: active ? 0 : -1, "aria-pressed": selected, "data-today": isToday ? "true" : undefined, onFocus: () => setActiveDate(date), onKeyDown: (event) => handleDayKeyDown(event, date), onClick: () => select(day), className: cn("inline-flex size-9 items-center justify-center rounded-md text-sm text-[var(--foreground)]", "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]", isToday && "ring-1 ring-[var(--ring)]", selected &&
+                            "bg-[var(--primary)] text-[var(--primary-foreground)] hover:bg-[var(--primary)] hover:text-[var(--primary-foreground)]") }, day)));
+            }))))))));
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Combobox - a text input that filters a dropdown `listbox` as you type, then
+ * commits a selection. The look is ours (theme tokens); the mechanics (query,
+ * filtering, `aria-activedescendant` keyboard nav, open/dismiss, portalling)
+ * come from the active adapter's `combobox` slot - the zero-dependency
+ * {@link builtinCombobox} by default, swappable to cmdk / Base UI / etc. via
+ * `UIAdapterProvider`.
+ *
+ * @example
+ * ```tsx
+ * import { Combobox, ComboboxInput, ComboboxContent, ComboboxItem } from "veryfront/ui";
+ *
+ * <Combobox onValueChange={setFramework}>
+ *   <ComboboxInput placeholder="Search framework…" />
+ *   <ComboboxContent>
+ *     <ComboboxItem value="next">Next.js</ComboboxItem>
+ *     <ComboboxItem value="remix">Remix</ComboboxItem>
+ *     <ComboboxItem value="astro">Astro</ComboboxItem>
+ *   </ComboboxContent>
+ * </Combobox>;
+ * ```
+ *
+ * @module react/components/ui/combobox
+ */
+import * as React from "react";
+/** Props accepted by `<Combobox>` (the root; owns query/open/value state). */
+export interface ComboboxProps {
+    /** `ComboboxInput` + `ComboboxContent` parts to compose. */
+    children: React.ReactNode;
+    /** Controlled selected value (pair with `onValueChange`). */
+    value?: string;
+    /** Initial selected value when uncontrolled. */
+    defaultValue?: string;
+    /** Fires with the newly-selected value. */
+    onValueChange?: (value: string) => void;
+    /** Controlled open state of the listbox (pair with `onOpenChange`). */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Fires when the listbox opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Initial input text. */
+    defaultInputValue?: string;
+}
+/** Combobox root - renders no node of its own (state + context only). */
+export declare function Combobox(props: ComboboxProps): React.ReactElement;
+/** Props accepted by `<ComboboxInput>`. */
+export interface ComboboxInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLInputElement>;
+}
+/** The `role="combobox"` text input that drives filtering. */
+export declare function ComboboxInput({ className, ...props }: ComboboxInputProps): React.ReactElement;
+/** Props accepted by `<ComboboxContent>`. */
+export interface ComboboxContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** The floating `role="listbox"` surface, shown while filtering. */
+export declare function ComboboxContent({ className, children, ...props }: ComboboxContentProps): React.ReactElement | null;
+/** Props accepted by `<ComboboxItem>`. */
+export interface ComboboxItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** The value this option commits when chosen. */
+    value: string;
+    /** Text used for filtering and the input after selection. Defaults to plain child text, then value. */
+    textValue?: string;
+    /** Disable selection and dim the option. */
+    disabled?: boolean;
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** A selectable, filterable option. Hides itself when it doesn't match the query. */
+export declare function ComboboxItem({ value, textValue, disabled, className, children, onClick, ref, ...props }: ComboboxItemProps): React.ReactElement | null;
+//# sourceMappingURL=combobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/combobox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,8EAA8E;AAC9E,MAAM,WAAW,aAAa;IAC5B,4DAA4D;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,yEAAyE;AACzE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CAIjE;AA6CD,2CAA2C;AAC3C,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACrF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACnC;AAED,8DAA8D;AAC9D,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CAc7F;AAED,6CAA6C;AAC7C,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,oEAAoE;AACpE,wBAAgB,eAAe,CAC7B,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,GACtD,KAAK,CAAC,YAAY,GAAG,IAAI,CAc3B;AAED,0CAA0C;AAC1C,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,uGAAuG;IACvG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAwC/C"}