@k8ordo/ui 1.0.0 → 2.1.0

package/dist/integrations/openui/library.d.mts

@@ -1,4 +1,4 @@
-import { AccordionProps, AlertProps, AnchorProps, AvatarProps, BadgeProps, BreadcrumbProps, ButtonProps, CardProps, ChevronIconProps, CodeProps, DialogProps, DrawerProps, DropdownMenuProps, FileFieldProps, FormControlProps, FormProps, GridProps, HeadingProps, IconButtonProps, IconProps, ModalProps, PopoverProps, ProgressProps, ScrollLinkedProps, SeparatorProps, SkeletonProps, SpinnerProps, StackProps, StatusIconProps, TableProps, TabsProps, ToastProps, TooltipProps } from "../_shared/schemas.mjs";
+import { AccordionProps, AlertProps, AnchorProps, AvatarProps, BadgeProps, BreadcrumbProps, ButtonProps, CalloutProps, CardProps, CarouselProps, ChevronIconProps, CodeProps, CopyButtonProps, DataTableProps, DialogProps, DrawerProps, DropdownMenuProps, EmptyStateProps, FileFieldProps, FormControlProps, FormProps, GridProps, HeadingProps, IconButtonProps, IconProps, KbdProps, ModalProps, PopoverProps, ProgressProps, SeparatorProps, SideNavProps, SkeletonProps, SpinnerProps, StackProps, StatusIconProps, StepperProps, TableProps, TabsProps, ToastProps, ToolbarProps, TooltipProps, TreeProps, schemas_d_exports } from "../_shared/schemas.mjs";
 import { ReactNode } from "react";
 import { ComponentRenderProps } from "@openuidev/react-lang";
 //#region src/integrations/openui/library.d.ts
@@ -14,15 +14,13 @@ import { ComponentRenderProps } from "@openuidev/react-lang";
  *
  * 合成モデルの違い: 子要素は json-render の slots ではなく、
  * `z.array(Child.ref)` という型付きサブコンポーネントの prop で表す。
- * NOTE: OpenUI は自己参照スキーマを安定して扱えないため、Stack/Grid 自身の
- * 入れ子は非対応（Card には Stack/Grid を入れられる）。
  */
 type ContainerRenderProps<P> = ComponentRenderProps<P & {
   children: ReadonlyArray<{
     typeName: string;
   }>;
 }>;
