minerva-design 1.0.0 → 1.0.2

package/dist/react/components/DatePicker/DatePicker.js

@@ -0,0 +1,315 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import t from "../../hooks/useI18n.js";
+import { hooks as n } from "../../internal/stylingHooks.js";
+import { warnControlledProps as r } from "../../internal/devWarnings.js";
+import { IconCalendar as i, IconChevronLeft as a, IconChevronRight as ee, IconX as te } from "../../internal/icons.js";
+import { useMergedRefs as ne } from "../../internal/mergeRefs.js";
+import { pickDataAttributes as re } from "../../internal/dataAttributes.js";
+import { useControllableState as ie } from "../../internal/useControllableState.js";
+import { FormControlContext as ae, useFormControlContext as oe, useFormControlProps as se } from "../FormControl/context.js";
+import { useLayerParent as ce } from "../../internal/useDismissableLayer.js";
+import { logicalArrowKey as le } from "../../internal/direction.js";
+import { FloatingPanel as ue } from "../../internal/FloatingPanel.js";
+import de from "../IconButton/IconButton.js";
+import "../IconButton/index.js";
+import { Input as fe } from "../Input/Input.js";
+import "../Input/index.js";
+import { adjacentTabbable as pe, tabLeavesPanel as me } from "../../internal/tabbing.js";
+import o from "./datePicker.module.scss.js";
+import s, { useEffect as he, useId as ge, useRef as c, useState as l } from "react";
+import { addDays as u, dayKey as d, localDate as _e, monthStart as f, parseDayKey as p, sameMonth as m } from "../../../core/index.js";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/DatePicker/DatePicker.tsx
+var ve = [
+	"mon",
+	"tue",
+	"wed",
+	"thu",
+	"fri",
+	"sat",
+	"sun"
+], _ = ({ ref: s, value: _, defaultValue: v, onChange: y, placeholder: ye, label: b, "aria-label": x, "aria-labelledby": be, "aria-describedby": xe, id: Se, required: Ce, readOnly: we, invalid: Te, name: Ee = "date-picker", disabled: De, clearable: S = !0, size: C = "medium", minDate: w, maxDate: T, locale: Oe, className: ke = "", style: Ae, onOpenChange: je, ...Me }) => {
+	let { t: E, language: Ne } = t(), D = ge(), O = oe(), k = se({
+		id: Se,
+		"aria-describedby": xe
+	}), A = De ?? O?.disabled ?? !1, j = we ?? O?.readOnly ?? !1, Pe = Ce ?? O?.required ?? !1, M = Te ?? O?.invalid ?? !1, N = b ?? x ?? E("datePicker.label"), P = be ?? (O && !b && !x ? O.labelId : void 0);
+	process.env.NODE_ENV !== "production" && r("DatePicker", {
+		prop: "value",
+		value: _ === null ? "" : _,
+		defaultProp: "defaultValue",
+		defaultValue: v,
+		handlerProp: "onChange",
+		handler: y,
+		locked: A || j,
+		lockHint: "set `disabled` / `readOnly`"
+	});
+	let [F, Fe] = ie({
+		value: _ === null ? "" : _,
+		defaultValue: v ?? "",
+		name: "DatePicker"
+	}), [I, L] = ie({
+		defaultValue: !1,
+		onChange: je,
+		name: "DatePicker",
+		prop: "open"
+	}), [R, z] = l(null), [B, Ie] = l(null), [Le, Re] = l(null), ze = ne(Ie, s), V = c(null), Be = ce(), Ve = p(F || "") ?? /* @__PURE__ */ new Date(), [H, U] = l(() => f(Ve)), [He, W] = l(""), [Ue, We] = l(!1), G = c(/* @__PURE__ */ new Map()), K = c(null), q = (e) => !!(w && e < w || T && e > T), J = (e) => {
+		Fe(e), y?.(e);
+	}, Ge = (e) => {
+		let t = p(e);
+		t && U(f(t));
+	}, Ke = (e) => {
+		if (z(e), e === "") {
+			J("");
+			return;
+		}
+		let t = p(e, !0);
+		if (t) {
+			let e = d(t);
+			q(e) || (J(e), U(f(t)));
+		}
+	}, qe = () => {
+		if (R === null) return;
+		let e = R.trim();
+		if (e === "") F && J("");
+		else {
+			let t = p(e, !1);
+			if (t) {
+				let e = d(t);
+				!q(e) && e !== F && (J(e), U(f(t)));
+			}
+		}
+		z(null);
+	}, Je = () => {
+		z(null), J(""), B?.focus();
+	}, Y = (e) => {
+		let t = d(e);
+		A || j || q(t) || (z(null), J(t), U(f(e)), L(!1), B?.focus());
+	}, Ye = () => {
+		A || j || (We(!1), I || Ge(F), L((e) => !e));
+	}, X = f(H), Xe = u(X, -((X.getDay() + 6) % 7)), Ze = Array.from({ length: 42 }, (e, t) => u(Xe, t)), Qe = Ze.map(d), Z = /* @__PURE__ */ new Date(), Q = d(Z), $ = [
+		He,
+		F,
+		m(Z, H) ? Q : "",
+		d(X)
+	].find((e) => e && Qe.includes(e)), $e = d(X);
+	he(() => {
+		if (!I || A || !K.current) return;
+		let e = G.current.get(K.current);
+		e && (K.current = null, e.focus());
+	}, [
+		I,
+		$e,
+		He,
+		A
+	]);
+	let et = (e, t) => {
+		if (A || j) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault(), e.repeat || Y(t);
+			return;
+		}
+		let n, r = (t.getDay() + 6) % 7;
+		switch (le(e.key, e.currentTarget)) {
+			case "ArrowLeft":
+				n = u(t, -1);
+				break;
+			case "ArrowRight":
+				n = u(t, 1);
+				break;
+			case "ArrowUp":
+				n = u(t, -7);
+				break;
+			case "ArrowDown":
+				n = u(t, 7);
+				break;
+			case "Home":
+				n = u(t, -r);
+				break;
+			case "End":
+				n = u(t, 6 - r);
+				break;
+			case "PageUp":
+			case "PageDown": {
+				let r = (e.key === "PageUp" ? -1 : 1) * (e.shiftKey ? 12 : 1), i = f(t, r), a = u(f(i, 1), -1).getDate();
+				n = _e(i.getFullYear(), i.getMonth(), Math.min(t.getDate(), a));
+				break;
+			}
+			default: return;
+		}
+		e.preventDefault();
+		let i = d(n);
+		K.current = i, W(i), m(n, H) || U(f(n));
+	}, tt = (e) => {
+		let t = e.currentTarget;
+		!B || e.key !== "Tab" || e.altKey || e.ctrlKey || e.metaKey || !me(t, e.target, e.shiftKey) || (e.preventDefault(), (e.shiftKey ? B : pe(B, Be ?? B.ownerDocument.body, !1) ?? B).focus(), L(!1));
+	}, nt = new Intl.DateTimeFormat(Oe ?? Ne, {
+		year: "numeric",
+		month: "long"
+	}).format(X), rt = R ?? F;
+	return /* @__PURE__ */ g("div", {
+		...re(Me),
+		...n("date-picker", "root", {
+			state: I && !A && !j ? "open" : "closed",
+			disabled: A,
+			readonly: j,
+			invalid: M,
+			size: C
+		}),
+		ref: Re,
+		className: e(o.datePicker, ke),
+		style: Ae,
+		onClick: (e) => {
+			e.target === B && Ye();
+		},
+		children: [/* @__PURE__ */ h(ae.Provider, {
+			value: null,
+			children: /* @__PURE__ */ h(fe, {
+				ref: ze,
+				value: rt,
+				placeholder: ye ?? E("datePicker.placeholder"),
+				id: k.id,
+				"aria-label": N,
+				"aria-labelledby": P,
+				"aria-describedby": k["aria-describedby"],
+				"aria-invalid": M || void 0,
+				"aria-readonly": j || void 0,
+				required: Pe,
+				readOnly: j,
+				onChange: (e) => Ke(e.target.value),
+				onBlur: qe,
+				onKeyDown: (e) => {
+					e.key === "ArrowDown" && (e.preventDefault(), I ? V.current?.querySelector("[role=\"gridcell\"][tabindex=\"0\"]")?.focus() : (Ge(F), W(F || Q), We(!0), L(!0)));
+				},
+				name: Ee,
+				disabled: A,
+				size: C,
+				suffix: S && F && !A && !j ? /* @__PURE__ */ h(de, {
+					icon: /* @__PURE__ */ h(te, {
+						"aria-hidden": !0,
+						focusable: !1
+					}),
+					size: "small",
+					"aria-label": E("datePicker.clear"),
+					onClick: Je,
+					className: o.clearButton
+				}) : /* @__PURE__ */ h("span", {
+					className: o.calendarIcon,
+					"aria-hidden": "true",
+					...n("date-picker", "icon"),
+					children: /* @__PURE__ */ h(i, {})
+				})
+			})
+		}), /* @__PURE__ */ h(ue, {
+			ref: V,
+			open: I && !A && !j,
+			anchor: B,
+			placement: "bottom-start",
+			branches: () => [Le],
+			onDismiss: () => L(!1),
+			returnFocusOnEscape: () => B,
+			focusable: !0,
+			role: "dialog",
+			tabIndex: -1,
+			"aria-label": N,
+			"aria-labelledby": P,
+			className: o.popup,
+			onKeyDown: tt,
+			...n("date-picker", "content", { state: "open" }),
+			children: /* @__PURE__ */ g("div", {
+				className: o.panel,
+				children: [
+					/* @__PURE__ */ g("div", {
+						className: o.header,
+						children: [/* @__PURE__ */ h("h2", {
+							id: D,
+							className: o.heading,
+							"aria-live": "polite",
+							children: nt
+						}), /* @__PURE__ */ g("div", {
+							className: o.navGroup,
+							children: [/* @__PURE__ */ h("button", {
+								type: "button",
+								className: o.navButton,
+								"aria-label": E("monthCalendar.previousMonth"),
+								onClick: () => U(f(H, -1)),
+								children: /* @__PURE__ */ h(a, {
+									"aria-hidden": !0,
+									focusable: !1
+								})
+							}), /* @__PURE__ */ h("button", {
+								type: "button",
+								className: o.navButton,
+								"aria-label": E("monthCalendar.nextMonth"),
+								onClick: () => U(f(H, 1)),
+								children: /* @__PURE__ */ h(ee, {
+									"aria-hidden": !0,
+									focusable: !1
+								})
+							})]
+						})]
+					}),
+					/* @__PURE__ */ g("div", {
+						role: "grid",
+						"aria-labelledby": D,
+						className: o.grid,
+						children: [/* @__PURE__ */ h("div", {
+							role: "row",
+							className: o.week,
+							children: ve.map((e) => /* @__PURE__ */ h("div", {
+								role: "columnheader",
+								className: o.weekday,
+								children: E(`monthCalendar.weekdays.${e}`)
+							}, e))
+						}), Array.from({ length: 6 }, (e, t) => /* @__PURE__ */ h("div", {
+							role: "row",
+							className: o.week,
+							children: Ze.slice(t * 7, t * 7 + 7).map((e) => {
+								let t = d(e), n = F === t, r = !m(e, H), i = t === Q, a = q(t);
+								return /* @__PURE__ */ h("div", {
+									role: "gridcell",
+									className: o.day,
+									ref: (e) => {
+										e ? (G.current.set(t, e), (Ue && t === $ || K.current === t) && (K.current = null, e.focus())) : G.current.delete(t);
+									},
+									"data-date": t,
+									"data-outside": r ? "" : void 0,
+									"aria-label": t,
+									"aria-selected": n,
+									"aria-current": i ? "date" : void 0,
+									"aria-disabled": a || void 0,
+									tabIndex: !a && t === $ ? 0 : -1,
+									onFocus: () => W(t),
+									onClick: () => Y(e),
+									onKeyDown: (t) => et(t, e),
+									children: e.getDate()
+								}, t);
+							})
+						}, t))]
+					}),
+					/* @__PURE__ */ g("div", {
+						className: o.footer,
+						children: [/* @__PURE__ */ h("button", {
+							type: "button",
+							className: o.footerButton,
+							disabled: q(Q),
+							onClick: () => Y(Z),
+							children: E("datePicker.today")
+						}), S && F && /* @__PURE__ */ h("button", {
+							type: "button",
+							className: o.footerButton,
+							onClick: () => {
+								Je(), L(!1);
+							},
+							children: E("datePicker.clear")
+						})]
+					})
+				]
+			})
+		})]
+	});
+}, v = s.memo(_);
+//#endregion
+export { _ as DatePicker, v as default };
+
+//# sourceMappingURL=DatePicker.js.map

