asheeui 0.6.2 → 0.6.3

package/dist/components/date-picker/DatePicker.d.ts

@@ -1,30 +1,194 @@
 import { CSSProperties } from 'react';
-import { Radius } from '../../shared/radius';
-import { Color, Variant } from '../../shared/variant';
+import { Color, Radius, Variant } from '../../shared';
 import { FieldSizeKey, FieldStatus, LabelAlign } from '../field/field-config';
 import { PickerMode } from './date-picker-config';
 export interface DatePickerProps {
+    /**
+     * The currently selected date.
+     * Use null for no selection.
+     */
     selected?: Date | null;
+    /**
+     * Callback fired when the selected date changes.
+     * Receives the new date or null when cleared.
+     */
     onChange?: (date: Date | null) => void;
+    /**
+     * The selection mode of the picker.
+     * Determines whether the picker shows date, time, or both.
+     *
+     * @default "date"
+     */
     mode?: PickerMode;
+    /**
+     * Size of the date picker.
+     * Controls the height and font size of the trigger.
+     *
+     * @default "md"
+     */
     size?: FieldSizeKey;
+    /**
+     * Corner rounding of the date picker.
+     *
+     * @default "md"
+     */
     radius?: Radius;
+    /**
+     * Visual style variant of the date picker trigger.
+     *
+     * @default "bordered"
+     */
     variant?: Variant;
+    /**
+     * Theme accent color of the date picker.
+     *
+     * @default "primary"
+     */
     color?: Color;
+    /**
+     * Validation status of the field.
+     * Controls border color and message styling.
+     */
     status?: FieldStatus;
+    /**
+     * Label text for the date picker.
+     */
     label?: string;
+    /**
+     * Alignment of the label relative to the input.
+     *
+     * @default "left"
+     */
     labelAlign?: LabelAlign;
+    /**
+     * Description text shown below the field.
+     */
     description?: string;
+    /**
+     * Validation message shown below the field.
+     * Color is determined by the status prop.
+     */
     message?: string;
+    /**
+     * Whether the field is required.
+     * Adds a required indicator to the label.
+     *
+     * @default false
+     */
     required?: boolean;
+    /**
+     * Whether the field is in a loading state.
+     * Shows a loading spinner.
+     *
+     * @default false
+     */
     isLoading?: boolean;
+    /**
+     * Whether the field is disabled.
+     * Prevents interaction and dims the field.
+     *
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Whether a clear button is shown when a value is selected.
+     *
+     * @default false
+     */
     isClearable?: boolean;
+    /**
+     * Whether future dates are disabled for selection.
+     *
+     * @default false
+     */
     disableFuture?: boolean;
+    /**
+     * Custom placeholder text.
+     * Overrides the default placeholder for the selected mode.
+     */
     placeholder?: string;
+    /**
+     * Extra CSS classes for the date picker.
+     */
     className?: string;
+    /**
+     * Optional ID for the field.
+     */
     id?: string;
+    /**
+     * Inline styles for the date picker.
+     */
     style?: CSSProperties;
 }
