@k8ordo/ui 1.0.0

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

@@ -0,0 +1,59 @@
+"use client";
+import { FOCUS_RING_PEER } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { CheckIcon } from "../../icons/lucide.mjs";
+import { useCheckboxGroupContext } from "../checkbox-group/checkbox-group.mjs";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/checkbox/checkbox.tsx
+const Checkbox = ({ name, itemValue, disabled = false, label, checked, defaultChecked, onChange, ref, ...rest }) => {
+	const groupContext = useCheckboxGroupContext();
+	const { pending } = useFormStatus();
+	const [internalChecked, setInternalChecked] = useControllableState({
+		value: checked,
+		defaultValue: defaultChecked ?? false
+	});
+	const groupItemValue = itemValue ?? "";
+	if (groupContext && (itemValue === void 0 || itemValue === "")) throw new Error("Checkbox inside CheckboxGroup requires itemValue");
+	const isControlled = checked !== void 0;
+	const disabledResolved = disabled || groupContext?.disabled === true || pending;
+	const isChecked = groupContext ? groupContext.currentValue.includes(groupItemValue) : internalChecked;
+	const setChecked = (nextChecked, event) => {
+		setInternalChecked(nextChecked);
+		onChange?.(nextChecked, event);
+	};
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("inline-flex items-center gap-2 text-left", disabledResolved ? "cursor-not-allowed text-fg-mute" : "cursor-pointer"),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...rest,
+				...groupContext || isControlled ? { checked: isChecked } : { defaultChecked },
+				className: "peer sr-only",
+				disabled: disabledResolved,
+				name: groupContext?.name ?? name,
+				onChange: (event) => {
+					if (groupContext) {
+						groupContext.toggleValue(groupItemValue);
+						return;
+					}
+					setChecked(event.target.checked, event);
+				},
+				ref,
+				type: "checkbox",
+				value: groupContext ? groupItemValue : void 0
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn("inline-flex size-5 items-center justify-center rounded-md border-2 transition-colors", FOCUS_RING_PEER, disabledResolved && "border-border-mute bg-bg-mute", isChecked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base"),
+				children: isChecked ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : null
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-lg",
+				children: label
+			})
+		]
+	});
+};
+//#endregion
+export { Checkbox };

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

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

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

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

package/dist/components/form/checkbox-card/checkbox-card.d.mts

@@ -0,0 +1,29 @@
+import { FC, FieldsetHTMLAttributes, ReactNode, Ref } from "react";
+//#region src/components/form/checkbox-card/checkbox-card.d.ts
+type CheckboxCardOption = Readonly<{
+  value: string;
+  label: string;
+  description?: string;
+  visual?: ReactNode;
+  disabled?: boolean;
+}>;
+type BaseProps = {
+  'aria-labelledby': string;
+  invalid?: boolean;
+  options: readonly CheckboxCardOption[];
+  ref?: Ref<HTMLFieldSetElement>;
+} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className' | 'style' | 'children' | 'onChange' | 'defaultValue' | 'aria-labelledby' | 'role'>;
+type ControlledProps = {
+  value: string[];
+  onChange: (value: string[]) => void;
+  defaultValue?: never;
+};
+type UncontrolledProps = {
+  defaultValue?: string[];
+  value?: never;
+  onChange?: (value: string[]) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
+declare const CheckboxCard: FC<Props>;
+//#endregion
+export { CheckboxCard, CheckboxCardOption };

package/dist/components/form/checkbox-card/checkbox-card.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { CheckIcon } from "../../icons/lucide.mjs";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/checkbox-card/checkbox-card.tsx
+const CheckboxCard = ({ "aria-labelledby": labelledbyId, name, disabled = false, invalid = false, options, value, defaultValue, onChange, ref, ...rest }) => {
+	const groupId = useId();
+	const [selectedValues, setSelectedValues] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange
+	});
+	const handleToggle = (nextValue, checked) => {
+		const nextValues = checked ? [...selectedValues, nextValue] : selectedValues.filter((item) => item !== nextValue);
+		setSelectedValues(nextValues);
+	};
+	return /* @__PURE__ */ jsx("fieldset", {
+		...rest,
+		"aria-labelledby": labelledbyId,
+		className: cn("m-0 min-w-0 border-0 p-0 inline-full", "grid gap-3", disabled && "opacity-70"),
+		ref,
+		role: "group",
+		children: options.map((option) => {
+			const checked = selectedValues.includes(option.value);
+			const optionDisabled = disabled || option.disabled === true;
+			const hasDescription = option.description !== void 0 && option.description !== "";
+			const hasVisual = option.visual !== void 0 && option.visual !== null;
+			const optionId = `${groupId}-${option.value}`;
+			return /* @__PURE__ */ jsxs("label", {
+				className: cn("flex min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors inline-full", "has-[input:focus-visible]:outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-border-info", checked && "border-primary-border bg-primary-bg-subtle hover:bg-primary-bg-mute", invalid ? "border-border-error" : !checked && "border-border-mute hover:bg-bg-subtle", optionDisabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
+				id: optionId,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						"aria-describedby": hasDescription ? `${optionId}-description` : void 0,
+						"aria-labelledby": `${optionId}-label`,
+						checked,
+						className: "sr-only",
+						disabled: optionDisabled,
+						name,
+						onChange: (event) => {
+							handleToggle(option.value, event.target.checked);
+						},
+						type: "checkbox",
+						value: option.value
+					}),
+					hasVisual ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "mr-4 shrink-0",
+						children: option.visual
+					}) : null,
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-fg-base font-medium",
+							id: `${optionId}-label`,
+							children: option.label
+						}), hasDescription ? /* @__PURE__ */ jsx("span", {
+							className: "text-fg-mute text-sm",
+							id: `${optionId}-description`,
+							children: option.description
+						}) : null]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("mt-0.5 ml-4 inline-flex size-5 shrink-0 items-center justify-center rounded-md border", checked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base text-transparent"),
+						children: /* @__PURE__ */ jsx(CheckIcon, { size: "sm" })
+					})
+				]
+			}, option.value);
+		})
+	});
+};
+//#endregion
+export { CheckboxCard };

