add field-baseui, fieldset-baseui, form-tanstack-baseui which based o…

src/registry/components/ui/field-baseui.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import * as React from "react";
+import { Field as BaseField } from "@base-ui/react/field";
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+);
+
+const FieldRoot = React.forwardRef<HTMLDivElement, BaseField.Root.Props>(
+  ({ className, ...props }, ref) => (
+    <BaseField.Root
+      ref={ref}
+      data-slot="field-root"
+      className={cn("flex-col *:w-full [&>.sr-only]:w-auto", className)}
+      {...props}
+    />
+  ),
+);
+FieldRoot.displayName = "FieldRoot";
+
+const FieldItem = React.forwardRef<HTMLDivElement, BaseField.Item.Props>(
+  ({ className, ...props }, ref) => (
+    <BaseField.Root
+      ref={ref}
+      data-slot="field-item"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FieldItem.displayName = "FieldItem";
+
+const FieldLabel = React.forwardRef<HTMLLabelElement, BaseField.Label.Props>(
+  ({ className, ...props }, ref) => (
+    <BaseField.Label
+      ref={ref}
+      data-slot="field-label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50  peer-[[data-disabled]]:opacity-50",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field-root]]:w-full has-[>[data-slot=field-root]]:flex-col has-[>[data-slot=field-root]]:rounded-md has-[>[data-slot=field-root]]:border [&>*]:data-[slot=field-root]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        "data-[invalid]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FieldLabel.displayName = "FieldLabel";
+
+const FieldControl = React.forwardRef<HTMLDivElement, BaseField.Control.Props>(
+  ({ className, ...props }, ref) => (
+    <BaseField.Control
+      ref={ref}
+      data-slot="field-control"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FieldControl.displayName = "FieldControl";
+
+const FieldDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="field-description"
+    className={cn(
+      "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+      "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+      "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+      className,
+    )}
+    {...props}
+  />
+));
+FieldDescription.displayName = "FieldDescription";
+
+const FieldError = React.forwardRef<
+  HTMLParagraphElement,
+  BaseField.Error.Props
+>(({ className, children, ...props }, ref) => {
+  return (
+    <BaseField.Error
+      ref={ref}
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {children}
+    </BaseField.Error>
+  );
+});
+FieldError.displayName = "FieldError";
+
+export {
+  FieldRoot,
+  FieldLabel,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldItem,
+};

src/registry/components/ui/fieldset-baseui.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { Fieldset as BaseFieldset} from "@base-ui/react/fieldset";
+import { cn } from "@/lib/utils";
+
+const FieldsetRoot = React.forwardRef<HTMLDivElement, BaseFieldset.Root.Props>(
+  ({ className, ...props }, ref) => (
+    <BaseFieldset.Root
+      ref={ref}
+      data-slot="fieldset-root"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FieldsetRoot.displayName = "FieldsetRoot";
+
+const FieldsetLegend = React.forwardRef<
+  HTMLDivElement,
+  BaseFieldset.Legend.Props
+>(({ className, ...props }, ref) => (
+  <BaseFieldset.Root
+    ref={ref}
+    data-slot="fieldset-legend"
+    className={cn(
+      "mb-3 font-medium",
+      "data-[variant=legend]:text-base",
+      "data-[variant=label]:text-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+FieldsetLegend.displayName = "FieldsetLegend";
+export { FieldsetRoot, FieldsetLegend };

src/registry/components/ui/form-tanstack-baseui.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+// import { Label } from "@/components/ui/label";
+import {
+  FieldLabel as FieldLabelPrimitive,
+  FieldControl as FieldControlPrimitive,
+  FieldItem,
+  FieldDescription as FieldDescriptionPrimitive,
+  FieldError as FieldErrorPrimitive,
+} from "./field-baseui";
+
+const { fieldContext, formContext, useFieldContext } = createFormHookContexts();
+
+const { useAppForm } = createFormHook({
+  fieldComponents: {
+    Label: FieldLabel,
+    Control: FieldControl,
+    Description: FieldDescription,
+    Message: FieldError,
+  },
+  formComponents: {
+    Item: FormItem,
+  },
+  fieldContext,
+  formContext,
+});
+
+const useFormField = () => {
+  const itemContext = React.useContext(FormItemContext);
+  const fieldContext = useFieldContext();
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <field.Container>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldContext.state.meta,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <FieldItem className={className} {...props} />
+    </FormItemContext.Provider>
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof FieldLabelPrimitive>) {
+  const { formItemId, isValid } = useFormField();
+
+  return (
+    <FieldLabelPrimitive
+      data-error={!isValid}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FieldControl({
+  className,
+  ...props
+}: React.ComponentProps<typeof FieldControlPrimitive>) {
+  const { formItemId, isValid  } =useFormField();
+  return(
+<FieldControlPrimitive
+      id={formItemId}
+      data-error={!isValid}
+      className={cn("data-[error=true]:text-destructive", className)}
+      {...props} />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<typeof FieldDescriptionPrimitive>) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <FieldDescriptionPrimitive
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FieldError({ className, ...props }: React.ComponentProps<typeof FieldErrorPrimitive>) {
+  const { formMessageId, isValid, errors } = useFormField();
+
+  if (props.children) return props.children;
+
+  const body = isValid
+    ? props.children
+    : String(errors.map((error) => error.message).join(", ") ?? "");
+
+  if (!body) return null;
+
+  return (
+    <FieldErrorPrimitive
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </FieldErrorPrimitive>
+  );
+}
+
+export { useAppForm };