asheeui 0.7.0 → 1.1.0

package/dist/components/breadcrumb/breadcrumb-config.d.ts

@@ -0,0 +1,41 @@
+import { Color, Size } from '../../shared';
+/**
+ * Theme configuration options for the Breadcrumb component.
+ *
+ * Set under `components.breadcrumb` in the AsheeUI config. Values feed the
+ * component-level fallback tier of the theme cascade.
+ */
+export interface BreadcrumbConfig {
+    /**
+     * Text and spacing scale of the trail.
+     *
+     * @default "md"
+     */
+    size?: Size;
+    /**
+     * Theme accent colour of the links in the trail.
+     * The current location is presented in the foreground colour instead.
+     *
+     * @default "primary"
+     */
+    color?: Color;
+}
+/**
+ * Default config values registered for the Breadcrumb component.
+ *
+ * `color` is intentionally absent so it inherits from the global
+ * `defaultColor`.
+ */
+export declare const defaultBreadcrumbConfig: BreadcrumbConfig;
+/**
+ * Hard fallback values used when no config tier provides a value.
+ * These values are used when instance props, component config,
+ * and global defaults are all undefined.
+ */
+export declare const FALLBACK_BREADCRUMB_CONFIG: Required<BreadcrumbConfig>;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        breadcrumb: BreadcrumbConfig;
+    }
+}
+//# sourceMappingURL=breadcrumb-config.d.ts.map

package/dist/components/breadcrumb/breadcrumb-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-config.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,gBAErC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,gBAAgB,CAGxD,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}

package/dist/components/breadcrumb/breadcrumb-config.js

@@ -0,0 +1,10 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/breadcrumb/breadcrumb-config.ts
+var t = { size: "md" }, n = {
+	size: "md",
+	color: "primary"
+};
+e("breadcrumb", t);
+//#endregion
+export { n as FALLBACK_BREADCRUMB_CONFIG, t as defaultBreadcrumbConfig };

package/dist/components/breadcrumb/breadcrumb-styles.d.ts

@@ -0,0 +1,28 @@
+import { Size } from '../../shared';
+/**
+ * CSS classes for the trail's text size based on size.
+ */
+export declare const BREADCRUMB_FONT_CLASS: Record<Size, string>;
+/**
+ * CSS classes for the gap between trail items based on size.
+ */
+export declare const BREADCRUMB_GAP_CLASS: Record<Size, string>;
+/**
+ * CSS classes for the separator's icon size based on size.
+ */
+export declare const BREADCRUMB_SEPARATOR_ICON_CLASS: Record<Size, string>;
+/**
+ * Base classes for the navigation landmark.
+ */
+export declare const BREADCRUMB_BASE_CLASS = "w-full";
+/**
+ * Classes for the ordered list that holds the trail.
+ */
+export declare const BREADCRUMB_LIST_CLASS = "flex items-center flex-wrap list-none p-0 m-0";
+/**
+ * Classes for the current location.
+ * It is presented in the foreground colour so it reads as the end of the
+ * trail rather than as another link.
+ */
+export declare const BREADCRUMB_CURRENT_CLASS = "inline-flex items-center gap-1.5 min-w-0 truncate font-medium text-foreground";
+//# sourceMappingURL=breadcrumb-styles.d.ts.map

package/dist/components/breadcrumb/breadcrumb-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-styles.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAItD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAIrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAIhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,WAAW,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,qBAAqB,kDACe,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,kFAC4C,CAAC"}

package/dist/components/breadcrumb/breadcrumb-styles.js

@@ -0,0 +1,17 @@
+"use client";
+//#region src/components/breadcrumb/breadcrumb-styles.ts
+var e = {
+	sm: "text-xs",
+	md: "text-sm",
+	lg: "text-base"
+}, t = {
+	sm: "gap-1",
+	md: "gap-1.5",
+	lg: "gap-2"
+}, n = {
+	sm: "[&_svg]:size-3",
+	md: "[&_svg]:size-3.5",
+	lg: "[&_svg]:size-4"
+}, r = "w-full", i = "flex items-center flex-wrap list-none p-0 m-0", a = "inline-flex items-center gap-1.5 min-w-0 truncate font-medium text-foreground";
+//#endregion
+export { r as BREADCRUMB_BASE_CLASS, a as BREADCRUMB_CURRENT_CLASS, e as BREADCRUMB_FONT_CLASS, t as BREADCRUMB_GAP_CLASS, i as BREADCRUMB_LIST_CLASS, n as BREADCRUMB_SEPARATOR_ICON_CLASS };

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

