@k8ordo/ui 2.0.0 → 2.2.0

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

@@ -1,24 +1,27 @@
-import { ChangeEvent, FC, InputHTMLAttributes, PropsWithChildren, ReactElement, Ref } from "react";
+import { ChangeEvent, FC, InputHTMLAttributes, PropsWithChildren, ReactElement, ReactNode, Ref } from "react";
 //#region src/components/form/file-field/file-field.d.ts
 type RootProps = PropsWithChildren<{
   invalid?: boolean;
   maxFiles?: number;
-  defaultValue?: File[];
+  defaultValue?: File[] | string;
   onChange?: (files: FileList | null, event?: ChangeEvent<HTMLInputElement>) => void;
   webkitDirectory?: boolean;
   ref?: Ref<HTMLInputElement>;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style' | 'onChange' | 'defaultValue' | 'value' | 'children'>>;
-declare const Root: ({ children, disabled, invalid, required, multiple, maxFiles, defaultValue, onChange, webkitDirectory, ref, ...rest }: RootProps) => import("react").JSX.Element;
-declare const Trigger: FC<{
+export declare const Root: ({ children, disabled, invalid, required, multiple, accept, maxFiles, defaultValue, onChange, webkitDirectory, ref, ...rest }: RootProps) => import("react").JSX.Element;
+export declare const Trigger: FC<{
   renderItem: (props: {
     onClick: () => void;
     disabled: boolean;
     invalid: boolean;
   }) => ReactElement;
 }>;
-declare const ItemList: FC<{
+export declare const Dropzone: FC<{
+  children?: ReactNode;
+}>;
+export declare const ItemList: FC<{
   showWebkitRelativePath?: boolean;
   clearable?: boolean;
 }>;
 //#endregion
-export { ItemList, Root, Trigger };
+export {};

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

@@ -1,49 +1,99 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
-import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+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 { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { Button } from "../../buttons/button/button.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
-import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { acceptsFile } from "../../../internal/accepts-file.mjs";
+import { carriesFiles } from "../../../internal/carries-files.mjs";
+import { droppedFiles } from "../../../internal/dropped-files.mjs";
+import file_field_module_default from "./file-field.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useEffect, useEffectEvent, useId, useMemo, useRef, useState } from "react";
 import { useFormStatus } from "react-dom";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/file-field/file-field.tsx
 const [FileFieldProvider, useFileFieldContext] = createSafeContext("useFileFieldContext must be used within a FileField.Root");
-const Root = ({ children, disabled = false, invalid = false, required = false, multiple = false, maxFiles, defaultValue, onChange, webkitDirectory = false, ref, ...rest }) => {
+const toAccepted = (files) => files.map((file) => ({
+	file,
+	id: crypto.randomUUID()
+}));
+const toFileList = (files) => {
+	const dataTransfer = new DataTransfer();
+	for (const file of files) dataTransfer.items.add(file);
+	return dataTransfer.files;
+};
+const announce = (input, files) => {
+	const current = Array.from(input.files ?? []);
+	if (current.length === files.length && current.every((file, index) => file === files[index])) return;
+	input.files = toFileList(files);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+};
+const Root = ({ children, disabled = false, invalid = false, required = false, multiple = false, accept, maxFiles, defaultValue, onChange, webkitDirectory = false, ref, ...rest }) => {
 	const generatedId = useId();
 	const inputRef = useRef(null);
 	const mergedRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
 	const { pending } = useFormStatus();
 	const disabledResolved = disabled || pending;
-	const [acceptedFiles, setAcceptedFiles] = useState(() => (defaultValue ?? []).map((file) => ({
-		file,
-		id: crypto.randomUUID()
-	})));
-	const onFilesChange = useCallback((event) => {
-		onChange?.(event.target.files, event);
-		const newFiles = Array.from(event.target.files ?? []).map((file) => ({
-			file,
-			id: crypto.randomUUID()
-		}));
-		const updatedFiles = multiple || webkitDirectory ? [...acceptedFiles, ...newFiles].slice(0, maxFiles ?? Number.POSITIVE_INFINITY) : newFiles.slice(0, 1);
-		setAcceptedFiles(updatedFiles);
+	const defaultFiles = Array.isArray(defaultValue) ? defaultValue : [];
+	const [acceptedFiles, setAcceptedFiles] = useState(() => toAccepted(defaultFiles));
+	const writeDefaults = useEffectEvent(() => {
+		if (inputRef.current !== null) inputRef.current.files = toFileList(defaultFiles);
+	});
+	const resetList = useEffectEvent(() => {
+		setAcceptedFiles(toAccepted(defaultFiles));
+	});
+	useEffect(() => {
+		writeDefaults();
+		const form = inputRef.current?.form;
+		if (!form) return;
+		const listener = () => {
+			resetList();
+			setTimeout(() => {
+				writeDefaults();
+			}, 0);
+		};
+		form.addEventListener("reset", listener);
+		return () => {
+			form.removeEventListener("reset", listener);
+		};
+	}, []);
+	const withAdded = useCallback((files) => {
+		const added = toAccepted(files);
+		return multiple || webkitDirectory ? [...acceptedFiles, ...added].slice(0, maxFiles ?? Number.POSITIVE_INFINITY) : added.slice(0, 1);
 	}, [
 		acceptedFiles,
 		multiple,
 		maxFiles,
-		onChange,
 		webkitDirectory
 	]);
-	const onFileDelete = useCallback((fileId) => {
-		const updatedFiles = acceptedFiles.filter((f) => f.id !== fileId);
+	const onFilesChange = useCallback((event) => {
+		const input = event.currentTarget;
+		const updatedFiles = withAdded(Array.from(input.files ?? []));
 		setAcceptedFiles(updatedFiles);
-		if (inputRef.current && onChange) {
-			const dataTransfer = new DataTransfer();
-			for (const { file } of updatedFiles) dataTransfer.items.add(file);
-			inputRef.current.files = dataTransfer.files;
-			onChange(dataTransfer.files);
-		}
-	}, [acceptedFiles, onChange]);
+		announce(input, updatedFiles.map(({ file }) => file));
+		onChange?.(input.files, event);
+	}, [onChange, withAdded]);
+	const commitFiles = useCallback((updatedFiles) => {
+		setAcceptedFiles(updatedFiles);
+		const input = inputRef.current;
+		if (input === null) return;
+		announce(input, updatedFiles.map(({ file }) => file));
+		onChange?.(input.files);
+	}, [onChange]);
+	const onFilesDrop = useCallback((files) => {
+		const taken = accept === void 0 ? files : files.filter((file) => acceptsFile(file, accept));
+		if (taken.length > 0) commitFiles(withAdded(taken));
+	}, [
+		accept,
+		commitFiles,
+		withAdded
+	]);
+	const onFileDelete = useCallback((fileId) => {
+		commitFiles(acceptedFiles.filter((f) => f.id !== fileId));
+	}, [acceptedFiles, commitFiles]);
 	const openFilePicker = useCallback(() => {
 		inputRef.current?.click();
 	}, []);
@@ -52,22 +102,25 @@ const Root = ({ children, disabled = false, invalid = false, required = false, m
 		invalid,
 		acceptedFiles,
 		onFileDelete,
+		onFilesDrop,
 		openFilePicker
 	}), [
 		disabledResolved,
 		invalid,
 		acceptedFiles,
 		onFileDelete,
+		onFilesDrop,
 		openFilePicker
 	]);
 	return /* @__PURE__ */ jsx(FileFieldProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsxs("div", {
-			className: "w-full",
+			className: file_field_module_default.root,
 			children: [/* @__PURE__ */ jsx("input", {
 				...rest,
+				accept,
 				"aria-invalid": invalid,
-				className: "sr-only",
+				className: sr_only_module_default.srOnly,
 				disabled: disabledResolved,
 				id: rest.id ?? generatedId,
 				multiple,
@@ -88,12 +141,52 @@ const Trigger = ({ renderItem }) => {
 		invalid: context.invalid
 	});
 };
+const Dropzone = ({ children }) => {
+	const messages = getMessages();
+	const { disabled, invalid, onFilesDrop, openFilePicker } = useFileFieldContext();
+	const [depth, setDepth] = useState(0);
+	const isDragging = depth > 0 && !disabled;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx(file_field_module_default.dropzone, invalid && file_field_module_default.invalid, isDragging && file_field_module_default.dragging, disabled && file_field_module_default.disabled),
+		"data-dragging": isDragging ? "" : void 0,
+		onDragEnter: (event) => {
+			if (!carriesFiles(event.dataTransfer)) return;
+			event.preventDefault();
+			setDepth((current) => current + 1);
+		},
+		onDragLeave: (event) => {
+			if (!carriesFiles(event.dataTransfer)) return;
+			setDepth((current) => Math.max(current - 1, 0));
+		},
+		onDragOver: (event) => {
+			if (!carriesFiles(event.dataTransfer)) return;
+			event.preventDefault();
+			event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+		},
+		onDrop: (event) => {
+			if (!carriesFiles(event.dataTransfer)) return;
+			event.preventDefault();
+			setDepth(0);
+			if (!disabled) onFilesDrop(droppedFiles(event.dataTransfer));
+		},
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+			className: file_field_module_default.hint,
+			children: messages.fileFieldDrop
+		}), /* @__PURE__ */ jsx(Button, {
+			disabled,
+			onClick: openFilePicker,
+			size: "sm",
+			variant: "outline",
+			children: messages.fileFieldTrigger
+		})] })
+	});
+};
 const ItemList = ({ showWebkitRelativePath, clearable }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const { acceptedFiles, onFileDelete } = useFileFieldContext();
 	if (acceptedFiles.length === 0) return null;
 	return /* @__PURE__ */ jsx("ul", {
-		className: "mt-2 space-y-2",
+		className: file_field_module_default.list,
 		children: acceptedFiles.map((acceptedFile) => {
 			const { file, id } = acceptedFile;
 			const onDelete = () => {
@@ -101,14 +194,14 @@ const ItemList = ({ showWebkitRelativePath, clearable }) => {
 			};
 			const sizeInKB = (file.size / 1024).toFixed(2);
 			return /* @__PURE__ */ jsxs("li", {
-				className: "border-border-base bg-bg-base flex items-center justify-between rounded-xl border px-3 py-2",
+				className: file_field_module_default.item,
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-1",
+					className: file_field_module_default.meta,
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "text-fg-base text-sm font-medium",
+						className: file_field_module_default.name,
 						children: showWebkitRelativePath === true ? file.webkitRelativePath : file.name
 					}), /* @__PURE__ */ jsxs("span", {
-						className: "text-fg-mute text-xs",
+						className: file_field_module_default.size,
 						children: [sizeInKB, " KB"]
 					})]
 				}), clearable === true && /* @__PURE__ */ jsx(IconButton, {
@@ -121,4 +214,4 @@ const ItemList = ({ showWebkitRelativePath, clearable }) => {
 	});
 };
 //#endregion
-export { ItemList, Root, Trigger };
+export { Dropzone, ItemList, Root, Trigger };

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

@@ -0,0 +1,17 @@
+import './file-field.css';
+//#region src/components/form/file-field/file-field.module.css
+var file_field_module_default = {
+	"disabled": "PPBdPq_disabled",
+	"dragging": "PPBdPq_dragging",
+	"dropzone": "PPBdPq_dropzone",
+	"hint": "PPBdPq_hint",
+	"invalid": "PPBdPq_invalid",
+	"item": "PPBdPq_item",
+	"list": "PPBdPq_list",
+	"meta": "PPBdPq_meta",
+	"name": "PPBdPq_name",
+	"root": "PPBdPq_root",
+	"size": "PPBdPq_size"
+};
+//#endregion
+export { file_field_module_default as default };

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

@@ -1,6 +1,6 @@
 import { Root } from "./file-field.mjs";
 //#region src/components/form/file-field/index.d.ts
-declare const FileField: {
+export declare const FileField: {
   readonly Root: typeof Root;
   readonly Trigger: import("react").FC<{
     renderItem: (props: {
@@ -9,10 +9,12 @@ declare const FileField: {
       invalid: boolean;
     }) => import("react").ReactElement;
   }>;
+  readonly Dropzone: import("react").FC<{
+    children?: import("react").ReactNode;
+  }>;
   readonly ItemList: import("react").FC<{
     showWebkitRelativePath?: boolean;
     clearable?: boolean;
   }>;
 };
-//#endregion
-export { FileField };
+//#endregion

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

@@ -1,8 +1,9 @@
-import { ItemList, Root, Trigger } from "./file-field.mjs";
+import { Dropzone, ItemList, Root, Trigger } from "./file-field.mjs";
 //#region src/components/form/file-field/index.ts
 const FileField = {
 	Root,
 	Trigger,
+	Dropzone,
 	ItemList
 };
 //#endregion

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

@@ -0,0 +1,11 @@
+@layer properties, theme, base;
+
+@layer components {
+  .LLU8LW_root {
+    gap: calc(var(--spacing) * 6);
+    flex-direction: column;
+    display: flex;
+  }
+}
+
+@layer utilities;

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

@@ -1,9 +1,10 @@
-import { FC, FormHTMLAttributes, ReactNode } from "react";
+import { FC, FormHTMLAttributes, ReactNode, Ref } from "react";
 //#region src/components/form/form/form.d.ts
 type Props = {
   action?: ((formData: FormData) => void | Promise<void>) | string;
   children: ReactNode;
+  ref?: Ref<HTMLFormElement>;
 } & Omit<FormHTMLAttributes<HTMLFormElement>, 'action' | 'children' | 'className' | 'style'>;
-declare const Form: FC<Props>;
+export declare const Form: FC<Props>;
 //#endregion
-export { Form };
+export {};

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

@@ -1,9 +1,10 @@
 "use client";
+import form_module_default from "./form.module.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/form/form/form.tsx
 const Form = ({ action, children, ...rest }) => /* @__PURE__ */ jsx("form", {
 	action,
-	className: "flex flex-col gap-6",
+	className: form_module_default.root,
 	...rest,
 	children
 });

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

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

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

@@ -1,2 +1 @@
-import { Form } from "./form.mjs";
-export { Form };
+export { Form } from "./form.mjs";

package/dist/components/form/form-control/form-control.css

@@ -0,0 +1,43 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._8KGDqG_root {
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    display: flex;
+  }
+
+  ._8KGDqG_label {
+    gap: calc(var(--spacing) * 2);
+    margin-bottom: calc(var(--spacing) * 1);
+    padding-left: calc(var(--spacing) * .5);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-md);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-fg-base);
+    display: flex;
+  }
+
+  ._8KGDqG_required {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-fg-error);
+  }
+
+  ._8KGDqG_message {
+    margin-top: calc(var(--spacing) * 1);
+    padding-left: calc(var(--spacing) * .5);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  ._8KGDqG_error {
+    color: var(--color-fg-error);
+  }
+
+  ._8KGDqG_help {
+    color: var(--color-fg-mute);
+  }
+}
+
+@layer utilities;

package/dist/components/form/form-control/form-control.d.mts

@@ -18,6 +18,6 @@ type FormControlProps = {
   }) => ReactElement;
   ref?: Ref<HTMLElement>;
 } & Omit<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'children'>;
-declare const FormControl: FC<FormControlProps>;
+export declare const FormControl: FC<FormControlProps>;
 //#endregion
-export { FormControl };
+export {};

package/dist/components/form/form-control/form-control.mjs

@@ -1,28 +1,29 @@
 "use client";
-import { useMessages } from "../../../i18n/context.mjs";
+import { getMessages } from "../../../i18n/current.mjs";
+import form_control_module_default from "./form-control.module.mjs";
+import { clsx } from "clsx";
 import { useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/form-control/form-control.tsx
-const LABEL_CLASS = "text-fg-base text-md mb-1 flex gap-2 pl-0.5 font-bold";
 const FormControl = ({ disabled = false, invalid = false, required = false, label, labelAs = "label", helpText, errorText, renderInput, ref, ...rest }) => {
-	const messages = useMessages();
+	const messages = getMessages();
 	const id = useId();
 	const hasErrorText = errorText !== void 0 && errorText !== "";
 	const hasHelpText = helpText !== void 0 && helpText !== "";
 	const describedbyId = invalid && hasErrorText ? `${id}-feedback` : hasHelpText ? `${id}-helptext` : void 0;
 	const labelId = `${id}-label`;
 	const labelContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [label, required && /* @__PURE__ */ jsx("span", {
-		className: "text-fg-error font-medium",
+		className: form_control_module_default.required,
 		children: messages.required
 	})] });
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		labelAs === "label" ? /* @__PURE__ */ jsx("label", {
-			className: LABEL_CLASS,
+			className: form_control_module_default.label,
 			htmlFor: id,
 			id: labelId,
 			children: labelContent
 		}) : /* @__PURE__ */ jsx("legend", {
-			className: LABEL_CLASS,
+			className: form_control_module_default.label,
 			id: labelId,
 			children: labelContent
 		}),
@@ -36,23 +37,23 @@ const FormControl = ({ disabled = false, invalid = false, required = false, labe
 		}),
 		invalid && hasErrorText ? /* @__PURE__ */ jsx("p", {
 			"aria-live": "polite",
-			className: "text-fg-error mt-1 pl-0.5 text-sm",
+			className: clsx(form_control_module_default.message, form_control_module_default.error),
 			id: `${id}-feedback`,
 			children: errorText
 		}) : hasHelpText ? /* @__PURE__ */ jsx("p", {
-			className: "text-fg-mute mt-1 pl-0.5 text-sm",
+			className: clsx(form_control_module_default.message, form_control_module_default.help),
 			id: `${id}-helptext`,
 			children: helpText
 		}) : null
 	] });
 	return labelAs === "legend" ? /* @__PURE__ */ jsx("fieldset", {
 		...rest,
-		className: "flex w-full min-w-0 flex-col",
+		className: form_control_module_default.root,
 		ref,
 		children: content
 	}) : /* @__PURE__ */ jsx("div", {
 		...rest,
-		className: "flex w-full min-w-0 flex-col",
+		className: form_control_module_default.root,
 		ref,
 		children: content
 	});

package/dist/components/form/form-control/form-control.module.mjs

@@ -0,0 +1,12 @@
+import './form-control.css';
+//#region src/components/form/form-control/form-control.module.css
+var form_control_module_default = {
+	"error": "_8KGDqG_error",
+	"help": "_8KGDqG_help",
+	"label": "_8KGDqG_label",
+	"message": "_8KGDqG_message",
+	"required": "_8KGDqG_required",
+	"root": "_8KGDqG_root"
+};
+//#endregion
+export { form_control_module_default as default };

package/dist/components/form/form-control/index.mjs

@@ -1,2 +1 @@
-import { FormControl } from "./form-control.mjs";
-export { FormControl };
+export { FormControl } from "./form-control.mjs";

package/dist/components/form/number-field/cast.d.mts

@@ -1,4 +1,3 @@
 //#region src/components/form/number-field/cast.d.ts
-declare const cast: (value: string, step: number, precision?: number) => number;
-//#endregion
-export { cast };
+export declare const cast: (value: string, precision: number | undefined) => number | null;
+//#endregion

package/dist/components/form/number-field/cast.mjs

@@ -4,29 +4,10 @@ const FLOATING_POINT_REGEX = /^[Ee0-9+\-.]$/u;
 const isInvalidCharacter = (value) => FLOATING_POINT_REGEX.test(value);
 const sanitize = (value) => value.split("").filter((char) => isInvalidCharacter(char)).join("");
 const parse = (value) => Number.parseFloat(value.toString().replaceAll(/[^\w.-]+/gu, ""));
-const countDecimalPlaces = (value) => {
-	if (!Number.isFinite(value)) return 0;
-	let e = 1;
-	let p = 0;
-	while (Math.round(value * e) / e !== value) {
-		e *= 10;
-		p += 1;
-	}
-	return p;
-};
-const cast = (value, step, precision) => {
+const cast = (value, precision) => {
 	const parsedValue = parse(sanitize(value));
-	if (Number.isNaN(parsedValue)) return 0;
-	const decimalPlaces = Math.max(countDecimalPlaces(step), countDecimalPlaces(parsedValue));
-	return toPrecision(parsedValue, precision ?? decimalPlaces);
+	if (Number.isNaN(parsedValue)) return null;
+	return toPrecision(parsedValue, precision);
 };
-if (import.meta.vitest) it("文字を数値に変換する", () => {
-	expect(cast("1", 1)).toBe(1);
-	expect(cast("1.1", 1)).toBe(1.1);
-	expect(cast("1.1.1", 1)).toBe(1.1);
-	expect(cast("1.1.1", 2)).toBe(1.1);
-	expect(cast("1e4", 3)).toBe(1e4);
-	expect(cast("-19", 3)).toBe(-19);
-});
 //#endregion
 export { cast };

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

@@ -1,2 +1 @@
-import { NumberField } from "./number-field.mjs";
-export { NumberField };
+export { NumberField } from "./number-field.mjs";