+/**
+ * A date, time, or datetime picker component with a calendar popover.
+ *
+ * DatePicker displays a trigger input that opens a calendar panel for
+ * selecting dates and times. It supports multiple modes (date, time,
+ * datetime), clearable values, validation states, and the standard
+ * AsheeUI cascade for visual tokens.
+ *
+ * The component automatically handles accessibility attributes including
+ * role="combobox", aria-expanded, aria-invalid, and proper focus management
+ * through Floating UI.
+ *
+ * @param props - DatePicker configuration options.
+ * @param props.selected - The currently selected date.
+ * @param props.onChange - Callback fired when the selected date changes.
+ * @param props.mode - Selection mode. Defaults to "date".
+ * @param props.size - Size of the picker. Defaults to "md".
+ * @param props.radius - Corner rounding. Defaults to "md".
+ * @param props.variant - Visual style variant. Defaults to "bordered".
+ * @param props.color - Theme accent color. Defaults to "primary".
+ * @param props.status - Validation status.
+ * @param props.label - Label text.
+ * @param props.labelAlign - Label alignment. Defaults to "left".
+ * @param props.description - Description text.
+ * @param props.message - Validation message.
+ * @param props.required - Whether the field is required.
+ * @param props.isLoading - Loading state.
+ * @param props.disabled - Disabled state.
+ * @param props.isClearable - Whether a clear button is shown.
+ * @param props.disableFuture - Whether future dates are disabled.
+ * @param props.placeholder - Custom placeholder text.
+ * @param props.className - Extra CSS classes.
+ * @param props.id - Optional ID for the field.
+ * @param props.style - Inline styles.
+ *
+ * @example
+ * ```tsx
+ * import { DatePicker } from "asheeui";
+ * import { useState } from "react";
+ *
+ * export function Example() {
+ *   const [date, setDate] = useState<Date | null>(null);
+ *
+ *   return (
+ *     <DatePicker
+ *       selected={date}
+ *       onChange={setDate}
+ *       label="Select a date"
+ *       isClearable
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // DateTime picker with time selection
+ * <DatePicker
+ *   mode="datetime"
+ *   selected={dateTime}
+ *   onChange={setDateTime}
+ *   label="Select date and time"
+ *   disableFuture
+ * />
+ * ```
+ *
+ * @see DatePickerConfig - The configuration type for component defaults.
+ * @see FieldShell - The wrapper component for label and validation.
+ * @see useAsheeConfig - Hook for accessing the global configuration.
+ */
 export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/date-picker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,KAAK,aAAa,EAMnB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,OAAO,EACb,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,sBAAsB,CAAC;AAkY9B,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAID,eAAO,MAAM,UAAU,4GAiPtB,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAsBA,OAAO,EACL,KAAK,aAAa,EAMnB,MAAM,OAAO,CAAC;AAOf,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,MAAM,EAEX,KAAK,OAAO,EACb,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,KAAK,UAAU,EAChB,MAAM,sBAAsB,CAAC;AAsa9B,MAAM,WAAW,eAAe;IAC9B;;;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;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,eAAO,MAAM,UAAU,4GA4PtB,CAAC"}

package/dist/components/date-picker/DatePicker.js

@@ -1,21 +1,21 @@
 "use client";
