@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/form/form.js

@@ -0,0 +1,432 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useForm,
+  useFormContext
+} from "react-hook-form";
+import { cn } from "../../lib/utils";
+import { Label } from "../label";
+const FormRootContext = React.createContext(
+  void 0
+);
+const FormFieldContext = React.createContext(
+  void 0
+);
+const FormItemContext = React.createContext(
+  void 0
+);
+function useFormRootContext(componentName) {
+  const context = React.useContext(FormRootContext);
+  if (context === void 0) {
+    throw new Error(`${componentName} must be used within Form.`);
+  }
+  return context;
+}
+function useFormItemContext(componentName) {
+  const context = React.useContext(FormItemContext);
+  if (context === void 0) {
+    throw new Error(`${componentName} must be used within FormItem.`);
+  }
+  return context;
+}
+function composeIds(...ids) {
+  const value = ids.filter((id) => id !== void 0 && id.length > 0).join(" ");
+  return value.length > 0 ? value : void 0;
+}
+function resolveItemId(baseId, generatedId, suffix) {
+  if (baseId === void 0) {
+    return `${generatedId}-${suffix}`;
+  }
+  return baseId.endsWith(`-${suffix}`) ? `${baseId}-${generatedId}` : `${baseId}-${suffix}-${generatedId}`;
+}
+function isNamedFormChild(child, name) {
+  if (!React.isValidElement(child)) {
+    return false;
+  }
+  const { type } = child;
+  if (typeof type === "string" || typeof type === "symbol") {
+    return false;
+  }
+  return "displayName" in type && type.displayName === name;
+}
+function hasVisibleContent(children) {
+  return React.Children.toArray(children).some((child) => {
+    if (child === null || child === void 0 || typeof child === "boolean") {
+      return false;
+    }
+    if (typeof child === "string") {
+      return child.length > 0;
+    }
+    if (typeof child === "number") {
+      return true;
+    }
+    if (React.isValidElement(child)) {
+      const nestedChildren = child.props.children;
+      return nestedChildren === void 0 ? true : hasVisibleContent(nestedChildren);
+    }
+    return true;
+  });
+}
+function hasFormChild(children, name) {
+  return React.Children.toArray(children).some((child) => {
+    if (isNamedFormChild(child, name)) {
+      return true;
+    }
+    if (React.isValidElement(child)) {
+      return hasFormChild(child.props.children, name);
+    }
+    return false;
+  });
+}
+function hasRenderedFormChild(children, name) {
+  return React.Children.toArray(children).some((child) => {
+    if (isNamedFormChild(child, name)) {
+      return name === "FormMessage" ? hasVisibleContent(child.props.children) : true;
+    }
+    if (React.isValidElement(child)) {
+      return hasRenderedFormChild(child.props.children, name);
+    }
+    return false;
+  });
+}
+function createManagedSubmitHandler(form, options) {
+  const { onError, onValidSubmit, shouldValidate } = options;
+  if (!shouldValidate) {
+    return void 0;
+  }
+  return form.handleSubmit(
+    async (submittedValues) => {
+      if (onValidSubmit !== void 0) {
+        await onValidSubmit(submittedValues, form);
+      }
+    },
+    async (errors) => {
+      if (onError !== void 0) {
+        await onError(errors, form);
+      }
+    }
+  );
+}
+function createSubmitHandler(nativeSubmit, handleValidatedSubmit) {
+  return async (event) => {
+    nativeSubmit?.(event);
+    if (handleValidatedSubmit && !event.defaultPrevented) {
+      await handleValidatedSubmit(event);
+    }
+  };
+}
+function useFormRootContextValue(value) {
+  const { controlId, descriptionId, disabled, invalid, messageId, required } = value;
+  return React.useMemo(
+    () => ({
+      controlId,
+      descriptionId,
+      disabled,
+      invalid,
+      messageId,
+      required
+    }),
+    [controlId, descriptionId, disabled, invalid, messageId, required]
+  );
+}
+function FormMarkup({
+  children,
+  className,
+  disabled,
+  form,
+  formProps,
+  formRef,
+  handleValidatedSubmit,
+  invalid,
+  onSubmit,
+  rootContextValue
+}) {
+  return /* @__PURE__ */ jsx(FormRootContext.Provider, { value: rootContextValue, children: /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      className: cn("space-y-2", className),
+      "data-disabled": disabled || form.formState.isSubmitting ? "true" : void 0,
+      "data-invalid": invalid ? "true" : void 0,
+      "data-submitting": form.formState.isSubmitting ? "true" : void 0,
+      onSubmit: onSubmit === void 0 && handleValidatedSubmit === void 0 ? void 0 : createSubmitHandler(onSubmit, handleValidatedSubmit),
+      ref: formRef,
+      ...formProps,
+      children: typeof children === "function" ? children(form) : children
+    }
+  ) }) });
+}
+function FormInner({
+  children,
+  className,
+  controlId,
+  defaultValues,
+  descriptionId,
+  disabled = false,
+  form: providedForm,
+  invalid = false,
+  messageId,
+  onError,
+  onSubmit,
+  onValidSubmit,
+  required = false,
+  resolver,
+  schema,
+  values,
+  ...props
+}, ref) {
+  const internalForm = useForm({
+    defaultValues,
+    resolver: schema === void 0 ? resolver : zodResolver(schema),
+    values
+  });
+  const form = providedForm ?? internalForm;
+  const isManagedForm = providedForm !== void 0 || resolver !== void 0 || schema !== void 0;
+  const rootContextValue = useFormRootContextValue({
+    controlId,
+    descriptionId,
+    disabled,
+    invalid,
+    messageId,
+    required
+  });
+  const handleValidatedSubmit = createManagedSubmitHandler(form, {
+    onError,
+    onValidSubmit,
+    shouldValidate: isManagedForm || onValidSubmit !== void 0 || onError !== void 0
+  });
+  return /* @__PURE__ */ jsx(
+    FormMarkup,
+    {
+      className,
+      disabled,
+      form,
+      formProps: props,
+      formRef: ref,
+      handleValidatedSubmit,
+      invalid,
+      onSubmit,
+      rootContextValue,
+      children
+    }
+  );
+}
+const FormBase = React.forwardRef(FormInner);
+FormBase.displayName = "Form";
+const Form = FormBase;
+function FormField({ ...props }) {
+  const fieldContextValue = React.useMemo(
+    () => ({ name: props.name }),
+    [props.name]
+  );
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: fieldContextValue, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+}
+function useFormField() {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = useFormItemContext("useFormField");
+  const { formState, getFieldState } = useFormContext();
+  if (fieldContext === void 0) {
+    return {
+      disabled: itemContext.disabled,
+      error: void 0,
+      formDescriptionId: itemContext.descriptionId,
+      formItemId: itemContext.controlId,
+      formMessageId: itemContext.messageId,
+      hasDescription: itemContext.hasDescription,
+      hasMessage: itemContext.hasMessage,
+      hasMessageSlot: itemContext.hasMessageSlot,
+      id: itemContext.id,
+      invalid: itemContext.invalid,
+      isDirty: false,
+      isTouched: false,
+      isValidating: false,
+      name: "",
+      required: itemContext.required
+    };
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  return {
+    disabled: itemContext.disabled,
+    error: fieldState.error,
+    formDescriptionId: itemContext.descriptionId,
+    formItemId: itemContext.controlId,
+    formMessageId: itemContext.messageId,
+    hasDescription: itemContext.hasDescription,
+    hasMessage: itemContext.hasMessage,
+    hasMessageSlot: itemContext.hasMessageSlot,
+    id: itemContext.id,
+    invalid: itemContext.invalid || fieldState.invalid,
+    isDirty: fieldState.isDirty,
+    isTouched: fieldState.isTouched,
+    isValidating: fieldState.isValidating,
+    name: fieldContext.name,
+    required: itemContext.required
+  };
+}
+const FormItem = React.forwardRef(
+  ({
+    children,
+    className,
+    disabled: itemDisabled,
+    invalid: itemInvalid,
+    required: itemRequired,
+    ...props
+  }, ref) => {
+    const {
+      controlId: controlIdBase,
+      descriptionId: descriptionIdBase,
+      disabled,
+      invalid,
+      messageId: messageIdBase,
+      required
+    } = useFormRootContext("FormItem");
+    const generatedId = React.useId();
+    const hasDescription = hasRenderedFormChild(children, "FormDescription");
+    const hasMessage = hasRenderedFormChild(children, "FormMessage");
+    const hasMessageSlot = hasFormChild(children, "FormMessage");
+    const effectiveDisabled = itemDisabled ?? disabled;
+    const effectiveInvalid = itemInvalid ?? invalid;
+    const effectiveRequired = itemRequired ?? required;
+    const value = React.useMemo(
+      () => ({
+        controlId: resolveItemId(controlIdBase, generatedId, "control"),
+        descriptionId: resolveItemId(
+          descriptionIdBase,
+          generatedId,
+          "description"
+        ),
+        disabled: effectiveDisabled,
+        hasDescription,
+        hasMessage,
+        hasMessageSlot,
+        id: generatedId,
+        invalid: effectiveInvalid,
+        messageId: resolveItemId(messageIdBase, generatedId, "message"),
+        required: effectiveRequired
+      }),
+      [
+        controlIdBase,
+        descriptionIdBase,
+        effectiveDisabled,
+        effectiveInvalid,
+        effectiveRequired,
+        generatedId,
+        hasDescription,
+        hasMessage,
+        hasMessageSlot,
+        messageIdBase
+      ]
+    );
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), ref, ...props, children }) });
+  }
+);
+FormItem.displayName = "FormItem";
+const FormLabel = React.forwardRef(({ className, htmlFor, ...props }, ref) => {
+  const { formItemId, invalid } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      className: cn(invalid && "text-destructive", className),
+      "data-invalid": invalid ? "true" : void 0,
+      htmlFor: htmlFor ?? formItemId,
+      ref,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = React.forwardRef(
+  ({ disabled: controlDisabled, id: _id, required: controlRequired, ...props }, ref) => {
+    const {
+      disabled,
+      error,
+      formDescriptionId,
+      formItemId,
+      formMessageId,
+      hasDescription,
+      hasMessage,
+      hasMessageSlot,
+      invalid,
+      required
+    } = useFormField();
+    const { formState } = useFormContext();
+    const hasErrorMessage = hasVisibleContent(error?.message);
+    const describedBy = composeIds(
+      props["aria-describedby"],
+      hasDescription ? formDescriptionId : void 0,
+      error === void 0 ? hasMessage && invalid ? formMessageId : void 0 : hasMessageSlot && hasErrorMessage ? formMessageId : void 0
+    );
+    const effectiveDisabled = controlDisabled ?? (disabled || formState.isSubmitting);
+    const effectiveRequired = controlRequired ?? required;
+    const nativeConstraintProps = {
+      disabled: effectiveDisabled || void 0,
+      required: effectiveRequired || void 0
+    };
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ...props,
+        ...nativeConstraintProps,
+        "aria-describedby": describedBy,
+        "aria-disabled": props["aria-disabled"] ?? (effectiveDisabled || void 0),
+        "aria-invalid": props["aria-invalid"] ?? (invalid || void 0),
+        "aria-required": props["aria-required"] ?? (effectiveRequired || void 0),
+        "data-disabled": effectiveDisabled ? "true" : void 0,
+        "data-invalid": invalid ? "true" : void 0,
+        id: formItemId,
+        ref
+      }
+    );
+  }
+);
+FormControl.displayName = "FormControl";
+const FormDescription = React.forwardRef(({ className, id: _id, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      className: cn("text-sm text-muted-foreground", className),
+      id: formDescriptionId,
+      ref
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = React.forwardRef(({ children, className, id: _id, ...props }, ref) => {
+  const { error, formMessageId, invalid } = useFormField();
+  const body = error?.message ?? children;
+  if (!hasVisibleContent(body)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      className: cn(
+        "text-sm font-medium",
+        invalid || error !== void 0 ? "text-destructive" : "text-foreground",
+        className
+      ),
+      id: formMessageId,
+      ref,
+      role: invalid || error !== void 0 ? "alert" : void 0,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};

package/dist/components/form/index.js

@@ -0,0 +1,20 @@
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+} from "./form";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};