@zayne-labs/ui-react 0.0.3

package/dist/esm/ui/drop-zone/index.js

@@ -0,0 +1,125 @@
+import { cnMerge } from '../../chunk-ABOA7YOO.js';
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { handleFileValidation } from '@zayne-labs/toolkit-core';
+import { useToggle, useCallbackRef } from '@zayne-labs/toolkit-react';
+import { isObject, isFunction } from '@zayne-labs/toolkit-type-helpers';
+
+var useDropZone = (props) => {
+  const inputRef = useRef(null);
+  const {
+    allowedFileTypes,
+    children,
+    classNames,
+    disableInbuiltValidation,
+    existingFiles,
+    extraInputProps,
+    extraRootProps,
+    onUpload,
+    onUploadError,
+    onUploadSuccess,
+    ref,
+    validationSettings,
+    validator
+    // eslint-disable-next-line ts-eslint/no-unnecessary-condition -- Can be undefined
+  } = props ?? {};
+  const [isDragging, toggleIsDragging] = useToggle(false);
+  const [acceptedFiles, setAcceptedFiles] = useState([]);
+  const handleFileUpload = useCallbackRef(
+    (event) => {
+      if (event.type === "drop") {
+        event.preventDefault();
+        toggleIsDragging(false);
+      }
+      const fileList = event.type === "drop" ? event.dataTransfer.files : event.target.files;
+      if (fileList === null) {
+        console.warn("No file selected");
+        return;
+      }
+      const inbuiltValidatedFilesArray = !disableInbuiltValidation ? handleFileValidation({
+        existingFileArray: existingFiles,
+        newFileList: fileList,
+        onError: onUploadError,
+        onSuccess: onUploadSuccess,
+        validationSettings: isObject(validationSettings) ? { ...validationSettings, allowedFileTypes } : {}
+      }) : [];
+      const validatorFnFileArray = validator ? validator({ existingFileArray: existingFiles, newFileList: fileList }) : [];
+      const validFilesArray = [...inbuiltValidatedFilesArray, ...validatorFnFileArray];
+      if (validFilesArray.length === 0) return;
+      setAcceptedFiles(validFilesArray);
+      onUpload?.({ acceptedFiles: validFilesArray, event });
+    }
+  );
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    toggleIsDragging(true);
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    toggleIsDragging(false);
+  };
+  const getRenderProps = () => ({ acceptedFiles, inputRef, isDragging });
+  const getChildren = () => isFunction(children) ? children(getRenderProps()) : children;
+  const getRootProps = () => ({
+    ...extraRootProps,
+    className: cnMerge(
+      "relative isolate flex flex-col",
+      extraRootProps?.className,
+      classNames?.base,
+      isDragging && ["opacity-60", classNames?.activeDrag]
+    ),
+    "data-active-drag": isDragging,
+    "data-part": "root",
+    "data-scope": "dropzone",
+    onDragEnter: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleFileUpload
+  });
+  const refCallback = useCallbackRef((node) => {
+    inputRef.current = node;
+    if (!ref) return;
+    if (isFunction(ref)) {
+      return ref(node);
+    }
+    ref.current = node;
+  });
+  const getInputProps = () => ({
+    ...extraInputProps,
+    accept: allowedFileTypes ? allowedFileTypes.join(", ") : extraInputProps?.accept,
+    className: cnMerge(
+      "absolute inset-0 z-[100] cursor-pointer opacity-0",
+      extraInputProps?.className,
+      classNames?.input
+    ),
+    "data-part": "input",
+    "data-scope": "dropzone",
+    onChange: (event) => {
+      handleFileUpload(event);
+      extraInputProps?.onChange?.(event);
+    },
+    ref: refCallback,
+    type: "file"
+  });
+  return {
+    getChildren,
+    getInputProps,
+    getRenderProps,
+    getRootProps,
+    handleDragLeave,
+    handleDragOver,
+    handleFileUpload,
+    isDragging,
+    ref
+  };
+};
+
+// src/components/ui/drop-zone/drop-zone.tsx
+function DropZone(props) {
+  const api = useDropZone(props);
+  return /* @__PURE__ */ React.createElement("div", { ...api.getRootProps() }, /* @__PURE__ */ React.createElement("input", { ...api.getInputProps() }), api.getChildren());
+}
+
+export { DropZone, useDropZone };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/drop-zone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/drop-zone/useDropZone.ts","../../../../src/components/ui/drop-zone/drop-zone.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["\"use client\";\n\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport { type FileValidationOptions, handleFileValidation } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useToggle } from \"@zayne-labs/toolkit-react\";\nimport type { InferProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction, isObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport { type RefCallback, useRef, useState } from \"react\";\n\ntype RenderProps = {\n\tacceptedFiles: File[];\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n\tisDragging: boolean;\n};\n\nexport type UseDropZoneProps = {\n\tallowedFileTypes?: string[];\n\n\tchildren?: React.ReactNode | ((props: RenderProps) => React.ReactNode);\n\n\tclassNames?: { activeDrag?: string; base?: string; input?: string };\n\n\tdisableInbuiltValidation?: boolean;\n\n\texistingFiles?: File[];\n\n\textraInputProps?: Omit<InferProps<\"input\">, \"ref\">;\n\n\textraRootProps?: InferProps<\"div\">;\n\n\tonUpload?: (details: {\n\t\tacceptedFiles: File[];\n\t\tevent: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>;\n\t}) => void;\n\n\tonUploadError?: FileValidationOptions[\"onError\"];\n\n\tonUploadSuccess?: FileValidationOptions[\"onSuccess\"];\n\n\tref?: React.Ref<HTMLInputElement>;\n\n\tvalidationSettings?: {\n\t\tdisallowDuplicates?: boolean;\n\t\tfileLimit?: number;\n\t\tmaxFileSize?: number;\n\t};\n\tvalidator?: (context: { existingFileArray: File[] | undefined; newFileList: FileList }) => File[];\n};\n\nexport const useDropZone = (props: UseDropZoneProps) => {\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\tconst {\n\t\tallowedFileTypes,\n\t\tchildren,\n\t\tclassNames,\n\t\tdisableInbuiltValidation,\n\t\texistingFiles,\n\t\textraInputProps,\n\t\textraRootProps,\n\t\tonUpload,\n\t\tonUploadError,\n\t\tonUploadSuccess,\n\t\tref,\n\t\tvalidationSettings,\n\t\tvalidator,\n\t\t// eslint-disable-next-line ts-eslint/no-unnecessary-condition -- Can be undefined\n\t} = props ?? {};\n\n\tconst [isDragging, toggleIsDragging] = useToggle(false);\n\n\tconst [acceptedFiles, setAcceptedFiles] = useState<File[]>([]);\n\n\tconst handleFileUpload = useCallbackRef(\n\t\t(event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) => {\n\t\t\tif (event.type === \"drop\") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\ttoggleIsDragging(false);\n\t\t\t}\n\n\t\t\tconst fileList =\n\t\t\t\tevent.type === \"drop\"\n\t\t\t\t\t? (event as React.DragEvent).dataTransfer.files\n\t\t\t\t\t: (event as React.ChangeEvent<HTMLInputElement>).target.files;\n\n\t\t\tif (fileList === null) {\n\t\t\t\tconsole.warn(\"No file selected\");\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst inbuiltValidatedFilesArray = !disableInbuiltValidation\n\t\t\t\t? handleFileValidation({\n\t\t\t\t\t\texistingFileArray: existingFiles,\n\t\t\t\t\t\tnewFileList: fileList,\n\t\t\t\t\t\tonError: onUploadError,\n\t\t\t\t\t\tonSuccess: onUploadSuccess,\n\t\t\t\t\t\tvalidationSettings: isObject(validationSettings)\n\t\t\t\t\t\t\t? { ...validationSettings, allowedFileTypes }\n\t\t\t\t\t\t\t: {},\n\t\t\t\t\t})\n\t\t\t\t: [];\n\n\t\t\tconst validatorFnFileArray = validator\n\t\t\t\t? validator({ existingFileArray: existingFiles, newFileList: fileList })\n\t\t\t\t: [];\n\n\t\t\tconst validFilesArray = [...inbuiltValidatedFilesArray, ...validatorFnFileArray];\n\n\t\t\tif (validFilesArray.length === 0) return;\n\n\t\t\tsetAcceptedFiles(validFilesArray);\n\n\t\t\tonUpload?.({ acceptedFiles: validFilesArray, event });\n\t\t}\n\t);\n\n\tconst handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tevent.preventDefault();\n\t\ttoggleIsDragging(true);\n\t};\n\n\tconst handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {\n\t\tevent.preventDefault();\n\t\ttoggleIsDragging(false);\n\t};\n\n\tconst getRenderProps = () => ({ acceptedFiles, inputRef, isDragging }) satisfies RenderProps;\n\n\tconst getChildren = () => (isFunction(children) ? children(getRenderProps()) : children);\n\n\tconst getRootProps = () => ({\n\t\t...extraRootProps,\n\t\tclassName: cnMerge(\n\t\t\t\"relative isolate flex flex-col\",\n\t\t\textraRootProps?.className,\n\t\t\tclassNames?.base,\n\t\t\tisDragging && [\"opacity-60\", classNames?.activeDrag]\n\t\t),\n\t\t\"data-active-drag\": isDragging,\n\t\t\"data-part\": \"root\",\n\t\t\"data-scope\": \"dropzone\",\n\t\tonDragEnter: handleDragOver,\n\t\tonDragLeave: handleDragLeave,\n\t\tonDragOver: handleDragOver,\n\t\tonDrop: handleFileUpload,\n\t});\n\n\tconst refCallback: RefCallback<HTMLInputElement> = useCallbackRef((node) => {\n\t\tinputRef.current = node;\n\n\t\tif (!ref) return;\n\n\t\tif (isFunction(ref)) {\n\t\t\treturn ref(node);\n\t\t}\n\n\t\tref.current = node;\n\t});\n\n\tconst getInputProps = () => ({\n\t\t...extraInputProps,\n\t\taccept: allowedFileTypes ? allowedFileTypes.join(\", \") : extraInputProps?.accept,\n\t\tclassName: cnMerge(\n\t\t\t\"absolute inset-0 z-[100] cursor-pointer opacity-0\",\n\t\t\textraInputProps?.className,\n\t\t\tclassNames?.input\n\t\t),\n\t\t\"data-part\": \"input\",\n\t\t\"data-scope\": \"dropzone\",\n\t\tonChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\thandleFileUpload(event);\n\t\t\textraInputProps?.onChange?.(event);\n\t\t},\n\t\tref: refCallback,\n\t\ttype: \"file\",\n\t});\n\n\treturn {\n\t\tgetChildren,\n\t\tgetInputProps,\n\t\tgetRenderProps,\n\t\tgetRootProps,\n\t\thandleDragLeave,\n\t\thandleDragOver,\n\t\thandleFileUpload,\n\t\tisDragging,\n\t\tref,\n\t};\n};\n","import * as React from \"react\";\n\nimport { type UseDropZoneProps, useDropZone } from \"./useDropZone\";\n\nfunction DropZone(props: UseDropZoneProps) {\n\tconst api = useDropZone(props);\n\n\treturn (\n\t\t<div {...api.getRootProps()}>\n\t\t\t<input {...api.getInputProps()} />\n\n\t\t\t{api.getChildren()}\n\t\t</div>\n\t);\n}\n\nexport { DropZone };\n"]}