package/dist/react/components/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":["styles","IconButton","useI18n","IconButton_default","datePicker_module_default","React","WEEKDAYS","DatePicker","ariaLabel","ariaLabelledBy","ariaDescribedBy","requiredProp","readOnlyProp","invalidProp","disabledProp","rest","headingId","useId","fc","useFormControlContext","fieldProps","useFormControlProps","disabled","readOnly","required","invalid","accessibleName","label","t","labelledBy","warnControlledProps","value","onChange","current","setCurrent","useControllableState","defaultValue","open","setOpen","onOpenChange","draft","setDraft","useState","input","setInput","field","setField","setInputRef","useMergedRefs","ref","panelRef","useRef","tabContainer","useLayerParent","initialDate","parseDayKey","month","setMonth","monthStart","focusedKey","setFocusedKey","focusPanelOnOpen","setFocusPanelOnOpen","cells","pendingFocus","isDayDisabled","minDate","key","maxDate","commit","next","syncMonthFromValue","parsed","val","handleInputChange","text","dayKey","handleInputBlur","trimmed","handleClear","selectDate","date","toggle","prev","first","start","addDays","days","index","visibleKeys","today","todayKey","activeKey","sameMonth","monthKey","cell","handleDayKeyDown","event","target","weekday","logicalArrowKey","offset","lastDay","localDate","nextKey","handlePanelKeyDown","panel","tabLeavesPanel","adjacentTabbable","heading","locale","language","displayValue","pickDataAttributes","hooks","cn","className","FormControlContext","Input","placeholder","clearable","IconX","IconCalendar","FloatingPanel","IconChevronLeft","IconChevronRight","day","week","selected","outside","isToday","dayDisabled","element","DatePicker_default"],"sources":["../../../../../react/src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useEffect, useId, useRef, useState } from \"react\";\nimport {\n  addDays,\n  dayKey,\n  localDate,\n  monthStart,\n  parseDayKey,\n  sameMonth,\n} from \"@minerva/core\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  IconCalendar,\n  IconChevronLeft,\n  IconChevronRight,\n  IconX,\n} from \"../../internal/icons\";\nimport { Input } from \"../Input\";\nimport { IconButton } from \"../IconButton\";\nimport { FloatingPanel } from \"../../internal/FloatingPanel\";\nimport { useLayerParent } from \"../../internal/useDismissableLayer\";\nimport { adjacentTabbable, tabLeavesPanel } from \"../../internal/tabbing\";\nimport { useControllableState } from \"../../internal/useControllableState\";\nimport { warnControlledProps } from \"../../internal/devWarnings\";\nimport { useMergedRefs } from \"../../internal/mergeRefs\";\nimport useI18n from \"../../hooks/useI18n\";\nimport { pickDataAttributes } from \"../../internal/dataAttributes\";\nimport { logicalArrowKey } from \"../../internal/direction\";\nimport {\n  FormControlContext,\n  useFormControlContext,\n  useFormControlProps,\n} from \"../FormControl/context\";\nimport type { DatePickerProps } from \"./types\";\nimport { hooks } from \"../../internal/stylingHooks\";\nimport styles from \"./datePicker.module.scss\";\n\nconst WEEKDAYS = [\"mon\", \"tue\", \"wed\", \"thu\", \"fri\", \"sat\", \"sun\"] as const;\n\n/**\n * DatePicker: type a `\"YYYY-MM-DD\"` date or pick a day from a popup month\n * calendar grid. Works controlled (`value` + `onChange`) or uncontrolled\n * (`defaultValue`). Inside a FormControl the input picks up the field's id,\n * label, description, invalid, required, disabled and read-only state\n * (explicit props win).\n */\nconst DatePicker = ({\n  ref,\n  value,\n  defaultValue,\n  onChange,\n  placeholder,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  id,\n  required: requiredProp,\n  readOnly: readOnlyProp,\n  invalid: invalidProp,\n  name = \"date-picker\",\n  disabled: disabledProp,\n  clearable = true,\n  size = \"medium\",\n  minDate,\n  maxDate,\n  locale,\n  className = \"\",\n  style,\n  onOpenChange,\n  ...rest\n}: DatePickerProps) => {\n  const { t, language } = useI18n();\n  const headingId = useId();\n  const fc = useFormControlContext();\n  const fieldProps = useFormControlProps({\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n  });\n  const disabled = disabledProp ?? fc?.disabled ?? false;\n  const readOnly = readOnlyProp ?? fc?.readOnly ?? false;\n  const required = requiredProp ?? fc?.required ?? false;\n  const invalid = invalidProp ?? fc?.invalid ?? false;\n  const accessibleName = label ?? ariaLabel ?? t(\"datePicker.label\");\n  const labelledBy =\n    ariaLabelledBy ?? (fc && !label && !ariaLabel ? fc.labelId : undefined);\n\n  if (process.env.NODE_ENV !== \"production\") {\n    warnControlledProps(\"DatePicker\", {\n      prop: \"value\",\n      value: value === null ? \"\" : value,\n      defaultProp: \"defaultValue\",\n      defaultValue,\n      handlerProp: \"onChange\",\n      handler: onChange,\n      locked: disabled || readOnly,\n      lockHint: \"set `disabled` / `readOnly`\",\n    });\n  }\n\n  const normalizedValue = value === null ? \"\" : value;\n  const [current, setCurrent] = useControllableState<string>({\n    value: normalizedValue,\n    defaultValue: defaultValue ?? \"\",\n    name: \"DatePicker\",\n  });\n  const [open, setOpen] = useControllableState({\n    defaultValue: false,\n    onChange: onOpenChange,\n    name: \"DatePicker\",\n    prop: \"open\",\n  });\n\n  const [draft, setDraft] = useState<string | null>(null);\n  const [input, setInput] = useState<HTMLInputElement | null>(null);\n  const [field, setField] = useState<HTMLDivElement | null>(null);\n  const setInputRef = useMergedRefs<HTMLInputElement>(setInput, ref);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const tabContainer = useLayerParent();\n\n  const initialDate = parseDayKey(current || \"\") ?? new Date();\n  const [month, setMonth] = useState<Date>(() => monthStart(initialDate));\n  const [focusedKey, setFocusedKey] = useState(\"\");\n  const [focusPanelOnOpen, setFocusPanelOnOpen] = useState(false);\n  const cells = useRef(new Map<string, HTMLDivElement>());\n  const pendingFocus = useRef<string | null>(null);\n\n  const isDayDisabled = (key: string) => {\n    if (minDate && key < minDate) return true;\n    if (maxDate && key > maxDate) return true;\n    return false;\n  };\n\n  const commit = (next: string) => {\n    setCurrent(next);\n    onChange?.(next);\n  };\n\n  const syncMonthFromValue = (val: string) => {\n    const parsed = parseDayKey(val);\n    if (parsed) setMonth(monthStart(parsed));\n  };\n\n  const handleInputChange = (text: string) => {\n    setDraft(text);\n    if (text === \"\") {\n      commit(\"\");\n      return;\n    }\n    const parsed = parseDayKey(text, true);\n    if (parsed) {\n      const key = dayKey(parsed);\n      if (!isDayDisabled(key)) {\n        commit(key);\n        setMonth(monthStart(parsed));\n      }\n    }\n  };\n\n  const handleInputBlur = () => {\n    if (draft === null) return;\n    const trimmed = draft.trim();\n    if (trimmed === \"\") {\n      if (current) commit(\"\");\n    } else {\n      const parsed = parseDayKey(trimmed, false);\n      if (parsed) {\n        const key = dayKey(parsed);\n        if (!isDayDisabled(key) && key !== current) {\n          commit(key);\n          setMonth(monthStart(parsed));\n        }\n      }\n    }\n    setDraft(null);\n  };\n\n  const handleClear = () => {\n    setDraft(null);\n    commit(\"\");\n    input?.focus();\n  };\n\n  const selectDate = (date: Date) => {\n    const key = dayKey(date);\n    if (disabled || readOnly || isDayDisabled(key)) return;\n    setDraft(null);\n    commit(key);\n    setMonth(monthStart(date));\n    setOpen(false);\n    input?.focus();\n  };\n\n  const toggle = () => {\n    if (disabled || readOnly) return;\n    setFocusPanelOnOpen(false);\n    if (!open) syncMonthFromValue(current);\n    setOpen((prev) => !prev);\n  };\n\n  const first = monthStart(month);\n  const start = addDays(first, -((first.getDay() + 6) % 7));\n  const days = Array.from({ length: 42 }, (_, index) => addDays(start, index));\n  const visibleKeys = days.map(dayKey);\n  const today = new Date();\n  const todayKey = dayKey(today);\n  const activeKey = [\n    focusedKey,\n    current,\n    sameMonth(today, month) ? todayKey : \"\",\n    dayKey(first),\n  ].find((key) => key && visibleKeys.includes(key));\n  const monthKey = dayKey(first);\n\n  useEffect(() => {\n    if (!open || disabled || !pendingFocus.current) return;\n    const cell = cells.current.get(pendingFocus.current);\n    if (cell) {\n      pendingFocus.current = null;\n      cell.focus();\n    }\n  }, [open, monthKey, focusedKey, disabled]);\n\n  const handleDayKeyDown = (\n    event: React.KeyboardEvent<HTMLDivElement>,\n    date: Date,\n  ) => {\n    if (disabled || readOnly) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      if (!event.repeat) selectDate(date);\n      return;\n    }\n    let target: Date;\n    const weekday = (date.getDay() + 6) % 7;\n    switch (logicalArrowKey(event.key, event.currentTarget)) {\n      case \"ArrowLeft\":\n        target = addDays(date, -1);\n        break;\n      case \"ArrowRight\":\n        target = addDays(date, 1);\n        break;\n      case \"ArrowUp\":\n        target = addDays(date, -7);\n        break;\n      case \"ArrowDown\":\n        target = addDays(date, 7);\n        break;\n      case \"Home\":\n        target = addDays(date, -weekday);\n        break;\n      case \"End\":\n        target = addDays(date, 6 - weekday);\n        break;\n      case \"PageUp\":\n      case \"PageDown\": {\n        const offset =\n          (event.key === \"PageUp\" ? -1 : 1) * (event.shiftKey ? 12 : 1);\n        const next = monthStart(date, offset);\n        const lastDay = addDays(monthStart(next, 1), -1).getDate();\n        target = localDate(\n          next.getFullYear(),\n          next.getMonth(),\n          Math.min(date.getDate(), lastDay),\n        );\n        break;\n      }\n      default:\n        return;\n    }\n    event.preventDefault();\n    const nextKey = dayKey(target);\n    pendingFocus.current = nextKey;\n    setFocusedKey(nextKey);\n    if (!sameMonth(target, month)) setMonth(monthStart(target));\n  };\n\n  const handlePanelKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const panel = event.currentTarget;\n    if (\n      !input ||\n      event.key !== \"Tab\" ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      !tabLeavesPanel(panel, event.target as Element, event.shiftKey)\n    )\n      return;\n    event.preventDefault();\n    const next = event.shiftKey\n      ? input\n      : (adjacentTabbable(\n          input,\n          tabContainer ?? input.ownerDocument.body,\n          false,\n        ) ?? input);\n    next.focus();\n    setOpen(false);\n  };\n\n  const heading = new Intl.DateTimeFormat(locale ?? language, {\n    year: \"numeric\",\n    month: \"long\",\n  }).format(first);\n\n  const displayValue = draft ?? current;\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n    <div\n      {...pickDataAttributes(rest)}\n      {...hooks(\"date-picker\", \"root\", {\n        state: open && !disabled && !readOnly ? \"open\" : \"closed\",\n        disabled,\n        readonly: readOnly,\n        invalid,\n        size,\n      })}\n      ref={setField}\n      className={cn(styles.datePicker, className)}\n      style={style}\n      onClick={(e) => {\n        if (e.target === input) toggle();\n      }}\n    >\n      <FormControlContext.Provider value={null}>\n        <Input\n          ref={setInputRef}\n          value={displayValue}\n          placeholder={placeholder ?? t(\"datePicker.placeholder\")}\n          id={fieldProps.id}\n          aria-label={accessibleName}\n          aria-labelledby={labelledBy}\n          aria-describedby={fieldProps[\"aria-describedby\"]}\n          aria-invalid={invalid || undefined}\n          aria-readonly={readOnly || undefined}\n          required={required}\n          readOnly={readOnly}\n          onChange={(e) => handleInputChange(e.target.value)}\n          onBlur={handleInputBlur}\n          onKeyDown={(e) => {\n            if (e.key !== \"ArrowDown\") return;\n            e.preventDefault();\n            if (!open) {\n              syncMonthFromValue(current);\n              const focusTarget = current || todayKey;\n              setFocusedKey(focusTarget);\n              setFocusPanelOnOpen(true);\n              setOpen(true);\n            } else {\n              panelRef.current\n                ?.querySelector<HTMLElement>('[role=\"gridcell\"][tabindex=\"0\"]')\n                ?.focus();\n            }\n          }}\n          name={name}\n          disabled={disabled}\n          size={size}\n          suffix={\n            clearable && current && !disabled && !readOnly ? (\n              <IconButton\n                icon={<IconX aria-hidden focusable={false} />}\n                size=\"small\"\n                aria-label={t(\"datePicker.clear\")}\n                onClick={handleClear}\n                className={styles.clearButton}\n              />\n            ) : (\n              <span\n                className={styles.calendarIcon}\n                aria-hidden=\"true\"\n                {...hooks(\"date-picker\", \"icon\")}\n              >\n                <IconCalendar />\n              </span>\n            )\n          }\n        />\n      </FormControlContext.Provider>\n      <FloatingPanel\n        ref={panelRef}\n        open={open && !disabled && !readOnly}\n        anchor={input}\n        placement=\"bottom-start\"\n        branches={() => [field]}\n        onDismiss={() => setOpen(false)}\n        returnFocusOnEscape={() => input}\n        focusable\n        role=\"dialog\"\n        tabIndex={-1}\n        aria-label={accessibleName}\n        aria-labelledby={labelledBy}\n        className={styles.popup}\n        onKeyDown={handlePanelKeyDown}\n        {...hooks(\"date-picker\", \"content\", { state: \"open\" })}\n      >\n        <div className={styles.panel}>\n          <div className={styles.header}>\n            <h2 id={headingId} className={styles.heading} aria-live=\"polite\">\n              {heading}\n            </h2>\n            <div className={styles.navGroup}>\n              <button\n                type=\"button\"\n                className={styles.navButton}\n                aria-label={t(\"monthCalendar.previousMonth\")}\n                onClick={() => setMonth(monthStart(month, -1))}\n              >\n                <IconChevronLeft aria-hidden focusable={false} />\n              </button>\n              <button\n                type=\"button\"\n                className={styles.navButton}\n                aria-label={t(\"monthCalendar.nextMonth\")}\n                onClick={() => setMonth(monthStart(month, 1))}\n              >\n                <IconChevronRight aria-hidden focusable={false} />\n              </button>\n            </div>\n          </div>\n          <div role=\"grid\" aria-labelledby={headingId} className={styles.grid}>\n            <div role=\"row\" className={styles.week}>\n              {WEEKDAYS.map((day) => (\n                <div role=\"columnheader\" key={day} className={styles.weekday}>\n                  {t(`monthCalendar.weekdays.${day}`)}\n                </div>\n              ))}\n            </div>\n            {Array.from({ length: 6 }, (_, week) => (\n              <div role=\"row\" className={styles.week} key={week}>\n                {days.slice(week * 7, week * 7 + 7).map((date) => {\n                  const key = dayKey(date);\n                  const selected = current === key;\n                  const outside = !sameMonth(date, month);\n                  const isToday = key === todayKey;\n                  const dayDisabled = isDayDisabled(key);\n                  return (\n                    <div\n                      role=\"gridcell\"\n                      key={key}\n                      className={styles.day}\n                      ref={(element) => {\n                        if (element) {\n                          cells.current.set(key, element);\n                          if (\n                            (focusPanelOnOpen && key === activeKey) ||\n                            pendingFocus.current === key\n                          ) {\n                            pendingFocus.current = null;\n                            element.focus();\n                          }\n                        } else {\n                          cells.current.delete(key);\n                        }\n                      }}\n                      data-date={key}\n                      data-outside={outside ? \"\" : undefined}\n                      aria-label={key}\n                      aria-selected={selected}\n                      aria-current={isToday ? \"date\" : undefined}\n                      aria-disabled={dayDisabled || undefined}\n                      tabIndex={!dayDisabled && key === activeKey ? 0 : -1}\n                      onFocus={() => setFocusedKey(key)}\n                      onClick={() => selectDate(date)}\n                      onKeyDown={(event) => handleDayKeyDown(event, date)}\n                    >\n                      {date.getDate()}\n                    </div>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n          <div className={styles.footer}>\n            <button\n              type=\"button\"\n              className={styles.footerButton}\n              disabled={isDayDisabled(todayKey)}\n              onClick={() => selectDate(today)}\n            >\n              {t(\"datePicker.today\")}\n            </button>\n            {clearable && current && (\n              <button\n                type=\"button\"\n                className={styles.footerButton}\n                onClick={() => {\n                  handleClear();\n                  setOpen(false);\n                }}\n              >\n                {t(\"datePicker.clear\")}\n              </button>\n            )}\n          </div>\n        </div>\n      </FloatingPanel>\n    </div>\n  );\n};\n\nexport { DatePicker };\nexport default React.memo(DatePicker);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAMM,KAAW;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;AAAK,GAS3DC,KAAc,EAClB,QACA,UACA,iBACA,aACA,iBACA,UACA,cAAcC,GACd,mBAAmBC,IACnB,oBAAoBC,IACpB,QACA,UAAUC,IACV,UAAUC,IACV,SAASC,IACT,WAAO,eACP,UAAUC,IACV,eAAY,IACZ,UAAO,UACP,YACA,YACA,YACA,gBAAY,IACZ,WACA,kBACA,GAAGC,SACkB;CACrB,IAAM,EAAE,MAAG,iBAAab,EAAQ,GAC1Bc,IAAYC,GAAM,GAClBC,IAAKC,GAAsB,GAC3BC,IAAaC,GAAoB;EACrC;EACA,oBAAoBX;CACtB,CAAC,GACKY,IAAWR,MAAgBI,GAAI,YAAY,IAC3CK,IAAWX,MAAgBM,GAAI,YAAY,IAC3CM,KAAWb,MAAgBO,GAAI,YAAY,IAC3CO,IAAUZ,MAAeK,GAAI,WAAW,IACxCQ,IAAiBC,KAASnB,KAAaoB,EAAE,kBAAkB,GAC3DC,IACJpB,OAAmBS,KAAM,CAACS,KAAS,CAACnB,IAAYU,EAAG,UAAU,KAAA;CAE/D,AAAA,QAAA,IAAA,aAA6B,gBAC3BY,EAAoB,cAAc;EAChC,MAAM;EACN,OAAOC,MAAU,OAAO,KAAKA;EAC7B,aAAa;EACb;EACA,aAAa;EACb,SAASC;EACT,QAAQV,KAAYC;EACpB,UAAU;CACZ,CAAC;CAIH,IAAM,CAACU,GAASC,MAAcC,GAA6B;EACzD,OAFsBJ,MAAU,OAAO,KAAKA;EAG5C,cAAcK,KAAgB;EAC9B,MAAM;CACR,CAAC,GACK,CAACC,GAAMC,KAAWH,GAAqB;EAC3C,cAAc;EACd,UAAUI;EACV,MAAM;EACN,MAAM;CACR,CAAC,GAEK,CAACC,GAAOC,KAAYC,EAAwB,IAAI,GAChD,CAACC,GAAOC,MAAYF,EAAkC,IAAI,GAC1D,CAACG,IAAOC,MAAYJ,EAAgC,IAAI,GACxDK,KAAcC,GAAgCJ,IAAUK,CAAG,GAC3DC,IAAWC,EAAuB,IAAI,GACtCC,KAAeC,GAAe,GAE9BC,KAAcC,EAAYtB,KAAW,EAAE,qBAAK,IAAI,KAAK,GACrD,CAACuB,GAAOC,KAAYf,QAAqBgB,EAAWJ,EAAW,CAAC,GAChE,CAACK,IAAYC,KAAiBlB,EAAS,EAAE,GACzC,CAACmB,IAAkBC,MAAuBpB,EAAS,EAAK,GACxDqB,IAAQZ,kBAAO,IAAI,IAA4B,CAAC,GAChDa,IAAeb,EAAsB,IAAI,GAEzCc,KAAiB,MAErB,GADIC,KAAWC,IAAMD,KACjBE,KAAWD,IAAMC,IAIjBC,KAAU,MAAiB;EAE/B,AADAnC,GAAWoC,CAAI,GACftC,IAAWsC,CAAI;CACjB,GAEMC,MAAsB,MAAgB;EAC1C,IAAMC,IAASjB,EAAYkB,CAAG;EAC9B,AAAID,KAAQf,EAASC,EAAWc,CAAM,CAAC;CACzC,GAEME,MAAqB,MAAiB;EAE1C,IADAjC,EAASkC,CAAI,GACTA,MAAS,IAAI;GACf,EAAO,EAAE;GACT;EACF;EACA,IAAMH,IAASjB,EAAYoB,GAAM,EAAI;EACrC,IAAIH,GAAQ;GACV,IAAML,IAAMS,EAAOJ,CAAM;GACzB,AAAKP,EAAcE,CAAG,MACpBE,EAAOF,CAAG,GACVV,EAASC,EAAWc,CAAM,CAAC;EAE/B;CACF,GAEMK,WAAwB;EAC5B,IAAIrC,MAAU,MAAM;EACpB,IAAMsC,IAAUtC,EAAM,KAAK;EAC3B,IAAIsC,MAAY,IACV,AAAA7C,KAASoC,EAAO,EAAE;OACjB;GACL,IAAMG,IAASjB,EAAYuB,GAAS,EAAK;GACzC,IAAIN,GAAQ;IACV,IAAML,IAAMS,EAAOJ,CAAM;IACzB,AAAI,CAACP,EAAcE,CAAG,KAAKA,MAAQlC,MACjCoC,EAAOF,CAAG,GACVV,EAASC,EAAWc,CAAM,CAAC;GAE/B;EACF;EACA,EAAS,IAAI;CACf,GAEMO,WAAoB;EAGxB,AAFAtC,EAAS,IAAI,GACb4B,EAAO,EAAE,GACT1B,GAAO,MAAM;CACf,GAEMqC,KAAc,MAAe;EACjC,IAAMb,IAAMS,EAAOK,CAAI;EACvB,AAAI3D,KAAYC,KAAY0C,EAAcE,CAAG,MAC7C1B,EAAS,IAAI,GACb4B,EAAOF,CAAG,GACVV,EAASC,EAAWuB,CAAI,CAAC,GACzB3C,EAAQ,EAAK,GACbK,GAAO,MAAM;CACf,GAEMuC,WAAe;EACnB,AAAI5D,KAAYC,MAChBuC,GAAoB,EAAK,GACpBzB,KAAMkC,GAAmBtC,CAAO,GACrCK,GAAS,MAAS,CAAC6C,CAAI;CACzB,GAEMC,IAAQ1B,EAAWF,CAAK,GACxB6B,KAAQC,EAAQF,GAAO,GAAGA,EAAM,OAAO,IAAI,KAAK,EAAE,GAClDG,KAAO,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAUD,EAAQD,IAAOG,CAAK,CAAC,GACrEC,KAAcF,GAAK,IAAIX,CAAM,GAC7Bc,oBAAQ,IAAI,KAAK,GACjBC,IAAWf,EAAOc,CAAK,GACvBE,IAAY;EAChBjC;EACA1B;EACA4D,EAAUH,GAAOlC,CAAK,IAAImC,IAAW;EACrCf,EAAOQ,CAAK;CACd,CAAC,CAAC,MAAM,MAAQjB,KAAOsB,GAAY,SAAStB,CAAG,CAAC,GAC1C2B,KAAWlB,EAAOQ,CAAK;CAE7B,SAAgB;EACd,IAAI,CAAC/C,KAAQf,KAAY,CAAC0C,EAAa,SAAS;EAChD,IAAM+B,IAAOhC,EAAM,QAAQ,IAAIC,EAAa,OAAO;EACnD,AAAI+B,MACF,EAAa,UAAU,MACvBA,EAAK,MAAM;CAEf,GAAG;EAAC1D;EAAMyD;EAAUnC;EAAYrC;CAAQ,CAAC;CAEzC,IAAM0E,MACJ,GACA,MACG;EACH,IAAI1E,KAAYC,GAAU;EAC1B,IAAI0E,EAAM,QAAQ,WAAWA,EAAM,QAAQ,KAAK;GAE9C,AADAA,EAAM,eAAe,GAChBA,EAAM,UAAQjB,EAAWC,CAAI;GAClC;EACF;EACA,IAAIiB,GACEC,KAAWlB,EAAK,OAAO,IAAI,KAAK;EACtC,QAAQmB,GAAgBH,EAAM,KAAKA,EAAM,aAAa,GAAtD;GACE,KAAK;IACH,IAASX,EAAQL,GAAM,EAAE;IACzB;GACF,KAAK;IACH,IAASK,EAAQL,GAAM,CAAC;IACxB;GACF,KAAK;IACH,IAASK,EAAQL,GAAM,EAAE;IACzB;GACF,KAAK;IACH,IAASK,EAAQL,GAAM,CAAC;IACxB;GACF,KAAK;IACH,IAASK,EAAQL,GAAM,CAACkB,CAAO;IAC/B;GACF,KAAK;IACH,IAASb,EAAQL,GAAM,IAAIkB,CAAO;IAClC;GACF,KAAK;GACL,KAAK,YAAY;IACf,IAAME,KACHJ,EAAM,QAAQ,WAAW,KAAK,MAAMA,EAAM,WAAW,KAAK,IACvD3B,IAAOZ,EAAWuB,GAAMoB,CAAM,GAC9BC,IAAUhB,EAAQ5B,EAAWY,GAAM,CAAC,GAAG,EAAE,CAAC,CAAC,QAAQ;IACzD,IAASiC,GACPjC,EAAK,YAAY,GACjBA,EAAK,SAAS,GACd,KAAK,IAAIW,EAAK,QAAQ,GAAGqB,CAAO,CAClC;IACA;GACF;GACA,SACE;EACJ;EACA,EAAM,eAAe;EACrB,IAAME,IAAU5B,EAAOsB,CAAM;EAG7B,AAFA,EAAa,UAAUM,GACvB5C,EAAc4C,CAAO,GAChBX,EAAUK,GAAQ1C,CAAK,KAAGC,EAASC,EAAWwC,CAAM,CAAC;CAC5D,GAEMO,MAAsB,MAA+C;EACzE,IAAMC,IAAQT,EAAM;EACpB,AACE,CAACtD,KACDsD,EAAM,QAAQ,SACdA,EAAM,UACNA,EAAM,WACNA,EAAM,WACN,CAACU,GAAeD,GAAOT,EAAM,QAAmBA,EAAM,QAAQ,MAGhEA,EAAM,eAAe,IACRA,EAAM,WACftD,IACCiE,GACCjE,GACAS,MAAgBT,EAAM,cAAc,MACpC,EACF,KAAKA,EAAA,CACJ,MAAM,GACXL,EAAQ,EAAK;CACf,GAEMuE,KAAU,IAAI,KAAK,eAAeC,MAAUC,IAAU;EAC1D,MAAM;EACN,OAAO;CACT,CAAC,CAAC,CAAC,OAAO3B,CAAK,GAET4B,KAAexE,KAASP;CAE9B,OAEE,kBAAC,OAAD;EACE,GAAIgF,GAAmBlG,EAAI;EAC3B,GAAImG,EAAM,eAAe,QAAQ;GAC/B,OAAO7E,KAAQ,CAACf,KAAY,CAACC,IAAW,SAAS;GACjD;GACA,UAAUA;GACV;GACA;EACF,CAAC;EACD,KAAKuB;EACL,WAAWqE,EAAGnH,EAAO,YAAYoH,EAAS;EACnC;EACP,UAAU,MAAM;GACd,AAAI,EAAE,WAAWzE,KAAOuC,GAAO;EACjC;EAdF,UAAA,CAgBE,kBAACmC,GAAmB,UAApB;GAA6B,OAAO;GAClC,UAAA,kBAACC,IAAD;IACE,KAAKvE;IACL,OAAOiE;IACP,aAAaO,MAAe3F,EAAE,wBAAwB;IACtD,IAAIR,EAAW;IACf,cAAYM;IACZ,mBAAiBG;IACjB,oBAAkBT,EAAW;IAC7B,gBAAcK,KAAW,KAAA;IACzB,iBAAeF,KAAY,KAAA;IACjB;IACA;IACV,WAAW,MAAMmD,GAAkB,EAAE,OAAO,KAAK;IACjD,QAAQG;IACR,YAAY,MAAM;KAChB,AAAI,EAAE,QAAQ,gBACd,EAAE,eAAe,GACZxC,IAOHa,EAAS,SACL,cAA2B,qCAAiC,CAAC,EAC7D,MAAM,KARVqB,GAAmBtC,CAAO,GAE1B2B,EADoB3B,KAAW0D,CACN,GACzB7B,GAAoB,EAAI,GACxBxB,EAAQ,EAAI;IAMhB;IACM;IACI;IACJ;IACN,QACEkF,KAAavF,KAAW,CAACX,KAAY,CAACC,IACpC,kBAACtB,IAAD;KACE,MAAM,kBAACwH,IAAD;MAAO,eAAA;MAAY,WAAW;KAAQ,CAAA;KAC5C,MAAK;KACL,cAAY7F,EAAE,kBAAkB;KAChC,SAASmD;KACT,WAAW/E,EAAO;IACnB,CAAA,IAED,kBAAC,QAAD;KACE,WAAWA,EAAO;KAClB,eAAY;KACZ,GAAIkH,EAAM,eAAe,MAAM;KAE/B,UAAA,kBAACQ,GAAD,CAAe,CAAA;IACX,CAAA;GAGX,CAAA;EAC0B,CAAA,GAC7B,kBAACC,IAAD;GACE,KAAKzE;GACL,MAAMb,KAAQ,CAACf,KAAY,CAACC;GAC5B,QAAQoB;GACR,WAAU;GACV,gBAAgB,CAACE,EAAK;GACtB,iBAAiBP,EAAQ,EAAK;GAC9B,2BAA2BK;GAC3B,WAAA;GACA,MAAK;GACL,UAAU;GACV,cAAYjB;GACZ,mBAAiBG;GACjB,WAAW7B,EAAO;GAClB,WAAWyG;GACX,GAAIS,EAAM,eAAe,WAAW,EAAE,OAAO,OAAO,CAAC;GAErD,UAAA,kBAAC,OAAD;IAAK,WAAWlH,EAAO;IAAvB,UAAA;KACE,kBAAC,OAAD;MAAK,WAAWA,EAAO;MAAvB,UAAA,CACE,kBAAC,MAAD;OAAI,IAAIgB;OAAW,WAAWhB,EAAO;OAAS,aAAU;OACrD,UAAA6G;MACC,CAAA,GACJ,kBAAC,OAAD;OAAK,WAAW7G,EAAO;OAAvB,UAAA,CACE,kBAAC,UAAD;QACE,MAAK;QACL,WAAWA,EAAO;QAClB,cAAY4B,EAAE,6BAA6B;QAC3C,eAAe6B,EAASC,EAAWF,GAAO,EAAE,CAAC;QAE7C,UAAA,kBAACoE,GAAD;SAAiB,eAAA;SAAY,WAAW;QAAQ,CAAA;OAC1C,CAAA,GACR,kBAAC,UAAD;QACE,MAAK;QACL,WAAW5H,EAAO;QAClB,cAAY4B,EAAE,yBAAyB;QACvC,eAAe6B,EAASC,EAAWF,GAAO,CAAC,CAAC;QAE5C,UAAA,kBAACqE,IAAD;SAAkB,eAAA;SAAY,WAAW;QAAQ,CAAA;OAC3C,CAAA,CACL;MACF,CAAA,CAAA;;KACL,kBAAC,OAAD;MAAK,MAAK;MAAO,mBAAiB7G;MAAW,WAAWhB,EAAO;MAA/D,UAAA,CACE,kBAAC,OAAD;OAAK,MAAK;OAAM,WAAWA,EAAO;OAC/B,UAAAM,GAAS,KAAK,MACb,kBAAC,OAAD;QAAK,MAAK;QAAyB,WAAWN,EAAO;QAClD,UAAA4B,EAAE,0BAA0BkG,GAAK;OAC/B,GAFyBA,CAEzB,CACN;MACE,CAAA,GACJ,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,MAC7B,kBAAC,OAAD;OAAK,MAAK;OAAM,WAAW9H,EAAO;OAC/B,UAAAuF,GAAK,MAAMwC,IAAO,GAAGA,IAAO,IAAI,CAAC,CAAC,CAAC,KAAK,MAAS;QAChD,IAAM5D,IAAMS,EAAOK,CAAI,GACjB+C,IAAW/F,MAAYkC,GACvB8D,IAAU,CAACpC,EAAUZ,GAAMzB,CAAK,GAChC0E,IAAU/D,MAAQwB,GAClBwC,IAAclE,EAAcE,CAAG;QACrC,OACE,kBAAC,OAAD;SACE,MAAK;SAEL,WAAWnE,EAAO;SAClB,MAAM,MAAY;UAChB,AAAIoI,KACFrE,EAAM,QAAQ,IAAII,GAAKiE,CAAO,IAE3BvE,MAAoBM,MAAQyB,KAC7B5B,EAAa,YAAYG,OAEzB,EAAa,UAAU,MACvBiE,EAAQ,MAAM,MAGhBrE,EAAM,QAAQ,OAAOI,CAAG;SAE5B;SACA,aAAWA;SACX,gBAAc8D,IAAU,KAAK,KAAA;SAC7B,cAAY9D;SACZ,iBAAe6D;SACf,gBAAcE,IAAU,SAAS,KAAA;SACjC,iBAAeC,KAAe,KAAA;SAC9B,UAAU,CAACA,KAAehE,MAAQyB,IAAY,IAAI;SAClD,eAAehC,EAAcO,CAAG;SAChC,eAAea,EAAWC,CAAI;SAC9B,YAAY,MAAUe,GAAiBC,GAAOhB,CAAI;SAEjD,UAAAA,EAAK,QAAQ;QACX,GA5BEd,CA4BF;OAET,CAAC;MACE,GAzCwC4D,CAyCxC,CACN,CACE;;KACL,kBAAC,OAAD;MAAK,WAAW/H,EAAO;MAAvB,UAAA,CACE,kBAAC,UAAD;OACE,MAAK;OACL,WAAWA,EAAO;OAClB,UAAUiE,EAAc0B,CAAQ;OAChC,eAAeX,EAAWU,CAAK;OAE9B,UAAA9D,EAAE,kBAAkB;MACf,CAAA,GACP4F,KAAavF,KACZ,kBAAC,UAAD;OACE,MAAK;OACL,WAAWjC,EAAO;OAClB,eAAe;QAEb,AADA+E,GAAY,GACZzC,EAAQ,EAAK;OACf;OAEC,UAAAV,EAAE,kBAAkB;MACf,CAAA,CAEP;;IACF;;EACQ,CAAA,CACZ;;AAET,GAGAyG,IAAehI,EAAM,KAAKE,CAAU"}

