@mari-ui/components 0.0.0-stage → 0.1.0

package/dist/date-picker.js

@@ -0,0 +1,826 @@
+"use client";
+
+import {
+  CellGrid,
+  DayGrid,
+  addMonths,
+  addYears,
+  compareDay,
+  formatDate,
+  isBetweenDays,
+  isSameDay,
+  isSameMonth,
+  isSameYear,
+  isWithin,
+  monthNames,
+  parseDate,
+  startOfDay,
+  startOfMonth
+} from "./chunk-CYLXW66E.js";
+import {
+  ClearButton
+} from "./chunk-KSPM2Z3T.js";
+import {
+  FIELD_BASE_CLASS,
+  FIELD_DISABLED_CLASS,
+  FIELD_MOBILE_TEXT_CLASS,
+  getShapeClasses,
+  getVariantClasses
+} from "./chunk-DUCIAQGR.js";
+import {
+  useFieldControl
+} from "./chunk-LBQMEHK6.js";
+import {
+  useFloatingPosition
+} from "./chunk-3ABWBQCS.js";
+import "./chunk-NS7FKOFI.js";
+import {
+  elevationClass
+} from "./chunk-TCYDVNSU.js";
+import {
+  Button
+} from "./chunk-2IEXY3OZ.js";
+import {
+  sizeClass,
+  touchTargetClass
+} from "./chunk-FFXRFQSU.js";
+import "./chunk-IP2J3BWY.js";
+import {
+  skeletonBoxProps
+} from "./chunk-54HHEXXD.js";
+
+// src/date-picker/DatePicker.tsx
+import { useEffect as useEffect3, useId, useRef as useRef2, useState as useState4 } from "react";
+import { ArrowRightIcon, CalendarIcon, ClockIcon } from "lucide-react";
+import { cn as cn4 } from "@mari-ui/core";
+
+// src/date-picker/_components/PickerPanel.tsx
+import { forwardRef, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+import { cn as cn3 } from "@mari-ui/core";
+
+// src/calendar/_components/CalendarPanel.tsx
+import { useEffect, useState } from "react";
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+import { cn } from "@mari-ui/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var NAV_BUTTON = "grid size-7 pointer-coarse:size-10 place-items-center rounded-md text-mari-muted outline-none hover:bg-mari-surface-alt hover:text-mari-foreground focus-visible:outline-2 focus-visible:outline-mari-ring";
+var TITLE_BUTTON = "rounded-md px-1.5 py-0.5 pointer-coarse:py-2.5 font-medium outline-none hover:bg-mari-surface-alt hover:text-mari-primary focus-visible:outline-2 focus-visible:outline-mari-ring";
+var decadeStart = (year) => year - year % 10;
+function monthCells(year, picker, selected, disabled, locale) {
+  const short = monthNames(locale, "short");
+  const long = monthNames(locale, "long");
+  const now = /* @__PURE__ */ new Date();
+  return short.map((name, m) => {
+    const first = new Date(year, m, 1);
+    const days = new Date(year, m + 1, 0).getDate();
+    const allDisabled = picker === "month" && Array.from({ length: days }, (_, i) => new Date(year, m, i + 1)).every(disabled);
+    return {
+      key: String(m),
+      label: name,
+      fullLabel: `${long[m]} ${year}`,
+      selected: picker === "month" ? selected(first) : false,
+      current: isSameMonth(first, now),
+      disabled: allDisabled
+    };
+  });
+}
+function yearCells(year, picker, selected, disabled) {
+  const start = decadeStart(year) - 1;
+  const now = /* @__PURE__ */ new Date();
+  return Array.from({ length: 12 }, (_, i) => {
+    const y = start + i;
+    const first = new Date(y, 0, 1);
+    return {
+      key: String(y),
+      label: String(y),
+      fullLabel: String(y),
+      selected: picker === "year" ? selected(first) : false,
+      current: isSameYear(first, now),
+      disabled: picker === "year" && disabled(first) && disabled(new Date(y, 11, 31)),
+      outside: i === 0 || i === 11
+    };
+  });
+}
+function CalendarPanel(props) {
+  const { picker = "date", initialDate, isSelected, rangeOf, isDisabled, onSelect, onHover, weekStart = 1, locale, showWeek, takeFocus, hidePrev, hideNext, className } = props;
+  const [mode, setMode] = useState(picker);
+  const [innerView, setInnerView] = useState(() => startOfMonth(initialDate));
+  const [focused, setFocused] = useState(initialDate);
+  const view = props.viewDate ?? innerView;
+  const setView = (d) => {
+    const next = startOfMonth(d);
+    setInnerView(next);
+    props.onViewDateChange?.(next);
+  };
+  const [focusGrid, setFocusGrid] = useState(!!takeFocus);
+  useEffect(() => setMode(picker), [picker]);
+  const moveFocus = (d) => {
+    setFocused(d);
+    if (!isSameMonth(d, view)) setView(d);
+  };
+  const long = monthNames(locale, "long");
+  const year = view.getFullYear();
+  let title;
+  let grid;
+  if (mode === "date") {
+    title = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: TITLE_BUTTON, "aria-label": `Ay se\xE7, ${long[view.getMonth()]}`, onClick: () => setMode("month"), children: long[view.getMonth()] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: TITLE_BUTTON, "aria-label": `Y\u0131l se\xE7, ${year}`, onClick: () => setMode("year"), children: year })
+    ] });
+    grid = /* @__PURE__ */ jsx(
+      DayGrid,
+      {
+        view,
+        focused: isSameMonth(focused, view) ? focused : view,
+        onFocusChange: (d) => {
+          setFocusGrid(true);
+          moveFocus(d);
+        },
+        isSelected,
+        rangeOf,
+        isDisabled,
+        onSelect,
+        onHover,
+        weekStart,
+        locale,
+        showWeek,
+        label: `${long[view.getMonth()]} ${year}`,
+        takeFocus: focusGrid || !!takeFocus
+      }
+    );
+  } else if (mode === "month") {
+    const cells = monthCells(year, picker, isSelected, isDisabled, locale);
+    title = /* @__PURE__ */ jsx("button", { type: "button", className: TITLE_BUTTON, "aria-label": `Y\u0131l se\xE7, ${year}`, onClick: () => setMode("year"), children: year });
+    grid = /* @__PURE__ */ jsx(
+      CellGrid,
+      {
+        cells,
+        focusedIndex: view.getMonth(),
+        label: `${year} aylar\u0131`,
+        takeFocus: true,
+        onFocusIndex: (i) => setView(new Date(year, i, 1)),
+        onPage: (d) => setView(addYears(view, d)),
+        onSelect: (i) => {
+          const d = new Date(year, i, 1);
+          if (picker === "month") onSelect(d);
+          else {
+            setView(d);
+            setFocused(d);
+            setMode("date");
+          }
+        }
+      }
+    );
+  } else {
+    const cells = yearCells(year, picker, isSelected, isDisabled);
+    const start = decadeStart(year);
+    title = /* @__PURE__ */ jsx("span", { className: "px-1.5 font-medium", children: `${start}\u2013${start + 9}` });
+    grid = /* @__PURE__ */ jsx(
+      CellGrid,
+      {
+        cells,
+        focusedIndex: year - (start - 1),
+        label: `${start}\u2013${start + 9} y\u0131llar\u0131`,
+        takeFocus: true,
+        onFocusIndex: (i) => setView(new Date(start - 1 + i, view.getMonth(), 1)),
+        onPage: (d) => setView(addYears(view, d * 10)),
+        onSelect: (i) => {
+          const d = new Date(start - 1 + i, view.getMonth(), 1);
+          if (picker === "year") onSelect(d);
+          else {
+            setView(d);
+            setMode("month");
+          }
+        }
+      }
+    );
+  }
+  const shift = (months) => {
+    const next = mode === "year" ? addYears(view, Math.sign(months) * 10) : addMonths(view, months);
+    setView(next);
+    setFocused(addMonths(focused, next.getFullYear() * 12 + next.getMonth() - (view.getFullYear() * 12 + view.getMonth())));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-[17.5rem] max-w-full pointer-coarse:w-[19.25rem]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-0.5", children: [
+      !hidePrev && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: NAV_BUTTON, "aria-label": mode === "year" ? "\xD6nceki on y\u0131l" : "\xD6nceki y\u0131l", onClick: () => shift(-12), children: /* @__PURE__ */ jsx(ChevronsLeftIcon, { "aria-hidden": true, size: 16 }) }),
+        mode === "date" && /* @__PURE__ */ jsx("button", { type: "button", className: NAV_BUTTON, "aria-label": "\xD6nceki ay", onClick: () => shift(-1), children: /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": true, size: 16 }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: "flex flex-1 items-center justify-center gap-0.5 text-sm", children: title }),
+      hideNext !== true && /* @__PURE__ */ jsxs("span", { className: cn("contents", hideNext === "sm" && "sm:hidden"), children: [
+        mode === "date" && /* @__PURE__ */ jsx("button", { type: "button", className: NAV_BUTTON, "aria-label": "Sonraki ay", onClick: () => shift(1), children: /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": true, size: 16 }) }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: NAV_BUTTON, "aria-label": mode === "year" ? "Sonraki on y\u0131l" : "Sonraki y\u0131l", onClick: () => shift(12), children: /* @__PURE__ */ jsx(ChevronsRightIcon, { "aria-hidden": true, size: 16 }) })
+      ] })
+    ] }),
+    grid
+  ] });
+}
+
+// src/date-picker/utils.ts
+function defaultFormat(mode, picker, seconds = false) {
+  const time = seconds ? "HH:mm:ss" : "HH:mm";
+  if (mode === "time") return time;
+  if (mode === "datetime") return `dd.MM.yyyy ${time}`;
+  if (picker === "month") return "MM.yyyy";
+  if (picker === "year") return "yyyy";
+  return "dd.MM.yyyy";
+}
+var PLACEHOLDER_TOKENS = { yyyy: "yyyy", MM: "aa", dd: "gg", HH: "ss", mm: "dd", ss: "sn" };
+function formatPlaceholder(format) {
+  return format.replace(/yyyy|MM|dd|HH|mm|ss/g, (t) => PLACEHOLDER_TOKENS[t]);
+}
+function isoValue(d, mode) {
+  if (!d) return "";
+  const p = (n) => String(n).padStart(2, "0");
+  const date = `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
+  const time = `${p(d.getHours())}:${p(d.getMinutes())}`;
+  if (mode === "time") return time;
+  return mode === "datetime" ? `${date}T${time}` : date;
+}
+var mergeDateTime = (date, time) => new Date(date.getFullYear(), date.getMonth(), date.getDate(), time.getHours(), time.getMinutes(), time.getSeconds());
+function isDayDisabled(d, min, max, disabledDate) {
+  return !isWithin(d, min, max) || !!disabledDate?.(d);
+}
+var columnValues = (max, step = 1) => Array.from({ length: Math.ceil((max + 1) / step) }, (_, i) => i * step);
+var snap = (value, step = 1) => Math.floor(value / step) * step;
+function rangePosition(d, start, end, hover) {
+  const b = end ?? (start ? hover ?? start : null);
+  const a = start ?? b;
+  if (!a || !b) return null;
+  const [lo, hi] = compareDay(a, b) <= 0 ? [a, b] : [b, a];
+  if (isSameDay(lo, hi)) return isSameDay(d, lo) ? "single" : null;
+  if (isSameDay(d, lo)) return "start";
+  if (isSameDay(d, hi)) return "end";
+  return isBetweenDays(d, lo, hi) ? "middle" : null;
+}
+function orderRange(a, b) {
+  if (a && b && a.getTime() > b.getTime()) return [b, a];
+  return [a, b];
+}
+
+// src/date-picker/_components/TimePanel.tsx
+import { useEffect as useEffect2, useRef } from "react";
+import { cn as cn2 } from "@mari-ui/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var pad = (n) => String(n).padStart(2, "0");
+function Column({ label, values, value, onChange, takeFocus }) {
+  const listRef = useRef(null);
+  const navigating = useRef(false);
+  const index = Math.max(0, values.indexOf(value));
+  useEffect2(() => {
+    const list = listRef.current;
+    const option = list?.children[index];
+    if (!list || !option) return;
+    list.scrollTo?.({ top: option.offsetTop - list.offsetTop, behavior: "smooth" });
+    if (navigating.current || takeFocus) option.focus({ preventScroll: true });
+    navigating.current = false;
+  }, [index, takeFocus]);
+  const onKeyDown = (e) => {
+    const map = { ArrowDown: 1, ArrowUp: -1, PageDown: 5, PageUp: -5 };
+    let next = null;
+    if (e.key in map) next = Math.min(values.length - 1, Math.max(0, index + map[e.key]));
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = values.length - 1;
+    if (next === null) return;
+    e.preventDefault();
+    navigating.current = true;
+    onChange(values[next]);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": label,
+      className: "relative h-56 w-14 pointer-coarse:w-16 snap-y overflow-y-auto overscroll-contain border-l border-mari-border py-1 first:border-l-0 [scrollbar-width:thin]",
+      children: [
+        values.map((v, i) => /* @__PURE__ */ jsx2(
+          "div",
+          {
+            role: "option",
+            tabIndex: i === index ? 0 : -1,
+            "aria-selected": i === index,
+            onKeyDown,
+            onClick: () => onChange(v),
+            className: cn2(
+              "mx-1 flex h-7 pointer-coarse:h-11 cursor-pointer snap-start items-center justify-center rounded-md text-sm tabular-nums outline-none",
+              "focus-visible:outline-2 focus-visible:outline-mari-ring",
+              i === index ? "bg-mari-primary-subtle font-medium text-mari-primary" : "hover:bg-mari-surface-alt"
+            ),
+            children: pad(v)
+          },
+          v
+        )),
+        /* @__PURE__ */ jsx2("div", { "aria-hidden": true, className: "h-48 pointer-coarse:h-[19rem]" })
+      ]
+    }
+  );
+}
+function TimePanel({ value, onChange, seconds, hourStep = 1, minuteStep = 1, secondStep = 1, takeFocus }) {
+  const set = (h2, m2, s2) => {
+    const d = new Date(value);
+    d.setHours(h2, m2, s2, 0);
+    onChange(d);
+  };
+  const h = snap(value.getHours(), hourStep);
+  const m = snap(value.getMinutes(), minuteStep);
+  const s = snap(value.getSeconds(), secondStep);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex", role: "group", "aria-label": "Saat se\xE7imi", children: [
+    /* @__PURE__ */ jsx2(Column, { label: "Saat", values: columnValues(23, hourStep), value: h, onChange: (v) => set(v, m, s), takeFocus }),
+    /* @__PURE__ */ jsx2(Column, { label: "Dakika", values: columnValues(59, minuteStep), value: m, onChange: (v) => set(h, v, s) }),
+    seconds && /* @__PURE__ */ jsx2(Column, { label: "Saniye", values: columnValues(59, secondStep), value: s, onChange: (v) => set(h, m, v) })
+  ] });
+}
+
+// src/date-picker/_components/PickerPanel.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var panelLabel = (mode, range) => {
+  if (mode === "time") return range ? "Saat aral\u0131\u011F\u0131 se\xE7" : "Saat se\xE7";
+  if (mode === "datetime") return range ? "Tarih ve saat aral\u0131\u011F\u0131 se\xE7" : "Tarih ve saat se\xE7";
+  return range ? "Tarih aral\u0131\u011F\u0131 se\xE7" : "Tarih se\xE7";
+};
+function Presets({ presets, onPick }) {
+  return /* @__PURE__ */ jsx3("ul", { "aria-label": "Haz\u0131r se\xE7imler", className: "flex shrink-0 flex-row flex-wrap gap-1 border-b border-mari-border p-2 sm:w-36 sm:flex-col sm:border-r sm:border-b-0", children: presets.map((p, i) => (
+    // Hazır seçimler sabit sırada.
+    /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPick(typeof p.value === "function" ? p.value() : p.value),
+        className: "w-full rounded-md px-2 py-1 pointer-coarse:py-2.5 text-left text-sm text-mari-foreground outline-none hover:bg-mari-surface-alt focus-visible:outline-2 focus-visible:outline-mari-ring",
+        children: p.label
+      }
+    ) }, i)
+  )) });
+}
+function selectionChecker({ picker, draft, range }) {
+  return (d) => {
+    if (picker === "month") return draft.some((v) => isSameMonth(v, d));
+    if (picker === "year") return draft.some((v) => isSameYear(v, d));
+    return !range && isSameDay(draft[0], d);
+  };
+}
+function rangeChecker({ range, picker, draft, slot, hover }) {
+  if (!range || picker !== "date") return void 0;
+  return (d) => rangePosition(d, draft[0] ?? null, draft[1] ?? null, slot === 1 && !draft[1] ? hover : null);
+}
+function Footer({ state, showNow, needsConfirm }) {
+  if (!showNow && !needsConfirm) return null;
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2 border-t border-mari-border px-3 py-2", children: [
+    showNow ? /* @__PURE__ */ jsx3(Button, { size: "sm", variant: "ghost", onClick: state.pickNow, children: state.mode === "date" ? "Bug\xFCn" : "\u015Eimdi" }) : /* @__PURE__ */ jsx3("span", {}),
+    needsConfirm && /* @__PURE__ */ jsx3(Button, { size: "sm", onClick: state.confirm, disabled: !state.draft[state.slot], children: state.range && state.slot === 0 ? "Sonraki" : "Tamam" })
+  ] });
+}
+var PickerPanel = forwardRef(function PickerPanel2({ id, coords, state, props, takeFocus, onFocusOut }, ref) {
+  const { mode, picker, range, draft, slot } = state;
+  const hasDate = mode !== "time";
+  const hasTime = mode !== "date";
+  const dual = range && mode === "date" && picker === "date";
+  const current = draft[slot] ?? draft[slot === 0 ? 1 : 0] ?? startOfDay(/* @__PURE__ */ new Date());
+  const [view, setView] = useState2(() => startOfMonth(current));
+  const seconds = state.format.includes("ss");
+  const showNow = props.showNow ?? !range;
+  const needsConfirm = hasTime;
+  const focusNow = takeFocus && coords !== null;
+  if (typeof document === "undefined") return null;
+  const isSelected = selectionChecker(state);
+  const rangeOf = rangeChecker(state);
+  const calendarCommon = {
+    picker,
+    isSelected,
+    rangeOf,
+    isDisabled: state.isDisabled,
+    onSelect: state.pickDate,
+    onHover: range ? state.setHover : void 0,
+    weekStart: props.weekStart,
+    locale: props.locale,
+    showWeek: props.showWeek
+  };
+  const presets = props.presets;
+  return createPortal(
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- yalnız alanın odağını korur / dışarı çıkışı izler
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref,
+        id,
+        role: "dialog",
+        "aria-label": panelLabel(mode, range),
+        onMouseDown: (e) => e.preventDefault(),
+        onBlur: onFocusOut,
+        className: cn3(
+          "fixed z-mari-dropdown flex max-h-[calc(100vh-1rem)] max-w-[calc(100vw-1rem)] flex-col overflow-auto rounded-lg bg-mari-surface text-mari-foreground",
+          elevationClass.md,
+          !coords && "invisible"
+        ),
+        style: { top: coords?.top ?? 0, left: coords?.left ?? 0 },
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex flex-col sm:flex-row", children: [
+            presets && presets.length > 0 && /* @__PURE__ */ jsx3(
+              Presets,
+              {
+                presets,
+                onPick: (v) => {
+                  state.commit(Array.isArray(v) ? [...v] : [v]);
+                  state.close();
+                }
+              }
+            ),
+            hasDate && /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-4 p-3 sm:flex-row", children: dual ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+              /* @__PURE__ */ jsx3(CalendarPanel, { ...calendarCommon, initialDate: view, viewDate: view, onViewDateChange: setView, hideNext: "sm", takeFocus: focusNow }, "l"),
+              /* @__PURE__ */ jsx3("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx3(CalendarPanel, { ...calendarCommon, initialDate: addMonths(view, 1), viewDate: addMonths(view, 1), onViewDateChange: (d) => setView(addMonths(d, -1)), hidePrev: true }, "r") })
+            ] }) : /* @__PURE__ */ jsx3(CalendarPanel, { ...calendarCommon, initialDate: current, takeFocus: focusNow }, `s${slot}`) }),
+            hasTime && /* @__PURE__ */ jsx3("div", { className: cn3("p-2", hasDate && "border-t border-mari-border sm:border-t-0 sm:border-l"), children: /* @__PURE__ */ jsx3(
+              TimePanel,
+              {
+                value: current,
+                onChange: state.pickTime,
+                seconds,
+                hourStep: props.hourStep,
+                minuteStep: props.minuteStep,
+                secondStep: props.secondStep,
+                takeFocus: focusNow && !hasDate
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx3(Footer, { state, showNow, needsConfirm })
+        ]
+      }
+    ),
+    document.body
+  );
+});
+
+// src/date-picker/usePickerState.ts
+import { useState as useState3 } from "react";
+import { useControllableState } from "@mari-ui/core";
+var toValues = (v, range) => {
+  if (v === void 0) return void 0;
+  if (range) return v ? [...v] : [null, null];
+  return [v];
+};
+function usePickerState(props) {
+  const range = props.range === true;
+  const mode = props.mode ?? "date";
+  const picker = mode === "date" ? props.picker ?? "date" : "date";
+  const format = props.format ?? defaultFormat(mode, picker);
+  const locale = props.locale;
+  const fmt = (d) => d ? formatDate(d, format, locale) : "";
+  const [values, setValuesState] = useControllableState({
+    value: toValues(props.value, range),
+    defaultValue: toValues(props.defaultValue, range) ?? (range ? [null, null] : [null])
+  });
+  const [open, setOpenState] = useControllableState({ value: props.open, defaultValue: false, onChange: props.onOpenChange });
+  const [draft, setDraft] = useState3(values);
+  const [texts, setTexts] = useState3(() => values.map(fmt));
+  const [slot, setSlot] = useState3(0);
+  const [hover, setHover] = useState3(null);
+  const valuesKey = values.map((v) => v?.getTime() ?? "").join("|");
+  const [syncedKey, setSyncedKey] = useState3(valuesKey);
+  if (valuesKey !== syncedKey) {
+    setSyncedKey(valuesKey);
+    setTexts(values.map(fmt));
+    if (!open) setDraft(values);
+  }
+  const isDisabled = (d) => isDayDisabled(d, props.minDate, props.maxDate, props.disabledDate);
+  const commit = (next) => {
+    const ordered = range ? orderRange(next[0] ?? null, next[1] ?? null) : next;
+    setValuesState(ordered);
+    setDraft(ordered);
+    setTexts(ordered.map(fmt));
+    if (range) props.onChange?.(ordered.every((v) => v === null) ? null : ordered, [fmt(ordered[0]), fmt(ordered[1])]);
+    else props.onChange?.(ordered[0] ?? null, fmt(ordered[0] ?? null));
+  };
+  const setOpen = (next) => {
+    if (next === open) return;
+    if (next) setDraft(values);
+    else {
+      setHover(null);
+      setTexts(values.map(fmt));
+    }
+    setOpenState(next);
+  };
+  const close = () => setOpen(false);
+  const setDraftSlot = (s, d, fromText = false) => {
+    const next = [...draft];
+    next[s] = d;
+    setDraft(next);
+    if (!fromText) setTexts((t) => t.map((x, i) => i === s ? fmt(d) : x));
+    return next;
+  };
+  const advance = (next) => {
+    if (range && slot === 0) {
+      setSlot(1);
+      if (next[1] && next[0] && next[0].getTime() > next[1].getTime()) {
+        setDraft([next[0], null]);
+        setTexts((t) => [t[0] ?? "", ""]);
+      }
+      return;
+    }
+    if (range && !next[0]) {
+      setSlot(0);
+      return;
+    }
+    commit(next);
+    close();
+  };
+  const pickDate = (d) => {
+    if (mode === "datetime") {
+      const base = draft[slot] ?? startOfDay(/* @__PURE__ */ new Date());
+      setDraftSlot(slot, mergeDateTime(d, base));
+      return;
+    }
+    advance(setDraftSlot(slot, d));
+  };
+  const pickTime = (t) => {
+    const base = draft[slot] ?? startOfDay(/* @__PURE__ */ new Date());
+    setDraftSlot(slot, mode === "time" ? mergeDateTime(startOfDay(/* @__PURE__ */ new Date()), t) : mergeDateTime(base, t));
+  };
+  const confirm = () => advance(draft);
+  const pickNow = () => {
+    const now = mode === "date" ? startOfDay(/* @__PURE__ */ new Date()) : /* @__PURE__ */ new Date();
+    advance(setDraftSlot(slot, now));
+  };
+  const typeText = (s, text) => {
+    setTexts((t) => t.map((x, i) => i === s ? text : x));
+    const parsed = text.trim() ? parseDate(text, format, draft[s] ?? startOfDay(/* @__PURE__ */ new Date())) : null;
+    if (parsed && !isDisabled(parsed)) setDraftSlot(s, parsed, true);
+  };
+  const commitText = (s) => {
+    const text = texts[s] ?? "";
+    if (!text.trim()) {
+      const next2 = [...values];
+      next2[s] = null;
+      if (values[s] !== null) commit(next2);
+      return;
+    }
+    const parsed = parseDate(text, format, values[s] ?? startOfDay(/* @__PURE__ */ new Date()));
+    if (!parsed || isDisabled(parsed)) {
+      setTexts(values.map(fmt));
+      return;
+    }
+    const next = [...values];
+    next[s] = parsed;
+    if (fmt(parsed) !== fmt(values[s] ?? null)) commit(next);
+    else setTexts(values.map(fmt));
+  };
+  return {
+    range,
+    mode,
+    picker,
+    format,
+    open,
+    setOpen,
+    close,
+    values,
+    draft,
+    texts,
+    slot,
+    setSlot,
+    hover,
+    setHover,
+    isDisabled,
+    commit,
+    pickDate,
+    pickTime,
+    pickNow,
+    confirm,
+    typeText,
+    commitText,
+    clear: () => commit(range ? [null, null] : [null])
+  };
+}
+
+// src/date-picker/DatePicker.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var GAP_PX = 4;
+function SlotInput({ state, slot, id, label, labelledBy, describedBy, placeholder, panelId, disabled, required, invalid, inputRef, onOpenWithFocus }) {
+  const active = state.open && state.slot === slot;
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ref: inputRef,
+      id,
+      type: "text",
+      role: "combobox",
+      inputMode: state.mode === "time" ? "numeric" : "text",
+      autoComplete: "off",
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      "aria-haspopup": "dialog",
+      "aria-expanded": state.open,
+      "aria-controls": state.open ? panelId : void 0,
+      "aria-required": required || void 0,
+      "aria-invalid": invalid || void 0,
+      disabled,
+      placeholder,
+      value: state.texts[slot] ?? "",
+      onChange: (e) => {
+        state.setSlot(slot);
+        state.typeText(slot, e.target.value);
+        state.setOpen(true);
+      },
+      onFocus: () => state.open && state.setSlot(slot),
+      onClick: () => {
+        state.setSlot(slot);
+        state.setOpen(true);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "ArrowDown" || e.key === "ArrowDown" && e.altKey) {
+          e.preventDefault();
+          state.setSlot(slot);
+          onOpenWithFocus();
+        } else if (e.key === "Enter") {
+          e.preventDefault();
+          state.commitText(slot);
+          state.close();
+        } else if (e.key === "Escape" && state.open) {
+          e.preventDefault();
+          e.stopPropagation();
+          state.close();
+        }
+      },
+      className: cn4(
+        "w-full min-w-0 flex-1 bg-transparent tabular-nums placeholder:text-mari-muted focus:outline-none disabled:cursor-not-allowed",
+        FIELD_MOBILE_TEXT_CLASS,
+        state.range && "border-b-2 border-transparent",
+        active && state.range && "border-mari-primary"
+      )
+    }
+  );
+}
+function boxWidthClass({ range, mode }) {
+  if (mode === "datetime") return range ? "max-w-[26rem]" : "max-w-60";
+  return range ? "max-w-80" : "max-w-52";
+}
+function usePickerDismiss(state, anchorRef, panelRef, inputs, resetFocusPanel) {
+  const { open, slot, close } = state;
+  const closeRef = useRef2(close);
+  closeRef.current = close;
+  useEffect3(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const t = e.target;
+      if (anchorRef.current?.contains(t) || panelRef.current?.contains(t)) return;
+      closeRef.current();
+      resetFocusPanel();
+    };
+    const onKeyDown = (e) => {
+      if (e.key !== "Escape" || !panelRef.current?.contains(document.activeElement)) return;
+      e.preventDefault();
+      closeRef.current();
+      resetFocusPanel();
+      inputs.current?.[slot]?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [open, slot]);
+  const wasOpen = useRef2(open);
+  useEffect3(() => {
+    if (wasOpen.current && !open && document.activeElement === document.body) inputs.current?.[slot]?.focus();
+    if (!open) resetFocusPanel();
+    wasOpen.current = open;
+  }, [open, slot]);
+}
+function DatePicker(outerProps) {
+  const props = useFieldControl(outerProps);
+  const {
+    allowClear = true,
+    clearLabel = "Temizle",
+    disabled = false,
+    size = "md",
+    variant = "outline",
+    shape = "default",
+    color,
+    placement = "bottom-start",
+    id,
+    name,
+    required,
+    className,
+    skeleton = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  } = props;
+  const state = usePickerState(props);
+  const anchorRef = useRef2(null);
+  const panelRef = useRef2(null);
+  const inputs = useRef2([]);
+  const panelId = useId();
+  const [focusPanel, setFocusPanel] = useState4(false);
+  const coords = useFloatingPosition(state.open, anchorRef, panelRef, { placement, gap: GAP_PX });
+  usePickerDismiss(state, anchorRef, panelRef, inputs, () => setFocusPanel(false));
+  const geometry = cn4("flex w-full items-center gap-2", sizeClass[size], getShapeClasses(shape, variant), boxWidthClass(state));
+  if (skeleton) return /* @__PURE__ */ jsx4("div", { ...skeletonBoxProps(cn4(geometry, className)) });
+  const rangeProps = props;
+  const basePlaceholder = formatPlaceholder(state.format);
+  const placeholders = state.range ? rangeProps.placeholder ?? [basePlaceholder, basePlaceholder] : [props.placeholder ?? basePlaceholder, ""];
+  const rangeLabels = rangeProps.rangeLabels ?? ["Ba\u015Flang\u0131\xE7", "Biti\u015F"];
+  const hasValue = state.values.some((v) => v !== null);
+  const Icon = state.mode === "time" ? ClockIcon : CalendarIcon;
+  const onFocusOut = (e) => {
+    const to = e.relatedTarget;
+    if (anchorRef.current?.contains(to) || panelRef.current?.contains(to)) return;
+    state.commitText(state.slot);
+    state.close();
+    setFocusPanel(false);
+  };
+  const slotInput = (slot) => /* @__PURE__ */ jsx4(
+    SlotInput,
+    {
+      state,
+      slot,
+      id: slot === 0 ? id : void 0,
+      label: state.range ? rangeLabels[slot] : ariaLabel,
+      labelledBy: state.range ? void 0 : ariaLabelledBy,
+      describedBy: ariaDescribedBy,
+      placeholder: placeholders[slot],
+      panelId,
+      disabled,
+      required,
+      invalid: color === "error",
+      inputRef: (el) => inputs.current[slot] = el,
+      onOpenWithFocus: () => {
+        setFocusPanel(true);
+        state.setOpen(true);
+      }
+    }
+  );
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: anchorRef,
+        role: state.range ? "group" : void 0,
+        "aria-labelledby": state.range ? ariaLabelledBy : void 0,
+        "aria-label": state.range ? ariaLabel : void 0,
+        onBlur: onFocusOut,
+        onMouseDown: (e) => {
+          const t = e.target;
+          if (disabled || t.tagName === "INPUT" || t.closest("button")) return;
+          e.preventDefault();
+          inputs.current[state.open ? state.slot : 0]?.focus();
+          state.setOpen(!state.open);
+        },
+        className: cn4(
+          geometry,
+          "group relative cursor-text",
+          touchTargetClass[size],
+          FIELD_BASE_CLASS,
+          getVariantClasses(variant, color),
+          disabled && FIELD_DISABLED_CLASS,
+          className
+        ),
+        children: [
+          slotInput(0),
+          state.range && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+            /* @__PURE__ */ jsx4(ArrowRightIcon, { "aria-hidden": true, size: 14, className: "shrink-0 text-mari-muted" }),
+            slotInput(1)
+          ] }),
+          allowClear && /* @__PURE__ */ jsx4(
+            ClearButton,
+            {
+              visible: hasValue && !disabled,
+              label: clearLabel,
+              onClear: () => {
+                state.clear();
+                inputs.current[0]?.focus();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx4(Icon, { "aria-hidden": true, size: 16, className: "shrink-0 text-mari-muted" }),
+          name && state.values.map((v, i) => /* @__PURE__ */ jsx4("input", { type: "hidden", name, value: isoValue(v, state.mode) }, i))
+        ]
+      }
+    ),
+    state.open && /* @__PURE__ */ jsx4(
+      PickerPanel,
+      {
+        ref: panelRef,
+        id: panelId,
+        coords,
+        state,
+        props,
+        takeFocus: focusPanel,
+        onFocusOut
+      }
+    )
+  ] });
+}
+
+// src/date-picker/TimePicker.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function TimePicker(props) {
+  return /* @__PURE__ */ jsx5(DatePicker, { ...props, mode: "time" });
+}
+export {
+  DatePicker,
+  TimePicker
+};
+//# sourceMappingURL=date-picker.js.map