@refraction-ui/react 0.4.1 → 0.5.0

package/dist/form.js

@@ -0,0 +1,196 @@
+import { cva, cn } from './chunk-ZWRGVWUY.js';
+import * as React2 from 'react';
+import { useFormContext, useFormState, FormProvider, Controller } from 'react-hook-form';
+export { Controller, FormProvider, useController, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
+import { jsx } from 'react/jsx-runtime';
+
+var Slot = React2.forwardRef(function Slot2(props, forwardedRef) {
+  const { children, ...slotProps } = props;
+  if (!React2.isValidElement(children)) {
+    return null;
+  }
+  const childProps = children.props ?? {};
+  const mergedProps = mergeProps(slotProps, childProps);
+  let childRef = childProps.ref;
+  if (childRef === void 0 && !("ref" in childProps)) {
+    childRef = children.ref;
+  }
+  const mergedRef = composeRefs(forwardedRef, childRef);
+  return React2.cloneElement(
+    children,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    { ...mergedProps, ref: mergedRef }
+  );
+});
+Slot.displayName = "Slot";
+function mergeProps(slotProps, childProps) {
+  const merged = { ...slotProps };
+  for (const key of Object.keys(childProps)) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (/^on[A-Z]/.test(key) && typeof slotValue === "function" && typeof childValue === "function") {
+      merged[key] = (...args) => {
+        const child = childValue;
+        const slot = slotValue;
+        child(...args);
+        slot(...args);
+      };
+    } else if (key === "className") {
+      merged[key] = [slotValue, childValue].filter(Boolean).join(" ");
+    } else if (key === "style") {
+      merged[key] = { ...slotValue, ...childValue };
+    } else if (childValue !== void 0) {
+      merged[key] = childValue;
+    }
+  }
+  return merged;
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref != null) {
+        const objectRef = ref;
+        objectRef.current = node;
+      }
+    }
+  };
+}
+var Form = FormProvider;
+var FormFieldContext = React2.createContext(
+  void 0
+);
+var FormItemContext = React2.createContext(
+  void 0
+);
+function FormField(props) {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+function useFormField() {
+  const fieldContext = React2.useContext(FormFieldContext);
+  const itemContext = React2.useContext(FormItemContext);
+  const formContext = useFormContext();
+  const { errors } = useFormState({
+    control: formContext?.control,
+    name: fieldContext?.name,
+    exact: true
+  });
+  if (!fieldContext) {
+    throw new Error("useFormField must be used within a <FormField>");
+  }
+  if (!itemContext) {
+    throw new Error("useFormField must be used within a <FormItem>");
+  }
+  const { id } = itemContext;
+  const error = getNestedError(errors, fieldContext.name);
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    error,
+    invalid: Boolean(error)
+  };
+}
+function getNestedError(errors, name) {
+  if (!errors) return void 0;
+  const segments = name.replace(/\[(\w+)\]/g, ".$1").split(".");
+  let cursor = errors;
+  for (const seg of segments) {
+    if (cursor && typeof cursor === "object" && seg in cursor) {
+      cursor = cursor[seg];
+    } else {
+      return void 0;
+    }
+  }
+  return cursor;
+}
+var formItemVariants = cva({ base: "space-y-2" });
+var FormItem = React2.forwardRef(
+  ({ className, ...props }, ref) => {
+    const id = React2.useId();
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn(formItemVariants(), className), ...props }) });
+  }
+);
+FormItem.displayName = "FormItem";
+var formLabelVariants = cva({
+  base: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  variants: {
+    invalid: {
+      true: "text-destructive",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    invalid: "false"
+  }
+});
+var FormLabel = React2.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { invalid, formItemId } = useFormField();
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        htmlFor: formItemId,
+        "data-invalid": invalid ? "" : void 0,
+        className: cn(formLabelVariants({ invalid: invalid ? "true" : "false" }), className),
+        ...props
+      }
+    );
+  }
+);
+FormLabel.displayName = "FormLabel";
+var FormControl = React2.forwardRef(
+  ({ ...props }, ref) => {
+    const { invalid, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        id: formItemId,
+        "aria-describedby": invalid ? `${formDescriptionId} ${formMessageId}` : formDescriptionId,
+        "aria-invalid": invalid || void 0,
+        ...props
+      }
+    );
+  }
+);
+FormControl.displayName = "FormControl";
+var FormDescription = React2.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React2.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error?.message ? String(error.message) : children;
+    if (!body) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: formMessageId,
+        className: cn("text-sm font-medium text-destructive", className),
+        ...props,
+        children: body
+      }
+    );
+  }
+);
+FormMessage.displayName = "FormMessage";
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Slot, formItemVariants, formLabelVariants, useFormField };
+//# sourceMappingURL=form.js.map
+//# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../react-form/src/slot.tsx","../../react-form/src/form.tsx"],"names":["Slot"],"mappings":"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","file":"form.js","sourcesContent":["import * as React from 'react'\n\n/**\n * Minimal Slot implementation.\n *\n * Why not @radix-ui/react-slot? Per package policy, no external runtime deps\n * are allowed in @refraction-ui/* packages. This Slot does the small amount\n * of work we actually need:\n *   - Forwards a single React child\n *   - Merges incoming props onto that child (event handlers are chained,\n *     className is concatenated, style is shallow-merged)\n *   - Merges refs (callback refs and ref objects)\n *\n * It is intentionally simpler than Radix Slot — no <Slottable/>, no asChild\n * recursion. FormControl renders exactly one child input/textarea/etc., which\n * is all we need here.\n */\nexport interface SlotProps extends React.HTMLAttributes<HTMLElement> {\n  children?: React.ReactNode\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>(function Slot(\n  props,\n  forwardedRef,\n) {\n  const { children, ...slotProps } = props\n\n  if (!React.isValidElement(children)) {\n    return null\n  }\n\n  // The child element's existing props\n  const childProps = (children.props ?? {}) as Record<string, unknown>\n\n  const mergedProps = mergeProps(slotProps as Record<string, unknown>, childProps)\n\n  // Forward + merge refs. In React 19 `ref` is a regular prop on `props`; in\n  // React 18 it's hoisted onto the element. Prefer the prop and only fall back\n  // to the element field if `props.ref` truly wasn't there — that fallback path\n  // is React 18 only.\n  let childRef: React.Ref<unknown> | undefined = childProps.ref as\n    | React.Ref<unknown>\n    | undefined\n  if (childRef === undefined && !('ref' in (childProps as object))) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    childRef = (children as any).ref as React.Ref<unknown> | undefined\n  }\n  const mergedRef = composeRefs(forwardedRef as React.Ref<unknown>, childRef)\n\n  return React.cloneElement(\n    children as React.ReactElement,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    { ...mergedProps, ref: mergedRef } as any,\n  )\n})\n\nSlot.displayName = 'Slot'\n\nfunction mergeProps(\n  slotProps: Record<string, unknown>,\n  childProps: Record<string, unknown>,\n): Record<string, unknown> {\n  const merged: Record<string, unknown> = { ...slotProps }\n\n  for (const key of Object.keys(childProps)) {\n    const slotValue = slotProps[key]\n    const childValue = childProps[key]\n\n    // Chain event handlers: child's handler runs after slot's\n    if (/^on[A-Z]/.test(key) && typeof slotValue === 'function' && typeof childValue === 'function') {\n      merged[key] = (...args: unknown[]) => {\n        const child = childValue as (...a: unknown[]) => unknown\n        const slot = slotValue as (...a: unknown[]) => unknown\n        child(...args)\n        slot(...args)\n      }\n    } else if (key === 'className') {\n      merged[key] = [slotValue, childValue].filter(Boolean).join(' ')\n    } else if (key === 'style') {\n      merged[key] = { ...(slotValue as object), ...(childValue as object) }\n    } else if (childValue !== undefined) {\n      // Child wins for non-event, non-merged props\n      merged[key] = childValue\n    }\n  }\n\n  return merged\n}\n\ntype PossibleRef<T> = React.Ref<T> | undefined\n\nfunction composeRefs<T>(...refs: Array<PossibleRef<T>>): React.RefCallback<T> {\n  return (node: T) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        ref(node)\n      } else if (ref != null) {\n        const objectRef = ref as React.MutableRefObject<T | null>\n        objectRef.current = node\n      }\n    }\n  }\n}\n","import * 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 { cn, cva } from '@refraction-ui/shared'\nimport { Slot } from './slot.js'\n\n/**\n * Form — RHF FormProvider wrapper.\n *\n * Spread the result of `useForm()` into <Form> so descendants can read the\n * form state via context. Renders no DOM of its own; consumers can place a\n * <form onSubmit={form.handleSubmit(...)}> inside.\n */\nconst Form = FormProvider\n\n// -----------------------------------------------------------------------------\n// Field context — bridges <FormField> and the inner Form* primitives.\n// -----------------------------------------------------------------------------\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | undefined>(\n  undefined,\n)\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue | undefined>(\n  undefined,\n)\n\n/**\n * FormField — connects a named field to RHF's Controller and provides\n * field-name context to the descendants (FormLabel, FormControl, FormMessage).\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 * useFormField — read-only access to the current field context.\n *\n * Returns the per-field id collection plus the live RHF error state. Useful\n * when building custom form controls that want the same wiring as FormControl.\n */\nfunction useFormField() {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const formContext = useFormContext()\n  // useFormState subscribes to the specific field's error state, which keeps\n  // re-renders narrow and works correctly with RHF v7 lazy subscriptions.\n  const { errors } = useFormState({\n    control: formContext?.control,\n    name: fieldContext?.name as never,\n    exact: true,\n  })\n\n  if (!fieldContext) {\n    throw new Error('useFormField must be used within a <FormField>')\n  }\n  if (!itemContext) {\n    throw new Error('useFormField must be used within a <FormItem>')\n  }\n\n  const { id } = itemContext\n  const error = getNestedError(errors, fieldContext.name)\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    error,\n    invalid: Boolean(error),\n  }\n}\n\n// Walks a dot/bracket path through RHF's errors object. Mirrors the path\n// semantics of FieldPath without pulling in lodash.get.\nfunction getNestedError(\n  errors: Record<string, unknown> | undefined,\n  name: string,\n): { message?: string; type?: string } | undefined {\n  if (!errors) return undefined\n  const segments = name.replace(/\\[(\\w+)\\]/g, '.$1').split('.')\n  let cursor: unknown = errors\n  for (const seg of segments) {\n    if (cursor && typeof cursor === 'object' && seg in (cursor as object)) {\n      cursor = (cursor as Record<string, unknown>)[seg]\n    } else {\n      return undefined\n    }\n  }\n  return cursor as { message?: string; type?: string } | undefined\n}\n\n// -----------------------------------------------------------------------------\n// FormItem — emits a stable id used by Label/Control/Description/Message.\n// -----------------------------------------------------------------------------\n\nconst formItemVariants = cva({ base: 'space-y-2' })\n\ninterface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(\n  ({ className, ...props }, ref) => {\n    const id = React.useId()\n    return (\n      <FormItemContext.Provider value={{ id }}>\n        <div ref={ref} className={cn(formItemVariants(), className)} {...props} />\n      </FormItemContext.Provider>\n    )\n  },\n)\nFormItem.displayName = 'FormItem'\n\n// -----------------------------------------------------------------------------\n// FormLabel\n// -----------------------------------------------------------------------------\n\nconst formLabelVariants = cva({\n  base: 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n  variants: {\n    invalid: {\n      true: 'text-destructive',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    invalid: 'false',\n  },\n})\n\ninterface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}\n\nconst FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>(\n  ({ className, ...props }, ref) => {\n    const { invalid, formItemId } = useFormField()\n    return (\n      <label\n        ref={ref}\n        htmlFor={formItemId}\n        data-invalid={invalid ? '' : undefined}\n        className={cn(formLabelVariants({ invalid: invalid ? 'true' : 'false' }), className)}\n        {...props}\n      />\n    )\n  },\n)\nFormLabel.displayName = 'FormLabel'\n\n// -----------------------------------------------------------------------------\n// FormControl — Slot that injects id/aria-describedby/aria-invalid.\n// -----------------------------------------------------------------------------\n\ninterface FormControlProps extends React.HTMLAttributes<HTMLElement> {\n  children?: React.ReactNode\n}\n\nconst FormControl = React.forwardRef<HTMLElement, FormControlProps>(\n  ({ ...props }, ref) => {\n    const { invalid, formItemId, formDescriptionId, formMessageId } =\n      useFormField()\n    return (\n      <Slot\n        ref={ref}\n        id={formItemId}\n        aria-describedby={\n          invalid\n            ? `${formDescriptionId} ${formMessageId}`\n            : formDescriptionId\n        }\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    )\n  },\n)\nFormControl.displayName = 'FormControl'\n\n// -----------------------------------------------------------------------------\n// FormDescription\n// -----------------------------------------------------------------------------\n\ninterface FormDescriptionProps\n  extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst FormDescription = React.forwardRef<\n  HTMLParagraphElement,\n  FormDescriptionProps\n>(({ className, ...props }, ref) => {\n  const { formDescriptionId } = useFormField()\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  )\n})\nFormDescription.displayName = 'FormDescription'\n\n// -----------------------------------------------------------------------------\n// FormMessage\n// -----------------------------------------------------------------------------\n\ninterface FormMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(\n  ({ className, children, ...props }, ref) => {\n    const { error, formMessageId } = useFormField()\n    const body = error?.message ? String(error.message) : children\n    if (!body) return null\n    return (\n      <p\n        ref={ref}\n        id={formMessageId}\n        className={cn('text-sm font-medium text-destructive', className)}\n        {...props}\n      >\n        {body}\n      </p>\n    )\n  },\n)\nFormMessage.displayName = 'FormMessage'\n\nexport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n  useFormField,\n  formItemVariants,\n  formLabelVariants,\n}\n\nexport type {\n  FormItemProps,\n  FormLabelProps,\n  FormControlProps,\n  FormDescriptionProps,\n  FormMessageProps,\n}\n"]}