@aviala-design/spiral 3.0.0 → 3.0.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.
- package/dist/chunk-CXGFGGGI.cjs.map +1 -1
- package/dist/form.cjs.map +1 -1
- package/dist/index.cjs.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/spiral-2/spiral-2/packages/ui/dist/chunk-CXGFGGGI.cjs","../src/lib/utils.ts","../src/components/form-field-context.ts","../src/components/typography.tsx","../src/components/typeface.tsx"],"names":["forwardRef","jsx"],"mappings":"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","file":"/home/runner/work/spiral-2/spiral-2/packages/ui/dist/chunk-CXGFGGGI.cjs","sourcesContent":[null,"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { createContext, useContext } from \"react\";\n\n/**\n * Kept free of `react-hook-form` imports so the controls that consume it\n * (Input, Textarea, Select, …) stay usable from the main entry without the\n * peer dependency installed. The RHF-aware pieces live in `form-field.tsx`,\n * which is only reachable through `@aviala-design/spiral/form`.\n */\ntype FormFieldControlContextValue = {\n /** True when FormField is showing an error tip (layout `error` or RHF message). */\n invalid: boolean;\n};\n\nexport const FormFieldControlContext =\n createContext<FormFieldControlContextValue | null>(null);\n\n/**\n * Resolve a control `error` prop against the surrounding FormField.\n * Explicit `error={true|false}` wins; otherwise inherits FormField tip invalidity.\n */\nexport function useResolvedControlError(errorProp?: boolean): boolean {\n const ctx = useContext(FormFieldControlContext);\n return errorProp ?? ctx?.invalid ?? false;\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { createElement, forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/utils\";\n\n/** Figma Components → System Composition → Typography (128:85) */\nexport type TypographyLevel =\n | \"display\"\n | \"headline1\"\n | \"headline2\"\n | \"title\"\n | \"subtitle\"\n | \"text\"\n | \"caption\";\n\nexport type TypographyContent = \"text\" | \"number\";\nexport type TypographyTone = \"default\" | \"white\";\n\nexport const typographyVariants = cva(\"aviala-typography\", {\n variants: {\n level: {\n display: \"aviala-typography--display\",\n headline1: \"aviala-typography--headline1\",\n headline2: \"aviala-typography--headline2\",\n title: \"aviala-typography--title\",\n subtitle: \"aviala-typography--subtitle\",\n text: \"aviala-typography--text\",\n caption: \"aviala-typography--caption\",\n },\n },\n defaultVariants: {\n level: \"text\",\n },\n});\n\nexport type TypographyProps = HTMLAttributes<HTMLElement> &\n VariantProps<typeof typographyVariants> & {\n /** Figma `Content` — text vs numeric styling */\n content?: TypographyContent;\n /** Figma `White` — light text on dark surfaces */\n tone?: TypographyTone;\n asChild?: boolean;\n as?:\n \"p\" | \"span\" | \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"label\";\n };\n\nexport const Typography = forwardRef<HTMLSpanElement, TypographyProps>(\n (\n {\n className,\n level = \"text\",\n content = \"text\",\n tone = \"default\",\n as: Tag = \"span\",\n asChild = false,\n ...props\n },\n ref\n ) => {\n const hostProps = {\n ...props,\n ref,\n className: cn(typographyVariants({ level }), className),\n \"data-content\": content,\n \"data-tone\": tone === \"white\" ? \"white\" : undefined,\n };\n\n if (asChild) return <Slot {...hostProps} />;\n\n // JSX resolves a union `as` tag to the intersection of every member's props,\n // which no single element ref can satisfy. createElement keeps the ref typed\n // as HTMLElement.\n return createElement(Tag, hostProps);\n }\n);\nTypography.displayName = \"Typography\";\n","import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport {\n Typography,\n type TypographyContent,\n type TypographyLevel,\n type TypographyTone,\n} from \"./typography\";\n\n/** Figma Components → System Composition → Typeface (527:56311) */\nexport type TypefaceContent =\n | \"allCustom\"\n | \"textCaption\"\n | \"textCaptionSubtitle\"\n | \"textTitle\"\n | \"textHeadline2\"\n | \"textHeadline1\";\n\ntype TypefaceLine = {\n level: TypographyLevel;\n content?: TypographyContent;\n tone?: TypographyTone;\n children: ReactNode;\n};\n\nconst typefaceLayouts: Record<TypefaceContent, TypefaceLine[]> = {\n allCustom: [\n { level: \"text\", children: null },\n { level: \"caption\", children: null },\n ],\n textCaption: [\n { level: \"text\", children: null },\n { level: \"caption\", children: null },\n ],\n textCaptionSubtitle: [\n { level: \"subtitle\", children: null },\n { level: \"text\", children: null },\n { level: \"caption\", children: null },\n ],\n textTitle: [\n { level: \"title\", children: null },\n { level: \"text\", children: null },\n ],\n textHeadline2: [\n { level: \"headline2\", children: null },\n { level: \"text\", children: null },\n ],\n textHeadline1: [\n { level: \"headline1\", children: null },\n { level: \"text\", children: null },\n ],\n};\n\nexport type TypefaceProps = Omit<HTMLAttributes<HTMLDivElement>, \"content\"> & {\n /** Figma `Content` preset */\n content?: TypefaceContent;\n /** Primary line — overrides preset first line */\n primary?: ReactNode;\n /** Secondary line — overrides preset second line */\n secondary?: ReactNode;\n /** Tertiary line — used by `textCaptionSubtitle` */\n tertiary?: ReactNode;\n /** Per-line content mode for numeric text */\n primaryContent?: TypographyContent;\n secondaryContent?: TypographyContent;\n tertiaryContent?: TypographyContent;\n tone?: TypographyTone;\n};\n\nexport const Typeface = forwardRef<HTMLDivElement, TypefaceProps>(\n (\n {\n className,\n content = \"allCustom\",\n primary,\n secondary,\n tertiary,\n primaryContent = \"text\",\n secondaryContent = \"text\",\n tertiaryContent = \"text\",\n tone = \"default\",\n children,\n ...props\n },\n ref\n ) => {\n const layout = typefaceLayouts[content];\n const values = resolveTypefaceValues(\n primary,\n secondary,\n tertiary,\n children\n );\n\n return (\n <div\n ref={ref}\n className={cn(\"aviala-typeface\", className)}\n data-content={content}\n {...props}\n >\n {layout.map((line, index) => {\n const value = values[index];\n if (value === undefined || value === null || value === false)\n return null;\n\n const lineContent =\n index === 0\n ? primaryContent\n : index === 1\n ? secondaryContent\n : tertiaryContent;\n\n return (\n <span\n key={`${line.level}-${index}`}\n className=\"aviala-typeface__line\"\n >\n <Typography level={line.level} content={lineContent} tone={tone}>\n {value}\n </Typography>\n </span>\n );\n })}\n </div>\n );\n }\n);\nTypeface.displayName = \"Typeface\";\n\nfunction resolveTypefaceValues(\n primary?: ReactNode,\n secondary?: ReactNode,\n tertiary?: ReactNode,\n children?: ReactNode\n): ReactNode[] {\n if (\n primary !== undefined ||\n secondary !== undefined ||\n tertiary !== undefined\n ) {\n return [primary, secondary, tertiary];\n }\n\n if (children == null || children === false) {\n return [];\n }\n\n if (Array.isArray(children)) {\n return children;\n }\n\n return [children];\n}\n\n/** Convenience helper for two-line label + caption pairs (Radio, Checkbox, etc.) */\nexport type TypefacePairProps = Omit<TypefaceProps, \"content\"> & {\n title: ReactNode;\n description?: ReactNode;\n};\n\nexport const TypefacePair = forwardRef<HTMLDivElement, TypefacePairProps>(\n ({ title, description, ...props }, ref) => (\n <Typeface\n ref={ref}\n content=\"textCaption\"\n primary={title}\n secondary={description}\n {...props}\n />\n )\n);\nTypefacePair.displayName = \"TypefacePair\";\n"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/developer-kit/developer-kit/packages/ui/dist/chunk-CXGFGGGI.cjs","../src/lib/utils.ts","../src/components/form-field-context.ts","../src/components/typography.tsx","../src/components/typeface.tsx"],"names":["forwardRef","jsx"],"mappings":"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","file":"/home/runner/work/developer-kit/developer-kit/packages/ui/dist/chunk-CXGFGGGI.cjs","sourcesContent":[null,"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { createContext, useContext } from \"react\";\n\n/**\n * Kept free of `react-hook-form` imports so the controls that consume it\n * (Input, Textarea, Select, …) stay usable from the main entry without the\n * peer dependency installed. The RHF-aware pieces live in `form-field.tsx`,\n * which is only reachable through `@aviala-design/spiral/form`.\n */\ntype FormFieldControlContextValue = {\n /** True when FormField is showing an error tip (layout `error` or RHF message). */\n invalid: boolean;\n};\n\nexport const FormFieldControlContext =\n createContext<FormFieldControlContextValue | null>(null);\n\n/**\n * Resolve a control `error` prop against the surrounding FormField.\n * Explicit `error={true|false}` wins; otherwise inherits FormField tip invalidity.\n */\nexport function useResolvedControlError(errorProp?: boolean): boolean {\n const ctx = useContext(FormFieldControlContext);\n return errorProp ?? ctx?.invalid ?? false;\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { createElement, forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/utils\";\n\n/** Figma Components → System Composition → Typography (128:85) */\nexport type TypographyLevel =\n | \"display\"\n | \"headline1\"\n | \"headline2\"\n | \"title\"\n | \"subtitle\"\n | \"text\"\n | \"caption\";\n\nexport type TypographyContent = \"text\" | \"number\";\nexport type TypographyTone = \"default\" | \"white\";\n\nexport const typographyVariants = cva(\"aviala-typography\", {\n variants: {\n level: {\n display: \"aviala-typography--display\",\n headline1: \"aviala-typography--headline1\",\n headline2: \"aviala-typography--headline2\",\n title: \"aviala-typography--title\",\n subtitle: \"aviala-typography--subtitle\",\n text: \"aviala-typography--text\",\n caption: \"aviala-typography--caption\",\n },\n },\n defaultVariants: {\n level: \"text\",\n },\n});\n\nexport type TypographyProps = HTMLAttributes<HTMLElement> &\n VariantProps<typeof typographyVariants> & {\n /** Figma `Content` — text vs numeric styling */\n content?: TypographyContent;\n /** Figma `White` — light text on dark surfaces */\n tone?: TypographyTone;\n asChild?: boolean;\n as?:\n \"p\" | \"span\" | \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"label\";\n };\n\nexport const Typography = forwardRef<HTMLSpanElement, TypographyProps>(\n (\n {\n className,\n level = \"text\",\n content = \"text\",\n tone = \"default\",\n as: Tag = \"span\",\n asChild = false,\n ...props\n },\n ref\n ) => {\n const hostProps = {\n ...props,\n ref,\n className: cn(typographyVariants({ level }), className),\n \"data-content\": content,\n \"data-tone\": tone === \"white\" ? \"white\" : undefined,\n };\n\n if (asChild) return <Slot {...hostProps} />;\n\n // JSX resolves a union `as` tag to the intersection of every member's props,\n // which no single element ref can satisfy. createElement keeps the ref typed\n // as HTMLElement.\n return createElement(Tag, hostProps);\n }\n);\nTypography.displayName = \"Typography\";\n","import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport {\n Typography,\n type TypographyContent,\n type TypographyLevel,\n type TypographyTone,\n} from \"./typography\";\n\n/** Figma Components → System Composition → Typeface (527:56311) */\nexport type TypefaceContent =\n | \"allCustom\"\n | \"textCaption\"\n | \"textCaptionSubtitle\"\n | \"textTitle\"\n | \"textHeadline2\"\n | \"textHeadline1\";\n\ntype TypefaceLine = {\n level: TypographyLevel;\n content?: TypographyContent;\n tone?: TypographyTone;\n children: ReactNode;\n};\n\nconst typefaceLayouts: Record<TypefaceContent, TypefaceLine[]> = {\n allCustom: [\n { level: \"text\", children: null },\n { level: \"caption\", children: null },\n ],\n textCaption: [\n { level: \"text\", children: null },\n { level: \"caption\", children: null },\n ],\n textCaptionSubtitle: [\n { level: \"subtitle\", children: null },\n { level: \"text\", children: null },\n { level: \"caption\", children: null },\n ],\n textTitle: [\n { level: \"title\", children: null },\n { level: \"text\", children: null },\n ],\n textHeadline2: [\n { level: \"headline2\", children: null },\n { level: \"text\", children: null },\n ],\n textHeadline1: [\n { level: \"headline1\", children: null },\n { level: \"text\", children: null },\n ],\n};\n\nexport type TypefaceProps = Omit<HTMLAttributes<HTMLDivElement>, \"content\"> & {\n /** Figma `Content` preset */\n content?: TypefaceContent;\n /** Primary line — overrides preset first line */\n primary?: ReactNode;\n /** Secondary line — overrides preset second line */\n secondary?: ReactNode;\n /** Tertiary line — used by `textCaptionSubtitle` */\n tertiary?: ReactNode;\n /** Per-line content mode for numeric text */\n primaryContent?: TypographyContent;\n secondaryContent?: TypographyContent;\n tertiaryContent?: TypographyContent;\n tone?: TypographyTone;\n};\n\nexport const Typeface = forwardRef<HTMLDivElement, TypefaceProps>(\n (\n {\n className,\n content = \"allCustom\",\n primary,\n secondary,\n tertiary,\n primaryContent = \"text\",\n secondaryContent = \"text\",\n tertiaryContent = \"text\",\n tone = \"default\",\n children,\n ...props\n },\n ref\n ) => {\n const layout = typefaceLayouts[content];\n const values = resolveTypefaceValues(\n primary,\n secondary,\n tertiary,\n children\n );\n\n return (\n <div\n ref={ref}\n className={cn(\"aviala-typeface\", className)}\n data-content={content}\n {...props}\n >\n {layout.map((line, index) => {\n const value = values[index];\n if (value === undefined || value === null || value === false)\n return null;\n\n const lineContent =\n index === 0\n ? primaryContent\n : index === 1\n ? secondaryContent\n : tertiaryContent;\n\n return (\n <span\n key={`${line.level}-${index}`}\n className=\"aviala-typeface__line\"\n >\n <Typography level={line.level} content={lineContent} tone={tone}>\n {value}\n </Typography>\n </span>\n );\n })}\n </div>\n );\n }\n);\nTypeface.displayName = \"Typeface\";\n\nfunction resolveTypefaceValues(\n primary?: ReactNode,\n secondary?: ReactNode,\n tertiary?: ReactNode,\n children?: ReactNode\n): ReactNode[] {\n if (\n primary !== undefined ||\n secondary !== undefined ||\n tertiary !== undefined\n ) {\n return [primary, secondary, tertiary];\n }\n\n if (children == null || children === false) {\n return [];\n }\n\n if (Array.isArray(children)) {\n return children;\n }\n\n return [children];\n}\n\n/** Convenience helper for two-line label + caption pairs (Radio, Checkbox, etc.) */\nexport type TypefacePairProps = Omit<TypefaceProps, \"content\"> & {\n title: ReactNode;\n description?: ReactNode;\n};\n\nexport const TypefacePair = forwardRef<HTMLDivElement, TypefacePairProps>(\n ({ title, description, ...props }, ref) => (\n <Typeface\n ref={ref}\n content=\"textCaption\"\n primary={title}\n secondary={description}\n {...props}\n />\n )\n);\nTypefacePair.displayName = \"TypefacePair\";\n"]}
|
package/dist/form.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/spiral-2/spiral-2/packages/ui/dist/form.cjs","../src/components/form-field.tsx"],"names":[],"mappings":"AAAA,6rBAAY;AACZ;AACE;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACA;ACTA;AACE;AACA;AAAA,6CACK;AACP;AACE;AACA;AACA;AAAA,8BAKK;AACP;AACE;AACA;AAAA,gDAQK;AAsGW,+CAAA;AAlClB,IAAM,gBAAA,EAAkB,+BAAA;AAAA,EACtB,CACE;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA,EAAY,UAAA;AAAA,IACZ,QAAA;AAAA,IACA,GAAG;AAAA,EACL,CAAA,EACA,GAAA,EAAA,GACG;AACH,IAAA,MAAM,QAAA,EAAU,0BAAA,CAAM;AACtB,IAAA,MAAM,QAAA,EAAU,CAAA,EAAA;AACC,IAAA;AACD,IAAA;AACV,IAAA;AACA,IAAA;AAGC,MAAA;AAAA,MAAA;AACC,QAAA;AACU,QAAA;AAEV,QAAA;AAAC,UAAA;AAAA,UAAA;AACK,YAAA;AACI,YAAA;AAEN,YAAA;AAEK,cAAA;AACA,cAAA;AAMD,YAAA;AAEN,YAAA;AAAW,UAAA;AACb,QAAA;AAAA,MAAA;AAGF,IAAA;AAAC,MAAA;AAAA,MAAA;AACK,QAAA;AACM,QAAA;AACF,QAAA;AAEN,QAAA;AAEK,UAAA;AAEC,UAAA;AAKF,QAAA;AAEK,QAAA;AAAA,MAAA;AAGb,IAAA;AAGJ,IAAA;AAAC,MAAA;AAAA,MAAA;AACC,QAAA;AACW,QAAA;AACX,QAAA;AACA,QAAA;AACI,QAAA;AAEH,QAAA;AAAA,UAAA;AACD,0BAAA;AACE,4BAAA;AAIE,YAAA;AAAC,cAAA;AAAA,cAAA;AACC,gBAAA;AACA,gBAAA;AAEA,gBAAA;AAAA,kCAAA;AAAC,oBAAA;AAAA,oBAAA;AAAA,sBAAA;AACW,sBAAA;AACH,sBAAA;AACC,sBAAA;AACG,oBAAA;AACb,kBAAA;AACA,kCAAA;AAAC,oBAAA;AAAA,oBAAA;AAAA,sBAAA;AACO,sBAAA;AACH,sBAAA;AACO,sBAAA;AAET,oBAAA;AACH,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAEA,YAAA;AAEF,YAAA;AACE,8BAAA;AAAC,gBAAA;AAAA,gBAAA;AACC,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AAAW,gBAAA;AACb,cAAA;AACA,8BAAA;AAAC,gBAAA;AAAA,gBAAA;AACC,kBAAA;AACA,kBAAA;AACA,kBAAA;AAEC,kBAAA;AAAA,gBAAA;AACH,cAAA;AAEA,YAAA;AACK,YAAA;AACX,UAAA;AAAA,QAAA;AAAA,MAAA;AACF,IAAA;AAEJ,EAAA;AACF;AACgB;AAEV;AAKF,EAAA;AACE,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACG,IAAA;AAGF,EAAA;AACc,IAAA;AACF,IAAA;AACb,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACD,IAAA;AAEC,IAAA;AAGA,IAAA;AAIJ,EAAA;AACF;AACoB;AAEX;AAIO,EAAA;AAEhB;AAEsB;AACJ,EAAA;AACV,IAAA;AACK,MAAA;AACT,IAAA;AACO,IAAA;AACT,EAAA;AACF;AA6ByB;AASf;AAGU;ADpIC;AACA;AACA;AACA;AACA","file":"/home/runner/work/spiral-2/spiral-2/packages/ui/dist/form.cjs","sourcesContent":[null,"import {\n SymbolInformationCircle,\n SymbolWrongCircle,\n} from \"@aviala-design/icons\";\nimport {\n forwardRef,\n useId,\n useMemo,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport {\n FormProvider,\n useController,\n type Control,\n type ControllerFieldState,\n type ControllerRenderProps,\n type FieldPath,\n type FieldValues,\n type UseControllerProps,\n type UseFormStateReturn,\n} from \"react-hook-form\";\nimport { cn } from \"../lib/utils\";\nimport { FormFieldControlContext } from \"./form-field-context\";\nimport { Typeface } from \"./typeface\";\nimport { Typography } from \"./typography\";\n\n/** Figma Components → System Composition → Form (527:57461 / 527:57641) */\nexport type FormFieldDirection = \"vertical\" | \"horizontal\";\n\nexport { useResolvedControlError } from \"./form-field-context\";\n\n/** Layout mode — the original props-driven wrapper */\nexport type FormFieldLayoutProps = HTMLAttributes<HTMLDivElement> & {\n label?: ReactNode;\n htmlFor?: string;\n description?: ReactNode;\n error?: ReactNode;\n info?: ReactNode;\n /** Optional Alert / Feedback under the control */\n alert?: ReactNode;\n required?: boolean;\n /** Figma `Direction` — vertical stacks label above control; horizontal places label beside */\n direction?: FormFieldDirection;\n children?: ReactNode;\n};\n\n/** Render arguments passed to `render` in react-hook-form mode */\nexport type FormFieldRenderProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n field: ControllerRenderProps<TFieldValues, TName>;\n fieldState: ControllerFieldState;\n formState: UseFormStateReturn<TFieldValues>;\n /**\n * Auto-generated control id. The field label is already wired to it via\n * `htmlFor` — pass it to the underlying input (`<Input id={id} />`).\n */\n id: string;\n};\n\n/**\n * react-hook-form mode — bind the field to a form via `name` (+ optional\n * `control`; falls back to the surrounding `<Form>` context). Validation\n * errors from the resolver (zod etc.) are rendered automatically unless the\n * `error` prop overrides them. Nested controls inherit the invalid state via\n * context unless they set an explicit `error` prop.\n */\nexport type FormFieldControlledProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = Omit<FormFieldLayoutProps, \"children\" | \"htmlFor\"> &\n Pick<\n UseControllerProps<TFieldValues, TName>,\n \"rules\" | \"defaultValue\" | \"shouldUnregister\" | \"disabled\"\n > & {\n name: TName;\n control?: Control<TFieldValues>;\n render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;\n /** Overrides the validation error message shown under the control */\n error?: ReactNode;\n };\n\nexport type FormFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = FormFieldLayoutProps | FormFieldControlledProps<TFieldValues, TName>;\n\nconst FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(\n (\n {\n className,\n label,\n htmlFor,\n description,\n error,\n info,\n alert,\n required,\n direction = \"vertical\",\n children,\n ...props\n },\n ref\n ) => {\n const reactId = useId();\n const labelId = `${reactId}-label`;\n const hasLabel = label != null && label !== \"\";\n const invalid = Boolean(error);\n const controlContext = useMemo(() => ({ invalid }), [invalid]);\n const labelNode =\n hasLabel || description ? (\n htmlFor ? (\n <label\n htmlFor={htmlFor}\n className=\"aviala-form__label aviala-form__label--control\"\n >\n <Typeface\n id={labelId}\n content=\"textCaption\"\n primary={\n hasLabel ? (\n <>\n {label}\n {required ? (\n <span className=\"aviala-form__required\" aria-hidden>\n *\n </span>\n ) : null}\n </>\n ) : undefined\n }\n secondary={description}\n />\n </label>\n ) : (\n <Typeface\n id={labelId}\n className=\"aviala-form__label\"\n content=\"textCaption\"\n primary={\n hasLabel ? (\n <>\n {label}\n {required ? (\n <span className=\"aviala-form__required\" aria-hidden>\n *\n </span>\n ) : null}\n </>\n ) : undefined\n }\n secondary={description}\n />\n )\n ) : null;\n\n return (\n <div\n ref={ref}\n className={cn(\"aviala-form\", className)}\n data-direction={direction}\n aria-labelledby={hasLabel ? labelId : undefined}\n {...props}\n >\n {labelNode}\n <div className=\"aviala-form__content\">\n <FormFieldControlContext.Provider value={controlContext}>\n {children}\n </FormFieldControlContext.Provider>\n {error ? (\n <div\n className=\"aviala-form__message aviala-form__message--error\"\n role=\"alert\"\n >\n <SymbolWrongCircle\n className=\"aviala-form__message-icon\"\n width={14}\n height={14}\n aria-hidden\n />\n <Typography\n level=\"caption\"\n as=\"p\"\n className=\"aviala-form__message-text\"\n >\n {error}\n </Typography>\n </div>\n ) : null}\n {info ? (\n <div className=\"aviala-form__message aviala-form__message--info\">\n <SymbolInformationCircle\n className=\"aviala-form__message-icon\"\n width={14}\n height={14}\n aria-hidden\n />\n <Typography\n level=\"caption\"\n as=\"p\"\n className=\"aviala-form__message-text\"\n >\n {info}\n </Typography>\n </div>\n ) : null}\n {alert ? <div className=\"aviala-form__alert\">{alert}</div> : null}\n </div>\n </div>\n );\n }\n);\nFormFieldLayout.displayName = \"FormFieldLayout\";\n\nconst FormFieldControlled = forwardRef<\n HTMLDivElement,\n FormFieldControlledProps\n>(\n (\n {\n control,\n name,\n rules,\n defaultValue,\n shouldUnregister,\n disabled,\n render,\n error,\n ...layoutProps\n },\n ref\n ) => {\n const id = useId();\n const { field, fieldState, formState } = useController({\n name,\n control,\n rules,\n defaultValue,\n shouldUnregister,\n disabled,\n });\n const message =\n error !== undefined ? error : (fieldState.error?.message ?? null);\n\n return (\n <FormFieldLayout ref={ref} {...layoutProps} htmlFor={id} error={message}>\n {render({ field, fieldState, formState, id })}\n </FormFieldLayout>\n );\n }\n);\nFormFieldControlled.displayName = \"FormFieldControlled\";\n\nfunction isControlledProps(\n props: FormFieldProps\n): props is FormFieldControlledProps {\n return (\n \"render\" in props && typeof props.render === \"function\" && \"name\" in props\n );\n}\n\nconst FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n (props, ref) => {\n if (isControlledProps(props)) {\n return <FormFieldControlled ref={ref} {...props} />;\n }\n return <FormFieldLayout ref={ref} {...props} />;\n }\n);\n\n/**\n * FormField — layout wrapper around a form control, or a react-hook-form\n * bound field when given `name` + `render` (shadcn-style).\n *\n * When an error tip is shown, nested Spiral controls that support `error`\n * (Input, Textarea, SelectTrigger, …) inherit the invalid state unless they\n * set an explicit `error` prop.\n *\n * @example Layout mode\n * <FormField label=\"Email\" htmlFor=\"email\" error=\"Required\">\n * <Input id=\"email\" />\n * </FormField>\n *\n * @example react-hook-form + zod mode\n * <Form {...form}>\n * <form onSubmit={form.handleSubmit(onSubmit)}>\n * <FormField\n * control={form.control}\n * name=\"email\"\n * label=\"Email\"\n * render={({ field, id }) => (\n * <Input id={id} {...field} />\n * )}\n * />\n * </form>\n * </Form>\n */\nexport const FormField = FormFieldRoot as {\n <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n >(\n props: FormFieldProps<TFieldValues, TName> & { ref?: Ref<HTMLDivElement> }\n ): ReactElement | null;\n displayName?: string;\n};\nFormField.displayName = \"FormField\";\n\n/** Alias of react-hook-form's FormProvider — wrap your form with it (shadcn-style `<Form {...form}>`) */\nexport const Form = FormProvider;\n"]}
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/developer-kit/developer-kit/packages/ui/dist/form.cjs","../src/components/form-field.tsx"],"names":[],"mappings":"AAAA,6rBAAY;AACZ;AACE;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACA;ACTA;AACE;AACA;AAAA,6CACK;AACP;AACE;AACA;AACA;AAAA,8BAKK;AACP;AACE;AACA;AAAA,gDAQK;AAsGW,+CAAA;AAlClB,IAAM,gBAAA,EAAkB,+BAAA;AAAA,EACtB,CACE;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA,EAAY,UAAA;AAAA,IACZ,QAAA;AAAA,IACA,GAAG;AAAA,EACL,CAAA,EACA,GAAA,EAAA,GACG;AACH,IAAA,MAAM,QAAA,EAAU,0BAAA,CAAM;AACtB,IAAA,MAAM,QAAA,EAAU,CAAA,EAAA;AACC,IAAA;AACD,IAAA;AACV,IAAA;AACA,IAAA;AAGC,MAAA;AAAA,MAAA;AACC,QAAA;AACU,QAAA;AAEV,QAAA;AAAC,UAAA;AAAA,UAAA;AACK,YAAA;AACI,YAAA;AAEN,YAAA;AAEK,cAAA;AACA,cAAA;AAMD,YAAA;AAEN,YAAA;AAAW,UAAA;AACb,QAAA;AAAA,MAAA;AAGF,IAAA;AAAC,MAAA;AAAA,MAAA;AACK,QAAA;AACM,QAAA;AACF,QAAA;AAEN,QAAA;AAEK,UAAA;AAEC,UAAA;AAKF,QAAA;AAEK,QAAA;AAAA,MAAA;AAGb,IAAA;AAGJ,IAAA;AAAC,MAAA;AAAA,MAAA;AACC,QAAA;AACW,QAAA;AACX,QAAA;AACA,QAAA;AACI,QAAA;AAEH,QAAA;AAAA,UAAA;AACD,0BAAA;AACE,4BAAA;AAIE,YAAA;AAAC,cAAA;AAAA,cAAA;AACC,gBAAA;AACA,gBAAA;AAEA,gBAAA;AAAA,kCAAA;AAAC,oBAAA;AAAA,oBAAA;AAAA,sBAAA;AACW,sBAAA;AACH,sBAAA;AACC,sBAAA;AACG,oBAAA;AACb,kBAAA;AACA,kCAAA;AAAC,oBAAA;AAAA,oBAAA;AAAA,sBAAA;AACO,sBAAA;AACH,sBAAA;AACO,sBAAA;AAET,oBAAA;AACH,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAEA,YAAA;AAEF,YAAA;AACE,8BAAA;AAAC,gBAAA;AAAA,gBAAA;AACC,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AAAW,gBAAA;AACb,cAAA;AACA,8BAAA;AAAC,gBAAA;AAAA,gBAAA;AACC,kBAAA;AACA,kBAAA;AACA,kBAAA;AAEC,kBAAA;AAAA,gBAAA;AACH,cAAA;AAEA,YAAA;AACK,YAAA;AACX,UAAA;AAAA,QAAA;AAAA,MAAA;AACF,IAAA;AAEJ,EAAA;AACF;AACgB;AAEV;AAKF,EAAA;AACE,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACG,IAAA;AAGF,EAAA;AACc,IAAA;AACF,IAAA;AACb,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACD,IAAA;AAEC,IAAA;AAGA,IAAA;AAIJ,EAAA;AACF;AACoB;AAEX;AAIO,EAAA;AAEhB;AAEsB;AACJ,EAAA;AACV,IAAA;AACK,MAAA;AACT,IAAA;AACO,IAAA;AACT,EAAA;AACF;AA6ByB;AASf;AAGU;ADpIC;AACA;AACA;AACA;AACA","file":"/home/runner/work/developer-kit/developer-kit/packages/ui/dist/form.cjs","sourcesContent":[null,"import {\n SymbolInformationCircle,\n SymbolWrongCircle,\n} from \"@aviala-design/icons\";\nimport {\n forwardRef,\n useId,\n useMemo,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport {\n FormProvider,\n useController,\n type Control,\n type ControllerFieldState,\n type ControllerRenderProps,\n type FieldPath,\n type FieldValues,\n type UseControllerProps,\n type UseFormStateReturn,\n} from \"react-hook-form\";\nimport { cn } from \"../lib/utils\";\nimport { FormFieldControlContext } from \"./form-field-context\";\nimport { Typeface } from \"./typeface\";\nimport { Typography } from \"./typography\";\n\n/** Figma Components → System Composition → Form (527:57461 / 527:57641) */\nexport type FormFieldDirection = \"vertical\" | \"horizontal\";\n\nexport { useResolvedControlError } from \"./form-field-context\";\n\n/** Layout mode — the original props-driven wrapper */\nexport type FormFieldLayoutProps = HTMLAttributes<HTMLDivElement> & {\n label?: ReactNode;\n htmlFor?: string;\n description?: ReactNode;\n error?: ReactNode;\n info?: ReactNode;\n /** Optional Alert / Feedback under the control */\n alert?: ReactNode;\n required?: boolean;\n /** Figma `Direction` — vertical stacks label above control; horizontal places label beside */\n direction?: FormFieldDirection;\n children?: ReactNode;\n};\n\n/** Render arguments passed to `render` in react-hook-form mode */\nexport type FormFieldRenderProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n field: ControllerRenderProps<TFieldValues, TName>;\n fieldState: ControllerFieldState;\n formState: UseFormStateReturn<TFieldValues>;\n /**\n * Auto-generated control id. The field label is already wired to it via\n * `htmlFor` — pass it to the underlying input (`<Input id={id} />`).\n */\n id: string;\n};\n\n/**\n * react-hook-form mode — bind the field to a form via `name` (+ optional\n * `control`; falls back to the surrounding `<Form>` context). Validation\n * errors from the resolver (zod etc.) are rendered automatically unless the\n * `error` prop overrides them. Nested controls inherit the invalid state via\n * context unless they set an explicit `error` prop.\n */\nexport type FormFieldControlledProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = Omit<FormFieldLayoutProps, \"children\" | \"htmlFor\"> &\n Pick<\n UseControllerProps<TFieldValues, TName>,\n \"rules\" | \"defaultValue\" | \"shouldUnregister\" | \"disabled\"\n > & {\n name: TName;\n control?: Control<TFieldValues>;\n render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;\n /** Overrides the validation error message shown under the control */\n error?: ReactNode;\n };\n\nexport type FormFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = FormFieldLayoutProps | FormFieldControlledProps<TFieldValues, TName>;\n\nconst FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(\n (\n {\n className,\n label,\n htmlFor,\n description,\n error,\n info,\n alert,\n required,\n direction = \"vertical\",\n children,\n ...props\n },\n ref\n ) => {\n const reactId = useId();\n const labelId = `${reactId}-label`;\n const hasLabel = label != null && label !== \"\";\n const invalid = Boolean(error);\n const controlContext = useMemo(() => ({ invalid }), [invalid]);\n const labelNode =\n hasLabel || description ? (\n htmlFor ? (\n <label\n htmlFor={htmlFor}\n className=\"aviala-form__label aviala-form__label--control\"\n >\n <Typeface\n id={labelId}\n content=\"textCaption\"\n primary={\n hasLabel ? (\n <>\n {label}\n {required ? (\n <span className=\"aviala-form__required\" aria-hidden>\n *\n </span>\n ) : null}\n </>\n ) : undefined\n }\n secondary={description}\n />\n </label>\n ) : (\n <Typeface\n id={labelId}\n className=\"aviala-form__label\"\n content=\"textCaption\"\n primary={\n hasLabel ? (\n <>\n {label}\n {required ? (\n <span className=\"aviala-form__required\" aria-hidden>\n *\n </span>\n ) : null}\n </>\n ) : undefined\n }\n secondary={description}\n />\n )\n ) : null;\n\n return (\n <div\n ref={ref}\n className={cn(\"aviala-form\", className)}\n data-direction={direction}\n aria-labelledby={hasLabel ? labelId : undefined}\n {...props}\n >\n {labelNode}\n <div className=\"aviala-form__content\">\n <FormFieldControlContext.Provider value={controlContext}>\n {children}\n </FormFieldControlContext.Provider>\n {error ? (\n <div\n className=\"aviala-form__message aviala-form__message--error\"\n role=\"alert\"\n >\n <SymbolWrongCircle\n className=\"aviala-form__message-icon\"\n width={14}\n height={14}\n aria-hidden\n />\n <Typography\n level=\"caption\"\n as=\"p\"\n className=\"aviala-form__message-text\"\n >\n {error}\n </Typography>\n </div>\n ) : null}\n {info ? (\n <div className=\"aviala-form__message aviala-form__message--info\">\n <SymbolInformationCircle\n className=\"aviala-form__message-icon\"\n width={14}\n height={14}\n aria-hidden\n />\n <Typography\n level=\"caption\"\n as=\"p\"\n className=\"aviala-form__message-text\"\n >\n {info}\n </Typography>\n </div>\n ) : null}\n {alert ? <div className=\"aviala-form__alert\">{alert}</div> : null}\n </div>\n </div>\n );\n }\n);\nFormFieldLayout.displayName = \"FormFieldLayout\";\n\nconst FormFieldControlled = forwardRef<\n HTMLDivElement,\n FormFieldControlledProps\n>(\n (\n {\n control,\n name,\n rules,\n defaultValue,\n shouldUnregister,\n disabled,\n render,\n error,\n ...layoutProps\n },\n ref\n ) => {\n const id = useId();\n const { field, fieldState, formState } = useController({\n name,\n control,\n rules,\n defaultValue,\n shouldUnregister,\n disabled,\n });\n const message =\n error !== undefined ? error : (fieldState.error?.message ?? null);\n\n return (\n <FormFieldLayout ref={ref} {...layoutProps} htmlFor={id} error={message}>\n {render({ field, fieldState, formState, id })}\n </FormFieldLayout>\n );\n }\n);\nFormFieldControlled.displayName = \"FormFieldControlled\";\n\nfunction isControlledProps(\n props: FormFieldProps\n): props is FormFieldControlledProps {\n return (\n \"render\" in props && typeof props.render === \"function\" && \"name\" in props\n );\n}\n\nconst FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n (props, ref) => {\n if (isControlledProps(props)) {\n return <FormFieldControlled ref={ref} {...props} />;\n }\n return <FormFieldLayout ref={ref} {...props} />;\n }\n);\n\n/**\n * FormField — layout wrapper around a form control, or a react-hook-form\n * bound field when given `name` + `render` (shadcn-style).\n *\n * When an error tip is shown, nested Spiral controls that support `error`\n * (Input, Textarea, SelectTrigger, …) inherit the invalid state unless they\n * set an explicit `error` prop.\n *\n * @example Layout mode\n * <FormField label=\"Email\" htmlFor=\"email\" error=\"Required\">\n * <Input id=\"email\" />\n * </FormField>\n *\n * @example react-hook-form + zod mode\n * <Form {...form}>\n * <form onSubmit={form.handleSubmit(onSubmit)}>\n * <FormField\n * control={form.control}\n * name=\"email\"\n * label=\"Email\"\n * render={({ field, id }) => (\n * <Input id={id} {...field} />\n * )}\n * />\n * </form>\n * </Form>\n */\nexport const FormField = FormFieldRoot as {\n <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n >(\n props: FormFieldProps<TFieldValues, TName> & { ref?: Ref<HTMLDivElement> }\n ): ReactElement | null;\n displayName?: string;\n};\nFormField.displayName = \"FormField\";\n\n/** Alias of react-hook-form's FormProvider — wrap your form with it (shadcn-style `<Form {...form}>`) */\nexport const Form = FormProvider;\n"]}
|