@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.0

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,129 @@
+import { MenuCheckboxItemProps, MenuGroupLabelProps, MenuGroupProps, MenuItemProps, MenuItemVariant, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuSeparatorProps, MenuShortcutProps, MenuSubmenuRootProps, MenuSubmenuTriggerProps } from "../Menu/Menu.js";
+import { ComponentPropsWithoutRef } from "react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region src/components/ContextMenu/ContextMenu.d.ts
+/**
+ * Groups the context menu parts and owns the open state. The menu opens at
+ * the pointer from a right click — or a long press on touch — anywhere
+ * inside `ContextMenuTrigger`. Base UI's `ContextMenu.Root` re-exported
+ * unchanged: `open`/`defaultOpen`/`onOpenChange(open, details)`, `disabled`,
+ * `loopFocus`, `orientation`, and `highlightItemOnHover` are all available.
+ * A context menu is an invisible shortcut — keep a visible path (a kebab
+ * `Menu`, toolbar buttons) to the same actions.
+ */
+declare const ContextMenu$1: typeof ContextMenu.Root;
+type ContextMenuProps = ComponentPropsWithoutRef<typeof ContextMenu.Root>;
+interface ContextMenuTriggerProps extends Omit<ComponentPropsWithoutRef<typeof ContextMenu.Trigger>, "className"> {
+  className?: string;
+}
+/**
+ * The region the menu acts on. It opens on right click, on the context-menu
+ * key / Shift+F10 (the browser fires `contextmenu` for these while focus is
+ * inside the region), and on a 500ms long press on touch — movement cancels
+ * the press, and the iOS callout is suppressed automatically. Renders an
+ * unstyled `<div>` around its children; make an existing element the region
+ * via `render`:
+ *
+ *   <ContextMenuTrigger render={<tr />}>…</ContextMenuTrigger>
+ *
+ * While its menu is open the element carries `data-popup-open` — the hook
+ * for a "this is the target" outline. Keep something inside the region
+ * focusable so keyboard users can reach the menu, and consider `select-none`
+ * on touch-first surfaces so a long press doesn't also start text selection.
+ */
+declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+type BasePositionerProps = ComponentPropsWithoutRef<typeof ContextMenu.Positioner>;
+type ContextMenuSide = NonNullable<BasePositionerProps["side"]>;
+type ContextMenuAlign = NonNullable<BasePositionerProps["align"]>;
+interface ContextMenuPopupProps extends Omit<ComponentPropsWithoutRef<typeof ContextMenu.Popup>, "className"> {
+  /**
+   * Side of the pointer (or `anchor`) to place the popup on. Leave unset for
+   * context-menu behavior: below the cursor, shifting — not flipping — along
+   * the edges to stay in the viewport; submenus resolve to the inline end.
+   */
+  side?: ContextMenuSide;
+  /**
+   * How the popup lines up along the chosen side. Unset defaults to `start`,
+   * so the popup's corner sits at the cursor (submenus align to the trigger
+   * row instead).
+   */
+  align?: ContextMenuAlign;
+  /**
+   * Distance to the anchor in pixels. Unset defaults adapt: Base UI's
+   * pointer-tuned 5px overlap at the root, a 4px panel overlap for submenus.
+   * When `side` is set explicitly the default is 0 — the popup edge stays
+   * exactly at the pointer.
+   */
+  sideOffset?: BasePositionerProps["sideOffset"];
+  /**
+   * Additional shift along the alignment axis in pixels. Unset defaults
+   * adapt: 2px past the cursor at the root, -4px for submenus so the first
+   * item meets the trigger row. 0 when `side` is set explicitly.
+   */
+  alignOffset?: BasePositionerProps["alignOffset"];
+  /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
+  collisionPadding?: BasePositionerProps["collisionPadding"];
+  /**
+   * Position against an element (or virtual element) instead of the pointer —
+   * e.g. pin the menu to the card that was right-clicked so it opens in the
+   * same place regardless of where inside it the click landed.
+   */
+  anchor?: BasePositionerProps["anchor"];
+  /** Keep the popup in the DOM while closed — for SEO or measuring; closed popups normally unmount. */
+  keepMounted?: boolean;
+  /** Portal destination. Defaults to `document.body`. */
+  container?: ComponentPropsWithoutRef<typeof ContextMenu.Portal>["container"];
+  /**
+   * Applied to the popup panel. Width hooks: the panel is content-sized from
+   * 8rem up — set `w-*`/`max-w-*` for a fixed width. Long menus scroll
+   * inside the panel; cap them earlier with `max-h-*`.
+   */
+  className?: string;
+}
+/**
+ * The floating list of items, with the portal and positioning plumbing
+ * folded in. Anchored to the pointer by default — the panel's corner lands
+ * at the cursor and shifts (rather than flips) at viewport edges, matching
+ * OS context menus; opens with a motion-safe scale/fade. The same component
+ * nests inside `ContextMenuSubmenuRoot`, where its placement defaults switch
+ * to the shared submenu conventions (inline-end side, overlapped edges,
+ * trigger-row alignment). The panel recipe is shared with `MenuPopup`, so
+ * context menus and action menus look identical.
+ */
+declare const ContextMenuPopup: import("react").ForwardRefExoticComponent<ContextMenuPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+/** One action in the menu — `MenuItem` shared as-is: same `variant`/`inset` props, icon slot, and 32px rows. */
+declare const ContextMenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuItemProps = MenuItemProps;
+type ContextMenuItemVariant = MenuItemVariant;
+/** A navigation entry that keeps real `<a>` semantics — `MenuLinkItem` shared as-is. */
+declare const ContextMenuLinkItem: import("react").ForwardRefExoticComponent<MenuLinkItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+type ContextMenuLinkItemProps = MenuLinkItemProps;
+/** Right-aligned keyboard hint inside an item — `MenuShortcut` shared as-is (visual only; wire the key handling in the app). */
+declare const ContextMenuShortcut: import("react").ForwardRefExoticComponent<MenuShortcutProps & import("react").RefAttributes<HTMLSpanElement>>;
+type ContextMenuShortcutProps = MenuShortcutProps;
+/** Groups related items under a `ContextMenuGroupLabel` — `MenuGroup` shared as-is. */
+declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<MenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuGroupProps = MenuGroupProps;
+/** Heading for a group, wired via `aria-labelledby` — `MenuGroupLabel` shared as-is. */
+declare const ContextMenuGroupLabel: import("react").ForwardRefExoticComponent<MenuGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuGroupLabelProps = MenuGroupLabelProps;
+/** Divider between item groups — `MenuSeparator` shared as-is. */
+declare const ContextMenuSeparator: import("react").ForwardRefExoticComponent<MenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuSeparatorProps = MenuSeparatorProps;
+/** An item that toggles a setting and keeps the menu open — `MenuCheckboxItem` shared as-is. */
+declare const ContextMenuCheckboxItem: import("react").ForwardRefExoticComponent<MenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuCheckboxItemProps = MenuCheckboxItemProps;
+/** Single-choice set for `ContextMenuRadioItem`s — `MenuRadioGroup` shared as-is. */
+declare const ContextMenuRadioGroup: import("react").ForwardRefExoticComponent<MenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuRadioGroupProps = MenuRadioGroupProps;
+/** One option of a radio group — `MenuRadioItem` shared as-is. */
+declare const ContextMenuRadioItem: import("react").ForwardRefExoticComponent<MenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuRadioItemProps = MenuRadioItemProps;
+/** Groups the parts of a nested menu; renders no HTML — `MenuSubmenuRoot` shared as-is. Keep nesting to one level. */
+declare const ContextMenuSubmenuRoot: typeof ContextMenu.SubmenuRoot;
+type ContextMenuSubmenuRootProps = MenuSubmenuRootProps;
+/** The item that opens a submenu (chevron appended, row tinted while open) — `MenuSubmenuTrigger` shared as-is. */
+declare const ContextMenuSubmenuTrigger: import("react").ForwardRefExoticComponent<MenuSubmenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuSubmenuTriggerProps = MenuSubmenuTriggerProps;
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuAlign, ContextMenuCheckboxItem, ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuGroupLabelProps, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuItemVariant, ContextMenuLinkItem, ContextMenuLinkItemProps, ContextMenuPopup, ContextMenuPopupProps, ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioGroupProps, ContextMenuRadioItem, ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuSeparatorProps, ContextMenuShortcut, ContextMenuShortcutProps, ContextMenuSide, ContextMenuSubmenuRoot, ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerProps, ContextMenuTrigger, ContextMenuTriggerProps };

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,93 @@
+import { cn } from "../../lib/cn.js";
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSubmenuRoot, MenuSubmenuTrigger, popupBehaviorClasses, popupSurfaceClasses } from "../Menu/Menu.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region src/components/ContextMenu/ContextMenu.tsx
+/**
+* Groups the context menu parts and owns the open state. The menu opens at
+* the pointer from a right click — or a long press on touch — anywhere
+* inside `ContextMenuTrigger`. Base UI's `ContextMenu.Root` re-exported
+* unchanged: `open`/`defaultOpen`/`onOpenChange(open, details)`, `disabled`,
+* `loopFocus`, `orientation`, and `highlightItemOnHover` are all available.
+* A context menu is an invisible shortcut — keep a visible path (a kebab
+* `Menu`, toolbar buttons) to the same actions.
+*/
+const ContextMenu$1 = ContextMenu.Root;
+/**
+* The region the menu acts on. It opens on right click, on the context-menu
+* key / Shift+F10 (the browser fires `contextmenu` for these while focus is
+* inside the region), and on a 500ms long press on touch — movement cancels
+* the press, and the iOS callout is suppressed automatically. Renders an
+* unstyled `<div>` around its children; make an existing element the region
+* via `render`:
+*
+*   <ContextMenuTrigger render={<tr />}>…</ContextMenuTrigger>
+*
+* While its menu is open the element carries `data-popup-open` — the hook
+* for a "this is the target" outline. Keep something inside the region
+* focusable so keyboard users can reach the menu, and consider `select-none`
+* on touch-first surfaces so a long press doesn't also start text selection.
+*/
+const ContextMenuTrigger = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+	ref,
+	className,
+	...rest
+}));
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+const adaptiveSideOffset = ({ side }) => side === "top" || side === "bottom" ? -5 : -4;
+const adaptiveAlignOffset = ({ side }) => side === "top" || side === "bottom" ? 2 : -4;
+/**
+* The floating list of items, with the portal and positioning plumbing
+* folded in. Anchored to the pointer by default — the panel's corner lands
+* at the cursor and shifts (rather than flips) at viewport edges, matching
+* OS context menus; opens with a motion-safe scale/fade. The same component
+* nests inside `ContextMenuSubmenuRoot`, where its placement defaults switch
+* to the shared submenu conventions (inline-end side, overlapped edges,
+* trigger-row alignment). The panel recipe is shared with `MenuPopup`, so
+* context menus and action menus look identical.
+*/
+const ContextMenuPopup = forwardRef(({ side, align, sideOffset = side === void 0 ? adaptiveSideOffset : 0, alignOffset = side === void 0 ? adaptiveAlignOffset : 0, collisionPadding, anchor, keepMounted = false, container, className, children, ...rest }, ref) => /* @__PURE__ */ jsx(ContextMenu.Portal, {
+	container,
+	keepMounted,
+	children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		anchor,
+		className: "z-50 select-none outline-none",
+		children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
+			ref,
+			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
+			...rest,
+			children
+		})
+	})
+}));
+ContextMenuPopup.displayName = "ContextMenuPopup";
+/** One action in the menu — `MenuItem` shared as-is: same `variant`/`inset` props, icon slot, and 32px rows. */
+const ContextMenuItem = MenuItem;
+/** A navigation entry that keeps real `<a>` semantics — `MenuLinkItem` shared as-is. */
+const ContextMenuLinkItem = MenuLinkItem;
+/** Right-aligned keyboard hint inside an item — `MenuShortcut` shared as-is (visual only; wire the key handling in the app). */
+const ContextMenuShortcut = MenuShortcut;
+/** Groups related items under a `ContextMenuGroupLabel` — `MenuGroup` shared as-is. */
+const ContextMenuGroup = MenuGroup;
+/** Heading for a group, wired via `aria-labelledby` — `MenuGroupLabel` shared as-is. */
+const ContextMenuGroupLabel = MenuGroupLabel;
+/** Divider between item groups — `MenuSeparator` shared as-is. */
+const ContextMenuSeparator = MenuSeparator;
+/** An item that toggles a setting and keeps the menu open — `MenuCheckboxItem` shared as-is. */
+const ContextMenuCheckboxItem = MenuCheckboxItem;
+/** Single-choice set for `ContextMenuRadioItem`s — `MenuRadioGroup` shared as-is. */
+const ContextMenuRadioGroup = MenuRadioGroup;
+/** One option of a radio group — `MenuRadioItem` shared as-is. */
+const ContextMenuRadioItem = MenuRadioItem;
+/** Groups the parts of a nested menu; renders no HTML — `MenuSubmenuRoot` shared as-is. Keep nesting to one level. */
+const ContextMenuSubmenuRoot = MenuSubmenuRoot;
+/** The item that opens a submenu (chevron appended, row tinted while open) — `MenuSubmenuTrigger` shared as-is. */
+const ContextMenuSubmenuTrigger = MenuSubmenuTrigger;
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger };

