@lt-three/love3 0.0.0 → 0.1.0

package/dist/web/base/textarea.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/web/base/textarea.d.ts
+declare const textareaVariants: (props?: ({
+  variant?: "<3" | "block" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Textarea({ className, variant, ...props }: React.ComponentProps<"textarea"> & VariantProps<typeof textareaVariants>): React.JSX.Element;
+//#endregion
+export { Textarea, textareaVariants };

package/dist/web/base/textarea.js

@@ -0,0 +1,23 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/web/base/textarea.tsx
+const textareaVariants = cva("field-sizing-content placeholder:text-muted-foreground w-full outline-none disabled:cursor-not-allowed disabled:opacity-50", {
+	variants: { variant: {
+		default: "border-input flex min-h-20 rounded-control border bg-card px-2.5 py-1.5 text-base transition-[border-color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/25 aria-invalid:border-destructive md:text-[13px]",
+		"<3": "min-h-0 resize-none border-0 border-b border-dashed border-border bg-transparent px-0 py-0.5 text-xs focus-visible:border-solid focus-visible:border-ring",
+		block: "min-h-0 resize-none border-0 bg-transparent px-1 py-0.5 text-sm leading-relaxed hover:bg-wash focus-visible:bg-wash"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Textarea({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn(textareaVariants({ variant }), className),
+		...props
+	});
+}
+
+//#endregion
+export { Textarea, textareaVariants };

package/dist/web/base/tooltip.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+//#region src/web/base/tooltip.d.ts
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/web/base/tooltip.js

@@ -0,0 +1,36 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+//#region src/web/base/tooltip.tsx
+function TooltipProvider({ delayDuration = 0, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+		"data-slot": "tooltip-provider",
+		delayDuration,
+		...props
+	});
+}
+function Tooltip({ ...props }) {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
+		"data-slot": "tooltip",
+		...props
+	}) });
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+		"data-slot": "tooltip-content",
+		sideOffset,
+		className: cn("bg-popover text-popover-foreground border border-border shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-control px-2.5 py-1 text-xs text-balance", className),
+		...props,
+		children
+	}) });
+}
+
+//#endregion
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/web/form/checkbox.d.ts

@@ -0,0 +1,35 @@
+import { BaseInputProps } from "../../shared/form.js";
+import { Checkbox as Checkbox$1 } from "../base/checkbox.js";
+import "../lib/form.js";
+import React, { ComponentProps } from "react";
+//#region src/web/form/checkbox.d.ts
+/**
+ * チェックボックスの名前。次のどれかが要る（名前の無いチェックボックスにしない）。
+ * - `checkboxLabel`: 右に出す文字（押すと切り替わる）
+ * - `label`: 上に出すフィールドのラベル（単体のチェックボックスで、右に文字を置かないとき。ラベルが名前になる）
+ * - `aria-label` / `aria-labelledby`: 見えるラベルが無いとき（表の行の選択など）
+ */
+type CheckboxNameProps = {
+  checkboxLabel: React.ReactNode;
+} | {
+  checkboxLabel?: undefined;
+  label: React.ReactNode;
+} | {
+  checkboxLabel?: undefined;
+  "aria-label": string;
+} | {
+  checkboxLabel?: undefined;
+  "aria-labelledby": string;
+};
+export type CheckboxProps = BaseInputProps<boolean> & Omit<ComponentProps<typeof Checkbox$1>, "checked" | "onCheckedChange" | "value" | "onChange"> & {
+  /** チェックボックスとラベルの垂直配置 */
+  align?: "center" | "start";
+} & CheckboxNameProps;
+/**
+ * Form / 制御の双方向対応の Checkbox。
+ * - `value` / `onValueChange` を渡すと制御モード (内部で `atom/checkbox` を使う)
+ * - 省略すると field context から取得する
+ */
+export declare function Checkbox(props: CheckboxProps): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/form/checkbox.js

