npm - @alneas/appkit-react - Versions diffs - 0.2.0 → 0.3.1 - Mend

@alneas/appkit-react 0.2.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1525) hide show

package/dist/tools/components/filter/use-filter.js CHANGED Viewed

@@ -1,8 +1,8 @@
 "use client";
 import { resolveFilterField as e } from "./filter-types.js";
-import { useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { useCallback as t, useEffect as n, useEffectEvent as r, useMemo as i, useRef as a, useState as o } from "react";
 //#region src/tools/components/filter/use-filter.ts
-function o(e, t) {
+function s(e, t) {
 	if (t == null || t === "") return;
 	let { type: n, operator: r } = e;
 	if (n === "boolean") return t;
@@ -28,7 +28,7 @@ function o(e, t) {
 	}
 	return t;
 }
-function s(e) {
+function c(e) {
 	if (e == null || typeof e == "string" && e.trim() === "" || Array.isArray(e) && e.length === 0) return !0;
 	if (typeof e == "object" && !(e instanceof Date)) {
 		let t = e;
@@ -36,7 +36,7 @@ function s(e) {
 	}
 	return !1;
 }
-function c(e, t) {
+function l(e, t) {
 	let n = {};
 	for (let r of e) n[r.field] = r.defaultValue ?? t?.[r.field] ?? void 0;
 	return {
@@ -44,54 +44,52 @@ function c(e, t) {
 		...t
 	};
 }
-function l(l) {
-	let { schema: u, fields: d, defaultValues: f, onChange: p } = l, m = r(() => JSON.stringify(d), [d]), [h, g] = a(d), [_, v] = a(m);
-	m !== _ && (g(d), v(m));
-	let y = r(() => h.map((t) => e(t, u)), [h, u]), b = r(() => c(y, f), [y, f]), [x, S] = a(b), C = i(f);
+function u(u) {
+	let { schema: d, fields: f, defaultValues: p, onChange: m } = u, h = i(() => JSON.stringify(f), [f]), [g, _] = o(f), [v, y] = o(h);
+	h !== v && (_(f), y(h));
+	let b = i(() => g.map((t) => e(t, d)), [g, d]), x = i(() => l(b, p), [b, p]), [S, C] = o(x), w = a(p);
 	n(() => {
-		JSON.stringify(f) !== JSON.stringify(C.current) && S(c(y, f)), C.current = f;
-	}, [f, y]);
-	let w = r(() => {
+		JSON.stringify(p) !== JSON.stringify(w.current) && C(l(b, p)), w.current = p;
+	}, [p, b]);
+	let T = i(() => {
 		let e = {};
-		for (let t of y) {
-			let n = x[t.field], r = o(t, n);
+		for (let t of b) {
+			let n = S[t.field], r = s(t, n);
 			r !== void 0 && (e[t.field] = r);
 		}
 		return e;
-	}, [x, y]), T = JSON.stringify(w), E = r(() => JSON.parse(T), [T]), D = r(() => y.every((e) => s(x[e.field])), [x, y]), O = i(p);
-	n(() => {
-		O.current = p;
-	}, [p]);
-	let k = i({});
+	}, [S, b]), E = JSON.stringify(T), D = i(() => JSON.parse(E), [E]), O = i(() => b.every((e) => c(S[e.field])), [S, b]), k = r((e) => {
+		m?.(e);
+	}), A = a({});
 	return n(() => {
-		JSON.stringify(E) !== JSON.stringify(k.current) && (k.current = E, O.current?.(E));
-	}, [E]), {
-		values: x,
-		filter: E,
-		fields: y,
+		JSON.stringify(D) !== JSON.stringify(A.current) && (A.current = D, k(D));
+	}, [D]), {
+		values: S,
+		filter: D,
+		fields: b,
 		setField: t((e, t) => {
-			S((n) => ({
+			C((n) => ({
 				...n,
 				[e]: t
 			}));
 		}, []),
 		setValues: t((e) => {
-			S((t) => ({
+			C((t) => ({
 				...t,
 				...e
 			}));
 		}, []),
 		reset: t(() => {
-			S(b);
-		}, [b]),
-		isEmpty: D
+			C(x);
+		}, [x]),
+		isEmpty: O
 	};
 }
-function u(e, t, n) {
+function d(e, t, n) {
 	let r = t || Object.keys(e), i = new Set(n || []);
 	return r.filter((t) => !i.has(t) && e[t]).map((e) => e);
 }
 //#endregion
-export { u as createFieldsFromSchema, l as useFilter, o as valueToQuery };
+export { d as createFieldsFromSchema, u as useFilter, s as valueToQuery };
 //# sourceMappingURL=use-filter.js.map

package/dist/tools/components/filter/use-filter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-filter.js","names":["valueToQuery","value","field","type","operator","range","query","isValueEmpty","buildDefaultValues","defaults","fields","userDefaults","useFilter","fieldSpecs","options","currentFieldSpecsStr","useMemo","stabilizedFieldSpecs","setStabilizedFieldSpecs","useState","prevFieldSpecsStr","setPrevFieldSpecsStr","resolvedFields","resolveFilterField","spec","schema","defaultValues","values","setValuesState","prevUserDefaultsRef","useRef","rawFilter","result","queryValue","filterJson","filter","isEmpty","onChangeRef","onChange","lastSentFilterRef","useEffect","useCallback","prev","newValues","createFieldsFromSchema","keys","include","excludeSet","exclude","key"],"sources":["../../../../src/tools/components/filter/use-filter.ts"],"sourcesContent":["/*\n @fileoverview フィルター状態管理フック\n \n ヘッドレスなフィルター状態管理とMongoDBスタイルのクエリ生成を提供します。\n * UI無しでもクエリビルダーとして使用できます。\n \n @module filter/use-filter\n /\n\nimport { useState, useMemo, useCallback, useEffect, useRef } from 'react';\nimport {\n CollectionSchema,\n FilterResult,\n FilterFieldSpec,\n FilterValue,\n FilterValues,\n RangeValue,\n ResolvedFilterField,\n resolveFilterField,\n UseFilterOptions,\n} from './filter-types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/\n useFilterフックの戻り値\n * Return type for the useFilter hook\n /\nexport interface UseFilterReturn {\n /* 現在のフィルター値 / Current filter values /\n values: FilterValues;\n /* MongoDBスタイルのフィルターオブジェクト / MongoDB-style filter object /\n filter: FilterResult;\n /* 解決済みフィールド定義 / Resolved field definitions /\n fields: ResolvedFilterField[];\n /* 単一フィールドの値を設定 / Set value for a single field /\n setField: (field: string, value: FilterValue) => void;\n /* 複数フィールドの値を設定 / Set multiple field values /\n setValues: (values: Partial<FilterValues>) => void;\n /* フィルターをリセット / Reset filter to defaults /\n reset: () => void;\n /* フィルターが空かどうか / Check if filter is empty /\n isEmpty: boolean;\n}\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/\n フィルター値をMongoDBスタイルのクエリに変換する\n * Converts a filter value to MongoDB-style query format\n \n @param {ResolvedFilterField} field - フィールド定義 / Field definition\n * @param {FilterValue} value - フィルター値 / Filter value\n * @returns {unknown} MongoDBクエリ値 / MongoDB query value\n /\nexport function valueToQuery(field: ResolvedFilterField, value: FilterValue): unknown {\n if (value === null \|\| value === undefined \|\| value === '') {\n return undefined;\n }\n\n const { type, operator } = field;\n\n // Boolean: return as-is\n if (type === 'boolean') {\n return value;\n }\n\n // Array type (checkbox multi): use $in\n if (type === 'array' && Array.isArray(value)) {\n if (value.length === 0) return undefined;\n return { $in: value };\n }\n\n // String operators: use $regex\n if (type === 'string' && typeof value === 'string') {\n if (!value.trim()) return undefined;\n\n if (operator === 'contains') {\n return { $regex: value, $options: 'i' };\n }\n if (operator === 'startsWith') {\n return { $regex: `^${value}`, $options: 'i' };\n }\n if (operator === 'endsWith') {\n return { $regex: `${value}$`, $options: 'i' };\n }\n // If 'eq', it falls through to the default exact match at the end\n }\n\n // Range operator for number/date\n if (\n operator === 'range' &&\n typeof value === 'object' &&\n !Array.isArray(value) &&\n !(value instanceof Date)\n ) {\n const range = value as RangeValue<number \| Date>;\n const query: Record<string, unknown> = {};\n if (range.min !== undefined && range.min !== null) {\n query.$gte = range.min;\n }\n if (range.max !== undefined && range.max !== null) {\n query.$lte = range.max;\n }\n return Object.keys(query).length > 0 ? query : undefined;\n }\n\n // Default: exact match\n return value;\n}\n\n/\n フィルター値が空かどうかを判定する\n * Checks if a filter value is considered empty\n \n @param {FilterValue} value - フィルター値 / Filter value\n * @returns {boolean} 空の場合true / True if empty\n /\nfunction isValueEmpty(value: FilterValue): boolean {\n if (value === null \|\| value === undefined) return true;\n if (typeof value === 'string' && value.trim() === '') return true;\n if (Array.isArray(value) && value.length === 0) return true;\n if (typeof value === 'object' && !(value instanceof Date)) {\n const range = value as RangeValue<unknown>;\n return range.min === undefined && range.max === undefined;\n }\n return false;\n}\n\n/\n デフォルト値マップを構築する\n * Builds the default values map from field definitions\n \n @param {ResolvedFilterField[]} fields - フィールド定義 / Field definitions\n * @param {FilterValues} [userDefaults] - ユーザー指定のデフォルト値 / User-provided defaults\n * @returns {FilterValues} デフォルト値マップ / Default values map\n /\nfunction buildDefaultValues(\n fields: ResolvedFilterField[],\n userDefaults?: FilterValues,\n): FilterValues {\n const defaults: FilterValues = {};\n\n for (const field of fields) {\n defaults[field.field] = field.defaultValue ?? userDefaults?.[field.field] ?? undefined;\n }\n\n return { ...defaults, ...userDefaults };\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/\n フィルター状態管理フック\n * Headless hook for managing filter state and generating MongoDB queries\n \n スキーマから型を推論し、MongoDBスタイルのフィルターオブジェクトを生成します。\n * UI無しでクエリビルダーとして使用することもできます。\n \n @param {UseFilterOptions} options - フックオプション / Hook options\n * @returns {UseFilterReturn} フィルター状態とアクション / Filter state and actions\n \n @example\n * // Basic usage with schema\n * const { filter, values, setField, reset } = useFilter({\n * schema: userSchema,\n * fields: ['name', 'age', 'status'],\n * });\n \n // Use filter with useFind\n * const { data } = useFind('users', filter);\n \n @example\n * // With operator overrides\n * const { filter } = useFilter({\n * schema: userSchema,\n * fields: [\n * 'name',\n * { field: 'age', operator: 'range' },\n * { field: 'createdAt', operator: 'range' },\n * ],\n * });\n \n @example\n * // Headless query builder (no UI)\n * const { filter, setField } = useFilter({\n * fields: [\n * { field: 'status', operator: 'eq' },\n * ],\n * });\n * setField('status', 'active');\n * // filter = { status: 'active' }\n /\nexport function useFilter(options: UseFilterOptions): UseFilterReturn {\n const { schema, fields: fieldSpecs, defaultValues: userDefaults, onChange } = options;\n\n // Stabilize fieldSpecs to avoid unnecessary re-resolving\n const currentFieldSpecsStr = useMemo(() => JSON.stringify(fieldSpecs), [fieldSpecs]);\n const [stabilizedFieldSpecs, setStabilizedFieldSpecs] = useState(fieldSpecs);\n const [prevFieldSpecsStr, setPrevFieldSpecsStr] = useState(currentFieldSpecsStr);\n\n if (currentFieldSpecsStr !== prevFieldSpecsStr) {\n setStabilizedFieldSpecs(fieldSpecs);\n setPrevFieldSpecsStr(currentFieldSpecsStr);\n }\n\n // Resolve field specifications\n const resolvedFields = useMemo(() => {\n return stabilizedFieldSpecs.map((spec) => resolveFilterField(spec, schema));\n }, [stabilizedFieldSpecs, schema]);\n\n // Build default values\n const defaultValues = useMemo(() => {\n return buildDefaultValues(resolvedFields, userDefaults);\n }, [resolvedFields, userDefaults]);\n\n // Filter values state\n const [values, setValuesState] = useState<FilterValues>(defaultValues);\n\n // Sync state if userDefaults changes (from parent component)\n const prevUserDefaultsRef = useRef(userDefaults);\n useEffect(() => {\n if (JSON.stringify(userDefaults) !== JSON.stringify(prevUserDefaultsRef.current)) {\n setValuesState(buildDefaultValues(resolvedFields, userDefaults));\n }\n prevUserDefaultsRef.current = userDefaults;\n }, [userDefaults, resolvedFields]);\n\n // Generate MongoDB-style filter\n const rawFilter = useMemo(() => {\n const result: FilterResult = {};\n\n for (const field of resolvedFields) {\n const value = values[field.field];\n const queryValue = valueToQuery(field, value);\n\n if (queryValue !== undefined) {\n result[field.field] = queryValue;\n }\n }\n\n return result;\n }, [values, resolvedFields]);\n\n const filterJson = JSON.stringify(rawFilter);\n const filter = useMemo(() => {\n return JSON.parse(filterJson);\n }, [filterJson]);\n\n // Check if filter is empty\n const isEmpty = useMemo(() => {\n return resolvedFields.every((field) => isValueEmpty(values[field.field]));\n }, [values, resolvedFields]);\n\n // Keep a stable ref to onChange to avoid stale closures\n const onChangeRef = useRef(onChange);\n useEffect(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\n\n // Trigger onChange callback when filter changes, preventing loops with deep comparison ref\n const lastSentFilterRef = useRef<FilterResult>({});\n useEffect(() => {\n if (JSON.stringify(filter) !== JSON.stringify(lastSentFilterRef.current)) {\n lastSentFilterRef.current = filter;\n onChangeRef.current?.(filter);\n }\n }, [filter]);\n\n // Set single field value\n const setField = useCallback((field: string, value: FilterValue) => {\n setValuesState((prev) => ({\n ...prev,\n [field]: value,\n }));\n }, []);\n\n // Set multiple field values\n const setValues = useCallback((newValues: Partial<FilterValues>) => {\n setValuesState((prev) => ({\n ...prev,\n ...newValues,\n }));\n }, []);\n\n // Reset to default values\n const reset = useCallback(() => {\n setValuesState(defaultValues);\n }, [defaultValues]);\n\n return {\n values,\n filter,\n fields: resolvedFields,\n setField,\n setValues,\n reset,\n isEmpty,\n };\n}\n\n// =============================================================================\n// Utility Exports\n// =============================================================================\n\n/\n スキーマからフィルターフィールドを自動生成する\n * Auto-generates filter fields from a schema\n \n @param {CollectionSchema} schema - コレクションスキーマ / Collection schema\n * @param {string[]} [include] - 含めるフィールド / Fields to include (all if not specified)\n * @param {string[]} [exclude] - 除外するフィールド / Fields to exclude\n * @returns {FilterFieldSpec[]} フィルターフィールド配列 / Filter field specifications\n \n @example\n * const fields = createFieldsFromSchema(userSchema, ['name', 'age', 'status']);\n */\nexport function createFieldsFromSchema(\n schema: CollectionSchema,\n include?: string[],\n exclude?: string[],\n): FilterFieldSpec[] {\n const keys = include \|\| Object.keys(schema);\n const excludeSet = new Set(exclude \|\| []);\n\n return keys.filter((key) => !excludeSet.has(key) && schema[key]).map((key) => key);\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-filter.js","names":["valueToQuery","value","field","type","operator","range","query","isValueEmpty","buildDefaultValues","defaults","fields","userDefaults","useFilter","fieldSpecs","options","currentFieldSpecsStr","useMemo","stabilizedFieldSpecs","setStabilizedFieldSpecs","useState","prevFieldSpecsStr","setPrevFieldSpecsStr","resolvedFields","resolveFilterField","spec","schema","defaultValues","values","setValuesState","prevUserDefaultsRef","useRef","rawFilter","result","queryValue","filterJson","filter","isEmpty","onFilterChange","useEffectEvent","nextFilter","lastSentFilterRef","useEffect","useCallback","prev","newValues","createFieldsFromSchema","keys","include","excludeSet","exclude","key"],"sources":["../../../../src/tools/components/filter/use-filter.ts"],"sourcesContent":["/*\n @fileoverview フィルター状態管理フック\n \n ヘッドレスなフィルター状態管理とMongoDBスタイルのクエリ生成を提供します。\n * UI無しでもクエリビルダーとして使用できます。\n \n @module filter/use-filter\n /\n\nimport { useState, useMemo, useCallback, useEffect, useEffectEvent, useRef } from 'react';\nimport {\n CollectionSchema,\n FilterResult,\n FilterFieldSpec,\n FilterValue,\n FilterValues,\n RangeValue,\n ResolvedFilterField,\n resolveFilterField,\n UseFilterOptions,\n} from './filter-types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/\n useFilterフックの戻り値\n * Return type for the useFilter hook\n /\nexport interface UseFilterReturn {\n /* 現在のフィルター値 / Current filter values /\n values: FilterValues;\n /* MongoDBスタイルのフィルターオブジェクト / MongoDB-style filter object /\n filter: FilterResult;\n /* 解決済みフィールド定義 / Resolved field definitions /\n fields: ResolvedFilterField[];\n /* 単一フィールドの値を設定 / Set value for a single field /\n setField: (field: string, value: FilterValue) => void;\n /* 複数フィールドの値を設定 / Set multiple field values /\n setValues: (values: Partial<FilterValues>) => void;\n /* フィルターをリセット / Reset filter to defaults /\n reset: () => void;\n /* フィルターが空かどうか / Check if filter is empty /\n isEmpty: boolean;\n}\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/\n フィルター値をMongoDBスタイルのクエリに変換する\n * Converts a filter value to MongoDB-style query format\n \n @param {ResolvedFilterField} field - フィールド定義 / Field definition\n * @param {FilterValue} value - フィルター値 / Filter value\n * @returns {unknown} MongoDBクエリ値 / MongoDB query value\n /\nexport function valueToQuery(field: ResolvedFilterField, value: FilterValue): unknown {\n if (value === null \|\| value === undefined \|\| value === '') {\n return undefined;\n }\n\n const { type, operator } = field;\n\n // Boolean: return as-is\n if (type === 'boolean') {\n return value;\n }\n\n // Array type (checkbox multi): use $in\n if (type === 'array' && Array.isArray(value)) {\n if (value.length === 0) return undefined;\n return { $in: value };\n }\n\n // String operators: use $regex\n if (type === 'string' && typeof value === 'string') {\n if (!value.trim()) return undefined;\n\n if (operator === 'contains') {\n return { $regex: value, $options: 'i' };\n }\n if (operator === 'startsWith') {\n return { $regex: `^${value}`, $options: 'i' };\n }\n if (operator === 'endsWith') {\n return { $regex: `${value}$`, $options: 'i' };\n }\n // If 'eq', it falls through to the default exact match at the end\n }\n\n // Range operator for number/date\n if (\n operator === 'range' &&\n typeof value === 'object' &&\n !Array.isArray(value) &&\n !(value instanceof Date)\n ) {\n const range = value as RangeValue<number \| Date>;\n const query: Record<string, unknown> = {};\n if (range.min !== undefined && range.min !== null) {\n query.$gte = range.min;\n }\n if (range.max !== undefined && range.max !== null) {\n query.$lte = range.max;\n }\n return Object.keys(query).length > 0 ? query : undefined;\n }\n\n // Default: exact match\n return value;\n}\n\n/\n フィルター値が空かどうかを判定する\n * Checks if a filter value is considered empty\n \n @param {FilterValue} value - フィルター値 / Filter value\n * @returns {boolean} 空の場合true / True if empty\n /\nfunction isValueEmpty(value: FilterValue): boolean {\n if (value === null \|\| value === undefined) return true;\n if (typeof value === 'string' && value.trim() === '') return true;\n if (Array.isArray(value) && value.length === 0) return true;\n if (typeof value === 'object' && !(value instanceof Date)) {\n const range = value as RangeValue<unknown>;\n return range.min === undefined && range.max === undefined;\n }\n return false;\n}\n\n/\n デフォルト値マップを構築する\n * Builds the default values map from field definitions\n \n @param {ResolvedFilterField[]} fields - フィールド定義 / Field definitions\n * @param {FilterValues} [userDefaults] - ユーザー指定のデフォルト値 / User-provided defaults\n * @returns {FilterValues} デフォルト値マップ / Default values map\n /\nfunction buildDefaultValues(\n fields: ResolvedFilterField[],\n userDefaults?: FilterValues,\n): FilterValues {\n const defaults: FilterValues = {};\n\n for (const field of fields) {\n defaults[field.field] = field.defaultValue ?? userDefaults?.[field.field] ?? undefined;\n }\n\n return { ...defaults, ...userDefaults };\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\n/\n フィルター状態管理フック\n * Headless hook for managing filter state and generating MongoDB queries\n \n スキーマから型を推論し、MongoDBスタイルのフィルターオブジェクトを生成します。\n * UI無しでクエリビルダーとして使用することもできます。\n \n @remarks Filter changes call the latest committed onChange callback. Replacing only\n * the callback does not replay an unchanged filter; deep-equal queries are deduplicated.\n \n @param {UseFilterOptions} options - フックオプション / Hook options\n * @returns {UseFilterReturn} フィルター状態とアクション / Filter state and actions\n \n @example\n * // Basic usage with schema\n * const { filter, values, setField, reset } = useFilter({\n * schema: userSchema,\n * fields: ['name', 'age', 'status'],\n * });\n \n // Use filter with useFind\n * const { data } = useFind('users', filter);\n \n @example\n * // With operator overrides\n * const { filter } = useFilter({\n * schema: userSchema,\n * fields: [\n * 'name',\n * { field: 'age', operator: 'range' },\n * { field: 'createdAt', operator: 'range' },\n * ],\n * });\n \n @example\n * // Headless query builder (no UI)\n * const { filter, setField } = useFilter({\n * fields: [\n * { field: 'status', operator: 'eq' },\n * ],\n * });\n * setField('status', 'active');\n * // filter = { status: 'active' }\n /\nexport function useFilter(options: UseFilterOptions): UseFilterReturn {\n const { schema, fields: fieldSpecs, defaultValues: userDefaults, onChange } = options;\n\n // Stabilize fieldSpecs to avoid unnecessary re-resolving\n const currentFieldSpecsStr = useMemo(() => JSON.stringify(fieldSpecs), [fieldSpecs]);\n const [stabilizedFieldSpecs, setStabilizedFieldSpecs] = useState(fieldSpecs);\n const [prevFieldSpecsStr, setPrevFieldSpecsStr] = useState(currentFieldSpecsStr);\n\n if (currentFieldSpecsStr !== prevFieldSpecsStr) {\n setStabilizedFieldSpecs(fieldSpecs);\n setPrevFieldSpecsStr(currentFieldSpecsStr);\n }\n\n // Resolve field specifications\n const resolvedFields = useMemo(() => {\n return stabilizedFieldSpecs.map((spec) => resolveFilterField(spec, schema));\n }, [stabilizedFieldSpecs, schema]);\n\n // Build default values\n const defaultValues = useMemo(() => {\n return buildDefaultValues(resolvedFields, userDefaults);\n }, [resolvedFields, userDefaults]);\n\n // Filter values state\n const [values, setValuesState] = useState<FilterValues>(defaultValues);\n\n // Sync state if userDefaults changes (from parent component)\n const prevUserDefaultsRef = useRef(userDefaults);\n useEffect(() => {\n if (JSON.stringify(userDefaults) !== JSON.stringify(prevUserDefaultsRef.current)) {\n setValuesState(buildDefaultValues(resolvedFields, userDefaults));\n }\n prevUserDefaultsRef.current = userDefaults;\n }, [userDefaults, resolvedFields]);\n\n // Generate MongoDB-style filter\n const rawFilter = useMemo(() => {\n const result: FilterResult = {};\n\n for (const field of resolvedFields) {\n const value = values[field.field];\n const queryValue = valueToQuery(field, value);\n\n if (queryValue !== undefined) {\n result[field.field] = queryValue;\n }\n }\n\n return result;\n }, [values, resolvedFields]);\n\n const filterJson = JSON.stringify(rawFilter);\n const filter = useMemo(() => {\n return JSON.parse(filterJson);\n }, [filterJson]);\n\n // Check if filter is empty\n const isEmpty = useMemo(() => {\n return resolvedFields.every((field) => isValueEmpty(values[field.field]));\n }, [values, resolvedFields]);\n\n const onFilterChange = useEffectEvent((nextFilter: FilterResult) => {\n onChange?.(nextFilter);\n });\n\n // Trigger onChange callback when filter changes, preventing loops with deep comparison ref\n const lastSentFilterRef = useRef<FilterResult>({});\n useEffect(() => {\n if (JSON.stringify(filter) !== JSON.stringify(lastSentFilterRef.current)) {\n lastSentFilterRef.current = filter;\n onFilterChange(filter);\n }\n }, [filter]);\n\n // Set single field value\n const setField = useCallback((field: string, value: FilterValue) => {\n setValuesState((prev) => ({\n ...prev,\n [field]: value,\n }));\n }, []);\n\n // Set multiple field values\n const setValues = useCallback((newValues: Partial<FilterValues>) => {\n setValuesState((prev) => ({\n ...prev,\n ...newValues,\n }));\n }, []);\n\n // Reset to default values\n const reset = useCallback(() => {\n setValuesState(defaultValues);\n }, [defaultValues]);\n\n return {\n values,\n filter,\n fields: resolvedFields,\n setField,\n setValues,\n reset,\n isEmpty,\n };\n}\n\n// =============================================================================\n// Utility Exports\n// =============================================================================\n\n/\n スキーマからフィルターフィールドを自動生成する\n * Auto-generates filter fields from a schema\n \n @param {CollectionSchema} schema - コレクションスキーマ / Collection schema\n * @param {string[]} [include] - 含めるフィールド / Fields to include (all if not specified)\n * @param {string[]} [exclude] - 除外するフィールド / Fields to exclude\n * @returns {FilterFieldSpec[]} フィルターフィールド配列 / Filter field specifications\n \n @example\n * const fields = createFieldsFromSchema(userSchema, ['name', 'age', 'status']);\n */\nexport function createFieldsFromSchema(\n schema: CollectionSchema,\n include?: string[],\n exclude?: string[],\n): FilterFieldSpec[] {\n const keys = include \|\| Object.keys(schema);\n const excludeSet = new Set(exclude \|\| []);\n\n return keys.filter((key) => !excludeSet.has(key) && schema[key]).map((key) => key);\n}\n"],"mappings":"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"}

package/dist/tools/components/form/form-action-bar.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs"),n=require("../../../ui/components/ui/button-components.cjs"),r=require("../../paraglide/messages/common_actions_cancel.cjs"),i=require("../../paraglide/messages/common_actions_save.cjs");let a=require("react/jsx-runtime"),o=require("react");o=e.__toESM(o,1);let s=require("lucide-react");var c={idle:null,saving:(0,a.jsx)(s.Loader2,{className:`h-4 w-4 animate-spin text-muted-foreground`}),saved:(0,a.jsx)(s.Check,{className:`h-4 w-4 text-green-500`}),error:(0,a.jsx)(s.AlertCircle,{className:`h-4 w-4 text-destructive`})},l=o.forwardRef(({testId:e,className:o,primaryLabel:l,secondaryLabel:u,onPrimary:d,onSecondary:f,saveStatus:p=`idle`,sticky:m=!0,primaryDisabled:h=!1,tertiaryAction:g,children:_,...v},y)=>{let b=l??i.common_actions_save({defaultValue:`Save`}),x=u??r.common_actions_cancel({defaultValue:`Cancel`});return(0,a.jsxs)(`div`,{ref:y,"data-testid":e,"data-save-status":p,className:t.cn(`flex flex-wrap items-center gap-3 border-t bg-background py-4`,m&&`sticky bottom-0 z-10`,o),...v,children:[(0,a.jsxs)(`div`,{className:`flex flex-1 flex-wrap items-center gap-3`,children:[(0,a.jsxs)(n.Button,{type:`submit`,testId:e?`${e}-primary`:void 0,onClick:d,disabled:h||p===`saving`,children:[p===`saving`&&(0,a.jsx)(s.Loader2,{className:`mr-2 h-4 w-4 animate-spin`,"aria-hidden":`true`}),b]}),f&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,testId:e?`${e}-secondary`:void 0,onClick:f,disabled:p===`saving`,children:x}),g,_]}),p!==`idle`&&(0,a.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[c[p],``]})]})});l.displayName=`FormActionBar`,exports.FormActionBar=l;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs"),n=require("../../../ui/components/ui/button-components.cjs"),r=require("../../paraglide/messages/common_actions_cancel.cjs"),i=require("../../paraglide/messages/common_actions_save.cjs");let a=require("react/jsx-runtime"),o=require("react");o=e.__toESM(o,1);let s=require("lucide-react");var c={idle:null,saving:(0,a.jsx)(s.Loader2,{className:`h-4 w-4 animate-spin text-muted-foreground`}),saved:(0,a.jsx)(s.Check,{className:`h-4 w-4 text-green-500`}),error:(0,a.jsx)(s.AlertCircle,{className:`h-4 w-4 text-destructive`})};function l({ref:e,testId:o,className:l,primaryLabel:u,secondaryLabel:d,onPrimary:f,onSecondary:p,saveStatus:m=`idle`,sticky:h=!0,primaryDisabled:g=!1,tertiaryAction:_,children:v,...y}){let b=u??i.common_actions_save({defaultValue:`Save`}),x=d??r.common_actions_cancel({defaultValue:`Cancel`});return(0,a.jsxs)(`div`,{ref:e,"data-testid":o,"data-save-status":m,className:t.cn(`flex flex-wrap items-center gap-3 border-t bg-background py-4`,h&&`sticky bottom-0 z-10`,l),...y,children:[(0,a.jsxs)(`div`,{className:`flex flex-1 flex-wrap items-center gap-3`,children:[(0,a.jsxs)(n.Button,{type:`submit`,testId:o?`${o}-primary`:void 0,onClick:f,disabled:g||m===`saving`,children:[m===`saving`&&(0,a.jsx)(s.Loader2,{className:`mr-2 h-4 w-4 animate-spin`,"aria-hidden":`true`}),b]}),p&&(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,testId:o?`${o}-secondary`:void 0,onClick:p,disabled:m===`saving`,children:x}),_,v]}),m!==`idle`&&(0,a.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[c[m],``]})]})}l.displayName=`FormActionBar`,exports.FormActionBar=l;
 //# sourceMappingURL=form-action-bar.cjs.map

package/dist/tools/components/form/form-action-bar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-action-bar.cjs","names":["Loader2","Check","AlertCircle","~~React","~~cn","Button","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","require_common_actions_cancel","require_common_actions_save","react_jsx_runtime","react","lucide_react","statusIcons","FormActionBar","props","resolvedPrimaryLabel","primaryLabel","resolvedSecondaryLabel","secondaryLabel","testId","saveStatus","sticky","className","onPrimary","primaryDisabled","onSecondary","tertiaryAction","children"],"sources":["../../../../src/tools/components/form/form-action-bar.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as m from '../../paraglide/messages.js';\nimport { cn } from \"../../lib/utils\";\nimport { Button } from '../ui/button';\nimport { Loader2, Check, AlertCircle } from 'lucide-react';\n\nexport type SaveStatus = 'idle' \| 'saving' \| 'saved' \| 'error';\n\n/*\n FormActionBarProps\n * フォームアクションバーのプロップス\n \n ## AI/Automation Features\n * - `testId`: Container and action buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-save-status`: idle, saving, saved, error\n /\nexport interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /* AI/E2E Test用の安定ID / Stable test identifier /\n testId?: string;\n /\n プライマリアクションのラベル\n * @default \"Save\"\n /\n primaryLabel?: string;\n /\n セカンダリアクションのラベル\n * @default \"Cancel\"\n /\n secondaryLabel?: string;\n /\n プライマリアクションのハンドラ\n /\n onPrimary?: () => void;\n /\n セカンダリアクションのハンドラ\n /\n onSecondary?: () => void;\n /\n 保存状態のインジケーター\n /\n saveStatus?: SaveStatus;\n /\n スティッキー表示を有効にする\n * @default true\n /\n sticky?: boolean;\n /\n プライマリボタンを無効にする\n /\n primaryDisabled?: boolean;\n /\n 第三のアクション（削除など）\n /\n tertiaryAction?: React.ReactNode;\n}\n\nconst statusIcons: Record<SaveStatus, React.ReactNode> = {\n idle: null,\n saving: <Loader2 className='h-4 w-4 animate-spin text-muted-foreground' />,\n saved: <Check className='h-4 w-4 text-green-500' />,\n error: <AlertCircle className='h-4 w-4 text-destructive' />,\n};\n\n/\n FormActionBar Component\n * フォーム用のアクションバー\n \n Save/cancel buttons with save status indicator.\n * 保存・キャンセルボタンと保存状態インジケーターを表示。\n \n ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-save-status`: Current save status\n \n @example With testId\n * ```tsx\n * <FormActionBar\n * testId=\"profile-form\"\n * onPrimary={handleSave}\n * onSecondary={handleCancel}\n * saveStatus=\"saving\"\n * />\n * // Container: data-testid=\"profile-form\"\n * // Primary: data-testid=\"profile-form-primary\"\n * // Secondary: data-testid=\"profile-form-secondary\"\n * ```\n */\nexport ~~const~~ FormActionBar ~~= React.forwardRef<HTMLDivElement, FormActionBarProps>~~(\n (\n ~~{\n~~ testId,\n className,\n primaryLabel,\n secondaryLabel,\n onPrimary,\n onSecondary,\n saveStatus = 'idle',\n sticky = true,\n primaryDisabled = false,\n tertiaryAction,\n children,\n ...props\n }~~,\n ref,\n~~ ) => {\n const resolvedPrimaryLabel = primaryLabel ?? m.common_actions_save({ defaultValue: 'Save' });\n const resolvedSecondaryLabel =\n secondaryLabel ?? m.common_actions_cancel({ defaultValue: 'Cancel' });\n const statusMessage = '';\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n data-save-status={saveStatus}\n className={cn(\n 'flex flex-wrap items-center gap-3 border-t bg-background py-4',\n sticky && 'sticky bottom-0 z-10',\n className,\n )}\n {...props}\n >\n <div className='flex flex-1 flex-wrap items-center gap-3'>\n <Button\n type='submit'\n testId={testId ? `${testId}-primary` : undefined}\n onClick={onPrimary}\n disabled={primaryDisabled \|\| saveStatus === 'saving'}\n >\n {saveStatus === 'saving' && (\n <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n )}\n {resolvedPrimaryLabel}\n </Button>\n {onSecondary && (\n <Button\n type='button'\n variant='outline'\n testId={testId ? `${testId}-secondary` : undefined}\n onClick={onSecondary}\n disabled={saveStatus === 'saving'}\n >\n {resolvedSecondaryLabel}\n </Button>\n )}\n {tertiaryAction}\n {children}\n </div>\n\n {saveStatus !== 'idle' && (\n <div className='flex items-center gap-2 text-sm text-muted-foreground'>\n {statusIcons[saveStatus]}\n {statusMessage && <span>{statusMessage}</span>}\n </div>\n )}\n </div>\n );\n }~~,\n);\~~nFormActionBar.displayName = 'FormActionBar';\n"],"mappings":"A,kdAyDA,~~IAAMc~~,EAAmD,CACvD,KAAM,KACN,QAAQ,EAAAH,EAAA,IAAA,~~CAACX~~,EAAAA,QAAD,CAAS,UAAU,4CAA8C,CAAA,EACzE,OAAO,~~EAAAW~~,EAAA,IAAA,~~CAACV~~,EAAAA,MAAD,CAAO,UAAU,wBAA0B,CAAA,EAClD,OAAO,~~EAAAU~~,EAAA,IAAA,~~CAACT~~,EAAAA,YAAD,CAAa,UAAU,0BAA4B,CAAA,CAC5D,~~EA0Baa~~,~~EAAgBZ~~,~~EAAM~~,~~YAE/B~~,~~CACE~~,SACA,YACA,eACA,iBACA,YACA,cACA,aAAa,OACb,SAAS,GACT,kBAAkB,GAClB,iBACA,WACA,~~GAAGa~~,~~GAEL~~,~~IACG~~,~~CACH,~~IAAMC,EAAuBC,GAAAR,EAAA,oBAAsC,CAAE,aAAc,MAAO,CAAC,EACrFS,EACJC,GAAAX,EAAA,sBAA0C,CAAE,aAAc,QAAS,CAAC,EAGtE,OACE,EAAAE,EAAA,KAAA,CAAC,MAAD,CACO,MACL,cAAaU,EACb,mBAAkBC,EAClB,UAAWlB,EAAAA,GACT,gEACAmB,GAAU,uBACVC,CACF,EACA,GAAIR,EATN,SAAA,EAWE,EAAAL,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2CAAf,SAAA,EACE,EAAAA,EAAA,KAAA,CAACN,EAAAA,OAAD,CACE,KAAK,SACL,OAAQgB,EAAS,GAAGA,EAAO,UAAY,IAAA,GACvC,QAASI,EACT,SAAUC,GAAmBJ,IAAe,SAJ9C,SAAA,CAMGA,IAAe,WACd,EAAAX,EAAA,IAAA,~~CAACX~~,EAAAA,QAAD,CAAS,UAAU,4BAA4B,cAAY,MAAQ,CAAA,~~EAEpEiB~~,CACK,C,GACPU,IACC,EAAAhB,EAAA,IAAA,CAACN,EAAAA,OAAD,CACE,KAAK,SACL,QAAQ,UACR,OAAQgB,EAAS,GAAGA,EAAO,YAAc,IAAA,GACzC,QAASM,EACT,SAAUL,IAAe,SAExB,SAAAH,CACK,CAAA,EAETS,EACAC,CACE,CAEJ,CAAA,EAAAP,IAAe,SACd,EAAAX,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wDAAf,SAAA,CACGG,EAAYQ,GACZ,EACE,CAEJ,CAAA,CAAA,C,EAET,~~CACF~~,~~EACA,~~EAAc,YAAc,gB"}
1	+ {"version":3,"file":"form-action-bar.cjs","names":["Loader2","Check","AlertCircle","cn","Button","require_runtime","require_ui_lib_utils","require_ui_components_ui_button_components","require_common_actions_cancel","require_common_actions_save","react_jsx_runtime","react","lucide_react","statusIcons","FormActionBar","props","resolvedPrimaryLabel","primaryLabel","resolvedSecondaryLabel","secondaryLabel","testId","saveStatus","sticky","className","onPrimary","primaryDisabled","onSecondary","tertiaryAction","children"],"sources":["../../../../src/tools/components/form/form-action-bar.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as m from '../../paraglide/messages.js';\nimport { cn } from \"../../lib/utils\";\nimport { Button } from '../ui/button';\nimport { Loader2, Check, AlertCircle } from 'lucide-react';\n\nexport type SaveStatus = 'idle' \| 'saving' \| 'saved' \| 'error';\n\n/*\n FormActionBarProps\n * フォームアクションバーのプロップス\n \n ## AI/Automation Features\n * - `testId`: Container and action buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-save-status`: idle, saving, saved, error\n /\nexport interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /* AI/E2E Test用の安定ID / Stable test identifier /\n testId?: string;\n /\n プライマリアクションのラベル\n * @default \"Save\"\n /\n primaryLabel?: string;\n /\n セカンダリアクションのラベル\n * @default \"Cancel\"\n /\n secondaryLabel?: string;\n /\n プライマリアクションのハンドラ\n /\n onPrimary?: () => void;\n /\n セカンダリアクションのハンドラ\n /\n onSecondary?: () => void;\n /\n 保存状態のインジケーター\n /\n saveStatus?: SaveStatus;\n /\n スティッキー表示を有効にする\n * @default true\n /\n sticky?: boolean;\n /\n プライマリボタンを無効にする\n /\n primaryDisabled?: boolean;\n /\n 第三のアクション（削除など）\n /\n tertiaryAction?: React.ReactNode;\n}\n\nconst statusIcons: Record<SaveStatus, React.ReactNode> = {\n idle: null,\n saving: <Loader2 className='h-4 w-4 animate-spin text-muted-foreground' />,\n saved: <Check className='h-4 w-4 text-green-500' />,\n error: <AlertCircle className='h-4 w-4 text-destructive' />,\n};\n\n/\n FormActionBar Component\n * フォーム用のアクションバー\n \n Save/cancel buttons with save status indicator.\n * 保存・キャンセルボタンと保存状態インジケーターを表示。\n \n ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-save-status`: Current save status\n \n @example With testId\n * ```tsx\n * <FormActionBar\n * testId=\"profile-form\"\n * onPrimary={handleSave}\n * onSecondary={handleCancel}\n * saveStatus=\"saving\"\n * />\n * // Container: data-testid=\"profile-form\"\n * // Primary: data-testid=\"profile-form-primary\"\n * // Secondary: data-testid=\"profile-form-secondary\"\n * ```\n */\nexport function FormActionBar({\n ref,\n testId,\n className,\n primaryLabel,\n secondaryLabel,\n onPrimary,\n onSecondary,\n saveStatus = 'idle',\n sticky = true,\n primaryDisabled = false,\n tertiaryAction,\n children,\n ...props\n}: React.PropsWithoutRef<FormActionBarProps> & React.RefAttributes<HTMLDivElement>) {\n const resolvedPrimaryLabel = primaryLabel ?? m.common_actions_save({ defaultValue: 'Save' });\n const resolvedSecondaryLabel =\n secondaryLabel ?? m.common_actions_cancel({ defaultValue: 'Cancel' });\n const statusMessage = '';\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n data-save-status={saveStatus}\n className={cn(\n 'flex flex-wrap items-center gap-3 border-t bg-background py-4',\n sticky && 'sticky bottom-0 z-10',\n className,\n )}\n {...props}\n >\n <div className='flex flex-1 flex-wrap items-center gap-3'>\n <Button\n type='submit'\n testId={testId ? `${testId}-primary` : undefined}\n onClick={onPrimary}\n disabled={primaryDisabled \|\| saveStatus === 'saving'}\n >\n {saveStatus === 'saving' && (\n <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n )}\n {resolvedPrimaryLabel}\n </Button>\n {onSecondary && (\n <Button\n type='button'\n variant='outline'\n testId={testId ? `${testId}-secondary` : undefined}\n onClick={onSecondary}\n disabled={saveStatus === 'saving'}\n >\n {resolvedSecondaryLabel}\n </Button>\n )}\n {tertiaryAction}\n {children}\n </div>\n\n {saveStatus !== 'idle' && (\n <div className='flex items-center gap-2 text-sm text-muted-foreground'>\n {statusIcons[saveStatus]}\n {statusMessage && <span>{statusMessage}</span>}\n </div>\n )}\n </div>\n );\n}\nFormActionBar.displayName = 'FormActionBar';\n"],"mappings":"A,kdAyDA,IAAMa,EAAmD,CACvD,KAAM,KACN,QAAQ,EAAAH,EAAA,IAAA,CAACV,EAAAA,QAAD,CAAS,UAAU,4CAA8C,CAAA,EACzE,OAAO,EAAAU,EAAA,IAAA,CAACT,EAAAA,MAAD,CAAO,UAAU,wBAA0B,CAAA,EAClD,OAAO,EAAAS,EAAA,IAAA,CAACR,EAAAA,YAAD,CAAa,UAAU,0BAA4B,CAAA,CAC5D,EA0BA,SAAgBY,EAAc,CAC5B,MACA,SACA,YACA,eACA,iBACA,YACA,cACA,aAAa,OACb,SAAS,GACT,kBAAkB,GAClB,iBACA,WACA,GAAGC,GAC+E,CAClF,IAAMC,EAAuBC,GAAAR,EAAA,oBAAsC,CAAE,aAAc,MAAO,CAAC,EACrFS,EACJC,GAAAX,EAAA,sBAA0C,CAAE,aAAc,QAAS,CAAC,EAGtE,OACE,EAAAE,EAAA,KAAA,CAAC,MAAD,CACO,MACL,cAAaU,EACb,mBAAkBC,EAClB,UAAWlB,EAAAA,GACT,gEACAmB,GAAU,uBACVC,CACF,EACA,GAAIR,EATN,SAAA,EAWE,EAAAL,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,2CAAf,SAAA,EACE,EAAAA,EAAA,KAAA,CAACN,EAAAA,OAAD,CACE,KAAK,SACL,OAAQgB,EAAS,GAAGA,EAAO,UAAY,IAAA,GACvC,QAASI,EACT,SAAUC,GAAmBJ,IAAe,SAJ9C,SAAA,CAMGA,IAAe,WACd,EAAAX,EAAA,IAAA,CAACV,EAAAA,QAAD,CAAS,UAAU,4BAA4B,cAAY,MAAQ,CAAA,EAEpEgB,CACK,C,GACPU,IACC,EAAAhB,EAAA,IAAA,CAACN,EAAAA,OAAD,CACE,KAAK,SACL,QAAQ,UACR,OAAQgB,EAAS,GAAGA,EAAO,YAAc,IAAA,GACzC,QAASM,EACT,SAAUL,IAAe,SAExB,SAAAH,CACK,CAAA,EAETS,EACAC,CACE,CAEJ,CAAA,EAAAP,IAAe,SACd,EAAAX,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wDAAf,SAAA,CACGG,EAAYQ,GACZ,EACE,CAEJ,CAAA,CAAA,C,EAET,CACA,EAAc,YAAc,gB"}

package/dist/tools/components/form/form-action-bar.d.cts CHANGED Viewed

@@ -72,4 +72,7 @@ export interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement>
  * // Secondary: data-testid="profile-form-secondary"
  * ```
  */
-export declare const FormActionBar: React.ForwardRefExoticComponent<FormActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormActionBar({ ref, testId, className, primaryLabel, secondaryLabel, onPrimary, onSecondary, saveStatus, sticky, primaryDisabled, tertiaryAction, children, ...props }: React.PropsWithoutRef<FormActionBarProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormActionBar {
+    var displayName: string;
+}

package/dist/tools/components/form/form-action-bar.d.ts CHANGED Viewed

@@ -72,4 +72,7 @@ export interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement>
  * // Secondary: data-testid="profile-form-secondary"
  * ```
  */
-export declare const FormActionBar: React.ForwardRefExoticComponent<FormActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormActionBar({ ref, testId, className, primaryLabel, secondaryLabel, onPrimary, onSecondary, saveStatus, sticky, primaryDisabled, tertiaryAction, children, ...props }: React.PropsWithoutRef<FormActionBarProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormActionBar {
+    var displayName: string;
+}

package/dist/tools/components/form/form-action-bar.js CHANGED Viewed

@@ -4,54 +4,55 @@ import { Button as t } from "../../../ui/components/ui/button-components.js";
 import { common_actions_cancel as n } from "../../paraglide/messages/common_actions_cancel.js";
 import { common_actions_save as r } from "../../paraglide/messages/common_actions_save.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "react";
-import { AlertCircle as s, Check as c, Loader2 as l } from "lucide-react";
+import "react";
+import { AlertCircle as o, Check as s, Loader2 as c } from "lucide-react";
 //#region src/tools/components/form/form-action-bar.tsx
-var u = {
+var l = {
 	idle: null,
-	saving: /* @__PURE__ */ i(l, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
-	saved: /* @__PURE__ */ i(c, { className: "h-4 w-4 text-green-500" }),
-	error: /* @__PURE__ */ i(s, { className: "h-4 w-4 text-destructive" })
-}, d = o.forwardRef(({ testId: o, className: s, primaryLabel: c, secondaryLabel: d, onPrimary: f, onSecondary: p, saveStatus: m = "idle", sticky: h = !0, primaryDisabled: g = !1, tertiaryAction: _, children: v, ...y }, b) => {
-	let x = c ?? r({ defaultValue: "Save" }), S = d ?? n({ defaultValue: "Cancel" });
+	saving: /* @__PURE__ */ i(c, { className: "h-4 w-4 animate-spin text-muted-foreground" }),
+	saved: /* @__PURE__ */ i(s, { className: "h-4 w-4 text-green-500" }),
+	error: /* @__PURE__ */ i(o, { className: "h-4 w-4 text-destructive" })
+};
+function u({ ref: o, testId: s, className: u, primaryLabel: d, secondaryLabel: f, onPrimary: p, onSecondary: m, saveStatus: h = "idle", sticky: g = !0, primaryDisabled: _ = !1, tertiaryAction: v, children: y, ...b }) {
+	let x = d ?? r({ defaultValue: "Save" }), S = f ?? n({ defaultValue: "Cancel" });
 	return /* @__PURE__ */ a("div", {
-		ref: b,
-		"data-testid": o,
-		"data-save-status": m,
-		className: e("flex flex-wrap items-center gap-3 border-t bg-background py-4", h && "sticky bottom-0 z-10", s),
-		...y,
+		ref: o,
+		"data-testid": s,
+		"data-save-status": h,
+		className: e("flex flex-wrap items-center gap-3 border-t bg-background py-4", g && "sticky bottom-0 z-10", u),
+		...b,
 		children: [/* @__PURE__ */ a("div", {
 			className: "flex flex-1 flex-wrap items-center gap-3",
 			children: [
 				/* @__PURE__ */ a(t, {
 					type: "submit",
-					testId: o ? `${o}-primary` : void 0,
-					onClick: f,
-					disabled: g || m === "saving",
-					children: [m === "saving" && /* @__PURE__ */ i(l, {
+					testId: s ? `${s}-primary` : void 0,
+					onClick: p,
+					disabled: _ || h === "saving",
+					children: [h === "saving" && /* @__PURE__ */ i(c, {
 						className: "mr-2 h-4 w-4 animate-spin",
 						"aria-hidden": "true"
 					}), x]
 				}),
-				p && /* @__PURE__ */ i(t, {
+				m && /* @__PURE__ */ i(t, {
 					type: "button",
 					variant: "outline",
-					testId: o ? `${o}-secondary` : void 0,
-					onClick: p,
-					disabled: m === "saving",
+					testId: s ? `${s}-secondary` : void 0,
+					onClick: m,
+					disabled: h === "saving",
 					children: S
 				}),
-				_,
-				v
+				v,
+				y
 			]
-		}), m !== "idle" && /* @__PURE__ */ a("div", {
+		}), h !== "idle" && /* @__PURE__ */ a("div", {
 			className: "flex items-center gap-2 text-sm text-muted-foreground",
-			children: [u[m], ""]
+			children: [l[h], ""]
 		})]
 	});
-});
-d.displayName = "FormActionBar";
+}
+u.displayName = "FormActionBar";
 //#endregion
-export { d as FormActionBar };
+export { u as FormActionBar };
 //# sourceMappingURL=form-action-bar.js.map

package/dist/tools/components/form/form-action-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-action-bar.js","names":["~~React","~~m.common_actions_save","m.common_actions_cancel","~~React$1","~~statusIcons","Loader2","Check","AlertCircle","FormActionBar","props","resolvedPrimaryLabel","primaryLabel","common_actions_save","resolvedSecondaryLabel","secondaryLabel","common_actions_cancel","testId","saveStatus","cn","sticky","className","Button","onPrimary","primaryDisabled","onSecondary","tertiaryAction","children"],"sources":["../../../../src/tools/components/form/form-action-bar.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as m from '../../paraglide/messages.js';\nimport { cn } from \"../../lib/utils\";\nimport { Button } from '../ui/button';\nimport { Loader2, Check, AlertCircle } from 'lucide-react';\n\nexport type SaveStatus = 'idle' \| 'saving' \| 'saved' \| 'error';\n\n/*\n FormActionBarProps\n * フォームアクションバーのプロップス\n \n ## AI/Automation Features\n * - `testId`: Container and action buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-save-status`: idle, saving, saved, error\n /\nexport interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /* AI/E2E Test用の安定ID / Stable test identifier /\n testId?: string;\n /\n プライマリアクションのラベル\n * @default \"Save\"\n /\n primaryLabel?: string;\n /\n セカンダリアクションのラベル\n * @default \"Cancel\"\n /\n secondaryLabel?: string;\n /\n プライマリアクションのハンドラ\n /\n onPrimary?: () => void;\n /\n セカンダリアクションのハンドラ\n /\n onSecondary?: () => void;\n /\n 保存状態のインジケーター\n /\n saveStatus?: SaveStatus;\n /\n スティッキー表示を有効にする\n * @default true\n /\n sticky?: boolean;\n /\n プライマリボタンを無効にする\n /\n primaryDisabled?: boolean;\n /\n 第三のアクション（削除など）\n /\n tertiaryAction?: React.ReactNode;\n}\n\nconst statusIcons: Record<SaveStatus, React.ReactNode> = {\n idle: null,\n saving: <Loader2 className='h-4 w-4 animate-spin text-muted-foreground' />,\n saved: <Check className='h-4 w-4 text-green-500' />,\n error: <AlertCircle className='h-4 w-4 text-destructive' />,\n};\n\n/\n FormActionBar Component\n * フォーム用のアクションバー\n \n Save/cancel buttons with save status indicator.\n * 保存・キャンセルボタンと保存状態インジケーターを表示。\n \n ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-save-status`: Current save status\n \n @example With testId\n * ```tsx\n * <FormActionBar\n * testId=\"profile-form\"\n * onPrimary={handleSave}\n * onSecondary={handleCancel}\n * saveStatus=\"saving\"\n * />\n * // Container: data-testid=\"profile-form\"\n * // Primary: data-testid=\"profile-form-primary\"\n * // Secondary: data-testid=\"profile-form-secondary\"\n * ```\n */\nexport ~~const~~ FormActionBar ~~= React.forwardRef<HTMLDivElement, FormActionBarProps>~~(\n (\n ~~{\n~~ testId,\n className,\n primaryLabel,\n secondaryLabel,\n onPrimary,\n onSecondary,\n saveStatus = 'idle',\n sticky = true,\n primaryDisabled = false,\n tertiaryAction,\n children,\n ...props\n }~~,\n ref,\n~~ ) => {\n const resolvedPrimaryLabel = primaryLabel ?? m.common_actions_save({ defaultValue: 'Save' });\n const resolvedSecondaryLabel =\n secondaryLabel ?? m.common_actions_cancel({ defaultValue: 'Cancel' });\n const statusMessage = '';\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n data-save-status={saveStatus}\n className={cn(\n 'flex flex-wrap items-center gap-3 border-t bg-background py-4',\n sticky && 'sticky bottom-0 z-10',\n className,\n )}\n {...props}\n >\n <div className='flex flex-1 flex-wrap items-center gap-3'>\n <Button\n type='submit'\n testId={testId ? `${testId}-primary` : undefined}\n onClick={onPrimary}\n disabled={primaryDisabled \|\| saveStatus === 'saving'}\n >\n {saveStatus === 'saving' && (\n <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n )}\n {resolvedPrimaryLabel}\n </Button>\n {onSecondary && (\n <Button\n type='button'\n variant='outline'\n testId={testId ? `${testId}-secondary` : undefined}\n onClick={onSecondary}\n disabled={saveStatus === 'saving'}\n >\n {resolvedSecondaryLabel}\n </Button>\n )}\n {tertiaryAction}\n {children}\n </div>\n\n {saveStatus !== 'idle' && (\n <div className='flex items-center gap-2 text-sm text-muted-foreground'>\n {statusIcons[saveStatus]}\n {statusMessage && <span>{statusMessage}</span>}\n </div>\n )}\n </div>\n );\n }~~,\n);\~~nFormActionBar.displayName = 'FormActionBar';\n"],"mappings":";;;;;;;;;AAyDA,~~IAAMI~~,IAAmD;CACvD,MAAM;CACN,QAAQ,kBAACC,GAAD,EAAS,WAAU,6CAA8C,CAAA;CACzE,OAAO,kBAACC,GAAD,EAAO,WAAU,yBAA0B,CAAA;CAClD,OAAO,kBAACC,GAAD,EAAa,WAAU,2BAA4B,CAAA;AAC5D,~~GA0BaC~~,~~IAAgBR~~,~~EAAM~~,~~YAE/B~~,~~EACE,~~WACA,cACA,iBACA,mBACA,cACA,gBACA,gBAAa,QACb,YAAS,IACT,qBAAkB,IAClB,mBACA,aACA,~~GAAGS~~,~~KAEL,MACG~~;~~CACH~~,IAAMC,IAAuBC,~~KAAgBV~~,EAAsB,EAAE,cAAc,OAAO,CAAC,~~GACrFY~~,IACJC,~~KAAkBZ~~,EAAwB,EAAE,cAAc,SAAS,CAAC;CAGtE,OACE,kBAAC,OAAD;EACO;EACL,~~eAAac~~;EACb,oBAAkBC;EAClB,WAAWC,EACT,iEACAC,KAAU,wBACVC,CACF;EACA,GAAIX;EATN,UAAA,CAWE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAACY,GAAD;KACE,MAAK;KACL,QAAQL,IAAS,GAAGA,EAAO,YAAY,KAAA;KACvC,SAASM;KACT,UAAUC,KAAmBN,MAAe;KAJ9C,UAAA,CAMGA,MAAe,YACd,kBAACZ,GAAD;MAAS,WAAU;MAA4B,eAAY;KAAQ,CAAA,GAEpEK,CACK;;IACPc,KACC,kBAACH,GAAD;KACE,MAAK;KACL,SAAQ;KACR,QAAQL,IAAS,GAAGA,EAAO,cAAc,KAAA;KACzC,SAASQ;KACT,UAAUP,MAAe;KAExB,UAAAJ;IACK,CAAA;IAETY;IACAC;GACE;EAEJ,CAAA,GAAAT,MAAe,UACd,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGb,EAAYa,IACZ,EACE;EAEJ,CAAA,CAAA;;AAET~~,CACF~~;AACA,EAAc,cAAc"}
1	+ {"version":3,"file":"form-action-bar.js","names":["m.common_actions_save","m.common_actions_cancel","statusIcons","Loader2","Check","AlertCircle","FormActionBar","props","resolvedPrimaryLabel","primaryLabel","common_actions_save","resolvedSecondaryLabel","secondaryLabel","common_actions_cancel","testId","saveStatus","cn","sticky","className","Button","onPrimary","primaryDisabled","onSecondary","tertiaryAction","children"],"sources":["../../../../src/tools/components/form/form-action-bar.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as m from '../../paraglide/messages.js';\nimport { cn } from \"../../lib/utils\";\nimport { Button } from '../ui/button';\nimport { Loader2, Check, AlertCircle } from 'lucide-react';\n\nexport type SaveStatus = 'idle' \| 'saving' \| 'saved' \| 'error';\n\n/*\n FormActionBarProps\n * フォームアクションバーのプロップス\n \n ## AI/Automation Features\n * - `testId`: Container and action buttons\n * - Pattern: `{testId}`, `{testId}-primary`, `{testId}-secondary`\n * - `data-save-status`: idle, saving, saved, error\n /\nexport interface FormActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /* AI/E2E Test用の安定ID / Stable test identifier /\n testId?: string;\n /\n プライマリアクションのラベル\n * @default \"Save\"\n /\n primaryLabel?: string;\n /\n セカンダリアクションのラベル\n * @default \"Cancel\"\n /\n secondaryLabel?: string;\n /\n プライマリアクションのハンドラ\n /\n onPrimary?: () => void;\n /\n セカンダリアクションのハンドラ\n /\n onSecondary?: () => void;\n /\n 保存状態のインジケーター\n /\n saveStatus?: SaveStatus;\n /\n スティッキー表示を有効にする\n * @default true\n /\n sticky?: boolean;\n /\n プライマリボタンを無効にする\n /\n primaryDisabled?: boolean;\n /\n 第三のアクション（削除など）\n /\n tertiaryAction?: React.ReactNode;\n}\n\nconst statusIcons: Record<SaveStatus, React.ReactNode> = {\n idle: null,\n saving: <Loader2 className='h-4 w-4 animate-spin text-muted-foreground' />,\n saved: <Check className='h-4 w-4 text-green-500' />,\n error: <AlertCircle className='h-4 w-4 text-destructive' />,\n};\n\n/\n FormActionBar Component\n * フォーム用のアクションバー\n \n Save/cancel buttons with save status indicator.\n * 保存・キャンセルボタンと保存状態インジケーターを表示。\n \n ## AI/Automation Features\n * - `data-testid`: Container and action buttons\n * - `data-save-status`: Current save status\n \n @example With testId\n * ```tsx\n * <FormActionBar\n * testId=\"profile-form\"\n * onPrimary={handleSave}\n * onSecondary={handleCancel}\n * saveStatus=\"saving\"\n * />\n * // Container: data-testid=\"profile-form\"\n * // Primary: data-testid=\"profile-form-primary\"\n * // Secondary: data-testid=\"profile-form-secondary\"\n * ```\n */\nexport function FormActionBar({\n ref,\n testId,\n className,\n primaryLabel,\n secondaryLabel,\n onPrimary,\n onSecondary,\n saveStatus = 'idle',\n sticky = true,\n primaryDisabled = false,\n tertiaryAction,\n children,\n ...props\n}: React.PropsWithoutRef<FormActionBarProps> & React.RefAttributes<HTMLDivElement>) {\n const resolvedPrimaryLabel = primaryLabel ?? m.common_actions_save({ defaultValue: 'Save' });\n const resolvedSecondaryLabel =\n secondaryLabel ?? m.common_actions_cancel({ defaultValue: 'Cancel' });\n const statusMessage = '';\n\n return (\n <div\n ref={ref}\n data-testid={testId}\n data-save-status={saveStatus}\n className={cn(\n 'flex flex-wrap items-center gap-3 border-t bg-background py-4',\n sticky && 'sticky bottom-0 z-10',\n className,\n )}\n {...props}\n >\n <div className='flex flex-1 flex-wrap items-center gap-3'>\n <Button\n type='submit'\n testId={testId ? `${testId}-primary` : undefined}\n onClick={onPrimary}\n disabled={primaryDisabled \|\| saveStatus === 'saving'}\n >\n {saveStatus === 'saving' && (\n <Loader2 className='mr-2 h-4 w-4 animate-spin' aria-hidden='true' />\n )}\n {resolvedPrimaryLabel}\n </Button>\n {onSecondary && (\n <Button\n type='button'\n variant='outline'\n testId={testId ? `${testId}-secondary` : undefined}\n onClick={onSecondary}\n disabled={saveStatus === 'saving'}\n >\n {resolvedSecondaryLabel}\n </Button>\n )}\n {tertiaryAction}\n {children}\n </div>\n\n {saveStatus !== 'idle' && (\n <div className='flex items-center gap-2 text-sm text-muted-foreground'>\n {statusIcons[saveStatus]}\n {statusMessage && <span>{statusMessage}</span>}\n </div>\n )}\n </div>\n );\n}\nFormActionBar.displayName = 'FormActionBar';\n"],"mappings":";;;;;;;;;AAyDA,IAAME,IAAmD;CACvD,MAAM;CACN,QAAQ,kBAACC,GAAD,EAAS,WAAU,6CAA8C,CAAA;CACzE,OAAO,kBAACC,GAAD,EAAO,WAAU,yBAA0B,CAAA;CAClD,OAAO,kBAACC,GAAD,EAAa,WAAU,2BAA4B,CAAA;AAC5D;AA0BA,SAAgBC,EAAc,EAC5B,QACA,WACA,cACA,iBACA,mBACA,cACA,gBACA,gBAAa,QACb,YAAS,IACT,qBAAkB,IAClB,mBACA,aACA,GAAGC,KAC+E;CAClF,IAAMC,IAAuBC,KAAgBT,EAAsB,EAAE,cAAc,OAAO,CAAC,GACrFW,IACJC,KAAkBX,EAAwB,EAAE,cAAc,SAAS,CAAC;CAGtE,OACE,kBAAC,OAAD;EACO;EACL,eAAaa;EACb,oBAAkBC;EAClB,WAAWC,EACT,iEACAC,KAAU,wBACVC,CACF;EACA,GAAIX;EATN,UAAA,CAWE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAACY,GAAD;KACE,MAAK;KACL,QAAQL,IAAS,GAAGA,EAAO,YAAY,KAAA;KACvC,SAASM;KACT,UAAUC,KAAmBN,MAAe;KAJ9C,UAAA,CAMGA,MAAe,YACd,kBAACZ,GAAD;MAAS,WAAU;MAA4B,eAAY;KAAQ,CAAA,GAEpEK,CACK;;IACPc,KACC,kBAACH,GAAD;KACE,MAAK;KACL,SAAQ;KACR,QAAQL,IAAS,GAAGA,EAAO,cAAc,KAAA;KACzC,SAASQ;KACT,UAAUP,MAAe;KAExB,UAAAJ;IACK,CAAA;IAETY;IACAC;GACE;EAEJ,CAAA,GAAAT,MAAe,UACd,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGb,EAAYa,IACZ,EACE;EAEJ,CAAA,CAAA;;AAET;AACA,EAAc,cAAc"}

package/dist/tools/components/form/form-container.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i={sm:`max-w-sm`,md:`max-w-md`,lg:`max-w-lg`,xl:`max-w-xl`,"2xl":`max-w-2xl`,"3xl":`max-w-3xl`,"4xl":`max-w-4xl`,"5xl":`max-w-5xl`},a=r.forwardRef(({className:e,maxWidth:r=`4xl`,fullWidth:a=!1,children:o,...s},c)=>(0,n.jsx)(`div`,{ref:c,className:t.cn(`mx-auto w-full px-4 py-6 md:px-6 lg:px-8`,!a&&i[r],e),...s,children:o}));a.displayName=`FormContainer`,exports.FormContainer=a;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i={sm:`max-w-sm`,md:`max-w-md`,lg:`max-w-lg`,xl:`max-w-xl`,"2xl":`max-w-2xl`,"3xl":`max-w-3xl`,"4xl":`max-w-4xl`,"5xl":`max-w-5xl`};function a({ref:e,className:r,maxWidth:a=`4xl`,fullWidth:o=!1,children:s,...c}){return(0,n.jsx)(`div`,{ref:e,className:t.cn(`mx-auto w-full px-4 py-6 md:px-6 lg:px-8`,!o&&i[a],r),...c,children:s})}a.displayName=`FormContainer`,exports.FormContainer=a;
 //# sourceMappingURL=form-container.cjs.map

package/dist/tools/components/form/form-container.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-container.cjs","names":["~~React","~~cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","containerWidths","FormContainer","props","fullWidth","maxWidth","className"],"sources":["../../../../src/tools/components/form/form-container.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from \"../../lib/utils\";\n\nconst containerWidths = {\n sm: 'max-w-sm', // 384px\n md: 'max-w-md', // 448px\n lg: 'max-w-lg', // 512px\n xl: 'max-w-xl', // 576px\n '2xl': 'max-w-2xl', // 672px\n '3xl': 'max-w-3xl', // 768px\n '4xl': 'max-w-4xl', // 896px\n '5xl': 'max-w-5xl', // 1024px\n} as const;\n\nexport type FormContainerWidth = keyof typeof containerWidths;\n\nexport interface FormContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n コンテナの最大幅\n * @default \"4xl\" (896px)\n /\n maxWidth?: FormContainerWidth;\n /\n フルスクリーンモード (max-width制限なし)\n /\n fullWidth?: boolean;\n}\n\n/\n フォーム用の中央揃えコンテナ\n \n デスクトップ画面での読みやすさを確保するため、適切な最大幅で中央揃えにします。\n * レスポンシブパディングを提供し、一貫した余白を保ちます。\n \n @example\n * ```tsx\n * <FormContainer maxWidth=\"4xl\">\n * <form>...</form>\n * </FormContainer>\n * ```\n */\nexport ~~const~~ FormContainer ~~= React.forwardRef<HTMLDivElement, FormContainerProps>~~(\n ({ className, maxWidth = '4xl', fullWidth = false, children, ...props }, ~~ref~~) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'mx-auto w-full px-4 py-6 md:px-6 lg:px-8',\n !fullWidth && containerWidths[maxWidth],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n }~~,\n);\~~nFormContainer.displayName = 'FormContainer';\n"],"mappings":"A,yPAGA,~~IAAMM~~,EAAkB,CACtB,GAAI,WACJ,GAAI,WACJ,GAAI,WACJ,GAAI,WACJ,MAAO,YACP,MAAO,YACP,MAAO,YACP,MAAO,WACT,~~EA6BaC~~,~~EAAgBP~~,~~EAAM~~,~~YAChC~~,~~CAAE~~,~~YAAW~~,WAAW,~~MAAO~~,YAAY,~~GAAO~~,~~WAAU~~,~~GAAGQ~~,~~GAAS~~,~~KAErE~~,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,2CACA,CAACQ,GAAaH,EAAgBI,GAC9BC,CACF,EACA,GAAIH,EAEH,UACE,CAAA,~~CAGX~~,~~EACA~~,EAAc,YAAc,gB"}
1	+ {"version":3,"file":"form-container.cjs","names":["cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","containerWidths","FormContainer","props","fullWidth","maxWidth","className"],"sources":["../../../../src/tools/components/form/form-container.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from \"../../lib/utils\";\n\nconst containerWidths = {\n sm: 'max-w-sm', // 384px\n md: 'max-w-md', // 448px\n lg: 'max-w-lg', // 512px\n xl: 'max-w-xl', // 576px\n '2xl': 'max-w-2xl', // 672px\n '3xl': 'max-w-3xl', // 768px\n '4xl': 'max-w-4xl', // 896px\n '5xl': 'max-w-5xl', // 1024px\n} as const;\n\nexport type FormContainerWidth = keyof typeof containerWidths;\n\nexport interface FormContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n コンテナの最大幅\n * @default \"4xl\" (896px)\n /\n maxWidth?: FormContainerWidth;\n /\n フルスクリーンモード (max-width制限なし)\n /\n fullWidth?: boolean;\n}\n\n/\n フォーム用の中央揃えコンテナ\n \n デスクトップ画面での読みやすさを確保するため、適切な最大幅で中央揃えにします。\n * レスポンシブパディングを提供し、一貫した余白を保ちます。\n \n @example\n * ```tsx\n * <FormContainer maxWidth=\"4xl\">\n * <form>...</form>\n * </FormContainer>\n * ```\n */\nexport function FormContainer({\n ref,\n className,\n maxWidth = '4xl',\n fullWidth = false,\n children,\n ...props\n}: React.PropsWithoutRef<FormContainerProps> & React.RefAttributes<HTMLDivElement>) {\n return (\n <div\n ref={ref}\n className={cn(\n 'mx-auto w-full px-4 py-6 md:px-6 lg:px-8',\n !fullWidth && containerWidths[maxWidth],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n}\nFormContainer.displayName = 'FormContainer';\n"],"mappings":"A,yPAGA,IAAMK,EAAkB,CACtB,GAAI,WACJ,GAAI,WACJ,GAAI,WACJ,GAAI,WACJ,MAAO,YACP,MAAO,YACP,MAAO,YACP,MAAO,WACT,EA6BA,SAAgBC,EAAc,CAC5B,MACA,YACA,WAAW,MACX,YAAY,GACZ,WACA,GAAGC,GAC+E,CAClF,OACE,EAAAJ,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,2CACA,CAACQ,GAAaH,EAAgBI,GAC9BC,CACF,EACA,GAAIH,EAEH,UACE,CAAA,CAET,CACA,EAAc,YAAc,gB"}

package/dist/tools/components/form/form-container.d.cts CHANGED Viewed

@@ -34,5 +34,8 @@ export interface FormContainerProps extends React.HTMLAttributes<HTMLDivElement>
  * </FormContainer>
  * ```
  */
-export declare const FormContainer: React.ForwardRefExoticComponent<FormContainerProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormContainer({ ref, className, maxWidth, fullWidth, children, ...props }: React.PropsWithoutRef<FormContainerProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormContainer {
+    var displayName: string;
+}
 export {};

package/dist/tools/components/form/form-container.d.ts CHANGED Viewed

@@ -34,5 +34,8 @@ export interface FormContainerProps extends React.HTMLAttributes<HTMLDivElement>
  * </FormContainer>
  * ```
  */
-export declare const FormContainer: React.ForwardRefExoticComponent<FormContainerProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormContainer({ ref, className, maxWidth, fullWidth, children, ...props }: React.PropsWithoutRef<FormContainerProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormContainer {
+    var displayName: string;
+}
 export {};

package/dist/tools/components/form/form-container.js CHANGED Viewed

@@ -1,9 +1,9 @@
 "use client";
 import { cn as e } from "../../../ui/lib/utils.js";
 import { jsx as t } from "react/jsx-runtime";
-import * as n from "react";
+import "react";
 //#region src/tools/components/form/form-container.tsx
-var r = {
+var n = {
 	sm: "max-w-sm",
 	md: "max-w-md",
 	lg: "max-w-lg",
@@ -12,14 +12,17 @@ var r = {
 	"3xl": "max-w-3xl",
 	"4xl": "max-w-4xl",
 	"5xl": "max-w-5xl"
-}, i = n.forwardRef(({ className: n, maxWidth: i = "4xl", fullWidth: a = !1, children: o, ...s }, c) => /* @__PURE__ */ t("div", {
-	ref: c,
-	className: e("mx-auto w-full px-4 py-6 md:px-6 lg:px-8", !a && r[i], n),
-	...s,
-	children: o
-}));
-i.displayName = "FormContainer";
+};
+function r({ ref: r, className: i, maxWidth: a = "4xl", fullWidth: o = !1, children: s, ...c }) {
+	return /* @__PURE__ */ t("div", {
+		ref: r,
+		className: e("mx-auto w-full px-4 py-6 md:px-6 lg:px-8", !o && n[a], i),
+		...c,
+		children: s
+	});
+}
+r.displayName = "FormContainer";
 //#endregion
-export { i as FormContainer };
+export { r as FormContainer };
 //# sourceMappingURL=form-container.js.map

package/dist/tools/components/form/form-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-container.js","names":["~~React","React$1","~~containerWidths","FormContainer","props","cn","fullWidth","maxWidth","className"],"sources":["../../../../src/tools/components/form/form-container.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from \"../../lib/utils\";\n\nconst containerWidths = {\n sm: 'max-w-sm', // 384px\n md: 'max-w-md', // 448px\n lg: 'max-w-lg', // 512px\n xl: 'max-w-xl', // 576px\n '2xl': 'max-w-2xl', // 672px\n '3xl': 'max-w-3xl', // 768px\n '4xl': 'max-w-4xl', // 896px\n '5xl': 'max-w-5xl', // 1024px\n} as const;\n\nexport type FormContainerWidth = keyof typeof containerWidths;\n\nexport interface FormContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n コンテナの最大幅\n * @default \"4xl\" (896px)\n /\n maxWidth?: FormContainerWidth;\n /\n フルスクリーンモード (max-width制限なし)\n /\n fullWidth?: boolean;\n}\n\n/\n フォーム用の中央揃えコンテナ\n \n デスクトップ画面での読みやすさを確保するため、適切な最大幅で中央揃えにします。\n * レスポンシブパディングを提供し、一貫した余白を保ちます。\n \n @example\n * ```tsx\n * <FormContainer maxWidth=\"4xl\">\n * <form>...</form>\n * </FormContainer>\n * ```\n */\nexport ~~const~~ FormContainer ~~= React.forwardRef<HTMLDivElement, FormContainerProps>~~(\n ({ className, maxWidth = '4xl', fullWidth = false, children, ...props }, ~~ref~~) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'mx-auto w-full px-4 py-6 md:px-6 lg:px-8',\n !fullWidth && containerWidths[maxWidth],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n }~~,\n);\~~nFormContainer.displayName = 'FormContainer';\n"],"mappings":";;;;;AAGA,~~IAAME~~,IAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AACT,~~GA6BaC~~,~~IAAgBH~~,~~EAAM~~,~~YAChC~~,~~EAAE~~,cAAW,~~cAAW~~,~~OAAO,~~eAAY,~~IAAO~~,~~aAAU~~,~~GAAGI~~,~~KAAS~~,~~MAErE~~,kBAAC,OAAD;~~CACO~~;~~CACL~~,WAAWC,EACT,4CACA,CAACC,KAAaJ,EAAgBK,IAC9BC,CACF;~~CACA~~,GAAIJ;~~CAEH~~;~~AACE~~,CAAA~~,CAGX~~;AACA,EAAc,cAAc"}
1	+ {"version":3,"file":"form-container.js","names":["containerWidths","FormContainer","props","cn","fullWidth","maxWidth","className"],"sources":["../../../../src/tools/components/form/form-container.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from \"../../lib/utils\";\n\nconst containerWidths = {\n sm: 'max-w-sm', // 384px\n md: 'max-w-md', // 448px\n lg: 'max-w-lg', // 512px\n xl: 'max-w-xl', // 576px\n '2xl': 'max-w-2xl', // 672px\n '3xl': 'max-w-3xl', // 768px\n '4xl': 'max-w-4xl', // 896px\n '5xl': 'max-w-5xl', // 1024px\n} as const;\n\nexport type FormContainerWidth = keyof typeof containerWidths;\n\nexport interface FormContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n コンテナの最大幅\n * @default \"4xl\" (896px)\n /\n maxWidth?: FormContainerWidth;\n /\n フルスクリーンモード (max-width制限なし)\n /\n fullWidth?: boolean;\n}\n\n/\n フォーム用の中央揃えコンテナ\n \n デスクトップ画面での読みやすさを確保するため、適切な最大幅で中央揃えにします。\n * レスポンシブパディングを提供し、一貫した余白を保ちます。\n \n @example\n * ```tsx\n * <FormContainer maxWidth=\"4xl\">\n * <form>...</form>\n * </FormContainer>\n * ```\n */\nexport function FormContainer({\n ref,\n className,\n maxWidth = '4xl',\n fullWidth = false,\n children,\n ...props\n}: React.PropsWithoutRef<FormContainerProps> & React.RefAttributes<HTMLDivElement>) {\n return (\n <div\n ref={ref}\n className={cn(\n 'mx-auto w-full px-4 py-6 md:px-6 lg:px-8',\n !fullWidth && containerWidths[maxWidth],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n}\nFormContainer.displayName = 'FormContainer';\n"],"mappings":";;;;;AAGA,IAAMA,IAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AACT;AA6BA,SAAgBC,EAAc,EAC5B,QACA,cACA,cAAW,OACX,eAAY,IACZ,aACA,GAAGC,KAC+E;CAClF,OACE,kBAAC,OAAD;EACO;EACL,WAAWC,EACT,4CACA,CAACC,KAAaJ,EAAgBK,IAC9BC,CACF;EACA,GAAIJ;EAEH;CACE,CAAA;AAET;AACA,EAAc,cAAc"}

package/dist/tools/components/form/form-grid.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i={short:`col-span-1`,medium:`col-span-1`,long:`md:col-span-2`,full:`col-span-full`},a={sm:`gap-3`,md:`gap-4 md:gap-6`,lg:`gap-6 md:gap-8`},o={1:`grid-cols-1`,2:`grid-cols-1 md:grid-cols-2`,3:`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`},s=r.forwardRef(({className:e,columns:r=2,gap:i=`md`,children:s,...c},l)=>(0,n.jsx)(`div`,{ref:l,className:t.cn(`grid`,o[r],a[i],e),...c,children:s}));s.displayName=`FormGrid`;var c=r.forwardRef(({className:e,width:r=`medium`,children:a,...o},s)=>(0,n.jsx)(`div`,{ref:s,className:t.cn(i[r],e),...o,children:a}));c.displayName=`FormGridItem`,exports.FormGrid=s,exports.FormGridItem=c;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../ui/lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i={short:`col-span-1`,medium:`col-span-1`,long:`md:col-span-2`,full:`col-span-full`},a={sm:`gap-3`,md:`gap-4 md:gap-6`,lg:`gap-6 md:gap-8`},o={1:`grid-cols-1`,2:`grid-cols-1 md:grid-cols-2`,3:`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`};function s({ref:e,className:r,columns:i=2,gap:s=`md`,children:c,...l}){return(0,n.jsx)(`div`,{ref:e,className:t.cn(`grid`,o[i],a[s],r),...l,children:c})}s.displayName=`FormGrid`;function c({ref:e,className:r,width:a=`medium`,children:o,...s}){return(0,n.jsx)(`div`,{ref:e,className:t.cn(i[a],r),...s,children:o})}c.displayName=`FormGridItem`,exports.FormGrid=s,exports.FormGridItem=c;
 //# sourceMappingURL=form-grid.cjs.map

package/dist/tools/components/form/form-grid.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-grid.cjs","names":["~~React","~~cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","widthToSpan","gapClasses","columnClasses","FormGrid","props","columns","gap","className","FormGridItem","width"],"sources":["../../../../src/tools/components/form/form-grid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from \"../../lib/utils\";\nimport type { FieldWidth } from \"../../lib/schema\";\n\n/*\n フィールド幅に対応するグリッドスパン\n * - short: 1列 (最小幅)\n * - medium: 1列 (デフォルト)\n * - long: 2列にスパン\n * - full: 全列にスパン\n /\nconst widthToSpan: Record<FieldWidth, string> = {\n short: 'col-span-1',\n medium: 'col-span-1',\n long: 'md:col-span-2',\n full: 'col-span-full',\n};\n\n/\n Supported maximum column counts for {@link FormGrid}; smaller screens use fewer columns.\n /\nexport type GridColumns = 1 \| 2 \| 3;\n\n/\n Grid layout options and native div attributes for {@link FormGrid}.\n /\nexport interface FormGridProps extends React.HTMLAttributes<HTMLDivElement> {\n /\n Maximum columns: 1 always; 2 from md; 3 from lg (two from md).\n * @defaultValue 2\n /\n columns?: GridColumns;\n /\n Responsive gap preset: sm uses gap-3, md uses gap-4/md:gap-6, lg uses gap-6/md:gap-8.\n * @defaultValue \"md\"\n /\n gap?: 'sm' \| 'md' \| 'lg';\n}\n\nconst gapClasses = {\n sm: 'gap-3',\n md: 'gap-4 md:gap-6',\n lg: 'gap-6 md:gap-8',\n};\n\nconst columnClasses = {\n 1: 'grid-cols-1',\n 2: 'grid-cols-1 md:grid-cols-2',\n 3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n};\n\n/\n Renders a responsive form layout with configurable column and gap presets.\n * @param props - Grid settings and native div attributes, including children; see {@link FormGridProps}.\n * @returns A div containing the supplied children; fields and labels are owned by the caller.\n * @remarks The ref prop forwards to the rendered div. Import Appkit CSS. Pair controls with explicit labels; Input and Textarea do not accept a label prop.\n * @example\n * ```tsx\n * import { FormGrid, FormGridItem } from '@alneas/appkit-react/tools/form';\n * import { Input, Textarea } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function AddressFields() {\n * return <FormGrid columns={2} gap=\"md\">\n * <FormGridItem width=\"short\"><label htmlFor=\"postal-code\">Postal code</label>\n * <Input id=\"postal-code\" /></FormGridItem>\n * <FormGridItem width=\"full\"><label htmlFor=\"notes\">Notes</label>\n * <Textarea id=\"notes\" /></FormGridItem>\n * </FormGrid>;\n * }\n * ```\n /\nexport ~~const~~ FormGrid ~~= React.forwardRef<HTMLDivElement, FormGridProps>~~(\n ({ className, columns = 2, gap = 'md', children, ...props }, ~~ref~~) => {\n return (\n <div\n ref={ref}\n className={cn('grid', columnClasses[columns], gapClasses[gap], className)}\n {...props}\n >\n {children}\n </div>\n );\n }~~,\n);\~~nFormGrid.displayName = 'FormGrid';\n\n/\n Width hints and native div attributes for {@link FormGridItem}.\n /\nexport interface FormGridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /\n Span hint: short/medium use one column, long spans two from md, full spans all columns.\n * @defaultValue \"medium\"\n /\n width?: FieldWidth;\n}\n\n/\n Applies a field-width span hint to one child of {@link FormGrid}.\n * @param props - Width (default medium), children and native div attributes; see {@link FormGridItemProps}.\n * @returns A div with responsive span classes wrapping the supplied children.\n * @remarks The ref prop forwards to the rendered div. Import Appkit CSS. A long item can create implicit columns in a one-column grid at md;\n * choose width hints consistent with the parent grid. See the FormGrid example for labeled controls.\n * @example\n * ```tsx\n * import { FormGrid, FormGridItem } from '@alneas/appkit-react/tools/form';\n * import '@alneas/appkit-react/styles';\n * export function FullWidthContent() {\n * return <FormGrid><FormGridItem width=\"full\">Additional details</FormGridItem></FormGrid>;\n * }\n * ```\n */\nexport ~~const~~ FormGridItem ~~= React.forwardRef<HTMLDivElement, FormGridItemProps>~~(\n ({ className, width = 'medium', children, ...props }, ~~ref~~) => {\n return (\n <div ref={ref} className={cn(widthToSpan[width], className)} {...props}>\n {children}\n </div>\n );\n }~~,\n);\~~nFormGridItem.displayName = 'FormGridItem';\n"],"mappings":"A,yPAWA,~~IAAMM~~,EAA0C,CAC9C,MAAO,aACP,OAAQ,aACR,KAAM,gBACN,KAAM,eACR,EAuBMC,EAAa,CACjB,GAAI,QACJ,GAAI,iBACJ,GAAI,gBACN,EAEMC,EAAgB,CACpB,EAAG,cACH,EAAG,6BACH,EAAG,2CACL,~~EAuBaC~~,~~EAAWT~~,~~EAAM~~,~~YAC3B~~,~~CAAE~~,~~YAAW~~,UAAU,~~EAAG~~,MAAM,~~KAAM~~,~~WAAU~~,~~GAAGU~~,~~GAAS~~,~~KAEzD~~,EAAAN,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GAAG,OAAQO,EAAcG,GAAUJ,EAAWK,GAAMC,CAAS,EACxE,GAAIH,EAEH,UACE,CAAA,~~CAGX~~,~~EACA~~,EAAS,YAAc,WA4BvB,~~IAAaI~~,~~EAAed~~,~~EAAM~~,~~YAC/B~~,~~CAAE~~,~~YAAW,~~QAAQ,~~SAAU~~,~~WAAU~~,~~GAAGU~~,~~GAAS~~,~~KAElD~~,EAAAN,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,UAAWH,EAAAA,GAAGK,EAAYS,GAAQF,CAAS,EAAG,GAAIH,EAC9D,UACE,CAAA,~~CAGX~~,~~EACA~~,EAAa,YAAc,e"}
1	+ {"version":3,"file":"form-grid.cjs","names":["cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","widthToSpan","gapClasses","columnClasses","FormGrid","props","columns","gap","className","FormGridItem","width"],"sources":["../../../../src/tools/components/form/form-grid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from \"../../lib/utils\";\nimport type { FieldWidth } from \"../../lib/schema\";\n\n/*\n フィールド幅に対応するグリッドスパン\n * - short: 1列 (最小幅)\n * - medium: 1列 (デフォルト)\n * - long: 2列にスパン\n * - full: 全列にスパン\n /\nconst widthToSpan: Record<FieldWidth, string> = {\n short: 'col-span-1',\n medium: 'col-span-1',\n long: 'md:col-span-2',\n full: 'col-span-full',\n};\n\n/\n Supported maximum column counts for {@link FormGrid}; smaller screens use fewer columns.\n /\nexport type GridColumns = 1 \| 2 \| 3;\n\n/\n Grid layout options and native div attributes for {@link FormGrid}.\n /\nexport interface FormGridProps extends React.HTMLAttributes<HTMLDivElement> {\n /\n Maximum columns: 1 always; 2 from md; 3 from lg (two from md).\n * @defaultValue 2\n /\n columns?: GridColumns;\n /\n Responsive gap preset: sm uses gap-3, md uses gap-4/md:gap-6, lg uses gap-6/md:gap-8.\n * @defaultValue \"md\"\n /\n gap?: 'sm' \| 'md' \| 'lg';\n}\n\nconst gapClasses = {\n sm: 'gap-3',\n md: 'gap-4 md:gap-6',\n lg: 'gap-6 md:gap-8',\n};\n\nconst columnClasses = {\n 1: 'grid-cols-1',\n 2: 'grid-cols-1 md:grid-cols-2',\n 3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n};\n\n/\n Renders a responsive form layout with configurable column and gap presets.\n * @param props - Grid settings and native div attributes, including children; see {@link FormGridProps}.\n * @returns A div containing the supplied children; fields and labels are owned by the caller.\n * @remarks The ref prop forwards to the rendered div. Import Appkit CSS. Pair controls with explicit labels; Input and Textarea do not accept a label prop.\n * @example\n * ```tsx\n * import { FormGrid, FormGridItem } from '@alneas/appkit-react/tools/form';\n * import { Input, Textarea } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n \n export function AddressFields() {\n * return <FormGrid columns={2} gap=\"md\">\n * <FormGridItem width=\"short\"><label htmlFor=\"postal-code\">Postal code</label>\n * <Input id=\"postal-code\" /></FormGridItem>\n * <FormGridItem width=\"full\"><label htmlFor=\"notes\">Notes</label>\n * <Textarea id=\"notes\" /></FormGridItem>\n * </FormGrid>;\n * }\n * ```\n /\nexport function FormGrid({\n ref,\n className,\n columns = 2,\n gap = 'md',\n children,\n ...props\n}: React.PropsWithoutRef<FormGridProps> & React.RefAttributes<HTMLDivElement>) {\n return (\n <div\n ref={ref}\n className={cn('grid', columnClasses[columns], gapClasses[gap], className)}\n {...props}\n >\n {children}\n </div>\n );\n}\nFormGrid.displayName = 'FormGrid';\n\n/\n Width hints and native div attributes for {@link FormGridItem}.\n /\nexport interface FormGridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /\n Span hint: short/medium use one column, long spans two from md, full spans all columns.\n * @defaultValue \"medium\"\n /\n width?: FieldWidth;\n}\n\n/\n Applies a field-width span hint to one child of {@link FormGrid}.\n * @param props - Width (default medium), children and native div attributes; see {@link FormGridItemProps}.\n * @returns A div with responsive span classes wrapping the supplied children.\n * @remarks The ref prop forwards to the rendered div. Import Appkit CSS. A long item can create implicit columns in a one-column grid at md;\n * choose width hints consistent with the parent grid. See the FormGrid example for labeled controls.\n * @example\n * ```tsx\n * import { FormGrid, FormGridItem } from '@alneas/appkit-react/tools/form';\n * import '@alneas/appkit-react/styles';\n * export function FullWidthContent() {\n * return <FormGrid><FormGridItem width=\"full\">Additional details</FormGridItem></FormGrid>;\n * }\n * ```\n */\nexport function FormGridItem({\n ref,\n className,\n width = 'medium',\n children,\n ...props\n}: React.PropsWithoutRef<FormGridItemProps> & React.RefAttributes<HTMLDivElement>) {\n return (\n <div ref={ref} className={cn(widthToSpan[width], className)} {...props}>\n {children}\n </div>\n );\n}\nFormGridItem.displayName = 'FormGridItem';\n"],"mappings":"A,yPAWA,IAAMK,EAA0C,CAC9C,MAAO,aACP,OAAQ,aACR,KAAM,gBACN,KAAM,eACR,EAuBMC,EAAa,CACjB,GAAI,QACJ,GAAI,iBACJ,GAAI,gBACN,EAEMC,EAAgB,CACpB,EAAG,cACH,EAAG,6BACH,EAAG,2CACL,EAuBA,SAAgBC,EAAS,CACvB,MACA,YACA,UAAU,EACV,MAAM,KACN,WACA,GAAGC,GAC0E,CAC7E,OACE,EAAAN,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GAAG,OAAQO,EAAcG,GAAUJ,EAAWK,GAAMC,CAAS,EACxE,GAAIH,EAEH,UACE,CAAA,CAET,CACA,EAAS,YAAc,WA4BvB,SAAgBI,EAAa,CAC3B,MACA,YACA,QAAQ,SACR,WACA,GAAGJ,GAC8E,CACjF,OACE,EAAAN,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,UAAWH,EAAAA,GAAGK,EAAYS,GAAQF,CAAS,EAAG,GAAIH,EAC9D,UACE,CAAA,CAET,CACA,EAAa,YAAc,e"}

package/dist/tools/components/form/form-grid.d.cts CHANGED Viewed

@@ -40,7 +40,10 @@ export interface FormGridProps extends React.HTMLAttributes<HTMLDivElement> {
  * }
  * ```
  */
-export declare const FormGrid: React.ForwardRefExoticComponent<FormGridProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormGrid({ ref, className, columns, gap, children, ...props }: React.PropsWithoutRef<FormGridProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormGrid {
+    var displayName: string;
+}
 /**
  * Width hints and native div attributes for {@link FormGridItem}.
  */
@@ -66,4 +69,7 @@ export interface FormGridItemProps extends React.HTMLAttributes<HTMLDivElement>
  * }
  * ```
  */
-export declare const FormGridItem: React.ForwardRefExoticComponent<FormGridItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormGridItem({ ref, className, width, children, ...props }: React.PropsWithoutRef<FormGridItemProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormGridItem {
+    var displayName: string;
+}

package/dist/tools/components/form/form-grid.d.ts CHANGED Viewed

@@ -40,7 +40,10 @@ export interface FormGridProps extends React.HTMLAttributes<HTMLDivElement> {
  * }
  * ```
  */
-export declare const FormGrid: React.ForwardRefExoticComponent<FormGridProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormGrid({ ref, className, columns, gap, children, ...props }: React.PropsWithoutRef<FormGridProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormGrid {
+    var displayName: string;
+}
 /**
  * Width hints and native div attributes for {@link FormGridItem}.
  */
@@ -66,4 +69,7 @@ export interface FormGridItemProps extends React.HTMLAttributes<HTMLDivElement>
  * }
  * ```
  */
-export declare const FormGridItem: React.ForwardRefExoticComponent<FormGridItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare function FormGridItem({ ref, className, width, children, ...props }: React.PropsWithoutRef<FormGridItemProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace FormGridItem {
+    var displayName: string;
+}