-import { jsx as o, jsxs as p, Fragment as me } from "react/jsx-runtime";
-import { useFloating as fe, autoUpdate as pe, offset as he, flip as ge, shift as be, useClick as xe, useDismiss as ve, useRole as ye, useInteractions as we, FloatingFocusManager as Se } from "@floating-ui/react";
-import { forwardRef as De, useId as Ne, useState as _, useCallback as Z, useMemo as Me } from "react";
-import { CalendarIcon as Ae } from "../../icons/CalendarIcon.js";
-import { ChevronLeftIcon as ke } from "../../icons/ChevronLeftIcon.js";
-import { ChevronRightIcon as Ie } from "../../icons/ChevronRightIcon.js";
-import { ClearIcon as Fe } from "../../icons/ClearIcon.js";
-import { ClockIcon as Ce } from "../../icons/ClockIcon.js";
-import { useAsheeConfig as _e } from "../../libs/context.js";
-import { RADIUS_CLASS as ee } from "../../shared/radius.js";
-import { resolveVariantClass as Re } from "../../shared/variant.js";
-import { resolveCascade as j, resolveRadiusKey as Ee, resolveClassKey as te } from "../../utils/resolve-token.js";
-import { FieldShell as $e } from "../field/FieldShell.js";
-import { FALLBACK_DATE_PICKER_CONFIG as v } from "./date-picker-config.js";
-import { CALENDAR_COLOR_CLASSES as K, DATE_PICKER_CELL_SIZE_CLASS as Le, DATE_PICKER_STATUS_BORDER_CLASS as Pe, DATE_PICKER_SIZE_CLASS as Te } from "./date-picker-styles.js";
+import { jsx as o, jsxs as h, Fragment as fe } from "react/jsx-runtime";
+import { useFloating as pe, autoUpdate as he, offset as ge, flip as be, shift as xe, size as ye, useClick as ve, useDismiss as we, useRole as Se, useInteractions as De, FloatingFocusManager as Ne } from "@floating-ui/react";
+import { forwardRef as Me, useId as Ae, useState as _, useCallback as Z, useMemo as ke } from "react";
+import { CalendarIcon as Ie } from "../../icons/CalendarIcon.js";
+import { ChevronLeftIcon as Fe } from "../../icons/ChevronLeftIcon.js";
+import { ChevronRightIcon as Ce } from "../../icons/ChevronRightIcon.js";
+import { ClearIcon as _e } from "../../icons/ClearIcon.js";
+import { ClockIcon as Re } from "../../icons/ClockIcon.js";
+import { useAsheeConfig as Ee } from "../../libs/context.js";
+import { resolveCascade as j, resolveRadiusKey as $e, resolveClassKey as ee } from "../../utils/resolve-token.js";
+import { FieldShell as Le } from "../field/FieldShell.js";
+import { FALLBACK_DATE_PICKER_CONFIG as y } from "./date-picker-config.js";
+import { CALENDAR_COLOR_CLASSES as K, DATE_PICKER_CELL_SIZE_CLASS as Pe, DATE_PICKER_STATUS_BORDER_CLASS as Te, DATE_PICKER_SIZE_CLASS as Ye } from "./date-picker-styles.js";
+import { resolveVariantClass as je } from "../../shared/variant.js";
+import { RADIUS_CLASS as te } from "../../shared/radius.js";
 import { cn as d } from "../../utils/cn.js";
