@pickle-ui/react 0.0.0-stage → 1.0.0-beta.4

package/src/components/form/FormCheckbox.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useController } from 'react-hook-form';
+
+import { Checkbox, type CheckboxProps } from '@/components/form/Checkbox';
+
+import {
+  useFormControlProps,
+  useFormMethods,
+  useRequiredFieldName,
+  type WithoutAriaInvalid,
+} from './Form.context';
+
+type FormCheckboxProps = WithoutAriaInvalid<CheckboxProps>;
+
+function FormCheckboxRoot({
+  id: idProp,
+  name: nameProp,
+  ...props
+}: FormCheckboxProps) {
+  const { control } = useFormMethods();
+  const name = useRequiredFieldName(nameProp, 'Form.Checkbox');
+  const { field } = useController({
+    control,
+    defaultValue: props.defaultChecked ?? false,
+    name,
+  });
+  const controlProps = useFormControlProps({ id: idProp });
+
+  return (
+    <Checkbox
+      {...props}
+      {...controlProps}
+      checked={Boolean(field.value)}
+      inputRef={field.ref}
+      name={field.name}
+      onCheckedChange={(checked, eventDetails) => {
+        field.onChange(checked);
+        props.onCheckedChange?.(checked, eventDetails);
+      }}
+    />
+  );
+}
+
+const FormCheckbox = Object.assign(FormCheckboxRoot, {
+  Label: Checkbox.Label,
+});
+
+export { FormCheckbox, FormCheckboxRoot };
+export type { FormCheckboxProps };

package/src/components/form/FormCombobox.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+import { useController } from 'react-hook-form';
+
+import { Combobox, type ComboboxProps } from './Combobox';
+import {
+  useFormControlProps,
+  useFormMethods,
+  useRequiredFieldName,
+  type WithoutAriaInvalid,
+} from './Form.context';
+
+// Stable fallback so an unset multiple value keeps the same identity.
+const EMPTY_VALUE: never[] = [];
+
+type FormComboboxProps<
+  Value,
+  Multiple extends boolean | undefined = false,
+> = WithoutAriaInvalid<ComboboxProps<Value, Multiple>>;
+
+function FormComboboxChipsInput({
+  id: idProp,
+  ...props
+}: WithoutAriaInvalid<React.ComponentProps<typeof Combobox.ChipsInput>>) {
+  const controlProps = useFormControlProps({ id: idProp });
+
+  return <Combobox.ChipsInput {...props} {...controlProps} />;
+}
+
+function FormComboboxInput({
+  id: idProp,
+  ...props
+}: WithoutAriaInvalid<React.ComponentProps<typeof Combobox.Input>>) {
+  const controlProps = useFormControlProps({ id: idProp });
+
+  return <Combobox.Input {...props} {...controlProps} />;
+}
+
+function FormComboboxRoot<Value, Multiple extends boolean | undefined = false>({
+  name: nameProp,
+  ...props
+}: FormComboboxProps<Value, Multiple>) {
+  const { control } = useFormMethods();
+  const name = useRequiredFieldName(nameProp, 'Form.Combobox');
+  const { field } = useController({
+    control,
+    defaultValue: props.defaultValue,
+    name,
+  });
+
+  return (
+    <Combobox<Value, Multiple>
+      {...props}
+      inputRef={field.ref}
+      name={field.name}
+      onValueChange={(value, eventDetails) => {
+        field.onChange(value);
+        props.onValueChange?.(value, eventDetails);
+      }}
+      // Keep the combobox controlled while the form value is still unset.
+      value={field.value ?? (props.multiple ? EMPTY_VALUE : null)}
+    />
+  );
+}
+
+const FormCombobox = Object.assign(FormComboboxRoot, {
+  Chip: Combobox.Chip,
+  Chips: Combobox.Chips,
+  ChipsInput: FormComboboxChipsInput,
+  Clear: Combobox.Clear,
+  Collection: Combobox.Collection,
+  Content: Combobox.Content,
+  Empty: Combobox.Empty,
+  Group: Combobox.Group,
+  GroupLabel: Combobox.GroupLabel,
+  Input: FormComboboxInput,
+  Item: Combobox.Item,
+  List: Combobox.List,
+  Separator: Combobox.Separator,
+  Status: Combobox.Status,
+  Trigger: Combobox.Trigger,
+  Value: Combobox.Value,
+});
+
+export {
+  FormCombobox,
+  FormComboboxChipsInput,
+  FormComboboxInput,
+  FormComboboxRoot,
+};
+export type { FormComboboxProps };