package/dist/components/form/checkbox-card/index.d.mts

@@ -0,0 +1,2 @@
+import { CheckboxCard, CheckboxCardOption } from "./checkbox-card.mjs";
+export { CheckboxCard, type CheckboxCardOption };

package/dist/components/form/checkbox-card/index.mjs

@@ -0,0 +1,2 @@
+import { CheckboxCard } from "./checkbox-card.mjs";
+export { CheckboxCard };

package/dist/components/form/checkbox-group/checkbox-group.d.mts

@@ -0,0 +1,29 @@
+import { FC, FieldsetHTMLAttributes, PropsWithChildren, Ref } from "react";
+//#region src/components/form/checkbox-group/checkbox-group.d.ts
+type CheckboxGroupContextValue = {
+  currentValue: string[];
+  disabled: boolean;
+  name: string;
+  toggleValue: (value: string) => void;
+};
+declare const useCheckboxGroupContext: () => CheckboxGroupContextValue | undefined;
+type RootBaseProps = PropsWithChildren<{
+  'aria-labelledby': string;
+  invalid?: boolean;
+  name: string;
+  ref?: Ref<HTMLFieldSetElement>;
+} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className' | 'style' | 'onChange' | 'defaultValue' | 'name' | 'aria-labelledby' | 'role'>>;
+type RootControlledProps = {
+  value: string[];
+  onChange: (value: string[]) => void;
+  defaultValue?: never;
+};
+type RootUncontrolledProps = {
+  defaultValue?: string[];
+  value?: never;
+  onChange?: (value: string[]) => void;
+};
+type RootProps = RootBaseProps & (RootControlledProps | RootUncontrolledProps);
+declare const Root: FC<RootProps>;
+//#endregion
+export { Root as CheckboxGroupRoot, useCheckboxGroupContext };