-declare const library: import("@openuidev/lang-core").Library<import("react").FC<ComponentRenderProps<{
+export declare const library: import("@openuidev/lang-core").Library<import("react").FC<ComponentRenderProps<{
   name: string;
   placeholder?: string | undefined;
   defaultValue?: string | undefined;
@@ -60,6 +58,49 @@ declare const library: import("@openuidev/lang-core").Library<import("react").FC
   disabled?: boolean | undefined;
   min?: number | undefined;
   max?: number | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  label: string;
+  defaultValue?: [number, number] | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+  step?: number | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  label: string;
+  defaultValue?: string | undefined;
+  swatches?: {
+    value: string;
+    label: string;
+  }[] | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  label: string;
+  defaultValue?: string | undefined;
+  min?: string | undefined;
+  max?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  label: string;
+  defaultValue?: string | undefined;
+  min?: string | undefined;
+  max?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  defaultValue?: string | undefined;
+  min?: string | undefined;
+  max?: string | undefined;
 }>> | import("react").FC<ComponentRenderProps<{
   name: string;
   label: string;
@@ -137,6 +178,18 @@ declare const library: import("@openuidev/lang-core").Library<import("react").FC
   }[];
   defaultValue?: string[] | undefined;
   label: string;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  label: string;
+  options: {
+    value: string;
+    label: string;
+  }[];
+  defaultValue?: string | undefined;
+  placeholder?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
 }>> | import("react").FC<ComponentRenderProps<{
   name: string;
   options: {
@@ -146,6 +199,5 @@ declare const library: import("@openuidev/lang-core").Library<import("react").FC
   defaultValue?: string[] | undefined;
   invalid?: boolean | undefined;
   disabled?: boolean | undefined;
-}>> | (({ props, renderNode }: ContainerRenderProps<StackProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<GridProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<CardProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<FormProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<ModalProps>) => import("react").JSX.Element) | (({ props, renderNode }: ContainerRenderProps<DialogProps>) => import("react").JSX.Element) | (({ props, renderNode }: ContainerRenderProps<DrawerProps>) => import("react").JSX.Element) | (({ props, renderNode }: ContainerRenderProps<PopoverProps>) => ReactNode) | (({ props }: ComponentRenderProps<TooltipProps>) => ReactNode) | (({ props }: ComponentRenderProps<DropdownMenuProps>) => ReactNode) | (({ props }: ComponentRenderProps<ToastProps>) => import("react").JSX.Element) | (({ props }: ComponentRenderProps<ButtonProps>) => ReactNode) | (({ props }: ComponentRenderProps<IconButtonProps>) => ReactNode) | (({ props }: ComponentRenderProps<BadgeProps>) => ReactNode) | (({ props }: ComponentRenderProps<HeadingProps>) => ReactNode) | (({ props }: ComponentRenderProps<AnchorProps>) => ReactNode) | (({ props }: ComponentRenderProps<AvatarProps>) => ReactNode) | (({ props }: ComponentRenderProps<CodeProps>) => ReactNode) | (({ props }: ComponentRenderProps<IconProps>) => ReactNode) | (({ props }: ComponentRenderProps<ChevronIconProps>) => ReactNode) | (({ props }: ComponentRenderProps<StatusIconProps>) => ReactNode) | (({ props }: ComponentRenderProps<AlertProps>) => ReactNode) | (({ props }: ComponentRenderProps<SpinnerProps>) => ReactNode) | (({ props }: ComponentRenderProps<ProgressProps>) => ReactNode) | (({ props }: ComponentRenderProps<SkeletonProps>) => ReactNode) | (({ props }: ComponentRenderProps<SeparatorProps>) => ReactNode) | (({ props }: ComponentRenderProps<ScrollLinkedProps>) => ReactNode) | (({ props }: ComponentRenderProps<TabsProps>) => ReactNode) | (({ props }: ComponentRenderProps<AccordionProps>) => ReactNode) | (({ props }: ComponentRenderProps<BreadcrumbProps>) => ReactNode) | (({ props }: ComponentRenderProps<TableProps>) => ReactNode) | (({ props }: ComponentRenderProps<FileFieldProps>) => import("react").JSX.Element) | (({ props }: ComponentRenderProps<FormControlProps>) => import("react").JSX.Element)>;
-//#endregion
-export { library };
+}>> | (({ props, renderNode }: ContainerRenderProps<StackProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<GridProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<CardProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<FormProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<ModalProps>) => import("react").JSX.Element) | (({ props, renderNode }: ContainerRenderProps<DialogProps>) => import("react").JSX.Element) | (({ props, renderNode }: ContainerRenderProps<DrawerProps>) => import("react").JSX.Element) | (({ props, renderNode }: ContainerRenderProps<PopoverProps>) => ReactNode) | (({ props }: ComponentRenderProps<TooltipProps>) => ReactNode) | (({ props }: ComponentRenderProps<DropdownMenuProps>) => ReactNode) | (({ props }: ComponentRenderProps<ToolbarProps>) => ReactNode) | (({ props }: ComponentRenderProps<ToastProps>) => import("react").JSX.Element) | (({ props }: ComponentRenderProps<ButtonProps>) => ReactNode) | (({ props }: ComponentRenderProps<IconButtonProps>) => ReactNode) | (({ props }: ComponentRenderProps<CopyButtonProps>) => ReactNode) | (({ props }: ComponentRenderProps<BadgeProps>) => ReactNode) | (({ props }: ComponentRenderProps<HeadingProps>) => ReactNode) | (({ props }: ComponentRenderProps<AnchorProps>) => ReactNode) | (({ props }: ComponentRenderProps<AvatarProps>) => ReactNode) | (({ props }: ComponentRenderProps<CodeProps>) => ReactNode) | (({ props }: ComponentRenderProps<KbdProps>) => ReactNode) | (({ props }: ComponentRenderProps<EmptyStateProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<CarouselProps>) => ReactNode) | (({ props }: ComponentRenderProps<IconProps>) => ReactNode) | (({ props }: ComponentRenderProps<ChevronIconProps>) => ReactNode) | (({ props }: ComponentRenderProps<StatusIconProps>) => ReactNode) | (({ props }: ComponentRenderProps<AlertProps>) => ReactNode) | (({ props }: ComponentRenderProps<CalloutProps>) => ReactNode) | (({ props }: ComponentRenderProps<SpinnerProps>) => ReactNode) | (({ props }: ComponentRenderProps<ProgressProps>) => ReactNode) | (({ props }: ComponentRenderProps<SkeletonProps>) => ReactNode) | (({ props }: ComponentRenderProps<SeparatorProps>) => ReactNode) | (({ props }: ComponentRenderProps<TabsProps>) => ReactNode) | (({ props }: ComponentRenderProps<AccordionProps>) => ReactNode) | (({ props }: ComponentRenderProps<BreadcrumbProps>) => ReactNode) | (({ props }: ComponentRenderProps<StepperProps>) => ReactNode) | (({ props }: ComponentRenderProps<TableProps>) => ReactNode) | (({ props }: ComponentRenderProps<DataTableProps>) => import("react").JSX.Element) | (({ props }: ComponentRenderProps<TreeProps>) => ReactNode) | (({ props }: ComponentRenderProps<SideNavProps>) => ReactNode) | (({ props }: ComponentRenderProps<FileFieldProps>) => import("react").JSX.Element) | (({ props }: ComponentRenderProps<FormControlProps>) => import("react").JSX.Element)>;
+//#endregion