package/src/components/form/FormDescription.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Field } from '@base-ui/react/field';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type FormDescriptionProps = React.ComponentProps<typeof Field.Description>;
+
+function FormDescription({ className, ...props }: FormDescriptionProps) {
+  return (
+    <Field.Description
+      className={cn('text-muted-foreground text-sm', className)}
+      data-slot="field-description"
+      {...props}
+    />
+  );
+}
+
+export { FormDescription };
+export type { FormDescriptionProps };

package/src/components/form/FormError.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Field } from '@base-ui/react/field';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type FormErrorProps = React.ComponentProps<typeof Field.Error>;
+
+function FormError({ className, ...props }: FormErrorProps) {
+  return (
+    <Field.Error
+      className={cn('text-destructive text-sm font-medium', className)}
+      data-slot="field-error"
+      {...props}
+    />
+  );
+}
+
+export { FormError };
+export type { FormErrorProps };

package/src/components/form/FormField.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { Field } from '@base-ui/react/field';
+import * as React from 'react';
+import { useFormState } from 'react-hook-form';
+
+import { cn } from '@/lib/utils';
+
+import {
+  FormFieldContext,
+  getErrorMessage,
+  useFormMethods,
+} from './Form.context';
+import { FormDescription } from './FormDescription';
+import { FormError } from './FormError';
+import { FormLabel } from './FormLabel';
+import { type FormRadioGroupProps, FormRadioGroupRoot } from './FormRadioGroup';
+import { type FormSelectProps, FormSelectRoot } from './FormSelect';
+
+type FormFieldProps = Omit<
+  React.ComponentProps<typeof Field.Root>,
+  'children'
+> & {
+  children: React.ReactNode;
+  controlId?: string;
+  description?: React.ReactNode;
+  error?: React.ReactNode;
+  label?: React.ReactNode;
+};
+
+function FormField({
+  children,
+  className,
+  controlId: controlIdProp,
+  description,
+  error,
+  label,
+  ...props
+}: FormFieldProps) {
+  const { control, getFieldState } = useFormMethods();
+  const name = props.name;
+  const formState = useFormState({
+    control,
+    disabled: !name,
+    exact: true,
+    name,
+  });
+  const fieldError = name ? getFieldState(name, formState).error : undefined;
+  const errorMessage = error ?? getErrorMessage(fieldError);
+  // The control id is the focus target for the visible field label.
+  // It is generated by default to avoid duplicate DOM ids across forms/rows.
+  const generatedControlId = React.useId();
+  const controlId = controlIdProp ?? generatedControlId;
+  const nativeLabel = shouldUseNativeFieldLabel(children);
+  const contextValue = React.useMemo(
+    () => ({
+      controlId,
+      name,
+    }),
+    [controlId, name],
+  );
+
+  return (
+    <Field.Root
+      className={cn('grid gap-2.5', className)}
+      data-slot="field"
+      {...props}
+    >
+      {/* Native inputs use htmlFor/id for label focus; Base UI composites
+      use non-native labels so their primitives can wire aria-labelledby. */}
+      {label && nativeLabel ? (
+        <FormLabel htmlFor={controlId}>{label}</FormLabel>
+      ) : label ? (
+        <FormLabel nativeLabel={false} render={<span />}>
+          {label}
+        </FormLabel>
+      ) : null}
+      <FormFieldContext.Provider value={contextValue}>
+        {children}
+      </FormFieldContext.Provider>
+      {errorMessage ? (
+        <FormError match>{errorMessage}</FormError>
+      ) : description ? (
+        <FormDescription>{description}</FormDescription>
+      ) : null}
+    </Field.Root>
+  );
+}
+
+function isFormRadioGroupElement(
+  child: React.ReactNode,
+): child is React.ReactElement<FormRadioGroupProps> {
+  return React.isValidElement(child) && child.type === FormRadioGroupRoot;
+}
+
+function isFormSelectElement(
+  child: React.ReactNode,
+): child is React.ReactElement<FormSelectProps> {
+  return React.isValidElement(child) && child.type === FormSelectRoot;
+}
+
+function shouldUseNativeFieldLabel(children: React.ReactNode) {
+  return !React.Children.toArray(children).some(
+    (child) => isFormRadioGroupElement(child) || isFormSelectElement(child),
+  );
+}
+
+export { FormField };
+export type { FormFieldProps };

