@k8ordo/ui 2.0.0 → 2.1.0

package/dist/components/form/autocomplete/autocomplete.mjs

@@ -1,31 +1,38 @@
 "use client";
-import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
 import { chain } from "../../../helpers/chain.mjs";
 import { useClickAway } from "../../../hooks/click-away/index.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
-import { useDeferredDebounce } from "../../../hooks/deferred-debounce/index.mjs";
-import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
 import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { CloseIcon } from "../../icons/lucide.mjs";
-import { useCallback, useRef, useState } from "react";
+import { FormValue } from "../../_internal/form-value.mjs";
+import autocomplete_module_default from "./autocomplete.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useDeferredValue, useId, useMemo, useRef, useState } from "react";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/autocomplete/autocomplete.tsx
-const Autocomplete = ({ id, name, invalid = false, disabled = false, required = false, options, value, defaultValue, onChange, placeholder, onBlur, onClick, onKeyDown, ref, ...rest }) => {
-	const messages = useMessages();
+const Autocomplete = ({ id, name, invalid = false, disabled = false, readOnly = false, required = false, options, value, defaultValue, onChange, placeholder, onBlur, onClick, onKeyDown, ref, ...rest }) => {
+	const messages = getMessages();
 	const [currentValue, handleChange] = useControllableState({
 		value,
 		defaultValue: defaultValue ?? [],
 		onChange
 	});
+	const baseId = useId();
+	const listboxId = `${baseId}-listbox`;
+	const optionId = (index) => `${baseId}-option-${String(index)}`;
+	const inputRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
 	const containerRef = useRef(null);
-	const { isOpen, open, close } = useDisclosure();
+	const [isOpen, setIsOpen] = useState(false);
 	const [text, setText] = useState("");
 	const [selectIndex, setSelectIndex] = useState();
-	const writingMode = useWritingMode(containerRef);
+	const [container, setContainer] = useState(null);
+	const writingMode = useWritingMode(container);
 	const anchorName = `--ao-ac-${id.replaceAll(/[^a-zA-Z0-9_-]/gu, "")}`;
 	const listboxStyle = {
 		position: "fixed",
@@ -37,38 +44,42 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 		positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline",
 		inlineSize: `anchor-size(${writingMode === "vertical" ? "height" : "width"})`
 	};
-	const [deferredText, isPending] = useDeferredDebounce(text);
+	const deferredText = useDeferredValue(text);
+	const isPending = !Object.is(deferredText, text);
 	const filteredOptions = options.filter((option) => option.label.includes(deferredText));
 	const activeIndex = selectIndex === void 0 || filteredOptions.length === 0 ? void 0 : Math.min(selectIndex, filteredOptions.length - 1);
-	const activeOption = activeIndex === void 0 ? void 0 : filteredOptions[activeIndex];
-	const { pending: formPending } = useFormStatus();
-	const disabledResolved = disabled || formPending;
+	const { pending } = useFormStatus();
+	const locked = readOnly || pending;
+	const expanded = isOpen && !locked;
 	const reset = useCallback(() => {
 		setText("");
-		close();
+		setIsOpen(false);
 		setSelectIndex(void 0);
-	}, [close]);
+	}, []);
 	useClickAway(containerRef, reset, isOpen);
 	const scrollActiveIntoView = useCallback((node) => {
 		node?.scrollIntoView({ block: "nearest" });
 	}, []);
 	const setReferenceRef = useCallback((node) => {
 		containerRef.current = node;
+		setContainer(node);
 		if (node) node.style.setProperty("anchor-name", anchorName);
 	}, [anchorName]);
 	const handleBlur = (e) => {
-		if (e.relatedTarget?.id.startsWith(`${id}_option_`) === true) return;
-		close();
+		if (e.relatedTarget?.closest("[role=\"listbox\"]")?.id === listboxId) return;
+		setIsOpen(false);
 	};
 	const handleClick = () => {
+		if (locked) return;
 		if (isOpen && text.length === 0) {
-			close();
+			setIsOpen(false);
 			return;
 		}
-		open();
+		setIsOpen(true);
 		setSelectIndex(void 0);
 	};
 	const handleKeyDown = (e) => {
+		if (e.nativeEvent.isComposing || locked) return;
 		if (e.key === "Backspace" && text.length === 0) {
 			reset();
 			handleChange(currentValue.slice(0, -1));
@@ -77,19 +88,21 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 		if (e.key === "Escape") {
 			if (isOpen) {
 				e.preventDefault();
-				close();
+				setIsOpen(false);
 				setSelectIndex(void 0);
 			}
 			return;
 		}
 		if (e.key === "ArrowDown") {
-			open();
+			e.preventDefault();
+			setIsOpen(true);
 			if (filteredOptions.length === 0) return;
 			setSelectIndex(activeIndex === void 0 ? 0 : Math.min(activeIndex + 1, filteredOptions.length - 1));
 			return;
 		}
 		if (e.key === "ArrowUp") {
-			open();
+			e.preventDefault();
+			setIsOpen(true);
 			if (filteredOptions.length === 0) return;
 			setSelectIndex(activeIndex === void 0 ? 0 : Math.max(activeIndex - 1, 0));
 			return;
@@ -111,24 +124,33 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative rounded-xl border border-border-base bg-bg-base inline-full", FOCUS_RING_WITHIN, "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
+		className: clsx(autocomplete_module_default.root, focus_ring_module_default.ringWithin, (disabled || pending) && autocomplete_module_default.disabled, readOnly && autocomplete_module_default.readOnly),
 		ref: setReferenceRef,
 		children: [
-			name !== void 0 && name !== "" ? currentValue.map((selectedValue) => /* @__PURE__ */ jsx("input", {
+			/* @__PURE__ */ jsx(FormValue, {
+				defaultValues: value === void 0 ? defaultValue ?? [] : void 0,
+				disabled,
+				focusTarget: inputRef,
+				multiple: true,
 				name,
-				type: "hidden",
-				value: selectedValue
-			}, selectedValue)) : null,
+				onReset: () => {
+					reset();
+					if (value === void 0) handleChange(defaultValue ?? []);
+				},
+				required,
+				values: currentValue
+			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex min-h-12 items-center justify-between gap-2 px-3 py-2",
+				className: autocomplete_module_default.body,
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex w-full min-w-0 flex-wrap gap-1",
+					className: autocomplete_module_default.tags,
 					children: [currentValue.map((selectedValue) => {
 						const label = options.find((option) => option.value === selectedValue)?.label;
 						return /* @__PURE__ */ jsxs("div", {
-							className: "bg-bg-mute inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium",
+							className: clsx(autocomplete_module_default.tag, (disabled || pending) && autocomplete_module_default.tagOnDisabled),
 							tabIndex: -1,
 							children: [label, /* @__PURE__ */ jsx(IconButton, {
+								disabled: disabled || locked,
 								label: messages.autocompleteRemoveTag,
 								onClick: (e) => {
 									e.stopPropagation();
@@ -141,31 +163,33 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 						}, selectedValue);
 					}), /* @__PURE__ */ jsx("input", {
 						...rest,
-						"aria-activedescendant": isOpen && activeOption !== void 0 ? `${id}_option_${activeOption.value}` : void 0,
+						"aria-activedescendant": expanded && activeIndex !== void 0 ? optionId(activeIndex) : void 0,
 						"aria-autocomplete": "list",
-						"aria-controls": isOpen ? `${id}_listbox` : void 0,
-						"aria-expanded": isOpen,
+						"aria-controls": expanded ? listboxId : void 0,
+						"aria-expanded": expanded,
 						"aria-invalid": invalid,
 						"aria-required": required,
 						autoComplete: "off",
-						className: cn("grow bg-transparent focus-visible:outline-hidden", "disabled:cursor-not-allowed"),
-						disabled: disabledResolved,
+						className: autocomplete_module_default.input,
+						disabled,
 						id,
 						onBlur: chain(handleBlur, onBlur),
 						onChange: (e) => {
-							open();
+							setIsOpen(true);
 							setText(e.target.value);
 							setSelectIndex(void 0);
 						},
 						onClick: chain(handleClick, onClick),
 						onKeyDown: chain(handleKeyDown, onKeyDown),
 						placeholder: placeholder ?? messages.autocompletePlaceholder,
-						ref,
+						readOnly: locked,
+						ref: mergedRef,
 						role: "combobox",
 						type: "text",
 						value: text
 					})]
 				}), currentValue.length > 0 && /* @__PURE__ */ jsx(IconButton, {
+					disabled: disabled || locked,
 					label: messages.autocompleteClear,
 					onClick: (e) => {
 						e.stopPropagation();
@@ -175,26 +199,26 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 					children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
 				})]
 			}),
-			isOpen && /* @__PURE__ */ jsx("div", {
-				className: "bg-bg-raised border-border-subtle z-10 rounded-xl border shadow-md",
+			expanded && /* @__PURE__ */ jsx("div", {
+				className: autocomplete_module_default.popup,
 				role: "presentation",
 				style: listboxStyle,
 				children: /* @__PURE__ */ jsxs("ul", {
 					"aria-busy": isPending || void 0,
 					"aria-multiselectable": "true",
-					className: cn("max-h-96 overflow-y-auto py-2 transition-opacity vertical:max-h-none vertical:max-w-96 vertical:overflow-x-auto vertical:overflow-y-visible", isPending && "opacity-60"),
-					id: `${id}_listbox`,
+					className: clsx(autocomplete_module_default.list, isPending && autocomplete_module_default.pending),
+					id: listboxId,
 					role: "listbox",
 					children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", {
-						className: "text-fg-mute px-3 py-2",
+						className: autocomplete_module_default.empty,
 						role: "presentation",
 						children: messages.autocompleteEmpty
 					}), filteredOptions.map((option, idx) => {
 						const selected = currentValue.includes(option.value);
 						return /* @__PURE__ */ jsx("li", {
 							"aria-selected": selected,
-							className: cn("cursor-pointer px-3 py-2 transition-colors", selected && "bg-primary-bg-subtle text-primary-fg", activeIndex === idx && !selected && "bg-bg-subtle", activeIndex === idx && selected && "bg-primary-bg-mute text-primary-fg"),
-							id: `${id}_option_${option.value}`,
+							className: clsx(autocomplete_module_default.option, selected && autocomplete_module_default.selected, activeIndex === idx && autocomplete_module_default.active),
+							id: optionId(idx),
 							ref: activeIndex === idx ? scrollActiveIntoView : void 0,
 							role: "option",
 							onClick: (e) => {

package/dist/components/form/autocomplete/autocomplete.module.mjs

@@ -0,0 +1,21 @@
+import './autocomplete.css';
+//#region src/components/form/autocomplete/autocomplete.module.css
+var autocomplete_module_default = {
+	"active": "ms0JIW_active",
+	"body": "ms0JIW_body",
+	"disabled": "ms0JIW_disabled",
+	"empty": "ms0JIW_empty",
+	"input": "ms0JIW_input",
+	"list": "ms0JIW_list",
+	"option": "ms0JIW_option",
+	"pending": "ms0JIW_pending",
+	"popup": "ms0JIW_popup",
+	"readOnly": "ms0JIW_readOnly",
+	"root": "ms0JIW_root",
+	"selected": "ms0JIW_selected",
+	"tag": "ms0JIW_tag",
+	"tagOnDisabled": "ms0JIW_tagOnDisabled",
+	"tags": "ms0JIW_tags"
+};
+//#endregion
+export { autocomplete_module_default as default };

package/dist/components/form/calendar/calendar.css

@@ -0,0 +1,98 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._52aOMG_fallback {
+    block-size: calc(var(--spacing) * 76);
+    inline-size: calc(var(--spacing) * 70);
+  }
+
+  ._52aOMG_root {
+    gap: calc(var(--spacing) * 2);
+    flex-direction: column;
+    display: inline-flex;
+  }
+
+  ._52aOMG_header {
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
+
+  ._52aOMG_month {
+    font-weight: var(--font-weight-bold);
+    font-variant-numeric: tabular-nums;
+  }
+
+  ._52aOMG_grid {
+    border-collapse: collapse;
+  }
+
+  ._52aOMG_weekday {
+    block-size: calc(var(--spacing) * 8);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-fg-mute);
+  }
+
+  ._52aOMG_cell {
+    padding: 0;
+  }
+
+  ._52aOMG_blank {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+    padding: 0;
+  }
+
+  ._52aOMG_day {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+    border-radius: var(--radius-full);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-variant-numeric: tabular-nums;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    ._52aOMG_day:hover {
+      background-color: var(--color-bg-mute);
+    }
+  }
+
+  ._52aOMG_today {
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary-fg);
+  }
+
+  ._52aOMG_selected {
+    background-color: var(--color-primary-bg);
+    color: var(--color-primary-fg);
+  }
+
+  @media (hover: hover) {
+    ._52aOMG_selected:hover {
+      background-color: var(--color-primary-bg-emphasize);
+    }
+  }
+
+  ._52aOMG_unselectable {
+    cursor: not-allowed;
+    color: var(--color-fg-subtle);
+  }
+
+  @media (hover: hover) {
+    ._52aOMG_unselectable:hover {
+      background-color: #0000;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/form/calendar/calendar.d.mts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+//#region src/components/form/calendar/calendar.d.ts
+type Props = {
+  /** `YYYY-MM-DD`。制御モードで未選択を表すときは `null`。 */
+  value?: string | null;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** これより前の日は選べない（`YYYY-MM-DD`）。 */
+  min?: string;
+  /** これより後の日は選べない（`YYYY-MM-DD`）。 */
+  max?: string;
+};
+export declare const Calendar: FC<Props>;
+//#endregion

package/dist/components/form/calendar/calendar.mjs

@@ -0,0 +1,182 @@
+"use client";
+import { getLocale, getMessages } from "../../../i18n/current.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { addDays, addMonths, clampDate, endOfMonth, formatDate, isIsoDate, isSameMonth, isWithin, localToday, monthWeeks, startOfMonth, startOfWeek, subscribeToDateChange } from "../../../internal/iso-date.mjs";
+import calendar_module_default from "./calendar.module.mjs";
+import { clsx } from "clsx";
+import { Suspense, use, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { browser } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/calendar/calendar.tsx
+const Calendar = (props) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: clsx("writing-h", calendar_module_default.fallback)
+	}),
+	children: /* @__PURE__ */ jsx(CalendarBody, { ...props })
+});
+const orUndefined = (value) => value !== void 0 && isIsoDate(value) ? value : void 0;
+const readToday = () => localToday(/* @__PURE__ */ new Date());
+const CalendarBody = ({ value, defaultValue, onChange, min: minProp, max: maxProp }) => {
+	use(browser("Calendar は閲覧者のタイムゾーンで今日を決める"));
+	const messages = getMessages();
+	const labelId = useId();
+	const gridRef = useRef(null);
+	const locale = getLocale();
+	const { firstDay, monthFormat, dayFormat, weekdayShort, weekdayLong, dayNumber } = useMemo(() => ({
+		firstDay: new Intl.Locale(locale).getWeekInfo().firstDay % 7,
+		monthFormat: new Intl.DateTimeFormat(locale, {
+			year: "numeric",
+			month: "long",
+			timeZone: "UTC"
+		}),
+		dayFormat: new Intl.DateTimeFormat(locale, {
+			dateStyle: "full",
+			timeZone: "UTC"
+		}),
+		weekdayShort: new Intl.DateTimeFormat(locale, {
+			weekday: "short",
+			timeZone: "UTC"
+		}),
+		weekdayLong: new Intl.DateTimeFormat(locale, {
+			weekday: "long",
+			timeZone: "UTC"
+		}),
+		dayNumber: new Intl.NumberFormat(locale, { useGrouping: false })
+	}), [locale]);
+	const min = orUndefined(minProp);
+	const max = orUndefined(maxProp);
+	const today = useSyncExternalStore(subscribeToDateChange, readToday);
+	const [selected, setSelected] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? null,
+		onChange: (next) => {
+			if (next !== null) onChange?.(next);
+		}
+	});
+	const selectedDate = selected !== null && isIsoDate(selected) ? selected : null;
+	const [focused, setFocused] = useState(() => clampDate(selectedDate ?? today, min, max));
+	const [shownSelection, setShownSelection] = useState(selectedDate);
+	if (shownSelection !== selectedDate) {
+		setShownSelection(selectedDate);
+		if (selectedDate !== null) setFocused(selectedDate);
+	}
+	const followFocus = useRef(false);
+	useEffect(() => {
+		if (!followFocus.current) return;
+		followFocus.current = false;
+		gridRef.current?.querySelector(`[data-date="${focused}"]`)?.focus();
+	}, [focused]);
+	const previousMonth = addMonths(focused, -1);
+	const nextMonth = addMonths(focused, 1);
+	const canGoPrevious = min === void 0 || endOfMonth(previousMonth) >= min;
+	const canGoNext = max === void 0 || startOfMonth(nextMonth) <= max;
+	const weeks = monthWeeks(focused, firstDay);
+	const weekdays = Array.from({ length: 7 }, (_, index) => formatDate(addDays(startOfWeek(today, firstDay), index)));
+	const handleKeyDown = (event) => {
+		const forward = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+		const move = {
+			ArrowRight: () => addDays(focused, forward),
+			ArrowLeft: () => addDays(focused, -forward),
+			ArrowDown: () => addDays(focused, 7),
+			ArrowUp: () => addDays(focused, -7),
+			Home: () => startOfWeek(focused, firstDay),
+			End: () => addDays(startOfWeek(focused, firstDay), 6),
+			PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1),
+			PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1)
+		}[event.key];
+		if (move === void 0) return;
+		event.preventDefault();
+		followFocus.current = true;
+		setFocused(clampDate(move(), min, max));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("writing-h", calendar_module_default.root),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: calendar_module_default.header,
+			children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					color: "transparent",
+					disabled: !canGoPrevious,
+					label: messages.calendarPreviousMonth,
+					onClick: () => {
+						setFocused(clampDate(previousMonth, min, max));
+					},
+					size: "sm",
+					tooltipDisabled: true,
+					children: /* @__PURE__ */ jsx(ChevronIcon, {
+						direction: "left",
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ jsx("p", {
+					"aria-live": "polite",
+					className: calendar_module_default.month,
+					id: labelId,
+					children: monthFormat.format(formatDate(focused))
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					color: "transparent",
+					disabled: !canGoNext,
+					label: messages.calendarNextMonth,
+					onClick: () => {
+						setFocused(clampDate(nextMonth, min, max));
+					},
+					size: "sm",
+					tooltipDisabled: true,
+					children: /* @__PURE__ */ jsx(ChevronIcon, {
+						direction: "right",
+						size: "sm"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs("table", {
+			"aria-labelledby": labelId,
+			className: calendar_module_default.grid,
+			onKeyDown: handleKeyDown,
+			ref: gridRef,
+			role: "grid",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weekdays.map((weekday) => /* @__PURE__ */ jsx("th", {
+				abbr: weekdayLong.format(weekday),
+				className: calendar_module_default.weekday,
+				scope: "col",
+				children: weekdayShort.format(weekday)
+			}, weekday.getTime())) }) }), /* @__PURE__ */ jsx("tbody", { children: weeks.map((week) => /* @__PURE__ */ jsx("tr", { children: week.map((date) => {
+				if (!isSameMonth(date, focused)) return /* @__PURE__ */ jsx("td", {
+					className: calendar_module_default.blank,
+					role: "gridcell"
+				}, date);
+				const isSelected = date === selectedDate;
+				const isFocused = date === focused;
+				const selectable = isWithin(date, min, max);
+				return /* @__PURE__ */ jsx("td", {
+					"aria-selected": isSelected,
+					className: calendar_module_default.cell,
+					role: "gridcell",
+					children: /* @__PURE__ */ jsx("button", {
+						"aria-current": date === today ? "date" : void 0,
+						"aria-disabled": selectable ? void 0 : true,
+						"aria-label": dayFormat.format(formatDate(date)),
+						className: clsx(calendar_module_default.day, focus_ring_module_default.ringNoBorder, date === today && calendar_module_default.today, isSelected && calendar_module_default.selected, !selectable && calendar_module_default.unselectable),
+						"data-autofocus": isFocused ? "" : void 0,
+						"data-date": date,
+						onClick: () => {
+							if (selectable) setSelected(date);
+						},
+						onFocus: () => {
+							setFocused(date);
+						},
+						tabIndex: isFocused ? 0 : -1,
+						type: "button",
+						children: dayNumber.format(Number(date.slice(8)))
+					})
+				}, date);
+			}) }, week[0])) })]
+		})]
+	});
+};
+//#endregion
+export { Calendar };

package/dist/components/form/calendar/calendar.module.mjs

@@ -0,0 +1,18 @@
+import './calendar.css';
+//#region src/components/form/calendar/calendar.module.css
+var calendar_module_default = {
+	"blank": "_52aOMG_blank",
+	"cell": "_52aOMG_cell",
+	"day": "_52aOMG_day",
+	"fallback": "_52aOMG_fallback",
+	"grid": "_52aOMG_grid",
+	"header": "_52aOMG_header",
+	"month": "_52aOMG_month",
+	"root": "_52aOMG_root",
+	"selected": "_52aOMG_selected",
+	"today": "_52aOMG_today",
+	"unselectable": "_52aOMG_unselectable",
+	"weekday": "_52aOMG_weekday"
+};
+//#endregion
+export { calendar_module_default as default };

package/dist/components/form/calendar/index.d.mts

@@ -0,0 +1,2 @@
+import { Calendar } from "./calendar.mjs";
+export { Calendar };

package/dist/components/form/calendar/index.mjs

@@ -0,0 +1,2 @@
+import { Calendar } from "./calendar.mjs";
+export { Calendar };

package/dist/components/form/checkbox/checkbox.css

@@ -0,0 +1,90 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._23lHGa_root {
+    text-align: left;
+    cursor: pointer;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  ._23lHGa_withLabel {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  ._23lHGa_disabled {
+    cursor: not-allowed;
+    color: var(--color-fg-mute);
+  }
+
+  ._23lHGa_box {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+    border-radius: var(--radius-md);
+    border-width: 2px;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-base);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+
+    @scope (&) {
+      & > * {
+        visibility: hidden;
+      }
+    }
+  }
+
+  ._23lHGa_invalid {
+    border-color: var(--color-border-error);
+  }
+
+  ._23lHGa_input:checked ~ ._23lHGa_box {
+    border-color: var(--color-border-base);
+    background-color: var(--color-primary-bg);
+    color: var(--color-fg-base);
+
+    @scope (&) {
+      & > * {
+        visibility: visible;
+      }
+    }
+  }
+
+  ._23lHGa_input:checked ~ ._23lHGa_invalid {
+    border-color: var(--color-border-error);
+  }
+
+  ._23lHGa_input:indeterminate ~ ._23lHGa_box {
+    border-color: var(--color-border-base);
+    background-color: var(--color-primary-bg);
+    color: var(--color-fg-base);
+
+    @scope (&) {
+      & > * {
+        visibility: visible;
+      }
+    }
+  }
+
+  ._23lHGa_input:focus-visible ~ ._23lHGa_box {
+    box-shadow: var(--shadow-ring-info);
+    border-color: #0000;
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  ._23lHGa_label {
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+  }
+}
+
+@layer utilities;