package/dist/integrations/openui/library.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { buildComponentLibrary } from "../_shared/openui-defs.mjs";
-import { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAvatar, renderBadge, renderBreadcrumb, renderButton, renderCard, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderPopover, renderProgress, renderScrollLinked, renderSeparator, renderSkeleton, renderSpinner, renderStack, renderStatusIcon, renderTable, renderTabs, renderTooltip } from "../_shared/renderers.mjs";
-import { AutocompleteView, CheckboxCardView, CheckboxGroupView, CheckboxView, ListBoxView, NumberFieldView, PaginationView, PasswordInputView, RadioCardView, RadioView, SelectView, SliderView, SwitchView, TextFieldView, TextareaView } from "./form-views.mjs";
+import { DataTableWidget, DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAvatar, renderBadge, renderBreadcrumb, renderButton, renderCallout, renderCard, renderCarousel, renderChevronIcon, renderCode, renderCopyButton, renderDropdownMenu, renderEmptyState, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderKbd, renderPopover, renderProgress, renderSeparator, renderSideNav, renderSkeleton, renderSpinner, renderStack, renderStatusIcon, renderStepper, renderTable, renderTabs, renderToolbar, renderTooltip, renderTree } from "../_shared/renderers.mjs";
+import { AutocompleteView, CalendarView, CheckboxCardView, CheckboxGroupView, CheckboxView, ColorPickerView, ComboboxView, DateFieldView, DatePickerView, ListBoxView, NumberFieldView, PaginationView, PasswordInputView, RadioCardView, RadioView, RangeSliderView, SelectView, SliderView, SwitchView, TextFieldView, TextareaView } from "./form-views.mjs";
 import { Fragment } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/integrations/openui/library.tsx