-const Ye = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], je = [
+const Ke = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], Oe = [
   "January",
   "February",
   "March",
@@ -32,7 +32,7 @@ const Ye = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], je = [
 function R(e) {
   return String(e).padStart(2, "0");
 }
-function Ke(e, n) {
+function ze(e, n) {
   const l = R(e.getDate()), m = R(e.getMonth() + 1), a = e.getFullYear(), s = R(e.getHours()), u = R(e.getMinutes());
   switch (n) {
     case "date":
@@ -43,7 +43,7 @@ function Ke(e, n) {
       return `${l}/${m}/${a} ${s}:${u}`;
   }
 }
-function Oe(e) {
+function He(e) {
   switch (e) {
     case "date":
       return "Select date...";
@@ -53,7 +53,7 @@ function Oe(e) {
       return "Select date & time...";
   }
 }
-function ze(e, n) {
+function Ve(e, n) {
   const l = new Date(e, n + 1, 0).getDate(), m = new Date(e, n, 1).getDay(), a = [
     ...Array(m).fill(null),
     ...Array.from({ length: l }, (s, u) => u + 1)
@@ -69,8 +69,8 @@ function oe({
   resolvedColor: a,
   radiusClass: s
 }) {
-  const u = () => m(e >= n ? 0 : e + 1), y = () => m(e <= 0 ? n : e - 1), w = K[a] ?? K.primary;
-  return /* @__PURE__ */ p("div", { className: "flex flex-col items-center gap-0.5", children: [
+  const u = () => m(e >= n ? 0 : e + 1), v = () => m(e <= 0 ? n : e - 1), w = K[a] ?? K.primary;
+  return /* @__PURE__ */ h("div", { className: "flex flex-col items-center gap-0.5", children: [
     /* @__PURE__ */ o("span", { className: "text-[10px] uppercase tracking-widest text-foreground/70 select-none", children: l }),
     /* @__PURE__ */ o(
       "button",
@@ -105,14 +105,14 @@ function oe({
           s,
           w.hover
         ),
-        onClick: y,
+        onClick: v,
         "aria-label": `Decrement ${l}`,
         children: "▼"
       }
     )
   ] });
 }
-function He({
+function Je({
   selected: e,
   mode: n,
   isClearable: l,
@@ -120,14 +120,14 @@ function He({
   resolvedColor: a,
   radiusClass: s,
   onSelect: u,
-  onClose: y,
+  onClose: v,
   disableFuture: w = !1
 }) {
-  const c = /* @__PURE__ */ new Date(), [h, E] = _(
+  const c = /* @__PURE__ */ new Date(), [g, E] = _(
     (e == null ? void 0 : e.getFullYear()) ?? c.getFullYear()
   ), [f, D] = _(
     (e == null ? void 0 : e.getMonth()) ?? c.getMonth()
-  ), [g, $] = _((e == null ? void 0 : e.getHours()) ?? 0), [I, O] = _((e == null ? void 0 : e.getMinutes()) ?? 0), b = K[a] ?? K.primary;
+  ), [b, $] = _((e == null ? void 0 : e.getHours()) ?? 0), [I, O] = _((e == null ? void 0 : e.getMinutes()) ?? 0), x = K[a] ?? K.primary;
   function L(t, i) {
     const k = e ?? /* @__PURE__ */ new Date();
     u(
@@ -138,10 +138,10 @@ function He({
     $(t), L(t, I);
   }
   function N(t) {
-    O(t), L(g, t);
+    O(t), L(b, t);
   }
   function M(t) {
-    u(new Date(h, f, t, g, I, 0, 0)), n === "date" && y();
+    u(new Date(g, f, t, b, I, 0, 0)), n === "date" && v();
   }
   function r() {
     f === 0 ? (D(11), E((t) => t - 1)) : D((t) => t - 1);
@@ -150,10 +150,10 @@ function He({
     f === 11 ? (D(0), E((t) => t + 1)) : D((t) => t + 1);
   }
   function V(t) {
-    return !!e && e.getFullYear() === h && e.getMonth() === f && e.getDate() === t;
+    return !!e && e.getFullYear() === g && e.getMonth() === f && e.getDate() === t;
   }
   function F(t) {
-    return c.getFullYear() === h && c.getMonth() === f && c.getDate() === t;
+    return c.getFullYear() === g && c.getMonth() === f && c.getDate() === t;
   }
   const P = new Date(
     c.getFullYear(),
@@ -161,13 +161,13 @@ function He({
     c.getDate()
   );
   function C(t) {
-    return w ? new Date(h, f, t) > P : !1;
+    return w ? new Date(g, f, t) > P : !1;
   }
-  const J = !w || h < c.getFullYear() || h === c.getFullYear() && f < c.getMonth(), A = n === "date" || n === "datetime", U = n === "time" || n === "datetime", B = n !== "date" || l && !!e, T = ze(h, f), G = Me(() => T.map((t, i) => ({
+  const J = !w || g < c.getFullYear() || g === c.getFullYear() && f < c.getMonth(), A = n === "date" || n === "datetime", U = n === "time" || n === "datetime", B = n !== "date" || l && !!e, T = Ve(g, f), G = ke(() => T.map((t, i) => ({
     key: t !== null ? `day-${t}` : `empty-slot-${i}`,
     day: t
   })), [T]);
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ h(
     "div",
     {
       className: d(
@@ -175,8 +175,8 @@ function He({
         s
       ),
       children: [
-        A && /* @__PURE__ */ p(me, { children: [
-          /* @__PURE__ */ p("div", { className: "flex items-center justify-between pb-2 mb-2 border-b border-border", children: [
+        A && /* @__PURE__ */ h(fe, { children: [
+          /* @__PURE__ */ h("div", { className: "flex items-center justify-between pb-2 mb-2 border-b border-border", children: [
             /* @__PURE__ */ o(
               "button",
               {
@@ -186,15 +186,15 @@ function He({
                 className: d(
                   "p-1 text-foreground transition-colors",
                   s,
-                  b.hover
+                  x.hover
                 ),
-                children: /* @__PURE__ */ o(ke, {})
+                children: /* @__PURE__ */ o(Fe, {})
               }
             ),
-            /* @__PURE__ */ p("span", { className: "font-medium text-sm text-foreground", children: [
-              je[f],
+            /* @__PURE__ */ h("span", { className: "font-medium text-sm text-foreground", children: [
+              Oe[f],
               " ",
-              h
+              g
             ] }),
             /* @__PURE__ */ o(
               "button",
@@ -206,14 +206,14 @@ function He({
                 className: d(
                   "p-1 text-foreground transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
                   s,
-                  b.hover
+                  x.hover
                 ),
-                children: /* @__PURE__ */ o(Ie, {})
+                children: /* @__PURE__ */ o(Ce, {})
               }
             )
           ] }),
-          /* @__PURE__ */ p("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
-            Ye.map((t) => /* @__PURE__ */ o(
+          /* @__PURE__ */ h("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
+            Ke.map((t) => /* @__PURE__ */ o(
               "div",
               {
                 className: "text-xs font-semibold text-foreground/70 py-1",
@@ -230,9 +230,9 @@ function He({
                   disabled: C(i),
                   className: d(
                     "w-full flex items-center justify-center font-medium transition-colors",
-                    Le[m],
+                    Pe[m],
                     s,
-                    C(i) ? "opacity-30 cursor-not-allowed text-foreground/70" : V(i) ? d(b.bg, "font-semibold") : F(i) ? d("border", b.border, b.text) : d("text-foreground", b.hover)
+                    C(i) ? "opacity-30 cursor-not-allowed text-foreground/70" : V(i) ? d(x.bg, "font-semibold") : F(i) ? d("border", x.border, x.text) : d("text-foreground", x.hover)
                   ),
                   children: i
                 },
@@ -241,11 +241,11 @@ function He({
             )
           ] })
         ] }),
-        U && /* @__PURE__ */ p("div", { className: "flex items-center justify-center gap-4 py-3 border-t border-border mt-2", children: [
+        U && /* @__PURE__ */ h("div", { className: "flex items-center justify-center gap-4 py-3 border-t border-border mt-2", children: [
           /* @__PURE__ */ o(
             oe,
             {
-              value: g,
+              value: b,
               max: 23,
               label: "HH",
               onChange: z,
@@ -266,13 +266,13 @@ function He({
             }
           )
         ] }),
-        B && /* @__PURE__ */ p("div", { className: "flex items-center justify-between border-t border-border pt-2 mt-2", children: [
+        B && /* @__PURE__ */ h("div", { className: "flex items-center justify-between border-t border-border pt-2 mt-2", children: [
           l && e && /* @__PURE__ */ o(
             "button",
             {
               type: "button",
               onClick: () => {
-                u(null), y();
+                u(null), v();
               },
               className: "text-xs text-foreground/70 hover:text-danger transition-colors",
               children: "Clear"
@@ -282,11 +282,11 @@ function He({
             "button",
             {
               type: "button",
-              onClick: y,
+              onClick: v,
               className: d(
                 "ml-auto text-xs font-medium px-3 py-1.5 hover:opacity-90 transition-opacity",
                 s,
-                b.bg
+                x.bg
               ),
               children: "Done"
             }
@@ -296,7 +296,7 @@ function He({
     }
   );
 }
-const Ve = De(
+const Ue = Me(
   ({
     selected: e,
     onChange: n,
@@ -305,29 +305,40 @@ const Ve = De(
     radius: a,
     variant: s,
     color: u,
-    status: y,
+    status: v,
     label: w,
     labelAlign: c,
-    description: h,
+    description: g,
     message: E,
     required: f,
     isLoading: D,
-    disabled: g,
+    disabled: b,
     isClearable: $ = !1,
     disableFuture: I = !1,
     placeholder: O,
-    className: b,
+    className: x,
     id: L,
     style: z
   }, N) => {
     var X;
-    const M = _e(), r = (X = M.components) == null ? void 0 : X.datePicker, H = Ne(), V = L ?? H, [F, P] = _(!1), { refs: C, floatingStyles: J, context: A } = fe({
+    const M = Ee(), r = (X = M.components) == null ? void 0 : X.datePicker, H = Ae(), V = L ?? H, [F, P] = _(!1), { refs: C, floatingStyles: J, context: A } = pe({
       open: F,
-      onOpenChange: (x) => !g && P(x),
+      onOpenChange: (p) => !b && P(p),
       placement: "bottom-start",
-      whileElementsMounted: pe,
-      middleware: [he(6), ge(), be({ padding: 8 })]
-    }), U = xe(A, { enabled: !g }), B = ve(A), T = ye(A, { role: "dialog" }), { getReferenceProps: G, getFloatingProps: t } = we([
+      whileElementsMounted: he,
+      middleware: [
+        ge(4),
+        be(),
+        xe({ padding: 8 }),
+        ye({
+          apply({ availableHeight: p, elements: me }) {
+            Object.assign(me.floating.style, {
+              maxHeight: `${p}px`
+            });
+          }
+        })
+      ]
+    }), U = ve(A, { enabled: !b }), B = we(A), T = Se(A, { role: "dialog" }), { getReferenceProps: G, getFloatingProps: t } = De([
       U,
       B,
       T
@@ -335,80 +346,80 @@ const Ve = De(
       m,
       r == null ? void 0 : r.size,
       void 0,
-      v.size
+      y.size
     ), k = j(
       s,
       r == null ? void 0 : r.variant,
       M.defaultVariant,
-      v.variant
+      y.variant
     ), q = j(
       u,
       r == null ? void 0 : r.color,
       M.defaultColor,
-      v.color
-    ), W = Ee(
+      y.color
+    ), W = $e(
       typeof a == "string" ? a : void 0,
       typeof (r == null ? void 0 : r.radius) == "string" ? r.radius : void 0,
       M.defaultRadius,
-      v.radius
-    ), S = y ?? v.status, ne = j(
+      y.radius
+    ), S = v ?? y.status, ne = j(
       c,
       r == null ? void 0 : r.labelAlign,
       void 0,
-      v.labelAlign
-    ), Y = l ?? (r == null ? void 0 : r.mode) ?? v.mode, re = Re(
+      y.labelAlign
+    ), Y = l ?? (r == null ? void 0 : r.mode) ?? y.mode, re = je(
       k,
       S === "error" ? "danger" : S === "success" ? "success" : S === "warning" ? "warning" : q
-    ), se = S !== "default" ? Pe[S] : "", ae = k === "underlined" ? "rounded-none" : te(
+    ), se = S !== "default" ? Te[S] : "", ae = k === "underlined" ? "rounded-none" : ee(
       W,
-      ee,
-      v.radius
-    ), ie = te(
+      te,
+      y.radius
+    ), ie = ee(
       W === "full" ? "xl" : W,
-      ee,
-      v.radius
+      te,
+      y.radius
     ), le = Z(
-      (x) => n == null ? void 0 : n(x),
+      (p) => n == null ? void 0 : n(p),
       [n]
     ), ce = Z(() => P(!1), []), ue = Z(
-      (x) => {
-        x.stopPropagation(), n == null || n(null);
+      (p) => {
+        p.stopPropagation(), n == null || n(null);
       },
       [n]
-    ), de = O ?? Oe(Y), Q = e ? Ke(e, Y) : null;
+    ), de = O ?? He(Y), Q = e ? ze(e, Y) : null;
     return /* @__PURE__ */ o(
-      $e,
+      Le,
       {
         id: V,
         label: w,
         labelAlign: ne,
-        description: h,
+        description: g,
         message: E,
         status: S,
         required: f,
         isLoading: D,
-        children: /* @__PURE__ */ p("div", { className: "w-full relative inline-block", children: [
-          /* @__PURE__ */ p(
+        children: /* @__PURE__ */ h("div", { className: "w-full relative inline-block", children: [
+          /* @__PURE__ */ h(
             "div",
             {
-              ref: (x) => {
-                C.setReference(x), typeof N == "function" ? N(x) : N && (N.current = x);
+              ref: (p) => {
+                C.setReference(p), typeof N == "function" ? N(p) : N && (N.current = p);
               },
               role: "combobox",
-              tabIndex: g ? -1 : 0,
+              tabIndex: b ? -1 : 0,
               "aria-expanded": F,
               "aria-haspopup": "dialog",
               "aria-invalid": S === "error",
-              "aria-disabled": g,
+              "aria-disabled": b,
               className: d(
                 "w-full flex items-center justify-between cursor-pointer text-foreground outline-none transition-colors select-none shrink-0",
                 "focus-visible:ring-2 focus-visible:ring-offset-2",
-                g && "pointer-events-none opacity-50 cursor-not-allowed",
-                Te[i],
+                b && "pointer-events-none opacity-50 cursor-not-allowed",
+                Ye[i],
                 re,
                 se,
                 ae,
-                b
+                x
               ),
               style: z,
               ...G(),
@@ -420,23 +431,23 @@ const Ve = De(
                     children: Q ?? de
                   }
                 ),
-                /* @__PURE__ */ p("div", { className: "flex items-center gap-1.5 ml-2 shrink-0", children: [
-                  $ && e && !g && /* @__PURE__ */ o(
+                /* @__PURE__ */ h("div", { className: "flex items-center gap-1.5 ml-2 shrink-0", children: [
+                  $ && e && !b && /* @__PURE__ */ o(
                     "button",
                     {
                       type: "button",
                       onClick: ue,
                       "aria-label": "Clear selection",
                       className: "p-0.5 rounded text-foreground/70 hover:text-foreground transition-colors",
-                      children: /* @__PURE__ */ o(Fe, { className: "size-3.5" })
+                      children: /* @__PURE__ */ o(_e, { className: "size-3.5" })
                     }
                   ),
-                  /* @__PURE__ */ o("span", { className: "text-foreground/70 pointer-events-none", children: Y === "time" ? /* @__PURE__ */ o(Ce, {}) : /* @__PURE__ */ o(Ae, {}) })
+                  /* @__PURE__ */ o("span", { className: "text-foreground/70 pointer-events-none", children: Y === "time" ? /* @__PURE__ */ o(Re, {}) : /* @__PURE__ */ o(Ie, {}) })
                 ] })
               ]
             }
           ),
-          F && /* @__PURE__ */ o(Se, { context: A, modal: !1, children: /* @__PURE__ */ o(
+          F && /* @__PURE__ */ o(Ne, { context: A, modal: !1, children: /* @__PURE__ */ o(
             "div",
             {
               ref: C.setFloating,
@@ -444,7 +455,7 @@ const Ve = De(
               className: "outline-none",
               ...t(),
               children: /* @__PURE__ */ o("div", { className: "animate-in fade-in-0 zoom-in-95 duration-150 ease-out", children: /* @__PURE__ */ o(
-                He,
+                Je,
                 {
                   selected: e,
                   mode: Y,
@@ -464,7 +475,7 @@ const Ve = De(
     );
   }
 );
-Ve.displayName = "DatePicker";
+Ue.displayName = "DatePicker";
 export {
-  Ve as DatePicker
+  Ue as DatePicker
 };