@zayne-labs/ui-react 0.9.8 → 0.9.10

package/dist/esm/await-parts-BJ6C-y1f.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { a as GetSlotComponentProps } from './getSlotMap-DTkxtGhd.js';
+import { E as ErrorBoundaryProps } from './types-mdfDDNrr.js';
+import { SuspenseWithBoundaryProps } from './components/common/suspense-with-boundary/index.js';
+
+type RenderPropFn<TValue> = (result: TValue) => React.ReactNode;
+type ChildrenType<TValue> = React.ReactNode | RenderPropFn<TValue>;
+type AwaitRootProps<TValue> = Pick<SuspenseWithBoundaryProps, "errorFallback" | "fallback"> & {
+    asChild?: boolean;
+    children: ChildrenType<TValue>;
+    promise: Promise<TValue>;
+    wrapperVariant?: "all" | "none" | "only-errorBoundary" | "only-suspense";
+};
+declare function AwaitRoot<TValue>(props: AwaitRootProps<TValue>): React.JSX.Element;
+type AwaitSuccessProps<TValue = unknown> = GetSlotComponentProps<"default", ChildrenType<TValue>>;
+declare function AwaitSuccess<TPromiseOrValue, TValue = Awaited<TPromiseOrValue>>(props: Pick<AwaitSuccessProps<TValue>, "children">): React.ReactNode;
+type AwaitPendingProps = GetSlotComponentProps<"pending", React.SuspenseProps["fallback"]>;
+declare const AwaitPending: {
+    (props: Pick<AwaitPendingProps, "children">): React.ReactNode;
+    readonly slotName?: "pending" | undefined;
+    readonly slotSymbol?: symbol;
+};
+type AwaitErrorProps = GetSlotComponentProps<"error", ErrorBoundaryProps["fallback"]>;
+declare const AwaitError: {
+    (props: Pick<AwaitErrorProps, "children"> & {
+        asChild?: boolean;
+    }): React.ReactNode;
+    readonly slotName?: "error" | undefined;
+    readonly slotSymbol?: symbol;
+};
+
+declare namespace awaitParts {
+  export { AwaitError as Error, AwaitPending as Pending, AwaitRoot as Root, AwaitSuccess as Success };
+}
+
+export { AwaitRoot as A, awaitParts as a, AwaitSuccess as b, AwaitPending as c, AwaitError as d };

package/dist/esm/chunk-BIFY3R2A.js

