@kopexa/date-picker 1.2.0 → 1.3.0

package/dist/date-picker-field.js

@@ -139,6 +139,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",
@@ -164,7 +213,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__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerView, { view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -269,9 +322,17 @@ function YearView() {
     )) }) })
   ] }) }) });
 }
+function CalendarPanel() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {})
+  ] });
+}
 function CalendarFooter({
   todayLabel,
-  clearLabel
+  clearLabel,
+  clearable = true
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -283,7 +344,7 @@ function CalendarFooter({
         children: todayLabel
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
         type: "button",
@@ -294,6 +355,34 @@ function CalendarFooter({
     )
   ] }) });
 }
+function DateTimeFooter({
+  todayLabel,
+  clearLabel,
+  clearable = true,
+  onSelectNow,
+  onClear
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onSelectNow,
+        className: `${styles.footerButton} text-foreground`,
+        children: todayLabel
+      }
+    ),
+    clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        className: `${styles.footerButton} text-destructive`,
+        children: clearLabel
+      }
+    )
+  ] });
+}
 function DatePickerField({
   label,
   value,
@@ -310,7 +399,10 @@ function DatePickerField({
   todayLabel: todayLabelProp,
   clearLabel: clearLabelProp,
   className,
-  rootProps
+  rootProps,
+  variant = "input",
+  trigger,
+  formatValue
 }) {
   var _a;
   const intl = (0, import_i18n2.useSafeIntl)();
@@ -320,6 +412,31 @@ function DatePickerField({
   const placeholder = placeholderProp != null ? placeholderProp : intl.formatMessage(
     showTime ? datePickerMessages.select_date_and_time : datePickerMessages.select_date
   );
+  if (variant === "trigger") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DateTriggerPickerField,
+      {
+        label,
+        value,
+        defaultValue,
+        onValueChange,
+        showTime,
+        clearable,
+        locale,
+        min,
+        max,
+        disabled,
+        readOnly,
+        placeholder,
+        todayLabel,
+        clearLabel,
+        className,
+        rootProps,
+        trigger,
+        formatValue
+      }
+    );
+  }
   if (showTime) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       DateTimePickerField,
@@ -356,6 +473,10 @@ function DatePickerField({
       selectionMode: "single",
       outsideDaySelectable: true,
       closeOnSelect: true,
+      parse: (input, details) => {
+        const parts = parseLocalizedDate(input, details.locale);
+        return parts ? new import_date.CalendarDate(parts.year, parts.month, parts.day) : void 0;
+      },
       className,
       ...rootProps,
       children: [
@@ -374,10 +495,15 @@ function DatePickerField({
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerContent, { className: styles.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarPanel, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CalendarFooter,
+            {
+              todayLabel,
+              clearLabel,
+              clearable
+            }
+          )
         ] }) }) })
       ]
     }
@@ -475,6 +601,22 @@ function DateTimePickerField({
       view: "day"
     });
   }, [onValueChange]);
+  const handleSelectNow = (0, import_react.useCallback)(() => {
+    const now = /* @__PURE__ */ new Date();
+    const nowValue = new import_date.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__ */ (0, import_jsx_runtime.jsxs)(
     import_date_picker.DatePickerRoot,
     {
@@ -488,13 +630,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 import_date.CalendarDateTime(
+          parts.year,
+          parts.month,
+          parts.day,
+          hour,
+          minute
+        );
+      },
       className,
       ...rootProps,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerLabel, { className: styles.label, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerControl, { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerControl, { className: "flex items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1 flex items-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerInput, { className: styles.input, placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_date_picker.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__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -505,23 +667,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__ */ (0, import_jsx_runtime.jsx)(
-            import_date_picker.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__ */ (0, import_jsx_runtime.jsx)(XIcon, { className: "size-4" })
             }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerContent, { className: styles.content, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MonthView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YearView, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFooter, { todayLabel, clearLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarPanel, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_i18n2.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] = (0, import_react.useState)(
+    () => {
+      var _a2;
+      return (_a2 = valueProp != null ? valueProp : defaultValue) != null ? _a2 : [];
+    }
+  );
+  const currentValue = (0, import_react.useMemo)(() => {
+    if (valueProp === void 0) return internalValue;
+    return valueProp;
+  }, [valueProp, internalValue]);
+  const handleDateChange = (0, import_react.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 import_date.CalendarDateTime(
+        next.year,
+        next.month,
+        next.day,
+        prevHour,
+        prevMinute
+      );
+      setInternalValue([merged]);
+      onValueChange == null ? void 0 : onValueChange({ ...details, value: [merged] });
+    },
+    [currentValue, onValueChange, showTime]
+  );
+  const handleTimeChange = (0, import_react.useCallback)(
+    (e) => {
+      const [hours, minutes] = e.currentTarget.value.split(":").map(Number);
+      const prev = currentValue[0];
+      const base = prev && "hour" in prev ? prev : prev ? new import_date.CalendarDateTime(prev.year, prev.month, prev.day, 0, 0) : (() => {
+        const now = /* @__PURE__ */ new Date();
+        return new import_date.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 = (0, import_react.useMemo)(() => {
+    if (formatValue) return formatValue;
+    const fmt = new Intl.DateTimeFormat(
+      locale,
+      showTime ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium" }
+    );
+    return (v) => fmt.format(v.toDate((0, import_date.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__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", className: styles.defaultGhostTrigger, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4 shrink-0 opacity-70" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerValueText, { placeholder, children: ({ value }) => formatter(value) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_date_picker.DatePickerRoot,
+    {
+      value: currentValue,
+      defaultValue,
+      onValueChange: handleDateChange,
+      locale,
+      min,
+      max,
+      disabled,
+      readOnly,
+      selectionMode: "single",
+      outsideDaySelectable: true,
+      closeOnSelect: !showTime,
+      className,
+      ...rootProps,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerLabel, { className: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerControl, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerTrigger, { asChild: true, children: triggerElement }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker.DatePickerPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker.DatePickerContent, { className: styles.content, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarPanel, {}),
+          showTime && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.timeRow, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "time",
+              value: timeValue,
+              onChange: handleTimeChange,
+              disabled,
+              readOnly,
+              className: styles.timeInput
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CalendarFooter,
+            {
+              todayLabel,
+              clearLabel,
+              clearable
+            }
+          )
         ] }) }) })
       ]
     }

package/dist/date-picker-field.mjs

@@ -2,7 +2,7 @@
 "use client";
 import {
   DatePickerField
-} from "./chunk-VYQ6BFFN.mjs";
+} from "./chunk-RWJEVZ4B.mjs";
 import "./chunk-HPM5Y2V6.mjs";
 import "./chunk-C7GZJJIK.mjs";
 export {

package/dist/index.d.mts

@@ -4,3 +4,4 @@ export { DatePickerField, DatePickerFieldProps } from './date-picker-field.mjs';
 export { datePickerMessages } from './date-picker-messages.mjs';
 export { DatePickerValueChangeDetails, DateValue, parseDate } from '@ark-ui/react/date-picker';
 import 'react/jsx-runtime';
+import 'react';

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export { DatePickerField, DatePickerFieldProps } from './date-picker-field.js';
 export { datePickerMessages } from './date-picker-messages.js';
 export { DatePickerValueChangeDetails, DateValue, parseDate } from '@ark-ui/react/date-picker';
 import 'react/jsx-runtime';
+import 'react';