@kopexa/date-picker 1.2.1 → 1.3.0

package/dist/{chunk-VYQ6BFFN.mjs → chunk-RWJEVZ4B.mjs}

@@ -24,12 +24,17 @@ import {
   DatePickerTableHeader,
   DatePickerTableRow,
   DatePickerTrigger,
+  DatePickerValueText,
   DatePickerView,
   DatePickerViewControl,
   DatePickerViewTrigger
 } from "@ark-ui/react/date-picker";
 import { Portal } from "@ark-ui/react/portal";
-import { CalendarDateTime } from "@internationalized/date";
+import {
+  CalendarDate,
+  CalendarDateTime,
+  getLocalTimeZone
+} from "@internationalized/date";
 import { useSafeIntl } from "@kopexa/i18n";
 import { useCallback, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -109,6 +114,55 @@ function XIcon({ className }) {
     }
   );
 }
+function getDatePartOrder(locale) {
+  try {
+    const fmt = new Intl.DateTimeFormat(locale, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    });
+    return fmt.formatToParts(new Date(2024, 0, 1)).filter(
+      (p) => p.type === "day" || p.type === "month" || p.type === "year"
+    ).map((p) => p.type);
+  } catch {
+    return ["day", "month", "year"];
+  }
+}
+function finalizeDateParts(parts) {
+  var _a, _b, _c;
+  const day = (_a = parts.day) != null ? _a : 1;
+  const month = (_b = parts.month) != null ? _b : 1;
+  let year = (_c = parts.year) != null ? _c : (/* @__PURE__ */ new Date()).getFullYear();
+  if (year < 100) year = year < 50 ? 2e3 + year : 1900 + year;
+  if (month < 1 || month > 12) return void 0;
+  if (day < 1 || day > 31) return void 0;
+  return { year, month, day };
+}
+function parseLocalizedDate(value, locale) {
+  const trimmed = value.trim();
+  if (!trimmed) return void 0;
+  const order = getDatePartOrder(locale);
+  const segments = trimmed.split(/[./\-\s]+/).filter(Boolean);
+  if (segments.length === 3 && segments.every((s) => /^\d+$/.test(s))) {
+    const map2 = {};
+    order.forEach((field, i) => {
+      map2[field] = Number.parseInt(segments[i], 10);
+    });
+    return finalizeDateParts(map2);
+  }
+  const digits = trimmed.replace(/\D/g, "");
+  const widths = digits.length === 8 ? { day: 2, month: 2, year: 4 } : digits.length === 6 ? { day: 2, month: 2, year: 2 } : digits.length === 4 ? { day: 2, month: 2, year: 0 } : null;
+  if (!widths) return void 0;
+  let pos = 0;
+  const map = {};
+  for (const field of order) {
+    const w = widths[field];
+    if (w === 0) continue;
+    map[field] = Number.parseInt(digits.slice(pos, pos + w), 10);
+    pos += w;
+  }
+  return finalizeDateParts(map);
+}
 var styles = {
   control: "relative flex items-center",
   input: "w-full h-9 rounded-md border bg-transparent pl-3 pr-9 text-sm outline-none focus:ring-2 focus:ring-ring",
@@ -134,7 +188,11 @@ var styles = {
   footerButton: "text-sm px-2 py-1 rounded-md hover:bg-muted transition-colors",
   timeInput: "h-9 rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
   label: "text-sm font-medium",
-  timeTrigger: "flex-1 h-9 rounded-md border bg-transparent px-3 text-sm text-left hover:bg-muted transition-colors flex items-center justify-between"
+  timeTrigger: "flex-1 h-9 rounded-md border bg-transparent px-3 text-sm text-left hover:bg-muted transition-colors flex items-center justify-between",
+  defaultGhostTrigger: "inline-flex items-center gap-2 h-9 rounded-md px-2.5 text-sm font-normal text-foreground transition-colors hover:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[placeholder]:text-muted-foreground",
+  defaultGhostPlaceholder: "text-muted-foreground",
+  timeRow: "mt-2 pt-2 border-t flex items-center gap-2",
+  timeRowLabel: "text-xs text-muted-foreground"
 };
 function DayView() {
   return /* @__PURE__ */ jsx(DatePickerView, { view: "day", children: /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -239,9 +297,17 @@ function YearView() {
     )) }) })
   ] }) }) });
 }
