{"version":3,"file":"Field.cjs","sources":["../../../../../src/components/ui/field/Field.tsx"],"sourcesContent":["import { forwardRef, isValidElement, useId, useMemo, Children } from 'react';\nimport type { FieldProps } from \"./FieldProps\";\nimport { ThemedComponent } from \"../../themedComponent\";\nimport { useTheme } from \"../../themeContext\";\nimport { pickFirstTruthyKeyByCategory, collectTruthyKeysByCategory, MULTI_VALUE_CATEGORIES, resetConflictKey } from \"../../utils/componentUtils\";\nimport { ComponentKeys } from \"../props\";\nimport { LabelSizeContext } from \"../label/LabelSizeContext\";\nimport { FieldControlContext } from \"./FieldContext\";\nimport { FIELD_CATEGORIES } from \"./FieldCategories\";\nimport { resolveControl, FIELD_CONTROLS } from \"./fieldControls\";\nimport { defaultFieldTheme } from \"./defaultFieldTheme\";\nimport { defaultFieldLabelTheme } from \"./defaultFieldLabelTheme\";\nimport { defaultFieldControlRowTheme } from \"./defaultFieldControlRowTheme\";\nimport { defaultFieldDescriptionTheme } from \"./defaultFieldDescriptionTheme\";\nimport { defaultFieldErrorTheme } from \"./defaultFieldErrorTheme\";\n\n// Surface props forward to a self-rendered control instead of painting the wrapper.\nconst SURFACE_CATEGORIES = ['appearance', 'variant', 'shape', 'border', 'ring', 'shadow', 'transparent'] as const;\nconst SURFACE_KEYS = new Set(SURFACE_CATEGORIES.flatMap(c => ComponentKeys[c]));\nconst CONTROL_KEYS = new Set(ComponentKeys.control);\nconst LAYOUT_KEYS = new Set(\n FIELD_CATEGORIES.flatMap(c => ComponentKeys[c] as readonly string[])\n .filter(k => !SURFACE_KEYS.has(k) && !CONTROL_KEYS.has(k))\n);\nconst CONTROL_COMPONENTS = new Set(Object.values(FIELD_CONTROLS).map(d => d.Component));\n\n// Help and error text sit one step below the field, so they stay subordinate at every size.\nconst HELP_SIZE: Record = { xs: 'xs', sm: 'xs', md: 'sm', lg: 'md', xl: 'lg' };\n\ntype FieldElement = HTMLDivElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n// Partitions incoming props into the self-rendered control's props and the wrapper's props.\nfunction splitFieldProps(\n rest: Record,\n control: ReturnType\n): { controlProps: Record; wrapperProps: Record } {\n if (!control) return { controlProps: {}, wrapperProps: rest };\n\n const controlProps: Record = {};\n const wrapperProps: Record = {};\n for (const [key, value] of Object.entries(rest)) {\n if (SURFACE_KEYS.has(key) || CONTROL_KEYS.has(key)) continue;\n if (LAYOUT_KEYS.has(key) || key === 'className' || key === 'tag') { wrapperProps[key] = value; continue; }\n controlProps[key] = value;\n }\n if (control.inputType) { controlProps.type = control.inputType; }\n\n // empty defaults: the wrapper's own sharp/noBorder/noInsetRing must not reach the control\n for (const category of SURFACE_CATEGORIES) {\n if (category === 'border') {\n for (const key of collectTruthyKeysByCategory(rest, {}, 'border')) {\n controlProps[key] = true;\n }\n continue;\n }\n const key = pickFirstTruthyKeyByCategory(rest, {}, category);\n if (key) { controlProps[key] = true; }\n }\n\n return { controlProps, wrapperProps };\n}\n\nexport const Field = forwardRef(\n function Field({ label, description, error, children, type, ...rest }, ref) {\n const theme = useTheme();\n const fieldTheme = theme?.field.main ?? defaultFieldTheme;\n const labelTheme = theme?.field.label ?? defaultFieldLabelTheme;\n const controlRowTheme = theme?.field.controlRow ?? defaultFieldControlRowTheme;\n const descriptionTheme = theme?.field.description ?? defaultFieldDescriptionTheme;\n const errorTheme = theme?.field.error ?? defaultFieldErrorTheme;\n\n const control = resolveControl(\n { ...rest, type } as Record,\n fieldTheme.defaults as Record\n );\n\n if (process.env.NODE_ENV !== 'production' && control) {\n const booleanKey = pickFirstTruthyKeyByCategory(rest as Record, {}, 'control');\n if (type && booleanKey && booleanKey !== control.key) {\n console.warn(`VaneUI: Field has both type=\"${type}\" and ${booleanKey} — type=\"${type}\" wins.`);\n }\n // the split loop hides these categories from the engine's own conflict check, so Field re-runs it\n for (const category of ['control', ...SURFACE_CATEGORIES] as const) {\n const truthyKeys = ComponentKeys[category].filter(k => (rest as Record)[k] === true);\n if (MULTI_VALUE_CATEGORIES.has(category)) {\n const reset = resetConflictKey(truthyKeys);\n if (reset) {\n console.warn(\n `VaneUI: conflicting ${category} props on : ${truthyKeys.join(', ')} — \"${reset}\" resets and wins over the side toggles. Pass either side toggles or a reset, not both.`\n );\n }\n continue;\n }\n if (truthyKeys.length > 1) {\n console.warn(\n `VaneUI: conflicting ${category} props on : ${truthyKeys.join(', ')} — \"${truthyKeys[0]}\" wins (canonical key order, not JSX order). Pass only one prop per category.`\n );\n }\n }\n const childrenArray = Children.toArray(children);\n const conflictChild = childrenArray.find(c => isValidElement(c) && CONTROL_COMPONENTS.has(c.type));\n if (conflictChild && isValidElement(conflictChild)) {\n const childType = conflictChild.type as { displayName?: string; name?: string };\n const childName = childType.displayName || childType.name || 'control';\n console.warn(`VaneUI: Field renders its own ${control.key}, so the <${childName}/> child is ignored.`);\n }\n }\n\n // useId embeds colons, which are not valid in a CSS selector fragment\n const uid = useId().replace(/:/g, '-');\n // in self-rendering mode children are the control's own content, not the control\n const childId = !control && isValidElement(children)\n ? (children.props as { id?: string }).id\n : undefined;\n // an explicit id in self-rendering mode must reach the control, or `for` dangles\n const explicitId = control ? (rest as { id?: string }).id : undefined;\n const controlId = childId ?? explicitId ?? `field-${uid}`;\n const labelId = `${controlId}-label`;\n const descriptionId = `${controlId}-description`;\n const errorId = `${controlId}-error`;\n\n const hasLabel = label !== undefined && label !== null && label !== false;\n const hasDescription = description !== undefined && description !== null && description !== false;\n const hasError = error !== undefined && error !== null && error !== false;\n\n const fieldControlValue = useMemo(() => ({\n id: controlId,\n labelId,\n describedBy: [hasDescription ? descriptionId : null, hasError ? errorId : null]\n .filter(Boolean).join(' ') || undefined,\n invalid: hasError,\n }), [controlId, labelId, descriptionId, errorId, hasDescription, hasError]);\n\n // Field's own size becomes the control's default, reusing Label's channel so\n // controls already wired for