package/dist/react/components/DatePicker/datePicker.module.scss.cjs

@@ -0,0 +1,2 @@
+"use client";var e=`_datePicker_6el17_1`,t=`_clearButton_6el17_6`,n=`_calendarIcon_6el17_22`,r=`_popup_6el17_29`,i=`_panel_6el17_34`,a=`_header_6el17_46`,o=`_heading_6el17_54`,s=`_navGroup_6el17_61`,c=`_navButton_6el17_67`,l=`_grid_6el17_92`,u=`_week_6el17_96`,d=`_weekday_6el17_103`,f=`_day_6el17_111`,p=`_footer_6el17_157`,m=`_footerButton_6el17_165`,h={datePicker:e,clearButton:t,calendarIcon:n,popup:r,panel:i,header:a,heading:o,navGroup:s,navButton:c,grid:l,week:u,weekday:d,day:f,footer:p,footerButton:m};exports.calendarIcon=n,exports.clearButton=t,exports.datePicker=e,exports.day=f,exports.default=h,exports.footer=p,exports.footerButton=m,exports.grid=l,exports.header=a,exports.heading=o,exports.navButton=c,exports.navGroup=s,exports.panel=i,exports.popup=r,exports.week=u,exports.weekday=d;
+//# sourceMappingURL=datePicker.module.scss.cjs.map

