@codefast/ui 0.3.16-canary.2 → 0.3.16-canary.3

package/src/components/field.tsx

@@ -0,0 +1,362 @@
+"use client";
+
+import type { FieldVariants } from "#/variants/field";
+import type { ComponentProps, JSX, ReactNode } from "react";
+
+import { cn } from "#/lib/utils";
+
+import { fieldVariants } from "#/variants/field";
+import { useMemo } from "react";
+
+import { Label } from "#/components/label";
+import { Separator } from "#/components/separator";
+
+/* -----------------------------------------------------------------------------
+ * Component: FieldSet
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldSetProps = ComponentProps<"fieldset">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FieldSet({ className, ...props }: FieldSetProps): JSX.Element {
+  return (
+    <fieldset
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3",
+        "has-[>[data-slot=radio-group]]:gap-3",
+        className,
+      )}
+      data-slot="field-set"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FieldLegend
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldLegendProps = ComponentProps<"legend"> & {
+  variant?: "label" | "legend";
+};
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FieldLegend({ className, variant = "legend", ...props }: FieldLegendProps): JSX.Element {
+  return (
+    <legend
+      className={cn("mb-3", "text-base font-medium", "data-[variant=label]:text-sm", className)}
+      data-slot="field-legend"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FieldGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldGroupProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FieldGroup({ className, ...props }: FieldGroupProps): JSX.Element {
+  return (
+    <div
+      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,
+      )}
+      data-slot="field-group"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: Field
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldProps = ComponentProps<"div"> & FieldVariants;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Field({ className, orientation = "vertical", ...props }: FieldProps): JSX.Element {
+  return (
+    <div
+      className={fieldVariants({ className, orientation })}
+      data-orientation={orientation}
+      data-slot="field"
+      role="group"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FieldContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldContentProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FieldContent({ className, ...props }: FieldContentProps): JSX.Element {
+  return (
+    <div
+      className={cn("group/field-content flex flex-1 flex-col gap-1.5", "leading-snug", className)}
+      data-slot="field-content"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FieldLabel
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldLabelProps = ComponentProps<typeof Label>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FieldLabel({ className, ...props }: FieldLabelProps): JSX.Element {
+  return (
+    <Label
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug",
+        "group-data-disabled/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border",
+        "has-data-checked:border-primary has-data-checked:bg-primary/5",
+        "dark:has-data-checked:bg-primary/10",
+        "[&>*]:data-[slot=field]:p-4",
+        className,
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FieldTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldTitleProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FieldTitle({ className, ...props }: FieldTitleProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        "group-data-disabled/field:opacity-50",
+        className,
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FieldDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldDescriptionProps = ComponentProps<"p">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FieldDescription({ className, ...props }: FieldDescriptionProps): JSX.Element {
+  return (
+    <p
+      className={cn(
+        "text-sm leading-normal font-normal text-muted-foreground",
+        "group-has-data-[orientation=horizontal]/field:text-balance",
+        "last:mt-0",
+        "nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4",
+        "[&>a:hover]:text-primary",
+        "[[data-variant=legend]+&]:-mt-1.5",
+        className,
+      )}
+      data-slot="field-description"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FieldSeparator
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldSeparatorProps = ComponentProps<"div"> & {
+  children?: ComponentProps<"span">["children"];
+};
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FieldSeparator({ children, className, ...props }: FieldSeparatorProps): JSX.Element {
+  const hasContent = Boolean(children);
+
+  return (
+    <div
+      className={cn(
+        "relative",
+        "-my-2 h-5 text-sm",
+        "group-data-[variant=outline]/field-group:-mb-2",
+        className,
+      )}
+      data-content={hasContent}
+      data-slot="field-separator"
+      {...props}
+    >
+      <Separator className={cn("absolute", "inset-0 top-1/2")} />
+      {hasContent ? (
+        <span
+          className={cn(
+            "relative block",
+            "mx-auto w-fit px-2",
+            "bg-background text-muted-foreground",
+          )}
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FieldError
+ * -------------------------------------------------------------------------- */
+
+interface FieldErrorMessage {
+  message?: string;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface FieldErrorProps extends ComponentProps<"div"> {
+  errors?: Array<FieldErrorMessage | undefined>;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FieldError({
+  children,
+  className,
+  errors,
+  ...props
+}: FieldErrorProps): JSX.Element | null {
+  const fallbackContent = useMemo<null | ReactNode>(() => {
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+
+    if (uniqueErrors.length === 1) {
+      return uniqueErrors[0]?.message ?? null;
+    }
+
+    return (
+      <ul className={cn("flex flex-col gap-1", "ml-4", "list-disc")}>
+        {uniqueErrors.map((error) =>
+          error?.message ? <li key={error.message}>{error.message}</li> : null,
+        )}
+      </ul>
+    );
+  }, [errors]);
+
+  const content = children ?? fallbackContent;
+
+  if (content === null || content === undefined || content === false) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn("text-sm font-normal text-destructive", className)}
+      data-slot="field-error"
+      role="alert"
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+};
+
+export type {
+  FieldContentProps,
+  FieldDescriptionProps,
+  FieldErrorProps,
+  FieldGroupProps,
+  FieldLabelProps,
+  FieldLegendProps,
+  FieldProps,
+  FieldSeparatorProps,
+  FieldSetProps,
+  FieldTitleProps,
+};

package/src/components/form.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import type { Scope } from "@radix-ui/react-context";
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import type { ComponentProps, JSX, ReactNode } from "react";
+import type { ControllerProps, FieldError, FieldPath, FieldValues } from "react-hook-form";
+
+import { cn } from "#/lib/utils";
+import { createContextScope } from "@radix-ui/react-context";
+import { Slot } from "@radix-ui/react-slot";
+import { useId } from "react";
+import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+
+import { Label } from "#/components/label";
+
+/* -----------------------------------------------------------------------------
+ * Component: Form
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormProps = ComponentProps<typeof FormProvider>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const Form: typeof FormProvider = FormProvider;
+
+/* -----------------------------------------------------------------------------
+ * Context: FormField
+ * -------------------------------------------------------------------------- */
+
+const FORM_FIELD_NAME = "FormField";
+
+type ScopedProps<P> = P & { __scopeFormField?: Scope };
+
+const [createFormFieldContext, createFormFieldScope] = createContextScope(FORM_FIELD_NAME);
+
+interface FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+  name: TName;
+}
+
+const [FormFieldContextProvider, useFormFieldContext] =
+  createFormFieldContext<FormFieldContextValue>(FORM_FIELD_NAME);
+
+function useFormItem(
+  consumerName: string,
+  scope: Scope,
+): {
+  formDescriptionId: string;
+  formItemId: string;
+  formMessageId: string;
+  id: string;
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  name: string;
+  error?: FieldError;
+} {
+  const { id } = useFormItemContext(consumerName, scope);
+  const { name } = useFormFieldContext(consumerName, scope);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name });
+  const fieldState = getFieldState(name, formState);
+
+  return {
+    formDescriptionId: `form-item-description-${id}`,
+    formItemId: `form-item-${id}`,
+    formMessageId: `form-item-message-${id}`,
+    id,
+    name,
+    ...fieldState,
+  };
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormField
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = ControllerProps<TFieldValues, TName>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(formFieldProps: ScopedProps<FormFieldProps<TFieldValues, TName>>): JSX.Element {
+  const { __scopeFormField, ...props } = formFieldProps;
+
+  return (
+    <FormFieldContextProvider name={props.name} scope={__scopeFormField}>
+      <Controller {...props} />
+    </FormFieldContextProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Context: FormItem
+ * -------------------------------------------------------------------------- */
+
+const FORM_ITEM_NAME = "FormItem";
+
+interface FormItemContextValue {
+  id: string;
+}
+
+const [FormItemContextProvider, useFormItemContext] =
+  createFormFieldContext<FormItemContextValue>(FORM_ITEM_NAME);
+
+/* -----------------------------------------------------------------------------
+ * Component: FormItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormItemProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormItem({
+  __scopeFormField,
+  className,
+  ...props
+}: ScopedProps<FormItemProps>): JSX.Element {
+  const id = useId();
+
+  return (
+    <FormItemContextProvider id={id} scope={__scopeFormField}>
+      <div className={cn("grid gap-2", className)} data-slot="form-item" {...props} />
+    </FormItemContextProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormLabel
+ * -------------------------------------------------------------------------- */
+
+const FORM_LABEL_NAME = "FormLabel";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormLabelProps = ComponentProps<typeof LabelPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormLabel({ __scopeFormField, ...props }: ScopedProps<FormLabelProps>): JSX.Element {
+  const { error, formItemId } = useFormItem(FORM_LABEL_NAME, __scopeFormField);
+
+  return (
+    <Label
+      data-invalid={error ? true : undefined}
+      data-slot="form-label"
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormControl
+ * -------------------------------------------------------------------------- */
+
+const FORM_CONTROL_NAME = "FormControl";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormControlProps = ComponentProps<typeof Slot>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormControl({ __scopeFormField, ...props }: ScopedProps<FormControlProps>): JSX.Element {
+  const { error, formDescriptionId, formItemId, formMessageId } = useFormItem(
+    FORM_CONTROL_NAME,
+    __scopeFormField,
+  );
+
+  return (
+    <Slot
+      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}
+      aria-invalid={Boolean(error)}
+      data-slot="form-control"
+      id={formItemId}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormDescriptionProps = ComponentProps<"p">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormDescription({
+  __scopeFormField,
+  className,
+  ...props
+}: ScopedProps<FormDescriptionProps>): JSX.Element {
+  const { formDescriptionId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
+
+  return (
+    <p
+      className={cn("text-xs text-muted-foreground", className)}
+      data-slot="form-description"
+      id={formDescriptionId}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormMessage
+ * -------------------------------------------------------------------------- */
+
+const FORM_MESSAGE_NAME = "FormMessage";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormMessageProps = ComponentProps<"p">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormMessage({
+  __scopeFormField,
+  children,
+  className,
+  ...props
+}: ScopedProps<FormMessageProps>): ReactNode {
+  const { error, formMessageId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
+  const body = error?.message ?? children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      className={cn(
+        "text-xs",
+        error?.message ? "font-medium text-destructive" : "text-muted-foreground",
+        className,
+      )}
+      data-slot="form-message"
+      id={formMessageId}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export type {
+  FormControlProps,
+  FormDescriptionProps,
+  FormFieldProps,
+  FormItemProps,
+  FormLabelProps,
+  FormMessageProps,
+  FormProps,
+};
+export {
+  createFormFieldScope,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+};