package/dist/components/form/checkbox-group/checkbox-group.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { createContext, use, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/form/checkbox-group/checkbox-group.tsx
+const CheckboxGroupContext = createContext(void 0);
+const useCheckboxGroupContext = () => use(CheckboxGroupContext);
+const Root = ({ "aria-labelledby": labelledbyId, children, defaultValue, disabled = false, invalid = false, name, onChange, ref, value, ...rest }) => {
+	const [currentValue, setCurrentValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange
+	});
+	const toggleValue = useCallback((targetValue) => {
+		const nextValue = currentValue.includes(targetValue) ? currentValue.filter((item) => item !== targetValue) : [...currentValue, targetValue];
+		setCurrentValue(nextValue);
+	}, [currentValue, setCurrentValue]);
+	const contextValue = useMemo(() => ({
+		currentValue,
+		disabled,
+		name,
+		toggleValue
+	}), [
+		currentValue,
+		disabled,
+		name,
+		toggleValue
+	]);
+	return /* @__PURE__ */ jsx("fieldset", {
+		...rest,
+		"aria-invalid": invalid,
+		"aria-labelledby": labelledbyId,
+		className: cn("flex flex-col gap-2", disabled && "cursor-not-allowed"),
+		ref,
+		children: /* @__PURE__ */ jsx(CheckboxGroupContext, {
+			value: contextValue,
+			children
+		})
+	});
+};
+//#endregion
+export { Root as CheckboxGroupRoot, useCheckboxGroupContext };

package/dist/components/form/checkbox-group/index.d.mts

@@ -0,0 +1,34 @@
+//#region src/components/form/checkbox-group/index.d.ts
+declare const CheckboxGroup: {
+  readonly Root: import("react").FC<{
+    'aria-labelledby': string;
+    invalid?: boolean;
+    name: string;
+    ref?: import("react").Ref<HTMLFieldSetElement>;
+  } & Omit<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, "aria-labelledby" | "className" | "defaultValue" | "name" | "onChange" | "role" | "style"> & {
+    children?: import("react").ReactNode | undefined;
+  } & ({
+    value: string[];
+    onChange: (value: string[]) => void;
+    defaultValue?: never;
+  } | {
+    defaultValue?: string[];
+    value?: never;
+    onChange?: (value: string[]) => void;
+  })>;
+  readonly Item: import("react").FC<{
+    itemValue?: string;
+    label: string;
+    ref?: import("react").Ref<HTMLInputElement>;
+  } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "checked" | "children" | "className" | "defaultChecked" | "onChange" | "style" | "type" | "value"> & ({
+    checked: boolean;
+    onChange: (checked: boolean, event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    defaultChecked?: never;
+  } | {
+    defaultChecked?: boolean;
+    checked?: never;
+    onChange?: (checked: boolean, event: import("react").ChangeEvent<HTMLInputElement>) => void;
+  })>;
+};
+//#endregion
+export { CheckboxGroup };

package/dist/components/form/checkbox-group/index.mjs

@@ -0,0 +1,9 @@
+import { CheckboxGroupRoot as Root } from "./checkbox-group.mjs";
+import { Checkbox } from "../checkbox/checkbox.mjs";
+//#region src/components/form/checkbox-group/index.ts
+const CheckboxGroup = {
+	Root,
+	Item: Checkbox
+};
+//#endregion
+export { CheckboxGroup };

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

@@ -0,0 +1,27 @@
+import { ChangeEvent, FC, InputHTMLAttributes, PropsWithChildren, ReactElement, Ref } from "react";
+//#region src/components/form/file-field/file-field.d.ts
+type RootProps = PropsWithChildren<{
+  invalid?: boolean;
+  maxFiles?: number;
+  defaultValue?: File[];
+  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 FileField: {
+  readonly Root: typeof Root;
+  readonly Trigger: FC<{
+    renderItem: (props: {
+      onClick: () => void;
+      disabled: boolean;
+      invalid: boolean;
+    }) => ReactElement;
+  }>;
+  readonly ItemList: FC<{
+    showWebkitRelativePath?: boolean;
+    clearable?: boolean;
+  }>;
+};
+//#endregion
+export { FileField };

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

@@ -0,0 +1,129 @@
+"use client";
+import { useMessages } from "../../../i18n/context.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { useFormStatus } from "react-dom";
+import { 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 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);
+	}, [
+		acceptedFiles,
+		multiple,
+		maxFiles,
+		onChange,
+		webkitDirectory
+	]);
+	const onFileDelete = useCallback((fileId) => {
+		const updatedFiles = acceptedFiles.filter((f) => f.id !== fileId);
+		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]);
+	const openFilePicker = useCallback(() => {
+		inputRef.current?.click();
+	}, []);
+	const contextValue = useMemo(() => ({
+		disabled: disabledResolved,
+		invalid,
+		acceptedFiles,
+		onFileDelete,
+		openFilePicker
+	}), [
+		disabledResolved,
+		invalid,
+		acceptedFiles,
+		onFileDelete,
+		openFilePicker
+	]);
+	return /* @__PURE__ */ jsx(FileFieldProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx("input", {
+				...rest,
+				"aria-invalid": invalid,
+				className: "sr-only",
+				disabled: disabledResolved,
+				id: rest.id ?? generatedId,
+				multiple,
+				onChange: onFilesChange,
+				ref: mergedRef,
+				required,
+				type: "file",
+				webkitdirectory: webkitDirectory ? "true" : void 0
+			}), children]
+		})
+	});
+};
+const Trigger = ({ renderItem }) => {
+	const context = useFileFieldContext();
+	return renderItem({
+		onClick: context.openFilePicker,
+		disabled: context.disabled,
+		invalid: context.invalid
+	});
+};
+const ItemList = ({ showWebkitRelativePath, clearable }) => {
+	const messages = useMessages();
+	const { acceptedFiles, onFileDelete } = useFileFieldContext();
+	if (acceptedFiles.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: "mt-2 space-y-2",
+		children: acceptedFiles.map((acceptedFile) => {
+			const { file, id } = acceptedFile;
+			const onDelete = () => {
+				onFileDelete(id);
+			};
+			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",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-fg-base text-sm font-medium",
+						children: showWebkitRelativePath === true ? file.webkitRelativePath : file.name
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "text-fg-mute text-xs",
+						children: [sizeInKB, " KB"]
+					})]
+				}), clearable === true && /* @__PURE__ */ jsx(IconButton, {
+					label: messages.fileFieldRemove,
+					onClick: onDelete,
+					children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+				})]
+			}, id);
+		})
+	});
+};
+const FileField = {
+	Root,
+	Trigger,
+	ItemList
+};
+//#endregion
+export { FileField };

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+"use client";
+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",
+	...rest,
+	children
+});
+//#endregion
+export { Form };

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { FC, HTMLAttributes, ReactElement, Ref } from "react";
+//#region src/components/form/form-control/form-control.d.ts
+type FormControlProps = {
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  label: string;
+  labelAs?: 'label' | 'legend';
+  helpText?: string;
+  errorText?: string | undefined;
+  renderInput: (props: {
+    id: string;
+    'aria-describedby': string | undefined;
+    'aria-labelledby': string;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean;
+  }) => ReactElement;
+  ref?: Ref<HTMLElement>;
+} & Omit<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'children'>;
+declare const FormControl: FC<FormControlProps>;
+//#endregion
+export { FormControl };

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