package/src/components/form/FormInput.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import * as React from 'react';
+
+import { Input } from '@/components/form/Input';
+import { InputGroupInput } from '@/components/form/InputGroup';
+
+import {
+  FormInputGroupContext,
+  useFormControlProps,
+  useFormMethods,
+  useRequiredFieldName,
+  type WithoutAriaInvalid,
+} from './Form.context';
+
+type FormInputProps = WithoutAriaInvalid<React.ComponentProps<typeof Input>>;
+
+function FormInput({ id: idProp, name: nameProp, ...props }: FormInputProps) {
+  const isInsideInputGroup = React.useContext(FormInputGroupContext);
+  const name = useRequiredFieldName(nameProp, 'Form.Input');
+  const methods = useFormMethods();
+  const registeredProps = methods.register(name);
+  const controlProps = useFormControlProps(
+    { id: idProp },
+    { enabled: !isInsideInputGroup },
+  );
+
+  const InputComponent = isInsideInputGroup ? InputGroupInput : Input;
+
+  return (
+    <InputComponent
+      {...props}
+      {...registeredProps}
+      {...controlProps}
+      name={name}
+    />
+  );
+}
+
+export { FormInput };
+export type { FormInputProps };

package/src/components/form/FormInputGroup.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+
+import { InputGroup } from '@/components/form/InputGroup';
+
+import { FormFieldContext, FormInputGroupContext } from './Form.context';
+import { FormInput, type FormInputProps } from './FormInput';
+
+type FormInputGroupProps = React.ComponentProps<typeof InputGroup>;
+
+function FormInputGroup({ children, ...props }: FormInputGroupProps) {
+  const field = React.useContext(FormFieldContext);
+  const childArray = React.Children.toArray(children);
+  const controlIndex = field?.controlId
+    ? childArray.findIndex(isFormInputElement)
+    : -1;
+  const controlChildren = childArray.map((child, index) => {
+    if (
+      index === controlIndex &&
+      field?.controlId &&
+      isFormInputElement(child)
+    ) {
+      // A group-level label should focus the first input in the group.
+      return React.cloneElement(child, {
+        id: field.controlId,
+      });
+    }
+
+    return child;
+  });
+
+  return (
+    <FormInputGroupContext.Provider value>
+      <InputGroup {...props}>{controlChildren}</InputGroup>
+    </FormInputGroupContext.Provider>
+  );
+}
+
+function isFormInputElement(
+  child: React.ReactNode,
+): child is React.ReactElement<FormInputProps> {
+  return React.isValidElement(child) && child.type === FormInput;
+}
+
+export { FormInputGroup };
+export type { FormInputGroupProps };

