@k8ordo/ui 2.0.0 → 2.2.0

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

@@ -0,0 +1,172 @@
+@layer properties, theme, base;
+
+@layer components {
+  .SyHfiq_root {
+    gap: calc(var(--spacing) * 3);
+    flex-direction: column;
+    inline-size: 100%;
+    display: flex;
+  }
+
+  .SyHfiq_row {
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+    display: flex;
+  }
+
+  .SyHfiq_well {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .SyHfiq_picker {
+    cursor: pointer;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .SyHfiq_preview {
+    border-radius: var(--radius-lg);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    forced-color-adjust: none;
+    width: 100%;
+    height: 100%;
+    display: block;
+
+    @media (forced-colors: active) {
+      border-color: var(--color-system-canvas-text);
+    }
+  }
+
+  .SyHfiq_previewEmpty {
+    border-style: dashed;
+  }
+
+  .SyHfiq_picker:focus-visible ~ .SyHfiq_preview {
+    box-shadow: var(--shadow-ring-info);
+    border-color: #0000;
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  .SyHfiq_field {
+    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);
+
+    &: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);
+    }
+  }
+
+  .SyHfiq_channels {
+    align-items: center;
+    column-gap: calc(var(--spacing) * 3);
+    grid-template-columns: auto minmax(0, 1fr);
+    display: grid;
+  }
+
+  .SyHfiq_channelLabel {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-fg-mute);
+  }
+
+  .SyHfiq_channel {
+    block-size: calc(var(--spacing) * 8);
+    align-items: center;
+    inline-size: 100%;
+    display: flex;
+    position: relative;
+  }
+
+  .SyHfiq_channelDisabled {
+    opacity: .5;
+  }
+
+  .SyHfiq_track {
+    --track-direction: to right;
+    block-size: calc(var(--spacing) * 3);
+    border-radius: var(--radius-full);
+    forced-color-adjust: none;
+    inline-size: 100%;
+
+    @media (forced-colors: active) {
+      outline-color: var(--color-system-canvas-text);
+    }
+  }
+
+  .SyHfiq_track:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    --track-direction: to left;
+  }
+
+  .SyHfiq_swatches {
+    gap: calc(var(--spacing) * 2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .SyHfiq_swatch {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+    border-radius: var(--radius-md);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    forced-color-adjust: none;
+
+    @media (forced-colors: active) {
+      border-color: var(--color-system-canvas-text);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: .5;
+    }
+
+    &[aria-pressed="true"] {
+      outline-offset: 2px;
+      outline-width: 2px;
+      outline-style: solid;
+      outline-color: var(--color-fg-base);
+
+      @media (forced-colors: active) {
+        outline-color: var(--color-system-canvas-text);
+      }
+    }
+
+    &[aria-pressed="true"]:focus-visible {
+      outline-style: none;
+    }
+  }
+}
+
+@layer utilities;

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

@@ -0,0 +1,29 @@
+import { FC, InputHTMLAttributes, Ref } from "react";
+//#region src/components/form/color-picker/color-picker.d.ts
+export type ColorPickerSwatch = Readonly<{
+  /** `#rrggbb` */
+  value: string;
+  /** 見本のボタンの名前（色の名前） */
+  label: string;
+}>;
+type BaseProps = {
+  invalid?: boolean;
+  swatches?: readonly ColorPickerSwatch[];
+  type?: string;
+  ref?: Ref<HTMLInputElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style' | 'value' | 'onChange' | 'defaultValue' | 'children'>;
+type ControlledProps = {
+  /** `#rrggbb`。空の欄は `''` */
+  value: string;
+  onChange: (value: string) => void;
+  defaultValue?: never;
+};
+type UncontrolledProps = {
+  defaultValue?: string;
+  value?: never;
+  onChange?: (value: string) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
+export declare const ColorPicker: FC<Props>;
+//#endregion
+export {};

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

@@ -0,0 +1,239 @@
+"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 high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
+import { commitInputValue } from "../../../internal/commit-input-value.mjs";
+import { hexToHsl, hslToHex, parseHex } from "../../../internal/hex-color.mjs";
+import { rangeInputClass } from "../slider/range-input-class.mjs";
+import color_picker_module_default from "./color-picker.module.mjs";
+import { clsx } from "clsx";
+import { useEffect, useEffectEvent, useId, useMemo, useRef, useState } from "react";
+import { useFormStatus } from "react-dom";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/color-picker/color-picker.tsx
+const EMPTY = {
+	h: 0,
+	s: 0,
+	l: 50
+};
+const HUE_STOPS = [
+	0,
+	60,
+	120,
+	180,
+	240,
+	300,
+	360
+].map((hue) => `hsl(${String(hue)} 100% 50%)`).join(", ");
+const Channel = ({ label, value, max, unit, stops, disabled, onChange }) => {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("label", {
+		className: color_picker_module_default.channelLabel,
+		htmlFor: id,
+		children: label
+	}), /* @__PURE__ */ jsxs("div", {
+		className: clsx(color_picker_module_default.channel, disabled && color_picker_module_default.channelDisabled),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: clsx(color_picker_module_default.track, high_contrast_module_default.edge),
+			style: { backgroundImage: `linear-gradient(var(--track-direction), ${stops})` }
+		}), /* @__PURE__ */ jsx("input", {
+			"aria-valuetext": `${String(value)}${unit}`,
+			className: rangeInputClass(false),
+			disabled,
+			id,
+			max,
+			min: 0,
+			onChange: (event) => {
+				onChange(Number(event.currentTarget.value));
+			},
+			step: 1,
+			type: "range",
+			value
+		})]
+	})] });
+};
+const ColorPicker = ({ invalid = false, swatches, type: _type, value, defaultValue, onChange, disabled = false, readOnly = false, onBlur, onKeyDown, ref, ...rest }) => {
+	const messages = getMessages();
+	const isControlled = value !== void 0;
+	const inputRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+	const initial = parseHex((isControlled ? value : defaultValue) ?? "", { shorthand: true });
+	const [hsl, setHsl] = useState(() => initial === null ? EMPTY : hexToHsl(initial));
+	const [shown, setShown] = useState(initial);
+	const [draft, setDraft] = useState(value ?? "");
+	const { pending } = useFormStatus();
+	const locked = disabled || readOnly || pending;
+	if (isControlled && parseHex(value, { shorthand: true }) !== shown) {
+		const next = parseHex(value, { shorthand: true });
+		setShown(next);
+		setDraft(value);
+		if (next !== null) setHsl(hexToHsl(next, hsl.h));
+	}
+	const handleRestored = useEffectEvent(() => {
+		const input = inputRef.current;
+		if (isControlled || input === null) return;
+		const restored = parseHex(input.value, { shorthand: true });
+		setShown(restored);
+		setHsl(restored === null ? EMPTY : hexToHsl(restored, hsl.h));
+	});
+	useEffect(() => {
+		const form = inputRef.current?.form;
+		if (!form) return;
+		const listener = () => {
+			setTimeout(() => {
+				handleRestored();
+			}, 0);
+		};
+		form.addEventListener("reset", listener);
+		return () => {
+			form.removeEventListener("reset", listener);
+		};
+	}, []);
+	const apply = (nextHsl, hex = hslToHex(nextHsl)) => {
+		setHsl(nextHsl);
+		const input = inputRef.current;
+		if (hex === shown || input === null) return;
+		setShown(hex);
+		if (isControlled) setDraft(hex);
+		commitInputValue(input, hex);
+		onChange?.(hex);
+	};
+	const handleType = (event) => {
+		if (isControlled) setDraft(event.currentTarget.value);
+		const text = event.currentTarget.value.trim();
+		const hex = parseHex(text);
+		if (hex === null && text !== "" || hex === shown) return;
+		setShown(hex);
+		if (hex !== null) setHsl(hexToHsl(hex, hsl.h));
+		onChange?.(hex ?? "");
+	};
+	const normalize = (input) => {
+		const hex = parseHex(input.value, { shorthand: true });
+		if (hex === null || input.readOnly) return;
+		if (isControlled) setDraft(hex);
+		commitInputValue(input, hex);
+		if (hex !== shown) {
+			setShown(hex);
+			setHsl(hexToHsl(hex, hsl.h));
+			onChange?.(hex);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("writing-h", color_picker_module_default.root),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: color_picker_module_default.row,
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: color_picker_module_default.well,
+					children: [/* @__PURE__ */ jsx("input", {
+						"aria-label": messages.colorPickerOpen,
+						className: color_picker_module_default.picker,
+						disabled: locked,
+						onChange: (event) => {
+							const hex = parseHex(event.currentTarget.value);
+							if (hex !== null) apply(hexToHsl(hex, hsl.h), hex);
+						},
+						type: "color",
+						value: shown ?? hslToHex(hsl)
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: clsx(color_picker_module_default.preview, shown === null && color_picker_module_default.previewEmpty),
+						style: shown === null ? void 0 : { backgroundColor: shown }
+					})]
+				}), /* @__PURE__ */ jsx("input", {
+					autoComplete: "off",
+					maxLength: 7,
+					pattern: "#[0-9a-fA-F]{6}",
+					spellCheck: false,
+					...rest,
+					...isControlled ? { value: draft } : { defaultValue: defaultValue ?? "" },
+					"aria-invalid": invalid,
+					className: clsx(color_picker_module_default.field, focus_ring_module_default.ring),
+					disabled,
+					onBlur: (event) => {
+						normalize(event.currentTarget);
+						onBlur?.(event);
+					},
+					onChange: handleType,
+					onKeyDown: (event) => {
+						if (event.key === "Enter") normalize(event.currentTarget);
+						onKeyDown?.(event);
+					},
+					readOnly: readOnly || pending,
+					ref: mergedRef,
+					type: "text"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: color_picker_module_default.channels,
+				children: [
+					/* @__PURE__ */ jsx(Channel, {
+						disabled: locked,
+						label: messages.colorPickerHue,
+						max: 359,
+						onChange: (h) => {
+							apply({
+								...hsl,
+								h
+							});
+						},
+						stops: HUE_STOPS,
+						unit: "°",
+						value: hsl.h
+					}),
+					/* @__PURE__ */ jsx(Channel, {
+						disabled: locked,
+						label: messages.colorPickerSaturation,
+						max: 100,
+						onChange: (s) => {
+							apply({
+								...hsl,
+								s
+							});
+						},
+						stops: `hsl(${String(hsl.h)} 0% ${String(hsl.l)}%), hsl(${String(hsl.h)} 100% ${String(hsl.l)}%)`,
+						unit: "%",
+						value: hsl.s
+					}),
+					/* @__PURE__ */ jsx(Channel, {
+						disabled: locked,
+						label: messages.colorPickerLightness,
+						max: 100,
+						onChange: (l) => {
+							apply({
+								...hsl,
+								l
+							});
+						},
+						stops: `hsl(${String(hsl.h)} ${String(hsl.s)}% 0%), hsl(${String(hsl.h)} ${String(hsl.s)}% 50%), hsl(${String(hsl.h)} ${String(hsl.s)}% 100%)`,
+						unit: "%",
+						value: hsl.l
+					})
+				]
+			}),
+			swatches === void 0 || swatches.length === 0 ? null : /* @__PURE__ */ jsx("div", {
+				"aria-label": messages.colorPickerSwatches,
+				className: color_picker_module_default.swatches,
+				role: "group",
+				children: swatches.map((swatch) => {
+					const hex = parseHex(swatch.value);
+					return hex === null ? null : /* @__PURE__ */ jsx("button", {
+						"aria-label": swatch.label,
+						"aria-pressed": hex === shown,
+						className: clsx(color_picker_module_default.swatch, focus_ring_module_default.ringNoBorder),
+						disabled: locked,
+						onClick: () => {
+							apply(hexToHsl(hex, hsl.h), hex);
+						},
+						style: { backgroundColor: hex },
+						type: "button"
+					}, swatch.value);
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { ColorPicker };

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

@@ -0,0 +1,20 @@
+import './color-picker.css';
+//#region src/components/form/color-picker/color-picker.module.css
+var color_picker_module_default = {
+	"channel": "SyHfiq_channel",
+	"channelDisabled": "SyHfiq_channelDisabled",
+	"channelLabel": "SyHfiq_channelLabel",
+	"channels": "SyHfiq_channels",
+	"field": "SyHfiq_field",
+	"picker": "SyHfiq_picker",
+	"preview": "SyHfiq_preview",
+	"previewEmpty": "SyHfiq_previewEmpty",
+	"root": "SyHfiq_root",
+	"row": "SyHfiq_row",
+	"swatch": "SyHfiq_swatch",
+	"swatches": "SyHfiq_swatches",
+	"track": "SyHfiq_track",
+	"well": "SyHfiq_well"
+};
+//#endregion
+export { color_picker_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ColorPicker, ColorPickerSwatch } from "./color-picker.mjs";
+export { ColorPicker, type ColorPickerSwatch };

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

@@ -0,0 +1 @@
+export { ColorPicker } from "./color-picker.mjs";

package/dist/components/form/combobox/combobox.css

@@ -0,0 +1,143 @@
+@layer properties, theme, base;
+
+@layer components {
+  .-dBzoa_root {
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-base);
+    background-color: var(--color-bg-base);
+    align-items: center;
+    inline-size: 100%;
+    display: flex;
+    position: relative;
+  }
+
+  .-dBzoa_disabled {
+    cursor: not-allowed;
+    border-color: var(--color-border-mute);
+    background-color: var(--color-bg-mute);
+  }
+
+  .-dBzoa_readOnly {
+    background-color: var(--color-bg-subtle);
+  }
+
+  .-dBzoa_root:has([aria-invalid="true"]), .-dBzoa_root:has([aria-invalid="true"]):focus-within {
+    border-color: var(--color-border-error);
+  }
+
+  .-dBzoa_input {
+    min-width: 0;
+    padding-block: calc(var(--spacing) * 2);
+    background-color: #0000;
+    flex-grow: 1;
+    padding-inline-start: calc(var(--spacing) * 3);
+
+    &:focus-visible {
+      outline-style: none;
+
+      @media (forced-colors: active) {
+        outline-offset: 2px;
+        outline: 2px solid #0000;
+      }
+    }
+
+    &:read-only, &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .-dBzoa_toggle {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    border-radius: var(--radius-md);
+    color: var(--color-fg-mute);
+    flex-shrink: 0;
+    place-items: center;
+    margin-inline-end: calc(var(--spacing) * 2);
+    display: grid;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .-dBzoa_popup {
+    z-index: var(--z-index-raised);
+    border-radius: var(--radius-xl);
+    border-width: 1px;
+    border-color: var(--color-border-subtle);
+    background-color: var(--color-bg-raised);
+    box-shadow: var(--shadow-md);
+  }
+
+  .-dBzoa_collapsed {
+    display: none;
+  }
+
+  .-dBzoa_status {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    color: var(--color-fg-mute);
+  }
+
+  .-dBzoa_list {
+    max-block-size: calc(var(--spacing) * 80);
+    padding-block: calc(var(--spacing) * 2);
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-in-out);
+    overflow-y: auto;
+
+    @container style(--writing: vertical) {
+      overflow: auto visible;
+    }
+  }
+
+  .-dBzoa_searching {
+    opacity: .6;
+  }
+
+  .-dBzoa_option {
+    cursor: pointer;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    outline-color: var(--color-border-base);
+    outline-offset: -2px;
+    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);
+  }
+
+  .-dBzoa_selected {
+    background-color: var(--color-primary-bg-subtle);
+    color: var(--color-primary-fg);
+  }
+
+  .-dBzoa_active {
+    background-color: var(--color-bg-subtle);
+
+    @media (prefers-contrast: more) {
+      outline-width: 2px;
+      outline-style: solid;
+    }
+
+    @media (forced-colors: active) {
+      outline-width: 2px;
+      outline-style: solid;
+    }
+  }
+
+  .-dBzoa_active.-dBzoa_selected {
+    background-color: var(--color-primary-bg-mute);
+  }
+
+  .-dBzoa_option.-dBzoa_selected {
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+      color: var(--color-system-highlight-text);
+    }
+  }
+}
+
+@layer utilities;

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

@@ -0,0 +1,33 @@
+import { Option } from "../../../types/variables.mjs";
+import { FC, InputHTMLAttributes, Ref } from "react";
+//#region src/components/form/combobox/combobox.d.ts
+export type ComboboxSearch = (query: string, options: {
+  signal: AbortSignal;
+}) => Promise<readonly Option[]>;
+type BaseProps = {
+  invalid?: boolean;
+  /**
+   * 選べる候補。`search` が無ければ、打った文字で表示名を絞り込む。`search`
+   * があれば、打つ前に見せる候補と、いまの値の表示名を引く先になる。
+   */
+  options?: readonly Option[];
+  /** 打った文字で候補を探す。打ち直すと前の問い合わせは `signal` で打ち切る。 */
+  search?: ComboboxSearch;
+  type?: string;
+  ref?: Ref<HTMLInputElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'style' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'autoComplete' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-activedescendant'>;
+type ControlledProps = {
+  /** 選んだ候補の `value`。未選択は `''` */
+  value: string;
+  onChange: (value: string) => void;
+  defaultValue?: never;
+};
+type UncontrolledProps = {
+  defaultValue?: string;
+  value?: never;
+  onChange?: (value: string) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
+export declare const Combobox: FC<Props>;
+//#endregion
+export {};