package/dist/react/components/DatePicker/datePicker.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"datePicker.module.scss.cjs","names":["datePicker","clearButton","calendarIcon","popup","panel","header","heading","navGroup","navButton","grid","week","weekday","day","footer","footerButton","datePicker_module_default"],"sources":["../../../../../react/src/components/DatePicker/datePicker.module.scss"],"sourcesContent":["// Public CSS variables (set them on the date picker or any ancestor; the\n// panel is portaled, so set its variables on :root or the popup class):\n// @css-var --date-picker-width Width of the field\n// @css-var --date-picker-panel-width Width of the popup calendar panel\n// @css-var --date-picker-panel-radius Corner radius of the popup panel (defaults to --radius-lg)\n// @css-var --date-picker-panel-padding Inner padding of the popup panel\n// @css-var --date-picker-cell-size Width and height of a day cell in the popup grid\n.datePicker {\n  display: inline-block;\n  position: relative;\n  width: var(--date-picker-width, 100%);\n\n  .clearButton {\n    opacity: 0.45;\n    transition: opacity var(--transition-base);\n    color: var(--text-secondary-color);\n\n    &:hover,\n    &:focus-visible {\n      opacity: 1;\n      color: var(--text-color);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--focus-ring-color);\n      outline-offset: 2px;\n    }\n  }\n\n  &:hover .clearButton {\n    opacity: 0.8;\n  }\n\n  .calendarIcon {\n    display: inline-flex;\n    align-items: center;\n    padding: 0 var(--space-1-5);\n    color: var(--text-secondary-color);\n  }\n}\n\n.popup {\n  z-index: var(--z-dropdown);\n  outline: none;\n}\n\n.panel {\n  width: var(--date-picker-panel-width, 17.5rem);\n  padding: var(--date-picker-panel-padding, var(--space-3));\n  border: 1px solid var(--border-color);\n  border-radius: var(--date-picker-panel-radius, var(--radius-lg));\n  background: var(--surface-elevated-color, var(--surface-color));\n  box-shadow: var(--shadow-lg);\n  color: var(--text-color);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-sm);\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin-bottom: var(--space-2);\n}\n\n.heading {\n  margin: 0;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--line-height-tight);\n}\n\n.navGroup {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n}\n\n.navButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--control-height-sm, 1.75rem);\n  height: var(--control-height-sm, 1.75rem);\n  padding: 0;\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-md);\n  background: var(--surface-color);\n  color: var(--text-color);\n  cursor: pointer;\n  transition:\n    background-color var(--transition-fast),\n    border-color var(--transition-fast);\n\n  &:hover:not(:disabled) {\n    background: var(--hover-color);\n    border-color: var(--border-strong-color);\n  }\n\n  &:focus-visible {\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    border-color: var(--primary-color);\n    box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color);\n  }\n}\n\n.grid {\n  width: 100%;\n}\n\n.week {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 2px;\n  margin-bottom: 2px;\n}\n\n.weekday {\n  padding-block: var(--space-1);\n  text-align: center;\n  color: var(--text-muted-color);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n}\n\n.day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--date-picker-cell-size, 2rem);\n  padding: 0;\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  background: transparent;\n  color: var(--text-color);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition:\n    background-color var(--transition-fast),\n    border-color var(--transition-fast),\n    color var(--transition-fast);\n\n  &:hover:not([aria-disabled=\"true\"]) {\n    background: var(--hover-color);\n  }\n\n  &[data-outside] {\n    color: var(--text-disabled-color);\n  }\n\n  &[aria-current=\"date\"] {\n    border-color: var(--primary-color);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  &[aria-selected=\"true\"] {\n    border-color: var(--primary-color);\n    background: var(--primary-color);\n    color: var(--text-inverse-color);\n    font-weight: var(--font-weight-semibold);\n\n    &:hover {\n      background: var(--primary-color-hover, var(--primary-color));\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: 2px solid transparent;\n    outline-offset: -2px;\n    border-color: var(--primary-color);\n    box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color);\n  }\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin-top: var(--space-2);\n}\n\n.footerButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--control-height-sm, 1.75rem);\n  padding: 0 var(--space-2-5);\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  background: transparent;\n  color: var(--primary-color-text, var(--primary-color));\n  font: inherit;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  cursor: pointer;\n  transition: background-color var(--transition-fast);\n\n  &:hover:not(:disabled) {\n    background: var(--hover-color);\n  }\n\n  &:focus-visible {\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .navButton,\n  .day,\n  .footerButton {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .day[aria-selected=\"true\"] {\n    outline: 2px solid Highlight;\n    outline-offset: -2px;\n  }\n}\n"],"mappings":""}