package/src/components/form/FormLabel.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Field } from '@base-ui/react/field';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+type FormLabelProps = React.ComponentProps<typeof Field.Label>;
+
+function FormLabel({ className, ...props }: FormLabelProps) {
+  return (
+    <Field.Label
+      className={cn(
+        'text-sm leading-none font-medium data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        className,
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  );
+}
+
+export { FormLabel };
+export type { FormLabelProps };

package/src/components/form/FormRadioGroup.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useController } from 'react-hook-form';
+
+import {
+  useFormControlProps,
+  useFormMethods,
+  useRequiredFieldName,
+  type WithoutAriaInvalid,
+} from './Form.context';
+import { RadioGroup, type RadioGroupProps } from './RadioGroup';
+
+type FormRadioGroupProps = WithoutAriaInvalid<RadioGroupProps>;
+
+function FormRadioGroupRoot({ name: nameProp, ...props }: FormRadioGroupProps) {
+  const { id: idProp, ...radioGroupProps } = props;
+  const { control } = useFormMethods();
+  const name = useRequiredFieldName(nameProp, 'Form.RadioGroup');
+  const { field } = useController({
+    control,
+    defaultValue: radioGroupProps.defaultValue,
+    name,
+  });
+  const controlProps = useFormControlProps({ id: idProp });
+
+  return (
+    <RadioGroup
+      {...radioGroupProps}
+      {...controlProps}
+      inputRef={field.ref}
+      name={field.name}
+      onValueChange={(value, eventDetails) => {
+        field.onChange(value);
+        radioGroupProps.onValueChange?.(value, eventDetails);
+      }}
+      value={field.value}
+    />
+  );
+}
+
+const FormRadioGroup = Object.assign(FormRadioGroupRoot, {
+  Item: RadioGroup.Item,
+});
+
+export { FormRadioGroup, FormRadioGroupRoot };
+export type { FormRadioGroupProps };

package/src/components/form/FormRoot.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import * as React from 'react';
+import {
+  type FieldValues,
+  FormProvider,
+  type SubmitHandler,
+  type UseFormReturn,
+} from 'react-hook-form';
+
+import { cn } from '@/lib/utils';
+
+type FormProps<FormValues extends FieldValues = FieldValues> = Omit<
+  React.ComponentProps<'form'>,
+  'onSubmit'
+> & {
+  form: UseFormReturn<FormValues>;
+  onSubmit?: SubmitHandler<FormValues>;
+};
+
+function FormRoot<FormValues extends FieldValues = FieldValues>({
+  className,
+  form,
+  onSubmit,
+  ...props
+}: FormProps<FormValues>) {
+  const content = (
+    <form
+      className={cn('space-y-6', className)}
+      data-slot="form"
+      noValidate
+      onSubmit={onSubmit ? form.handleSubmit(onSubmit) : undefined}
+      {...props}
+    />
+  );
+
+  return <FormProvider {...form}>{content}</FormProvider>;
+}
+
+export { FormRoot };
+export type { FormProps };

package/src/components/form/FormSelect.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import * as React from 'react';
+import { useController } from 'react-hook-form';
+
+import {
+  useFormControlProps,
+  useFormMethods,
+  useRequiredFieldName,
+  type WithoutAriaInvalid,
+} from './Form.context';
+import { Select, type SelectProps } from './Select';
+
+type FormSelectProps = WithoutAriaInvalid<SelectProps>;
+
+function FormSelectRoot({ name: nameProp, ...props }: FormSelectProps) {
+  const { control } = useFormMethods();
+  const name = useRequiredFieldName(nameProp, 'Form.Select');
+  const { field } = useController({
+    control,
+    defaultValue: props.defaultValue,
+    name,
+  });
+
+  return (
+    <Select
+      {...props}
+      inputRef={field.ref}
+      name={field.name}
+      onValueChange={(value, eventDetails) => {
+        field.onChange(value);
+        props.onValueChange?.(value, eventDetails);
+      }}
+      value={field.value}
+    />
+  );
+}
+
+function FormSelectTrigger({
+  id: idProp,
+  ...props
+}: WithoutAriaInvalid<React.ComponentProps<typeof Select.Trigger>>) {
+  const controlProps = useFormControlProps({ id: idProp });
+
+  return <Select.Trigger {...props} {...controlProps} />;
+}
+
+const FormSelect = Object.assign(FormSelectRoot, {
+  Content: Select.Content,
+  Group: Select.Group,
+  GroupLabel: Select.GroupLabel,
+  Item: Select.Item,
+  Label: Select.Label,
+  Separator: Select.Separator,
+  Trigger: FormSelectTrigger,
+  Value: Select.Value,
+});
+
+export { FormSelect, FormSelectRoot, FormSelectTrigger };
+export type { FormSelectProps };

package/src/components/form/FormSwitch.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { useController } from 'react-hook-form';
+
+import { Switch, type SwitchProps } from '@/components/form/Switch';
+
+import {
+  useFormControlProps,
+  useFormMethods,
+  useRequiredFieldName,
+  type WithoutAriaInvalid,
+} from './Form.context';
+
+type FormSwitchProps = WithoutAriaInvalid<SwitchProps>;
+
+function FormSwitchRoot({
+  id: idProp,
+  name: nameProp,
+  ...props
+}: FormSwitchProps) {
+  const { control } = useFormMethods();
+  const name = useRequiredFieldName(nameProp, 'Form.Switch');
+  const { field } = useController({
+    control,
+    defaultValue: props.defaultChecked ?? false,
+    name,
+  });
+  const controlProps = useFormControlProps({ id: idProp });
+
+  return (
+    <Switch
+      {...props}
+      {...controlProps}
+      checked={Boolean(field.value)}
+      inputRef={field.ref}
+      name={field.name}
+      onCheckedChange={(checked, eventDetails) => {
+        field.onChange(checked);
+        props.onCheckedChange?.(checked, eventDetails);
+      }}
+    />
+  );
+}
+
+const FormSwitch = Object.assign(FormSwitchRoot, {
+  Label: Switch.Label,
+});
+
+export { FormSwitch, FormSwitchRoot };
+export type { FormSwitchProps };

package/src/components/form/FormTextarea.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import * as React from 'react';
+
+import { Textarea } from '@/components/form/Textarea';
+
+import {
+  useFormControlProps,
+  useFormMethods,
+  useRequiredFieldName,
+  type WithoutAriaInvalid,
+} from './Form.context';
+
+type FormTextareaProps = WithoutAriaInvalid<
+  React.ComponentProps<typeof Textarea>
+>;
+
+function FormTextarea({
+  id: idProp,
+  name: nameProp,
+  ...props
+}: FormTextareaProps) {
+  const name = useRequiredFieldName(nameProp, 'Form.Textarea');
+  const methods = useFormMethods();
+  const registeredProps = methods.register(name);
+  const controlProps = useFormControlProps({ id: idProp });
+
+  return (
+    <Textarea {...props} {...registeredProps} {...controlProps} name={name} />
+  );
+}
+
+export { FormTextarea };
+export type { FormTextareaProps };