@@ -0,0 +1,627 @@
+import { dataAttr } from './chunk-DNYM6XGW.js';
+import { cnMerge } from './chunk-OHG7GB7O.js';
+import { getElementList } from './chunk-ZNL6YLIM.js';
+import { getMultipleSlots } from './chunk-YO5LJ7ZJ.js';
+import { slot_parts_exports } from './chunk-Y5VBSXZS.js';
+import { __export } from './chunk-PZ5AY32C.js';
+import * as React2 from 'react';
+import { useMemo, Fragment, useId, useRef, useEffect, createElement } from 'react';
+import { on, toArray } from '@zayne-labs/toolkit-core';
+import { createCustomContext, useToggle, useCallbackRef, ContextError } from '@zayne-labs/toolkit-react';
+import { composeTwoEventHandlers, composeRefs } from '@zayne-labs/toolkit-react/utils';
+import { defineEnum, isString, isObject } from '@zayne-labs/toolkit-type-helpers';
+import { useFormState, useWatch, FormProvider, Controller, useFormContext } from 'react-hook-form';
+export { useFormContext } from 'react-hook-form';
+
+var EyeIconClosed = (props) => /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React2.createElement(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M15.175 8.325q.725.725 1.063 1.65t.237 1.9q0 .375-.275.638t-.65.262t-.638-.262t-.262-.638q.125-.65-.075-1.25T13.95 9.6t-1.025-.65t-1.275-.1q-.375 0-.638-.275t-.262-.65t.263-.637t.637-.263q.95-.1 1.875.238t1.65 1.062M12 6q-.475 0-.925.037t-.9.138q-.425.075-.763-.125t-.462-.6t.088-.775t.612-.45q.575-.125 1.163-.175T12 4q3.425 0 6.263 1.8t4.337 4.85q.1.2.15.413t.05.437t-.038.438t-.137.412q-.45 1-1.112 1.875t-1.463 1.6q-.3.275-.7.225t-.65-.4t-.212-.763t.337-.687q.6-.575 1.1-1.25t.875-1.45q-1.25-2.525-3.613-4.012T12 6m0 13q-3.35 0-6.125-1.812T1.5 12.425q-.125-.2-.187-.437T1.25 11.5t.05-.475t.175-.45q.5-1 1.163-1.912T4.15 7L2.075 4.9q-.275-.3-.262-.712T2.1 3.5t.7-.275t.7.275l17 17q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275l-3.5-3.45q-.875.275-1.775.413T12 19M5.55 8.4q-.725.65-1.325 1.425T3.2 11.5q1.25 2.525 3.613 4.013T12 17q.5 0 .975-.062t.975-.138l-.9-.95q-.275.075-.525.113T12 16q-1.875 0-3.188-1.312T7.5 11.5q0-.275.038-.525t.112-.525zm4.2 4.2"
+  }
+));
+var EyeIconOpen = (props) => /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React2.createElement(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2m0 4.8q-3.35 0-6.113-1.8t-4.362-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q1.6-2.95 4.363-4.75T12 4t6.113 1.8t4.362 4.75q.125.225.188.463t.062.487t-.062.488t-.188.462q-1.6 2.95-4.362 4.75T12 19m0-2q2.825 0 5.188-1.487T20.8 11.5q-1.25-2.525-3.613-4.012T12 6T6.813 7.488T3.2 11.5q1.25 2.525 3.613 4.013T12 17"
+  }
+));
+
+// src/components/ui/form/utils.ts
+var getFieldErrorMessage = (options) => {
+  const { errors, fieldName, type } = options;
+  if (!fieldName || !errors || Object.keys(errors).length === 0) return;
+  if (type === "root") {
+    return errors.root?.[fieldName]?.message;
+  }
+  const pathParts = fieldName.includes(".") ? fieldName.split(".") : null;
+  if (!pathParts) {
+    const errorMessage2 = errors[fieldName]?.message;
+    return isString(errorMessage2) ? errorMessage2 : null;
+  }
+  let extractedError = errors;
+  for (const part of pathParts) {
+    const currentError = extractedError[part];
+    if (!isObject(currentError)) break;
+    extractedError = currentError;
+  }
+  const errorMessage = isString(extractedError.message) ? extractedError.message : null;
+  return errorMessage;
+};
+var getEyeIcon = (options) => {
+  const { classNames, iconType, renderIconProps, withEyeIcon } = options;
+  if (!withEyeIcon) {
+    return null;
+  }
+  if (withEyeIcon === true) {
+    const defaultIconMap = {
+      closed: createElement(EyeIconClosed, {
+        className: cnMerge("size-full", classNames?.eyeIcon)
+      }),
+      open: createElement(EyeIconOpen, {
+        className: cnMerge("size-full", classNames?.eyeIcon)
+      })
+    };
+    return defaultIconMap[iconType];
+  }
+  if (withEyeIcon.renderIcon) {
+    return withEyeIcon.renderIcon(renderIconProps);
+  }
+  if (withEyeIcon[iconType]) {
+    return withEyeIcon[iconType];
+  }
+  return null;
+};
+
+// src/components/ui/form/form-context.ts
+var useFormMethodsContext = (options = {}) => {
+  const { strict = true } = options;
+  const formContext = useFormContext();
+  if (strict && !formContext) {
+    throw new ContextError(
+      `useFormRootContext returned "null". Did you forget to wrap the necessary components within FormRoot?`
+    );
+  }
+  return formContext;
+};
+var [LaxFormRootProvider, useLaxFormRootContext] = createCustomContext({
+  hookName: "useLaxFormRootContext",
+  name: "LaxFormRootContext",
+  providerName: "FormRoot",
+  strict: false
+});
+var [StrictFormFieldProvider, useStrictFormFieldContext] = createCustomContext(
+  {
+    hookName: "useFormFieldContext",
+    name: "StrictFormFieldContext",
+    providerName: "FormField"
+  }
+);
+var [LaxFormFieldProvider, useLaxFormFieldContext] = createCustomContext({
+  hookName: "useLaxFormFieldContext",
+  name: "LaxFormFieldContext",
+  providerName: "FormField",
+  strict: false
+});
+var useLaxFormFieldState = (options) => {
+  const { control = options?.control } = useFormMethodsContext({ strict: false }) ?? {};
+  const { name = options?.name } = useLaxFormFieldContext() ?? {};
+  const getFormState = control ? useFormState : () => ({});
+  const { disabled, errors } = getFormState({ control, name });
+  const errorMessage = getFieldErrorMessage({ errors, fieldName: name, type: "regular" });
+  return {
+    errors,
+    isDisabled: disabled,
+    isInvalid: Boolean(errorMessage)
+  };
+};
+
+// src/components/ui/form/form.tsx
+function FormRoot(props) {
+  const { children, className, methods, withEyeIcon, ...restOfProps } = props;
+  const formContextValue = useMemo(() => ({ withEyeIcon }), [withEyeIcon]);
+  return /* @__PURE__ */ React2.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React2.createElement(LaxFormRootProvider, { value: formContextValue }, /* @__PURE__ */ React2.createElement(
+    "form",
+    {
+      className: cnMerge("flex flex-col", className),
+      ...restOfProps,
+      "data-scope": "form",
+      "data-part": "root",
+      "data-slot": "form-root"
+    },
+    children
+  )));
+}
+function FormField(props) {
+  const { children, className, name, withWrapper = true } = props;
+  const { isDisabled, isInvalid } = useLaxFormFieldState({ name });
+  const uniqueId = useId();
+  const fieldContextValue = useMemo(
+    () => ({
+      formDescriptionId: `${name}-(${uniqueId})-form-item-description`,
+      formItemId: `${name}-(${uniqueId})-form-item`,
+      formMessageId: `${name}-(${uniqueId})-form-item-message`,
+      name
+    }),
+    [name, uniqueId]
+  );
+  const WrapperElement = withWrapper ? "div" : Fragment;
+  const wrapperElementProps = withWrapper && {
+    className: cnMerge("flex flex-col", className),
+    "data-part": "field",
+    "data-scope": "form",
+    "data-slot": "form-field",
+    /* eslint-disable perfectionist/sort-objects -- order of attributes does not matter */
+    "data-disabled": dataAttr(isDisabled),
+    "data-invalid": dataAttr(isInvalid)
+    /* eslint-enable perfectionist/sort-objects -- order of attributes does not matter */
+  };
+  return /* @__PURE__ */ React2.createElement(StrictFormFieldProvider, { value: fieldContextValue }, /* @__PURE__ */ React2.createElement(LaxFormFieldProvider, { value: fieldContextValue }, /* @__PURE__ */ React2.createElement(WrapperElement, { ...wrapperElementProps }, children)));
+}
+function FormFieldController(props) {
+  const { control } = useFormMethodsContext();
+  const { name } = useStrictFormFieldContext();
+  const { render, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement(Controller, { name, control, render, ...restOfProps });
+}
+function FormFieldControlledField(props) {
+  const { name } = props;
+  const uniqueId = useId();
+  const fieldContextValue = useMemo(
+    () => ({
+      formDescriptionId: `${name}-(${uniqueId})-form-item-description`,
+      formItemId: `${name}-(${uniqueId})-form-item`,
+      formMessageId: `${name}-(${uniqueId})-form-item-message`,
+      name
+    }),
+    [name, uniqueId]
+  );
+  return /* @__PURE__ */ React2.createElement(StrictFormFieldProvider, { value: fieldContextValue }, /* @__PURE__ */ React2.createElement(LaxFormFieldProvider, { value: fieldContextValue }, /* @__PURE__ */ React2.createElement(Controller, { ...props })));
+}
+function FormFieldContext(props) {
+  const { children, render } = props;
+  const fieldContextValues = useStrictFormFieldContext();
+  if (typeof children === "function") {
+    return children(fieldContextValues);
+  }
+  return render(fieldContextValues);
+}
+function FormLabel(props) {
+  const { formItemId, name } = useStrictFormFieldContext();
+  const { children, className, ...restOfProps } = props;
+  const { isDisabled, isInvalid } = useLaxFormFieldState({ name });
+  return /* @__PURE__ */ React2.createElement(
+    "label",
+    {
+      "data-scope": "form",
+      "data-part": "label",
+      "data-slot": "form-label",
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      htmlFor: formItemId,
+      className,
+      ...restOfProps
+    },
+    children
+  );
+}
+function FormInputGroup(props) {
+  const { children, className, ...restOfProps } = props;
+  const { isDisabled, isInvalid } = useLaxFormFieldState();
+  const {
+    regularChildren,
+    slots: [leftItemSlot, rightItemSlot]
+  } = getMultipleSlots(children, [FormInputLeftItem, FormInputRightItem]);
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      "data-scope": "form",
+      "data-part": "input-group",
+      "data-slot": "form-input-group",
+      "data-invalid": dataAttr(isInvalid),
+      "data-disabled": dataAttr(isDisabled),
+      className: cnMerge("flex items-center justify-between gap-2", className),
+      ...restOfProps
+    },
+    leftItemSlot,
+    regularChildren,
+    rightItemSlot
+  );
+}
+function FormInputLeftItem(props) {
+  const { as: Element = "span", children, className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement(
+    Element,
+    {
+      "data-scope": "form",
+      "data-part": "left-item",
+      "data-slot": "form-left-item",
+      className: cnMerge("inline-flex items-center justify-center", className),
+      ...restOfProps
+    },
+    children
+  );
+}
+FormInputLeftItem.slotSymbol = Symbol("input-left-item");
+function FormInputRightItem(props) {
+  const { as: Element = "span", children, className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement(
+    Element,
+    {
+      "data-scope": "form",
+      "data-part": "right-item",
+      "data-slot": "form-right-item",
+      className: cnMerge("inline-flex items-center justify-center", className),
+      ...restOfProps
+    },
+    children
+  );
+}
+FormInputRightItem.slotSymbol = Symbol("input-right-item");
+var inputTypesWithoutFullWith = /* @__PURE__ */ new Set(["checkbox", "radio"]);
+function FormInputPrimitive(props) {
+  const fieldContextValues = useLaxFormFieldContext();
+  const formRootContextValues = useLaxFormRootContext();
+  const {
+    className,
+    classNames,
+    control,
+    fieldState,
+    id = fieldContextValues?.formItemId,
+    name = fieldContextValues?.name,
+    rules,
+    type = "text",
+    withEyeIcon = formRootContextValues?.withEyeIcon ?? true,
+    ...restOfProps
+  } = props;
+  const fieldStateFromLaxFormField = useLaxFormFieldState({ control, name });
+  const { isDisabled, isInvalid } = fieldState ?? fieldStateFromLaxFormField;
+  const [isPasswordVisible, toggleVisibility] = useToggle(false);
+  const shouldHaveEyeIcon = withEyeIcon && type === "password";
+  const WrapperElement = shouldHaveEyeIcon ? FormInputGroup : Fragment;
+  const wrapperElementProps = shouldHaveEyeIcon && {
+    className: cnMerge("w-full", classNames?.inputGroup, isInvalid && classNames?.error)
+  };
+  const { register } = useFormMethodsContext({ strict: false }) ?? {};
+  const eyeIcon = getEyeIcon({
+    classNames,
+    iconType: isPasswordVisible ? "closed" : "open",
+    renderIconProps: { isPasswordVisible },
+    withEyeIcon
+  });
+  return /* @__PURE__ */ React2.createElement(WrapperElement, { ...wrapperElementProps }, /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      "data-scope": "form",
+      "data-part": "input",
+      "data-slot": "form-input",
+      "aria-describedby": !isInvalid ? fieldContextValues?.formDescriptionId : `${fieldContextValues?.formDescriptionId} ${fieldContextValues?.formMessageId}`,
+      "aria-invalid": dataAttr(isInvalid),
+      "data-invalid": dataAttr(isInvalid),
+      "data-disabled": dataAttr(isDisabled),
+      id,
+      name,
+      type: type === "password" && isPasswordVisible ? "text" : type,
+      className: cnMerge(
+        !inputTypesWithoutFullWith.has(type) && "flex w-full",
+        `focus-visible:outline-hidden placeholder:text-shadcn-muted-foreground bg-transparent
+					text-sm file:border-0 file:bg-transparent disabled:cursor-not-allowed disabled:opacity-50`,
+        className,
+        classNames?.input,
+        type !== "password" && isInvalid && classNames?.error
+      ),
+      ...Boolean(name) && register?.(name, rules),
+      ...restOfProps
+    }
+  ), shouldHaveEyeIcon && /* @__PURE__ */ React2.createElement(
+    FormInputRightItem,
+    {
+      as: "button",
+      type: "button",
+      onClick: toggleVisibility,
+      className: "size-5 shrink-0 lg:size-6"
+    },
+    eyeIcon
+  ));
+}
+function FormTextAreaPrimitive(props) {
+  const fieldContextValues = useLaxFormFieldContext();
+  const {
+    className,
+    classNames,
+    control,
+    fieldState,
+    id = fieldContextValues?.formItemId,
+    name = fieldContextValues?.name,
+    rules,
+    ...restOfProps
+  } = props;
+  const fieldStateFromLaxFormField = useLaxFormFieldState({ control, name });
+  const { isDisabled, isInvalid } = fieldState ?? fieldStateFromLaxFormField;
+  const { register } = useFormMethodsContext({ strict: false }) ?? {};
+  return /* @__PURE__ */ React2.createElement(
+    "textarea",
+    {
+      "data-scope": "form",
+      "data-part": "textarea",
+      "data-slot": "form-textarea",
+      "aria-describedby": !isInvalid ? fieldContextValues?.formDescriptionId : `${fieldContextValues?.formDescriptionId} ${fieldContextValues?.formMessageId}`,
+      "aria-invalid": dataAttr(isInvalid),
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      id,
+      name,
+      className: cnMerge(
+        `placeholder:text-shadcn-muted-foreground focus-visible:outline-hidden w-full bg-transparent
+				text-sm disabled:cursor-not-allowed disabled:opacity-50`,
+        className,
+        classNames?.base,
+        isInvalid && classNames?.error
+      ),
+      ...Boolean(name) && register?.(name, rules),
+      ...restOfProps
+    }
+  );
+}
+function FormSelectPrimitive(props) {
+  const fieldContextValues = useLaxFormFieldContext();
+  const {
+    className,
+    classNames,
+    control,
+    fieldState,
+    id = fieldContextValues?.formItemId,
+    name = fieldContextValues?.name,
+    rules,
+    ...restOfProps
+  } = props;
+  const fieldStateFromLaxFormField = useLaxFormFieldState({ control, name });
+  const { isDisabled, isInvalid } = fieldState ?? fieldStateFromLaxFormField;
+  const { register } = useFormMethodsContext({ strict: false }) ?? {};
+  return /* @__PURE__ */ React2.createElement(
+    "select",
+    {
+      defaultValue: "",
+      "data-scope": "form",
+      "data-part": "select",
+      "data-slot": "form-select",
+      "aria-describedby": !isInvalid ? fieldContextValues?.formDescriptionId : `${fieldContextValues?.formDescriptionId} ${fieldContextValues?.formMessageId}`,
+      "aria-invalid": dataAttr(isInvalid),
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      id,
+      name,
+      className: cnMerge(
+        `placeholder:text-shadcn-muted-foreground focus-visible:outline-hidden w-full bg-transparent
+				text-sm disabled:cursor-not-allowed disabled:opacity-50`,
+        className,
+        classNames?.base,
+        isInvalid && classNames?.error
+      ),
+      ...Boolean(name) && register?.(name, rules),
+      ...restOfProps
+    }
+  );
+}
+var InputTypeMap = defineEnum({
+  select: FormSelectPrimitive,
+  textarea: FormTextAreaPrimitive
+});
+function FormInput(props) {
+  const { onBlur, onChange, ref, rules, type, ...restOfProps } = props;
+  const { name } = useStrictFormFieldContext();
+  const { register } = useFormMethodsContext();
+  const SelectedInput = type === "textarea" || type === "select" ? InputTypeMap[type] : FormInputPrimitive;
+  const registerProps = name ? register(name, rules) : null;
+  return /* @__PURE__ */ React2.createElement(
+    SelectedInput,
+    {
+      type,
+      name,
+      ...registerProps,
+      ...restOfProps,
+      ref: composeRefs(registerProps?.ref, ref),
+      onChange: composeTwoEventHandlers(registerProps?.onChange, onChange),
+      onBlur: composeTwoEventHandlers(registerProps?.onBlur, onBlur)
+    }
+  );
+}
+function FormTextArea(props) {
+  return /* @__PURE__ */ React2.createElement(FormInput, { ...props, type: "textarea" });
+}
+function FormSelect(props) {
+  return /* @__PURE__ */ React2.createElement(FormInput, { ...props, type: "select" });
+}
+function FormDescription(props) {
+  const { className, ...restOfProps } = props;
+  const { formDescriptionId } = useLaxFormFieldContext() ?? {};
+  return /* @__PURE__ */ React2.createElement("p", { id: formDescriptionId, className: cnMerge("text-[12px]", className), ...restOfProps });
+}
+var FormErrorMessagePrimitive = (props) => {
+  const fieldContextValues = useLaxFormFieldContext();
+  const rootContextValues = useFormMethodsContext({ strict: false });
+  const {
+    children,
+    className,
+    classNames,
+    control = rootContextValues?.control,
+    disableErrorAnimation = false,
+    disableScrollToErrorField = false,
+    fieldName = fieldContextValues?.name,
+    render,
+    type = "regular"
+  } = props;
+  const { errors } = useLaxFormFieldState({ control, name: fieldName });
+  const { formMessageId } = useLaxFormFieldContext() ?? {};
+  const errorParagraphRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const errorAnimationClass = classNames?.errorMessageAnimation ?? "animate-shake";
+  const getErrorElements = useCallbackRef(
+    () => wrapperRef.current?.children ?? [errorParagraphRef.current]
+  );
+  useEffect(() => {
+    if (disableErrorAnimation) return;
+    if (!errors || Object.keys(errors).length === 0) return;
+    const errorMessageElements = getErrorElements();
+    if (errorMessageElements.length === 0) return;
+    for (const element of errorMessageElements) {
+      if (!element) continue;
+      element.classList.add(errorAnimationClass);
+      const onAnimationEnd = () => element.classList.remove(errorAnimationClass);
+      on("animationend", element, onAnimationEnd, { once: true });
+    }
+  }, [disableErrorAnimation, errorAnimationClass, errors, getErrorElements]);
+  useEffect(() => {
+    if (disableScrollToErrorField) return;
+    if (!errors || Object.keys(errors).length === 0) return;
+    const errorMessageElements = getErrorElements();
+    const firstErrorElement = errorMessageElements[0];
+    if (!firstErrorElement) return;
+    const inputField = document.querySelector(`[name='${fieldName}']`);
+    const isFocusableInput = inputField?.matches(
+      ":is(input, select, textarea, [contenteditable='true'])"
+    );
+    if (isFocusableInput) return;
+    requestAnimationFrame(() => {
+      const rect = firstErrorElement.getBoundingClientRect();
+      const topWithOffset = rect.top - 100;
+      window.scrollTo({
+        behavior: "smooth",
+        top: window.scrollY + topWithOffset
+      });
+    });
+  }, [disableScrollToErrorField, fieldName, errors, getErrorElements]);
+  const fieldErrorMessage = getFieldErrorMessage({ errors, fieldName, type });
+  if (!fieldErrorMessage) {
+    return null;
+  }
+  const errorMessageArray = toArray(fieldErrorMessage);
+  if (errorMessageArray.length === 0) {
+    return null;
+  }
+  const getRenderProps = (options) => {
+    const { index } = options;
+    return {
+      className: cnMerge(className, classNames?.errorMessage),
+      "data-index": index,
+      "data-part": "error-message",
+      "data-scope": "form",
+      "data-slot": "form-error-message",
+      id: formMessageId,
+      ref: (node) => {
+        if (!node || errorParagraphRef.current) return;
+        errorParagraphRef.current = node;
+      }
+    };
+  };
+  const getRenderState = (options) => {
+    const { errorMessage, index } = options;
+    return {
+      errorMessage,
+      errorMessageArray,
+      index
+    };
+  };
+  const [ErrorMessageList] = getElementList("base");
+  const WrapperComponent = "div";
+  const wrapperComponentProps = errorMessageArray.length > 1 && {
+    className: cnMerge("flex flex-col", classNames?.container),
+    "data-part": "error-message-container",
+    "data-scope": "form",
+    "data-slot": "form-error-message-container",
+    ref: wrapperRef
+  };
+  const selectedChildren = typeof children === "function" ? children : render;
+  return /* @__PURE__ */ React2.createElement(WrapperComponent, { ...wrapperComponentProps }, /* @__PURE__ */ React2.createElement(
+    ErrorMessageList,
+    {
+      each: errorMessageArray,
+      render: (errorMessage, index) => {
+        return selectedChildren({
+          props: getRenderProps({ index }),
+          state: getRenderState({ errorMessage, index })
+        });
+      }
+    }
+  ));
+};
+function FormErrorMessage(props) {
+  const fieldContextValues = useLaxFormFieldContext();
+  const { className, errorField = fieldContextValues?.name, type = "regular" } = props;
+  const { control } = useFormMethodsContext();
+  return /* @__PURE__ */ React2.createElement(
+    FormErrorMessagePrimitive,
+    {
+      control,
+      fieldName: errorField,
+      type,
+      render: ({ props: renderProps, state }) => /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          key: state.errorMessage,
+          ...renderProps,
+          className: cnMerge(
+            "text-[13px] text-red-600",
+            "data-[index=0]:mt-1",
+            renderProps.className,
+            className
+          )
+        },
+        state.errorMessage
+      )
+    }
+  );
+}
+function FormSubmit(props) {
+  const { as: Element = "button", asChild, children, type = "submit", ...restOfProps } = props;
+  const Component = asChild ? slot_parts_exports.Root : Element;
+  return /* @__PURE__ */ React2.createElement(Component, { "data-part": "submit", "data-scope": "form", "data-slot": "form-submit", type, ...restOfProps }, children);
+}
+function FormSubscribeToFieldValue(props) {
+  const fieldContextValues = useLaxFormFieldContext();
+  const { children, name = fieldContextValues?.name, render } = props;
+  const { control } = useFormMethodsContext();
+  const formValue = useWatch({ control, name });
+  const fieldProps = { value: formValue };
+  const selectedChildren = typeof children === "function" ? children : render;
+  const resolvedChildren = selectedChildren(fieldProps);
+  return resolvedChildren;
+}
+function FormSubscribeToFormState(props) {
+  const fieldContextValues = useLaxFormFieldContext();
+  const { children, control, name = fieldContextValues?.name, render } = props;
+  const formState = useFormState({ control, name });
+  const selectedChildren = typeof children === "function" ? children : render;
+  const resolvedChildren = selectedChildren(formState);
+  return resolvedChildren;
+}
+
+// src/components/ui/form/form-parts.ts
+var form_parts_exports = {};
+__export(form_parts_exports, {
+  ControlledField: () => FormFieldControlledField,
+  Description: () => FormDescription,
+  ErrorMessage: () => FormErrorMessage,
+  ErrorMessagePrimitive: () => FormErrorMessagePrimitive,
+  Field: () => FormField,
+  FieldContext: () => FormFieldContext,
+  FieldController: () => FormFieldController,
+  Input: () => FormInput,
+  InputGroup: () => FormInputGroup,
+  InputLeftItem: () => FormInputLeftItem,
+  InputPrimitive: () => FormInputPrimitive,
+  InputRightItem: () => FormInputRightItem,
+  Label: () => FormLabel,
+  Root: () => FormRoot,
+  Select: () => FormSelect,
+  Submit: () => FormSubmit,
+  SubscribeToFieldValue: () => FormSubscribeToFieldValue,
+  SubscribeToFormState: () => FormSubscribeToFormState,
+  TextArea: () => FormTextArea,
+  TextAreaPrimitive: () => FormTextAreaPrimitive
+});
+
+export { FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, form_parts_exports, useStrictFormFieldContext };
+//# sourceMappingURL=chunk-BIFY3R2A.js.map
+//# sourceMappingURL=chunk-BIFY3R2A.js.map