+function CalendarPanel() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DayView, {}),
+    /* @__PURE__ */ jsx(MonthView, {}),
+    /* @__PURE__ */ jsx(YearView, {})
+  ] });
+}
 function CalendarFooter({
   todayLabel,
-  clearLabel
+  clearLabel,
+  clearable = true
 }) {
   return /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
     /* @__PURE__ */ jsx(
@@ -253,7 +319,7 @@ function CalendarFooter({
         children: todayLabel
       }
     ),
-    /* @__PURE__ */ jsx(
+    clearable && /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -264,6 +330,34 @@ function CalendarFooter({
     )
   ] }) });
 }
+function DateTimeFooter({
+  todayLabel,
+  clearLabel,
+  clearable = true,
+  onSelectNow,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onSelectNow,
+        className: `${styles.footerButton} text-foreground`,
+        children: todayLabel
+      }
+    ),
+    clearable && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        className: `${styles.footerButton} text-destructive`,
+        children: clearLabel
+      }
+    )
+  ] });
+}
 function DatePickerField({
   label,
   value,
@@ -280,7 +374,10 @@ function DatePickerField({
   todayLabel: todayLabelProp,
   clearLabel: clearLabelProp,
   className,
-  rootProps
+  rootProps,
+  variant = "input",
+  trigger,
+  formatValue
 }) {
   var _a;
   const intl = useSafeIntl();
@@ -290,6 +387,31 @@ function DatePickerField({
   const placeholder = placeholderProp != null ? placeholderProp : intl.formatMessage(
     showTime ? datePickerMessages.select_date_and_time : datePickerMessages.select_date
   );
+  if (variant === "trigger") {
+    return /* @__PURE__ */ jsx(
+      DateTriggerPickerField,
+      {
+        label,
+        value,
+        defaultValue,
+        onValueChange,
+        showTime,
+        clearable,
+        locale,
+        min,
+        max,
+        disabled,
+        readOnly,
+        placeholder,
+        todayLabel,
+        clearLabel,
+        className,
+        rootProps,
+        trigger,
+        formatValue
+      }
+    );
+  }
   if (showTime) {
     return /* @__PURE__ */ jsx(
       DateTimePickerField,
@@ -326,6 +448,10 @@ function DatePickerField({
       selectionMode: "single",
       outsideDaySelectable: true,
       closeOnSelect: true,
+      parse: (input, details) => {
+        const parts = parseLocalizedDate(input, details.locale);
+        return parts ? new CalendarDate(parts.year, parts.month, parts.day) : void 0;
+      },
       className,
       ...rootProps,
       children: [
@@ -344,10 +470,15 @@ function DatePickerField({
           ] }) : /* @__PURE__ */ jsx(DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }) })
         ] }),
         /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DatePickerPositioner, { children: /* @__PURE__ */ jsxs(DatePickerContent, { className: styles.content, children: [
-          /* @__PURE__ */ jsx(DayView, {}),
-          /* @__PURE__ */ jsx(MonthView, {}),
-          /* @__PURE__ */ jsx(YearView, {}),
-          /* @__PURE__ */ jsx(CalendarFooter, { todayLabel, clearLabel })
+          /* @__PURE__ */ jsx(CalendarPanel, {}),
+          /* @__PURE__ */ jsx(
+            CalendarFooter,
+            {
+              todayLabel,
+              clearLabel,
+              clearable
+            }
+          )
         ] }) }) })
       ]
     }
@@ -445,6 +576,22 @@ function DateTimePickerField({
       view: "day"
     });
   }, [onValueChange]);
