@morze/ui 0.2.11 → 0.3.1

package/dist/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/label.tsx","../../src/form/index.tsx"],"names":["LabelPrimitive","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\n\n/**\n * Class name joiner. Morze UI ships plain, prefixed CSS rather than utility\n * classes, so there is nothing to merge — clsx is enough.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return clsx(inputs)\n}\n\nexport type Tone = 'primary' | 'accent' | 'danger' | 'warning' | 'info' | 'success'\n","'use client'\n\nimport * as React from 'react'\nimport { Label as LabelPrimitive } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return <LabelPrimitive.Root data-slot=\"label\" className={cn('mz-label', className)} {...props} />\n}\n\nexport { Label }\n","'use client'\n\nimport * as React from 'react'\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form'\nimport { Slot } from 'radix-ui'\n\nimport { cn } from '../lib/utils'\nimport { Label } from '../components/label'\n\n/**\n * React Hook Form bindings.\n *\n *   import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage }\n *     from '@morze/ui/form'\n *\n * They live behind their own entry point because `react-hook-form` is an\n * optional peer dependency: an application that does not use it should not\n * carry it, and the main bundle stays free of every form library.\n *\n * What this adds over `Field` is the wiring nobody enjoys writing by hand —\n * one generated id per field, `htmlFor` on the label, `aria-describedby`\n * pointing at the description and the message, and `aria-invalid` flipped by\n * the field's own validation state.\n */\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = { name: TName }\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | null>(null)\nconst FormItemContext = React.createContext<{ id: string } | null>(null)\n\nfunction FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({ ...props }: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\n/**\n * The ids and validation state of the field this is called inside.\n *\n * The state is read through `useFormState` scoped to this one name, so a\n * keystroke in one field does not re-render every other field's label.\n */\nfunction useFormField() {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n\n  if (!fieldContext) throw new Error('useFormField must be used inside a <FormField>')\n  if (!itemContext) throw new Error('useFormField must be used inside a <FormItem>')\n\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\nfunction FormItem({ className, ...props }: React.ComponentProps<'div'>) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div data-slot=\"form-item\" className={cn('mz-field', className)} {...props} />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(error && 'mz-label--error', className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\n/**\n * Wraps the control itself — an `Input`, a `SelectTrigger`, anything. It\n * renders nothing of its own; it only stamps the id and the aria wiring onto\n * whatever child it is given.\n */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn('mz-field__hint', className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * The validation message. It renders the field's error when there is one and\n * `children` otherwise, and disappears entirely when there is neither — so a\n * form does not reserve a blank line under every input.\n */\nfunction FormMessage({ className, children, ...props }: React.ComponentProps<'p'>) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error.message ?? '') : children\n\n  if (!body) return null\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      role=\"alert\"\n      className={cn('mz-field__error', className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  Form,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  useFormField,\n}\n"]}