@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/date-input/date-input.recipe.mjs

@@ -0,0 +1,142 @@
+import { sva } from "../../react/styled-system/css/sva.mjs";
+//#region src/components/date-input/date-input.recipe.ts
+const dateInputRecipe = sva({
+	slots: [
+		"root",
+		"label",
+		"control",
+		"segmentGroup",
+		"segment",
+		"hiddenInput"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "gap.inline"
+		},
+		label: {
+			textStyle: "detail",
+			color: "foreground.muted",
+			_disabled: { color: "foreground.disabled" }
+		},
+		control: {
+			display: "flex",
+			alignItems: "center",
+			gap: "gap.inline",
+			"& > svg": {
+				flexShrink: 0,
+				color: "foreground.subtle"
+			}
+		},
+		segmentGroup: {
+			display: "flex",
+			alignItems: "center",
+			minHeight: "target.minimum"
+		},
+		segment: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			minWidth: "target.minimum",
+			minHeight: "target.minimum",
+			paddingInline: "inset.compact",
+			rounded: "inset",
+			borderWidth: "hairline",
+			borderStyle: "solid",
+			borderColor: "surface.transparent",
+			outlineStyle: "none",
+			outlineColor: "border.focus",
+			color: "foreground.muted",
+			fontVariantNumeric: "tabular-nums",
+			caretColor: "surface.transparent",
+			"&[data-placeholder-shown]:not(:focus-visible)": { color: "foreground.subtle" },
+			"&[data-type=literal]": {
+				minWidth: "auto",
+				paddingInline: "inset.none",
+				borderWidth: "none",
+				color: "foreground.subtle"
+			},
+			_focusVisible: {
+				bg: "selection.background",
+				color: "selection.foreground",
+				outlineStyle: "solid",
+				outlineWidth: "focus",
+				outlineOffset: "-inset.compact",
+				outlineColor: "border.focus",
+				_highContrast: {
+					bg: "system.highlight",
+					color: "system.highlightText"
+				}
+			},
+			_readOnly: { cursor: "default" },
+			_disabled: {
+				color: "foreground.disabled",
+				cursor: "not-allowed",
+				_highContrast: { color: "system.grayText" }
+			}
+		},
+		hiddenInput: {
+			position: "absolute",
+			opacity: "0",
+			pointerEvents: "none"
+		}
+	},
+	variants: { size: {
+		xs: {
+			control: {
+				height: "control.xs",
+				"& > svg": {
+					width: "icon.xs",
+					height: "icon.xs"
+				}
+			},
+			segment: { textStyle: "detail" }
+		},
+		sm: {
+			control: { "& > svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			segment: {
+				minHeight: "control.xs",
+				textStyle: "body"
+			}
+		},
+		md: {
+			control: { "& > svg": {
+				width: "icon.sm",
+				height: "icon.sm"
+			} },
+			segment: {
+				minHeight: "control.sm",
+				textStyle: "body"
+			}
+		},
+		lg: {
+			control: { "& > svg": {
+				width: "icon.md",
+				height: "icon.md"
+			} },
+			segment: {
+				minHeight: "control.md",
+				textStyle: "body"
+			}
+		},
+		xl: {
+			control: { "& > svg": {
+				width: "icon.lg",
+				height: "icon.lg"
+			} },
+			segment: {
+				minHeight: "control.lg",
+				textStyle: "subtitle"
+			}
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { dateInputRecipe };
+
+//# sourceMappingURL=date-input.recipe.mjs.map

package/dist/components/date-input/date-input.recipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.recipe.mjs","names":[],"sources":["../../../src/components/date-input/date-input.recipe.ts"],"sourcesContent":["import { sva } from '#styled-system/css/index.js'\n\nexport const dateInputRecipe = sva({\n  slots: ['root', 'label', 'control', 'segmentGroup', 'segment', 'hiddenInput'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'gap.inline',\n    },\n    label: {\n      textStyle: 'detail',\n      color: 'foreground.muted',\n      _disabled: { color: 'foreground.disabled' },\n    },\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: 'gap.inline',\n      '& > svg': { flexShrink: 0, color: 'foreground.subtle' },\n    },\n    segmentGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      minHeight: 'target.minimum',\n    },\n    segment: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      minWidth: 'target.minimum',\n      minHeight: 'target.minimum',\n      paddingInline: 'inset.compact',\n      rounded: 'inset',\n      borderWidth: 'hairline',\n      borderStyle: 'solid',\n      borderColor: 'surface.transparent',\n      outlineStyle: 'none',\n      outlineColor: 'border.focus',\n      color: 'foreground.muted',\n      fontVariantNumeric: 'tabular-nums',\n      caretColor: 'surface.transparent',\n      '&[data-placeholder-shown]:not(:focus-visible)': { color: 'foreground.subtle' },\n      '&[data-type=literal]': {\n        minWidth: 'auto',\n        paddingInline: 'inset.none',\n        borderWidth: 'none',\n        color: 'foreground.subtle',\n      },\n      _focusVisible: {\n        bg: 'selection.background',\n        color: 'selection.foreground',\n        outlineStyle: 'solid',\n        outlineWidth: 'focus',\n        outlineOffset: '-inset.compact',\n        outlineColor: 'border.focus',\n        _highContrast: { bg: 'system.highlight', color: 'system.highlightText' },\n      },\n      _readOnly: { cursor: 'default' },\n      _disabled: {\n        color: 'foreground.disabled',\n        cursor: 'not-allowed',\n        _highContrast: { color: 'system.grayText' },\n      },\n    },\n    hiddenInput: {\n      position: 'absolute',\n      opacity: '0',\n      pointerEvents: 'none',\n    },\n  },\n  variants: {\n    size: {\n      xs: {\n        control: {\n          // 대상 크기의 입력이나 버튼이 테두리 상자 안에 들어가면 다른 xs 컨트롤보다 테두리 두 개만큼\n          // 높아집니다. 상자가 행 높이를 잡고, 그 안에서 가운데 정렬됩니다.\n          height: 'control.xs',\n          '& > svg': { width: 'icon.xs', height: 'icon.xs' },\n        },\n        segment: { textStyle: 'detail' },\n      },\n      sm: {\n        control: { '& > svg': { width: 'icon.sm', height: 'icon.sm' } },\n        segment: { minHeight: 'control.xs', textStyle: 'body' },\n      },\n      md: {\n        control: { '& > svg': { width: 'icon.sm', height: 'icon.sm' } },\n        segment: { minHeight: 'control.sm', textStyle: 'body' },\n      },\n      lg: {\n        control: { '& > svg': { width: 'icon.md', height: 'icon.md' } },\n        segment: { minHeight: 'control.md', textStyle: 'body' },\n      },\n      xl: {\n        control: { '& > svg': { width: 'icon.lg', height: 'icon.lg' } },\n        segment: { minHeight: 'control.lg', textStyle: 'subtitle' },\n      },\n    },\n  },\n  defaultVariants: { size: 'md' },\n})\n"],"mappings":";;AAEA,MAAa,kBAAkB,IAAI;CACjC,OAAO;EAAC;EAAQ;EAAS;EAAW;EAAgB;EAAW;CAAa;CAC5E,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;EACP;EACA,OAAO;GACL,WAAW;GACX,OAAO;GACP,WAAW,EAAE,OAAO,sBAAsB;EAC5C;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,KAAK;GACL,WAAW;IAAE,YAAY;IAAG,OAAO;GAAoB;EACzD;EACA,cAAc;GACZ,SAAS;GACT,YAAY;GACZ,WAAW;EACb;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,WAAW;GACX,eAAe;GACf,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,cAAc;GACd,cAAc;GACd,OAAO;GACP,oBAAoB;GACpB,YAAY;GACZ,iDAAiD,EAAE,OAAO,oBAAoB;GAC9E,wBAAwB;IACtB,UAAU;IACV,eAAe;IACf,aAAa;IACb,OAAO;GACT;GACA,eAAe;IACb,IAAI;IACJ,OAAO;IACP,cAAc;IACd,cAAc;IACd,eAAe;IACf,cAAc;IACd,eAAe;KAAE,IAAI;KAAoB,OAAO;IAAuB;GACzE;GACA,WAAW,EAAE,QAAQ,UAAU;GAC/B,WAAW;IACT,OAAO;IACP,QAAQ;IACR,eAAe,EAAE,OAAO,kBAAkB;GAC5C;EACF;EACA,aAAa;GACX,UAAU;GACV,SAAS;GACT,eAAe;EACjB;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,SAAS;IAGP,QAAQ;IACR,WAAW;KAAE,OAAO;KAAW,QAAQ;IAAU;GACnD;GACA,SAAS,EAAE,WAAW,SAAS;EACjC;EACA,IAAI;GACF,SAAS,EAAE,WAAW;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC9D,SAAS;IAAE,WAAW;IAAc,WAAW;GAAO;EACxD;EACA,IAAI;GACF,SAAS,EAAE,WAAW;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC9D,SAAS;IAAE,WAAW;IAAc,WAAW;GAAO;EACxD;EACA,IAAI;GACF,SAAS,EAAE,WAAW;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC9D,SAAS;IAAE,WAAW;IAAc,WAAW;GAAO;EACxD;EACA,IAAI;GACF,SAAS,EAAE,WAAW;IAAE,OAAO;IAAW,QAAQ;GAAU,EAAE;GAC9D,SAAS;IAAE,WAAW;IAAc,WAAW;GAAW;EAC5D;CACF,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/components/date-input/index.d.mts

@@ -0,0 +1,2 @@
+import { DateInput, DateInputFocusChangeDetails, DateInputGranularity, DateInputRootProps, DateInputSelectionMode, DateInputValueChangeDetails } from "./date-input.mjs";
+export { DateInput, type DateInputFocusChangeDetails, type DateInputGranularity, type DateInputRootProps, type DateInputSelectionMode, type DateInputValueChangeDetails };

package/dist/components/date-input/index.mjs

@@ -0,0 +1,2 @@
+import { DateInput } from "./date-input.mjs";
+export { DateInput };

package/dist/components/date-picker/date-picker.d.mts

@@ -0,0 +1,114 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { OpenChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/date-picker/date-picker.d.ts
+export type DatePickerView = 'day' | 'month' | 'year';
+export type DatePickerSelectionMode = 'single' | 'range' | 'multiple';
+export interface DatePickerPositioning {
+  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+  gutter?: number;
+  flip?: boolean;
+}
+export interface DatePickerValueChangeDetails {
+  readonly value: readonly string[];
+  readonly view: DatePickerView;
+}
+export interface DatePickerFocusChangeDetails {
+  readonly value: readonly string[];
+  readonly focusedValue: string;
+  readonly view: DatePickerView;
+}
+export interface DatePickerViewChangeDetails {
+  readonly view: DatePickerView;
+}
+export interface DatePickerRootProps {
+  /** 제어되는 값이며, ISO 날짜입니다 — `['2026-09-20']`. */
+  value?: readonly string[];
+  /** 비제어 초기 값. `value`가 주어지면 무시됩니다. */
+  defaultValue?: readonly string[];
+  /** 제어 여부와 무관하게 값이 바뀔 때마다 알림을 받습니다. */
+  onValueChange?: (details: DatePickerValueChangeDetails) => void;
+  /** 키보드가 올라가 있는, 제어되는 날짜이며 ISO 날짜입니다. */
+  focusedValue?: string;
+  /** 비제어 초기 포커스 날짜. */
+  defaultFocusedValue?: string;
+  /** 키보드가 날짜 사이를 오갈 때 알림을 받습니다. */
+  onFocusChange?: (details: DatePickerFocusChangeDetails) => void;
+  /** 제어되는 달력의 열림 상태. */
+  open?: boolean;
+  /** 비제어 초기 열림 상태. */
+  defaultOpen?: boolean;
+  /** 달력이 열리거나 닫힐 때마다 알림을 받습니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /** 제어되는 격자 — 일, 월 또는 연입니다. */
+  view?: DatePickerView;
+  /** 비제어 초기 격자. 기본값은 `minView`입니다. */
+  defaultView?: DatePickerView;
+  /** 격자가 바뀔 때 알림을 받습니다. */
+  onViewChange?: (details: DatePickerViewChangeDetails) => void;
+  /** 선택할 수 있는 가장 성긴 격자. 기본값은 `day`입니다. */
+  minView?: DatePickerView;
+  /** 뷰 trigger가 올라갈 수 있는 가장 촘촘한 격자. 기본값은 `year`입니다. */
+  maxView?: DatePickerView;
+  /** 받아들이는 가장 이른 날짜이며, ISO 날짜입니다. */
+  min?: string;
+  /** 받아들이는 가장 늦은 날짜이며, ISO 날짜입니다. */
+  max?: string;
+  /**
+   * 피커 전체를 비활성화하지 않고 특정 날짜만 거부합니다.
+   *
+   * 날짜는 `value`와 같은 모양인 ISO 문자열로 도착하므로, 사용처가 답하기 위해 달력 객체를
+   * 만들거나 들여다볼 일이 없습니다.
+   */
+  isDateUnavailable?: (date: string) => boolean;
+  /** 피커가 날짜를 몇 개나 쥐는지. 기본값은 `single`입니다. */
+  selectionMode?: DatePickerSelectionMode;
+  /** `multiple` 선택의 개수 상한을 정합니다. */
+  maxSelectedDates?: number;
+  /** 언제나 여섯 주를 렌더해, 달마다 달력의 높이가 달라지지 않게 합니다. */
+  fixedWeeks?: boolean;
+  /** 격자가 어느 요일에서 시작하는지이며, `0`이 일요일입니다. 기본값은 로캘을 따릅니다. */
+  startOfWeek?: number;
+  /** 이웃한 달의 날짜도 그것이 보이는 격자에서 선택할 수 있게 합니다. */
+  outsideDaySelectable?: boolean;
+  /** 선택하면 달력을 닫습니다. 기본값은 true입니다. */
+  closeOnSelect?: boolean;
+  /** 필드를 클릭하면 달력을 엽니다. */
+  openOnClick?: boolean;
+  /** 달력을 제자리에 렌더해 언제나 열려 있게 합니다. */
+  inline?: boolean;
+  /** 달력이 놓이는 위치. */
+  positioning?: DatePickerPositioning;
+  /** 날짜를 해석할 때 쓰는 시간대. 기본값은 `UTC`입니다. */
+  timeZone?: string;
+  /** 필드의 placeholder 텍스트. 기본값은 로캘의 날짜 형식입니다. */
+  placeholder?: string;
+  /**
+   * 이 피커에 한해 provider의 로캘을 덮어씁니다.
+   *
+   * 한 페이지에 정말로 여러 로캘이 섞이는 드문 제품을 위한 것입니다. 설정하지 않고 두면
+   * 애플리케이션 전체가 `SynapseProvider`의 로캘을 따라서, 모든 피커가 같은 규칙으로 날짜를 쓰고
+   * 해석합니다.
+   */
+  locale?: string;
+  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 비활성화된 DatePicker는 제출되지 않고 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 DatePicker는 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알려집니다. */
+  invalid?: boolean;
+  /** 제약 검증: 폼이 제출되려면 날짜가 있어야 합니다. */
+  required?: boolean;
+  /** 이 DatePicker에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const DatePicker: SynapseComponent<"clearTrigger" | "content" | "control" | "input" | "label" | "monthSelect" | "nextTrigger" | "positioner" | "presetTrigger" | "prevTrigger" | "rangeText" | "root" | "table" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "trigger" | "view" | "viewControl" | "viewTrigger" | "yearSelect", "root", DatePickerRootProps, never>;
+//#endregion
+//# sourceMappingURL=date-picker.d.mts.map

package/dist/components/date-picker/date-picker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.mts","names":[],"sources":["../../../src/components/date-picker/date-picker.tsx"],"mappings":";;;;;YAmBY;YAEA;iBAEK;EACf;EACA;EACA;;iBAGe;WACN;WACA,MAAM;;iBAGA;WACN;WACA;WACA,MAAM;;iBAGA;WACN,MAAM;;iBAGA;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB,OAAO;;EAEP,cAAc;;EAEd,gBAAgB,SAAS;;EAEzB,UAAU;;EAEV,UAAU;;EAEV;;EAEA;;;;;;;EAOA,qBAAqB;;EAErB,gBAAgB;;EAEhB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,cAAc;;EAEd;;EAEA;;;;;;;;EAQA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBA+MW,YAAU,uWAAA"}

package/dist/components/date-picker/date-picker.mjs

@@ -0,0 +1,269 @@
+"use client";
+import { resolveSize, sizeBelow } from "../../shared/size-scale.mjs";
+import { useLocale } from "../../provider/locale-context.mjs";
+import { calendar } from "../../icons/src/calendar.mjs";
+import { chevronLeft } from "../../icons/src/chevron-left.mjs";
+import { chevronRight } from "../../icons/src/chevron-right.mjs";
+import { close } from "../../icons/src/close.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { buttonPartClass } from "../../shared/button-style.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { datePickerRecipe } from "./date-picker.recipe.mjs";
+import { withSelectIndicator } from "../../shared/select-indicator.mjs";
+import { createElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as datePicker from "@zag-js/date-picker";
+import { parse } from "@zag-js/date-picker";
+//#region src/components/date-picker/date-picker.tsx
+const dayOf = (value) => typeof value === "object" && value !== null && "day" in value && typeof value.day === "number" ? value.day : void 0;
+const isoOf = (date) => String(date);
+const toMachineProps = (props) => ({
+	...props.value === void 0 ? {} : { value: parse([...props.value]) },
+	...props.defaultValue === void 0 ? {} : { defaultValue: parse([...props.defaultValue]) },
+	...props.focusedValue === void 0 ? {} : { focusedValue: parse(props.focusedValue) },
+	...props.defaultFocusedValue === void 0 ? {} : { defaultFocusedValue: parse(props.defaultFocusedValue) },
+	...props.min === void 0 ? {} : { min: parse(props.min) },
+	...props.max === void 0 ? {} : { max: parse(props.max) },
+	...props.isDateUnavailable === void 0 ? {} : { isDateUnavailable: (date) => props.isDateUnavailable?.(isoOf(date)) === true },
+	...props.onValueChange === void 0 ? {} : { onValueChange: (details) => props.onValueChange?.({
+		value: details.value.map(isoOf),
+		view: details.view
+	}) },
+	...props.onFocusChange === void 0 ? {} : { onFocusChange: (details) => props.onFocusChange?.({
+		value: details.value.map(isoOf),
+		focusedValue: isoOf(details.focusedValue),
+		view: details.view
+	}) }
+});
+const VIEWS = [
+	"day",
+	"month",
+	"year"
+];
+const GRID_COLUMNS = 4;
+const capitalize = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+const viewOf = (getterArgs) => {
+	const view = getterArgs["view"];
+	return view === "month" || view === "year" ? view : "day";
+};
+const cellGetter = (suffix) => ({
+	resolve: (getterArgs) => `get${capitalize(viewOf(getterArgs))}TableCell${suffix}`,
+	candidates: VIEWS.map((view) => `get${capitalize(view)}TableCell${suffix}`)
+});
+const weekDayHeaderRow = (api, _translate, getterArgs) => {
+	const view = viewOf(getterArgs);
+	if (view !== "day") return null;
+	const calendar = api;
+	return createElement(DatePicker.TableRow, { view }, calendar.weekDays.map((weekDay) => createElement(DatePicker.TableHeader, {
+		key: weekDay.long,
+		view
+	}, weekDay.narrow)));
+};
+const calendarRows = (api, _translate, getterArgs) => {
+	const view = viewOf(getterArgs);
+	const calendar = api;
+	if (view === "day") return calendar.weeks.map((week, index) => createElement(DatePicker.TableRow, {
+		key: `week-${String(index)}`,
+		view
+	}, week.map((day) => createElement(DatePicker.TableCell, {
+		key: isoOf(day),
+		view,
+		value: day
+	}, createElement(DatePicker.TableCellTrigger, {
+		view,
+		value: day
+	})))));
+	return (view === "month" ? calendar.getMonthsGrid({
+		columns: GRID_COLUMNS,
+		format: "short"
+	}) : calendar.getYearsGrid({ columns: GRID_COLUMNS })).map((row, index) => createElement(DatePicker.TableRow, {
+		key: `${view}-${String(index)}`,
+		view
+	}, row.map((cell) => createElement(DatePicker.TableCell, {
+		key: cell.value,
+		view,
+		value: cell.value,
+		columns: GRID_COLUMNS
+	}, createElement(DatePicker.TableCellTrigger, {
+		view,
+		value: cell.value
+	})))));
+};
+const cellText = (api, _translate, getterArgs) => {
+	const view = viewOf(getterArgs);
+	const value = getterArgs["value"];
+	if (view === "day") {
+		const day = dayOf(value);
+		return day === void 0 ? null : String(day);
+	}
+	if (view === "year") return String(value);
+	return api.getMonths({ format: "short" }).find((candidate) => candidate.value === value)?.label ?? String(value);
+};
+const viewLabel = (api, _translate, getterArgs) => {
+	const view = viewOf(getterArgs);
+	const calendar = api;
+	if (view === "day") return calendar.visibleRangeText.start;
+	if (view === "month") return String(calendar.visibleRange.start.year);
+	const decade = calendar.getDecade();
+	return `${String(decade.start ?? "")}–${String(decade.end ?? "")}`;
+};
+const rangeLabel = (api) => api.visibleRangeText.formatted;
+const monthOptions = (api) => api.getMonths().map((month) => createElement("option", {
+	key: month.value,
+	value: month.value,
+	disabled: month.disabled === true
+}, month.label));
+const dayCellKey = (state) => {
+	if (state.unavailable) return "datePicker.tableCellTrigger.unavailable";
+	if (state.firstInRange) return "datePicker.tableCellTrigger.rangeStart";
+	if (state.lastInRange) return "datePicker.tableCellTrigger.rangeEnd";
+	if (state.inRange) return "datePicker.tableCellTrigger.inRange";
+	if (state.selected) return "datePicker.tableCellTrigger.selected";
+	return "datePicker.tableCellTrigger.choose";
+};
+const PREV_LABELS = {
+	day: "datePicker.prevTrigger.month",
+	month: "datePicker.prevTrigger.year",
+	year: "datePicker.prevTrigger.decade"
+};
+const NEXT_LABELS = {
+	day: "datePicker.nextTrigger.month",
+	month: "datePicker.nextTrigger.year",
+	year: "datePicker.nextTrigger.decade"
+};
+const VIEW_TRIGGER_LABELS = {
+	day: "datePicker.viewTrigger.month",
+	month: "datePicker.viewTrigger.year"
+};
+const TABLE_ROLE_DESCRIPTIONS = {
+	day: "datePicker.table.dayView",
+	month: "datePicker.table.monthView",
+	year: "datePicker.table.yearView"
+};
+const yearOptions = (api) => api.getYears().map((year) => createElement("option", {
+	key: year.value,
+	value: year.value,
+	disabled: year.disabled === true
+}, year.label));
+const DatePicker = defineComponent()({
+	name: "DatePicker",
+	module: datePicker,
+	rootPart: "root",
+	field: {
+		ids: (field) => ({
+			label: (index) => index === 0 ? field.label : `${field.label}:${String(index)}`,
+			input: (index) => index === 0 ? field.control : `${field.control}:${String(index)}`
+		}),
+		describe: ["input", "trigger"]
+	},
+	elements: {
+		input: "input",
+		monthSelect: "select",
+		yearSelect: "select",
+		rangeText: "span"
+	},
+	defaultContent: {
+		trigger: () => /* @__PURE__ */ jsx(Icon, { icon: calendar }),
+		clearTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: close }),
+		prevTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronLeft }),
+		nextTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: chevronRight }),
+		tableHead: weekDayHeaderRow,
+		tableBody: calendarRows,
+		tableCellTrigger: cellText,
+		viewTrigger: viewLabel,
+		rangeText: rangeLabel,
+		monthSelect: monthOptions,
+		yearSelect: yearOptions
+	},
+	getterProps: {
+		label: ["index"],
+		input: ["index", "fixOnBlur"],
+		table: ["view", "columns"],
+		tableHead: ["view"],
+		tableHeader: ["view"],
+		tableBody: ["view"],
+		tableRow: ["view"],
+		tableCell: ["view", "value"],
+		tableCellTrigger: ["view", "value"],
+		view: ["view"],
+		viewControl: ["view"],
+		viewTrigger: ["view"],
+		prevTrigger: ["view"],
+		nextTrigger: ["view"],
+		presetTrigger: ["value"]
+	},
+	getterNames: {
+		tableCell: cellGetter("Props"),
+		tableCellTrigger: cellGetter("TriggerProps")
+	},
+	amendBehaviorProps: {
+		content: (_behaviorProps, _api, _args, translate) => ({ "aria-roledescription": translate("datePicker.content.roleDescription") }),
+		table: (_behaviorProps, _api, getterArgs, translate) => ({ "aria-roledescription": translate(TABLE_ROLE_DESCRIPTIONS[viewOf(getterArgs)]) }),
+		viewTrigger: (behaviorProps, api, getterArgs, translate) => {
+			const view = viewOf(getterArgs);
+			if (behaviorProps["disabled"] === true || view === "year") return { "aria-label": void 0 };
+			const label = viewLabel(api, translate, getterArgs);
+			return { "aria-label": translate(VIEW_TRIGGER_LABELS[view], { label: String(label) }) };
+		},
+		tableRow: () => ({ role: "row" }),
+		tableHeader: () => ({ role: "columnheader" }),
+		positioner: (_behaviorProps, api) => api.inline ? { style: void 0 } : {}
+	},
+	unrenderedGetters: ["getWeekNumberCellProps", "getWeekNumberHeaderCellProps"],
+	machineTranslations: {
+		content: "datePicker.content.label",
+		clearTrigger: "datePicker.clearTrigger.label",
+		monthSelect: "datePicker.monthSelect.label",
+		yearSelect: "datePicker.yearSelect.label",
+		weekColumnHeader: "datePicker.tableHeader.weekColumn",
+		dayCell: (t) => (state) => t(dayCellKey(state), { date: state.valueText }),
+		trigger: (t) => (open) => t(open ? "datePicker.trigger.close" : "datePicker.trigger.open"),
+		prevTrigger: (t) => (view) => t(PREV_LABELS[view]),
+		nextTrigger: (t) => (view) => t(NEXT_LABELS[view]),
+		presetTrigger: () => () => void 0
+	},
+	variantProps: [
+		"value",
+		"defaultValue",
+		"onValueChange",
+		"focusedValue",
+		"defaultFocusedValue",
+		"onFocusChange",
+		"min",
+		"max",
+		"isDateUnavailable",
+		"size"
+	],
+	useMachineProps: (props) => {
+		const { locale } = useLocale();
+		return {
+			...toMachineProps(props),
+			locale: props.locale ?? locale
+		};
+	},
+	slots: (props) => {
+		const size = resolveSize(props.size, "DatePicker");
+		const raw = datePickerRecipe.raw({ size });
+		const navigation = {
+			variant: "ghost",
+			tone: "neutral",
+			size: sizeBelow(size)
+		};
+		return {
+			...datePickerRecipe({ size }),
+			control: inputPartClass(size, raw.control),
+			prevTrigger: buttonPartClass(navigation, raw.prevTrigger),
+			nextTrigger: buttonPartClass(navigation, raw.nextTrigger)
+		};
+	}
+});
+Object.assign(DatePicker, {
+	MonthSelect: withSelectIndicator(DatePicker.MonthSelect),
+	YearSelect: withSelectIndicator(DatePicker.YearSelect)
+});
+//#endregion
+export { DatePicker };
+
+//# sourceMappingURL=date-picker.mjs.map

