@devslab/dds-solid 0.23.0 → 0.25.0

package/dist/month-picker.js

@@ -0,0 +1,287 @@
+import { l as e, t } from "./calendar-view-CZLsC57_.js";
+import { n } from "./utils-oKxhg9RG.js";
+import { a as r, c as i, l as a, m as o, n as s, s as c, u as l } from "./date-only-Bu4UmsTP.js";
+import { Show as u, createEffect as d, createMemo as f, createSignal as p, createUniqueId as m, on as h, onCleanup as g, onMount as _ } from "solid-js";
+import { Portal as ee, addEventListener as te, className as ne, createComponent as v, delegateEvents as y, effect as b, getNextElement as x, getNextMarker as S, insert as C, memo as w, runHydrationEvents as re, setAttribute as T, setProperty as E, template as D, use as ie } from "solid-js/web";
+import { DatePicker as O, parseDate as k } from "@ark-ui/solid/date-picker";
+//#region src/month-picker.tsx
+var A = /*#__PURE__*/ D("<svg width=20 height=20 viewBox=\"0 0 24 24\"fill=none stroke=currentColor stroke-width=1.5 aria-hidden=true><rect x=3.5 y=5.5 width=17 height=15 rx=2></rect><path d=\"M7.5 3v5M16.5 3v5M3.5 10.5h17\">"), ae = /*#__PURE__*/ D("<span aria-hidden=true> *"), oe = /*#__PURE__*/ D("<label class=dds-field__label><!$><!/><!$><!/>"), se = /*#__PURE__*/ D("<input type=text autocomplete=off autocorrect=off>"), ce = /*#__PURE__*/ D("<input type=hidden>"), le = /*#__PURE__*/ D("<span class=dds-field__error role=alert>"), ue = /*#__PURE__*/ D("<div role=group><!$><!/><!$><!/><!$><!/><!$><!/>"), j = (e) => c(e) ? [k(`${e}-01`)] : [];
+function de() {
+	return x(A);
+}
+function M(y) {
+	let D = () => y.locale ?? "ko-KR", A = y.id ?? `dds-month-${m()}`, M = `${A}-error`, N = () => l(D(), y.messages), [P, F] = e({
+		value: () => y.value,
+		defaultValue: y.defaultValue ?? "",
+		onChange: void 0
+	}), [I, fe] = p({
+		text: r(P(), D()),
+		locale: D()
+	}), L = f(() => {
+		let e = I(), t = s(e.text);
+		return e.locale !== D() && c(t) ? r(t, D()) : e.text;
+	}), R = (e) => fe({
+		text: e,
+		locale: D()
+	}), [pe, z] = p(j(P())), [me, B] = p(!1), V, H, U = P(), W, [G, he] = p();
+	_(() => {
+		V && he(V.closest("[role=\"dialog\"], [role=\"alertdialog\"]") ?? V.ownerDocument.body);
+	});
+	let K = () => y.disabled || y.readOnly, q = f(() => a(y.min, y.max)), J = f(() => o(L(), y.required ?? !1, y.min, y.max)), Y = () => J().valid ? void 0 : J().reason === "required" ? N().required : N().invalid, X = () => y.invalid || !J().valid, Z = () => y.label ?? y["aria-label"] ?? "";
+	d(h(P, (e) => {
+		e !== U && (U = e, R(r(e, D())), z(j(e)));
+	}, { defer: !0 })), d(() => V?.setCustomValidity(Y() ?? "")), d(() => {
+		K() && (B(!1), W !== void 0 && cancelAnimationFrame(W));
+	}), _(() => {
+		let e = V?.ownerDocument;
+		if (!e) return;
+		let t = (t) => {
+			let n = y.form ? e.getElementById(y.form) : V?.form;
+			!n || t.target !== n || setTimeout(() => {
+				if (t.defaultPrevented) return;
+				let e = y.value ?? y.defaultValue ?? "";
+				U = e, F(e);
+				let n = r(e, D());
+				R(n), z(j(e)), V && (V.value = n);
+			}, 0);
+		};
+		e.addEventListener("reset", t, !0), g(() => e.removeEventListener("reset", t, !0));
+	}), g(() => {
+		W !== void 0 && cancelAnimationFrame(W);
+	});
+	function Q(e, t = 1) {
+		W !== void 0 && cancelAnimationFrame(W);
+		let n = (t) => {
+			W = requestAnimationFrame(() => {
+				if (t > 1) return n(t - 1);
+				K() || e()?.focus({ preventScroll: !0 });
+			});
+		};
+		n(t);
+	}
+	function $(e) {
+		K() || (z(j(e)), e !== U && (U = e, F(e), y.onValueChange?.(e)));
+	}
+	function ge(e) {
+		if (K()) return;
+		let t = o(e, !1, y.min, y.max);
+		R(t.valid ? r(t.value ?? "", D()) : e), t.valid && $(t.value ?? "");
+	}
+	return (() => {
+		var e = x(ue), a = e.firstChild, [s, c] = S(a.nextSibling), l = s.nextSibling, [d, f] = S(l.nextSibling), p = d.nextSibling, [m, h] = S(p.nextSibling), _ = m.nextSibling, [F, I] = S(_.nextSibling);
+		return C(e, v(u, {
+			get when() {
+				return y.label;
+			},
+			get children() {
+				var e = x(oe), t = e.firstChild, [n, r] = S(t.nextSibling), i = n.nextSibling, [a, o] = S(i.nextSibling);
+				return T(e, "for", A), C(e, () => y.label, n, r), C(e, v(u, {
+					get when() {
+						return y.required;
+					},
+					get children() {
+						return x(ae);
+					}
+				}), a, o), e;
+			}
+		}), s, c), C(e, v(O.Root, {
+			get locale() {
+				return D();
+			},
+			get timeZone() {
+				return y.timeZone ?? "Asia/Seoul";
+			},
+			get disabled() {
+				return y.disabled;
+			},
+			get readOnly() {
+				return y.readOnly;
+			},
+			get required() {
+				return y.required;
+			},
+			get invalid() {
+				return X();
+			},
+			get open() {
+				return w(() => !!me())() && !K();
+			},
+			onOpenChange: (e) => {
+				B(e.open && !K()), e.open || z(j(U));
+			},
+			get min() {
+				return w(() => !!q().min)() ? k(q().min) : void 0;
+			},
+			get max() {
+				return w(() => !!q().max)() ? k(q().max) : void 0;
+			},
+			minView: "month",
+			maxView: "month",
+			defaultView: "month",
+			get translations() {
+				return { clearTrigger: N().clear };
+			},
+			get value() {
+				return pe();
+			},
+			onValueChange: (e) => {
+				if (K()) return;
+				let t = e.value[0]?.toString().slice(0, 7) ?? "";
+				t !== "" && !o(t, !1, y.min, y.max).valid || (R(r(t, D())), $(t), Q(() => V, 2));
+			},
+			get positioning() {
+				return {
+					placement: "bottom-start",
+					gutter: 8,
+					strategy: G()?.matches("[role=\"dialog\"], [role=\"alertdialog\"]") ? "fixed" : "absolute",
+					hideWhenDetached: !!G()?.matches("[role=\"dialog\"], [role=\"alertdialog\"]")
+				};
+			},
+			get children() {
+				return [v(O.Control, {
+					class: "dds-date-picker-control",
+					get "data-filled"() {
+						return L() === "" ? void 0 : "true";
+					},
+					get children() {
+						return [(() => {
+							var e = x(se);
+							e.$$keydown = (e) => {
+								e.key === "Enter" && !e.isComposing && (e.preventDefault(), e.stopPropagation());
+							}, te(e, "input", (e) => {
+								e.stopPropagation(), ge(e.currentTarget.value);
+							});
+							var t = V;
+							return typeof t == "function" ? ie(t, e) : V = e, T(e, "id", A), T(e, "spellcheck", !1), b((t) => {
+								var r = y.form, a = y.label ? void 0 : y["aria-label"], o = y["aria-labelledby"], s = X() ? "true" : void 0, c = y.required ? "true" : void 0, l = n(y["aria-describedby"], Y() && M), u = y.required, d = y.readOnly, f = y.disabled, p = i(D()) ? "YYYY/MM" : "YYYY-MM";
+								return r !== t.e && T(e, "form", t.e = r), a !== t.t && T(e, "aria-label", t.t = a), o !== t.a && T(e, "aria-labelledby", t.a = o), s !== t.o && T(e, "aria-invalid", t.o = s), c !== t.i && T(e, "aria-required", t.i = c), l !== t.n && T(e, "aria-describedby", t.n = l), u !== t.s && E(e, "required", t.s = u), d !== t.h && E(e, "readOnly", t.h = d), f !== t.r && E(e, "disabled", t.r = f), p !== t.d && T(e, "placeholder", t.d = p), t;
+							}, {
+								e: void 0,
+								t: void 0,
+								a: void 0,
+								o: void 0,
+								i: void 0,
+								n: void 0,
+								s: void 0,
+								h: void 0,
+								r: void 0,
+								d: void 0
+							}), b(() => E(e, "value", L())), re(), e;
+						})(), v(O.Trigger, {
+							ref(e) {
+								var t = H;
+								typeof t == "function" ? t(e) : H = e;
+							},
+							class: "dds-btn dds-btn--secondary",
+							get "aria-label"() {
+								return `${Z()} ${N().openCalendar}`.trim();
+							},
+							get children() {
+								return v(de, {});
+							}
+						})];
+					}
+				}), v(u, {
+					get when() {
+						return G();
+					},
+					children: (e) => v(ee, {
+						get mount() {
+							return e();
+						},
+						get children() {
+							return v(O.Positioner, {
+								class: "dds-date-picker-positioner",
+								get children() {
+									return v(O.Content, {
+										ref: (e) => {
+											let t = (e) => {
+												e.key === "Escape" && Q(() => H, 2);
+											};
+											e.addEventListener("keydown", t, !0), g(() => e.removeEventListener("keydown", t, !0));
+										},
+										class: "dds-date-picker-content dds-month-picker-content",
+										get "aria-label"() {
+											return `${Z()} ${N().chooseMonth}`.trim();
+										},
+										get children() {
+											return v(t, {
+												view: "month",
+												get timeZone() {
+													return y.timeZone;
+												},
+												get min() {
+													return q().min;
+												},
+												get max() {
+													return q().max;
+												},
+												get locale() {
+													return D();
+												},
+												get messages() {
+													return N();
+												},
+												get disabled() {
+													return y.disabled;
+												},
+												get readOnly() {
+													return y.readOnly;
+												},
+												get showToday() {
+													return y.showThisMonth;
+												},
+												get showClear() {
+													return y.clearable;
+												},
+												onClear: () => {
+													R(""), $("");
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					})
+				})];
+			}
+		}), d, f), C(e, v(u, {
+			get when() {
+				return y.name;
+			},
+			get children() {
+				var e = x(ce);
+				return b((t) => {
+					var n = y.name, r = y.form, i = y.disabled;
+					return n !== t.e && T(e, "name", t.e = n), r !== t.t && T(e, "form", t.t = r), i !== t.a && E(e, "disabled", t.a = i), t;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0
+				}), b(() => E(e, "value", P())), e;
+			}
+		}), m, h), C(e, v(u, {
+			get when() {
+				return Y();
+			},
+			get children() {
+				var e = x(le);
+				return T(e, "id", M), C(e, Y), e;
+			}
+		}), F, I), b((t) => {
+			var n = `dds-field dds-date-picker dds-month-picker dds-date-picker--${y.labelPlacement ?? "outside"}${Y() ? " dds-field--error" : ""}`, r = L() === "" ? void 0 : "true", i = X() ? "" : void 0, a = y.disabled ? "" : void 0;
+			return n !== t.e && ne(e, t.e = n), r !== t.t && T(e, "data-filled", t.t = r), i !== t.a && T(e, "data-invalid", t.a = i), a !== t.o && T(e, "data-disabled", t.o = a), t;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		}), e;
+	})();
+}
+y(["keydown"]);
+//#endregion
+export { M as MonthPicker };
+
+//# sourceMappingURL=month-picker.js.map

package/dist/month-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-picker.js","names":["DatePicker","ArkDatePicker","parseDate","DateValue","Portal","createEffect","createMemo","createSignal","createUniqueId","on","onCleanup","onMount","Show","CalendarView","createControllableSignal","canonicalMonth","displayMonth","isCalendarMonth","isKorean","monthBounds","monthMessages","validateMonth","MonthPickerMessages","describedBy","MonthPickerValidity","MonthPickerProps","label","labelPlacement","id","value","defaultValue","onValueChange","next","locale","timeZone","min","max","messages","clearable","showThisMonth","required","disabled","readOnly","invalid","name","form","selectionOf","month","CalendarIcon","_$getNextElement","_tmpl$","MonthPicker","props","errorId","text","setValue","onChange","undefined","draftState","setDraftState","draft","state","canonical","setDraft","selection","setSelection","open","setOpen","input","HTMLInputElement","trigger","HTMLButtonElement","emitted","focusFrame","portalMount","setPortalMount","HTMLElement","closest","ownerDocument","body","blocked","bounds","validity","error","valid","reason","fieldName","defer","setCustomValidity","cancelAnimationFrame","doc","reset","event","Event","getElementById","target","setTimeout","defaultPrevented","shown","addEventListener","removeEventListener","focusSoon","frames","run","left","requestAnimationFrame","focus","preventScroll","commit","changeDraft","typed","_el$2","_tmpl$7","_el$10","firstChild","_el$11","_co$3","_$getNextMarker","nextSibling","_el$12","_el$13","_co$4","_el$14","_el$15","_co$5","_el$16","_el$17","_co$6","_$insert","_$createComponent","when","children","_el$3","_tmpl$3","_el$5","_el$6","_co$","_el$7","_el$8","_co$2","_$setAttribute","_tmpl$2","Root","_$memo","onOpenChange","details","minView","maxView","defaultView","translations","clearTrigger","clear","toString","slice","positioning","placement","gutter","strategy","matches","hideWhenDetached","Control","data-filled","_el$9","_tmpl$4","$$keydown","key","isComposing","preventDefault","stopPropagation","_$addEventListener","currentTarget","_ref$","_$use","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","_v$6","_v$7","_v$8","_v$9","_v$0","e","t","a","o","i","n","s","_$setProperty","h","r","d","_$runHydrationEvents","Trigger","ref","r$","_ref$2","aria-label","openCalendar","trim","mount","Positioner","Content","node","restoreTrigger","KeyboardEvent","chooseMonth","view","showToday","showClear","onClear","_el$0","_tmpl$5","_v$1","_v$10","_v$11","_el$1","_tmpl$6","_v$12","_v$13","_v$14","_v$15","_$className","_$delegateEvents"],"sources":["../src/month-picker.tsx"],"sourcesContent":["import {\n  DatePicker as ArkDatePicker,\n  parseDate,\n  type DateValue,\n} from \"@ark-ui/solid/date-picker\";\nimport { Portal } from \"solid-js/web\";\nimport {\n  createEffect,\n  createMemo,\n  createSignal,\n  createUniqueId,\n  on,\n  onCleanup,\n  onMount,\n  Show,\n} from \"solid-js\";\nimport { CalendarView } from \"./calendar-view\";\nimport { createControllableSignal } from \"./controllable\";\nimport {\n  canonicalMonth,\n  displayMonth,\n  isCalendarMonth,\n  isKorean,\n  monthBounds,\n  monthMessages,\n  validateMonth,\n  type MonthPickerMessages,\n} from \"./date-only\";\nimport { describedBy } from \"./utils\";\nexport type { MonthPickerMessages, MonthPickerValidity } from \"./date-only\";\n\nexport interface MonthPickerProps {\n  label?: string;\n  labelPlacement?: \"outside\" | \"inside\" | \"hidden\";\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  id?: string;\n  /** YYYY-MM or \"\" (no month). */\n  value?: string;\n  defaultValue?: string;\n  /** Called on user changes only, with YYYY-MM or \"\". */\n  onValueChange?: (next: string) => void;\n  locale?: string;\n  /** Decides the current month for \"This month\" and its marker. */\n  timeZone?: string;\n  /** Inclusive YYYY-MM bounds. */\n  min?: string;\n  max?: string;\n  messages?: MonthPickerMessages;\n  clearable?: boolean;\n  showThisMonth?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  /** Form field name submitting YYYY-MM (or \"\"), never the display text. */\n  name?: string;\n  form?: string;\n}\n\nconst selectionOf = (month: string): DateValue[] =>\n  isCalendarMonth(month) ? [parseDate(`${month}-01`)] : [];\n\nfunction CalendarIcon() {\n  return (\n    <svg\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3.5\" y=\"5.5\" width=\"17\" height=\"15\" rx=\"2\" />\n      <path d=\"M7.5 3v5M16.5 3v5M3.5 10.5h17\" />\n    </svg>\n  );\n}\n\nexport function MonthPicker(props: MonthPickerProps) {\n  const locale = () => props.locale ?? \"ko-KR\",\n    id = props.id ?? `dds-month-${createUniqueId()}`,\n    errorId = `${id}-error`;\n  const text = () => monthMessages(locale(), props.messages);\n  const [value, setValue] = createControllableSignal<string>({\n    value: () => props.value,\n    defaultValue: props.defaultValue ?? \"\",\n    onChange: undefined,\n  });\n  // The draft keeps its formatting locale so a locale change re-displays complete months only.\n  const [draftState, setDraftState] = createSignal({\n    text: displayMonth(value(), locale()),\n    locale: locale(),\n  });\n  const draft = createMemo(() => {\n    const state = draftState(),\n      canonical = canonicalMonth(state.text);\n    return state.locale !== locale() && isCalendarMonth(canonical)\n      ? displayMonth(canonical, locale())\n      : state.text;\n  });\n  const setDraft = (next: string) =>\n    setDraftState({ text: next, locale: locale() });\n  const [selection, setSelection] = createSignal(selectionOf(value()));\n  const [open, setOpen] = createSignal(false);\n  let input: HTMLInputElement | undefined,\n    trigger: HTMLButtonElement | undefined,\n    emitted = value(),\n    focusFrame: number | undefined;\n  const [portalMount, setPortalMount] = createSignal<HTMLElement>();\n  onMount(() => {\n    if (input)\n      setPortalMount(\n        input.closest<HTMLElement>('[role=\"dialog\"], [role=\"alertdialog\"]') ??\n          input.ownerDocument.body,\n      );\n  });\n  const blocked = () => props.disabled || props.readOnly;\n  const bounds = createMemo(() => monthBounds(props.min, props.max));\n  const validity = createMemo(() =>\n    validateMonth(draft(), props.required ?? false, props.min, props.max),\n  );\n  const error = () =>\n    validity().valid\n      ? undefined\n      : validity().reason === \"required\"\n        ? text().required\n        : text().invalid;\n  const invalid = () => props.invalid || !validity().valid;\n  const fieldName = () => props.label ?? props[\"aria-label\"] ?? \"\";\n\n  createEffect(\n    on(\n      value,\n      (next) => {\n        if (next === emitted) return;\n        emitted = next;\n        setDraft(displayMonth(next, locale()));\n        setSelection(selectionOf(next));\n      },\n      { defer: true },\n    ),\n  );\n  createEffect(() => input?.setCustomValidity(error() ?? \"\"));\n  createEffect(() => {\n    if (blocked()) {\n      setOpen(false);\n      if (focusFrame !== undefined) cancelAnimationFrame(focusFrame);\n    }\n  });\n  // Resolve the owning form when a reset happens: the field may mount before it joins its form.\n  onMount(() => {\n    const doc = input?.ownerDocument;\n    if (!doc) return;\n    const reset = (event: Event) => {\n      const form = props.form ? doc.getElementById(props.form) : input?.form;\n      if (!form || event.target !== form) return;\n      // A task, not a microtask: a user-triggered reset runs its listeners before rewriting the controls.\n      setTimeout(() => {\n        if (event.defaultPrevented) return;\n        const next = props.value ?? props.defaultValue ?? \"\";\n        emitted = next;\n        setValue(next);\n        const shown = displayMonth(next, locale());\n        setDraft(shown);\n        setSelection(selectionOf(next));\n        // Native reset rewrote the visible input; the draft may not have changed.\n        if (input) input.value = shown;\n      }, 0);\n    };\n    doc.addEventListener(\"reset\", reset, true);\n    onCleanup(() => doc.removeEventListener(\"reset\", reset, true));\n  });\n  onCleanup(() => {\n    if (focusFrame !== undefined) cancelAnimationFrame(focusFrame);\n  });\n\n  function focusSoon(target: () => HTMLElement | undefined, frames = 1) {\n    if (focusFrame !== undefined) cancelAnimationFrame(focusFrame);\n    const run = (left: number) => {\n      focusFrame = requestAnimationFrame(() => {\n        if (left > 1) return run(left - 1);\n        if (!blocked()) target()?.focus({ preventScroll: true });\n      });\n    };\n    run(frames);\n  }\n  function commit(next: string) {\n    if (blocked()) return;\n    setSelection(selectionOf(next));\n    if (next === emitted) return;\n    emitted = next;\n    setValue(next);\n    props.onValueChange?.(next);\n  }\n  /** Committing ignores `required` like DatePicker: an emptied field is still reported. */\n  function changeDraft(typed: string) {\n    if (blocked()) return;\n    const state = validateMonth(typed, false, props.min, props.max);\n    setDraft(state.valid ? displayMonth(state.value ?? \"\", locale()) : typed);\n    if (state.valid) commit(state.value ?? \"\");\n  }\n\n  return (\n    <div\n      class={`dds-field dds-date-picker dds-month-picker dds-date-picker--${props.labelPlacement ?? \"outside\"}${error() ? \" dds-field--error\" : \"\"}`}\n      data-filled={draft() !== \"\" ? \"true\" : undefined}\n      data-invalid={invalid() ? \"\" : undefined}\n      data-disabled={props.disabled ? \"\" : undefined}\n      role=\"group\"\n    >\n      <Show when={props.label}>\n        <label class=\"dds-field__label\" for={id}>\n          {props.label}\n          <Show when={props.required}>\n            <span aria-hidden=\"true\"> *</span>\n          </Show>\n        </label>\n      </Show>\n      <ArkDatePicker.Root\n        locale={locale()}\n        timeZone={props.timeZone ?? \"Asia/Seoul\"}\n        disabled={props.disabled}\n        readOnly={props.readOnly}\n        required={props.required}\n        invalid={invalid()}\n        open={open() && !blocked()}\n        onOpenChange={(details) => {\n          setOpen(details.open && !blocked());\n          if (!details.open) setSelection(selectionOf(emitted));\n        }}\n        min={bounds().min ? parseDate(bounds().min!) : undefined}\n        max={bounds().max ? parseDate(bounds().max!) : undefined}\n        minView=\"month\"\n        maxView=\"month\"\n        defaultView=\"month\"\n        translations={{ clearTrigger: text().clear }}\n        value={selection()}\n        onValueChange={(details) => {\n          if (blocked()) return;\n          const next = details.value[0]?.toString().slice(0, 7) ?? \"\";\n          if (\n            next !== \"\" &&\n            !validateMonth(next, false, props.min, props.max).valid\n          )\n            return;\n          setDraft(displayMonth(next, locale()));\n          commit(next);\n          focusSoon(() => input, 2);\n        }}\n        positioning={{\n          placement: \"bottom-start\",\n          gutter: 8,\n          strategy: portalMount()?.matches(\n            '[role=\"dialog\"], [role=\"alertdialog\"]',\n          )\n            ? \"fixed\"\n            : \"absolute\",\n          hideWhenDetached: !!portalMount()?.matches(\n            '[role=\"dialog\"], [role=\"alertdialog\"]',\n          ),\n        }}\n      >\n        <ArkDatePicker.Control\n          class=\"dds-date-picker-control\"\n          data-filled={draft() !== \"\" ? \"true\" : undefined}\n        >\n          <input\n            id={id}\n            ref={input}\n            form={props.form}\n            aria-label={props.label ? undefined : props[\"aria-label\"]}\n            aria-labelledby={props[\"aria-labelledby\"]}\n            aria-invalid={invalid() ? \"true\" : undefined}\n            aria-required={props.required ? \"true\" : undefined}\n            aria-describedby={describedBy(\n              props[\"aria-describedby\"],\n              error() && errorId,\n            )}\n            type=\"text\"\n            value={draft()}\n            required={props.required}\n            readOnly={props.readOnly}\n            disabled={props.disabled}\n            placeholder={isKorean(locale()) ? \"YYYY/MM\" : \"YYYY-MM\"}\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck={false}\n            on:input={(event) => {\n              event.stopPropagation();\n              changeDraft(event.currentTarget.value);\n            }}\n            onKeyDown={(event) => {\n              if (event.key === \"Enter\" && !event.isComposing) {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n            }}\n          />\n          <ArkDatePicker.Trigger\n            ref={trigger}\n            class=\"dds-btn dds-btn--secondary\"\n            aria-label={`${fieldName()} ${text().openCalendar}`.trim()}\n          >\n            <CalendarIcon />\n          </ArkDatePicker.Trigger>\n        </ArkDatePicker.Control>\n        <Show when={portalMount()}>\n          {(mount) => (\n            <Portal mount={mount()}>\n              <ArkDatePicker.Positioner class=\"dds-date-picker-positioner\">\n                <ArkDatePicker.Content\n                  ref={(node) => {\n                    const restoreTrigger = (event: KeyboardEvent) => {\n                      if (event.key === \"Escape\") focusSoon(() => trigger, 2);\n                    };\n                    node.addEventListener(\"keydown\", restoreTrigger, true);\n                    onCleanup(() =>\n                      node.removeEventListener(\"keydown\", restoreTrigger, true),\n                    );\n                  }}\n                  class=\"dds-date-picker-content dds-month-picker-content\"\n                  aria-label={`${fieldName()} ${text().chooseMonth}`.trim()}\n                >\n                  <CalendarView\n                    view=\"month\"\n                    timeZone={props.timeZone}\n                    min={bounds().min}\n                    max={bounds().max}\n                    locale={locale()}\n                    messages={text()}\n                    disabled={props.disabled}\n                    readOnly={props.readOnly}\n                    showToday={props.showThisMonth}\n                    showClear={props.clearable}\n                    onClear={() => {\n                      setDraft(\"\");\n                      commit(\"\");\n                    }}\n                  />\n                </ArkDatePicker.Content>\n              </ArkDatePicker.Positioner>\n            </Portal>\n          )}\n        </Show>\n      </ArkDatePicker.Root>\n      <Show when={props.name}>\n        <input\n          type=\"hidden\"\n          name={props.name}\n          form={props.form}\n          value={value()}\n          disabled={props.disabled}\n        />\n      </Show>\n      <Show when={error()}>\n        <span id={errorId} class=\"dds-field__error\" role=\"alert\">\n          {error()}\n        </span>\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/month-picker.server.js

@@ -0,0 +1,282 @@
+import { l as createControllableSignal, t as CalendarView } from "./assets/calendar-view-BBQGmkJ7.js";
+import { n as describedBy } from "./assets/utils-Ou0UJRlO.js";
+import { a as displayMonth, c as isKorean, l as monthBounds, m as validateMonth, n as canonicalMonth, s as isCalendarMonth, u as monthMessages } from "./assets/date-only-0Ldsjp43.js";
+import { Show, createEffect, createMemo, createSignal, createUniqueId, on, onCleanup, onMount } from "solid-js";
+import { Portal, createComponent, escape, memo, ssr, ssrAttribute, ssrHydrationKey } from "solid-js/web";
+import { DatePicker, parseDate } from "@ark-ui/solid/date-picker";
+//#region src/month-picker.tsx
+var _tmpl$ = ["<svg", " width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" aria-hidden=\"true\"><rect x=\"3.5\" y=\"5.5\" width=\"17\" height=\"15\" rx=\"2\"></rect><path d=\"M7.5 3v5M16.5 3v5M3.5 10.5h17\"></path></svg>"];
+var _tmpl$2 = ["<span", " aria-hidden=\"true\"> *</span>"];
+var _tmpl$3 = [
+	"<label",
+	" class=\"dds-field__label\"",
+	"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></label>"
+];
+var _tmpl$4 = [
+	"<input",
+	" type=\"text\"",
+	"",
+	"",
+	" autocomplete=\"off\" autocorrect=\"off\" spellcheck=\"false\">"
+];
+var _tmpl$5 = [
+	"<input",
+	" type=\"hidden\"",
+	"",
+	">"
+];
+var _tmpl$6 = [
+	"<span",
+	" class=\"dds-field__error\" role=\"alert\">",
+	"</span>"
+];
+var _tmpl$7 = [
+	"<div",
+	" class=\"",
+	"\"",
+	" role=\"group\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div>"
+];
+var selectionOf = (month) => isCalendarMonth(month) ? [parseDate(`${month}-01`)] : [];
+function CalendarIcon() {
+	return ssr(_tmpl$, ssrHydrationKey());
+}
+function MonthPicker(props) {
+	const locale = () => props.locale ?? "ko-KR", id = props.id ?? `dds-month-${createUniqueId()}`, errorId = `${id}-error`;
+	const text = () => monthMessages(locale(), props.messages);
+	const [value, setValue] = createControllableSignal({
+		value: () => props.value,
+		defaultValue: props.defaultValue ?? "",
+		onChange: void 0
+	});
+	const [draftState, setDraftState] = createSignal({
+		text: displayMonth(value(), locale()),
+		locale: locale()
+	});
+	const draft = createMemo(() => {
+		const state = draftState(), canonical = canonicalMonth(state.text);
+		return state.locale !== locale() && isCalendarMonth(canonical) ? displayMonth(canonical, locale()) : state.text;
+	});
+	const setDraft = (next) => setDraftState({
+		text: next,
+		locale: locale()
+	});
+	const [selection, setSelection] = createSignal(selectionOf(value()));
+	const [open, setOpen] = createSignal(false);
+	let input, emitted = value(), focusFrame;
+	const [portalMount, setPortalMount] = createSignal();
+	onMount(() => {});
+	const blocked = () => props.disabled || props.readOnly;
+	const bounds = createMemo(() => monthBounds(props.min, props.max));
+	const validity = createMemo(() => validateMonth(draft(), props.required ?? false, props.min, props.max));
+	const error = () => validity().valid ? void 0 : validity().reason === "required" ? text().required : text().invalid;
+	const invalid = () => props.invalid || !validity().valid;
+	const fieldName = () => props.label ?? props["aria-label"] ?? "";
+	createEffect(on(value, (next) => {
+		if (next === emitted) return;
+		emitted = next;
+		setDraft(displayMonth(next, locale()));
+		setSelection(selectionOf(next));
+	}, { defer: true }));
+	createEffect(() => void 0);
+	createEffect(() => {
+		if (blocked()) {
+			setOpen(false);
+			if (focusFrame !== void 0) cancelAnimationFrame(focusFrame);
+		}
+	});
+	onMount(() => {});
+	onCleanup(() => {
+		if (focusFrame !== void 0) cancelAnimationFrame(focusFrame);
+	});
+	function focusSoon(target, frames = 1) {
+		if (focusFrame !== void 0) cancelAnimationFrame(focusFrame);
+		const run = (left) => {
+			focusFrame = requestAnimationFrame(() => {
+				if (left > 1) return run(left - 1);
+				if (!blocked()) target()?.focus({ preventScroll: true });
+			});
+		};
+		run(frames);
+	}
+	function commit(next) {
+		if (blocked()) return;
+		setSelection(selectionOf(next));
+		if (next === emitted) return;
+		emitted = next;
+		setValue(next);
+		props.onValueChange?.(next);
+	}
+	return ssr(_tmpl$7, ssrHydrationKey(), `dds-field dds-date-picker dds-month-picker dds-date-picker--${escape(props.labelPlacement ?? "outside", true)}${error() ? " dds-field--error" : ""}`, ssrAttribute("data-filled", draft() !== "" ? "true" : escape(void 0, true), false) + ssrAttribute("data-invalid", invalid() ? "" : escape(void 0, true), false) + ssrAttribute("data-disabled", props.disabled ? "" : escape(void 0, true), false), escape(createComponent(Show, {
+		get when() {
+			return props.label;
+		},
+		get children() {
+			return ssr(_tmpl$3, ssrHydrationKey(), ssrAttribute("for", escape(id, true), false), escape(props.label), escape(createComponent(Show, {
+				get when() {
+					return props.required;
+				},
+				get children() {
+					return ssr(_tmpl$2, ssrHydrationKey());
+				}
+			})));
+		}
+	})), escape(createComponent(DatePicker.Root, {
+		get locale() {
+			return locale();
+		},
+		get timeZone() {
+			return props.timeZone ?? "Asia/Seoul";
+		},
+		get disabled() {
+			return props.disabled;
+		},
+		get readOnly() {
+			return props.readOnly;
+		},
+		get required() {
+			return props.required;
+		},
+		get invalid() {
+			return invalid();
+		},
+		get open() {
+			return memo(() => !!open())() && !blocked();
+		},
+		onOpenChange: (details) => {
+			setOpen(details.open && !blocked());
+			if (!details.open) setSelection(selectionOf(emitted));
+		},
+		get min() {
+			return memo(() => !!bounds().min)() ? parseDate(bounds().min) : void 0;
+		},
+		get max() {
+			return memo(() => !!bounds().max)() ? parseDate(bounds().max) : void 0;
+		},
+		minView: "month",
+		maxView: "month",
+		defaultView: "month",
+		get translations() {
+			return { clearTrigger: text().clear };
+		},
+		get value() {
+			return selection();
+		},
+		onValueChange: (details) => {
+			if (blocked()) return;
+			const next = details.value[0]?.toString().slice(0, 7) ?? "";
+			if (next !== "" && !validateMonth(next, false, props.min, props.max).valid) return;
+			setDraft(displayMonth(next, locale()));
+			commit(next);
+			focusSoon(() => input, 2);
+		},
+		get positioning() {
+			return {
+				placement: "bottom-start",
+				gutter: 8,
+				strategy: portalMount()?.matches("[role=\"dialog\"], [role=\"alertdialog\"]") ? "fixed" : "absolute",
+				hideWhenDetached: !!portalMount()?.matches("[role=\"dialog\"], [role=\"alertdialog\"]")
+			};
+		},
+		get children() {
+			return [createComponent(DatePicker.Control, {
+				"class": "dds-date-picker-control",
+				get ["data-filled"]() {
+					return draft() !== "" ? "true" : void 0;
+				},
+				get children() {
+					return [ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("id", escape(id, true), false) + ssrAttribute("form", escape(props.form, true), false) + ssrAttribute("aria-label", props.label ? escape(void 0, true) : escape(props["aria-label"], true), false) + ssrAttribute("aria-labelledby", escape(props["aria-labelledby"], true), false) + ssrAttribute("aria-invalid", invalid() ? "true" : escape(void 0, true), false) + ssrAttribute("aria-required", props.required ? "true" : escape(void 0, true), false) + ssrAttribute("aria-describedby", escape(describedBy(props["aria-describedby"], error() && errorId), true), false), ssrAttribute("value", escape(draft(), true), false), ssrAttribute("required", props.required, true) + ssrAttribute("readonly", escape(props.readOnly, true), false), ssrAttribute("disabled", props.disabled, true) + ssrAttribute("placeholder", isKorean(locale()) ? "YYYY/MM" : "YYYY-MM", false)), createComponent(DatePicker.Trigger, {
+						"class": "dds-btn dds-btn--secondary",
+						get ["aria-label"]() {
+							return `${fieldName()} ${text().openCalendar}`.trim();
+						},
+						get children() {
+							return createComponent(CalendarIcon, {});
+						}
+					})];
+				}
+			}), createComponent(Show, {
+				get when() {
+					return portalMount();
+				},
+				children: (mount) => createComponent(Portal, {
+					get mount() {
+						return mount();
+					},
+					get children() {
+						return createComponent(DatePicker.Positioner, {
+							"class": "dds-date-picker-positioner",
+							get children() {
+								return createComponent(DatePicker.Content, {
+									"class": "dds-date-picker-content dds-month-picker-content",
+									get ["aria-label"]() {
+										return `${fieldName()} ${text().chooseMonth}`.trim();
+									},
+									get children() {
+										return createComponent(CalendarView, {
+											view: "month",
+											get timeZone() {
+												return props.timeZone;
+											},
+											get min() {
+												return bounds().min;
+											},
+											get max() {
+												return bounds().max;
+											},
+											get locale() {
+												return locale();
+											},
+											get messages() {
+												return text();
+											},
+											get disabled() {
+												return props.disabled;
+											},
+											get readOnly() {
+												return props.readOnly;
+											},
+											get showToday() {
+												return props.showThisMonth;
+											},
+											get showClear() {
+												return props.clearable;
+											},
+											onClear: () => {
+												setDraft("");
+												commit("");
+											}
+										});
+									}
+								});
+							}
+						});
+					}
+				})
+			})];
+		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return props.name;
+		},
+		get children() {
+			return ssr(_tmpl$5, ssrHydrationKey(), ssrAttribute("name", escape(props.name, true), false) + ssrAttribute("form", escape(props.form, true), false) + ssrAttribute("value", escape(value(), true), false), ssrAttribute("disabled", props.disabled, true));
+		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return error();
+		},
+		get children() {
+			return ssr(_tmpl$6, ssrHydrationKey() + ssrAttribute("id", escape(errorId, true), false), escape(error()));
+		}
+	})));
+}
+//#endregion
+export { MonthPicker };
+
+//# sourceMappingURL=month-picker.server.js.map