package/dist/react/components/DatePicker/datePicker.module.scss.js

@@ -0,0 +1,23 @@
+"use client";
+//#region src/components/DatePicker/datePicker.module.scss
+var e = "_datePicker_6el17_1", t = "_clearButton_6el17_6", n = "_calendarIcon_6el17_22", r = "_popup_6el17_29", i = "_panel_6el17_34", a = "_header_6el17_46", o = "_heading_6el17_54", s = "_navGroup_6el17_61", c = "_navButton_6el17_67", l = "_grid_6el17_92", u = "_week_6el17_96", d = "_weekday_6el17_103", f = "_day_6el17_111", p = "_footer_6el17_157", m = "_footerButton_6el17_165", h = {
+	datePicker: e,
+	clearButton: t,
+	calendarIcon: n,
+	popup: r,
+	panel: i,
+	header: a,
+	heading: o,
+	navGroup: s,
+	navButton: c,
+	grid: l,
+	week: u,
+	weekday: d,
+	day: f,
+	footer: p,
+	footerButton: m
+};
+//#endregion
+export { n as calendarIcon, t as clearButton, e as datePicker, f as day, h as default, p as footer, m as footerButton, l as grid, a as header, o as heading, c as navButton, s as navGroup, i as panel, r as popup, u as week, d as weekday };
+
+//# sourceMappingURL=datePicker.module.scss.js.map

