veryfront 0.1.1238 → 0.1.1239

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

@@ -0,0 +1,100 @@
+/**
+ * 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";
+import { cx as cn } from "./cva.js";
+import { useAdapter } from "./adapter/context.js";
+/** Combobox root - renders no node of its own (state + context only). */
+export function Combobox(props) {
+    const { combobox } = useAdapter();
+    const optionLabels = React.useMemo(() => collectOptionLabels(props.children), [props.children]);
+    return React.createElement(combobox.Root, { ...props, optionLabels: optionLabels });
+}
+function collectOptionLabels(children, labels = []) {
+    React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        if (child.type === ComboboxItem) {
+            const { value, textValue, children: itemChildren } = child.props;
+            labels.push({ value, text: resolveOptionText(value, textValue, itemChildren) });
+            return;
+        }
+        const nestedChildren = child.props.children;
+        if (nestedChildren !== undefined)
+            collectOptionLabels(nestedChildren, labels);
+    });
+    return labels;
+}
+function resolveOptionText(value, textValue, children) {
+    return textValue ?? collectPlainText(children) ?? value;
+}
+function collectPlainText(children) {
+    let text = "";
+    let hasText = false;
+    React.Children.forEach(children, (child) => {
+        if (typeof child === "string" || typeof child === "number") {
+            text += String(child);
+            hasText = true;
+            return;
+        }
+        if (!React.isValidElement(child))
+            return;
+        const nested = collectPlainText(child.props.children);
+        if (nested === undefined)
+            return;
+        text += nested;
+        hasText = true;
+    });
+    return hasText ? text : undefined;
+}
+/** The `role="combobox"` text input that drives filtering. */
+export function ComboboxInput({ 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"` surface, shown while filtering. */
+export function ComboboxContent({ 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 selectable, filterable option. Hides itself when it doesn't match the query. */
+export function ComboboxItem({ value, textValue, disabled, className, children, onClick, ref, ...props }) {
+    const { combobox } = useAdapter();
+    const ctx = combobox.useCombobox();
+    const id = React.useId();
+    const text = resolveOptionText(value, textValue, children);
+    React.useEffect(() => {
+        ctx.registerOption(id, value, text, disabled);
+        return () => ctx.unregisterOption(id);
+    }, [ctx, disabled, id, value, text]);
+    if (!ctx.matches(text))
+        return null;
+    const active = ctx.activeId === id;
+    const selected = ctx.value === value;
+    return (React.createElement("div", { ref: ref, id: id, role: "option", "aria-selected": selected, "aria-disabled": disabled || undefined, "data-active": active ? "" : undefined, "data-disabled": disabled ? "" : undefined, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented && !disabled)
+                ctx.select(value, text);
+        }, className: cn("flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-base", "data-[active]:bg-[var(--accent)] aria-selected:font-medium", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props }, children ?? text));
+}

package/esm/src/react/components/ui/context-menu.d.ts

@@ -0,0 +1,116 @@
+/**
+ * ContextMenu - a menu opened by right-click (the native `contextmenu` event) at
+ * the pointer position, rather than by clicking a trigger button. It shares the
+ * exact item / surface look of {@link ./dropdown-menu.tsx DropdownMenu} (classes
+ * ported 1:1 from Studio, token names remapped to veryfront's `[var(--token)]`
+ * vocabulary) and reuses the shared {@link ./floating.tsx Floating} portal +
+ * fixed-positioning helper for dismissal (outside-click / `Escape`), scroll
+ * following, viewport clamping, and portalling into the `[data-vf-ui]` token
+ * scope. The only behavioural difference from DropdownMenu is the trigger: it
+ * captures `onContextMenu`, calls `preventDefault()`, and opens the surface at
+ * the pointer's `clientX` / `clientY` via a zero-size virtual anchor.
+ *
+ * A11y work (roving focus, typeahead, focus trap) is tracked in
+ * anchored-surface.tsx and shared with the other menu surfaces.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenuTrigger className="rounded-md border border-[var(--edge-medium)] p-8">
+ *     Right-click here
+ *   </ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuLabel>Actions</ContextMenuLabel>
+ *     <ContextMenuGroup>
+ *       <ContextMenuItem onSelect={() => console.log("cut")}>Cut</ContextMenuItem>
+ *       <ContextMenuItem onSelect={() => console.log("copy")}>Copy</ContextMenuItem>
+ *     </ContextMenuGroup>
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem onSelect={() => console.log("delete")}>Delete</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ *
+ * @module react/components/ui/context-menu
+ */
+import * as React from "react";
+import { type PolymorphicButtonAttributes } from "./slot.js";
+import { type DisclosureOptions } from "./disclosure.js";
+/** Props accepted by `<ContextMenu>`. */
+export interface ContextMenuProps extends DisclosureOptions {
+    /** The trigger and content parts to compose. */
+    children: React.ReactNode;
+}
+/**
+ * ContextMenu root - owns open state and the pointer position. Renders a
+ * zero-size, `position: fixed` virtual anchor (kept inside the token scope so
+ * the portalled surface resolves `var(--…)`), which `Floating` measures to place
+ * the surface at the last right-click.
+ */
+export declare function ContextMenu({ children, open, defaultOpen, onOpenChange }: ContextMenuProps): React.ReactElement;
+/** Props accepted by `<ContextMenuTrigger>`. */
+export interface ContextMenuTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Merge the trigger behaviour onto your own element instead of a wrapper `div`. */
+    asChild?: boolean;
+    /** React 19: ref is a regular prop, forwarded to the trigger node. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** Literal slotted trigger contract with an element-specific ref and events. */
+export type ContextMenuSlottedTriggerProps<T extends HTMLElement = HTMLElement> = Omit<React.HTMLAttributes<T>, "children" | "ref"> & {
+    asChild: true;
+    children: React.ReactElement;
+    ref?: React.Ref<T>;
+};
+/**
+ * Trigger - the region a right-click opens the menu over. Captures
+ * `onContextMenu`, calls `preventDefault()` (suppressing the browser's native
+ * menu), and opens the surface at the pointer coordinates. `asChild` merges onto
+ * the child element, which must forward `ref` to its DOM node.
+ */
+export declare function ContextMenuTrigger<T extends HTMLElement = HTMLElement>(props: ContextMenuSlottedTriggerProps<T>): React.ReactElement;
+export declare function ContextMenuTrigger(props: ContextMenuTriggerProps): React.ReactElement;
+/** Props accepted by `<ContextMenuContent>`. */
+export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Horizontal edge of the surface aligned to the pointer. @default "start" */
+    align?: "start" | "end";
+    /** Consumer ref for the surface node (forwarded through `Floating`). */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** Menu surface - portalled to the pointer position while open. No border (Studio). */
+export declare function ContextMenuContent({ children, className, align, onKeyDown, ref, ...props }: ContextMenuContentProps): React.ReactElement | null;
+/** Groups related items with a tight inner gap (Studio: `gap-px p-0.5`). */
+export declare function ContextMenuGroup({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.ReactElement;
+/** Props accepted by `<ContextMenuItem>`. */
+export interface ContextMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Called when the item is chosen (also closes the menu). */
+    onSelect?: () => void;
+    /** `asChild` merges item styling onto your own element. */
+    asChild?: boolean;
+    /** Consumer ref for the item node. */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/** Literal slotted item contract with element-specific refs and events. */
+export type ContextMenuSlottedItemProps<T extends HTMLElement = HTMLElement> = Omit<PolymorphicButtonAttributes<T>, "children" | "ref" | "onSelect"> & {
+    /** Called when the item is chosen (also closes the menu). */
+    onSelect?: () => void;
+    asChild: true;
+    children: React.ReactElement;
+    disabled?: boolean;
+    ref?: React.Ref<T>;
+};
+/** A selectable menu item. Icons render at `size-3.5` (14px). Closes on select. */
+export declare function ContextMenuItem<T extends HTMLElement = HTMLElement>(props: ContextMenuSlottedItemProps<T>): React.ReactElement;
+export declare function ContextMenuItem(props: ContextMenuItemProps): React.ReactElement;
+/** Full-width divider between groups (Studio: `-mx-2.5 my-2`). */
+export declare function ContextMenuSeparator({ className }: {
+    className?: string;
+}): React.ReactElement;
+/** Non-interactive section label - full-strength foreground (Studio). */
+export declare function ContextMenuLabel({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): React.ReactElement;
+//# sourceMappingURL=context-menu.d.ts.map

package/esm/src/react/components/ui/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/context-menu.tsx"],"names":[],"mappings":"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"}

package/esm/src/react/components/ui/context-menu.js

@@ -0,0 +1,168 @@
+/**
+ * ContextMenu - a menu opened by right-click (the native `contextmenu` event) at
+ * the pointer position, rather than by clicking a trigger button. It shares the
+ * exact item / surface look of {@link ./dropdown-menu.tsx DropdownMenu} (classes
+ * ported 1:1 from Studio, token names remapped to veryfront's `[var(--token)]`
+ * vocabulary) and reuses the shared {@link ./floating.tsx Floating} portal +
+ * fixed-positioning helper for dismissal (outside-click / `Escape`), scroll
+ * following, viewport clamping, and portalling into the `[data-vf-ui]` token
+ * scope. The only behavioural difference from DropdownMenu is the trigger: it
+ * captures `onContextMenu`, calls `preventDefault()`, and opens the surface at
+ * the pointer's `clientX` / `clientY` via a zero-size virtual anchor.
+ *
+ * A11y work (roving focus, typeahead, focus trap) is tracked in
+ * anchored-surface.tsx and shared with the other menu surfaces.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenuTrigger className="rounded-md border border-[var(--edge-medium)] p-8">
+ *     Right-click here
+ *   </ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuLabel>Actions</ContextMenuLabel>
+ *     <ContextMenuGroup>
+ *       <ContextMenuItem onSelect={() => console.log("cut")}>Cut</ContextMenuItem>
+ *       <ContextMenuItem onSelect={() => console.log("copy")}>Copy</ContextMenuItem>
+ *     </ContextMenuGroup>
+ *     <ContextMenuSeparator />
+ *     <ContextMenuItem onSelect={() => console.log("delete")}>Delete</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ *
+ * @module react/components/ui/context-menu
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+import { composeRefs, Slot } from "./slot.js";
+import { Floating } from "./floating.js";
+import { focusWithoutScroll } from "./focus-management.js";
+import { useMenuContentKeyboard } from "./menu-keyboard.js";
+import { useDisclosure } from "./disclosure.js";
+const ContextMenuContext = React.createContext(null);
+/**
+ * ContextMenu root - owns open state and the pointer position. Renders a
+ * zero-size, `position: fixed` virtual anchor (kept inside the token scope so
+ * the portalled surface resolves `var(--…)`), which `Floating` measures to place
+ * the surface at the last right-click.
+ */
+export function ContextMenu({ children, open, defaultOpen, onOpenChange }) {
+    const { open: isOpen, setOpen } = useDisclosure({ open, defaultOpen, onOpenChange });
+    const anchorRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const [pos, setPos] = React.useState({ x: 0, y: 0 });
+    const openAt = React.useCallback((x, y) => {
+        setPos({ x, y });
+        setOpen(true);
+    }, [setOpen]);
+    const ctx = React.useMemo(() => ({ open: isOpen, setOpen, anchorRef, triggerRef, openAt }), [isOpen, setOpen, openAt]);
+    return (React.createElement(ContextMenuContext.Provider, { value: ctx },
+        React.createElement("span", { ref: anchorRef, "aria-hidden": "true", style: {
+                position: "fixed",
+                left: pos.x,
+                top: pos.y,
+                width: 0,
+                height: 0,
+                pointerEvents: "none",
+            } }),
+        children));
+}
+export function ContextMenuTrigger({ asChild, onContextMenu, onKeyDown, children, ref, role, tabIndex, "aria-haspopup": ariaHasPopup, ...props }) {
+    const ctx = React.useContext(ContextMenuContext);
+    const triggerProps = asChild
+        ? { role, tabIndex, "aria-haspopup": ariaHasPopup }
+        : { role: role ?? "button", tabIndex: tabIndex ?? 0, "aria-haspopup": ariaHasPopup ?? "menu" };
+    const setTriggerRef = React.useCallback((element) => {
+        if (ctx)
+            ctx.triggerRef.current = element;
+    }, [ctx]);
+    const composedRef = React.useMemo(() => composeRefs(setTriggerRef, ref), [ref, setTriggerRef]);
+    const stateProps = {
+        "data-state": ctx?.open ? "open" : "closed",
+        onContextMenu: (event) => {
+            onContextMenu?.(event);
+            if (event.defaultPrevented)
+                return;
+            event.preventDefault();
+            ctx?.openAt(event.clientX, event.clientY);
+        },
+        onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || !ctx)
+                return;
+            if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey))
+                return;
+            event.preventDefault();
+            const rect = event.currentTarget.getBoundingClientRect();
+            ctx.openAt(rect.left, rect.bottom);
+        },
+    };
+    if (asChild) {
+        return (React.createElement(Slot, { ref: composedRef, ...triggerProps, ...stateProps, ...props }, children));
+    }
+    return (React.createElement("div", { ref: composedRef, ...triggerProps, ...stateProps, ...props }, children));
+}
+/** Menu surface - portalled to the pointer position while open. No border (Studio). */
+export function ContextMenuContent({ children, className, align = "start", onKeyDown, ref, ...props }) {
+    const ctx = React.useContext(ContextMenuContext);
+    if (!ctx)
+        return null;
+    const handleKeyDown = useMenuContentKeyboard({
+        onKeyDown,
+        setOpen: ctx.setOpen,
+        triggerRef: ctx.triggerRef,
+    });
+    return (React.createElement(Floating, { anchorRef: ctx.anchorRef, open: ctx.open, align: align, onDismiss: () => ctx.setOpen(false), initialFocus: "[role='menuitem']:not([aria-disabled='true'])", returnFocusRef: ctx.triggerRef, contentRef: ref, role: "menu", "aria-orientation": "vertical", onKeyDown: handleKeyDown, className: cn("z-50 min-w-[260px] overflow-hidden rounded-lg bg-[var(--popover)] p-2.5 text-[var(--foreground)] shadow-sm outline-none", className), ...props }, children));
+}
+/** Groups related items with a tight inner gap (Studio: `gap-px p-0.5`). */
+export function ContextMenuGroup({ children, className }) {
+    return (React.createElement("div", { role: "group", className: cn("flex flex-col gap-px p-0.5", className) }, children));
+}
+export function ContextMenuItem({ children, className, onSelect, onClick, onKeyDown, disabled, asChild, ref, ...props }) {
+    const ctx = React.useContext(ContextMenuContext);
+    const closeAndRestoreFocus = React.useCallback(() => {
+        ctx?.setOpen(false);
+        const trigger = ctx?.triggerRef.current;
+        queueMicrotask(() => {
+            if (trigger?.isConnected)
+                focusWithoutScroll(trigger);
+        });
+    }, [ctx]);
+    const itemProps = {
+        role: "menuitem",
+        "aria-disabled": disabled || undefined,
+        disabled,
+        className: cn("relative flex w-full cursor-pointer select-none items-center gap-2.5 rounded-md px-3 h-[36px] text-base font-normal text-left text-[var(--foreground)] outline-none transition-colors", "hover:bg-[var(--tertiary)] focus:bg-[var(--tertiary)] dark:hover:bg-[var(--accent)] dark:focus:bg-[var(--accent)]", "disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5 [&_svg]:shrink-0", className),
+        onClick: (event) => {
+            if (disabled)
+                return;
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            onSelect?.();
+            closeAndRestoreFocus();
+        },
+        onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
+            if (disabled || (event.key !== "Enter" && event.key !== " "))
+                return;
+            event.preventDefault();
+            event.currentTarget.click();
+        },
+    };
+    if (asChild) {
+        return (React.createElement(Slot, { ref: ref, ...itemProps, ...props }, children));
+    }
+    return (React.createElement("button", { type: "button", ref: ref, ...itemProps, ...props }, children));
+}
+/** Full-width divider between groups (Studio: `-mx-2.5 my-2`). */
+export function ContextMenuSeparator({ className }) {
+    return React.createElement("div", { className: cn("-mx-2.5 my-2 h-px bg-[var(--separator)]", className) });
+}
+/** Non-interactive section label - full-strength foreground (Studio). */
+export function ContextMenuLabel({ children, className, }) {
+    return (React.createElement("div", { className: cn("px-3 py-1.5 mb-0.5 text-sm font-medium text-[var(--foreground)]", className) }, children));
+}

package/esm/src/react/components/ui/date-picker.d.ts

@@ -0,0 +1,69 @@
+/**
+ * DatePicker: a button that opens a {@link Popover} holding a {@link Calendar};
+ * picking a day sets the value and closes the surface. Composition-only: all
+ * overlay behaviour (portal into the token scope, positioning, outside-click /
+ * `Escape` dismiss) is reused from Popover, and the month grid is the shared
+ * Calendar: nothing is re-implemented here. Both the selected `value` and the
+ * `open` state support controlled and uncontrolled use; the parts share
+ * value/open/format through context. Skinned with the veryfront theme tokens.
+ *
+ * @example
+ * ```tsx
+ * import { DatePicker, DatePickerContent, DatePickerTrigger } from "veryfront/ui";
+ *
+ * function Example() {
+ *   const [date, setDate] = React.useState<Date>();
+ *   return (
+ *     <DatePicker value={date} onChange={setDate}>
+ *       <DatePickerTrigger />
+ *       <DatePickerContent />
+ *     </DatePicker>
+ *   );
+ * }
+ * ```
+ *
+ * @module react/components/ui/date-picker
+ */
+import * as React from "react";
+/** Props accepted by `<DatePicker>`. */
+export interface DatePickerProps {
+    /** The trigger and content parts to compose. */
+    children: React.ReactNode;
+    /** Controlled selected day (pair with `onChange`). @default undefined */
+    value?: Date;
+    /** Initial selected day when uncontrolled. @default undefined */
+    defaultValue?: Date;
+    /** Fires with the picked day. @default undefined */
+    onChange?: (date: Date) => void;
+    /** Controlled open state (pair with `onOpenChange`). @default undefined */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Fires when the popover open state changes. @default undefined */
+    onOpenChange?: (open: boolean) => void;
+    /** Trigger label shown when no value is selected. @default "Pick a date" */
+    placeholder?: string;
+    /** Formats the selected day into the trigger's label. @default (d) => d.toLocaleDateString() */
+    format?: (date: Date) => string;
+    /** Month the calendar shows initially; moved internally by its prev/next buttons. @default value ?? today */
+    defaultMonth?: Date;
+}
+/** Root: owns `{ value, open }`, provides context, and renders the Popover. */
+export declare function DatePicker({ children, value, defaultValue, onChange, open, defaultOpen, onOpenChange, placeholder, format, defaultMonth, }: DatePickerProps): React.ReactElement;
+/** Props accepted by `<DatePickerTrigger>`. */
+export interface DatePickerTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/** The field-styled button that shows the formatted value (or placeholder) and opens the popover. */
+export declare function DatePickerTrigger({ className, ref, ...props }: DatePickerTriggerProps): React.ReactElement;
+/** Props accepted by `<DatePickerContent>`. */
+export interface DatePickerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Horizontal alignment of the surface relative to the trigger. @default "start" */
+    align?: "start" | "end";
+    /** React 19: ref is a regular prop. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** The Popover surface wrapping the {@link Calendar}; picking a day commits it and closes. */
+export declare function DatePickerContent({ className, align, ref, ...props }: DatePickerContentProps): React.ReactElement;
+//# sourceMappingURL=date-picker.d.ts.map

package/esm/src/react/components/ui/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/ui/date-picker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiC/B,wCAAwC;AACxC,MAAM,WAAW,eAAe;IAC9B,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yEAAyE;IACzE,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,iEAAiE;IACjE,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,4EAA4E;IAC5E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gGAAgG;IAChG,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAChC,6GAA6G;IAC7G,YAAY,CAAC,EAAE,IAAI,CAAC;CACrB;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,WAA2B,EAC3B,MAA4C,EAC5C,YAAY,GACb,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAyCtC;AAqBD,+CAA+C;AAC/C,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACvE,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACpC;AAED,qGAAqG;AACrG,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CA6B7C;AAED,+CAA+C;AAC/C,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,uCAAuC;IACvC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,KAAe,EACf,GAAG,EACH,GAAG,KAAK,EACT,EAAE,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAoB7C"}

package/esm/src/react/components/ui/date-picker.js

@@ -0,0 +1,96 @@
+/**
+ * DatePicker: a button that opens a {@link Popover} holding a {@link Calendar};
+ * picking a day sets the value and closes the surface. Composition-only: all
+ * overlay behaviour (portal into the token scope, positioning, outside-click /
+ * `Escape` dismiss) is reused from Popover, and the month grid is the shared
+ * Calendar: nothing is re-implemented here. Both the selected `value` and the
+ * `open` state support controlled and uncontrolled use; the parts share
+ * value/open/format through context. Skinned with the veryfront theme tokens.
+ *
+ * @example
+ * ```tsx
+ * import { DatePicker, DatePickerContent, DatePickerTrigger } from "veryfront/ui";
+ *
+ * function Example() {
+ *   const [date, setDate] = React.useState<Date>();
+ *   return (
+ *     <DatePicker value={date} onChange={setDate}>
+ *       <DatePickerTrigger />
+ *       <DatePickerContent />
+ *     </DatePicker>
+ *   );
+ * }
+ * ```
+ *
+ * @module react/components/ui/date-picker
+ */
+import * as React from "react";
+import { cx as cn } from "./cva.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { composeRefs } from "./slot.js";
+const DatePickerContext = React.createContext(null);
+function useDatePickerContext(part) {
+    const ctx = React.useContext(DatePickerContext);
+    if (!ctx)
+        throw new Error(`<${part}> must be used within <DatePicker>`);
+    return ctx;
+}
+/** Root: owns `{ value, open }`, provides context, and renders the Popover. */
+export function DatePicker({ children, value, defaultValue, onChange, open, defaultOpen, onOpenChange, placeholder = "Pick a date", format = (date) => date.toLocaleDateString(), defaultMonth, }) {
+    const valueControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const currentValue = valueControlled ? value : internalValue;
+    const openControlled = open !== undefined;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const currentOpen = openControlled ? open : internalOpen;
+    const triggerRef = React.useRef(null);
+    const setValue = React.useCallback((date) => {
+        if (!valueControlled)
+            setInternalValue(date);
+        onChange?.(date);
+    }, [valueControlled, onChange]);
+    const setOpen = React.useCallback((next) => {
+        if (!openControlled)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [openControlled, onOpenChange]);
+    const ctx = React.useMemo(() => ({
+        value: currentValue,
+        setValue,
+        open: currentOpen,
+        setOpen,
+        placeholder,
+        format,
+        defaultMonth,
+        triggerRef,
+    }), [currentValue, setValue, currentOpen, setOpen, placeholder, format, defaultMonth, triggerRef]);
+    return (React.createElement(DatePickerContext.Provider, { value: ctx },
+        React.createElement(Popover, { open: currentOpen, onOpenChange: setOpen }, children)));
+}
+/** A calendar glyph rendered at the trailing edge of the trigger. */
+function CalendarIcon() {
+    return (React.createElement("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "size-4 shrink-0 text-[var(--muted-foreground)]" },
+        React.createElement("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+        React.createElement("path", { d: "M16 2v4M8 2v4M3 10h18" })));
+}
+/** The field-styled button that shows the formatted value (or placeholder) and opens the popover. */
+export function DatePickerTrigger({ className, ref, ...props }) {
+    const ctx = useDatePickerContext("DatePickerTrigger");
+    const empty = ctx.value == null;
+    const composedRef = React.useMemo(() => composeRefs(ctx.triggerRef, ref), [ctx.triggerRef, ref]);
+    return (React.createElement(PopoverTrigger, { asChild: true },
+        React.createElement("button", { ref: composedRef, type: "button", "data-empty": empty ? "true" : undefined, className: cn("inline-flex h-[42px] w-full items-center justify-between gap-2 rounded-md px-3 text-base", "border border-[var(--input)] bg-[var(--background)] text-[var(--foreground)]", "transition-[background-color,color] duration-150 ease-in", "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]", "data-[empty=true]:text-[var(--muted-foreground)]", className), ...props },
+            React.createElement("span", { className: "truncate" }, empty ? ctx.placeholder : ctx.format(ctx.value)),
+            React.createElement(CalendarIcon, null))));
+}
+/** The Popover surface wrapping the {@link Calendar}; picking a day commits it and closes. */
+export function DatePickerContent({ className, align = "start", ref, ...props }) {
+    const ctx = useDatePickerContext("DatePickerContent");
+    return (React.createElement(PopoverContent, { ref: ref, align: align, className: cn("w-auto min-w-0 p-0", className), ...props },
+        React.createElement(Calendar, { value: ctx.value, defaultMonth: ctx.defaultMonth, onChange: (date) => {
+                ctx.setValue(date);
+                ctx.setOpen(false);
+                ctx.triggerRef.current?.focus();
+            } })));
+}

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

@@ -1,7 +1,25 @@
 /**
- * Dependency-free dialog primitive with a Studio-compatible part API. It
- * provides modal focus containment, focus restoration, document scroll
- * locking, stable ARIA relationships, and Escape/overlay dismissal.
+ * Dialog - BASIC fork of @radix-ui/react-dialog with the same API shape (Root /
+ * Trigger / Content + Header / Title / Description / Body / Footer / Action /
+ * Cancel / Close / Form). Classes ported 1:1 from Studio's `Dialog` (tokens
+ * remapped; `Heading` level 2 + `Text` inlined). Modal overlay + centered panel;
+ * dismisses on `Escape` and overlay click. A11y work tracked in modal-surface.tsx.
+ *
+ * @example
+ * ```tsx
+ * import { Button, Dialog, DialogAction, DialogCancel, DialogContent, DialogFooter, DialogTitle, DialogTrigger } from "veryfront/ui";
+ *
+ * <Dialog>
+ *   <DialogTrigger asChild><Button variant="destructive">Delete</Button></DialogTrigger>
+ *   <DialogContent>
+ *     <DialogTitle>Delete project?</DialogTitle>
+ *     <DialogFooter>
+ *       <DialogCancel>Cancel</DialogCancel>
+ *       <DialogAction onClick={remove}>Delete</DialogAction>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>;
+ * ```
  *
  * @module react/components/ui/dialog
  */
@@ -9,35 +27,47 @@ import * as React from "react";
 import { type ButtonProps } from "./button.js";
 /** Props accepted by `<Dialog>`. */
 export interface DialogProps {
+    /** The trigger and content parts to compose. */
     children: React.ReactNode;
+    /** Controlled open state (pair with `onOpenChange`). */
     open?: boolean;
+    /** Initial open state when uncontrolled. */
     defaultOpen?: boolean;
+    /** Fires when the open state changes. */
     onOpenChange?: (open: boolean) => void;
 }
-/** Dialog root — owns open state. */
+/** Dialog root - owns open state. */
 export declare function Dialog(props: DialogProps): React.ReactElement;
-/** Trigger — opens the dialog. `asChild` merges onto the child element. */
+/** Trigger - opens the dialog. `asChild` merges onto the child element. */
 export declare function DialogTrigger(props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
     asChild?: boolean;
     ref?: React.Ref<HTMLButtonElement>;
 }): React.ReactElement;
-/** Modal surface — overlay + centered panel, rendered while open. */
-export declare function DialogContent({ className, children, "aria-describedby": describedBy, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement | null;
+/** Props accepted by `<DialogContent>`. */
+export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** React 19: ref is a regular prop, forwarded to the dialog panel. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/** Modal surface - overlay + centered panel, rendered while open. */
+export declare function DialogContent({ className, children, "aria-describedby": describedBy, ...props }: DialogContentProps): React.ReactElement | null;
 /** Left-aligned title + description block. */
 export declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
-/** Dialog title — Studio Heading level 2 (20px). Semibold so Inter reads at
- * Studio's medium-on-Söhne weight (workbench heading convention). */
+/** Dialog title - Studio Heading level 2 (20px). Semibold so Inter reads at
+ * Studio's medium-on-Söhne weight (workbench heading convention). Registers its
+ * id with the adapter so the panel adopts `aria-labelledby`. */
 export declare function DialogTitle({ className, id, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.ReactElement;
-/** Dialog description — body text, left-aligned. */
+/** Dialog description - body text, left-aligned. Registers its id with the
+ * adapter so the panel adopts `aria-describedby`. */
 export declare function DialogDescription({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.ReactElement;
 /** Scrollable body area with a bottom edge-fade. */
 export declare function DialogBody({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
-/** Sticky footer row — action left, cancel right. */
+/** Sticky footer row - action left, cancel right. */
 export declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
 /** Layout-neutral `<form>` shell (`display: contents`) wrapping header/body/footer. */
 export declare function DialogForm({ className, ...props }: React.FormHTMLAttributes<HTMLFormElement>): React.ReactElement;
 /** Props accepted by `<DialogAction>`. */
 export interface DialogActionProps extends ButtonProps {
+    /** Show the pending/pulsing state and block double-submits. */
     isLoading?: boolean;
 }
 /** Recommended action button (primary, default size). */