@kopexa/date-picker 1.0.0

package/dist/index.js

@@ -0,0 +1,580 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CalendarDate: () => import_date2.CalendarDate,
+  CalendarDateTime: () => import_date2.CalendarDateTime,
+  DateFormatter: () => import_date2.DateFormatter,
+  DatePicker: () => date_picker_exports,
+  DatePickerField: () => DatePickerField,
+  datePickerMessages: () => datePickerMessages,
+  getLocalTimeZone: () => import_date2.getLocalTimeZone,
+  parseDate: () => import_date_picker.parseDate
+});
+module.exports = __toCommonJS(index_exports);
+var import_date2 = require("@internationalized/date");
+
+// src/date-picker.tsx
+var date_picker_exports = {};
+__export(date_picker_exports, {
+  ClearTrigger: () => import_date_picker.DatePickerClearTrigger,
+  Content: () => import_date_picker.DatePickerContent,
+  Context: () => import_date_picker.DatePickerContext,
+  Control: () => import_date_picker.DatePickerControl,
+  Input: () => import_date_picker.DatePickerInput,
+  Label: () => import_date_picker.DatePickerLabel,
+  MonthSelect: () => import_date_picker.DatePickerMonthSelect,
+  NextTrigger: () => import_date_picker.DatePickerNextTrigger,
+  Positioner: () => import_date_picker.DatePickerPositioner,
+  PresetTrigger: () => import_date_picker.DatePickerPresetTrigger,
+  PrevTrigger: () => import_date_picker.DatePickerPrevTrigger,
+  RangeText: () => import_date_picker.DatePickerRangeText,
+  Root: () => import_date_picker.DatePickerRoot,
+  Table: () => import_date_picker.DatePickerTable,
+  TableBody: () => import_date_picker.DatePickerTableBody,
+  TableCell: () => import_date_picker.DatePickerTableCell,
+  TableCellTrigger: () => import_date_picker.DatePickerTableCellTrigger,
+  TableHead: () => import_date_picker.DatePickerTableHead,
+  TableHeader: () => import_date_picker.DatePickerTableHeader,
+  TableRow: () => import_date_picker.DatePickerTableRow,
+  Trigger: () => import_date_picker.DatePickerTrigger,
+  ValueText: () => import_date_picker.DatePickerValueText,
+  View: () => import_date_picker.DatePickerView,
+  ViewControl: () => import_date_picker.DatePickerViewControl,
+  ViewTrigger: () => import_date_picker.DatePickerViewTrigger,
+  YearSelect: () => import_date_picker.DatePickerYearSelect,
+  parseDate: () => import_date_picker.parseDate
+});
+var import_date_picker = require("@ark-ui/react/date-picker");
+
+// src/date-picker-field.tsx
+var import_date_picker2 = require("@ark-ui/react/date-picker");
+var import_portal = require("@ark-ui/react/portal");
+var import_date = require("@internationalized/date");
+var import_i18n2 = require("@kopexa/i18n");
+var import_react = require("react");
+
+// src/date-picker-messages.ts
+var import_i18n = require("@kopexa/i18n");
+var datePickerMessages = (0, import_i18n.defineMessages)({
+  today: {
+    id: "date-picker.today",
+    defaultMessage: "Today",
+    description: "Button to select today's date"
+  },
+  clear: {
+    id: "date-picker.clear",
+    defaultMessage: "Clear",
+    description: "Button to clear the date"
+  },
+  open_calendar: {
+    id: "date-picker.open_calendar",
+    defaultMessage: "Open calendar",
+    description: "Aria label for calendar trigger button"
+  },
+  select_date: {
+    id: "date-picker.select_date",
+    defaultMessage: "Select date",
+    description: "Placeholder for date input"
+  },
+  select_date_and_time: {
+    id: "date-picker.select_date_and_time",
+    defaultMessage: "Select date and time",
+    description: "Placeholder for date+time input"
+  }
+});
+
+// src/date-picker-field.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CalendarIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 2v4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 2v4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 10h18" })
+      ]
+    }
+  );
+}
+function ChevronLeftIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m15 18-6-6 6-6" })
+    }
+  );
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function XIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+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",
+  inputWithClear: "w-full h-9 rounded-md border bg-transparent pl-3 pr-16 text-sm outline-none focus:ring-2 focus:ring-ring",
+  trigger: "absolute right-0 inline-flex items-center justify-center size-9 text-muted-foreground hover:text-foreground transition-colors",
+  triggerWithClear: "inline-flex items-center justify-center size-9 text-muted-foreground hover:text-foreground transition-colors",
+  clearTrigger: "inline-flex items-center justify-center size-9 text-muted-foreground hover:text-foreground transition-colors",
+  iconButtons: "absolute right-0 flex items-center",
+  content: "z-50 bg-popover text-popover-foreground rounded-lg border shadow-md p-3 outline-none",
+  viewControl: "flex items-center justify-between mb-2",
+  navButton: "inline-flex items-center justify-center size-8 rounded-md hover:bg-muted transition-colors",
+  viewTrigger: "text-sm font-medium hover:bg-muted px-2 py-1 rounded-md transition-colors",
+  table: "w-full border-collapse",
+  tableRow: "flex",
+  tableHeader: "flex-1 text-center text-xs text-muted-foreground font-medium py-1.5",
+  tableCell: "flex-1 text-center p-0",
+  tableCellTrigger: "inline-flex items-center justify-center size-9 text-sm rounded-md transition-colors hover:bg-muted data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[today]:font-bold data-[outside-range]:text-muted-foreground/40 data-[disabled]:text-muted-foreground/30 data-[disabled]:line-through data-[disabled]:pointer-events-none",
+  monthCell: "flex-1 text-center p-0.5",
+  monthCellTrigger: "inline-flex items-center justify-center w-full py-2.5 px-3 text-sm rounded-md transition-colors hover:bg-muted data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:text-muted-foreground/30 data-[disabled]:pointer-events-none",
+  yearCell: "flex-1 text-center p-0.5",
+  yearCellTrigger: "inline-flex items-center justify-center w-full py-2 text-sm rounded-md transition-colors hover:bg-muted data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:text-muted-foreground/30 data-[disabled]:pointer-events-none",
+  footer: "flex items-center gap-1 pt-2 mt-2 border-t",
+  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"
+};
+function DayView() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerView, { view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerViewControl, { className: styles.viewControl, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerPrevTrigger, { className: styles.navButton, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeftIcon, { className: "size-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerViewTrigger, { className: styles.viewTrigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerRangeText, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerNextTrigger, { className: styles.navButton, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRightIcon, { className: "size-4" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerTable, { className: styles.table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTableRow, { className: styles.tableRow, children: api.weekDays.map((weekDay, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_date_picker2.DatePickerTableHeader,
+        {
+          className: styles.tableHeader,
+          children: weekDay.short
+        },
+        i
+      )) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTableBody, { children: api.weeks.map((week, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_date_picker2.DatePickerTableRow,
+        {
+          className: styles.tableRow,
+          children: week.map((day, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_date_picker2.DatePickerTableCell,
+            {
+              value: day,
+              className: styles.tableCell,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_date_picker2.DatePickerTableCellTrigger,
+                {
+                  className: styles.tableCellTrigger,
+                  children: day.day
+                }
+              )
+            },
+            j
+          ))
+        },
+        i
+      )) })
+    ] })
+  ] }) }) });
+}
+function MonthView() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerView, { view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerViewControl, { className: styles.viewControl, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerPrevTrigger, { className: styles.navButton, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeftIcon, { className: "size-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerViewTrigger, { className: styles.viewTrigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerRangeText, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerNextTrigger, { className: styles.navButton, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRightIcon, { className: "size-4" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTable, { className: styles.table, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTableBody, { children: api.getMonthsGrid({ columns: 3, format: "short" }).map((months, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_date_picker2.DatePickerTableRow,
+      {
+        className: styles.tableRow,
+        children: months.map((month, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_date_picker2.DatePickerTableCell,
+          {
+            value: month.value,
+            className: styles.monthCell,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_date_picker2.DatePickerTableCellTrigger,
+              {
+                className: styles.monthCellTrigger,
+                children: month.label
+              }
+            )
+          },
+          j
+        ))
+      },
+      i
+    )) }) })
+  ] }) }) });
+}
+function YearView() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerView, { view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerViewControl, { className: styles.viewControl, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerPrevTrigger, { className: styles.navButton, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeftIcon, { className: "size-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerViewTrigger, { className: styles.viewTrigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerRangeText, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerNextTrigger, { className: styles.navButton, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRightIcon, { className: "size-4" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTable, { className: styles.table, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTableBody, { children: api.getYearsGrid({ columns: 4 }).map((years, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_date_picker2.DatePickerTableRow,
+      {
+        className: styles.tableRow,
+        children: years.map((year, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_date_picker2.DatePickerTableCell,
+          {
+            value: year.value,
+            className: styles.yearCell,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_date_picker2.DatePickerTableCellTrigger,
+              {
+                className: styles.yearCellTrigger,
+                children: year.label
+              }
+            )
+          },
+          j
+        ))
+      },
+      i
+    )) }) })
+  ] }) }) });
+}
+function CalendarFooter({
+  todayLabel,
+  clearLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerContext, { children: (api) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.footer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => api.selectToday(),
+        className: `${styles.footerButton} text-foreground`,
+        children: todayLabel
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => api.clearValue(),
+        className: `${styles.footerButton} text-destructive`,
+        children: clearLabel
+      }
+    )
+  ] }) });
+}
+function DatePickerField({
+  label,
+  value,
+  defaultValue,
+  onValueChange,
+  showTime = false,
+  clearable = true,
+  locale: localeProp,
+  min,
+  max,
+  disabled,
+  readOnly,
+  placeholder: placeholderProp,
+  todayLabel: todayLabelProp,
+  clearLabel: clearLabelProp,
+  className,
+  rootProps
+}) {
+  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
+  );
+  if (showTime) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DateTimePickerField,
+      {
+        label,
+        value,
+        defaultValue,
+        onValueChange,
+        clearable,
+        locale,
+        min,
+        max,
+        disabled,
+        readOnly,
+        placeholder,
+        todayLabel,
+        clearLabel,
+        className,
+        rootProps
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_date_picker2.DatePickerRoot,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      locale,
+      min,
+      max,
+      disabled,
+      readOnly,
+      selectionMode: "single",
+      closeOnSelect: true,
+      className,
+      ...rootProps,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerLabel, { className: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerControl, { className: styles.control, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_date_picker2.DatePickerInput,
+            {
+              className: clearable ? styles.inputWithClear : styles.input,
+              placeholder
+            }
+          ),
+          clearable && !disabled && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.iconButtons, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerClearTrigger, { className: styles.clearTrigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, { className: "size-4" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTrigger, { className: styles.triggerWithClear, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.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_picker2.DatePickerPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.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 })
+        ] }) }) })
+      ]
+    }
+  );
+}
+function DateTimePickerField({
+  label,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  clearable = true,
+  locale: localeProp,
+  min,
+  max,
+  disabled,
+  readOnly,
+  placeholder: placeholderProp,
+  todayLabel: todayLabelProp,
+  clearLabel: clearLabelProp,
+  className,
+  rootProps
+}) {
+  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(datePickerMessages.select_date_and_time);
+  const [internalValue, setInternalValue] = (0, import_react.useState)(() => {
+    const initial = valueProp != null ? valueProp : defaultValue;
+    if (!initial || initial.length === 0) return [];
+    const v = initial[0];
+    if ("hour" in v) return [v];
+    return [new import_date.CalendarDateTime(v.year, v.month, v.day, 0, 0, 0)];
+  });
+  const currentValue = (0, import_react.useMemo)(() => {
+    if (valueProp === void 0) return internalValue;
+    if (!valueProp || valueProp.length === 0) return [];
+    const v = valueProp[0];
+    if ("hour" in v) return [v];
+    return [new import_date.CalendarDateTime(v.year, v.month, v.day, 0, 0, 0)];
+  }, [valueProp, internalValue]);
+  const handleDateChange = (0, import_react.useCallback)(
+    (details) => {
+      var _a2;
+      const newDate = details.value[0];
+      if (!newDate) {
+        setInternalValue([]);
+        onValueChange == null ? void 0 : onValueChange(details);
+        return;
+      }
+      const prevTime = (_a2 = currentValue[0]) != null ? _a2 : { hour: 0, minute: 0, second: 0 };
+      const merged = new import_date.CalendarDateTime(
+        newDate.year,
+        newDate.month,
+        newDate.day,
+        "hour" in prevTime ? prevTime.hour : 0,
+        "minute" in prevTime ? prevTime.minute : 0,
+        "second" in prevTime ? prevTime.second : 0
+      );
+      setInternalValue([merged]);
+      onValueChange == null ? void 0 : onValueChange({ ...details, value: [merged] });
+    },
+    [currentValue, onValueChange]
+  );
+  const timeValue = currentValue[0] ? `${String(currentValue[0].hour).padStart(2, "0")}:${String(currentValue[0].minute).padStart(2, "0")}` : "";
+  const handleTimeChange = (0, import_react.useCallback)(
+    (e) => {
+      var _a2;
+      const [hours, minutes] = e.currentTarget.value.split(":").map(Number);
+      const now = /* @__PURE__ */ new Date();
+      const fallback = new import_date.CalendarDateTime(
+        now.getFullYear(),
+        now.getMonth() + 1,
+        now.getDate(),
+        0,
+        0
+      );
+      const current = (_a2 = currentValue[0]) != null ? _a2 : fallback;
+      const updated = current.set({ hour: hours, minute: minutes });
+      setInternalValue([updated]);
+      onValueChange == null ? void 0 : onValueChange({
+        value: [updated],
+        valueAsString: [updated.toString()],
+        view: "day"
+      });
+    },
+    [currentValue, onValueChange]
+  );
+  const handleClear = (0, import_react.useCallback)(() => {
+    setInternalValue([]);
+    onValueChange == null ? void 0 : onValueChange({
+      value: [],
+      valueAsString: [],
+      view: "day"
+    });
+  }, [onValueChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_date_picker2.DatePickerRoot,
+    {
+      value: currentValue,
+      onValueChange: handleDateChange,
+      locale,
+      min,
+      max,
+      disabled,
+      readOnly,
+      selectionMode: "single",
+      closeOnSelect: false,
+      className,
+      ...rootProps,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerLabel, { className: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.DatePickerControl, { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative flex-1 flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerInput, { className: styles.input, placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_date_picker2.DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, { className: "size-4" }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "time",
+              value: timeValue,
+              onChange: handleTimeChange,
+              disabled,
+              readOnly,
+              className: styles.timeInput
+            }
+          ),
+          clearable && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_date_picker2.DatePickerClearTrigger,
+            {
+              className: "inline-flex items-center justify-center size-9 rounded-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_picker2.DatePickerPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_date_picker2.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 })
+        ] }) }) })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CalendarDate,
+  CalendarDateTime,
+  DateFormatter,
+  DatePicker,
+  DatePickerField,
+  datePickerMessages,
+  getLocalTimeZone,
+  parseDate
+});