package/dist/react/components/DatePicker/datePicker.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datePicker.module.scss.js","names":["datePicker","clearButton","calendarIcon","popup","panel","header","heading","navGroup","navButton","grid","week","weekday","day","footer","footerButton","datePicker_module_default"],"sources":["../../../../../react/src/components/DatePicker/datePicker.module.scss"],"sourcesContent":["// Public CSS variables (set them on the date picker or any ancestor; the\n// panel is portaled, so set its variables on :root or the popup class):\n// @css-var --date-picker-width Width of the field\n// @css-var --date-picker-panel-width Width of the popup calendar panel\n// @css-var --date-picker-panel-radius Corner radius of the popup panel (defaults to --radius-lg)\n// @css-var --date-picker-panel-padding Inner padding of the popup panel\n// @css-var --date-picker-cell-size Width and height of a day cell in the popup grid\n.datePicker {\n  display: inline-block;\n  position: relative;\n  width: var(--date-picker-width, 100%);\n\n  .clearButton {\n    opacity: 0.45;\n    transition: opacity var(--transition-base);\n    color: var(--text-secondary-color);\n\n    &:hover,\n    &:focus-visible {\n      opacity: 1;\n      color: var(--text-color);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--focus-ring-color);\n      outline-offset: 2px;\n    }\n  }\n\n  &:hover .clearButton {\n    opacity: 0.8;\n  }\n\n  .calendarIcon {\n    display: inline-flex;\n    align-items: center;\n    padding: 0 var(--space-1-5);\n    color: var(--text-secondary-color);\n  }\n}\n\n.popup {\n  z-index: var(--z-dropdown);\n  outline: none;\n}\n\n.panel {\n  width: var(--date-picker-panel-width, 17.5rem);\n  padding: var(--date-picker-panel-padding, var(--space-3));\n  border: 1px solid var(--border-color);\n  border-radius: var(--date-picker-panel-radius, var(--radius-lg));\n  background: var(--surface-elevated-color, var(--surface-color));\n  box-shadow: var(--shadow-lg);\n  color: var(--text-color);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-sm);\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin-bottom: var(--space-2);\n}\n\n.heading {\n  margin: 0;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--line-height-tight);\n}\n\n.navGroup {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n}\n\n.navButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--control-height-sm, 1.75rem);\n  height: var(--control-height-sm, 1.75rem);\n  padding: 0;\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-md);\n  background: var(--surface-color);\n  color: var(--text-color);\n  cursor: pointer;\n  transition:\n    background-color var(--transition-fast),\n    border-color var(--transition-fast);\n\n  &:hover:not(:disabled) {\n    background: var(--hover-color);\n    border-color: var(--border-strong-color);\n  }\n\n  &:focus-visible {\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    border-color: var(--primary-color);\n    box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color);\n  }\n}\n\n.grid {\n  width: 100%;\n}\n\n.week {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 2px;\n  margin-bottom: 2px;\n}\n\n.weekday {\n  padding-block: var(--space-1);\n  text-align: center;\n  color: var(--text-muted-color);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n}\n\n.day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: var(--date-picker-cell-size, 2rem);\n  padding: 0;\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  background: transparent;\n  color: var(--text-color);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition:\n    background-color var(--transition-fast),\n    border-color var(--transition-fast),\n    color var(--transition-fast);\n\n  &:hover:not([aria-disabled=\"true\"]) {\n    background: var(--hover-color);\n  }\n\n  &[data-outside] {\n    color: var(--text-disabled-color);\n  }\n\n  &[aria-current=\"date\"] {\n    border-color: var(--primary-color);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  &[aria-selected=\"true\"] {\n    border-color: var(--primary-color);\n    background: var(--primary-color);\n    color: var(--text-inverse-color);\n    font-weight: var(--font-weight-semibold);\n\n    &:hover {\n      background: var(--primary-color-hover, var(--primary-color));\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: 2px solid transparent;\n    outline-offset: -2px;\n    border-color: var(--primary-color);\n    box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color);\n  }\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin-top: var(--space-2);\n}\n\n.footerButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--control-height-sm, 1.75rem);\n  padding: 0 var(--space-2-5);\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  background: transparent;\n  color: var(--primary-color-text, var(--primary-color));\n  font: inherit;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  cursor: pointer;\n  transition: background-color var(--transition-fast);\n\n  &:hover:not(:disabled) {\n    background: var(--hover-color);\n  }\n\n  &:focus-visible {\n    outline: 2px solid transparent;\n    outline-offset: 2px;\n    box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .navButton,\n  .day,\n  .footerButton {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .day[aria-selected=\"true\"] {\n    outline: 2px solid Highlight;\n    outline-offset: -2px;\n  }\n}\n"],"mappings":""}