@@ -26,32 +26,46 @@ const library = buildComponentLibrary({
 	Popover: ({ props, renderNode }) => renderPopover(props, renderChildren(props.children, renderNode)),
 	Tooltip: ({ props }) => renderTooltip(props),
 	DropdownMenu: ({ props }) => renderDropdownMenu(props),
+	Toolbar: ({ props }) => renderToolbar(props),
 	Toast: ({ props }) => /* @__PURE__ */ jsx(ToastWidget, { props }),
 	Button: ({ props }) => renderButton(props),
 	IconButton: ({ props }) => renderIconButton(props),
+	CopyButton: ({ props }) => renderCopyButton(props),
 	Badge: ({ props }) => renderBadge(props),
 	Heading: ({ props }) => renderHeading(props),
 	Anchor: ({ props }) => renderAnchor(props),
 	Avatar: ({ props }) => renderAvatar(props),
 	Code: ({ props }) => renderCode(props),
+	Kbd: ({ props }) => renderKbd(props),
+	EmptyState: ({ props }) => renderEmptyState(props),
+	Carousel: ({ props, renderNode }) => renderCarousel(props, props.children.map((child) => renderNode(child))),
 	Icon: ({ props }) => renderIcon(props),
 	ChevronIcon: ({ props }) => renderChevronIcon(props),
 	StatusIcon: ({ props }) => renderStatusIcon(props),
 	Alert: ({ props }) => renderAlert(props),
+	Callout: ({ props }) => renderCallout(props),
 	Spinner: ({ props }) => renderSpinner(props),
 	Progress: ({ props }) => renderProgress(props),
 	Skeleton: ({ props }) => renderSkeleton(props),
 	Separator: ({ props }) => renderSeparator(props),
-	ScrollLinked: ({ props }) => renderScrollLinked(props),
 	Tabs: ({ props }) => renderTabs(props),
 	Accordion: ({ props }) => renderAccordion(props),
 	Breadcrumb: ({ props }) => renderBreadcrumb(props),
+	Stepper: ({ props }) => renderStepper(props),
 	Table: ({ props }) => renderTable(props),
+	DataTable: ({ props }) => /* @__PURE__ */ jsx(DataTableWidget, { props }),
+	Tree: ({ props }) => renderTree(props),
+	SideNav: ({ props }) => renderSideNav(props),
 	TextField: TextFieldView,
 	Textarea: TextareaView,
 	PasswordInput: PasswordInputView,
 	NumberField: NumberFieldView,
 	Slider: SliderView,
+	RangeSlider: RangeSliderView,
+	ColorPicker: ColorPickerView,
+	DateField: DateFieldView,
+	DatePicker: DatePickerView,
+	Calendar: CalendarView,
 	Checkbox: CheckboxView,
 	Switch: SwitchView,
 	Select: SelectView,
@@ -61,6 +75,7 @@ const library = buildComponentLibrary({
 	Pagination: PaginationView,
 	ListBox: ListBoxView,
 	CheckboxGroup: CheckboxGroupView,
+	Combobox: ComboboxView,
 	Autocomplete: AutocompleteView,
 	FileField: ({ props }) => /* @__PURE__ */ jsx(FileFieldWidget, { props }),
 	FormControl: ({ props }) => /* @__PURE__ */ jsx(FormControlWidget, { props })

package/dist/integrations/openui/prompt.d.mts

@@ -1,5 +1,4 @@
 import { PromptOptions } from "@openuidev/lang-core";
 //#region src/integrations/openui/prompt.d.ts
-declare const prompt: (options?: PromptOptions) => string;
-//#endregion
-export { prompt };
+export declare const prompt: (options?: PromptOptions) => string;
+//#endregion

package/dist/internal/accepts-file.d.mts

@@ -0,0 +1,8 @@
+//#region src/internal/accepts-file.d.ts
+/**
+ * `<input type="file">` の `accept` と同じ規則でファイルを選り分ける。
+ * ブラウザがこの規則を当てるのはファイル選択ダイアログだけで、ドロップや
+ * 貼り付けで届いたファイルは素通しになるため、自前で当てる。
+ */
+export declare const acceptsFile: (file: File, accept: string) => boolean;
+//#endregion

package/dist/internal/accepts-file.mjs

@@ -0,0 +1,19 @@
+//#region src/internal/accepts-file.ts
+/**
+* `<input type="file">` の `accept` と同じ規則でファイルを選り分ける。
+* ブラウザがこの規則を当てるのはファイル選択ダイアログだけで、ドロップや
+* 貼り付けで届いたファイルは素通しになるため、自前で当てる。
+*/
+const acceptsFile = (file, accept) => {
+	const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter((token) => token !== "");
+	if (tokens.length === 0) return true;
+	const type = file.type.toLowerCase();
+	const name = file.name.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+		return type === token;
+	});
+};
+//#endregion
+export { acceptsFile };

package/dist/internal/carries-files.d.mts

@@ -0,0 +1,3 @@
+//#region src/internal/carries-files.d.ts
+export declare const carriesFiles: (dataTransfer: DataTransfer) => boolean;
+//#endregion

package/dist/internal/carries-files.mjs

@@ -0,0 +1,4 @@
+//#region src/internal/carries-files.ts
+const carriesFiles = (dataTransfer) => dataTransfer.types.includes("Files");
+//#endregion
+export { carriesFiles };

package/dist/internal/clamp.d.mts

@@ -1,4 +1,3 @@
 //#region src/internal/clamp.d.ts
-declare const clamp: (value: number, min: number, max: number) => number;
-//#endregion
-export { clamp };
+export declare const clamp: (value: number, min: number, max: number) => number;
+//#endregion

package/dist/internal/clamp.mjs

@@ -1,15 +1,4 @@
 //#region src/internal/clamp.ts
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-if (import.meta.vitest) describe("clamp", () => {
-	it("minとmaxの間の値の場合はそのまま返す", () => {
-		expect(clamp(5, 0, 10)).toBe(5);
-	});
-	it("minより小さい場合はminを返す", () => {
-		expect(clamp(-5, 0, 10)).toBe(0);
-	});
-	it("maxより大きい場合はmaxを返す", () => {
-		expect(clamp(15, 0, 10)).toBe(10);
-	});
-});
 //#endregion
 export { clamp };

package/dist/internal/commit-input-value.d.mts

@@ -0,0 +1,10 @@
+//#region src/internal/commit-input-value.d.ts
+/**
+ * コードから入力欄の値を変え、打ち込んだときと同じく input イベントで知らせる。
+ *
+ * React が value を書いても DOM のイベントは出ないので、フォーム側
+ * （@k8ordo/form の useForm は input イベントで dirty・ルール・エラーの解除を
+ * 見る）は変化に気づけない。値が変わらなかったときは出さない。
+ */
+export declare const commitInputValue: (input: HTMLInputElement, value: string) => void;
+//#endregion

package/dist/internal/commit-input-value.mjs

@@ -0,0 +1,15 @@
+//#region src/internal/commit-input-value.ts
+/**
+* コードから入力欄の値を変え、打ち込んだときと同じく input イベントで知らせる。
+*
+* React が value を書いても DOM のイベントは出ないので、フォーム側
+* （@k8ordo/form の useForm は input イベントで dirty・ルール・エラーの解除を
+* 見る）は変化に気づけない。値が変わらなかったときは出さない。
+*/
+const commitInputValue = (input, value) => {
+	if (input.value === value) return;
+	input.value = value;
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+};
+//#endregion
+export { commitInputValue };

package/dist/internal/dropped-files.d.mts

@@ -0,0 +1,3 @@
+//#region src/internal/dropped-files.d.ts
+export declare const droppedFiles: (dataTransfer: DataTransfer) => File[];
+//#endregion

package/dist/internal/dropped-files.mjs

@@ -0,0 +1,8 @@
+//#region src/internal/dropped-files.ts
+const droppedFiles = (dataTransfer) => Array.from(dataTransfer.items).flatMap((item) => {
+	if (item.kind !== "file" || item.webkitGetAsEntry()?.isDirectory === true) return [];
+	const file = item.getAsFile();
+	return file === null ? [] : [file];
+});
+//#endregion
+export { droppedFiles };

package/dist/{hooks/focus-trap/index.d.mts → internal/focus-trap.d.mts}

@@ -1,18 +1,17 @@
 import { RefObject } from "react";
-//#region src/hooks/focus-trap/index.d.ts
+//#region src/internal/focus-trap.d.ts
 /**
  * 非モーダルなポップアップのフォーカス管理。
  *
- * floating-ui の `<FloatingFocusManager modal={false}>` 相当を自前で再現する:
  * - 開いたとき、ポップアップ内へ初期フォーカスを移す
  *   （内部に roving tabindex のリストがある場合は、そのリストナビゲーション側の
  *   フォーカスが後で上書きするため、ここではコンテナ/先頭要素に当てるだけでよい）
  * - 閉じたとき、フォーカスがまだポップアップ内（または喪失）していればトリガーへ戻す。
  *   外側を意図的にクリック/フォーカスした場合は奪い返さない。
  *
- * ハードな Tab トラップや close-on-focus-out は行わない（元実装が modal=false のため）。
- * 外側クリック / Escape による dismiss は呼び出し側が担う。
+ * ハードな Tab トラップや close-on-focus-out は行わない。非モーダルなので Tab で
+ * ポップアップの外へ抜けられるのが期待される振る舞いで、抜けたときに閉じるかは
+ * 呼び出し側が決める。外側クリック / Escape による dismiss も呼び出し側が担う。
  */
-declare const useFocusTrap: (contentRef: RefObject<HTMLElement | null>, triggerRef: RefObject<Element | null>, enabled: boolean) => void;
-//#endregion
-export { useFocusTrap };
+export declare const useFocusTrap: (contentRef: RefObject<HTMLElement | null>, triggerRef: RefObject<Element | null>, enabled: boolean) => void;
+//#endregion

package/dist/{hooks/focus-trap/index.mjs → internal/focus-trap.mjs}

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect } from "react";
-//#region src/hooks/focus-trap/index.ts
+//#region src/internal/focus-trap.ts
 const FOCUSABLE_SELECTOR = [
 	"a[href]",
 	"button:not([disabled])",
@@ -13,15 +13,15 @@ const FOCUSABLE_SELECTOR = [
 /**
 * 非モーダルなポップアップのフォーカス管理。
 *
-* floating-ui の `<FloatingFocusManager modal={false}>` 相当を自前で再現する:
 * - 開いたとき、ポップアップ内へ初期フォーカスを移す
 *   （内部に roving tabindex のリストがある場合は、そのリストナビゲーション側の
 *   フォーカスが後で上書きするため、ここではコンテナ/先頭要素に当てるだけでよい）
 * - 閉じたとき、フォーカスがまだポップアップ内（または喪失）していればトリガーへ戻す。
 *   外側を意図的にクリック/フォーカスした場合は奪い返さない。
 *
-* ハードな Tab トラップや close-on-focus-out は行わない（元実装が modal=false のため）。
-* 外側クリック / Escape による dismiss は呼び出し側が担う。
+* ハードな Tab トラップや close-on-focus-out は行わない。非モーダルなので Tab で
+* ポップアップの外へ抜けられるのが期待される振る舞いで、抜けたときに閉じるかは
+* 呼び出し側が決める。外側クリック / Escape による dismiss も呼び出し側が担う。
 */
 const useFocusTrap = (contentRef, triggerRef, enabled) => {
 	useEffect(() => {
@@ -30,7 +30,7 @@ const useFocusTrap = (contentRef, triggerRef, enabled) => {
 		if (!content) return;
 		const trigger = triggerRef.current;
 		if (!content.contains(document.activeElement)) {
-			const first = content.querySelector(FOCUSABLE_SELECTOR);
+			const first = content.querySelector("[data-autofocus]") ?? content.querySelector(FOCUSABLE_SELECTOR);
 			if (first) first.focus();
 			else {
 				content.tabIndex = -1;

package/dist/internal/hex-color.d.mts

@@ -0,0 +1,22 @@
+//#region src/internal/hex-color.d.ts
+/** 色相 0〜359、彩度と明度は 0〜100 の整数。 */
+export type Hsl = {
+  h: number;
+  s: number;
+  l: number;
+};
+/**
+ * `#rrggbb`（`#` は省いてよく、大文字も可）を小文字にそろえる。読めなければ
+ * null。`shorthand` なら `#rgb` も 6 桁に広げて読む。打っている途中の `#256`
+ * （`#2563eb` の打ちかけ）を色と取らないよう、打鍵のたびには広げない。
+ */
+export declare const parseHex: (text: string, { shorthand }?: {
+  shorthand?: boolean;
+}) => string | null;
+/**
+ * 灰色（彩度 0）には色相が無いので、`fallbackHue` を残す。そうしないと
+ * 彩度を 0 まで下げたとたんに色相のつまみが端へ飛ぶ。
+ */
+export declare const hexToHsl: (hex: string, fallbackHue?: number) => Hsl;
+export declare const hslToHex: ({ h, s, l }: Hsl) => string;
+//#endregion

package/dist/internal/hex-color.mjs

@@ -0,0 +1,53 @@
+//#region src/internal/hex-color.ts
+const HEX = /^#?(?<digits>[\da-f]{3}|[\da-f]{6})$/iu;
+/**
+* `#rrggbb`（`#` は省いてよく、大文字も可）を小文字にそろえる。読めなければ
+* null。`shorthand` なら `#rgb` も 6 桁に広げて読む。打っている途中の `#256`
+* （`#2563eb` の打ちかけ）を色と取らないよう、打鍵のたびには広げない。
+*/
+const parseHex = (text, { shorthand = false } = {}) => {
+	const digits = HEX.exec(text.trim())?.groups?.digits;
+	if (digits === void 0 || digits.length === 3 && !shorthand) return null;
+	return `#${(digits.length === 3 ? digits.replaceAll(/./gu, "$&$&") : digits).toLowerCase()}`;
+};
+const channels = (hex) => [
+	Number.parseInt(hex.slice(1, 3), 16) / 255,
+	Number.parseInt(hex.slice(3, 5), 16) / 255,
+	Number.parseInt(hex.slice(5, 7), 16) / 255
+];
+/**
+* 灰色（彩度 0）には色相が無いので、`fallbackHue` を残す。そうしないと
+* 彩度を 0 まで下げたとたんに色相のつまみが端へ飛ぶ。
+*/
+const hexToHsl = (hex, fallbackHue = 0) => {
+	const [r, g, b] = channels(hex);
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const lightness = (max + min) / 2;
+	const delta = max - min;
+	if (delta === 0) return {
+		h: fallbackHue,
+		s: 0,
+		l: Math.round(lightness * 100)
+	};
+	const saturation = delta / (1 - Math.abs(2 * lightness - 1));
+	const sector = max === r ? ((g - b) / delta + 6) % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4;
+	return {
+		h: Math.round(sector * 60) % 360,
+		s: Math.round(saturation * 100),
+		l: Math.round(lightness * 100)
+	};
+};
+const hslToHex = ({ h, s, l }) => {
+	const saturation = s / 100;
+	const lightness = l / 100;
+	const amount = saturation * Math.min(lightness, 1 - lightness);
+	const channel = (offset) => {
+		const k = (offset + h / 30) % 12;
+		const value = lightness - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+		return Math.round(value * 255).toString(16).padStart(2, "0");
+	};
+	return `#${channel(0)}${channel(8)}${channel(4)}`;
+};
+//#endregion
+export { hexToHsl, hslToHex, parseHex };

package/dist/internal/iso-date.d.mts

@@ -0,0 +1,39 @@
+//#region src/internal/iso-date.d.ts
+/**
+ * `YYYY-MM-DD`（`<input type="date">` の value と `z.iso.date()` の形）のまま
+ * 暦日を扱う。
+ *
+ * 暦日はタイムゾーンを持たないので、計算は UTC の Date で行い、書式にも
+ * `timeZone: 'UTC'` を渡す。ローカル時刻の Date で持つと、UTC より西の
+ * タイムゾーンで 1 日前にずれる。Temporal.PlainDate が本来の道具だが、
+ * Baseline に入っていない。
+ */
+export type IsoDate = string;
+/** 実在する暦日の `YYYY-MM-DD` なら UTC の Date を返す（2 月 30 日などは null）。 */
+export declare const toUtcDate: (value: string) => Date | null;
+export declare const isIsoDate: (value: string) => boolean;
+export declare const addDays: (value: IsoDate, days: number) => IsoDate;
+/** 月をまたいでも日は繰り越さず、移った先の月末で止める（1/31 の翌月は 2/28）。 */
+export declare const addMonths: (value: IsoDate, months: number) => IsoDate;
+export declare const startOfMonth: (value: IsoDate) => IsoDate;
+export declare const endOfMonth: (value: IsoDate) => IsoDate;
+/** 0 = 日曜 … 6 = 土曜（`Date#getUTCDay` と同じ）。 */
+export declare const dayOfWeek: (value: IsoDate) => number;
+/** 週の始まりの曜日（0 = 日曜）から数えて、その日を含む週の初日。 */
+export declare const startOfWeek: (value: IsoDate, firstDay: number) => IsoDate;
+export declare const isSameMonth: (a: IsoDate, b: IsoDate) => boolean;
+/** 4 桁の年の `YYYY-MM-DD` は文字列の順がそのまま日付の順になる。 */
+export declare const clampDate: (value: IsoDate, min: IsoDate | undefined, max: IsoDate | undefined) => IsoDate;
+export declare const isWithin: (value: IsoDate, min: IsoDate | undefined, max: IsoDate | undefined) => boolean;
+/**
+ * 月の表に並べる 6 週ぶんの日付。月の外の日も含む。行数を月ごとに変えないのは、
+ * 月を送ったときに高さが変わってポップオーバーの下の縁が跳ねないようにするため。
+ */
+export declare const monthWeeks: (month: IsoDate, firstDay: number) => IsoDate[][];
+/** 書式用の UTC の Date。`Intl.DateTimeFormat` には `timeZone: 'UTC'` と組で渡す。 */
+export declare const formatDate: (value: IsoDate) => Date;
+/** 閲覧者のタイムゾーンでの今日。サーバーでは閲覧者の今日が分からないので、ブラウザでだけ呼ぶ。 */
+export declare const localToday: (now: Date) => IsoDate;
+/** 閲覧者のタイムゾーンで日付が変わるたびに `onChange` を呼ぶ。返す関数で購読をやめる。 */
+export declare const subscribeToDateChange: (onChange: () => void) => (() => void);
+//#endregion

package/dist/internal/iso-date.mjs

@@ -0,0 +1,98 @@
+//#region src/internal/iso-date.ts
+const ISO_DATE = /^(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})$/u;
+const utc = (year, monthIndex, day) => {
+	const date = /* @__PURE__ */ new Date(0);
+	date.setUTCFullYear(year, monthIndex, day);
+	return date;
+};
+const pad = (value, length) => String(value).padStart(length, "0");
+const fromUtc = (date) => `${pad(date.getUTCFullYear(), 4)}-${pad(date.getUTCMonth() + 1, 2)}-${pad(date.getUTCDate(), 2)}`;
+/** 実在する暦日の `YYYY-MM-DD` なら UTC の Date を返す（2 月 30 日などは null）。 */
+const toUtcDate = (value) => {
+	const groups = ISO_DATE.exec(value)?.groups;
+	if (groups === void 0) return null;
+	const year = Number(groups.year);
+	const month = Number(groups.month);
+	const day = Number(groups.day);
+	const date = utc(year, month - 1, day);
+	return date.getUTCMonth() === month - 1 && date.getUTCDate() === day ? date : null;
+};
+const isIsoDate = (value) => toUtcDate(value) !== null;
+const parts = (value) => {
+	const date = toUtcDate(value);
+	if (date === null) throw new RangeError(`YYYY-MM-DD の暦日ではありません: ${value}`);
+	return [
+		date.getUTCFullYear(),
+		date.getUTCMonth(),
+		date.getUTCDate()
+	];
+};
+const addDays = (value, days) => {
+	const [year, month, day] = parts(value);
+	return fromUtc(utc(year, month, day + days));
+};
+const daysInMonth = (year, monthIndex) => utc(year, monthIndex + 1, 0).getUTCDate();
+/** 月をまたいでも日は繰り越さず、移った先の月末で止める（1/31 の翌月は 2/28）。 */
+const addMonths = (value, months) => {
+	const [year, month, day] = parts(value);
+	const first = utc(year, month + months, 1);
+	const lastDay = daysInMonth(first.getUTCFullYear(), first.getUTCMonth());
+	first.setUTCDate(Math.min(day, lastDay));
+	return fromUtc(first);
+};
+const startOfMonth = (value) => {
+	const [year, month] = parts(value);
+	return fromUtc(utc(year, month, 1));
+};
+const endOfMonth = (value) => {
+	const [year, month] = parts(value);
+	return fromUtc(utc(year, month + 1, 0));
+};
+/** 0 = 日曜 … 6 = 土曜（`Date#getUTCDay` と同じ）。 */
+const dayOfWeek = (value) => {
+	const [year, month, day] = parts(value);
+	return utc(year, month, day).getUTCDay();
+};
+/** 週の始まりの曜日（0 = 日曜）から数えて、その日を含む週の初日。 */
+const startOfWeek = (value, firstDay) => addDays(value, -((dayOfWeek(value) - firstDay + 7) % 7));
+const isSameMonth = (a, b) => a.slice(0, 7) === b.slice(0, 7);
+/** 4 桁の年の `YYYY-MM-DD` は文字列の順がそのまま日付の順になる。 */
+const clampDate = (value, min, max) => {
+	if (min !== void 0 && value < min) return min;
+	if (max !== void 0 && value > max) return max;
+	return value;
+};
+const isWithin = (value, min, max) => (min === void 0 || value >= min) && (max === void 0 || value <= max);
+/**
+* 月の表に並べる 6 週ぶんの日付。月の外の日も含む。行数を月ごとに変えないのは、
+* 月を送ったときに高さが変わってポップオーバーの下の縁が跳ねないようにするため。
+*/
+const monthWeeks = (month, firstDay) => {
+	const start = startOfWeek(startOfMonth(month), firstDay);
+	return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_day, weekday) => addDays(start, week * 7 + weekday)));
+};
+/** 書式用の UTC の Date。`Intl.DateTimeFormat` には `timeZone: 'UTC'` と組で渡す。 */
+const formatDate = (value) => {
+	const [year, month, day] = parts(value);
+	return utc(year, month, day);
+};
+/** 閲覧者のタイムゾーンでの今日。サーバーでは閲覧者の今日が分からないので、ブラウザでだけ呼ぶ。 */
+const localToday = (now) => `${pad(now.getFullYear(), 4)}-${pad(now.getMonth() + 1, 2)}-${pad(now.getDate(), 2)}`;
+/** 閲覧者のタイムゾーンで日付が変わるたびに `onChange` を呼ぶ。返す関数で購読をやめる。 */
+const subscribeToDateChange = (onChange) => {
+	let timer;
+	const schedule = () => {
+		const now = /* @__PURE__ */ new Date();
+		const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+		timer = setTimeout(() => {
+			onChange();
+			schedule();
+		}, tomorrow.getTime() - now.getTime());
+	};
+	schedule();
+	return () => {
+		clearTimeout(timer);
+	};
+};
+//#endregion
+export { addDays, addMonths, clampDate, dayOfWeek, endOfMonth, formatDate, isIsoDate, isSameMonth, isWithin, localToday, monthWeeks, startOfMonth, startOfWeek, subscribeToDateChange, toUtcDate };

package/dist/internal/to-precision.d.mts

@@ -1,4 +1,3 @@
 //#region src/internal/to-precision.d.ts
-declare const toPrecision: (value: number, precision?: number) => number;
-//#endregion
-export { toPrecision };
+export declare const toPrecision: (value: number, precision?: number) => number;
+//#endregion

package/dist/internal/to-precision.mjs

@@ -3,13 +3,5 @@ const toPrecision = (value, precision) => {
 	const scaleFactor = 10 ** (precision ?? 10);
 	return Math.round(value * scaleFactor) / scaleFactor;
 };
-if (import.meta.vitest) it("数値を指定した桁数に丸める", () => {
-	expect(toPrecision(1.2345, 0)).toBe(1);
-	expect(toPrecision(1.2345, 1)).toBe(1.2);
-	expect(toPrecision(1.2345, 2)).toBe(1.23);
-	expect(toPrecision(1.2345, 3)).toBe(1.235);
-	expect(toPrecision(1.2345, 4)).toBe(1.2345);
-	expect(toPrecision(1.2345, 5)).toBe(1.2345);
-});
 //#endregion
 export { toPrecision };