@@ -0,0 +1,91 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Checkbox as Checkbox$1 } from "../base/checkbox.js";
+import { Label } from "../base/label.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/checkbox.tsx
+/**
+* Form / 制御の双方向対応の Checkbox。
+* - `value` / `onValueChange` を渡すと制御モード (内部で `atom/checkbox` を使う)
+* - 省略すると field context から取得する
+*/
+function Checkbox(props) {
+	if (props.value !== void 0 && props.onValueChange !== void 0) return /* @__PURE__ */ jsx(ControlledCheckbox, {
+		...props,
+		value: props.value,
+		onValueChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(FieldCheckbox, { ...props });
+}
+function ControlledCheckbox({ label, required, helpText, description, className, checkboxLabel, align = "center", wrapperClassName, disabled, value, onValueChange, ...rest }) {
+	return /* @__PURE__ */ jsx(Layout, {
+		label,
+		required,
+		helpText,
+		description,
+		className,
+		checkboxLabel,
+		align,
+		wrapperClassName,
+		disabled,
+		checked: value,
+		onCheckedChange: onValueChange,
+		rest
+	});
+}
+function FieldCheckbox({ label, required, helpText, description, debounce, className, checkboxLabel, align = "center", wrapperClassName, disabled, ...rest }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsx(Layout, {
+		label,
+		required,
+		helpText,
+		description,
+		className,
+		checkboxLabel,
+		align,
+		wrapperClassName,
+		disabled,
+		checked: value ?? false,
+		onCheckedChange: setValue,
+		rest
+	});
+}
+function Layout({ label, required, helpText, description, className, checkboxLabel, align, wrapperClassName, disabled, checked, onCheckedChange, rest }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex gap-3", align === "start" ? "items-start" : "items-center"),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "inline-flex items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Checkbox$1, {
+						...checkboxLabel === void 0 ? {} : { id },
+						checked,
+						onCheckedChange: (next) => onCheckedChange(next === true),
+						disabled,
+						className,
+						...rest
+					}) }), checkboxLabel === void 0 ? null : /* @__PURE__ */ jsx(Label, {
+						htmlFor: id,
+						className: "cursor-pointer",
+						children: checkboxLabel
+					})]
+				})
+			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Checkbox };

package/dist/web/form/radio-group.d.ts

@@ -0,0 +1,24 @@
+import { FieldInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+import React from "react";
+//#region src/web/form/radio-group.d.ts
+type Option = {
+  value: string;
+  label: string;
+  content?: React.ReactNode;
+};
+export type RadioGroupProps = FieldInputProps & {
+  options: Option[];
+} & ({
+  type: "list";
+  full?: never;
+} | {
+  type: "box";
+  full?: boolean;
+} | {
+  type?: never;
+  full?: boolean;
+});
+export declare function RadioGroup({ label, description, required, helpText, ...rest }: RadioGroupProps): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/form/radio-group.js

@@ -0,0 +1,75 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Label } from "../base/label.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, useFormField } from "../base/form.js";
+import { RadioGroup as RadioGroup$1, RadioGroupItem } from "../base/radio-group.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/radio-group.tsx
+function RadioGroup({ label, description, required, helpText, ...rest }) {
+	return /* @__PURE__ */ jsxs(FormItem, { children: [
+		label && /* @__PURE__ */ jsx(FormLabel, {
+			required,
+			helpText,
+			children: label
+		}),
+		/* @__PURE__ */ jsx(RadioGroupBody, {
+			hasLabel: Boolean(label),
+			...rest
+		}),
+		description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+		/* @__PURE__ */ jsx(FormMessage, {})
+	] });
+}
+/**
+* 選択肢の入れ物。FormItem の中（ラベルと同じ context）で描くので、ラベルの id を読める。
+* グループ自身が `formItemId`（ラベルの `htmlFor` の行き先）を持ち、`aria-labelledby` でラベルを名前にする。
+* 各選択肢の入力欄は FormControl に自分の id を渡す（同じ field に control が複数あるので、formItemId を使い回すと重複する）。
+*/
+function RadioGroupBody({ hasLabel, options, disabled, debounce, className, full, type = "list" }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	const { formItemId, formLabelId } = useFormField();
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		id: formItemId,
+		"aria-labelledby": hasLabel ? formLabelId : void 0,
+		onValueChange: (next) => setValue(next),
+		value,
+		className: cn(type === "box" && "flex flex-wrap gap-2", className),
+		disabled,
+		children: options.map((option) => /* @__PURE__ */ jsx(RadioOption, {
+			option,
+			type,
+			full
+		}, option.value))
+	});
+}
+function RadioOption({ option, type, full }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs(Label, {
+		className: cn("cursor-pointer hover:bg-accent/50 grid grid-cols-[min-content_1fr] p-1 gap-y-0 rounded-control px-3", type === "box" && "border py-0 px-3 h-fit", option.content && "pb-3", full && "grow"),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cn("h-9 flex items-center"),
+				children: /* @__PURE__ */ jsx(FormControl, {
+					id,
+					children: /* @__PURE__ */ jsx(RadioGroupItem, {
+						className: cn("cursor-pointer"),
+						value: option.value
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: cn("text-sm leading-none font-medium"),
+				children: option.label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("flex gap-2", type === "box" && "col-span-full  flex-col", type === "list" && "col-start-2"),
+				children: option.content
+			})
+		]
+	});
+}
+
+//#endregion
+export { RadioGroup };

package/dist/web/form/select.d.ts

@@ -0,0 +1,16 @@
+import { FieldInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+//#region src/web/form/select.d.ts
+export type SelectOption = {
+  value: string;
+  label: string;
+};
+export type SelectOptionGroup = {
+  label: string;
+  options: SelectOption[];
+};
+export type SelectProps = FieldInputProps & {
+  options: (SelectOption | SelectOptionGroup)[];
+};
+export declare function Select({ label, description, placeholder, disabled, debounce, required, helpText, options, className, wrapperClassName }: SelectProps): import("react").JSX.Element;
+//#endregion

package/dist/web/form/select.js

@@ -0,0 +1,44 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Select as Select$1, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../base/select.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/select.tsx
+const emptyValue = ":EMPTY:";
+function isOptionGroup(option) {
+	return "options" in option;
+}
+function renderOption(option) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value: option.value ? option.value : emptyValue,
+		children: option.label
+	}, option.value);
+}
+function Select({ label, description, placeholder, disabled, debounce, required, helpText, options, className, wrapperClassName }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Select$1, {
+				value,
+				onValueChange: (next) => setValue(emptyValue === next ? "" : next),
+				disabled,
+				children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, {
+					className: cn("w-full cursor-pointer", className),
+					children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? "選択してください" })
+				}) }), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => isOptionGroup(option) ? /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: option.label }), option.options.map(renderOption)] }, option.label) : renderOption(option)) })]
+			}),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Select };

