@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/form/combobox/combobox.mjs

@@ -0,0 +1,278 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.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 { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
+import { FormValue } from "../../_internal/form-value.mjs";
+import combobox_module_default from "./combobox.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useId, useMemo, useRef, useState, useTransition } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/combobox/combobox.tsx
+const NO_OPTIONS = [];
+const matches = (option, text) => option.label.toLocaleLowerCase().includes(text.trim().toLocaleLowerCase());
+const Combobox = ({ invalid = false, options: optionsProp, search, type: _type, value, defaultValue, onChange, name, id, disabled = false, readOnly = false, required = false, placeholder, onBlur, onKeyDown, ref, ...rest }) => {
+	const messages = getMessages();
+	const options = optionsProp ?? NO_OPTIONS;
+	const baseId = useId();
+	const listboxId = `${baseId}-listbox`;
+	const inputRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+	const isControlled = value !== void 0;
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? "",
+		onChange
+	});
+	const [text, setText] = useState(null);
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeIndex, setActiveIndex] = useState();
+	const [found, setFound] = useState(null);
+	const [failed, setFailed] = useState(false);
+	const [isSearching, startSearch] = useTransition();
+	const searchRef = useRef(null);
+	const [picked, setPicked] = useState(null);
+	const { pending } = useFormStatus();
+	const locked = readOnly || pending;
+	const expanded = isOpen && !locked;
+	const candidates = search === void 0 ? text === null ? options : options.filter((option) => matches(option, text)) : text === null || text.trim() === "" ? options : found ?? NO_OPTIONS;
+	const active = activeIndex === void 0 || candidates.length === 0 ? void 0 : Math.min(activeIndex, candidates.length - 1);
+	const currentLabel = current === "" ? "" : [
+		...options,
+		...found ?? [],
+		...picked === null ? [] : [picked]
+	].find((option) => option.value === current)?.label ?? current;
+	const [anchor, setAnchor] = useState(null);
+	const writingMode = useWritingMode(anchor);
+	const anchorName = `--ao-combobox-${baseId.replaceAll(/[^a-zA-Z0-9_-]/gu, "")}`;
+	const anchorRef = useCallback((node) => {
+		setAnchor(node);
+		node?.style.setProperty("anchor-name", anchorName);
+	}, [anchorName]);
+	const listStyle = {
+		position: "fixed",
+		inset: "auto",
+		margin: 0,
+		marginTop: "4px",
+		positionAnchor: anchorName,
+		positionArea: "bottom span-right",
+		positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline",
+		inlineSize: `anchor-size(${writingMode === "vertical" ? "height" : "width"})`
+	};
+	const runSearch = (query) => {
+		if (search === void 0) return;
+		searchRef.current?.abort();
+		if (query.trim() === "") {
+			setFound(null);
+			setFailed(false);
+			return;
+		}
+		const controller = new AbortController();
+		searchRef.current = controller;
+		startSearch(async () => {
+			try {
+				const results = await search(query, { signal: controller.signal });
+				if (!controller.signal.aborted) startSearch(() => {
+					setFound(results);
+					setFailed(false);
+				});
+			} catch {
+				if (!controller.signal.aborted) startSearch(() => {
+					setFound(NO_OPTIONS);
+					setFailed(true);
+				});
+			}
+		});
+	};
+	const open = (index) => {
+		if (locked) return;
+		setIsOpen(true);
+		setActiveIndex(index);
+	};
+	const close = () => {
+		setIsOpen(false);
+		setActiveIndex(void 0);
+	};
+	const choose = (option) => {
+		setPicked(option);
+		setCurrent(option.value);
+		setText(null);
+		close();
+	};
+	const scrollIntoView = useCallback((node) => {
+		node?.scrollIntoView({ block: "nearest" });
+	}, []);
+	const selectedIndex = candidates.findIndex((option) => option.value === current);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		const last = candidates.length - 1;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				if (!expanded) {
+					open(event.altKey ? void 0 : selectedIndex === -1 ? 0 : selectedIndex);
+					return;
+				}
+				setActiveIndex(active === void 0 ? 0 : Math.min(active + 1, last));
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				if (event.altKey) {
+					close();
+					return;
+				}
+				if (!expanded) {
+					open(selectedIndex === -1 ? last : selectedIndex);
+					return;
+				}
+				setActiveIndex(active === void 0 ? last : Math.max(active - 1, 0));
+				return;
+			case "Enter": {
+				const option = active === void 0 ? void 0 : candidates[active];
+				if (!expanded || option === void 0) return;
+				event.preventDefault();
+				choose(option);
+				return;
+			}
+			case "Escape":
+				if (expanded) {
+					event.preventDefault();
+					close();
+					return;
+				}
+				if (text !== null) {
+					event.preventDefault();
+					setText(null);
+				}
+		}
+	};
+	const status = isSearching ? messages.loading : failed ? messages.comboboxFailed : candidates.length === 0 ? messages.comboboxEmpty : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(combobox_module_default.root, focus_ring_module_default.ringWithin, (disabled || pending) && combobox_module_default.disabled, readOnly && combobox_module_default.readOnly),
+		ref: anchorRef,
+		children: [
+			/* @__PURE__ */ jsx(FormValue, {
+				defaultValues: isControlled ? void 0 : defaultValue === void 0 || defaultValue === "" ? [] : [defaultValue],
+				disabled,
+				focusTarget: inputRef,
+				multiple: false,
+				name,
+				onReset: () => {
+					setText(null);
+					close();
+					if (!isControlled) setCurrent(defaultValue ?? "");
+				},
+				required,
+				values: current === "" ? [] : [current]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...rest,
+				"aria-activedescendant": expanded && active !== void 0 ? `${baseId}-option-${String(active)}` : void 0,
+				"aria-autocomplete": "list",
+				"aria-controls": listboxId,
+				"aria-expanded": expanded,
+				"aria-invalid": invalid,
+				"aria-required": required,
+				autoComplete: "off",
+				className: combobox_module_default.input,
+				disabled,
+				id,
+				onBlur: (event) => {
+					if (text !== null && text.trim() === "") {
+						setCurrent("");
+						setPicked(null);
+					}
+					setText(null);
+					close();
+					onBlur?.(event);
+				},
+				onChange: (event) => {
+					setText(event.currentTarget.value);
+					open();
+					runSearch(event.currentTarget.value);
+				},
+				onClick: () => {
+					if (!expanded) open(selectedIndex === -1 ? void 0 : selectedIndex);
+				},
+				onKeyDown: handleKeyDown,
+				placeholder,
+				readOnly: locked,
+				ref: mergedRef,
+				role: "combobox",
+				type: "text",
+				value: text ?? currentLabel
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-controls": listboxId,
+				"aria-expanded": expanded,
+				"aria-label": messages.comboboxToggle,
+				className: combobox_module_default.toggle,
+				disabled: disabled || locked,
+				onClick: () => {
+					inputRef.current?.focus();
+					if (expanded) {
+						close();
+						return;
+					}
+					open(selectedIndex === -1 ? void 0 : selectedIndex);
+				},
+				onMouseDown: (event) => {
+					event.preventDefault();
+				},
+				tabIndex: -1,
+				type: "button",
+				children: /* @__PURE__ */ jsx(ChevronIcon, {
+					direction: expanded ? "up" : "down",
+					size: "sm"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: sr_only_module_default.srOnly,
+				role: "status",
+				children: expanded ? status : null
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx(combobox_module_default.popup, !expanded && combobox_module_default.collapsed),
+				onMouseDown: (event) => {
+					event.preventDefault();
+				},
+				role: "presentation",
+				style: listStyle,
+				children: [status === null ? null : /* @__PURE__ */ jsx("p", {
+					className: combobox_module_default.status,
+					children: status
+				}), /* @__PURE__ */ jsx("ul", {
+					"aria-busy": isSearching || void 0,
+					className: clsx(combobox_module_default.list, isSearching && combobox_module_default.searching),
+					hidden: candidates.length === 0,
+					id: listboxId,
+					role: "listbox",
+					children: candidates.map((option, index) => {
+						const selected = option.value === current;
+						return /* @__PURE__ */ jsx("li", {
+							"aria-selected": selected,
+							className: clsx(combobox_module_default.option, selected && combobox_module_default.selected, active === index && combobox_module_default.active),
+							id: `${baseId}-option-${String(index)}`,
+							onClick: () => {
+								choose(option);
+							},
+							onMouseEnter: () => {
+								setActiveIndex(index);
+							},
+							ref: active === index ? scrollIntoView : void 0,
+							role: "option",
+							children: option.label
+						}, option.value);
+					})
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { Combobox };

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

@@ -0,0 +1,19 @@
+import './combobox.css';
+//#region src/components/form/combobox/combobox.module.css
+var combobox_module_default = {
+	"active": "-dBzoa_active",
+	"collapsed": "-dBzoa_collapsed",
+	"disabled": "-dBzoa_disabled",
+	"input": "-dBzoa_input",
+	"list": "-dBzoa_list",
+	"option": "-dBzoa_option",
+	"popup": "-dBzoa_popup",
+	"readOnly": "-dBzoa_readOnly",
+	"root": "-dBzoa_root",
+	"searching": "-dBzoa_searching",
+	"selected": "-dBzoa_selected",
+	"status": "-dBzoa_status",
+	"toggle": "-dBzoa_toggle"
+};
+//#endregion
+export { combobox_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxSearch } from "./combobox.mjs";
+export { Combobox, type ComboboxSearch };

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

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

package/dist/components/form/date-field/date-field.css

@@ -0,0 +1,31 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._pBLbq_root {
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    inline-size: 100%;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-variant-numeric: tabular-nums;
+
+    &:read-only {
+      cursor: not-allowed;
+      background-color: var(--color-bg-subtle);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      border-color: var(--color-border-mute);
+      background-color: var(--color-bg-mute);
+    }
+
+    &[aria-invalid="true"], &[aria-invalid="true"]:focus-visible {
+      border-color: var(--color-border-error);
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/form/date-field/date-field.d.mts

@@ -0,0 +1,8 @@
+import { FC, InputHTMLAttributes, Ref } from "react";
+//#region src/components/form/date-field/date-field.d.ts
+type Props = {
+  invalid?: boolean;
+  ref?: Ref<HTMLInputElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type' | 'children'>;
+export declare const DateField: FC<Props>;
+//#endregion

package/dist/components/form/date-field/date-field.mjs

@@ -0,0 +1,20 @@
+"use client";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import date_field_module_default from "./date-field.module.mjs";
+import { clsx } from "clsx";
+import { useFormStatus } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/form/date-field/date-field.tsx
+const DateField = ({ invalid = false, readOnly, ref, ...rest }) => {
+	const { pending } = useFormStatus();
+	return /* @__PURE__ */ jsx("input", {
+		"aria-invalid": invalid,
+		className: clsx(date_field_module_default.root, focus_ring_module_default.ring),
+		readOnly: pending || readOnly,
+		ref,
+		...rest,
+		type: "date"
+	});
+};
+//#endregion
+export { DateField };

package/dist/components/form/date-field/date-field.module.mjs

@@ -0,0 +1,5 @@
+import './date-field.css';
+//#region src/components/form/date-field/date-field.module.css
+var date_field_module_default = { "root": "_pBLbq_root" };
+//#endregion
+export { date_field_module_default as default };

package/dist/components/form/date-field/index.d.mts

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

package/dist/components/form/date-field/index.mjs

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

package/dist/components/form/date-picker/date-picker.css

@@ -0,0 +1,90 @@
+@layer properties, theme, base;
+
+@layer components {
+  .VmF9ya_root {
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    align-items: center;
+    width: 100%;
+    display: flex;
+    position: relative;
+  }
+
+  .VmF9ya_invalid {
+    border-color: var(--color-border-error);
+  }
+
+  .VmF9ya_disabled {
+    cursor: not-allowed;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-mute);
+  }
+
+  .VmF9ya_readOnly {
+    background-color: var(--color-bg-subtle);
+  }
+
+  .VmF9ya_input {
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-variant-numeric: tabular-nums;
+    background-color: #0000;
+    flex-grow: 1;
+
+    &:focus-visible {
+      outline-style: none;
+
+      @media (forced-colors: active) {
+        outline-offset: 2px;
+        outline: 2px solid #0000;
+      }
+    }
+
+    &:read-only, &:disabled {
+      cursor: not-allowed;
+    }
+
+    &::-webkit-calendar-picker-indicator {
+      display: none;
+    }
+  }
+
+  .VmF9ya_trigger {
+    border-radius: var(--radius-md);
+    padding: calc(var(--spacing) * 1);
+    color: var(--color-fg-mute);
+    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);
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin-inline-end: calc(var(--spacing) * 2);
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .VmF9ya_trigger:not(.VmF9ya_locked):hover {
+      background-color: var(--color-bg-mute);
+      color: var(--color-fg-base);
+    }
+  }
+
+  .VmF9ya_locked {
+    cursor: not-allowed;
+  }
+
+  .VmF9ya_dialog {
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-subtle);
+    background-color: var(--color-bg-raised);
+    padding: calc(var(--spacing) * 3);
+    box-shadow: var(--shadow-md);
+  }
+}
+
+@layer utilities;

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

@@ -0,0 +1,12 @@
+import { FC, InputHTMLAttributes, Ref } from "react";
+//#region src/components/form/date-picker/date-picker.d.ts
+type Props = {
+  invalid?: boolean;
+  /** `YYYY-MM-DD`。未入力は `''`。 */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  ref?: Ref<HTMLInputElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'children'>;
+export declare const DatePicker: FC<Props>;
+//#endregion

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

@@ -0,0 +1,77 @@
+"use client";
+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 { PublishDateIcon } from "../../icons/lucide.mjs";
+import { Popover } from "../../overlays/popover/index.mjs";
+import { Calendar } from "../calendar/calendar.mjs";
+import { commitInputValue } from "../../../internal/commit-input-value.mjs";
+import date_picker_module_default from "./date-picker.module.mjs";
+import { clsx } from "clsx";
+import { useMemo, useRef, useState } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/date-picker/date-picker.tsx
+const asDate = (bound) => bound === void 0 ? void 0 : String(bound);
+const DatePicker = ({ invalid = false, value, defaultValue, onChange, disabled = false, readOnly = false, min, max, ref, ...rest }) => {
+	const messages = getMessages();
+	const { pending } = useFormStatus();
+	const inputRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+	const [isOpen, setIsOpen] = useState(false);
+	const [openedWith, setOpenedWith] = useState("");
+	const locked = disabled || readOnly || pending;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(date_picker_module_default.root, invalid && date_picker_module_default.invalid, (disabled || pending) && date_picker_module_default.disabled, readOnly && date_picker_module_default.readOnly, focus_ring_module_default.ringWithin),
+		children: [/* @__PURE__ */ jsx("input", {
+			"aria-invalid": invalid,
+			className: date_picker_module_default.input,
+			defaultValue,
+			disabled,
+			max,
+			min,
+			onChange: (event) => {
+				onChange?.(event.target.value);
+			},
+			readOnly: pending || readOnly,
+			ref: mergedRef,
+			value,
+			...rest,
+			type: "date"
+		}), /* @__PURE__ */ jsxs(Popover.Root, {
+			isOpen,
+			onChange: (next) => {
+				if (next) setOpenedWith(inputRef.current?.value ?? "");
+				setIsOpen(next);
+			},
+			placement: "bottom-end",
+			role: "dialog",
+			children: [/* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsx("button", {
+				...props,
+				"aria-label": messages.datePickerOpen,
+				className: clsx(date_picker_module_default.trigger, focus_ring_module_default.ringNoBorder, locked && date_picker_module_default.locked),
+				disabled: locked,
+				type: "button",
+				children: /* @__PURE__ */ jsx(PublishDateIcon, { size: "sm" })
+			}) }), /* @__PURE__ */ jsx(Popover.Content, { renderItem: ({ ref: contentRef, ...props }) => /* @__PURE__ */ jsx("div", {
+				...props,
+				"aria-label": messages.datePickerDialog,
+				className: date_picker_module_default.dialog,
+				ref: contentRef,
+				children: isOpen ? /* @__PURE__ */ jsx(Calendar, {
+					defaultValue: openedWith,
+					max: asDate(max),
+					min: asDate(min),
+					onChange: (next) => {
+						const input = inputRef.current;
+						if (input !== null) commitInputValue(input, next);
+						onChange?.(next);
+						setIsOpen(false);
+					}
+				}) : null
+			}) })]
+		})]
+	});
+};
+//#endregion
+export { DatePicker };

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

@@ -0,0 +1,14 @@
+import './date-picker.css';
+//#region src/components/form/date-picker/date-picker.module.css
+var date_picker_module_default = {
+	"dialog": "VmF9ya_dialog",
+	"disabled": "VmF9ya_disabled",
+	"input": "VmF9ya_input",
+	"invalid": "VmF9ya_invalid",
+	"locked": "VmF9ya_locked",
+	"readOnly": "VmF9ya_readOnly",
+	"root": "VmF9ya_root",
+	"trigger": "VmF9ya_trigger"
+};
+//#endregion
+export { date_picker_module_default as default };

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

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

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

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

package/dist/components/form/file-field/file-field.css

@@ -0,0 +1,88 @@
+@layer properties, theme, base;
+
+@layer components {
+  .PPBdPq_root {
+    width: 100%;
+  }
+
+  .PPBdPq_dropzone {
+    justify-content: center;
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+    border-radius: var(--radius-xl);
+    border-style: dashed;
+    border-width: 2px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    width: 100%;
+    padding: calc(var(--spacing) * 6);
+    text-align: center;
+    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);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .PPBdPq_invalid {
+    border-color: var(--color-border-error);
+  }
+
+  .PPBdPq_dragging {
+    border-color: var(--color-primary-border);
+    background-color: var(--color-primary-bg-subtle);
+  }
+
+  .PPBdPq_disabled {
+    cursor: not-allowed;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-mute);
+  }
+
+  .PPBdPq_hint {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-fg-mute);
+  }
+
+  .PPBdPq_list {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  .PPBdPq_item {
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+
+    &:not(:last-child) {
+      margin-block-end: calc(var(--spacing) * 2);
+    }
+  }
+
+  .PPBdPq_meta {
+    gap: calc(var(--spacing) * 1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .PPBdPq_name {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-fg-base);
+  }
+
+  .PPBdPq_size {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    color: var(--color-fg-mute);
+  }
+}
+
+@layer utilities;