package/dist/react/components/DatePicker/index.cjs

@@ -0,0 +1 @@
+"use client";const e=require("./DatePicker.cjs");exports.DatePicker=e.default;

package/dist/react/components/DatePicker/index.d.cts

@@ -0,0 +1,5 @@
+import { default as DatePicker } from './DatePicker.cjs';
+import { DatePickerProps } from './types.cjs';
+export { DatePicker };
+export type { DatePickerProps };
+export default DatePicker;

package/dist/react/components/DatePicker/index.d.ts

@@ -0,0 +1,5 @@
+import { default as DatePicker } from './DatePicker.js';
+import { DatePickerProps } from './types.js';
+export { DatePicker };
+export type { DatePickerProps };
+export default DatePicker;

package/dist/react/components/DatePicker/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./DatePicker.js";
+export { e as DatePicker };

package/dist/react/components/DatePicker/types.d.cts

@@ -0,0 +1,97 @@
+import { CSSProperties, Ref } from 'react';
+import { DataAttributes } from '../../internal/dataAttributes.cjs';
+/** Props of DatePicker; `data-*` attributes are forwarded to the root element */
+export interface DatePickerProps extends DataAttributes {
+    /** Ref to the <input> element */
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * Selected date as `"YYYY-MM-DD"` (controlled; pair with `onChange`).
+     * `""` or `null` means "no date" while staying controlled; `undefined`
+     * makes the picker uncontrolled.
+     */
+    value?: string | null;
+    /** Initially selected date as `"YYYY-MM-DD"` (uncontrolled) */
+    defaultValue?: string;
+    /**
+     * Called with the selected date (`"YYYY-MM-DD"`), or `""` when the value
+     * is cleared
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Placeholder of the input
+     * @default "Select date" (localized)
+     */
+    placeholder?: string;
+    /** Visible label of the input; without it the input is labelled "Date" (localized) */
+    label?: string;
+    /** Accessible label of the input when no visible label is shown */
+    "aria-label"?: string;
+    /**
+     * Id(s) of the element(s) labelling the input; inside a FormControl it
+     * defaults to the FormLabel (unless `label` / `aria-label` is set)
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Id(s) of the element(s) describing the input; merged with the helper /
+     * error text of an enclosing FormControl
+     */
+    "aria-describedby"?: string;
+    /** Id of the input; defaults to the id of an enclosing FormControl */
+    id?: string;
+    /**
+     * Marks the input as required; defaults to the enclosing FormControl's state
+     */
+    required?: boolean;
+    /**
+     * Shows the value without allowing changes (typing, panel, clearing);
+     * defaults to the enclosing FormControl's state
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the input as invalid (aria-invalid); defaults to the enclosing
+     * FormControl's state
+     */
+    invalid?: boolean;
+    /**
+     * Name of the input
+     * @default "date-picker"
+     */
+    name?: string;
+    /** Called when the popup calendar opens or closes */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Disables the picker; defaults to the enclosing FormControl's state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows clearing the value with the suffix button
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Size of the input
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Earliest selectable date (`"YYYY-MM-DD"`); earlier days are disabled
+     */
+    minDate?: string;
+    /**
+     * Latest selectable date (`"YYYY-MM-DD"`); later days are disabled
+     */
+    maxDate?: string;
+    /**
+     * Locale of the month heading (`Intl.DateTimeFormat`)
+     * @default the library language
+     */
+    locale?: string;
+    /**
+     * Additional class name
+     * @default ""
+     */
+    className?: string;
+    /** Inline styles of the root element */
+    style?: CSSProperties;
+}