@@ -0,0 +1,3 @@
+export * from './Breadcrumb';
+export * from './breadcrumb-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,3 @@
+export * from "./Breadcrumb.js";
+export * from "./breadcrumb-config.js";
+export * from "./breadcrumb-styles.js";

package/dist/components/button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,KAAK,WAAW,EAGhB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiBf,OAAO,EAAE,KAAK,YAAY,EAA0B,MAAM,iBAAiB,CAAC;AAK5E;;;GAGG;AACH,KAAK,eAAe,GAAG,YAAY,GACjC,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE5E;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAErC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,eAAO,MAAM,MAAM,2GAuIlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,KAAK,WAAW,EAGhB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiBf,OAAO,EAAE,KAAK,YAAY,EAA0B,MAAM,iBAAiB,CAAC;AAK5E;;;GAGG;AACH,KAAK,eAAe,GAAG,YAAY,GACjC,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE5E;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAErC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,eAAO,MAAM,MAAM,2GA0IlB,CAAC"}

package/dist/components/button/Button.js

@@ -1,9 +1,9 @@
 "use client";
 "use client";
 import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { RADIUS_CLASS as n, UnderlineRadius as r } from "../../shared/radius.js";
-import { resolveVariantClass as i } from "../../shared/variant.js";
+import { RADIUS_CLASS as t, UnderlineRadius as n } from "../../shared/radius.js";
+import { resolveVariantClass as r } from "../../shared/variant.js";
+import { useAsheeConfig as i } from "../../libs/context.js";
 import { resolveCascade as a, resolveClassKey as o, resolveRadiusKey as s } from "../../utils/resolve-token.js";
 import { Spinner as c } from "../spinner/spinner.js";
 import { FALLBACK_BUTTON_CONFIG as l } from "./button-config.js";
