@devslab/dds-react 0.21.1 → 0.22.0

package/README.ko.md

@@ -47,3 +47,21 @@ const StatusPill = createStatusPill({
 ```
 
 Unknown closed-domain status values throw to expose incomplete catalogs. Domains listed in `openDomains` instead show the unknown value as escaped text.
+
+### DatePicker 직접 입력과 저장
+
+`value`/`onChange`는 기존과 같이 날짜 전용 `YYYY-MM-DD` 문자열과 명시적 지우기 `''`만 전달합니다. 입력한 날짜가 완전하고 실재하면 즉시 반영하며 잘못되거나 미완성인 입력을 이전 날짜로 치환하지 않습니다. `required`는 실제 입력의 필수 상태로 전달하고, `readOnly`는 편집과 달력 열기를 막습니다. 잠금 전환 시 열린 달력을 닫습니다. 잘못된 저장 기본값은 원문과 오류를 표시합니다.
+
+`onValidityChange(state: DatePickerValidity)`는 원문 `inputValue`, `valid`, 사유(`valid`, `required`, `incomplete`, `invalid`, `rangeUnderflow`, `rangeOverflow`)를 전달합니다. 실제 form은 보이는 입력의 custom validity를 사용합니다. API·버튼·단축키 저장은 반드시 이 콜백의 `valid`를 검사하고 canonical `value`를 저장해야 합니다. 첫 콜백 전에는 저장을 막으세요. 잘못된 draft를 표시하는 동안 부모 `value`에는 이전 유효 날짜가 남을 수 있으므로 `value`만으로 유효성을 판단하면 안 됩니다.
+
+엄격한 Gregorian 날짜와 양 끝을 포함한 min/max를 날짜 전용 값으로 검사하며 조용히 보정하지 않습니다. 필수 입력을 비워도 `onChange('')`는 전달하며 validity는 false입니다. 서버의 최종 검증은 유지해야 합니다. 라이브러리 테스트 통과만으로 제품의 저장 요청이 이 검사를 사용하는지 보장하지 않습니다.
+기본 한국어(`ko`, `ko-KR`)의 표시 형식은 `YYYY/MM/DD`이며 `value`, `onChange`, min/max, `DatePickerValidity.value`는 `YYYY-MM-DD`를 유지합니다. `inputValue`는 화면 원문이므로 API에 저장하거나 소비자에서 구분자를 치환하지 마세요. 유효하지 않거나 미완성인 입력과 필수 빈 값의 callback `value`는 null, 선택 빈 값은 ''입니다. 표시/저장 변환은 DDS 공통에서만 처리하며 시간대 때문에 날짜를 이동하지 않습니다.
+
+validity callback은 최초 mount, 의미 있는 입력·제약·외부 값 변경을 보고합니다. invalid/partial 입력은 `onChange`를 호출하지 않으므로 dirty/이탈 방지와 발행 확인 취소도 validity callback에 연결해야 합니다. callback 함수 identity만 바뀌면 같은 결과를 재보고하지 않아 inline setState 루프를 막습니다. 새 편집기는 문서 ID·명시적 reset revision을 key로 새로 mount하고 useCallback으로 안정적인 함수를 사용하세요. 같은 날짜여도 새 keyed 편집기는 초기 결과를 받습니다. 유효할 때 canonical value, invalid일 때 raw inputValue로 pristine 상태를 비교하면 표시 언어만 바뀔 때의 오탐과 소비자 포맷 코드를 피할 수 있습니다. 영문 예제의 keyed editor·baseline·previous 패턴을 참고하세요.
+
+아직 반영되지 않은 로컬 값과 일치하는 부모 값은 해당 발생 건의 응답으로 보고 최신 draft를 유지합니다. B/C/B 반복을 각각 보존하고 blur/Enter 중복 commit을 막습니다. 미반영 목록에 없는 다른 외부 값은 reset으로 처리합니다. 같은 문자열만으로는 미반영 값과 같은 의도적 reset을 응답과 구별할 수 없으므로 명시적 reset은 keyed editor remount를 사용하세요. 로컬 controlled state는 즉시 갱신하고 서버 저장을 분리하세요.
+## 입력·선택·메뉴·공유 달력
+
+Input/InputGroup은 검색 전용이 아닌 일반 입력 기반이며 라벨 배치·내용 지우기를 지원합니다. Combobox/SelectPicker는 가상화를, DropdownMenu/Popover는 접근 가능한 팝업을, Calendar/DatePicker는 공유 달력을 제공합니다.
+
+상세 import: `@devslab/dds-react/input`, `/combobox`, `/select-picker`, `/dropdown-menu`, `/popover`, `/calendar`, `/date-picker`. 기존 루트 import와 `styles.css`는 유지합니다. [공통 사용 가이드](https://github.com/devslab-kr/dds/blob/main/docs/components-input-choice-calendar.ko.md)를 참고하세요.

package/README.md

@@ -53,3 +53,49 @@ const StatusPill = createStatusPill({
 ```
 
 Unknown closed-domain status values throw to expose incomplete catalogs. Domains listed in `openDomains` instead show the unknown value as escaped text.
+
+### DatePicker manual input and saving
+
+`value`/`onChange` remain canonical date-only `YYYY-MM-DD` strings (or intentional clear `''`). Complete real dates commit while typing; invalid/incomplete text stays visible and never becomes a replacement date. `required` forwards native/accessible required state; `readOnly` prevents edits/calendar opening. Locked transitions close the portal. Invalid persisted values render an error without being parsed or cleared.
+
+Subscribe to `onValidityChange(state: DatePickerValidity)` for the exact displayed `inputValue`, canonical `value` (or null while invalid), `valid`, and reason (`valid`, `required`, `incomplete`, `invalid`, `rangeUnderflow`, `rangeOverflow`). Native forms use the visible input's custom validity. API/button/shortcut saves MUST also check the callback state; a canonical parent value may still contain the last valid selection while the visible draft is invalid. Start unknown/blocked until the initial callback. Do not infer validity from `value` alone.
+
+```tsx
+const [date, setDate] = useState('2028-02-28');
+const [dateValidity, setDateValidity] = useState<DatePickerValidity | null>(null);
+<DatePicker label="Date" value={date} onChange={setDate}
+  required onValidityChange={setDateValidity} />
+// In every save handler (including shortcuts):
+if (!dateValidity?.valid || dateValidity.value === null) return;
+await save({ date: dateValidity.value });
+```
+
+Strict Gregorian dates and inclusive min/max are validated without timezone normalization or silent clamping. Clearing always reports `onChange('')`; required clear remains invalid. Keep authoritative server validation. Library tests alone do not establish that a consumer's request handler uses this guard.
+Korean (`ko`, `ko-KR`, including the default locale) displays `YYYY/MM/DD`; `value`, `onChange`, min/max and `DatePickerValidity.value` remain `YYYY-MM-DD`. Consumers must not replace separators or persist `inputValue`. ISO paste is accepted by the common parser and normalized only once it is a complete valid date. Date-only values do not shift with timeZone.
+
+`onValidityChange` reports initially and on semantic draft/constraint/controlled-value changes, including invalid/partial edits that do not emit `onChange`. Use it for dirty/navigation guards and to cancel a pending publish confirmation when input changes. Replacing only the callback function does not replay an identical report: this prevents inline setState render loops. Key the owning editor by document identity/reset revision, and keep callbacks stable with useCallback. A new keyed instance receives a fresh initial report even for an identical date. Compare canonical value for valid dates and the raw inputValue for invalid drafts when tracking the pristine baseline; do not generate a consumer-side display formatter. Remount/reset that baseline only on an intentional editor change/reset.
+
+```tsx
+<PolicyDateEditor key={`${document.id}:${document.revision}`} document={document} />
+// Inside PolicyDateEditor (one editor identity):
+const baseline = useRef<string | undefined>(undefined);
+const previous = useRef<string | undefined>(undefined);
+const onDateValidity = useCallback((state: DatePickerValidity) => {
+  setDateValidity(state);
+  const stateKey = JSON.stringify(state.valid ? [true, state.value] : [false, state.inputValue]);
+  if (baseline.current === undefined) baseline.current = stateKey;
+  setDirty(stateKey !== baseline.current);
+  if (previous.current !== undefined && previous.current !== stateKey) {
+    closePublishConfirmation();
+  }
+  previous.current = stateKey;
+}, [closePublishConfirmation]); // Keep closePublishConfirmation stable too.
+// Every button/API/shortcut Save checks valid and persists state.value only.
+```
+
+Delayed controlled echoes matching an outstanding local emission acknowledge that occurrence without replacing a newer draft. Repeated B/C/B is retained as three occurrences; duplicate blur/Enter does not emit again. A changed value not among pending emissions is an external reset and clears pending history. The string-only API cannot distinguish an intentional reset to a still-outstanding identical value from its acknowledgement; use a keyed editor remount for an explicit reset. Keep local controlled state synchronous and persist to the server separately. Unacknowledged emissions are retained until acknowledgement, external reset or unmount.
+## Inputs, choices, overlays and shared calendars
+
+Input/InputGroup are general-purpose native inputs, not search-only, with label placement and clear actions. Combobox/SelectPicker support fixed-row virtualization; DropdownMenu/Popover provide accessible overlays; Calendar/DatePicker share a calendar view.
+
+Use explicit subpaths `@devslab/dds-react/input`, `/combobox`, `/select-picker`, `/dropdown-menu`, `/popover`, `/calendar`, `/date-picker`, or the existing root exports. Keep importing `styles.css` once. See the [common usage guide](https://github.com/devslab-kr/dds/blob/main/docs/components-input-choice-calendar.md).

package/dist/calendar-view-I_sNlioP.js

@@ -0,0 +1,145 @@
+import { t as e } from "./controls-BajigKUv.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { DatePicker as i } from "@ark-ui/react/date-picker";
+//#region src/date-only.ts
+function a(e) {
+	if (!/^\d{4}-\d{2}-\d{2}$/.test(e)) return !1;
+	let t = Number(e.slice(0, 4)), n = Number(e.slice(5, 7)), r = Number(e.slice(8, 10));
+	return t < 1 || n < 1 || n > 12 || r < 1 ? !1 : r <= [
+		31,
+		t % 4 == 0 && (t % 100 != 0 || t % 400 == 0) ? 29 : 28,
+		31,
+		30,
+		31,
+		30,
+		31,
+		31,
+		30,
+		31,
+		30,
+		31
+	][n - 1];
+}
+function o(e) {
+	return /^ko(?:-|$)/i.test(e);
+}
+function s(e, t) {
+	return o(t) && a(e) ? e.replaceAll("-", "/") : e;
+}
+function c(e, t) {
+	return o(t) && /^\d{4}\/\d{2}\/\d{2}$/.test(e) ? e.replaceAll("/", "-") : e;
+}
+function l(e, t, n, r, i = "en-US") {
+	let s = c(e, i), l = e.length < 10 && (/^\d{0,4}(?:-\d{0,2}(?:-\d{0,2})?)?$/.test(e) || o(i) && /^\d{0,4}(?:\/\d{0,2}(?:\/\d{0,2})?)?$/.test(e)), u = "valid";
+	return e === "" ? u = t ? "required" : "valid" : a(s) ? n && !a(n) || r && !a(r) || n && r && n > r ? u = "invalid" : n && s < n ? u = "rangeUnderflow" : r && s > r && (u = "rangeOverflow") : u = l ? "incomplete" : "invalid", {
+		inputValue: e,
+		value: u === "valid" ? s : null,
+		valid: u === "valid",
+		reason: u
+	};
+}
+function u(e, t = {}) {
+	let n = o(e);
+	return {
+		previousMonth: n ? "이전 달" : "Previous month",
+		nextMonth: n ? "다음 달" : "Next month",
+		today: n ? "오늘" : "Today",
+		clear: n ? "선택 날짜 지우기" : "Clear selected date",
+		openCalendar: n ? "달력 열기" : "Open calendar",
+		selectDate: (e) => n ? `${e} 선택` : `Choose ${e}`,
+		required: n ? "날짜를 입력해 주세요." : "Enter a date.",
+		invalid: n ? "YYYY/MM/DD 형식의 유효한 범위 내 날짜를 입력해 주세요." : "Enter a valid date within the allowed range (YYYY-MM-DD).",
+		...t
+	};
+}
+function d(e) {
+	let t = new Intl.DateTimeFormat("en-US-u-ca-gregory-nu-latn", {
+		timeZone: e,
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}).formatToParts(/* @__PURE__ */ new Date()), n = (e) => t.find((t) => t.type === e).value;
+	return `${n("year").padStart(4, "0")}-${n("month")}-${n("day")}`;
+}
+//#endregion
+//#region src/calendar-view.tsx
+function f({ next: e = !1 }) {
+	return /* @__PURE__ */ n("svg", {
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ n("path", { d: e ? "m9 5 7 7-7 7" : "m15 5-7 7 7 7" })
+	});
+}
+function p({ locale: a = "ko-KR", timeZone: o = "Asia/Seoul", min: s, max: c, messages: p, disabled: m, readOnly: h, showToday: g = !0, showClear: _ = !0, onClear: v }) {
+	let y = u(a, p), b = m || h;
+	return /* @__PURE__ */ n(i.View, {
+		view: "day",
+		children: /* @__PURE__ */ n(i.Context, { children: (u) => /* @__PURE__ */ r(t, { children: [
+			/* @__PURE__ */ r(i.ViewControl, {
+				className: "dds-date-picker-header",
+				children: [
+					/* @__PURE__ */ n(i.PrevTrigger, {
+						asChild: !0,
+						children: /* @__PURE__ */ n(e, {
+							type: "button",
+							tone: "secondary",
+							"aria-label": y.previousMonth,
+							children: /* @__PURE__ */ n(f, {})
+						})
+					}),
+					/* @__PURE__ */ n(i.RangeText, {}),
+					/* @__PURE__ */ n(i.NextTrigger, {
+						asChild: !0,
+						children: /* @__PURE__ */ n(e, {
+							type: "button",
+							tone: "secondary",
+							"aria-label": y.nextMonth,
+							children: /* @__PURE__ */ n(f, { next: !0 })
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ r(i.Table, {
+				className: "dds-date-picker-table",
+				children: [/* @__PURE__ */ n(i.TableHead, { children: /* @__PURE__ */ n(i.TableRow, { children: u.weekDays.map((e, t) => /* @__PURE__ */ n(i.TableHeader, { children: e.short }, t)) }) }), /* @__PURE__ */ n(i.TableBody, { children: u.weeks.map((e, t) => /* @__PURE__ */ n(i.TableRow, { children: e.map((e) => /* @__PURE__ */ n(i.TableCell, {
+					value: e,
+					children: /* @__PURE__ */ n(i.TableCellTrigger, { children: e.day })
+				}, e.toString())) }, t)) })]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "dds-date-picker-footer",
+				children: [g && /* @__PURE__ */ n(e, {
+					type: "button",
+					tone: "secondary",
+					disabled: b || !l(d(o), !1, s, c, a).valid,
+					onClick: () => {
+						!b && l(d(o), !1, s, c, a).valid && u.selectToday();
+					},
+					children: y.today
+				}), _ && /* @__PURE__ */ n(i.ClearTrigger, {
+					hidden: !1,
+					asChild: !0,
+					children: /* @__PURE__ */ n(e, {
+						type: "button",
+						tone: "secondary",
+						disabled: b,
+						onPointerDown: (e) => e.preventDefault(),
+						onClick: () => {
+							b || v?.();
+						},
+						children: y.clear
+					})
+				})]
+			})
+		] }) })
+	});
+}
+//#endregion
+export { a, s as i, c as n, o, u as r, l as s, p as t };
+
+//# sourceMappingURL=calendar-view-I_sNlioP.js.map

package/dist/calendar-view-I_sNlioP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-view-I_sNlioP.js","names":[],"sources":["../src/date-only.ts","../src/calendar-view.tsx"],"sourcesContent":["export interface DatePickerValidity {\n  /** Exact displayed draft; never persist this display text as an API date. */\n  inputValue: string;\n  /** Valid ISO date, optional empty string, or null when invalid/incomplete. */\n  value: string | null;\n  valid: boolean;\n  reason:\n    | \"valid\"\n    | \"required\"\n    | \"incomplete\"\n    | \"invalid\"\n    | \"rangeUnderflow\"\n    | \"rangeOverflow\";\n}\n// Date-only Gregorian validation: never let a permissive parser repair user text.\nexport function isCalendarDate(value: string) {\n  if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return false;\n  const year = Number(value.slice(0, 4)),\n    month = Number(value.slice(5, 7)),\n    day = Number(value.slice(8, 10));\n  if (year < 1 || month < 1 || month > 12 || day < 1) return false;\n  const leap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);\n  return (\n    day <=\n    [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month - 1]!\n  );\n}\nexport function isKorean(locale: string) {\n  return /^ko(?:-|$)/i.test(locale);\n}\nexport function displayDate(value: string, locale: string) {\n  return isKorean(locale) && isCalendarDate(value)\n    ? value.replaceAll(\"-\", \"/\")\n    : value;\n}\nexport function canonicalInput(inputValue: string, locale: string) {\n  return isKorean(locale) && /^\\d{4}\\/\\d{2}\\/\\d{2}$/.test(inputValue)\n    ? inputValue.replaceAll(\"/\", \"-\")\n    : inputValue;\n}\nexport function validateInput(\n  inputValue: string,\n  required: boolean,\n  min?: string,\n  max?: string,\n  locale = \"en-US\",\n): DatePickerValidity {\n  const canonical = canonicalInput(inputValue, locale);\n  const incomplete =\n    inputValue.length < 10 &&\n    (/^\\d{0,4}(?:-\\d{0,2}(?:-\\d{0,2})?)?$/.test(inputValue) ||\n      (isKorean(locale) &&\n        /^\\d{0,4}(?:\\/\\d{0,2}(?:\\/\\d{0,2})?)?$/.test(inputValue)));\n  let reason: DatePickerValidity[\"reason\"] = \"valid\";\n  if (inputValue === \"\") reason = required ? \"required\" : \"valid\";\n  else if (!isCalendarDate(canonical))\n    reason = incomplete ? \"incomplete\" : \"invalid\";\n  else if (\n    (min && !isCalendarDate(min)) ||\n    (max && !isCalendarDate(max)) ||\n    (min && max && min > max)\n  )\n    reason = \"invalid\";\n  else if (min && canonical < min) reason = \"rangeUnderflow\";\n  else if (max && canonical > max) reason = \"rangeOverflow\";\n  return {\n    inputValue,\n    value: reason === \"valid\" ? canonical : null,\n    valid: reason === \"valid\",\n    reason,\n  };\n}\n\nexport interface CalendarMessages {\n  previousMonth?: string;\n  nextMonth?: string;\n  today?: string;\n  clear?: string;\n  openCalendar?: string;\n  selectDate?: (dateText: string) => string;\n  required?: string;\n  invalid?: string;\n}\nexport function dateMessages(locale: string, messages: CalendarMessages = {}) {\n  const ko = isKorean(locale);\n  return {\n    previousMonth: ko ? \"이전 달\" : \"Previous month\",\n    nextMonth: ko ? \"다음 달\" : \"Next month\",\n    today: ko ? \"오늘\" : \"Today\",\n    clear: ko ? \"선택 날짜 지우기\" : \"Clear selected date\",\n    openCalendar: ko ? \"달력 열기\" : \"Open calendar\",\n    selectDate: (text: string) => (ko ? `${text} 선택` : `Choose ${text}`),\n    required: ko ? \"날짜를 입력해 주세요.\" : \"Enter a date.\",\n    invalid: ko\n      ? \"YYYY/MM/DD 형식의 유효한 범위 내 날짜를 입력해 주세요.\"\n      : \"Enter a valid date within the allowed range (YYYY-MM-DD).\",\n    ...messages,\n  };\n}\n\n/** Today is the sole timestamp boundary; stored dates remain Gregorian date-only strings. */\nexport function todayDate(timeZone: string) {\n  const parts = new Intl.DateTimeFormat(\"en-US-u-ca-gregory-nu-latn\", {\n    timeZone,\n    year: \"numeric\",\n    month: \"2-digit\",\n    day: \"2-digit\",\n  }).formatToParts(new Date());\n  const part = (type: string) =>\n    parts.find((item) => item.type === type)!.value;\n  return `${part(\"year\").padStart(4, \"0\")}-${part(\"month\")}-${part(\"day\")}`;\n}\n","import { DatePicker as ArkDatePicker } from \"@ark-ui/react/date-picker\";\nimport { Button } from \"./controls\";\nimport {\n  dateMessages,\n  todayDate,\n  validateInput,\n  type CalendarMessages,\n} from \"./date-only\";\nfunction Chevron({ next = false }: { next?: boolean }) {\n  return (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      aria-hidden=\"true\"\n    >\n      <path d={next ? \"m9 5 7 7-7 7\" : \"m15 5-7 7 7 7\"} />\n    </svg>\n  );\n}\nexport interface CalendarViewProps {\n  timeZone?: string | undefined;\n  min?: string | undefined;\n  max?: string | undefined;\n  locale?: string | undefined;\n  messages?: CalendarMessages | undefined;\n  disabled?: boolean | undefined;\n  readOnly?: boolean | undefined;\n  showToday?: boolean | undefined;\n  showClear?: boolean | undefined;\n  onClear?: (() => void) | undefined;\n}\n/** Internal view: the caller owns the single Ark root and its selection. */\nexport function CalendarView({\n  locale = \"ko-KR\",\n  timeZone = \"Asia/Seoul\",\n  min,\n  max,\n  messages,\n  disabled,\n  readOnly,\n  showToday = true,\n  showClear = true,\n  onClear,\n}: CalendarViewProps) {\n  const text = dateMessages(locale, messages),\n    locked = disabled || readOnly;\n  return (\n    <ArkDatePicker.View view=\"day\">\n      <ArkDatePicker.Context>\n        {(picker) => (\n          <>\n            <ArkDatePicker.ViewControl className=\"dds-date-picker-header\">\n              <ArkDatePicker.PrevTrigger asChild>\n                <Button\n                  type=\"button\"\n                  tone=\"secondary\"\n                  aria-label={text.previousMonth}\n                >\n                  <Chevron />\n                </Button>\n              </ArkDatePicker.PrevTrigger>\n              <ArkDatePicker.RangeText />\n              <ArkDatePicker.NextTrigger asChild>\n                <Button\n                  type=\"button\"\n                  tone=\"secondary\"\n                  aria-label={text.nextMonth}\n                >\n                  <Chevron next />\n                </Button>\n              </ArkDatePicker.NextTrigger>\n            </ArkDatePicker.ViewControl>\n            <ArkDatePicker.Table className=\"dds-date-picker-table\">\n              <ArkDatePicker.TableHead>\n                <ArkDatePicker.TableRow>\n                  {picker.weekDays.map((day, index) => (\n                    <ArkDatePicker.TableHeader key={index}>\n                      {day.short}\n                    </ArkDatePicker.TableHeader>\n                  ))}\n                </ArkDatePicker.TableRow>\n              </ArkDatePicker.TableHead>\n              <ArkDatePicker.TableBody>\n                {picker.weeks.map((week, index) => (\n                  <ArkDatePicker.TableRow key={index}>\n                    {week.map((day) => (\n                      <ArkDatePicker.TableCell key={day.toString()} value={day}>\n                        <ArkDatePicker.TableCellTrigger>\n                          {day.day}\n                        </ArkDatePicker.TableCellTrigger>\n                      </ArkDatePicker.TableCell>\n                    ))}\n                  </ArkDatePicker.TableRow>\n                ))}\n              </ArkDatePicker.TableBody>\n            </ArkDatePicker.Table>\n            <div className=\"dds-date-picker-footer\">\n              {showToday && (\n                <Button\n                  type=\"button\"\n                  tone=\"secondary\"\n                  disabled={\n                    locked ||\n                    !validateInput(todayDate(timeZone), false, min, max, locale)\n                      .valid\n                  }\n                  onClick={() => {\n                    if (\n                      !locked &&\n                      validateInput(\n                        todayDate(timeZone),\n                        false,\n                        min,\n                        max,\n                        locale,\n                      ).valid\n                    )\n                      picker.selectToday();\n                  }}\n                >\n                  {text.today}\n                </Button>\n              )}\n              {showClear && (\n                <ArkDatePicker.ClearTrigger hidden={false} asChild>\n                  <Button\n                    type=\"button\"\n                    tone=\"secondary\"\n                    disabled={locked}\n                    onPointerDown={(event) => event.preventDefault()}\n                    onClick={() => {\n                      if (!locked) onClear?.();\n                    }}\n                  >\n                    {text.clear}\n                  </Button>\n                </ArkDatePicker.ClearTrigger>\n              )}\n            </div>\n          </>\n        )}\n      </ArkDatePicker.Context>\n    </ArkDatePicker.View>\n  );\n}\n"],"mappings":";;;;AAeA,SAAgB,EAAe,GAAe;CAC5C,IAAI,CAAC,sBAAsB,KAAK,CAAK,GAAG,OAAO;CAC/C,IAAM,IAAO,OAAO,EAAM,MAAM,GAAG,CAAC,CAAC,GACnC,IAAQ,OAAO,EAAM,MAAM,GAAG,CAAC,CAAC,GAChC,IAAM,OAAO,EAAM,MAAM,GAAG,EAAE,CAAC;CAGjC,OAFI,IAAO,KAAK,IAAQ,KAAK,IAAQ,MAAM,IAAM,IAAU,KAGzD,KACA;EAAC;EAHU,IAAO,KAAM,MAAM,IAAO,OAAQ,KAAK,IAAO,OAAQ,KAGrD,KAAK;EAAI;EAAI;EAAI;EAAI;EAAI;EAAI;EAAI;EAAI;EAAI;EAAI;CAAE,CAAC,CAAC,IAAQ;AAEzE;AACA,SAAgB,EAAS,GAAgB;CACvC,OAAO,cAAc,KAAK,CAAM;AAClC;AACA,SAAgB,EAAY,GAAe,GAAgB;CACzD,OAAO,EAAS,CAAM,KAAK,EAAe,CAAK,IAC3C,EAAM,WAAW,KAAK,GAAG,IACzB;AACN;AACA,SAAgB,EAAe,GAAoB,GAAgB;CACjE,OAAO,EAAS,CAAM,KAAK,wBAAwB,KAAK,CAAU,IAC9D,EAAW,WAAW,KAAK,GAAG,IAC9B;AACN;AACA,SAAgB,EACd,GACA,GACA,GACA,GACA,IAAS,SACW;CACpB,IAAM,IAAY,EAAe,GAAY,CAAM,GAC7C,IACJ,EAAW,SAAS,OACnB,sCAAsC,KAAK,CAAU,KACnD,EAAS,CAAM,KACd,wCAAwC,KAAK,CAAU,IACzD,IAAuC;CAY3C,OAXI,MAAe,KAAI,IAAS,IAAW,aAAa,UAC9C,EAAe,CAAS,IAG/B,KAAO,CAAC,EAAe,CAAG,KAC1B,KAAO,CAAC,EAAe,CAAG,KAC1B,KAAO,KAAO,IAAM,IAErB,IAAS,YACF,KAAO,IAAY,IAAK,IAAS,mBACjC,KAAO,IAAY,MAAK,IAAS,mBARxC,IAAS,IAAa,eAAe,WAShC;EACL;EACA,OAAO,MAAW,UAAU,IAAY;EACxC,OAAO,MAAW;EAClB;CACF;AACF;AAYA,SAAgB,EAAa,GAAgB,IAA6B,CAAC,GAAG;CAC5E,IAAM,IAAK,EAAS,CAAM;CAC1B,OAAO;EACL,eAAe,IAAK,SAAS;EAC7B,WAAW,IAAK,SAAS;EACzB,OAAO,IAAK,OAAO;EACnB,OAAO,IAAK,cAAc;EAC1B,cAAc,IAAK,UAAU;EAC7B,aAAa,MAAkB,IAAK,GAAG,EAAK,OAAO,UAAU;EAC7D,UAAU,IAAK,iBAAiB;EAChC,SAAS,IACL,yCACA;EACJ,GAAG;CACL;AACF;AAGA,SAAgB,EAAU,GAAkB;CAC1C,IAAM,IAAQ,IAAI,KAAK,eAAe,8BAA8B;EAClE;EACA,MAAM;EACN,OAAO;EACP,KAAK;CACP,CAAC,CAAC,CAAC,8BAAc,IAAI,KAAK,CAAC,GACrB,KAAQ,MACZ,EAAM,MAAM,MAAS,EAAK,SAAS,CAAI,CAAC,CAAE;CAC5C,OAAO,GAAG,EAAK,MAAM,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,EAAK,OAAO,EAAE,GAAG,EAAK,KAAK;AACxE;;;ACvGA,SAAS,EAAQ,EAAE,UAAO,MAA6B;CACrD,OACE,kBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAY;EAEZ,UAAA,kBAAC,QAAD,EAAM,GAAG,IAAO,iBAAiB,gBAAkB,CAAA;CAChD,CAAA;AAET;AAcA,SAAgB,EAAa,EAC3B,YAAS,SACT,cAAW,cACX,QACA,QACA,aACA,aACA,aACA,eAAY,IACZ,eAAY,IACZ,cACoB;CACpB,IAAM,IAAO,EAAa,GAAQ,CAAQ,GACxC,IAAS,KAAY;CACvB,OACE,kBAAC,EAAc,MAAf;EAAoB,MAAK;EACvB,UAAA,kBAAC,EAAc,SAAf,EAAA,WACI,MACA,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,EAAc,aAAf;IAA2B,WAAU;IAArC,UAAA;KACE,kBAAC,EAAc,aAAf;MAA2B,SAAA;MACzB,UAAA,kBAAC,GAAD;OACE,MAAK;OACL,MAAK;OACL,cAAY,EAAK;OAEjB,UAAA,kBAAC,GAAD,CAAU,CAAA;MACJ,CAAA;KACiB,CAAA;KAC3B,kBAAC,EAAc,WAAf,CAA0B,CAAA;KAC1B,kBAAC,EAAc,aAAf;MAA2B,SAAA;MACzB,UAAA,kBAAC,GAAD;OACE,MAAK;OACL,MAAK;OACL,cAAY,EAAK;OAEjB,UAAA,kBAAC,GAAD,EAAS,MAAA,GAAM,CAAA;MACT,CAAA;KACiB,CAAA;IACF;;GAC3B,kBAAC,EAAc,OAAf;IAAqB,WAAU;IAA/B,UAAA,CACE,kBAAC,EAAc,WAAf,EAAA,UACE,kBAAC,EAAc,UAAf,EAAA,UACG,EAAO,SAAS,KAAK,GAAK,MACzB,kBAAC,EAAc,aAAf,EAAA,UACG,EAAI,MACoB,GAFK,CAEL,CAC5B,EACqB,CAAA,EACD,CAAA,GACzB,kBAAC,EAAc,WAAf,EAAA,UACG,EAAO,MAAM,KAAK,GAAM,MACvB,kBAAC,EAAc,UAAf,EAAA,UACG,EAAK,KAAK,MACT,kBAAC,EAAc,WAAf;KAA8C,OAAO;KACnD,UAAA,kBAAC,EAAc,kBAAf,EAAA,UACG,EAAI,IACyB,CAAA;IACT,GAJK,EAAI,SAAS,CAIlB,CAC1B,EACqB,GARK,CAQL,CACzB,EACsB,CAAA,CACN;;GACrB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,MAAK;KACL,MAAK;KACL,UACE,KACA,CAAC,EAAc,EAAU,CAAQ,GAAG,IAAO,GAAK,GAAK,CAAM,CAAC,CACzD;KAEL,eAAe;MACb,AACE,CAAC,KACD,EACE,EAAU,CAAQ,GAClB,IACA,GACA,GACA,CACF,CAAC,CAAC,SAEF,EAAO,YAAY;KACvB;KAEC,UAAA,EAAK;IACA,CAAA,GAET,KACC,kBAAC,EAAc,cAAf;KAA4B,QAAQ;KAAO,SAAA;KACzC,UAAA,kBAAC,GAAD;MACE,MAAK;MACL,MAAK;MACL,UAAU;MACV,gBAAgB,MAAU,EAAM,eAAe;MAC/C,eAAe;OACb,AAAK,KAAQ,IAAU;MACzB;MAEC,UAAA,EAAK;KACA,CAAA;IACkB,CAAA,CAE3B;;EACL,EAAA,CAAA,EAEiB,CAAA;CACL,CAAA;AAExB"}

package/dist/calendar-view.d.ts

@@ -0,0 +1,16 @@
+import { type CalendarMessages } from "./date-only";
+export interface CalendarViewProps {
+    timeZone?: string | undefined;
+    min?: string | undefined;
+    max?: string | undefined;
+    locale?: string | undefined;
+    messages?: CalendarMessages | undefined;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    showToday?: boolean | undefined;
+    showClear?: boolean | undefined;
+    onClear?: (() => void) | undefined;
+}
+/** Internal view: the caller owns the single Ark root and its selection. */
+export declare function CalendarView({ locale, timeZone, min, max, messages, disabled, readOnly, showToday, showClear, onClear, }: CalendarViewProps): import("react").JSX.Element;
+//# sourceMappingURL=calendar-view.d.ts.map

package/dist/calendar-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-view.d.ts","sourceRoot":"","sources":["../src/calendar-view.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,aAAa,CAAC;AAgBrB,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACpC;AACD,4EAA4E;AAC5E,wBAAgB,YAAY,CAAC,EAC3B,MAAgB,EAChB,QAAuB,EACvB,GAAG,EACH,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAgB,EAChB,SAAgB,EAChB,OAAO,GACR,EAAE,iBAAiB,+BAqGnB"}

package/dist/calendar.d.ts

@@ -0,0 +1,19 @@
+import { type CalendarMessages } from "./date-only";
+export interface CalendarProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    locale?: string;
+    timeZone?: string;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    startOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    messages?: CalendarMessages;
+    showToday?: boolean;
+    clearable?: boolean;
+}
+export type { CalendarMessages } from "./date-only";
+export declare function Calendar({ label, value, onChange, locale, timeZone, min, max, disabled, readOnly, startOfWeek, messages, showToday, clearable, }: CalendarProps): import("react").JSX.Element;
+//# sourceMappingURL=calendar.d.ts.map

package/dist/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../src/calendar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,aAAa,CAAC;AACrB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AACD,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAgB,EAChB,QAAuB,EACvB,GAAG,EACH,GAAG,EACH,QAAgB,EAChB,QAAgB,EAChB,WAAe,EACf,QAAQ,EACR,SAAgB,EAChB,SAAgB,GACjB,EAAE,aAAa,+BAmDf"}

package/dist/calendar.js

@@ -0,0 +1,51 @@
+import { a as e, r as t, s as n, t as r } from "./calendar-view-I_sNlioP.js";
+import { jsx as i } from "react/jsx-runtime";
+import { DatePicker as a, parseDate as o } from "@ark-ui/react/date-picker";
+//#region src/calendar.tsx
+function s({ label: s, value: c, onChange: l, locale: u = "ko-KR", timeZone: d = "Asia/Seoul", min: f, max: p, disabled: m = !1, readOnly: h = !1, startOfWeek: g = 0, messages: _, showToday: v = !0, clearable: y = !0 }) {
+	let b = t(u, _);
+	return /* @__PURE__ */ i(a.Root, {
+		className: "dds-calendar",
+		"aria-label": s,
+		role: "group",
+		inline: !0,
+		locale: u,
+		timeZone: d,
+		disabled: m,
+		readOnly: h,
+		min: f && e(f) ? o(f) : void 0,
+		max: p && e(p) ? o(p) : void 0,
+		startOfWeek: g,
+		minView: "day",
+		maxView: "day",
+		fixedWeeks: !0,
+		value: e(c) ? [o(c)] : [],
+		translations: {
+			dayCell: (e) => b.selectDate(e.valueText),
+			clearTrigger: b.clear
+		},
+		onValueChange: (e) => {
+			let t = e.value[0]?.toString() ?? "";
+			!m && !h && n(t, !1, f, p, u).valid && l(t);
+		},
+		children: /* @__PURE__ */ i(a.Content, {
+			className: "dds-date-picker-content",
+			"aria-label": s,
+			children: /* @__PURE__ */ i(r, {
+				timeZone: d,
+				min: f,
+				max: p,
+				locale: u,
+				messages: _,
+				disabled: m,
+				readOnly: h,
+				showToday: v,
+				showClear: y
+			})
+		})
+	});
+}
+//#endregion
+export { s as Calendar };
+
+//# sourceMappingURL=calendar.js.map

package/dist/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","names":[],"sources":["../src/calendar.tsx"],"sourcesContent":["import {\n  DatePicker as ArkDatePicker,\n  parseDate,\n} from \"@ark-ui/react/date-picker\";\nimport { CalendarView } from \"./calendar-view\";\nimport {\n  isCalendarDate,\n  validateInput,\n  dateMessages,\n  type CalendarMessages,\n} from \"./date-only\";\nexport interface CalendarProps {\n  label: string;\n  value: string;\n  onChange: (value: string) => void;\n  locale?: string;\n  timeZone?: string;\n  min?: string;\n  max?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  startOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  messages?: CalendarMessages;\n  showToday?: boolean;\n  clearable?: boolean;\n}\nexport type { CalendarMessages } from \"./date-only\";\nexport function Calendar({\n  label,\n  value,\n  onChange,\n  locale = \"ko-KR\",\n  timeZone = \"Asia/Seoul\",\n  min,\n  max,\n  disabled = false,\n  readOnly = false,\n  startOfWeek = 0,\n  messages,\n  showToday = true,\n  clearable = true,\n}: CalendarProps) {\n  const text = dateMessages(locale, messages);\n  return (\n    <ArkDatePicker.Root\n      className=\"dds-calendar\"\n      aria-label={label}\n      role=\"group\"\n      inline\n      locale={locale}\n      timeZone={timeZone}\n      disabled={disabled}\n      readOnly={readOnly}\n      min={min && isCalendarDate(min) ? parseDate(min) : undefined}\n      max={max && isCalendarDate(max) ? parseDate(max) : undefined}\n      startOfWeek={startOfWeek}\n      minView=\"day\"\n      maxView=\"day\"\n      fixedWeeks\n      value={isCalendarDate(value) ? [parseDate(value)] : []}\n      translations={{\n        dayCell: (state) => text.selectDate(state.valueText),\n        clearTrigger: text.clear,\n      }}\n      onValueChange={(details) => {\n        const next = details.value[0]?.toString() ?? \"\";\n        if (\n          !disabled &&\n          !readOnly &&\n          validateInput(next, false, min, max, locale).valid\n        )\n          onChange(next);\n      }}\n    >\n      <ArkDatePicker.Content\n        className=\"dds-date-picker-content\"\n        aria-label={label}\n      >\n        <CalendarView\n          timeZone={timeZone}\n          min={min}\n          max={max}\n          locale={locale}\n          messages={messages}\n          disabled={disabled}\n          readOnly={readOnly}\n          showToday={showToday}\n          showClear={clearable}\n        />\n      </ArkDatePicker.Content>\n    </ArkDatePicker.Root>\n  );\n}\n"],"mappings":";;;;AA2BA,SAAgB,EAAS,EACvB,UACA,UACA,aACA,YAAS,SACT,cAAW,cACX,QACA,QACA,cAAW,IACX,cAAW,IACX,iBAAc,GACd,aACA,eAAY,IACZ,eAAY,MACI;CAChB,IAAM,IAAO,EAAa,GAAQ,CAAQ;CAC1C,OACE,kBAAC,EAAc,MAAf;EACE,WAAU;EACV,cAAY;EACZ,MAAK;EACL,QAAA;EACQ;EACE;EACA;EACA;EACV,KAAK,KAAO,EAAe,CAAG,IAAI,EAAU,CAAG,IAAI,KAAA;EACnD,KAAK,KAAO,EAAe,CAAG,IAAI,EAAU,CAAG,IAAI,KAAA;EACtC;EACb,SAAQ;EACR,SAAQ;EACR,YAAA;EACA,OAAO,EAAe,CAAK,IAAI,CAAC,EAAU,CAAK,CAAC,IAAI,CAAC;EACrD,cAAc;GACZ,UAAU,MAAU,EAAK,WAAW,EAAM,SAAS;GACnD,cAAc,EAAK;EACrB;EACA,gBAAgB,MAAY;GAC1B,IAAM,IAAO,EAAQ,MAAM,EAAE,EAAE,SAAS,KAAK;GAC7C,AACE,CAAC,KACD,CAAC,KACD,EAAc,GAAM,IAAO,GAAK,GAAK,CAAM,CAAC,CAAC,SAE7C,EAAS,CAAI;EACjB;EAEA,UAAA,kBAAC,EAAc,SAAf;GACE,WAAU;GACV,cAAY;GAEZ,UAAA,kBAAC,GAAD;IACY;IACL;IACA;IACG;IACE;IACA;IACA;IACC;IACX,WAAW;GACZ,CAAA;EACoB,CAAA;CACL,CAAA;AAExB"}

package/dist/choice-B3vNMfKK.js

@@ -0,0 +1,300 @@
+import { useEffect as e, useMemo as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Portal as o } from "@ark-ui/react/portal";
+import { Combobox as s, createListCollection as c } from "@ark-ui/react/combobox";
+import { Select as l } from "@ark-ui/react/select";
+import { defaultRangeExtractor as u, useVirtualizer as d } from "@tanstack/react-virtual";
+//#region src/choice-types.ts
+function f(e) {
+	let t = /* @__PURE__ */ new Set();
+	for (let n of e) {
+		if (!n.value || t.has(n.value)) throw Error(`DDS choice: option IDs must be nonempty and unique (${JSON.stringify(n.value)})`);
+		t.add(n.value);
+	}
+}
+var p = {
+	open: "선택 열기",
+	clear: "선택 지우기",
+	loading: "불러오는 중",
+	empty: "결과 없음",
+	error: "불러오지 못했습니다",
+	retry: "다시 시도"
+};
+function m() {
+	return globalThis.process?.env?.NODE_ENV !== "production";
+}
+//#endregion
+//#region src/internal/choice.tsx
+var h = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	border: 0,
+	clipPath: "inset(50%)",
+	overflow: "hidden",
+	whiteSpace: "nowrap"
+};
+function g(g) {
+	f(g.items);
+	let [_, v] = r(g.defaultValue ?? ""), y = g.value ?? _, b = g.items.find((e) => e.value === y) ?? (g.selectedOption?.value === y ? g.selectedOption : void 0), x = b?.label ?? y, [S, C] = r(g.defaultInputValue ?? x), w = g.inputValue ?? S, [T, E] = r(!1), [D, O] = r(null), k = n(null), A = n(null), j = n(null), [M, N] = r(null);
+	e(() => {
+		let e = k.current;
+		e && N(e.closest("[role=\"dialog\"], [role=\"alertdialog\"]") ?? e.ownerDocument.body);
+	}, []);
+	let P = n(!1), F = n({
+		value: y,
+		label: x
+	}), I = n(null), L = (e) => g.items.find((t) => t.value === e)?.label ?? (g.selectedOption?.value === e ? g.selectedOption.label : e), R = {
+		...p,
+		...g.messages
+	}, z = g.disabled || g.readOnly, B = (e) => {
+		(I.current?.from !== w || I.current.to !== e) && (I.current = null, g.inputValue === void 0 && C(e), g.onInputValueChange?.(e));
+	}, V = (e) => {
+		e !== w && (I.current?.from !== w || I.current.to !== e) && (I.current = {
+			from: w,
+			to: e
+		}, g.inputValue === void 0 ? C(e) : g.onInputValueChange?.(e));
+	}, H = (e) => {
+		g.value === void 0 && v(e), g.onValueChange?.(e);
+	};
+	e(() => {
+		(F.current.value !== y || F.current.label !== x) && (F.current = {
+			value: y,
+			label: x
+		}, V(x));
+	}, [y, x]), e(() => {
+		m() && y && !b && console.warn(`DDS choice: no label supplied for selected ID ${JSON.stringify(y)}; pass selectedOption when the selection is outside items.`);
+	}, [y, b]), e(() => {
+		let e = A.current?.form;
+		if (!e) return;
+		let t = (e) => queueMicrotask(() => {
+			if (e.defaultPrevented) return;
+			let t = g.value ?? g.defaultValue ?? "", n = L(t);
+			F.current = {
+				value: t,
+				label: n
+			}, g.value === void 0 && v(t);
+			let r = g.defaultInputValue ?? n;
+			I.current = null, g.inputValue === void 0 ? C(r) : V(r), E(!1), k.current instanceof HTMLInputElement && (k.current.value = g.inputValue ?? r), A.current && (A.current.value = t);
+		});
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [
+		g.defaultValue,
+		g.defaultInputValue,
+		g.value,
+		g.inputValue,
+		g.items,
+		g.selectedOption,
+		g.form
+	]);
+	let U = t(() => g.searchable && g.filterMode !== "external" && w !== x ? g.items.filter((e) => e.label.toLocaleLowerCase().includes(w.toLocaleLowerCase())) : g.items, [
+		g.items,
+		g.searchable,
+		g.filterMode,
+		w,
+		x
+	]), W = t(() => c({
+		items: U,
+		itemToString: (e) => e.label,
+		itemToValue: (e) => e.value,
+		isItemDisabled: (e) => !!e.disabled
+	}), [U]), G = !!g.virtualization, K = g.virtualization ? g.virtualization.itemHeight : void 0, q = Number.isFinite(K) ? Math.max(40, K) : 40, J = U.findIndex((e) => e.value === D), Y = d({
+		count: U.length,
+		getScrollElement: () => j.current,
+		estimateSize: () => q,
+		overscan: g.virtualization ? g.virtualization.overscan ?? 5 : 5,
+		enabled: G && T,
+		initialRect: {
+			width: 0,
+			height: 320
+		},
+		rangeExtractor: (e) => {
+			let t = u(e);
+			return J >= 0 && !t.includes(J) && t.push(J), t.sort((e, t) => e - t);
+		}
+	});
+	e(() => {
+		O(null), G && T && Y.scrollToIndex(Math.max(0, U.findIndex((e) => e.value === y)), { align: "auto" });
+	}, [U, T]);
+	let X = g.searchable ? s : l, Z = G ? Y.getVirtualItems().map((e) => ({
+		index: e.index,
+		start: e.start
+	})) : U.map((e, t) => ({
+		index: t,
+		start: 0
+	}));
+	G && J >= 0 && !Z.some((e) => e.index === J) && Z.push({
+		index: J,
+		start: J * q
+	});
+	let Q = g.loading ? R.loading : g.error ? typeof g.error == "string" ? g.error : R.error : U.length === 0 ? R.empty : "", $ = {
+		collection: W,
+		value: y ? [y] : [],
+		open: T && !z,
+		disabled: g.disabled,
+		readOnly: g.readOnly,
+		onOpenChange: (e) => {
+			z || E(e.open);
+		},
+		onValueChange: (e) => {
+			if (z || P.current) return;
+			let t = e.value[0] ?? "";
+			t !== y && H(t);
+		},
+		onHighlightChange: (e) => O(e.highlightedValue),
+		scrollToIndexFn: G ? ({ index: e }) => Y.scrollToIndex(e, { align: "auto" }) : void 0,
+		positioning: {
+			placement: "bottom-start",
+			sameWidth: !0,
+			gutter: 4,
+			strategy: M?.matches("[role=\"dialog\"], [role=\"alertdialog\"]") ? "fixed" : "absolute",
+			hideWhenDetached: !!M?.matches("[role=\"dialog\"], [role=\"alertdialog\"]")
+		}
+	}, ee = g.searchable ? {
+		inputValue: w,
+		onInputValueChange: (e) => {
+			!z && e.inputValue !== w && B(e.inputValue);
+		},
+		selectionBehavior: "preserve"
+	} : {};
+	return /* @__PURE__ */ a(X.Root, {
+		...$,
+		...ee,
+		id: g.id,
+		className: "dds-choice",
+		"data-label-placement": g.labelPlacement ?? "outside",
+		"data-has-value": y || w ? "" : void 0,
+		children: [
+			g.label && /* @__PURE__ */ i(X.Label, {
+				className: "dds-choice-label",
+				onClick: () => k.current?.focus(),
+				children: g.label
+			}),
+			/* @__PURE__ */ a(X.Control, {
+				className: "dds-choice-control",
+				children: [
+					g.searchable ? /* @__PURE__ */ i(s.Input, {
+						ref: (e) => {
+							k.current = e;
+						},
+						className: "dds-choice-input",
+						"aria-label": g["aria-label"],
+						"aria-labelledby": g["aria-labelledby"],
+						"aria-describedby": g["aria-describedby"],
+						"aria-required": g.required,
+						placeholder: g.placeholder,
+						onCompositionStart: () => {
+							P.current = !0;
+						},
+						onCompositionEnd: () => {
+							P.current = !1;
+						},
+						onKeyDown: (e) => {
+							P.current && e.key === "Enter" && (e.preventDefault(), e.stopPropagation());
+						},
+						onBlur: () => {
+							y && V(x);
+						}
+					}) : null,
+					/* @__PURE__ */ i(X.Trigger, {
+						ref: (e) => {
+							g.searchable || (k.current = e);
+						},
+						className: "dds-choice-trigger",
+						"aria-label": g.searchable ? R.open : g["aria-label"],
+						"aria-labelledby": g["aria-labelledby"],
+						"aria-describedby": g["aria-describedby"],
+						"aria-required": g.required,
+						children: g.searchable ? "⌄" : /* @__PURE__ */ i("span", {
+							className: "dds-choice-value",
+							children: x || g.placeholder || R.open
+						})
+					}),
+					g.clearable && !z && (y || w) ? /* @__PURE__ */ i("button", {
+						className: "dds-choice-clear",
+						type: "button",
+						"aria-label": R.clear,
+						onPointerDown: (e) => e.preventDefault(),
+						onClick: () => {
+							H(""), B(""), E(!1), k.current?.focus();
+						},
+						children: "×"
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ i("input", {
+				ref: A,
+				className: "dds-choice-validation",
+				style: h,
+				tabIndex: -1,
+				"aria-hidden": "true",
+				name: g.name,
+				form: g.form,
+				value: y,
+				required: g.required,
+				disabled: g.disabled,
+				onChange: () => {},
+				onInvalid: (e) => {
+					e.preventDefault(), k.current?.focus();
+				}
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "dds-choice-status",
+				role: "status",
+				"aria-live": "polite",
+				children: [Q, g.error && g.onRetry ? /* @__PURE__ */ i("button", {
+					className: "dds-choice-retry",
+					type: "button",
+					onClick: g.onRetry,
+					children: R.retry
+				}) : null]
+			}),
+			M && /* @__PURE__ */ i(o, {
+				container: { current: M },
+				children: /* @__PURE__ */ i(X.Positioner, {
+					className: "dds-choice-positioner",
+					children: /* @__PURE__ */ i(X.Content, {
+						ref: j,
+						className: "dds-choice-content",
+						style: {
+							maxHeight: "min(320px, var(--available-height, 320px))",
+							overflow: "auto"
+						},
+						children: /* @__PURE__ */ i("div", {
+							style: G ? {
+								height: Y.getTotalSize(),
+								position: "relative"
+							} : void 0,
+							children: Z.map((e) => {
+								let t = U[e.index];
+								return /* @__PURE__ */ a(X.Item, {
+									item: t,
+									className: "dds-choice-item",
+									"aria-posinset": e.index + 1,
+									"aria-setsize": U.length,
+									style: G ? {
+										position: "absolute",
+										top: 0,
+										left: 0,
+										width: "100%",
+										height: q,
+										transform: `translateY(${e.start}px)`
+									} : void 0,
+									children: [/* @__PURE__ */ i(X.ItemText, { children: t.label }), t.description ? /* @__PURE__ */ i("span", {
+										className: "dds-choice-description",
+										children: t.description
+									}) : null]
+								}, t.value);
+							})
+						})
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=choice-B3vNMfKK.js.map