package/dist/react/components/DatePicker/types.d.ts

@@ -0,0 +1,97 @@
+import { CSSProperties, Ref } from 'react';
+import { DataAttributes } from '../../internal/dataAttributes.js';
+/** Props of DatePicker; `data-*` attributes are forwarded to the root element */
+export interface DatePickerProps extends DataAttributes {
+    /** Ref to the <input> element */
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * Selected date as `"YYYY-MM-DD"` (controlled; pair with `onChange`).
+     * `""` or `null` means "no date" while staying controlled; `undefined`
+     * makes the picker uncontrolled.
+     */
+    value?: string | null;
+    /** Initially selected date as `"YYYY-MM-DD"` (uncontrolled) */
+    defaultValue?: string;
+    /**
+     * Called with the selected date (`"YYYY-MM-DD"`), or `""` when the value
+     * is cleared
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Placeholder of the input
+     * @default "Select date" (localized)
+     */
+    placeholder?: string;
+    /** Visible label of the input; without it the input is labelled "Date" (localized) */
+    label?: string;
+    /** Accessible label of the input when no visible label is shown */
+    "aria-label"?: string;
+    /**
+     * Id(s) of the element(s) labelling the input; inside a FormControl it
+     * defaults to the FormLabel (unless `label` / `aria-label` is set)
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Id(s) of the element(s) describing the input; merged with the helper /
+     * error text of an enclosing FormControl
+     */
+    "aria-describedby"?: string;
+    /** Id of the input; defaults to the id of an enclosing FormControl */
+    id?: string;
+    /**
+     * Marks the input as required; defaults to the enclosing FormControl's state
+     */
+    required?: boolean;
+    /**
+     * Shows the value without allowing changes (typing, panel, clearing);
+     * defaults to the enclosing FormControl's state
+     */
+    readOnly?: boolean;
+    /**
+     * Marks the input as invalid (aria-invalid); defaults to the enclosing
+     * FormControl's state
+     */
+    invalid?: boolean;
+    /**
+     * Name of the input
+     * @default "date-picker"
+     */
+    name?: string;
+    /** Called when the popup calendar opens or closes */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Disables the picker; defaults to the enclosing FormControl's state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allows clearing the value with the suffix button
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Size of the input
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Earliest selectable date (`"YYYY-MM-DD"`); earlier days are disabled
+     */
+    minDate?: string;
+    /**
+     * Latest selectable date (`"YYYY-MM-DD"`); later days are disabled
+     */
+    maxDate?: string;
+    /**
+     * Locale of the month heading (`Intl.DateTimeFormat`)
+     * @default the library language
+     */
+    locale?: string;
+    /**
+     * Additional class name
+     * @default ""
+     */
+    className?: string;
+    /** Inline styles of the root element */
+    style?: CSSProperties;
+}