package/dist/components/date-picker/date-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.mjs","names":["calendarIcon"],"sources":["../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["'use client'\n\nimport { calendar as calendarIcon, chevronLeft, chevronRight, close } from '@neurocle/synapse-icons'\nimport * as datePicker from '@zag-js/date-picker'\nimport { parse } from '@zag-js/date-picker'\nimport { createElement } from 'react'\n\nimport { datePickerRecipe } from '#/components/date-picker/date-picker.recipe.ts'\nimport type { OpenChangeDetails } from '#/components/details.ts'\nimport { useLocale } from '#/provider/locale-context.ts'\nimport type { TranslationKey, TranslationOverrides, Translator } from '#/provider/translations.ts'\nimport { buttonPartClass, type ButtonStyle } from '#/shared/button-style.ts'\nimport { Icon } from '#/shared/icon.tsx'\nimport { inputPartClass } from '#/shared/input-style.ts'\nimport { withSelectIndicator } from '#/shared/select-indicator.tsx'\nimport { resolveSize, type Size, sizeBelow } from '#/shared/size-scale.ts'\nimport { defineComponent } from '#/system/create-component.ts'\nimport type { DefaultContent } from '#/system/types.ts'\n\nexport type DatePickerView = 'day' | 'month' | 'year'\n\nexport type DatePickerSelectionMode = 'single' | 'range' | 'multiple'\n\nexport interface DatePickerPositioning {\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n  gutter?: number\n  flip?: boolean\n}\n\nexport interface DatePickerValueChangeDetails {\n  readonly value: readonly string[]\n  readonly view: DatePickerView\n}\n\nexport interface DatePickerFocusChangeDetails {\n  readonly value: readonly string[]\n  readonly focusedValue: string\n  readonly view: DatePickerView\n}\n\nexport interface DatePickerViewChangeDetails {\n  readonly view: DatePickerView\n}\n\nexport interface DatePickerRootProps {\n  /** 제어되는 값이며, ISO 날짜입니다 — `['2026-09-20']`. */\n  value?: readonly string[]\n  /** 비제어 초기 값. `value`가 주어지면 무시됩니다. */\n  defaultValue?: readonly string[]\n  /** 제어 여부와 무관하게 값이 바뀔 때마다 알림을 받습니다. */\n  onValueChange?: (details: DatePickerValueChangeDetails) => void\n  /** 키보드가 올라가 있는, 제어되는 날짜이며 ISO 날짜입니다. */\n  focusedValue?: string\n  /** 비제어 초기 포커스 날짜. */\n  defaultFocusedValue?: string\n  /** 키보드가 날짜 사이를 오갈 때 알림을 받습니다. */\n  onFocusChange?: (details: DatePickerFocusChangeDetails) => void\n  /** 제어되는 달력의 열림 상태. */\n  open?: boolean\n  /** 비제어 초기 열림 상태. */\n  defaultOpen?: boolean\n  /** 달력이 열리거나 닫힐 때마다 알림을 받습니다. */\n  onOpenChange?: (details: OpenChangeDetails) => void\n  /** 제어되는 격자 — 일, 월 또는 연입니다. */\n  view?: DatePickerView\n  /** 비제어 초기 격자. 기본값은 `minView`입니다. */\n  defaultView?: DatePickerView\n  /** 격자가 바뀔 때 알림을 받습니다. */\n  onViewChange?: (details: DatePickerViewChangeDetails) => void\n  /** 선택할 수 있는 가장 성긴 격자. 기본값은 `day`입니다. */\n  minView?: DatePickerView\n  /** 뷰 trigger가 올라갈 수 있는 가장 촘촘한 격자. 기본값은 `year`입니다. */\n  maxView?: DatePickerView\n  /** 받아들이는 가장 이른 날짜이며, ISO 날짜입니다. */\n  min?: string\n  /** 받아들이는 가장 늦은 날짜이며, ISO 날짜입니다. */\n  max?: string\n  /**\n   * 피커 전체를 비활성화하지 않고 특정 날짜만 거부합니다.\n   *\n   * 날짜는 `value`와 같은 모양인 ISO 문자열로 도착하므로, 사용처가 답하기 위해 달력 객체를\n   * 만들거나 들여다볼 일이 없습니다.\n   */\n  isDateUnavailable?: (date: string) => boolean\n  /** 피커가 날짜를 몇 개나 쥐는지. 기본값은 `single`입니다. */\n  selectionMode?: DatePickerSelectionMode\n  /** `multiple` 선택의 개수 상한을 정합니다. */\n  maxSelectedDates?: number\n  /** 언제나 여섯 주를 렌더해, 달마다 달력의 높이가 달라지지 않게 합니다. */\n  fixedWeeks?: boolean\n  /** 격자가 어느 요일에서 시작하는지이며, `0`이 일요일입니다. 기본값은 로캘을 따릅니다. */\n  startOfWeek?: number\n  /** 이웃한 달의 날짜도 그것이 보이는 격자에서 선택할 수 있게 합니다. */\n  outsideDaySelectable?: boolean\n  /** 선택하면 달력을 닫습니다. 기본값은 true입니다. */\n  closeOnSelect?: boolean\n  /** 필드를 클릭하면 달력을 엽니다. */\n  openOnClick?: boolean\n  /** 달력을 제자리에 렌더해 언제나 열려 있게 합니다. */\n  inline?: boolean\n  /** 달력이 놓이는 위치. */\n  positioning?: DatePickerPositioning\n  /** 날짜를 해석할 때 쓰는 시간대. 기본값은 `UTC`입니다. */\n  timeZone?: string\n  /** 필드의 placeholder 텍스트. 기본값은 로캘의 날짜 형식입니다. */\n  placeholder?: string\n  /**\n   * 이 피커에 한해 provider의 로캘을 덮어씁니다.\n   *\n   * 한 페이지에 정말로 여러 로캘이 섞이는 드문 제품을 위한 것입니다. 설정하지 않고 두면\n   * 애플리케이션 전체가 `SynapseProvider`의 로캘을 따라서, 모든 피커가 같은 규칙으로 날짜를 쓰고\n   * 해석합니다.\n   */\n  locale?: string\n  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */\n  name?: string\n  /** 비활성화된 DatePicker는 제출되지 않고 반응하지도 않습니다. */\n  disabled?: boolean\n  /** 읽기 전용 DatePicker는 값을 제출하지만 바꿀 수는 없습니다. */\n  readOnly?: boolean\n  /** 보조 기술에 `aria-invalid`로 알려집니다. */\n  invalid?: boolean\n  /** 제약 검증: 폼이 제출되려면 날짜가 있어야 합니다. */\n  required?: boolean\n  /** 이 DatePicker에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */\n  translations?: TranslationOverrides\n  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */\n  size?: Size\n  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */\n  id?: string\n}\n\nconst dayOf = (value: unknown): number | undefined =>\n  typeof value === 'object' && value !== null && 'day' in value && typeof value.day === 'number'\n    ? value.day\n    : undefined\n\ninterface MachineValueChange {\n  value: readonly unknown[]\n  view: DatePickerView\n}\n\ninterface MachineFocusChange {\n  value: readonly unknown[]\n  focusedValue: unknown\n  view: DatePickerView\n}\n\nconst isoOf = (date: unknown): string => String(date)\n\nconst toMachineProps = (props: DatePickerRootProps): Record<string, unknown> => ({\n  ...(props.value === undefined ? {} : { value: parse([...props.value]) }),\n  ...(props.defaultValue === undefined ? {} : { defaultValue: parse([...props.defaultValue]) }),\n  ...(props.focusedValue === undefined ? {} : { focusedValue: parse(props.focusedValue) }),\n  ...(props.defaultFocusedValue === undefined\n    ? {}\n    : { defaultFocusedValue: parse(props.defaultFocusedValue) }),\n  ...(props.min === undefined ? {} : { min: parse(props.min) }),\n  ...(props.max === undefined ? {} : { max: parse(props.max) }),\n  ...(props.isDateUnavailable === undefined\n    ? {}\n    : { isDateUnavailable: (date: unknown) => props.isDateUnavailable?.(isoOf(date)) === true }),\n  ...(props.onValueChange === undefined\n    ? {}\n    : {\n        onValueChange: (details: MachineValueChange) =>\n          props.onValueChange?.({ value: details.value.map(isoOf), view: details.view }),\n      }),\n  ...(props.onFocusChange === undefined\n    ? {}\n    : {\n        onFocusChange: (details: MachineFocusChange) =>\n          props.onFocusChange?.({\n            value: details.value.map(isoOf),\n            focusedValue: isoOf(details.focusedValue),\n            view: details.view,\n          }),\n      }),\n})\n\nconst VIEWS: readonly DatePickerView[] = ['day', 'month', 'year']\n\nconst GRID_COLUMNS = 4\n\nconst capitalize = (value: string): string => `${value.charAt(0).toUpperCase()}${value.slice(1)}`\n\nconst viewOf = (getterArgs: Readonly<Record<string, unknown>>): DatePickerView => {\n  const view = getterArgs['view']\n  return view === 'month' || view === 'year' ? view : 'day'\n}\n\nconst cellGetter = (suffix: string) => ({\n  resolve: (getterArgs: Readonly<Record<string, unknown>>): string =>\n    `get${capitalize(viewOf(getterArgs))}TableCell${suffix}`,\n  candidates: VIEWS.map((view) => `get${capitalize(view)}TableCell${suffix}`),\n})\n\nconst weekDayHeaderRow: DefaultContent<datePicker.Api> = (api, _translate, getterArgs) => {\n  const view = viewOf(getterArgs)\n  if (view !== 'day') return null\n  const calendar = api\n  return createElement(\n    DatePicker.TableRow,\n    { view },\n    calendar.weekDays.map((weekDay) =>\n      createElement(DatePicker.TableHeader, { key: weekDay.long, view }, weekDay.narrow),\n    ),\n  )\n}\n\nconst calendarRows: DefaultContent<datePicker.Api> = (api, _translate, getterArgs) => {\n  const view = viewOf(getterArgs)\n  const calendar = api\n\n  if (view === 'day') {\n    return calendar.weeks.map((week, index) =>\n      createElement(\n        DatePicker.TableRow,\n        { key: `week-${String(index)}`, view },\n        week.map((day) =>\n          createElement(\n            DatePicker.TableCell,\n            { key: isoOf(day), view, value: day },\n            createElement(DatePicker.TableCellTrigger, { view, value: day }),\n          ),\n        ),\n      ),\n    )\n  }\n\n  const grid =\n    view === 'month'\n      ? calendar.getMonthsGrid({ columns: GRID_COLUMNS, format: 'short' })\n      : calendar.getYearsGrid({ columns: GRID_COLUMNS })\n\n  return grid.map((row, index) =>\n    createElement(\n      DatePicker.TableRow,\n      { key: `${view}-${String(index)}`, view },\n      row.map((cell) =>\n        createElement(\n          DatePicker.TableCell,\n          { key: cell.value, view, value: cell.value, columns: GRID_COLUMNS },\n          createElement(DatePicker.TableCellTrigger, { view, value: cell.value }),\n        ),\n      ),\n    ),\n  )\n}\n\nconst cellText: DefaultContent<datePicker.Api> = (api, _translate, getterArgs) => {\n  const view = viewOf(getterArgs)\n  const value = getterArgs['value']\n  if (view === 'day') {\n    const day = dayOf(value)\n    return day === undefined ? null : String(day)\n  }\n  if (view === 'year') return String(value)\n  const month = api.getMonths({ format: 'short' }).find((candidate) => candidate.value === value)\n  return month?.label ?? String(value)\n}\n\nconst viewLabel: DefaultContent<datePicker.Api> = (api, _translate, getterArgs) => {\n  const view = viewOf(getterArgs)\n  const calendar = api\n  if (view === 'day') return calendar.visibleRangeText.start\n  if (view === 'month') return String(calendar.visibleRange.start.year)\n  const decade = calendar.getDecade()\n  return `${String(decade.start ?? '')}–${String(decade.end ?? '')}`\n}\n\nconst rangeLabel: DefaultContent<datePicker.Api> = (api) => api.visibleRangeText.formatted\n\nconst monthOptions: DefaultContent<datePicker.Api> = (api) =>\n  api\n    .getMonths()\n    .map((month) =>\n      createElement(\n        'option',\n        { key: month.value, value: month.value, disabled: month.disabled === true },\n        month.label,\n      ),\n    )\n\ninterface DayCellState {\n  readonly valueText: string\n  readonly unavailable: boolean\n  readonly firstInRange: boolean\n  readonly lastInRange: boolean\n  readonly inRange: boolean\n  readonly selected: boolean\n}\n\nconst dayCellKey = (state: DayCellState): TranslationKey => {\n  if (state.unavailable) return 'datePicker.tableCellTrigger.unavailable'\n  if (state.firstInRange) return 'datePicker.tableCellTrigger.rangeStart'\n  if (state.lastInRange) return 'datePicker.tableCellTrigger.rangeEnd'\n  if (state.inRange) return 'datePicker.tableCellTrigger.inRange'\n  if (state.selected) return 'datePicker.tableCellTrigger.selected'\n  return 'datePicker.tableCellTrigger.choose'\n}\n\nconst PREV_LABELS: Record<DatePickerView, TranslationKey> = {\n  day: 'datePicker.prevTrigger.month',\n  month: 'datePicker.prevTrigger.year',\n  year: 'datePicker.prevTrigger.decade',\n}\n\nconst NEXT_LABELS: Record<DatePickerView, TranslationKey> = {\n  day: 'datePicker.nextTrigger.month',\n  month: 'datePicker.nextTrigger.year',\n  year: 'datePicker.nextTrigger.decade',\n}\n\nconst VIEW_TRIGGER_LABELS: Record<Exclude<DatePickerView, 'year'>, TranslationKey> = {\n  day: 'datePicker.viewTrigger.month',\n  month: 'datePicker.viewTrigger.year',\n}\n\nconst TABLE_ROLE_DESCRIPTIONS: Record<DatePickerView, TranslationKey> = {\n  day: 'datePicker.table.dayView',\n  month: 'datePicker.table.monthView',\n  year: 'datePicker.table.yearView',\n}\n\nconst yearOptions: DefaultContent<datePicker.Api> = (api) =>\n  api\n    .getYears()\n    .map((year) =>\n      createElement(\n        'option',\n        { key: year.value, value: year.value, disabled: year.disabled === true },\n        year.label,\n      ),\n    )\n\nexport const DatePicker = defineComponent<DatePickerRootProps>()({\n  name: 'DatePicker',\n  module: datePicker,\n  rootPart: 'root',\n  field: {\n    ids: (field) => ({\n      label: (index: number) => (index === 0 ? field.label : `${field.label}:${String(index)}`),\n      input: (index: number) => (index === 0 ? field.control : `${field.control}:${String(index)}`),\n    }),\n    describe: ['input', 'trigger'],\n  },\n  elements: {\n    input: 'input',\n    monthSelect: 'select',\n    yearSelect: 'select',\n    rangeText: 'span',\n  },\n  defaultContent: {\n    trigger: () => <Icon icon={calendarIcon} />,\n    clearTrigger: () => <Icon icon={close} />,\n    prevTrigger: () => <Icon icon={chevronLeft} />,\n    nextTrigger: () => <Icon icon={chevronRight} />,\n    tableHead: weekDayHeaderRow,\n    tableBody: calendarRows,\n    tableCellTrigger: cellText,\n    viewTrigger: viewLabel,\n    rangeText: rangeLabel,\n    monthSelect: monthOptions,\n    yearSelect: yearOptions,\n  },\n  getterProps: {\n    label: ['index'],\n    input: ['index', 'fixOnBlur'],\n    table: ['view', 'columns'],\n    tableHead: ['view'],\n    tableHeader: ['view'],\n    tableBody: ['view'],\n    tableRow: ['view'],\n    tableCell: ['view', 'value'],\n    tableCellTrigger: ['view', 'value'],\n    view: ['view'],\n    viewControl: ['view'],\n    viewTrigger: ['view'],\n    prevTrigger: ['view'],\n    nextTrigger: ['view'],\n    presetTrigger: ['value'],\n  },\n  getterNames: {\n    tableCell: cellGetter('Props'),\n    tableCellTrigger: cellGetter('TriggerProps'),\n  },\n  amendBehaviorProps: {\n    content: (_behaviorProps, _api, _args, translate) => ({\n      'aria-roledescription': translate('datePicker.content.roleDescription'),\n    }),\n    table: (_behaviorProps, _api, getterArgs, translate) => ({\n      'aria-roledescription': translate(TABLE_ROLE_DESCRIPTIONS[viewOf(getterArgs)]),\n    }),\n    viewTrigger: (behaviorProps, api, getterArgs, translate) => {\n      const view = viewOf(getterArgs)\n      if (behaviorProps['disabled'] === true || view === 'year') return { 'aria-label': undefined }\n      const label = viewLabel(api, translate, getterArgs)\n      return { 'aria-label': translate(VIEW_TRIGGER_LABELS[view], { label: String(label) }) }\n    },\n    tableRow: () => ({ role: 'row' }),\n    tableHeader: () => ({ role: 'columnheader' }),\n    // zag의 `getPositionerProps()`는 `inline`일 때도 style을 돌려줘서 positioner가 뷰포트 높이만큼\n    // 위에 놓입니다. `inline`이면 이 style을 걷어내 흐름 안에 놓이게 합니다.\n    positioner: (_behaviorProps, api) => (api.inline ? { style: undefined } : {}),\n  },\n  unrenderedGetters: ['getWeekNumberCellProps', 'getWeekNumberHeaderCellProps'],\n  machineTranslations: {\n    content: 'datePicker.content.label',\n    clearTrigger: 'datePicker.clearTrigger.label',\n    monthSelect: 'datePicker.monthSelect.label',\n    yearSelect: 'datePicker.yearSelect.label',\n    weekColumnHeader: 'datePicker.tableHeader.weekColumn',\n    dayCell: (t: Translator) => (state: DayCellState) =>\n      t(dayCellKey(state), { date: state.valueText }),\n    trigger: (t: Translator) => (open: boolean) =>\n      t(open ? 'datePicker.trigger.close' : 'datePicker.trigger.open'),\n    prevTrigger: (t: Translator) => (view: DatePickerView) => t(PREV_LABELS[view]),\n    nextTrigger: (t: Translator) => (view: DatePickerView) => t(NEXT_LABELS[view]),\n    presetTrigger: () => (): undefined => undefined,\n  },\n  variantProps: [\n    'value',\n    'defaultValue',\n    'onValueChange',\n    'focusedValue',\n    'defaultFocusedValue',\n    'onFocusChange',\n    'min',\n    'max',\n    'isDateUnavailable',\n    'size',\n  ],\n  useMachineProps: (props: DatePickerRootProps) => {\n    const { locale } = useLocale()\n    return {\n      ...toMachineProps(props),\n      locale: props.locale ?? locale,\n    }\n  },\n  slots: (props: DatePickerRootProps) => {\n    const size = resolveSize(props.size, 'DatePicker')\n    const raw = datePickerRecipe.raw({ size })\n    const navigation: ButtonStyle = { variant: 'ghost', tone: 'neutral', size: sizeBelow(size) }\n    return {\n      ...datePickerRecipe({ size }),\n      control: inputPartClass(size, raw.control),\n      prevTrigger: buttonPartClass(navigation, raw.prevTrigger),\n      nextTrigger: buttonPartClass(navigation, raw.nextTrigger),\n    }\n  },\n})\n\nObject.assign(DatePicker, {\n  MonthSelect: withSelectIndicator(DatePicker.MonthSelect),\n  YearSelect: withSelectIndicator(DatePicker.YearSelect),\n})\n"],"mappings":"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"}