@refraction-ui/react 0.16.1 → 0.16.2

package/dist/index.js

@@ -1140,14 +1140,14 @@ function createCalendar(props = {}) {
   const gridId = generateId("rfr-calendar");
   const labelId = generateId("rfr-calendar-label");
   function isDateDisabled(date) {
-    if (minDate && date < startOfDay2(minDate)) return true;
-    if (maxDate && date > endOfDay2(maxDate)) return true;
+    if (minDate && date < startOfDay(minDate)) return true;
+    if (maxDate && date > endOfDay(maxDate)) return true;
     return disabledDates.some((d) => isSameDay(d, date));
   }
-  function startOfDay2(date) {
+  function startOfDay(date) {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
   }
-  function endOfDay2(date) {
+  function endOfDay(date) {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
   }
   function buildDays() {
@@ -12109,214 +12109,8 @@ var Checkbox = React11.forwardRef(
 Checkbox.displayName = "Checkbox";
 
 // ../date-picker/dist/index.js
-function isSameDay2(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function startOfMonth2(date) {
-  return new Date(date.getFullYear(), date.getMonth(), 1);
-}
-function startOfDay(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-}
-function endOfDay(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
-}
-var DAY_NAMES2 = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-function padZero(n) {
-  return n < 10 ? `0${n}` : `${n}`;
-}
-function formatDate(date, format, showTime) {
-  if (!date) return "";
-  const year = date.getFullYear();
-  const month = padZero(date.getMonth() + 1);
-  const day = padZero(date.getDate());
-  const hours = padZero(date.getHours());
-  const minutes = padZero(date.getMinutes());
-  let result = format.replace("YYYY", String(year)).replace("MM", month).replace("DD", day);
-  if (showTime) {
-    result = result.replace("HH", hours).replace("mm", minutes);
-  }
-  return result;
-}
-function createDatePicker(props = {}) {
-  const {
-    value,
-    onChange,
-    minDate,
-    maxDate,
-    showTime = false,
-    format = showTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD",
-    placeholder = "Select date...",
-    open: controlledOpen,
-    defaultOpen = false,
-    onOpenChange
-  } = props;
-  const today = /* @__PURE__ */ new Date();
-  let internalOpen = controlledOpen ?? defaultOpen;
-  let currentMonth = value ? startOfMonth2(value) : startOfMonth2(today);
-  let view = "calendar";
-  const hours = value ? value.getHours() : 0;
-  const minutes = value ? value.getMinutes() : 0;
-  const triggerId = generateId("rfr-datepicker-trigger");
-  const dropdownId = generateId("rfr-datepicker-dropdown");
-  const gridId = generateId("rfr-datepicker-grid");
-  const labelId = generateId("rfr-datepicker-label");
-  function isOpen() {
-    if (controlledOpen !== void 0) return controlledOpen;
-    return internalOpen;
-  }
-  function isDateDisabled(date) {
-    if (minDate && date < startOfDay(minDate)) return true;
-    if (maxDate && date > endOfDay(maxDate)) return true;
-    return false;
-  }
-  function buildDays() {
-    const year = currentMonth.getFullYear();
-    const month = currentMonth.getMonth();
-    const first = new Date(year, month, 1);
-    const startDow = first.getDay();
-    const gridStart = new Date(year, month, 1 - startDow);
-    const days = [];
-    for (let i = 0; i < 42; i++) {
-      const date = new Date(
-        gridStart.getFullYear(),
-        gridStart.getMonth(),
-        gridStart.getDate() + i
-      );
-      days.push({
-        date,
-        isToday: isSameDay2(date, today),
-        isSelected: value ? isSameDay2(date, value) : false,
-        isCurrentMonth: date.getMonth() === month,
-        isDisabled: isDateDisabled(date)
-      });
-    }
-    return days;
-  }
-  function openPicker() {
-    internalOpen = true;
-    onOpenChange?.(true);
-  }
-  function closePicker() {
-    internalOpen = false;
-    onOpenChange?.(false);
-  }
-  function togglePicker() {
-    if (isOpen()) {
-      closePicker();
-    } else {
-      openPicker();
-    }
-  }
-  function selectDate(date) {
-    if (isDateDisabled(date)) return;
-    const newDate = new Date(date);
-    if (value) {
-      newDate.setHours(value.getHours());
-      newDate.setMinutes(value.getMinutes());
-    }
-    onChange?.(newDate);
-    if (!showTime) {
-      closePicker();
-    }
-  }
-  function setHours(h4) {
-    if (h4 < 0 || h4 > 23) return;
-    const newDate = value ? new Date(value) : /* @__PURE__ */ new Date();
-    newDate.setHours(h4);
-    onChange?.(newDate);
-  }
-  function setMinutes(m) {
-    if (m < 0 || m > 59) return;
-    const newDate = value ? new Date(value) : /* @__PURE__ */ new Date();
-    newDate.setMinutes(m);
-    onChange?.(newDate);
-  }
-  function prevMonth() {
-    currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1);
-  }
-  function nextMonth() {
-    currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1);
-  }
-  function setView(v) {
-    view = v;
-  }
-  function formatDisplay() {
-    return value ? formatDate(value, format, showTime) : placeholder;
-  }
-  const keyboardHandlers = {
-    [Keys.Escape]: (e) => {
-      e.preventDefault();
-      closePicker();
-    }
-  };
-  const triggerProps = {
-    "aria-expanded": isOpen(),
-    "aria-controls": dropdownId,
-    "aria-haspopup": "dialog",
-    id: triggerId,
-    role: "combobox"
-  };
-  const dropdownProps = {
-    role: "dialog",
-    "aria-modal": true,
-    "aria-labelledby": labelId,
-    id: dropdownId
-  };
-  const gridProps = {
-    role: "grid",
-    "aria-labelledby": labelId,
-    id: gridId
-  };
-  function getDayAriaProps(day) {
-    return {
-      role: "gridcell",
-      "aria-selected": day.isSelected,
-      "aria-disabled": day.isDisabled,
-      "aria-current": day.isToday ? "date" : void 0,
-      "aria-label": `${DAY_NAMES2[day.date.getDay()]}, ${day.date.toLocaleDateString("en-US", {
-        month: "long",
-        day: "numeric",
-        year: "numeric"
-      })}`
-    };
-  }
-  return {
-    state: {
-      open: isOpen(),
-      selectedDate: value,
-      view,
-      hours,
-      minutes,
-      currentMonth
-    },
-    days: buildDays(),
-    openPicker,
-    closePicker,
-    togglePicker,
-    selectDate,
-    setHours,
-    setMinutes,
-    prevMonth,
-    nextMonth,
-    setView,
-    formatDisplay,
-    triggerProps,
-    dropdownProps,
-    gridProps,
-    getDayAriaProps,
-    keyboardHandlers,
-    ids: {
-      trigger: triggerId,
-      dropdown: dropdownId,
-      grid: gridId,
-      label: labelId
-    }
-  };
-}
 var datePickerTriggerStyles = "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer";
-var datePickerDropdownStyles = "absolute z-50 mt-1 rounded-md border bg-popover p-4 text-popover-foreground shadow-md";
-var datePickerDayVariants = cva({
+cva({
   base: "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground",
   variants: {
     state: {
@@ -12331,205 +12125,38 @@ var datePickerDayVariants = cva({
     state: "default"
   }
 });
-var datePickerTimeStyles = "flex items-center gap-2 mt-3 pt-3 border-t";
-var datePickerTimeInputStyles = "w-14 rounded-md border border-input bg-background px-2 py-1 text-sm text-center";
-
-// ../react-date-picker/dist/index.js
-function DatePicker({
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  showTime = false,
-  format,
-  placeholder,
-  className,
-  disabled = false
-}) {
-  const [open, setOpen] = React11.useState(false);
-  const [currentMonth, setCurrentMonth] = React11.useState(
-    () => value ? new Date(value.getFullYear(), value.getMonth(), 1) : new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), 1)
-  );
-  const [view, setView] = React11.useState("calendar");
-  const containerRef = React11.useRef(null);
-  const api = React11.useMemo(
-    () => createDatePicker({
-      value,
-      onChange,
-      minDate,
-      maxDate,
-      showTime,
-      format,
-      placeholder,
-      open,
-      onOpenChange: setOpen
-    }),
-    [value, onChange, minDate, maxDate, showTime, format, placeholder, open]
-  );
-  React11.useMemo(() => {
-    createDatePicker({
-      value,
-      minDate,
-      maxDate,
-      open: true
-    });
-    const tempApi = createDatePicker({
-      value,
-      minDate,
-      maxDate,
-      open: true
-    });
-    return tempApi.days;
-  }, [value, minDate, maxDate, currentMonth]);
-  React11.useEffect(() => {
-    if (!open) return;
-    function handleClick(e) {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [open]);
-  React11.useEffect(() => {
-    if (!open) return;
-    function handleKeyDown(e) {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        setOpen(false);
+var DatePicker = React11.forwardRef(
+  ({ value, onChange, minDate, maxDate, showTime = false, format, placeholder, className, disabled = false, ...props }, ref) => {
+    const dateToString = (date) => {
+      if (!date) return "";
+      const offset = date.getTimezoneOffset() * 6e4;
+      const localDate = new Date(date.getTime() - offset);
+      const iso = localDate.toISOString();
+      return showTime ? iso.slice(0, 16) : iso.slice(0, 10);
+    };
+    const handleChange = (e) => {
+      if (!onChange) return;
+      if (e.target.value) {
+        onChange(new Date(e.target.value));
       }
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [open]);
-  const displayValue = api.formatDisplay();
-  const handleSelectDate = (date) => {
-    const newDate = new Date(date);
-    if (value) {
-      newDate.setHours(value.getHours());
-      newDate.setMinutes(value.getMinutes());
-    }
-    onChange?.(newDate);
-    if (!showTime) {
-      setOpen(false);
-    }
-  };
-  const handleHoursChange = (e) => {
-    const h4 = parseInt(e.target.value, 10);
-    if (isNaN(h4) || h4 < 0 || h4 > 23) return;
-    const newDate = value ? new Date(value) : /* @__PURE__ */ new Date();
-    newDate.setHours(h4);
-    onChange?.(newDate);
-  };
-  const handleMinutesChange = (e) => {
-    const m = parseInt(e.target.value, 10);
-    if (isNaN(m) || m < 0 || m > 59) return;
-    const newDate = value ? new Date(value) : /* @__PURE__ */ new Date();
-    newDate.setMinutes(m);
-    onChange?.(newDate);
-  };
-  const monthLabel = currentMonth.toLocaleDateString("en-US", { month: "long", year: "numeric" });
-  return React11.createElement(
-    "div",
-    { ref: containerRef, className: cn("relative inline-block", className) },
-    React11.createElement(
-      "button",
-      {
-        type: "button",
-        className: cn(datePickerTriggerStyles, disabled && "opacity-50 cursor-not-allowed"),
-        onClick: () => !disabled && setOpen(!open),
-        "aria-expanded": open,
-        "aria-haspopup": "dialog",
-        disabled
-      },
-      displayValue
-    ),
-    open && React11.createElement(
-      "div",
+    };
+    return /* @__PURE__ */ jsx(
+      "input",
       {
-        className: datePickerDropdownStyles,
-        role: "dialog",
-        "aria-modal": true
-      },
-      React11.createElement(
-        "div",
-        { className: "flex items-center justify-between mb-3" },
-        React11.createElement(
-          "button",
-          {
-            type: "button",
-            className: "p-1 hover:bg-accent rounded cursor-pointer",
-            onClick: () => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)),
-            "aria-label": "Previous month"
-          },
-          "\u2039"
-        ),
-        React11.createElement("span", { className: "text-sm font-medium" }, monthLabel),
-        React11.createElement(
-          "button",
-          {
-            type: "button",
-            className: "p-1 hover:bg-accent rounded cursor-pointer",
-            onClick: () => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)),
-            "aria-label": "Next month"
-          },
-          "\u203A"
-        )
-      ),
-      React11.createElement(
-        "div",
-        { className: "grid grid-cols-7 gap-0 text-center", role: "grid" },
-        ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
-          (d) => React11.createElement("div", { key: d, className: "text-xs text-muted-foreground py-1 font-medium" }, d)
-        ),
-        api.days.map((day, i) => {
-          let state = "default";
-          if (day.isDisabled) state = "disabled";
-          else if (day.isSelected) state = "selected";
-          else if (day.isToday) state = "today";
-          else if (!day.isCurrentMonth) state = "outside";
-          return React11.createElement(
-            "button",
-            {
-              key: i,
-              type: "button",
-              className: datePickerDayVariants({ state }),
-              onClick: () => !day.isDisabled && handleSelectDate(day.date),
-              disabled: day.isDisabled,
-              "aria-selected": day.isSelected,
-              "aria-disabled": day.isDisabled
-            },
-            day.date.getDate()
-          );
-        })
-      ),
-      showTime && React11.createElement(
-        "div",
-        { className: datePickerTimeStyles },
-        React11.createElement("span", { className: "text-sm text-muted-foreground" }, "Time:"),
-        React11.createElement("input", {
-          type: "number",
-          min: 0,
-          max: 23,
-          value: value ? value.getHours() : 0,
-          onChange: handleHoursChange,
-          className: datePickerTimeInputStyles,
-          "aria-label": "Hours"
-        }),
-        React11.createElement("span", { className: "text-muted-foreground" }, ":"),
-        React11.createElement("input", {
-          type: "number",
-          min: 0,
-          max: 59,
-          value: value ? value.getMinutes() : 0,
-          onChange: handleMinutesChange,
-          className: datePickerTimeInputStyles,
-          "aria-label": "Minutes"
-        })
-      )
-    )
-  );
-}
+        ref,
+        type: showTime ? "datetime-local" : "date",
+        className: cn(datePickerTriggerStyles, "justify-start text-left font-normal w-[280px]", className),
+        value: dateToString(value),
+        min: dateToString(minDate),
+        max: dateToString(maxDate),
+        onChange: handleChange,
+        disabled,
+        placeholder,
+        ...props
+      }
+    );
+  }
+);
 DatePicker.displayName = "DatePicker";
 
 // ../emoji-picker/dist/index.js