@@ -12,13 +12,13 @@ import { forwardRef as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/button/Button.tsx
 var h = f((f, h) => {
-	let { variant: g, color: _, size: v, radius: y, animate: b, fullWidth: x, isDisabled: S, isLoading: C, icon: w, className: T, children: E, type: D = "button", onClick: O, startContent: k, endContent: A, href: j, link: M, ...N } = f, P = t(), F = P.components?.button, I = a(g, F?.variant, P.defaultVariant, l.variant), L = a(_, F?.color, P.defaultColor, l.color), R = a(v, F?.size, void 0, l.size), z = s(y, F?.radius, P.defaultRadius, l.radius), B = a(b, F?.animate, l.animate, l.animate), V = a(x, F?.fullWidth, void 0, l.fullWidth), H = w ? u[R] : d[R], U = S || C, W = !!(j || M), G = M?.component ?? (W ? "a" : "button"), { onClick: K, ...q } = M?.props ?? {}, J = (e) => {
+	let { variant: g, color: _, size: v, radius: y, animate: b, fullWidth: x, isDisabled: S, isLoading: C, icon: w, className: T, children: E, type: D = "button", onClick: O, startContent: k, endContent: A, href: j, link: M, ...N } = f, P = i(), F = P.components?.button, I = a(g, F?.variant, P.defaultVariant, l.variant), L = a(_, F?.color, P.defaultColor, l.color), R = a(v, F?.size, void 0, l.size), z = s(y, F?.radius, P.defaultRadius, l.radius), B = a(b, F?.animate, l.animate, l.animate), V = a(x, F?.fullWidth, void 0, l.fullWidth), H = w ? u[R] : d[R], U = S || C, W = !!(j || M), G = M?.component ?? (W ? "a" : "button"), { onClick: K, ...q } = M?.props ?? {}, J = (e) => {
 		if (U) {
 			e.preventDefault();
 			return;
 		}
 		O?.(e), K?.(e);
-	}, Y = e("inline-flex items-center justify-center font-medium transition-colors select-none shrink-0", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", "aria-disabled:pointer-events-none aria-disabled:opacity-50", V && "w-full", B && "motion-safe:transition-transform motion-safe:duration-100 motion-safe:active:scale-[0.99]", i(I, L), H, o(r(I, z), n, r(I, l.radius)), T);
+	}, Y = e("inline-flex items-center justify-center font-medium transition-colors select-none shrink-0", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", "aria-disabled:pointer-events-none aria-disabled:opacity-50", V && "w-full", B && "motion-safe:transition-transform motion-safe:duration-100 motion-safe:active:scale-[0.99]", r(I, L), H, o(n(I, z), t, n(I, l.radius)), T);
 	return /* @__PURE__ */ m(G, {
 		ref: h,
 		...W ? { href: j } : {
@@ -35,10 +35,13 @@ var h = f((f, h) => {
 			C && /* @__PURE__ */ p(c, { className: R }),
 			C && /* @__PURE__ */ p("span", {
 				className: "sr-only",
-				children: "Loading"
+				children: "Loading "
 			}),
+			C ? /* @__PURE__ */ p("span", {
+				className: "sr-only",
+				children: E
+			}) : E,
 			!C && k,
-			!C && E,
 			!C && A
 		]
 	});

package/dist/components/{date-picker/DatePicker.d.ts → calendar/Calendar.d.ts}

@@ -1,26 +1,26 @@
 import { InputProps } from '../input/Input';
-import { DatePickerConfig, DatePickerPickerConfig } from './date-picker-config';
+import { CalendarConfig, CalendarPickerConfig } from './calendar-config';
 /**
  * Props for the picker (calendar popover).
- * Extends DatePickerPickerConfig with instance-only props.
+ * Extends CalendarPickerConfig with instance-only props.
  */
-export interface DatePickerPickerProps extends DatePickerPickerConfig {
+export interface CalendarPickerProps extends CalendarPickerConfig {
     /**
      * Extra CSS classes for the calendar popover.
      */
     className?: string;
 }
 /**
- * Base DatePicker props excluding the picker configuration.
- * Combines DatePickerConfig (minus picker) with InputProps (minus value-related props).
+ * Base Calendar props excluding the picker configuration.
+ * Combines CalendarConfig (minus picker) with InputProps (minus value-related props).
  */
-export type BaseDatePickerProps = Omit<DatePickerConfig, "picker"> & Omit<InputProps, "onChange" | "value" | "defaultValue" | "endContent" | "startContent">;
+export type BaseCalendarProps = Omit<CalendarConfig, "picker"> & Omit<InputProps, "onChange" | "value" | "defaultValue" | "endContent" | "startContent">;
 /**
- * Configuration options for the DatePicker component.
+ * Configuration options for the Calendar component.
  * Extends InputProps but omits value-related props that are replaced
  * with date-specific equivalents.
  */
-export interface DatePickerProps extends BaseDatePickerProps {
+export interface CalendarProps extends BaseCalendarProps {
     /**
      * The currently selected date.
      * Pass null for no selection.
@@ -35,7 +35,7 @@ export interface DatePickerProps extends BaseDatePickerProps {
      * Picker configuration overrides including portal, portalTarget, and className.
      * All picker-related props should be passed through this object.
      */
-    picker?: DatePickerPickerProps;
+    picker?: CalendarPickerProps;
     /**
      * Whether a clear button is shown in the input.
      * When true, a clear button appears when a date is selected.
@@ -54,7 +54,7 @@ export interface DatePickerProps extends BaseDatePickerProps {
 /**
  * A date/time picker component with calendar popover and time selection.
  *
- * DatePicker renders an input field with a calendar popover that allows
+ * Calendar renders an input field with a calendar popover that allows
  * selecting dates and/or times. It supports date, time, and datetime modes,
  * clearable selection, and future date restrictions. The component integrates
  * with Floating UI for popover positioning and follows the standard AsheeUI
@@ -64,10 +64,10 @@ export interface DatePickerProps extends BaseDatePickerProps {
  * render at the document body level. This ensures the popover escapes CSS
  * containment, overflow clipping, and stacking context issues. The portal
  * can be disabled via the `picker.portal` prop or
- * `components.datePicker.picker.portal` in the config if the popover needs
+ * `components.calendar.picker.portal` in the config if the popover needs
  * to stay within a specific parent container.
  *
- * @param props - DatePicker configuration options.
+ * @param props - Calendar configuration options.
  * @param props.selected - Currently selected date or null.
  * @param props.onChange - Callback fired when the date changes.
  * @param props.mode - Selection mode: "date", "time", or "datetime". Defaults to "date".
@@ -89,17 +89,17 @@ export interface DatePickerProps extends BaseDatePickerProps {
  *
  * @example
  * ```tsx
- * import { DatePicker } from "asheeui";
+ * import { Calendar } from "asheeui";
  * import { useState } from "react";
  *
  * export function Example() {
  *   const [selected, setSelected] = useState<Date | null>(null);
  *
  *   return (
- *     <DatePicker
+ *     <Calendar
  *       selected={selected}
  *       onChange={setSelected}
- *       label="Select Date"
+ *       label="Dropmenu Date"
  *       isClearable
  *     />
  *   );
@@ -109,9 +109,9 @@ export interface DatePickerProps extends BaseDatePickerProps {
  * @example
  * ```tsx
  * // With datetime mode and custom picker configuration
- * <DatePicker
+ * <Calendar
  *   mode="datetime"
- *   label="Select Date and Time"
+ *   label="Dropmenu Date and Time"
  *   isClearable
  *   picker={{
  *     className: "custom-calendar",
@@ -120,9 +120,9 @@ export interface DatePickerProps extends BaseDatePickerProps {
  * />
  * ```
  *
- * @see DatePickerConfig - The configuration type for component defaults.
+ * @see CalendarConfig - The configuration type for component defaults.
  * @see Input - The underlying input component.
- * @see Calendar - The calendar popover component.
+ * @see DateGrid - The calendar popover component.
  */
-export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=DatePicker.d.ts.map
+export declare const Calendar: import('react').ForwardRefExoticComponent<CalendarProps & import('react').RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/components/calendar/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/Calendar.tsx"],"names":[],"mappings":"AA+BA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQxD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,oBAAoB,EAE1B,MAAM,mBAAmB,CAAC;AAG3B;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB;IAC/D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,GAC5D,IAAI,CACF,UAAU,EACV,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,YAAY,GAAG,cAAc,CACtE,CAAC;AAEJ;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAE7B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,eAAO,MAAM,QAAQ,4GA+VpB,CAAC"}

package/dist/components/{date-picker/DatePicker.js → calendar/Calendar.js}

@@ -2,24 +2,24 @@
 "use client";
 import { cn as e } from "../../utils/cn.js";
 import { ASHEE_LAYER as t } from "../../utils/stacking.js";
-import { useAsheeConfig as n } from "../../libs/context.js";
-import { RADIUS_CLASS as r } from "../../shared/radius.js";
+import { RADIUS_CLASS as n } from "../../shared/radius.js";
+import { useAsheeConfig as r } from "../../libs/context.js";
 import { resolveCascade as i, resolveClassKey as a, resolveRadiusKey as o } from "../../utils/resolve-token.js";
 import { Input as s } from "../input/Input.js";
-import { FALLBACK_SELECT_MENU_CONFIG as c } from "../select-menu/select-menu-config.js";
-import { useSelectFloating as l } from "../select-menu/use-select-floating.js";
+import { FALLBACK_MENU_CONFIG as c } from "../menu/menu-config.js";
+import { useMenuFloating as l } from "../menu/use-menu-floating.js";
 import { CalendarIcon as u } from "../../icons/CalendarIcon.js";
 import { ClearIcon as d } from "../../icons/ClearIcon.js";
 import { ClockIcon as ee } from "../../icons/ClockIcon.js";
-import { formatDisplay as f, getDefaultPlaceholder as p, getNewCursorPosition as m, parseDateString as h } from "./date-picker.helpers.js";
-import { Calendar as g } from "./Calendar.js";
-import { FALLBACK_DATE_PICKER_CONFIG as _ } from "./date-picker-config.js";
+import { formatDisplay as f, getDefaultPlaceholder as p, getNewCursorPosition as m, parseDateString as h } from "./calendar.helpers.js";
+import { FALLBACK_DATE_PICKER_CONFIG as g } from "./calendar-config.js";
+import { DateGrid as _ } from "./DateGrid.js";
 import { forwardRef as v, useCallback as y, useEffect as b, useId as x, useRef as S, useState as C } from "react";
 import { Fragment as te, jsx as w, jsxs as T } from "react/jsx-runtime";
 import { FloatingFocusManager as E, FloatingPortal as D } from "@floating-ui/react";
-//#region src/components/date-picker/DatePicker.tsx
+//#region src/components/calendar/Calendar.tsx
 var O = v(({ selected: v, onChange: O, mode: k, isClearable: A = !1, disableFuture: j = !1, placeholder: ne, size: M, radius: N, color: P, disabled: F, picker: I, ...L }, R) => {
-	let z = n(), B = z.components?.datePicker, V = x(), H = L.id ?? V, [U, W] = C(!1), [G, K] = C(""), q = S(null), J = i(k, B?.mode, void 0, _.mode), Y = i(I?.portal, B?.picker?.portal, void 0, c.portal), re = i(I?.portalTarget, B?.picker?.portalTarget, void 0, null), X = i(I?.lockScroll, B?.picker?.lockScroll, void 0, !0), ie = i(M, B?.size, void 0, _.size), ae = i(P, B?.color, z.defaultColor, _.color), Z = o(typeof N == "string" ? N : void 0, typeof B?.radius == "string" ? B.radius : void 0, z.defaultRadius, _.radius), oe = a(Z === "full" ? "xl" : Z, r, _.radius), { refs: Q, context: se, floatingStyles: ce, isPositioned: le, getReferenceProps: ue, getFloatingProps: de } = l({
+	let z = r(), B = z.components?.calendar, V = x(), H = L.id ?? V, [U, W] = C(!1), [G, K] = C(""), q = S(null), J = i(k, B?.mode, void 0, g.mode), Y = i(I?.portal, B?.picker?.portal, void 0, c.portal), re = i(I?.portalTarget, B?.picker?.portalTarget, void 0, null), X = i(I?.lockScroll, B?.picker?.lockScroll, void 0, !0), ie = i(M, B?.size, void 0, g.size), ae = i(P, B?.color, z.defaultColor, g.color), Z = o(typeof N == "string" ? N : void 0, typeof B?.radius == "string" ? B.radius : void 0, z.defaultRadius, g.radius), oe = a(Z === "full" ? "xl" : Z, n, g.radius), { refs: Q, context: se, floatingStyles: ce, isPositioned: le, getReferenceProps: ue, getFloatingProps: de } = l({
 		isOpen: U,
 		onOpenChange: W,
 		disabled: F,
@@ -80,7 +80,7 @@ var O = v(({ selected: v, onChange: O, mode: k, isClearable: A = !1, disableFutu
 			style: { ...ce },
 			className: e("outline-none w-max", "transition-none", le ? "animate-in fade-in-0 zoom-in-95 duration-150 ease-out" : "invisible opacity-0 pointer-events-none", I?.className),
 			...de(),
-			children: /* @__PURE__ */ w(g, {
+			children: /* @__PURE__ */ w(_, {
 				selected: v,
 				mode: J,
 				isClearable: A,
@@ -118,6 +118,6 @@ var O = v(({ selected: v, onChange: O, mode: k, isClearable: A = !1, disableFutu
 		}) : $)]
 	});
 });
-O.displayName = "DatePicker";
+O.displayName = "Calendar";
 //#endregion
-export { O as DatePicker };
+export { O as Calendar };

package/dist/components/{date-picker/Calendar.d.ts → calendar/DateGrid.d.ts}

@@ -1,7 +1,7 @@
 import { Color } from '../../shared';
 import { FieldSizeKey } from '../field/field-config';
-import { DatePickerMode } from './date-picker-config';
-interface CalendarProps {
+import { CalendarMode } from './calendar-config';
+interface DateGridProps {
     /**
      * The currently selected date.
      * Used to highlight the selected day and initialize time values.
@@ -11,7 +11,7 @@ interface CalendarProps {
      * Selection mode of the picker.
      * Controls whether the calendar, time spinners, or both are shown.
      */
-    mode: DatePickerMode;
+    mode: CalendarMode;
     /**
      * Whether a clear button is shown in the footer.
      */
@@ -50,13 +50,13 @@ interface CalendarProps {
     disableFuture?: boolean;
 }
 /**
- * Calendar popover component with month navigation and date selection.
+ * DateGrid popover component with month navigation and date selection.
  *
- * Memoized so parent-driven renders (the DatePicker popover's one-time
+ * Memoized so parent-driven renders (the Calendar popover's one-time
  * `isPositioned` flip, input typing, open/close) do not rebuild the month
  * grid. Every prop is a primitive or a stable callback, so React.memo can
  * skip those renders.
  */
-export declare const Calendar: import('react').MemoExoticComponent<({ selected, mode, isClearable, resolvedSizeKey, resolvedColor, radiusClass, onSelect, onClose, disableFuture, }: CalendarProps) => import("react").JSX.Element>;
+export declare const DateGrid: import('react').MemoExoticComponent<({ selected, mode, isClearable, resolvedSizeKey, resolvedColor, radiusClass, onSelect, onClose, disableFuture, }: DateGridProps) => import("react").JSX.Element>;
 export {};
-//# sourceMappingURL=Calendar.d.ts.map
+//# sourceMappingURL=DateGrid.d.ts.map

package/dist/components/calendar/DateGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateGrid.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/DateGrid.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAStD,UAAU,aAAa;IACrB;;;OAGG;IACH,QAAQ,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC;;;OAGG;IACH,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,eAAe,EAAE,YAAY,CAAC;IAC9B;;;OAGG;IACH,aAAa,EAAE,KAAK,CAAC;IACrB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,wJAUlB,aAAa,iCAyYd,CAAC"}

package/dist/components/calendar/DateGrid.js

@@ -0,0 +1,194 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { ChevronRightIcon as t } from "../../icons/ChevronRightIcon.js";
+import { DAYS_OF_WEEK as n, MONTHS as r, buildDayCells as ee } from "./calendar.helpers.js";
+import { ChevronLeftIcon as i } from "../../icons/ChevronLeftIcon.js";
+import { CALENDAR_COLOR_CLASSES as a, DATE_PICKER_CELL_SIZE_CLASS as o } from "./calendar-styles.js";
+import { TimeSpinner as s } from "./TimeSpinner.js";
+import { memo as c, useCallback as te, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/calendar/DateGrid.tsx
+var h = c(function({ selected: c, mode: h, isClearable: g, resolvedSizeKey: _, resolvedColor: v, radiusClass: y, onSelect: b, onClose: x, disableFuture: S = !1 }) {
+	let C = /* @__PURE__ */ new Date(), [w, T] = f(c?.getFullYear() ?? C.getFullYear()), [E, D] = f(c?.getMonth() ?? C.getMonth()), [O, ne] = f(c?.getHours() ?? 0), [k, A] = f(c?.getMinutes() ?? 0), [j, M] = f(c?.getSeconds() ?? 0), [N, P] = f(() => c ?? C), F = d({}), I = d(!1), L = (e) => `${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`, R = te((e) => {
+		P((t) => {
+			let n = new Date(t.getFullYear(), t.getMonth(), t.getDate() + e);
+			return T(n.getFullYear()), D(n.getMonth()), I.current = !0, n;
+		});
+	}, []);
+	l(() => {
+		I.current && (I.current = !1, F.current[L(N)]?.focus());
+	});
+	function z(e) {
+		switch (e.key) {
+			case "ArrowLeft":
+				e.preventDefault(), R(-1);
+				return;
+			case "ArrowRight":
+				e.preventDefault(), R(1);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), R(-7);
+				return;
+			case "ArrowDown":
+				e.preventDefault(), R(7);
+				return;
+			case "PageUp":
+				e.preventDefault(), R(-30);
+				return;
+			case "PageDown":
+				e.preventDefault(), R(30);
+				return;
+		}
+	}
+	let B = a[v] ?? a.primary;
+	function V(e, t, n) {
+		let r = c ?? /* @__PURE__ */ new Date();
+		b(new Date(r.getFullYear(), r.getMonth(), r.getDate(), e, t, n, 0));
+	}
+	function H(e) {
+		ne(e), V(e, k, j);
+	}
+	function U(e) {
+		A(e), V(O, e, j);
+	}
+	function W(e) {
+		M(e), V(O, k, e);
+	}
+	function G(e) {
+		b(new Date(w, E, e, O, k, j, 0)), h === "date" && x();
+	}
+	function K() {
+		E === 0 ? (D(11), T((e) => e - 1)) : D((e) => e - 1);
+	}
+	function re() {
+		E === 11 ? (D(0), T((e) => e + 1)) : D((e) => e + 1);
+	}
+	function q(e) {
+		return !!c && c.getFullYear() === w && c.getMonth() === E && c.getDate() === e;
+	}
+	function J(e) {
+		return C.getFullYear() === w && C.getMonth() === E && C.getDate() === e;
+	}
+	let ie = new Date(C.getFullYear(), C.getMonth(), C.getDate());
+	function Y(e) {
+		return S ? new Date(w, E, e) > ie : !1;
+	}
+	let X = !S || w < C.getFullYear() || w === C.getFullYear() && E < C.getMonth(), Z = h === "date" || h === "datetime", ae = h === "time" || h === "datetime", oe = h !== "date" || g && !!c, Q = ee(w, E), $ = u(() => Q.map((e, t) => ({
+		key: e === null ? `empty-slot-${t}` : `day-${e}`,
+		day: e
+	})), [Q]), se = u(() => {
+		let e = [];
+		for (let t = 0; t < $.length; t += 7) e.push($.slice(t, t + 7));
+		return e;
+	}, [$]);
+	return /* @__PURE__ */ m("div", {
+		className: e("bg-background border border-border/70 shadow-xl select-none p-4 w-max", y),
+		children: [/* @__PURE__ */ m("div", {
+			className: "flex flex-row",
+			children: [Z && /* @__PURE__ */ m("div", {
+				className: "flex flex-col w-[264px]",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-center justify-between pb-3 mb-2 border-b border-border/60",
+					children: [
+						/* @__PURE__ */ p("button", {
+							type: "button",
+							onClick: K,
+							"aria-label": "Previous month",
+							className: e("p-1.5 text-foreground/70 transition-all active:scale-95", "hover:text-foreground hover:bg-secondary", y),
+							children: /* @__PURE__ */ p(i, {})
+						}),
+						/* @__PURE__ */ m("span", {
+							className: "font-semibold text-sm text-foreground tracking-wide",
+							children: [
+								r[E],
+								" ",
+								w
+							]
+						}),
+						/* @__PURE__ */ p("button", {
+							type: "button",
+							onClick: re,
+							disabled: !X,
+							"aria-label": "Next month",
+							className: e("p-1.5 text-foreground/70 transition-all", X ? "hover:text-foreground hover:bg-secondary active:scale-95" : "opacity-30 cursor-not-allowed", y),
+							children: /* @__PURE__ */ p(t, {})
+						})
+					]
+				}), /* @__PURE__ */ m("table", {
+					role: "grid",
+					"aria-label": `${r[E]} ${w}`,
+					tabIndex: -1,
+					onKeyDown: z,
+					className: "w-full table-fixed border-separate border-spacing-1 text-center",
+					children: [/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ p("tr", { children: n.map((e) => /* @__PURE__ */ p("th", {
+						scope: "col",
+						className: "text-[11px] font-bold tracking-wider text-foreground/50 uppercase py-1 mb-1",
+						children: e
+					}, e)) }) }), /* @__PURE__ */ p("tbody", { children: se.map((t, n) => /* @__PURE__ */ p("tr", { children: t.map(({ key: t, day: n }) => n === null ? /* @__PURE__ */ p("td", {}, t) : /* @__PURE__ */ p("td", {
+						role: "gridcell",
+						tabIndex: -1,
+						"aria-selected": q(n),
+						"aria-current": J(n) ? "date" : void 0,
+						children: /* @__PURE__ */ p("button", {
+							ref: (e) => {
+								F.current[L(new Date(w, E, n))] = e;
+							},
+							type: "button",
+							tabIndex: N.getFullYear() === w && N.getMonth() === E && N.getDate() === n ? 0 : -1,
+							"aria-label": `${n} ${r[E]} ${w}`,
+							onClick: () => G(n),
+							disabled: Y(n),
+							className: e("w-full flex items-center justify-center font-medium transition-all duration-200", o[_], y, Y(n) ? "opacity-30 cursor-not-allowed text-foreground/50" : "active:scale-90", !Y(n) && !q(n) && !J(n) && B.hover, q(n) && e(B.bg, "font-semibold shadow-sm"), J(n) && !q(n) && e("border", B.border, B.text), !q(n) && !J(n) && "text-foreground"),
+							children: n
+						})
+					}, t)) }, t[0]?.key ?? `week-${n}`)) })]
+				})]
+			}), ae && /* @__PURE__ */ m("div", {
+				className: e("flex items-center justify-center gap-4", Z && "pl-5 ml-4 border-l border-border/60"),
+				children: [
+					/* @__PURE__ */ p(s, {
+						value: O,
+						max: 23,
+						label: "HH",
+						onChange: H,
+						resolvedColor: v,
+						radiusClass: y
+					}),
+					/* @__PURE__ */ p(s, {
+						value: k,
+						max: 59,
+						label: "MM",
+						onChange: U,
+						resolvedColor: v,
+						radiusClass: y
+					}),
+					/* @__PURE__ */ p(s, {
+						value: j,
+						max: 59,
+						label: "SS",
+						onChange: W,
+						resolvedColor: v,
+						radiusClass: y
+					})
+				]
+			})]
+		}), oe && /* @__PURE__ */ m("div", {
+			className: "flex items-center justify-between border-t border-border/60 pt-3 mt-3",
+			children: [g && c ? /* @__PURE__ */ p("button", {
+				type: "button",
+				onClick: () => {
+					b(null), x();
+				},
+				className: "text-xs font-medium text-foreground/50 hover:text-danger transition-colors active:scale-95 px-2 py-1",
+				children: "Clear"
+			}) : /* @__PURE__ */ p("div", {}), h !== "date" && /* @__PURE__ */ p("button", {
+				type: "button",
+				onClick: x,
+				className: e("ml-auto text-xs font-semibold px-4 py-2 transition-all hover:opacity-90 active:scale-95 shadow-sm", y, B.bg),
+				children: "Done"
+			})]
+		})]
+	});
+});
+//#endregion
+export { h as DateGrid };

package/dist/components/calendar/TimeSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/TimeSpinner.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAO1C,UAAU,gBAAgB;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B;;;OAGG;IACH,aAAa,EAAE,KAAK,CAAC;IACrB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,KAAK,EACL,QAAQ,EACR,aAAa,EACb,WAAW,GACZ,EAAE,gBAAgB,+BAgGlB"}

package/dist/components/{date-picker → calendar}/TimeSpinner.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn as e } from "../../utils/cn.js";
 import { ChevronDownIcon as t } from "../../icons/ChevronDownIcon.js";
-import { pad2 as n } from "./date-picker.helpers.js";
-import { CALENDAR_COLOR_CLASSES as r } from "./date-picker-styles.js";
+import { pad2 as n } from "./calendar.helpers.js";
+import { CALENDAR_COLOR_CLASSES as r } from "./calendar-styles.js";
 import { ChevronUpIcon as i } from "../../icons/ChevronUpIcon.js";
 import { useEffect as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/date-picker/TimeSpinner.tsx
+//#region src/components/calendar/TimeSpinner.tsx
 function l({ value: l, max: u, label: d, onChange: f, resolvedColor: p, radiusClass: m }) {
 	let [h, g] = o(n(l));
 	a(() => {