package/dist/index.mjs

@@ -0,0 +1,30 @@
+"use client";
+import {
+  DatePickerField
+} from "./chunk-2C5V7ODF.mjs";
+import {
+  datePickerMessages
+} from "./chunk-HPM5Y2V6.mjs";
+import {
+  date_picker_exports,
+  parseDate
+} from "./chunk-UD6PYKLX.mjs";
+import "./chunk-C7GZJJIK.mjs";
+
+// src/index.ts
+import {
+  CalendarDate,
+  CalendarDateTime,
+  DateFormatter,
+  getLocalTimeZone
+} from "@internationalized/date";
+export {
+  CalendarDate,
+  CalendarDateTime,
+  DateFormatter,
+  date_picker_exports as DatePicker,
+  DatePickerField,
+  datePickerMessages,
+  getLocalTimeZone,
+  parseDate
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@kopexa/date-picker",
+  "version": "1.0.0",
+  "description": "DatePicker component for selecting dates and times",
+  "keywords": [
+    "date-picker",
+    "datetime",
+    "calendar"
+  ],
+  "author": "Kopexa <hello@kopexa.com>",
+  "homepage": "https://kopexa.com",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kopexa-grc/sight.git",
+    "directory": "packages/components/date-picker"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0-rc.0",
+    "react-dom": ">=19.0.0-rc.0"
+  },
+  "dependencies": {
+    "@ark-ui/react": "^5.35.0",
+    "@internationalized/date": "^3.12.0",
+    "@kopexa/i18n": "17.13.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}