+  const handleSelectNow = useCallback(() => {
+    const now = /* @__PURE__ */ new Date();
+    const nowValue = new CalendarDateTime(
+      now.getFullYear(),
+      now.getMonth() + 1,
+      now.getDate(),
+      now.getHours(),
+      now.getMinutes()
+    );
+    setInternalValue([nowValue]);
+    onValueChange == null ? void 0 : onValueChange({
+      value: [nowValue],
+      valueAsString: [nowValue.toString()],
+      view: "day"
+    });
+  }, [onValueChange]);
   return /* @__PURE__ */ jsxs(
     DatePickerRoot,
     {
@@ -458,13 +605,33 @@ function DateTimePickerField({
       selectionMode: "single",
       outsideDaySelectable: true,
       closeOnSelect: false,
+      parse: (input, details) => {
+        const parts = parseLocalizedDate(input, details.locale);
+        if (!parts) return void 0;
+        const prev = currentValue[0];
+        const hour = prev && "hour" in prev ? prev.hour : 0;
+        const minute = prev && "minute" in prev ? prev.minute : 0;
+        return new CalendarDateTime(
+          parts.year,
+          parts.month,
+          parts.day,
+          hour,
+          minute
+        );
+      },
       className,
       ...rootProps,
       children: [
         label && /* @__PURE__ */ jsx(DatePickerLabel, { className: styles.label, children: label }),
-        /* @__PURE__ */ jsxs(DatePickerControl, { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs(DatePickerControl, { className: "flex items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center", children: [
-            /* @__PURE__ */ jsx(DatePickerInput, { className: styles.input, placeholder }),
+            /* @__PURE__ */ jsx(
+              DatePickerInput,
+              {
+                className: "w-full h-9 rounded-l-md border border-r-0 bg-transparent pl-3 pr-9 text-sm outline-none focus:ring-2 focus:ring-ring",
+                placeholder
+              }
+            ),
             /* @__PURE__ */ jsx(DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }) })
           ] }),
           /* @__PURE__ */ jsx(
@@ -475,23 +642,174 @@ function DateTimePickerField({
               onChange: handleTimeChange,
               disabled,
               readOnly,
-              className: styles.timeInput
+              className: `h-9 border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring ${clearable && !disabled && !readOnly ? "border-r-0" : "rounded-r-md"}`
             }
           ),
           clearable && !disabled && !readOnly && /* @__PURE__ */ jsx(
-            DatePickerClearTrigger,
+            "button",
             {
-              className: "inline-flex items-center justify-center size-9 rounded-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+              type: "button",
+              className: "inline-flex items-center justify-center size-9 rounded-r-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
               onClick: handleClear,
               children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
             }
           )
         ] }),
         /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DatePickerPositioner, { children: /* @__PURE__ */ jsxs(DatePickerContent, { className: styles.content, children: [
-          /* @__PURE__ */ jsx(DayView, {}),
-          /* @__PURE__ */ jsx(MonthView, {}),
-          /* @__PURE__ */ jsx(YearView, {}),
-          /* @__PURE__ */ jsx(CalendarFooter, { todayLabel, clearLabel })
+          /* @__PURE__ */ jsx(CalendarPanel, {}),
+          /* @__PURE__ */ jsx(
+            DateTimeFooter,
+            {
+              todayLabel,
+              clearLabel,
+              clearable,
+              onSelectNow: handleSelectNow,
+              onClear: handleClear
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
+}
+function DateTriggerPickerField({
+  label,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  showTime = false,
+  clearable = true,
+  locale: localeProp,
+  min,
+  max,
+  disabled,
+  readOnly,
+  placeholder: placeholderProp,
+  todayLabel: todayLabelProp,
+  clearLabel: clearLabelProp,
+  className,
+  rootProps,
+  trigger,
+  formatValue
+}) {
+  var _a;
+  const intl = useSafeIntl();
+  const locale = (_a = localeProp != null ? localeProp : intl.locale) != null ? _a : "en-US";
+  const todayLabel = todayLabelProp != null ? todayLabelProp : intl.formatMessage(datePickerMessages.today);
+  const clearLabel = clearLabelProp != null ? clearLabelProp : intl.formatMessage(datePickerMessages.clear);
+  const placeholder = placeholderProp != null ? placeholderProp : intl.formatMessage(
+    showTime ? datePickerMessages.select_date_and_time : datePickerMessages.select_date
+  );
+  const [internalValue, setInternalValue] = useState(
+    () => {
+      var _a2;
+      return (_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : [];
+    }
+  );
+  const currentValue = useMemo(() => {
+    if (valueProp === void 0) return internalValue;
+    return valueProp;
+  }, [valueProp, internalValue]);
+  const handleDateChange = useCallback(
+    (details) => {
+      const next = details.value[0];
+      if (!showTime || !next) {
+        setInternalValue(details.value);
+        onValueChange == null ? void 0 : onValueChange(details);
+        return;
+      }
+      const prev = currentValue[0];
+      const prevHour = prev && "hour" in prev ? prev.hour : 0;
+      const prevMinute = prev && "minute" in prev ? prev.minute : 0;
+      const merged = new CalendarDateTime(
+        next.year,
+        next.month,
+        next.day,
+        prevHour,
+        prevMinute
+      );
+      setInternalValue([merged]);
+      onValueChange == null ? void 0 : onValueChange({ ...details, value: [merged] });
+    },
+    [currentValue, onValueChange, showTime]
+  );
+  const handleTimeChange = useCallback(
+    (e) => {
+      const [hours, minutes] = e.currentTarget.value.split(":").map(Number);
+      const prev = currentValue[0];
+      const base = prev && "hour" in prev ? prev : prev ? new CalendarDateTime(prev.year, prev.month, prev.day, 0, 0) : (() => {
+        const now = /* @__PURE__ */ new Date();
+        return new CalendarDateTime(
+          now.getFullYear(),
+          now.getMonth() + 1,
+          now.getDate(),
+          0,
+          0
+        );
+      })();
+      const updated = base.set({ hour: hours, minute: minutes });
+      setInternalValue([updated]);
+      onValueChange == null ? void 0 : onValueChange({
+        value: [updated],
+        valueAsString: [updated.toString()],
+        view: "day"
+      });
+    },
+    [currentValue, onValueChange]
+  );
+  const formatter = useMemo(() => {
+    if (formatValue) return formatValue;
+    const fmt = new Intl.DateTimeFormat(
+      locale,
+      showTime ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium" }
+    );
+    return (v) => fmt.format(v.toDate(getLocalTimeZone()));
+  }, [formatValue, locale, showTime]);
+  const timeValue = currentValue[0] && "hour" in currentValue[0] ? `${String(currentValue[0].hour).padStart(2, "0")}:${String(currentValue[0].minute).padStart(2, "0")}` : "";
+  const triggerElement = trigger != null ? trigger : /* @__PURE__ */ jsxs("button", { type: "button", className: styles.defaultGhostTrigger, children: [
+    /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0 opacity-70" }),
+    /* @__PURE__ */ jsx(DatePickerValueText, { placeholder, children: ({ value }) => formatter(value) })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    DatePickerRoot,
+    {
+      value: currentValue,
+      defaultValue,
+      onValueChange: handleDateChange,
+      locale,
+      min,
+      max,
+      disabled,
+      readOnly,
+      selectionMode: "single",
+      outsideDaySelectable: true,
+      closeOnSelect: !showTime,
+      className,
+      ...rootProps,
+      children: [
+        label && /* @__PURE__ */ jsx(DatePickerLabel, { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx(DatePickerControl, { children: /* @__PURE__ */ jsx(DatePickerTrigger, { asChild: true, children: triggerElement }) }),
+        /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DatePickerPositioner, { children: /* @__PURE__ */ jsxs(DatePickerContent, { className: styles.content, children: [
+          /* @__PURE__ */ jsx(CalendarPanel, {}),
+          showTime && /* @__PURE__ */ jsx("div", { className: styles.timeRow, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "time",
+              value: timeValue,
+              onChange: handleTimeChange,
+              disabled,
+              readOnly,
+              className: styles.timeInput
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            CalendarFooter,
+            {
+              todayLabel,
+              clearLabel,
+              clearable
+            }
+          )
         ] }) }) })
       ]
     }

package/dist/date-picker-field.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DatePickerValueChangeDetails, DatePickerRootProps } from '@ark-ui/react/date-picker';
 import { DateValue } from '@internationalized/date';
+import { ReactElement } from 'react';
 
 type DatePickerFieldProps = {
     /** Label text */
@@ -35,7 +36,30 @@ type DatePickerFieldProps = {
     className?: string;
     /** Additional Ark UI Root props */
     rootProps?: Partial<DatePickerRootProps>;
+    /**
+     * Visual variant.
+     * - `"input"` (default): bordered input + calendar button + optional inline time/clear
+     * - `"trigger"`: a single ghost-style button that opens the popover
+     *   with the calendar (and time picker, if `showTime`). Use `trigger`
+     *   to provide a custom trigger element.
+     */
+    variant?: "input" | "trigger";
+    /**
+     * Custom trigger element rendered in `variant="trigger"` mode. Wrapped
+     * with `DatePickerTrigger asChild`, so any clickable element works
+     * (sight Button, Chip, etc.). The element should display the value —
+     * pass `<DatePickerValueText placeholder={…} />` as its children, or
+     * use the `formatValue` prop for default formatting.
+     */
+    trigger?: ReactElement;
+    /**
+     * Custom formatter for the trigger label (only used by the default
+     * `variant="trigger"` button). Receives the selected `DateValue` and
+     * returns a display string. Defaults to `Intl.DateTimeFormat` with the
+     * picker's locale, including time when `showTime` is true.
+     */
+    formatValue?: (value: DateValue) => string;
 };
-declare function DatePickerField({ label, value, defaultValue, onValueChange, showTime, clearable, locale: localeProp, min, max, disabled, readOnly, placeholder: placeholderProp, todayLabel: todayLabelProp, clearLabel: clearLabelProp, className, rootProps, }: DatePickerFieldProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerField({ label, value, defaultValue, onValueChange, showTime, clearable, locale: localeProp, min, max, disabled, readOnly, placeholder: placeholderProp, todayLabel: todayLabelProp, clearLabel: clearLabelProp, className, rootProps, variant, trigger, formatValue, }: DatePickerFieldProps): react_jsx_runtime.JSX.Element;
 
 export { DatePickerField, type DatePickerFieldProps };

package/dist/date-picker-field.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DatePickerValueChangeDetails, DatePickerRootProps } from '@ark-ui/react/date-picker';
 import { DateValue } from '@internationalized/date';
+import { ReactElement } from 'react';
 
 type DatePickerFieldProps = {
     /** Label text */
@@ -35,7 +36,30 @@ type DatePickerFieldProps = {
     className?: string;
     /** Additional Ark UI Root props */
     rootProps?: Partial<DatePickerRootProps>;
+    /**
+     * Visual variant.
+     * - `"input"` (default): bordered input + calendar button + optional inline time/clear
+     * - `"trigger"`: a single ghost-style button that opens the popover
+     *   with the calendar (and time picker, if `showTime`). Use `trigger`
+     *   to provide a custom trigger element.
+     */
+    variant?: "input" | "trigger";
+    /**
+     * Custom trigger element rendered in `variant="trigger"` mode. Wrapped
+     * with `DatePickerTrigger asChild`, so any clickable element works
+     * (sight Button, Chip, etc.). The element should display the value —
+     * pass `<DatePickerValueText placeholder={…} />` as its children, or
+     * use the `formatValue` prop for default formatting.
+     */
+    trigger?: ReactElement;
+    /**
+     * Custom formatter for the trigger label (only used by the default
+     * `variant="trigger"` button). Receives the selected `DateValue` and
+     * returns a display string. Defaults to `Intl.DateTimeFormat` with the
+     * picker's locale, including time when `showTime` is true.
+     */
+    formatValue?: (value: DateValue) => string;
 };
-declare function DatePickerField({ label, value, defaultValue, onValueChange, showTime, clearable, locale: localeProp, min, max, disabled, readOnly, placeholder: placeholderProp, todayLabel: todayLabelProp, clearLabel: clearLabelProp, className, rootProps, }: DatePickerFieldProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerField({ label, value, defaultValue, onValueChange, showTime, clearable, locale: localeProp, min, max, disabled, readOnly, placeholder: placeholderProp, todayLabel: todayLabelProp, clearLabel: clearLabelProp, className, rootProps, variant, trigger, formatValue, }: DatePickerFieldProps): react_jsx_runtime.JSX.Element;
 
 export { DatePickerField, type DatePickerFieldProps };