package/dist/web/form/slider.d.ts

@@ -0,0 +1,19 @@
+import { FieldInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+import React from "react";
+//#region src/web/form/slider.d.ts
+/**
+ * Slider に対応するフィールド型は単一値 (`number`) と範囲 (`number[]`) の両方を許容する（どちらかは field の値で決まる）。
+ */
+export type SliderProps = FieldInputProps & {
+  min?: number;
+  max: number;
+  step?: number;
+  formattedValue?: React.ReactNode;
+};
+/**
+ * TanStack Form 統合版 Slider。値は field context から取得する。
+ * 制御版が必要なら `atom/slider` を使う。
+ */
+export declare function Slider(props: SliderProps): React.JSX.Element;
+//#endregion

package/dist/web/form/slider.js

@@ -0,0 +1,51 @@
+import { useFieldValue } from "../../shared/form.js";
+import { Slider as Slider$1 } from "../atom/slider.js";
+import { FormControl, FormDescription, FormItem, FormMessage } from "../base/form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/slider.tsx
+/**
+* TanStack Form 統合版 Slider。値は field context から取得する。
+* 制御版が必要なら `atom/slider` を使う。
+*/
+function Slider(props) {
+	const { label, required, description, helpText, min, max, step, debounce, disabled, className, wrapperClassName, formattedValue } = props;
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			/* @__PURE__ */ jsx(FormControl, { children: Array.isArray(value) ? /* @__PURE__ */ jsx(Slider$1, {
+				value,
+				onValueChange: (next) => setValue(next),
+				label,
+				required,
+				helpText,
+				min,
+				max,
+				step,
+				disabled,
+				className,
+				formattedValue,
+				wrapperClassName: "contents"
+			}) : /* @__PURE__ */ jsx(Slider$1, {
+				value: typeof value === "number" ? value : 0,
+				onValueChange: (next) => setValue(next),
+				label,
+				required,
+				helpText,
+				min,
+				max,
+				step,
+				disabled,
+				className,
+				formattedValue,
+				wrapperClassName: "contents"
+			}) }),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Slider };

package/dist/web/form/switch.d.ts

@@ -0,0 +1,11 @@
+import { BaseInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+//#region src/web/form/switch.d.ts
+export type SwitchProps = BaseInputProps<boolean>;
+/**
+ * Form / 制御の双方向対応の Switch。
+ * - `value` / `onValueChange` を渡すと制御モード（field context を読まないので、field の外でも使える）
+ * - 省略すると field context から取得する
+ */
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;
+//#endregion

package/dist/web/form/switch.js

@@ -0,0 +1,50 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Switch as Switch$1 } from "../base/switch.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/switch.tsx
+/**
+* Form / 制御の双方向対応の Switch。
+* - `value` / `onValueChange` を渡すと制御モード（field context を読まないので、field の外でも使える）
+* - 省略すると field context から取得する
+*/
+function Switch(props) {
+	if (props.value !== void 0 && props.onValueChange !== void 0) return /* @__PURE__ */ jsx(Layout, {
+		...props,
+		checked: props.value,
+		onCheckedChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(FieldSwitch, { ...props });
+}
+function FieldSwitch(props) {
+	const [value, setValue] = useFieldValue({ debounce: props.debounce });
+	return /* @__PURE__ */ jsx(Layout, {
+		...props,
+		checked: value ?? false,
+		onCheckedChange: setValue
+	});
+}
+function Layout({ label, required, description, disabled, helpText, className, checked, onCheckedChange }) {
+	return /* @__PURE__ */ jsxs(FormItem, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: cn("h-9 flex items-center justify-between"),
+			children: [label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}), /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Switch$1, {
+				className: cn("h-fit cursor-pointer", className),
+				checked,
+				onCheckedChange,
+				disabled
+			}) })]
+		}),
+		description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+		/* @__PURE__ */ jsx(FormMessage, {})
+	] });
+}
+
+//#endregion
+export { Switch };