package/dist/esm/ui/form/index.d.ts

@@ -0,0 +1,159 @@
+import * as react from 'react';
+import { InferProps, PolymorphicProps, DiscriminatedRenderProps } from '@zayne-labs/toolkit-react/utils';
+import { UseFormReturn, Control, FormState, RegisterOptions, ControllerProps, FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
+export { Controller as ControllerPrimitive } from 'react-hook-form';
+
+type FieldValues = Record<string, unknown>;
+type FormRootProps<TValues extends FieldValues> = react.ComponentPropsWithoutRef<"form"> & {
+    children: react.ReactNode;
+    methods: UseFormReturn<TValues>;
+};
+type ContextValue = {
+    name: string;
+    uniqueId: string;
+};
+declare const useStrictFormItemContext: () => ContextValue;
+declare function FormRoot<TValues extends FieldValues>(props: FormRootProps<TValues>): react.JSX.Element;
+type FormItemProps<TControl, TFieldValues extends FieldValues> = (TControl extends Control<infer TValues> ? {
+    control?: never;
+    name: keyof TValues;
+} : {
+    control?: Control<TFieldValues>;
+    name: keyof TFieldValues;
+}) & {
+    children: react.ReactNode;
+    className?: string;
+    withWrapper?: boolean;
+};
+declare function FormItem<TControl, TFieldValues extends FieldValues = FieldValues>(props: FormItemProps<TControl, TFieldValues>): react.JSX.Element;
+type FormItemContextProps = DiscriminatedRenderProps<(contextValue: ContextValue) => react.ReactNode>;
+declare function FormItemContext(props: FormItemContextProps): react.ReactNode;
+declare function FormLabel(props: InferProps<"label">): react.JSX.Element;
+declare function FormInputGroup(props: react.ComponentPropsWithRef<"div">): react.JSX.Element;
+type FormSideItemProps = {
+    children?: react.ReactNode;
+    className?: string;
+};
+declare function FormInputLeftItem<TElement extends react.ElementType = "span">(props: PolymorphicProps<TElement, FormSideItemProps>): react.JSX.Element;
+declare namespace FormInputLeftItem {
+    var slot: symbol;
+}
+declare function FormInputRightItem<TElement extends react.ElementType = "span">(props: PolymorphicProps<TElement, FormSideItemProps>): react.JSX.Element;
+declare namespace FormInputRightItem {
+    var slot: symbol;
+}
+type FormInputPrimitiveProps<TFieldValues extends FieldValues = FieldValues> = Omit<react.ComponentPropsWithRef<"input">, "children"> & {
+    classNames?: {
+        error?: string;
+        eyeIcon?: string;
+        input?: string;
+        inputGroup?: string;
+    };
+    name?: keyof TFieldValues;
+    withEyeIcon?: boolean;
+} & ({
+    control: Control<TFieldValues>;
+    formState?: never;
+} | {
+    control?: never;
+    formState?: FormState<TFieldValues>;
+});
+declare function FormInputPrimitive<TFieldValues extends FieldValues>(props: FormInputPrimitiveProps<TFieldValues>): react.JSX.Element;
+declare function FormInput(props: Omit<FormInputPrimitiveProps, "control" | "formState" | "name" | "ref"> & {
+    rules?: RegisterOptions;
+}): react.JSX.Element;
+type FormTextAreaPrimitiveProps<TFieldValues extends FieldValues = FieldValues> = react.ComponentPropsWithRef<"textarea"> & {
+    errorClassName?: string;
+    name?: keyof TFieldValues;
+} & ({
+    control: Control<TFieldValues>;
+    formState?: never;
+} | {
+    control?: never;
+    formState?: FormState<TFieldValues>;
+});
+declare function FormTextAreaPrimitive<TFieldValues extends FieldValues>(props: FormTextAreaPrimitiveProps<TFieldValues>): react.JSX.Element;
+declare function FormTextArea(props: Omit<FormTextAreaPrimitiveProps, "control" | "formState" | "id" | "name" | "ref"> & {
+    rules?: RegisterOptions;
+}): react.JSX.Element;
+type FormControllerProps<TFieldValues> = Omit<ControllerProps<FieldValues, FieldPath<FieldValues>>, "control" | "name" | "render"> & {
+    render: (props: {
+        field: Omit<ControllerRenderProps, "value"> & {
+            value: TFieldValues;
+        };
+        fieldState: ControllerFieldState;
+        formState: UseFormStateReturn<FieldValues>;
+    }) => react.ReactElement;
+};
+declare function FormController<TFieldValues = never>(props: FormControllerProps<TFieldValues>): react.JSX.Element;
+type FormErrorRenderProps = {
+    className: string;
+    "data-index": number;
+    "data-part": string;
+    "data-scope": string;
+    onAnimationEnd?: react.ReactEventHandler<HTMLElement>;
+};
+type FormErrorRenderPropState = {
+    errorMessage: string;
+    errorMessageArray: string[];
+    index: number;
+};
+type FormErrorMessagePrimitiveProps<TFieldValues extends FieldValues> = {
+    className?: string;
+    classNames?: {
+        container?: string;
+        errorMessage?: string;
+        errorMessageAnimation?: string;
+    };
+    control: Control<TFieldValues>;
+    render: (context: {
+        props: FormErrorRenderProps;
+        state: FormErrorRenderPropState;
+    }) => react.ReactNode;
+    withAnimationOnInvalid?: boolean;
+} & ({
+    errorField: keyof TFieldValues;
+    type?: "regular";
+} | {
+    errorField: string;
+    type: "root";
+});
+declare function FormErrorMessagePrimitive<TFieldValues extends FieldValues>(props: Extract<FormErrorMessagePrimitiveProps<TFieldValues>, {
+    type?: "regular";
+}>): react.ReactNode;
+declare function FormErrorMessagePrimitive<TFieldValues extends FieldValues>(props: Extract<FormErrorMessagePrimitiveProps<TFieldValues>, {
+    type: "root";
+}>): react.ReactNode;
+type FormErrorMessageProps<TControl, TFieldValues extends FieldValues> = (TControl extends Control<infer TValues> ? {
+    className?: string;
+    control?: never;
+    errorField?: keyof TValues;
+    type?: "regular";
+} : {
+    className?: string;
+    control?: Control<TFieldValues>;
+    errorField?: keyof TFieldValues;
+    type?: "regular";
+}) | {
+    className?: string;
+    control?: never;
+    errorField: string;
+    type: "root";
+};
+declare function FormErrorMessage<TControl, TFieldValues extends FieldValues = FieldValues>(props: FormErrorMessageProps<TControl, TFieldValues>): react.JSX.Element;
+declare const Root: typeof FormRoot;
+declare const Item: typeof FormItem;
+declare const ItemContext: typeof FormItemContext;
+declare const Label: typeof FormLabel;
+declare const ErrorMessagePrimitive: typeof FormErrorMessagePrimitive;
+declare const ErrorMessage: typeof FormErrorMessage;
+declare const Input: typeof FormInput;
+declare const InputPrimitive: typeof FormInputPrimitive;
+declare const InputGroup: typeof FormInputGroup;
+declare const InputLeftItem: typeof FormInputLeftItem;
+declare const InputRightItem: typeof FormInputRightItem;
+declare const TextAreaPrimitive: typeof FormTextAreaPrimitive;
+declare const TextArea: typeof FormTextArea;
+declare const Controller: typeof FormController;
+
+export { Controller, ErrorMessage, ErrorMessagePrimitive, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormItem, FormLabel, FormRoot, Input, InputGroup, InputLeftItem, InputPrimitive, InputRightItem, Item, ItemContext, Label, Root, TextArea, TextAreaPrimitive, useStrictFormItemContext as useFormItemContext };

package/dist/esm/ui/form/index.js

@@ -0,0 +1,336 @@
+import { getElementList } from '../../chunk-7TYZVYD6.js';
+import { cnMerge } from '../../chunk-ABOA7YOO.js';
+import * as React2 from 'react';
+import { useId, useMemo, Fragment, useRef, useEffect } from 'react';
+import { toArray } from '@zayne-labs/toolkit-core';
+import { createCustomContext, useToggle } from '@zayne-labs/toolkit-react';
+import { getSlotElement, getOtherChildren } from '@zayne-labs/toolkit-react/utils';
+import { FormProvider, useFormState, useFormContext, Controller } from 'react-hook-form';
+export { Controller as ControllerPrimitive } from 'react-hook-form';
+
+// src/components/icons/EyeIcon.tsx
+var EyeIconInvisible = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.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 EyeIconVisible = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.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"
+  }
+));
+var [StrictFormItemProvider, useStrictFormItemContext] = createCustomContext({
+  hookName: "useStrictFormItemContext",
+  providerName: "StrictFormItemProvider"
+});
+var [LaxFormItemProvider, useLaxFormItemContext] = createCustomContext({
+  hookName: "useLaxFormItemContext",
+  providerName: "LaxFormItemProvider",
+  strict: false
+});
+function FormRoot(props) {
+  const { children, className, methods, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React2.createElement(
+    "form",
+    {
+      className: cnMerge("flex flex-col", className),
+      ...restOfProps,
+      "data-scope": "form",
+      "data-part": "root"
+    },
+    children
+  ));
+}
+function FormItem(props) {
+  const { children, className, name, withWrapper = true } = props;
+  const uniqueId = useId();
+  const value = useMemo(
+    () => ({ name: String(name), uniqueId: `${String(name)}-(${uniqueId})` }),
+    [name, uniqueId]
+  );
+  const WrapperElement = withWrapper ? "div" : Fragment;
+  const wrapperElementProps = withWrapper && {
+    className: cnMerge("flex flex-col", className),
+    "data-part": "item",
+    "data-scope": "form"
+  };
+  return /* @__PURE__ */ React2.createElement(StrictFormItemProvider, { value }, /* @__PURE__ */ React2.createElement(LaxFormItemProvider, { value }, /* @__PURE__ */ React2.createElement(WrapperElement, { ...wrapperElementProps }, children)));
+}
+function FormItemContext(props) {
+  const { children, render } = props;
+  const contextValues = useStrictFormItemContext();
+  if (typeof children === "function") {
+    return children(contextValues);
+  }
+  return render(contextValues);
+}
+function FormLabel(props) {
+  const { uniqueId } = useStrictFormItemContext();
+  const { children, className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement("label", { "data-scope": "form", "data-part": "label", htmlFor: uniqueId, className, ...restOfProps }, children);
+}
+function FormInputGroup(props) {
+  const { children, className, ...restOfProps } = props;
+  const LeftItemSlot = getSlotElement(children, FormInputLeftItem);
+  const RightItemSlot = getSlotElement(children, FormInputRightItem);
+  const otherChildren = getOtherChildren(children, [FormInputLeftItem, FormInputRightItem]);
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      "data-scope": "form",
+      "data-part": "input-group",
+      className: cnMerge("flex items-center justify-between gap-2", className),
+      ...restOfProps
+    },
+    LeftItemSlot,
+    otherChildren,
+    RightItemSlot
+  );
+}
+function FormInputLeftItem(props) {
+  const { as: Element = "span", children, className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement(
+    Element,
+    {
+      "data-scope": "form",
+      "data-part": "left-item",
+      className: cnMerge("inline-flex items-center justify-center", className),
+      ...restOfProps
+    },
+    children
+  );
+}
+FormInputLeftItem.slot = Symbol.for("leftItem");
+function FormInputRightItem(props) {
+  const { as: Element = "span", children, className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement(
+    Element,
+    {
+      "data-scope": "form",
+      "data-part": "right-item",
+      className: cnMerge("inline-flex items-center justify-center", className),
+      ...restOfProps
+    },
+    children
+  );
+}
+FormInputRightItem.slot = Symbol.for("rightItem");
+var inputTypesWithoutFullWith = /* @__PURE__ */ new Set(["checkbox", "radio"]);
+function FormInputPrimitive(props) {
+  const contextValues = useLaxFormItemContext();
+  const {
+    className,
+    classNames,
+    control,
+    formState,
+    id = contextValues?.uniqueId,
+    name = contextValues?.name,
+    type = "text",
+    withEyeIcon = true,
+    ...restOfProps
+  } = props;
+  const getFormState = control ? useFormState : () => formState;
+  const { errors } = getFormState({ control }) ?? {};
+  const [isPasswordVisible, toggleVisibility] = useToggle(false);
+  const shouldHaveEyeIcon = withEyeIcon && type === "password";
+  const WrapperElement = shouldHaveEyeIcon ? FormInputGroup : Fragment;
+  const wrapperElementProps = shouldHaveEyeIcon && {
+    className: cnMerge("w-full", classNames?.inputGroup, name && errors?.[name] && classNames?.error)
+  };
+  return /* @__PURE__ */ React2.createElement(WrapperElement, { ...wrapperElementProps }, /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      "data-scope": "form",
+      "data-part": "input",
+      id,
+      name,
+      type: type === "password" && isPasswordVisible ? "text" : type,
+      className: cnMerge(
+        !inputTypesWithoutFullWith.has(type) && "flex w-full",
+        `bg-transparent text-sm file:border-0 file:bg-transparent
+					placeholder:text-shadcn-muted-foreground focus-visible:outline-none
+					disabled:cursor-not-allowed disabled:opacity-50`,
+        className,
+        classNames?.input,
+        type !== "password" && name && errors?.[name] && classNames?.error
+      ),
+      ...restOfProps
+    }
+  ), shouldHaveEyeIcon && /* @__PURE__ */ React2.createElement(
+    FormInputRightItem,
+    {
+      as: "button",
+      type: "button",
+      onClick: toggleVisibility,
+      className: "size-5 shrink-0 lg:size-6"
+    },
+    isPasswordVisible ? /* @__PURE__ */ React2.createElement(EyeIconInvisible, { className: cnMerge("size-full", classNames?.eyeIcon) }) : /* @__PURE__ */ React2.createElement(EyeIconVisible, { className: cnMerge("size-full", classNames?.eyeIcon) })
+  ));
+}
+function FormInput(props) {
+  const { rules, ...restOfProps } = props;
+  const { name } = useStrictFormItemContext();
+  const { formState, register } = useFormContext();
+  return /* @__PURE__ */ React2.createElement(
+    FormInputPrimitive,
+    {
+      name,
+      formState,
+      ...Boolean(name) && register(name, rules),
+      ...restOfProps
+    }
+  );
+}
+function FormTextAreaPrimitive(props) {
+  const contextValues = useLaxFormItemContext();
+  const {
+    className,
+    control,
+    errorClassName,
+    formState,
+    id = contextValues?.uniqueId,
+    name = contextValues?.name,
+    ...restOfProps
+  } = props;
+  const getFormState = control ? useFormState : () => formState;
+  const { errors } = getFormState({ control }) ?? {};
+  return /* @__PURE__ */ React2.createElement(
+    "textarea",
+    {
+      "data-scope": "form",
+      "data-part": "textarea",
+      id,
+      name,
+      className: cnMerge(
+        `w-full bg-transparent text-sm placeholder:text-shadcn-muted-foreground
+				focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50`,
+        className,
+        name && errors?.[name] && errorClassName
+      ),
+      ...restOfProps
+    }
+  );
+}
+function FormTextArea(props) {
+  const { rules, ...restOfProps } = props;
+  const { name } = useStrictFormItemContext();
+  const { formState, register } = useFormContext();
+  return /* @__PURE__ */ React2.createElement(
+    FormTextAreaPrimitive,
+    {
+      name,
+      formState,
+      ...Boolean(name) && register(name, rules),
+      ...restOfProps
+    }
+  );
+}
+function FormController(props) {
+  const { control } = useFormContext();
+  const { name } = useStrictFormItemContext();
+  return /* @__PURE__ */ React2.createElement(Controller, { name, control, ...props });
+}
+function FormErrorMessagePrimitive(props) {
+  const {
+    className,
+    classNames,
+    control,
+    errorField,
+    render,
+    type = "regular",
+    withAnimationOnInvalid = true
+  } = props;
+  const formState = useFormState({ control });
+  const wrapperRef = useRef(null);
+  const errorAnimationClass = classNames?.errorMessageAnimation ?? "animate-shake";
+  useEffect(() => {
+    if (!withAnimationOnInvalid) return;
+    const errorMessageElements = wrapperRef.current?.children;
+    if (!errorMessageElements) return;
+    for (const element of errorMessageElements) {
+      element.classList.add(errorAnimationClass);
+    }
+  }, [errorAnimationClass, withAnimationOnInvalid]);
+  useEffect(() => {
+    const errorMessageElements = wrapperRef.current?.children;
+    if (!errorMessageElements) return;
+    if (Object.keys(formState.errors).indexOf(errorField) === 0) {
+      errorMessageElements[0]?.scrollIntoView({
+        behavior: "smooth",
+        block: "center"
+      });
+      window.scrollBy({ behavior: "smooth", top: -100 });
+    }
+  }, [errorField, formState.errors]);
+  const message = type === "root" ? formState.errors.root?.[errorField]?.message : formState.errors[errorField]?.message;
+  if (!message) {
+    return null;
+  }
+  const errorMessageArray = toArray(message);
+  const [ErrorMessageList] = getElementList();
+  const onAnimationEnd = withAnimationOnInvalid ? (event) => event.currentTarget.classList.remove(errorAnimationClass) : void 0;
+  return /* @__PURE__ */ React2.createElement(
+    ErrorMessageList,
+    {
+      ref: wrapperRef,
+      each: errorMessageArray,
+      className: cnMerge("flex flex-col", classNames?.container),
+      render: (errorMessage, index) => {
+        return render({
+          props: {
+            className: cnMerge(errorAnimationClass, className, classNames?.errorMessage),
+            "data-index": index,
+            "data-part": "error-message",
+            "data-scope": "form",
+            onAnimationEnd
+          },
+          state: { errorMessage, errorMessageArray, index }
+        });
+      }
+    }
+  );
+}
+function FormErrorMessage(props) {
+  const contextValues = useLaxFormItemContext();
+  const { className, errorField = contextValues?.name, type = "regular" } = props;
+  const { control } = useFormContext();
+  return /* @__PURE__ */ React2.createElement(
+    FormErrorMessagePrimitive,
+    {
+      control,
+      errorField,
+      type,
+      render: ({ props: renderProps, state: { errorMessage } }) => /* @__PURE__ */ React2.createElement(
+        "p",
+        {
+          key: errorMessage,
+          ...renderProps,
+          className: cnMerge("text-[13px]", "data-[index=0]:mt-1", renderProps.className, className)
+        },
+        errorMessage
+      )
+    }
+  );
+}
+var Root = FormRoot;
+var Item = FormItem;
+var ItemContext = FormItemContext;
+var Label = FormLabel;
+var ErrorMessagePrimitive = FormErrorMessagePrimitive;
+var ErrorMessage = FormErrorMessage;
+var Input = FormInput;
+var InputPrimitive = FormInputPrimitive;
+var InputGroup = FormInputGroup;
+var InputLeftItem = FormInputLeftItem;
+var InputRightItem = FormInputRightItem;
+var TextAreaPrimitive = FormTextAreaPrimitive;
+var TextArea = FormTextArea;
+var Controller2 = FormController;
+
+export { Controller2 as Controller, ErrorMessage, ErrorMessagePrimitive, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormItem, FormLabel, FormRoot, Input, InputGroup, InputLeftItem, InputPrimitive, InputRightItem, Item, ItemContext, Label, Root, TextArea, TextAreaPrimitive, useStrictFormItemContext as useFormItemContext };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map