package/dist/components/ContextMenu/index.d.ts

@@ -0,0 +1,2 @@
+import { ContextMenu, ContextMenuAlign, ContextMenuCheckboxItem, ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuGroupLabelProps, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuItemVariant, ContextMenuLinkItem, ContextMenuLinkItemProps, ContextMenuPopup, ContextMenuPopupProps, ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioGroupProps, ContextMenuRadioItem, ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuSeparatorProps, ContextMenuShortcut, ContextMenuShortcutProps, ContextMenuSide, ContextMenuSubmenuRoot, ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, ContextMenuSubmenuTriggerProps, ContextMenuTrigger, ContextMenuTriggerProps } from "./ContextMenu.js";
+export { ContextMenu, type ContextMenuAlign, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLinkItem, type ContextMenuLinkItemProps, ContextMenuPopup, type ContextMenuPopupProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, type ContextMenuSide, ContextMenuSubmenuRoot, type ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps };

package/dist/components/ContextMenu/index.js

@@ -0,0 +1,2 @@
+import { ContextMenu, ContextMenuCheckboxItem, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger } from "./ContextMenu.js";
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,109 @@
+import { CalendarProps } from "../Calendar/Calendar.js";
+import "../Calendar/index.js";
+import { Popover, PopoverPopupProps, PopoverTrigger } from "../Popover/Popover.js";
+import "../Popover/index.js";
+import { CSSProperties, ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/DatePicker/DatePicker.d.ts
+type DatePickerVariant = "outline" | "ghost";
+type DatePickerSize = "sm" | "md" | "lg";
+type BaseTriggerProps = ComponentPropsWithoutRef<typeof PopoverTrigger>;
+type BaseRootProps = ComponentPropsWithoutRef<typeof Popover>;
+type SingleCalendarProps = Extract<CalendarProps, {
+  mode?: "single";
+}>;
+/**
+ * Calendar configuration accepted by DatePicker. Selection, locale, and
+ * disabled/read-only state stay owned by DatePicker so trigger and grid can
+ * never drift apart.
+ */
+interface DatePickerCalendarProps extends Omit<SingleCalendarProps, "mode" | "value" | "defaultValue" | "onValueChange" | "allowDeselect" | "disabled" | "readOnly" | "locale"> {}
+/** Popup positioning, focus, portal, and ARIA options forwarded to `PopoverPopup`. */
+interface DatePickerPopupProps extends Omit<PopoverPopupProps, "children" | "className"> {}
+interface DatePickerVariantsOptions {
+  /** Visual style of the trigger. */
+  variant?: DatePickerVariant;
+  /** Control height. */
+  size?: DatePickerSize;
+  /** Stretch the trigger to fill its container. */
+  fullWidth?: boolean;
+  /** Additional classes merged after the variant recipe. */
+  className?: string;
+}
+/** Class list for an element styled as the DatePicker trigger. */
+declare function datePickerVariants({ variant, size, fullWidth, className }?: DatePickerVariantsOptions): string;
+interface DatePickerProps extends Omit<BaseTriggerProps, "children" | "className" | "defaultValue" | "disabled" | "form" | "name" | "value"> {
+  /** Selected local calendar date (controlled). `null` represents no selection. */
+  value?: Date | null;
+  /** Initial selected local calendar date (uncontrolled). */
+  defaultValue?: Date | null;
+  /** Called when a day is selected, or with `null` when `allowDeselect` clears it. */
+  onValueChange?: (value: Date | null) => void;
+  /** Let selecting the chosen day again clear the value. @default false */
+  allowDeselect?: boolean;
+  /** Whether the calendar popup is open (controlled). */
+  open?: BaseRootProps["open"];
+  /** Whether the calendar popup starts open (uncontrolled). @default false */
+  defaultOpen?: BaseRootProps["defaultOpen"];
+  /** Called whenever Base UI requests that the popup open or close. */
+  onOpenChange?: BaseRootProps["onOpenChange"];
+  /** Called after the popup's opening or closing animation completes. */
+  onOpenChangeComplete?: BaseRootProps["onOpenChangeComplete"];
+  /** Close the popup after a date is selected or deselected. @default true */
+  closeOnSelect?: boolean;
+  /** Text shown while no date is selected. Localize this consumer-owned string. @default "Pick a date" */
+  placeholder?: string;
+  /**
+   * BCP-47 locale used by the trigger formatter and Calendar. Defaults to the
+   * runtime locale.
+   */
+  locale?: string;
+  /** Options passed to `Intl.DateTimeFormat` for the trigger value. @default { dateStyle: "medium" } */
+  formatOptions?: Intl.DateTimeFormatOptions;
+  /** Replace the default `Intl.DateTimeFormat` trigger text. Must return an accessible text label. */
+  formatValue?: (date: Date, locale: string | undefined) => string;
+  /** Accessible name for the calendar popup and date grid. Localize it. @default "Choose date" */
+  calendarLabel?: string;
+  /** Calendar behavior and layout options; DatePicker keeps selection/state props synchronized itself. */
+  calendarProps?: DatePickerCalendarProps;
+  /** Popover positioning, portal, focus, and ARIA options. Defaults to bottom-start alignment. */
+  popupProps?: DatePickerPopupProps;
+  /** Additional classes for the calendar popup panel. */
+  popupClassName?: string;
+  /** Visual style: `outline` is input-like; `ghost` suits toolbars and inline filters. */
+  variant?: DatePickerVariant;
+  /** Trigger height. `sm` (32px) meets WCAG 2.5.8 AA; prefer `md`/`lg` for touch-first surfaces. */
+  size?: DatePickerSize;
+  /** Stretch the trigger to fill its container. `anchorWidth` or consumer `style.width` can override it. */
+  fullWidth?: boolean;
+  /**
+   * CSS width of the trigger. Accepts pixels or any CSS width such as
+   * `"18rem"`, `"100%"`, or `"max-content"`.
+   */
+  anchorWidth?: CSSProperties["width"];
+  /** Replaces the decorative calendar icon. Pass `null` to hide it. */
+  icon?: ReactNode;
+  /** Disable the trigger and calendar; a named hidden input is omitted from form submission. */
+  disabled?: boolean;
+  /** Keep the picker openable and navigable while preventing date changes. */
+  readOnly?: boolean;
+  /**
+   * Name used to submit the selected date through a hidden input as local
+   * `YYYY-MM-DD`. Native required validation is intentionally left to the
+   * surrounding form-field abstraction.
+   */
+  name?: string;
+  /** ID of the form associated with both the trigger and the hidden date input. */
+  form?: string;
+  /** Additional classes merged onto the trigger. */
+  className?: string;
+}
+/**
+ * A localized date trigger with a Calendar in a Base UI Popover.
+ *
+ * The visible trigger text is always its baseline accessible name. Add
+ * `aria-label`/`aria-labelledby` when surrounding context (for example,
+ * "Departure date") must be part of the name.
+ */
+declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { DatePicker, DatePickerCalendarProps, DatePickerPopupProps, DatePickerProps, DatePickerSize, DatePickerVariant, DatePickerVariantsOptions, datePickerVariants };

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,145 @@
+import { cn } from "../../lib/cn.js";
+import { Calendar } from "../Calendar/Calendar.js";
+import { Popover, PopoverPopup, PopoverTrigger } from "../Popover/Popover.js";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/DatePicker/DatePicker.tsx
+const triggerBaseClasses = "inline-flex w-64 cursor-pointer items-center justify-start gap-2 rounded-md whitespace-nowrap select-none font-sans text-primary transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-empty:text-muted-foreground data-readonly:cursor-default data-invalid:border-destructive data-invalid:focus-visible:outline-destructive aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const triggerVariantClasses = {
+	outline: "border border-border bg-background hover:bg-primary-50 data-popup-open:bg-primary-50",
+	ghost: "border border-transparent bg-transparent hover:bg-primary-50 data-popup-open:bg-primary-50"
+};
+const triggerSizeClasses = {
+	sm: "h-8 px-2.5 text-sm",
+	md: "h-10 px-3 text-sm",
+	lg: "h-12 px-4 text-base [&_svg:not([class*='size-'])]:size-5"
+};
+/** Class list for an element styled as the DatePicker trigger. */
+function datePickerVariants({ variant = "outline", size = "md", fullWidth = false, className } = {}) {
+	return cn(triggerBaseClasses, triggerVariantClasses[variant], triggerSizeClasses[size], fullWidth && "w-full", className);
+}
+function CalendarIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M8 2v4M16 2v4M3 9h18" }), /* @__PURE__ */ jsx("rect", {
+			x: "3",
+			y: "4",
+			width: "18",
+			height: "17",
+			rx: "2"
+		})]
+	});
+}
+function mergeAnchorWidth(anchorWidth, style) {
+	if (anchorWidth == null) return style;
+	const anchorStyle = { width: anchorWidth };
+	return typeof style === "function" ? (state) => ({
+		...anchorStyle,
+		...style(state)
+	}) : {
+		...anchorStyle,
+		...style ?? {}
+	};
+}
+function createFormatter(locale, options) {
+	try {
+		return new Intl.DateTimeFormat(locale, options);
+	} catch {
+		return new Intl.DateTimeFormat(void 0, options);
+	}
+}
+function toLocalISODate(date) {
+	return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+const emptyDataAttribute = { "data-empty": "" };
+const readOnlyDataAttribute = { "data-readonly": "" };
+const DEFAULT_FORMAT_OPTIONS = { dateStyle: "medium" };
+/**
+* A localized date trigger with a Calendar in a Base UI Popover.
+*
+* The visible trigger text is always its baseline accessible name. Add
+* `aria-label`/`aria-labelledby` when surrounding context (for example,
+* "Departure date") must be part of the name.
+*/
+const DatePicker = forwardRef(({ value: valueProp, defaultValue = null, onValueChange, allowDeselect = false, open, defaultOpen = false, onOpenChange, onOpenChangeComplete, closeOnSelect = true, placeholder = "Pick a date", locale, formatOptions = DEFAULT_FORMAT_OPTIONS, formatValue, calendarLabel = "Choose date", calendarProps, popupProps, popupClassName, variant = "outline", size = "md", fullWidth = false, anchorWidth, icon, disabled = false, readOnly = false, name, form, type = "button", style, className, ...rest }, ref) => {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const selectedDate = valueProp !== void 0 ? valueProp : uncontrolledValue;
+	const actionsRef = useRef(null);
+	const popupRef = useRef(null);
+	const formatter = useMemo(() => createFormatter(locale, formatOptions), [locale, formatOptions]);
+	const valueText = selectedDate ? formatValue?.(selectedDate, locale) ?? formatter.format(selectedDate) : placeholder;
+	const handleValueChange = (nextValue) => {
+		if (valueProp === void 0) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue);
+		if (closeOnSelect) actionsRef.current?.close();
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		actionsRef,
+		open,
+		defaultOpen,
+		onOpenChange,
+		onOpenChangeComplete,
+		children: [
+			/* @__PURE__ */ jsxs(PopoverTrigger, {
+				ref,
+				type,
+				disabled,
+				form,
+				style: mergeAnchorWidth(anchorWidth, style),
+				className: cn(datePickerVariants({
+					variant,
+					size,
+					fullWidth
+				}), className),
+				...!selectedDate ? emptyDataAttribute : void 0,
+				...readOnly ? readOnlyDataAttribute : void 0,
+				...rest,
+				children: [icon !== null && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "inline-flex shrink-0 text-muted-foreground",
+					children: icon ?? /* @__PURE__ */ jsx(CalendarIcon, {})
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-left font-normal",
+					children: valueText
+				})]
+			}),
+			name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				form,
+				disabled: disabled || void 0,
+				value: selectedDate ? toLocalISODate(selectedDate) : ""
+			}),
+			/* @__PURE__ */ jsx(PopoverPopup, {
+				ref: popupRef,
+				"aria-label": calendarLabel,
+				align: "start",
+				initialFocus: () => popupRef.current?.querySelector("[role=\"grid\"] button[tabindex=\"0\"]") ?? true,
+				...popupProps,
+				className: cn("w-auto p-0", popupClassName),
+				children: /* @__PURE__ */ jsx(Calendar, {
+					"aria-label": calendarLabel,
+					fixedWeeks: true,
+					...calendarProps,
+					mode: "single",
+					value: selectedDate,
+					onValueChange: handleValueChange,
+					allowDeselect,
+					disabled,
+					readOnly,
+					locale
+				})
+			})
+		]
+	});
+});
+DatePicker.displayName = "DatePicker";
+//#endregion
+export { DatePicker, datePickerVariants };

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+import { DatePicker, DatePickerCalendarProps, DatePickerPopupProps, DatePickerProps, DatePickerSize, DatePickerVariant, DatePickerVariantsOptions, datePickerVariants } from "./DatePicker.js";
+export { DatePicker, type DatePickerCalendarProps, type DatePickerPopupProps, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type DatePickerVariantsOptions, datePickerVariants };