package/dist/web/form/text-area.d.ts

@@ -0,0 +1,10 @@
+import { FieldInputProps } from "../../shared/form.js";
+import { Textarea as Textarea$1 } from "../base/textarea.js";
+import "../lib/form.js";
+import { ComponentProps } from "react";
+//#region src/web/form/text-area.d.ts
+export type TextareaProps = FieldInputProps & Omit<ComponentProps<typeof Textarea$1>, "name" | "className" | "value" | "defaultValue" | "onChange"> & {
+  fullHeight?: boolean;
+};
+export declare function Textarea(props: TextareaProps): import("react").JSX.Element;
+//#endregion

package/dist/web/form/text-area.js

@@ -0,0 +1,31 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Textarea as Textarea$1 } from "../base/textarea.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/text-area.tsx
+function Textarea(props) {
+	const { label, required, description, debounce, className, fullHeight, ...remain } = props;
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: cn(fullHeight && "h-full"),
+		children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Textarea$1, {
+				value: value ?? "",
+				onChange: (e) => setValue(e.currentTarget.value),
+				className: cn("min-h-[200px] text-sm", className),
+				...remain
+			}) }),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { Textarea };

package/dist/web/form/text-input.d.ts

@@ -0,0 +1,10 @@
+import { FieldInputProps } from "../../shared/form.js";
+import "../lib/form.js";
+//#region src/web/form/text-input.d.ts
+export type TextInputProps = {
+  type?: "text" | "email" | "password" | "tel" | "url" | "number";
+  /** ブラウザの自動入力のヒント（`email`・`current-password`・`one-time-code` など。HTML の `autocomplete` 属性の値）。 */
+  autoComplete?: string;
+} & FieldInputProps;
+export declare function TextInput({ label, required, description, debounce, className, wrapperClassName, type, helpText, ...remain }: TextInputProps): import("react").JSX.Element;
+//#endregion

package/dist/web/form/text-input.js

@@ -0,0 +1,42 @@
+import { useFieldValue } from "../../shared/form.js";
+import { cn } from "../lib/utils.js";
+import { Input } from "../base/input.js";
+import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from "../base/form.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/form/text-input.tsx
+function TextInput({ label, required, description, debounce, className, wrapperClassName, type, helpText, ...remain }) {
+	const [value, setValue] = useFieldValue({ debounce });
+	return /* @__PURE__ */ jsxs(FormItem, {
+		className: wrapperClassName,
+		children: [
+			label && /* @__PURE__ */ jsx(FormLabel, {
+				required,
+				helpText,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(FormControl, { children: type === "number" ? /* @__PURE__ */ jsx(Input, {
+				type,
+				value: value ?? "",
+				onChange: (e) => {
+					const next = e.currentTarget.valueAsNumber;
+					if (Number.isNaN(next)) setValue(null);
+					else setValue(next);
+				},
+				className: cn("text-sm", className),
+				...remain
+			}) : /* @__PURE__ */ jsx(Input, {
+				value: value ?? "",
+				type,
+				onChange: (e) => setValue(e.currentTarget.value),
+				className: cn("text-sm", className),
+				...remain
+			}) }),
+			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
+			/* @__PURE__ */ jsx(FormMessage, {})
+		]
+	});
+}
+
+//#endregion
+export { TextInput };

package/dist/web/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/web/layout/accordion.d.ts

@@ -0,0 +1,26 @@
+import { Accordion as Accordion$1 } from "../base/accordion.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/web/layout/accordion.d.ts
+export type AccordionEntry = {
+  /** Radix の item の value に使う、変わらない ID。 */
+  value: string;
+  trigger: ReactNode;
+  content: ReactNode;
+};
+type RootProps = ComponentProps<typeof Accordion$1>;
+/** Radix の single / multiple の判別共用体を保つための、分配する Omit。 */
+type DistributedOmit<T, K extends keyof never> = T extends unknown ? Omit<T, K> : never;
+export type AccordionProps = DistributedOmit<RootProps, "children"> & {
+  items: AccordionEntry[];
+  /** 各 item の外側に付ける追加のクラス。 */
+  itemClassName?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+};
+/**
+ * shadcn のプリミティブを包んだ、データ駆動の Accordion。
+ * 呼び出し側が Item / Trigger / Content を自分で組まなくて済む。
+ */
+export declare function Accordion({ items, itemClassName, triggerClassName, contentClassName, className, ...rest }: AccordionProps): import("react").JSX.Element;
+//#endregion
+export {};