@@ -0,0 +1,61 @@
+"use client";
+import { useMessages } from "../../../i18n/context.mjs";
+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 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",
+		children: messages.required
+	})] });
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		labelAs === "label" ? /* @__PURE__ */ jsx("label", {
+			className: LABEL_CLASS,
+			htmlFor: id,
+			id: labelId,
+			children: labelContent
+		}) : /* @__PURE__ */ jsx("legend", {
+			className: LABEL_CLASS,
+			id: labelId,
+			children: labelContent
+		}),
+		renderInput({
+			id,
+			"aria-describedby": describedbyId,
+			"aria-labelledby": labelId,
+			disabled,
+			invalid,
+			required
+		}),
+		invalid && hasErrorText ? /* @__PURE__ */ jsx("p", {
+			"aria-live": "polite",
+			className: "text-fg-error mt-1 pl-0.5 text-sm",
+			id: `${id}-feedback`,
+			children: errorText
+		}) : hasHelpText ? /* @__PURE__ */ jsx("p", {
+			className: "text-fg-mute mt-1 pl-0.5 text-sm",
+			id: `${id}-helptext`,
+			children: helpText
+		}) : null
+	] });
+	return labelAs === "legend" ? /* @__PURE__ */ jsx("fieldset", {
+		...rest,
+		className: "flex w-full min-w-0 flex-col",
+		ref,
+		children: content
+	}) : /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: "flex w-full min-w-0 flex-col",
+		ref,
+		children: content
+	});
+};
+//#endregion
+export { FormControl };

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { toPrecision } from "../../../internal/to-precision.mjs";
+//#region src/components/form/number-field/cast.ts
+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 parsedValue = parse(sanitize(value));
+	if (Number.isNaN(parsedValue)) return 0;
+	const decimalPlaces = Math.max(countDecimalPlaces(step), countDecimalPlaces(parsedValue));
+	return toPrecision(parsedValue, precision ?? decimalPlaces);
+};
+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.d.mts

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

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

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