4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T2471,import React, { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react'; import { Slot } from '@radix-ui/react-slot'; import { createFormStore, formStyleKeys, getFormFieldIds, normalizeFormValue, FormStore } from '../lib/core'; import type { FormBaseProps, FormControllerField, FormFieldError, FormRegisterOptions, FormSnapshot } from '../lib/core'; import { Label } from '../label'; import styles from './form.module.scss'; const FormStoreContext = createContext(null); function useFormStore(): FormStore { const store = useContext(FormStoreContext); if (!store) { throw new Error('Form sub-components must be used within

.'); } return store; } /** * 订阅表单存储快照，触发组件重渲染 */ function useFormSnapshot(store: FormStore): FormSnapshot { return useSyncExternalStore( (listener) => store.subscribe(listener), () => store.getSnapshot(), () => store.getSnapshot(), ); } /** * 返回当前表单实例 (FormStore)，可调用 handleSubmit / trigger / getValues 等 */ export function useForm(): FormStore { return useFormStore(); } const FormFieldContext = createContext<{ name: string }>({ name: '' }); interface FormItemContextValue { id: string; declaredDescriptionId: string | undefined; declaredMessageId: string | undefined; descriptionIds: () => string[]; messageIds: () => string[]; registerDescription: (id: string) => () => void; registerMessage: (id: string) => () => void; } const FormItemContext = createContext({ id: '', declaredDescriptionId: undefined, declaredMessageId: undefined, descriptionIds: () => [], messageIds: () => [], registerDescription: () => () => {}, registerMessage: () => () => {}, }); /** * 注册一个已挂载节点的 ID；返回值用于在卸载时注销。 */ function registerPresence(registry: Set, bump: () => void, registeredId: string) { registry.add(registeredId); bump(); let active = true; return () => { if (!active) return; active = false; registry.delete(registeredId); bump(); }; } const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect; export interface FormFieldResult { id: string; name: string; formItemId: string; formDescriptionId: string; formMessageId: string; error?: FormFieldError; isTouched: boolean; isDirty: boolean; } /** * 读取当前字段上下文 (name + 表单项 id + 错误信息) */ export function useFormField(): FormFieldResult { const fieldContext = useContext(FormFieldContext); const itemContext = useContext(FormItemContext); const store = useFormStore(); useFormSnapshot(store); if (!fieldContext.name) { throw new Error('useFormField should be used within '); } const ids = getFormFieldIds(itemContext.id); const fieldState = store.getFieldState(fieldContext.name); return { id: ids.id, name: fieldContext.name, formItemId: ids.formItemId, formDescriptionId: ids.formDescriptionId, formMessageId: ids.formMessageId, error: fieldState.error, isTouched: fieldState.isTouched, isDirty: fieldState.isDirty, }; } export interface FormProps extends FormBaseProps { children?: React.ReactNode; } /** * 表单容器：创建并提供 FormStore 上下文 */ function Form({ defaultValues = {}, resolver, form, children }: FormProps) { const [store] = useState(() => (form ? (form as FormStore) : createFormStore(defaultValues, resolver))); return {children}; } Form.displayName = 'Form'; export interface FormFieldProps { name: string; options?: FormRegisterOptions; render?: (props: { field: FormControllerField }) => React.ReactNode; children?: React.ReactNode; } /** 共享的空注册选项，避免默认值在每次渲染时产生新引用导致重复注册。 */ const EMPTY_REGISTER_OPTIONS: FormRegisterOptions = {}; /** * 表单字段：注册字段并提供字段渲染上下文 */ function FormField({ name, options = EMPTY_REGISTER_OPTIONS, render, children }: FormFieldProps) { const store = useFormStore(); useFormSnapshot(store); useEffect(() => { const registration = store.registerField(name, options); return registration.unregister; }, [store, name, options]); const field: FormControllerField = { name, value: store.getValue(name), onChange: (value: unknown) => store.setValue(name, normalizeFormValue(value, options.valueAsNumber)), onBlur: () => store.blurField(name), ref: name, }; return {render ? render({ field }) : children}; } FormField.displayName = 'FormField'; export interface FormItemProps extends React.HTMLAttributes { /** SSR 时预声明已渲染的描述节点 ID；同时作为 FormDescription 的默认 ID。 */ descriptionId?: string; /** SSR 时预声明错误消息节点 ID；同时作为 FormMessage 的默认 ID。 */ messageId?: string; } function FormItem({ className = '', descriptionId, messageId, ...props }: FormItemProps) { const id = useId(); const descriptionIdsRef = useRef(new Set(descriptionId === undefined ? [] : [descriptionId])); const messageIdsRef = useRef(new Set(messageId === undefined ? [] : [messageId])); const [presence, setPresence] = useState(0); const bump = useCallback(() => setPresence((version) => version + 1), []); useIsomorphicLayoutEffect(() => { if (descriptionId === undefined) return; return registerPresence(descriptionIdsRef.current, bump, descriptionId); }, [descriptionId, bump]); useIsomorphicLayoutEffect(() => { if (messageId === undefined) return; return registerPresence(messageIdsRef.current, bump, messageId); }, [messageId, bump]); const registerDescription = useCallback((registeredId: string) => registerPresence(descriptionIdsRef.current, bump, registeredId), [bump]); const registerMessage = useCallback((registeredId: string) => registerPresence(messageIdsRef.current, bump, registeredId), [bump]); const context: FormItemContextValue = { id, declaredDescriptionId: descriptionId, declaredMessageId: messageId, descriptionIds: () => { void presence; return [...descriptionIdsRef.current]; }, messageIds: () => { void presence; return [...messageIdsRef.current]; }, registerDescription, registerMessage, }; return (

); } FormItem.displayName = 'FormItem'; export interface FormLabelProps extends React.LabelHTMLAttributes {} function FormLabel({ className = '', ...props }: FormLabelProps) { const { error, formItemId } = useFormField(); return ; } FormLabel.displayName = 'FormLabel'; export interface FormControlProps extends React.ComponentProps {} function FormControl({ ...props }: FormControlProps) { const { error, formItemId } = useFormField(); const item = useContext(FormItemContext); const describedByIds = [...item.descriptionIds()]; if (error) describedByIds.push(...item.messageIds()); return 0 ? describedByIds.join(' ') : undefined} aria-invalid={!!error} {...props} />; } FormControl.displayName = 'FormControl'; export interface FormDescriptionProps extends React.HTMLAttributes {} function FormDescription({ className = '', ...props }: FormDescriptionProps) { const { formDescriptionId } = useFormField(); const item = useContext(FormItemContext); const effectiveId = props.id ?? item.declaredDescriptionId ?? formDescriptionId; const { registerDescription } = item; useIsomorphicLayoutEffect(() => registerDescription(effectiveId), [registerDescription, effectiveId]); return

; } FormDescription.displayName = 'FormDescription'; export interface FormMessageProps extends React.HTMLAttributes {} function FormMessage({ className = '', children, ...props }: FormMessageProps) { const { error, formMessageId } = useFormField(); const item = useContext(FormItemContext); const effectiveId = props.id ?? item.declaredMessageId ?? formMessageId; const { registerMessage } = item; const hasBody = error ? !!String(error.message ?? '') : !!children; useIsomorphicLayoutEffect(() => { if (!hasBody) return; return registerMessage(effectiveId); }, [registerMessage, effectiveId, hasBody]); if (!hasBody) { return null; } const body = error ? String(error.message ?? '') : children; return (

{body}

); } FormMessage.displayName = 'FormMessage'; export { Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }; export default Form; 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}]]}],["$","$L4b",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","label","@tile-ui/styles"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"packages/react/src/components/form/form.tsx","content":"$4d","type":"registry:ui","target":"components/ui/form/form.tsx"},{"path":"packages/styles/scss/components/form.module.scss","content":"@use '../../../styles/variables/colors' as *;\n\n.item {\n\tdisplay: grid;\n\tgap: $spacing-2;\n}\n\n.label {\n\tfont-size: $text-sm;\n\tfont-weight: $font-medium;\n\tline-height: $leading-none;\n\tcolor: $foreground;\n\n\t&[data-error='true'] {\n\t\tcolor: $destructive;\n\t}\n}\n\n.control {\n\tdisplay: block;\n}\n\n.description {\n\tmargin: 0;\n\tfont-size: $text-sm;\n\tline-height: $leading-normal;\n\tcolor: $muted-foreground;\n}\n\n.message {\n\tmargin: 0;\n\tfont-size: $text-sm;\n\tline-height: $leading-normal;\n\tcolor: $destructive;\n}\n","type":"registry:file","target":"components/ui/form/form.module.scss"},{"path":"packages/react/src/components/form/index.ts","content":"export {\n\tForm,\n\tFormItem,\n\tFormLabel,\n\tFormControl,\n\tFormDescription,\n\tFormMessage,\n\tFormField,\n\tuseForm,\n\tuseFormField,\n\ttype FormProps,\n\ttype FormFieldProps,\n\ttype FormItemProps,\n\ttype FormLabelProps,\n\ttype FormControlProps,\n\ttype FormDescriptionProps,\n\ttype FormMessageProps,\n\ttype FormFieldResult,\n} from './form';\n","type":"registry:ui","target":"components/ui/form/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]