asheeui 0.6.8 → 0.6.9

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

@@ -0,0 +1,224 @@
+"use client";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useState as f, useMemo as q } from "react";
+import { ChevronLeftIcon as B } from "../../icons/ChevronLeftIcon.js";
+import { ChevronRightIcon as J } from "../../icons/ChevronRightIcon.js";
+import { buildDayCells as Q, MONTHS as U, DAYS_OF_WEEK as X } from "./date-picker.helpers.js";
+import { CALENDAR_COLOR_CLASSES as L, DATE_PICKER_CELL_SIZE_CLASS as tt } from "./date-picker-styles.js";
+import { TimeSpinner as y } from "./TimeSpinner.js";
+import { cn as u } from "../../utils/cn.js";
+function ut({
+  selected: n,
+  mode: s,
+  isClearable: C,
+  resolvedSizeKey: j,
+  resolvedColor: h,
+  radiusClass: a,
+  onSelect: v,
+  onClose: w,
+  disableFuture: Y = !1
+}) {
+  const r = /* @__PURE__ */ new Date(), [l, k] = f(
+    (n == null ? void 0 : n.getFullYear()) ?? r.getFullYear()
+  ), [i, g] = f(
+    (n == null ? void 0 : n.getMonth()) ?? r.getMonth()
+  ), [b, A] = f((n == null ? void 0 : n.getHours()) ?? 0), [p, H] = f((n == null ? void 0 : n.getMinutes()) ?? 0), [x, T] = f((n == null ? void 0 : n.getSeconds()) ?? 0), m = L[h] ?? L.primary;
+  function M(t, e, Z) {
+    const S = n ?? /* @__PURE__ */ new Date();
+    v(
+      new Date(S.getFullYear(), S.getMonth(), S.getDate(), t, e, Z, 0)
+    );
+  }
+  function I(t) {
+    A(t), M(t, p, x);
+  }
+  function O(t) {
+    H(t), M(b, t, x);
+  }
+  function R(t) {
+    T(t), M(b, p, t);
+  }
+  function K(t) {
+    v(new Date(l, i, t, b, p, x, 0)), s === "date" && w();
+  }
+  function P() {
+    i === 0 ? (g(11), k((t) => t - 1)) : g((t) => t - 1);
+  }
+  function V() {
+    i === 11 ? (g(0), k((t) => t + 1)) : g((t) => t + 1);
+  }
+  function d(t) {
+    return !!n && n.getFullYear() === l && n.getMonth() === i && n.getDate() === t;
+  }
+  function N(t) {
+    return r.getFullYear() === l && r.getMonth() === i && r.getDate() === t;
+  }
+  const $ = new Date(
+    r.getFullYear(),
+    r.getMonth(),
+    r.getDate()
+  );
+  function D(t) {
+    return Y ? new Date(l, i, t) > $ : !1;
+  }
+  const F = !Y || l < r.getFullYear() || l === r.getFullYear() && i < r.getMonth(), E = s === "date" || s === "datetime", z = s === "time" || s === "datetime", G = s !== "date" || C && !!n, _ = Q(l, i), W = q(() => _.map((t, e) => ({
+    key: t !== null ? `day-${t}` : `empty-slot-${e}`,
+    day: t
+  })), [_]);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: u(
+        "bg-background border border-border/70 shadow-xl select-none p-4 w-max",
+        a
+      ),
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex flex-row", children: [
+          E && /* @__PURE__ */ c("div", { className: "flex flex-col w-[264px]", children: [
+            /* @__PURE__ */ c("div", { className: "flex items-center justify-between pb-3 mb-2 border-b border-border/60", children: [
+              /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  onClick: P,
+                  "aria-label": "Previous month",
+                  className: u(
+                    "p-1.5 text-foreground/70 transition-all active:scale-95",
+                    "hover:text-foreground hover:bg-secondary",
+                    a
+                  ),
+                  children: /* @__PURE__ */ o(B, {})
+                }
+              ),
+              /* @__PURE__ */ c("span", { className: "font-semibold text-sm text-foreground tracking-wide", children: [
+                U[i],
+                " ",
+                l
+              ] }),
+              /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  onClick: V,
+                  disabled: !F,
+                  "aria-label": "Next month",
+                  className: u(
+                    "p-1.5 text-foreground/70 transition-all",
+                    F ? "hover:text-foreground hover:bg-secondary active:scale-95" : "opacity-30 cursor-not-allowed",
+                    a
+                  ),
+                  children: /* @__PURE__ */ o(J, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ c("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
+              X.map((t) => /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "text-[11px] font-bold tracking-wider text-foreground/50 uppercase py-1 mb-1",
+                  children: t
+                },
+                t
+              )),
+              W.map(
+                ({ key: t, day: e }) => e === null ? /* @__PURE__ */ o("div", {}, t) : /* @__PURE__ */ o(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => K(e),
+                    disabled: D(e),
+                    className: u(
+                      "w-full flex items-center justify-center font-medium transition-all duration-200",
+                      tt[j],
+                      a,
+                      D(e) ? "opacity-30 cursor-not-allowed text-foreground/50" : "active:scale-90",
+                      !D(e) && !d(e) && !N(e) && m.hover,
+                      d(e) && u(m.bg, "font-semibold shadow-sm"),
+                      N(e) && !d(e) && u("border", m.border, m.text),
+                      !d(e) && !N(e) && "text-foreground"
+                    ),
+                    children: e
+                  },
+                  e
+                )
+              )
+            ] })
+          ] }),
+          z && /* @__PURE__ */ c(
+            "div",
+            {
+              className: u(
+                "flex items-center justify-center gap-4",
+                E && "pl-5 ml-4 border-l border-border/60"
+              ),
+              children: [
+                /* @__PURE__ */ o(
+                  y,
+                  {
+                    value: b,
+                    max: 23,
+                    label: "HH",
+                    onChange: I,
+                    resolvedColor: h,
+                    radiusClass: a
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  y,
+                  {
+                    value: p,
+                    max: 59,
+                    label: "MM",
+                    onChange: O,
+                    resolvedColor: h,
+                    radiusClass: a
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  y,
+                  {
+                    value: x,
+                    max: 59,
+                    label: "SS",
+                    onChange: R,
+                    resolvedColor: h,
+                    radiusClass: a
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        G && /* @__PURE__ */ c("div", { className: "flex items-center justify-between border-t border-border/60 pt-3 mt-3", children: [
+          C && n ? /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                v(null), w();
+              },
+              className: "text-xs font-medium text-foreground/50 hover:text-danger transition-colors active:scale-95 px-2 py-1",
+              children: "Clear"
+            }
+          ) : /* @__PURE__ */ o("div", {}),
+          s !== "date" && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              onClick: w,
+              className: u(
+                "ml-auto text-xs font-semibold px-4 py-2 transition-all hover:opacity-90 active:scale-95 shadow-sm",
+                a,
+                m.bg
+              ),
+              children: "Done"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ut as Calendar
+};

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

@@ -1,179 +1,90 @@
-import { CSSProperties } from 'react';
-import { Color, Radius, Variant } from '../../shared';
-import { FieldSizeKey, FieldStatus, LabelAlign } from '../field/field-config';
-import { PickerMode } from './date-picker-config';
-export interface DatePickerProps {
+import { InputProps } from '../input/Input';
+import { DatePickerConfig, PickerConfig } from './date-picker-config';
+/**
+ * Picker menu configuration that extends PickerConfig with className.
+ * Used for styling the calendar popover.
+ */
+export interface PickerMenu extends PickerConfig {
+    /**
+     * 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).
+ */
+export type BaseDatePickerProps = Omit<DatePickerConfig, "picker"> & Omit<InputProps, "onChange" | "value" | "defaultValue" | "endContent" | "startContent">;
+/**
+ * Configuration options for the DatePicker component.
+ * Extends InputProps but omits value-related props that are replaced
+ * with date-specific equivalents.
+ */
+export interface DatePickerProps extends BaseDatePickerProps {
     /**
      * The currently selected date.
-     * Use null for no selection.
+     * Pass null for no selection.
      */
     selected?: Date | null;
     /**
      * Callback fired when the selected date changes.
-     * Receives the new date or null when cleared.
+     * Receives the new date or null if 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
+     * Picker configuration overrides including portal, portalTarget, and className.
+     * All picker-related props should be passed through this object.
      */
-    disabled?: boolean;
+    picker?: PickerMenu;
     /**
-     * Whether a clear button is shown when a value is selected.
+     * Whether a clear button is shown in the input.
+     * When true, a clear button appears when a date is selected.
      *
      * @default false
      */
     isClearable?: boolean;
     /**
-     * Whether future dates are disabled for selection.
+     * Whether future dates are disabled in the calendar.
+     * When true, dates after today cannot be selected.
      *
      * @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;
-    /**
-     * Whether to render the calendar popover in a React portal.
-     * When true, the popover is rendered at the document body level.
-     * Defaults to true.
-     */
-    portal?: boolean;
-    /**
-     * Custom portal target element for the calendar popover.
-     * When portal is enabled, the popover is rendered into this element.
-     * Defaults to document.body.
-     */
-    portalTarget?: HTMLElement | null;
 }
 /**
- * A date, time, or datetime picker component with a calendar popover.
+ * A date/time picker component with calendar popover and time selection.
  *
- * 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.
+ * DatePicker 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
+ * cascade system for visual tokens.
  *
  * By default, the calendar popover uses React's createPortal to 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 `portal` prop or `components.datePicker.portal` in the config if
- * the popover needs to stay within a specific parent container.
+ * via the `picker.portal` prop or `components.datePicker.picker.portal` in
+ * the config if the popover needs to stay within a specific parent container.
  *
  * @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.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".
+ * @param props.isClearable - Whether a clear button is shown. Defaults to false.
+ * @param props.disableFuture - Whether future dates are disabled. Defaults to false.
+ * @param props.placeholder - Placeholder text.
+ * @param props.size - Size of the input. 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.disabled - Whether the input is disabled. Defaults to false.
+ * @param props.picker - Picker configuration overrides including className, portal, and portalTarget.
+ * @param props.label - Field label text.
  * @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.
- * @param props.portal - Whether to render the popover in a portal. Defaults to true.
- * @param props.portalTarget - Custom portal target element. Defaults to document.body.
+ * @param props.required - Whether the field is required. Defaults to false.
+ * @param props.isLoading - Loading state. Defaults to false.
+ * @param props.status - Validation status.
+ * @param props.labelAlign - Alignment of the label. Defaults to "left".
  *
  * @example
  * ```tsx
@@ -181,13 +92,13 @@ export interface DatePickerProps {
  * import { useState } from "react";
  *
  * export function Example() {
- *   const [date, setDate] = useState<Date | null>(null);
+ *   const [selected, setSelected] = useState<Date | null>(null);
  *
  *   return (
  *     <DatePicker
- *       selected={date}
- *       onChange={setDate}
- *       label="Select a date"
+ *       selected={selected}
+ *       onChange={setSelected}
+ *       label="Select Date"
  *       isClearable
  *     />
  *   );
@@ -196,19 +107,21 @@ export interface DatePickerProps {
  *
  * @example
  * ```tsx
- * // DateTime picker with time selection
+ * // With datetime mode and custom picker configuration
  * <DatePicker
  *   mode="datetime"
- *   selected={dateTime}
- *   onChange={setDateTime}
- *   label="Select date and time"
- *   disableFuture
+ *   label="Select Date and Time"
+ *   isClearable
+ *   picker={{
+ *     className: "custom-calendar",
+ *     portal: false,
+ *   }}
  * />
  * ```
  *
  * @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.
+ * @see Input - The underlying input component.
+ * @see Calendar - The calendar popover component.
  */
-export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLInputElement>>;
 //# 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":"AAgBA,OAAO,EACL,KAAK,aAAa,EAMnB,MAAM,OAAO,CAAC;AAQf,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;AAE/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;IAEtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,eAAO,MAAM,UAAU,4GA+QtB,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/DatePicker.tsx"],"names":[],"mappings":"AAqCA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AASxD,OAAO,EACL,KAAK,gBAAgB,EAErB,KAAK,YAAY,EAElB,MAAM,sBAAsB,CAAC;AAE9B;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,YAAY;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAChE,IAAI,CACF,UAAU,EACV,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,YAAY,GAAG,cAAc,CACtE,CAAC;AAEJ;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D;;;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,UAAU,CAAC;IAEpB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,eAAO,MAAM,UAAU,8GAiTtB,CAAC"}