package/dist/components/DatePicker/index.js

@@ -0,0 +1,2 @@
+import { DatePicker, datePickerVariants } from "./DatePicker.js";
+export { DatePicker, datePickerVariants };

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,107 @@
+import { CalendarDateRange, CalendarProps } from "../Calendar/Calendar.js";
+import "../Calendar/index.js";
+import { Popover, PopoverPopupProps, PopoverTrigger } from "../Popover/Popover.js";
+import "../Popover/index.js";
+import { DatePickerSize, DatePickerVariant } from "../DatePicker/DatePicker.js";
+import "../DatePicker/index.js";
+import { CSSProperties, ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/DateRangePicker/DateRangePicker.d.ts
+type DateRangePickerVariant = DatePickerVariant;
+type DateRangePickerSize = DatePickerSize;
+type BaseTriggerProps = ComponentPropsWithoutRef<typeof PopoverTrigger>;
+type BaseRootProps = ComponentPropsWithoutRef<typeof Popover>;
+type RangeCalendarProps = Extract<CalendarProps, {
+  mode: "range";
+}>;
+/**
+ * Calendar configuration accepted by DateRangePicker. Selection, locale, and
+ * disabled/read-only state stay owned by DateRangePicker so trigger and grid
+ * can never drift apart.
+ */
+interface DateRangePickerCalendarProps extends Omit<RangeCalendarProps, "mode" | "value" | "defaultValue" | "onValueChange" | "disabled" | "readOnly" | "locale"> {}
+/** Popup positioning, focus, portal, and ARIA options forwarded to `PopoverPopup`. */
+interface DateRangePickerPopupProps extends Omit<PopoverPopupProps, "children" | "className"> {}
+interface DateRangePickerVariantsOptions {
+  /** Visual style of the trigger. */
+  variant?: DateRangePickerVariant;
+  /** Control height. */
+  size?: DateRangePickerSize;
+  /** Stretch the trigger to fill its container. */
+  fullWidth?: boolean;
+  /** Additional classes merged after the variant recipe. */
+  className?: string;
+}
+/** Class list for an element styled as the DateRangePicker trigger. */
+declare function dateRangePickerVariants({ variant, size, fullWidth, className }?: DateRangePickerVariantsOptions): string;
+interface DateRangePickerProps extends Omit<BaseTriggerProps, "children" | "className" | "defaultValue" | "disabled" | "form" | "name" | "value"> {
+  /** Selected inclusive local-calendar range (controlled). `null` represents no selection. */
+  value?: CalendarDateRange | null;
+  /** Initial selected inclusive local-calendar range (uncontrolled). */
+  defaultValue?: CalendarDateRange | null;
+  /** Called with an ordered, complete range after its second date is chosen. */
+  onValueChange?: (value: CalendarDateRange | null) => void;
+  /** Whether the calendar popup is open (controlled). */
+  open?: BaseRootProps["open"];
+  /** Whether the calendar popup starts open (uncontrolled). @default false */
+  defaultOpen?: BaseRootProps["defaultOpen"];
+  /** Called whenever Base UI requests that the popup open or close. */
+  onOpenChange?: BaseRootProps["onOpenChange"];
+  /** Called after the popup's opening or closing animation completes. */
+  onOpenChangeComplete?: BaseRootProps["onOpenChangeComplete"];
+  /** Close the popup after the range's second date is selected. @default true */
+  closeOnSelect?: boolean;
+  /** Text shown while no complete range is selected. Localize this consumer-owned string. @default "Pick a date range" */
+  placeholder?: string;
+  /**
+   * BCP-47 locale used by the trigger formatter and Calendar. Defaults to the
+   * runtime locale.
+   */
+  locale?: string;
+  /** Options passed to `Intl.DateTimeFormat` for the trigger range. @default { dateStyle: "medium" } */
+  formatOptions?: Intl.DateTimeFormatOptions;
+  /** Replace the default localized trigger text. Must return an accessible plain-text label. */
+  formatValue?: (range: CalendarDateRange, locale: string | undefined) => string;
+  /** Accessible name for the calendar popup and date grids. Localize it. @default "Choose date range" */
+  calendarLabel?: string;
+  /** Calendar behavior and layout options; selection/state props stay synchronized by DateRangePicker. */
+  calendarProps?: DateRangePickerCalendarProps;
+  /** Popover positioning, portal, focus, and ARIA options. Defaults to bottom-start alignment. */
+  popupProps?: DateRangePickerPopupProps;
+  /** Additional classes for the calendar popup panel. */
+  popupClassName?: string;
+  /** Visual style: `outline` is input-like; `ghost` suits toolbars and inline filters. */
+  variant?: DateRangePickerVariant;
+  /** Trigger height. `sm` (32px) meets WCAG 2.5.8 AA; prefer `md`/`lg` for touch-first surfaces. */
+  size?: DateRangePickerSize;
+  /** Stretch the trigger to fill its container. `anchorWidth` or consumer `style.width` can override it. */
+  fullWidth?: boolean;
+  /**
+   * CSS width of the trigger. Accepts pixels or any CSS width such as
+   * `"20rem"`, `"100%"`, or `"max-content"`.
+   */
+  anchorWidth?: CSSProperties["width"];
+  /** Replaces the decorative calendar icon. Pass `null` to hide it. */
+  icon?: ReactNode;
+  /** Disable the trigger and calendar; named hidden inputs are omitted from form submission. */
+  disabled?: boolean;
+  /** Keep the picker openable and navigable while preventing range changes. */
+  readOnly?: boolean;
+  /** Name used to submit the range start as a local `YYYY-MM-DD` hidden value. */
+  startName?: string;
+  /** Name used to submit the range end as a local `YYYY-MM-DD` hidden value. */
+  endName?: string;
+  /** ID of the form associated with the trigger and both hidden date inputs. */
+  form?: string;
+  /** Additional classes merged onto the trigger. */
+  className?: string;
+}
+/**
+ * A localized date-range trigger with an ArcFusion Calendar in a Base UI Popover.
+ *
+ * The visible trigger text is always its baseline accessible name. Add
+ * `aria-label`/`aria-labelledby` when surrounding context (for example,
+ * "Booking dates") must be part of the name.
+ */
+declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { DateRangePicker, DateRangePickerCalendarProps, DateRangePickerPopupProps, DateRangePickerProps, DateRangePickerSize, DateRangePickerVariant, DateRangePickerVariantsOptions, dateRangePickerVariants };