@zayne-labs/ui-react 0.0.9 → 0.1.1

package/dist/esm/ui/drop-zone/index.d.ts

@@ -1,5 +1,4 @@
 import * as react from 'react';
-import { RefCallback } from 'react';
 import { FileValidationOptions } from '@zayne-labs/toolkit-core';
 import { InferProps } from '@zayne-labs/toolkit-react/utils';
 
@@ -8,6 +7,13 @@ type RenderProps = {
     inputRef: React.RefObject<HTMLInputElement | null>;
     isDragging: boolean;
 };
+type RootProps = InferProps<"div"> & {
+    classNames?: {
+        activeDrag?: string;
+        base?: string;
+    };
+};
+type InputProps = InferProps<"input">;
 type UseDropZoneProps = {
     allowedFileTypes?: string[];
     children?: React.ReactNode | ((props: RenderProps) => React.ReactNode);
@@ -18,15 +24,14 @@ type UseDropZoneProps = {
     };
     disableInbuiltValidation?: boolean;
     existingFiles?: File[];
-    extraInputProps?: Omit<InferProps<"input">, "ref">;
-    extraRootProps?: InferProps<"div">;
+    extraInputProps?: InputProps;
+    extraRootProps?: RootProps;
     onUpload?: (details: {
         acceptedFiles: File[];
         event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>;
     }) => void;
     onUploadError?: FileValidationOptions["onError"];
     onUploadSuccess?: FileValidationOptions["onSuccess"];
-    ref?: React.Ref<HTMLInputElement>;
     validationSettings?: {
         disallowDuplicates?: boolean;
         fileLimit?: number;
@@ -39,25 +44,22 @@ type UseDropZoneProps = {
 };
 declare const useDropZone: (props: UseDropZoneProps) => {
     getChildren: () => react.ReactNode;
-    getInputProps: () => {
+    getInputProps: (inputProps?: InputProps) => {
         accept: string | undefined;
         className: string;
+        "data-active-drag": boolean;
         "data-part": string;
         "data-scope": string;
         onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-        ref: RefCallback<HTMLInputElement>;
+        ref: react.RefCallback<HTMLInputElement>;
         type: string;
-        form?: string | undefined;
-        slot?: string | undefined;
-        style?: react.CSSProperties | undefined;
-        title?: string | undefined;
-        pattern?: string | undefined;
         key?: react.Key | null | undefined;
         alt?: string | undefined;
         autoComplete?: react.HTMLInputAutoCompleteAttribute | undefined;
         capture?: boolean | "user" | "environment" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        form?: string | undefined;
         formAction?: string | ((formData: FormData) => void | Promise<void>) | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
         formEncType?: string | undefined;
         formMethod?: string | undefined;
@@ -71,6 +73,7 @@ declare const useDropZone: (props: UseDropZoneProps) => {
         minLength?: number | undefined;
         multiple?: boolean | undefined;
         name?: string | undefined;
+        pattern?: string | undefined;
         placeholder?: string | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
@@ -95,8 +98,11 @@ declare const useDropZone: (props: UseDropZoneProps) => {
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
+        slot?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: react.CSSProperties | undefined;
         tabIndex?: number | undefined;
+        title?: string | undefined;
         translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: react.AriaRole | undefined;
@@ -358,7 +364,7 @@ declare const useDropZone: (props: UseDropZoneProps) => {
         inputRef: react.RefObject<HTMLInputElement | null>;
         isDragging: boolean;
     };
-    getRootProps: () => {
+    getRootProps: (rootProps?: RootProps) => {
         className: string;
         "data-active-drag": boolean;
         "data-part": string;
@@ -642,14 +648,18 @@ declare const useDropZone: (props: UseDropZoneProps) => {
         onTransitionRunCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionStart?: react.TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionStartCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
+        classNames?: {
+            activeDrag?: string;
+            base?: string;
+        };
     };
     handleDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
     handleDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
     handleFileUpload: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>) => void;
+    inputRef: react.RefObject<HTMLInputElement | null>;
     isDragging: boolean;
-    ref: react.Ref<HTMLInputElement> | undefined;
 };
 
 declare function DropZone(props: UseDropZoneProps): react.JSX.Element;
 
-export { DropZone, type UseDropZoneProps, useDropZone };
+export { DropZone, type InputProps, type RootProps, type UseDropZoneProps, useDropZone };

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

@@ -1,8 +1,10 @@
 import { cnMerge } from '../../chunk-OHG7GB7O.js';
+import '../../chunk-PZ5AY32C.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 { mergeProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
 import { isObject, isFunction } from '@zayne-labs/toolkit-type-helpers';
 
 var useDropZone = (props) => {
@@ -18,7 +20,6 @@ var useDropZone = (props) => {
     onUpload,
     onUploadError,
     onUploadSuccess,
-    ref,
     validationSettings,
     validator
     // eslint-disable-next-line ts-eslint/no-unnecessary-condition -- Can be undefined
@@ -27,6 +28,7 @@ var useDropZone = (props) => {
   const [acceptedFiles, setAcceptedFiles] = useState([]);
   const handleFileUpload = useCallbackRef(
     (event) => {
+      if (event.defaultPrevented) return;
       if (event.type === "drop") {
         event.preventDefault();
         toggleIsDragging(false);
@@ -60,47 +62,46 @@ var useDropZone = (props) => {
   };
   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"
-  });
+  const getRootProps = (rootProps) => {
+    const mergedRootProps = mergeProps(extraRootProps, rootProps);
+    return {
+      ...mergedRootProps,
+      className: cnMerge(
+        "relative isolate flex flex-col",
+        mergedRootProps.className,
+        classNames?.base,
+        isDragging && ["opacity-60", classNames?.activeDrag, rootProps?.classNames?.activeDrag]
+      ),
+      "data-active-drag": isDragging,
+      "data-part": "root",
+      "data-scope": "dropzone",
+      onDragEnter: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleFileUpload
+    };
+  };
+  const getInputProps = (inputProps) => {
+    const mergedInputProps = mergeProps(extraInputProps, inputProps);
+    return {
+      ...mergedInputProps,
+      accept: allowedFileTypes ? allowedFileTypes.join(", ") : mergedInputProps.accept,
+      className: cnMerge(
+        "absolute inset-0 z-[100] cursor-pointer opacity-0",
+        classNames?.input,
+        mergedInputProps.className
+      ),
+      "data-active-drag": isDragging,
+      "data-part": "input",
+      "data-scope": "dropzone",
+      onChange: (event) => {
+        handleFileUpload(event);
+        mergedInputProps.onChange?.(event);
+      },
+      ref: composeRefs([inputRef, mergedInputProps.ref]),
+      type: "file"
+    };
+  };
   return {
     getChildren,
     getInputProps,
@@ -109,8 +110,8 @@ var useDropZone = (props) => {
     handleDragLeave,
     handleDragOver,
     handleFileUpload,
-    isDragging,
-    ref
+    inputRef,
+    isDragging
   };
 };
 

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

@@ -1 +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"]}
+{"version":3,"sources":["../../../../src/components/ui/drop-zone/use-drop-zone.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, composeRefs, mergeProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction, isObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useRef, useState } from \"react\";\n\ntype RenderProps = {\n\tacceptedFiles: File[];\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n\tisDragging: boolean;\n};\n\nexport type RootProps = InferProps<\"div\"> & { classNames?: { activeDrag?: string; base?: string } };\n\nexport type InputProps = InferProps<\"input\">;\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?: InputProps;\n\n\textraRootProps?: RootProps;\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\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\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.defaultPrevented) return;\n\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\t/* TODO: take inspiration from ark's implementation to merge extraRootProps with the props you pass to getRootProps\n\t * @see https://github.com/chakra-ui/ark/blob/main/packages/react/src/components/steps/steps-separator.tsx\n\t */\n\n\tconst getRootProps = (rootProps?: RootProps) => {\n\t\tconst mergedRootProps = mergeProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t\"relative isolate flex flex-col\",\n\t\t\t\tmergedRootProps.className,\n\t\t\t\tclassNames?.base,\n\t\t\t\tisDragging && [\"opacity-60\", classNames?.activeDrag, rootProps?.classNames?.activeDrag]\n\t\t\t),\n\t\t\t\"data-active-drag\": isDragging,\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"dropzone\",\n\t\t\tonDragEnter: handleDragOver,\n\t\t\tonDragLeave: handleDragLeave,\n\t\t\tonDragOver: handleDragOver,\n\t\t\tonDrop: handleFileUpload,\n\t\t};\n\t};\n\n\tconst getInputProps = (inputProps?: InputProps) => {\n\t\tconst mergedInputProps = mergeProps(extraInputProps, inputProps);\n\n\t\treturn {\n\t\t\t...mergedInputProps,\n\t\t\taccept: allowedFileTypes ? allowedFileTypes.join(\", \") : mergedInputProps.accept,\n\t\t\tclassName: cnMerge(\n\t\t\t\t\"absolute inset-0 z-[100] cursor-pointer opacity-0\",\n\t\t\t\tclassNames?.input,\n\t\t\t\tmergedInputProps.className\n\t\t\t),\n\t\t\t\"data-active-drag\": isDragging,\n\t\t\t\"data-part\": \"input\",\n\t\t\t\"data-scope\": \"dropzone\",\n\t\t\tonChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\thandleFileUpload(event);\n\t\t\t\tmergedInputProps.onChange?.(event);\n\t\t\t},\n\t\t\tref: composeRefs([inputRef, mergedInputProps.ref]),\n\t\t\ttype: \"file\",\n\t\t};\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\tinputRef,\n\t\tisDragging,\n\t};\n};\n","import * as React from \"react\";\n\nimport { type UseDropZoneProps, useDropZone } from \"./use-drop-zone\";\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

@@ -1,18 +1,18 @@
 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';
+import { RegisterOptions, UseFormReturn, Control, FormState, ControllerProps, FieldPath, ControllerRenderProps, ControllerFieldState, UseFormStateReturn, Controller } 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;
+
+type FieldValues = Record<string, unknown>;
+type FormRootProps<TValues extends FieldValues> = react.ComponentPropsWithoutRef<"form"> & {
+    children: react.ReactNode;
+    methods: UseFormReturn<TValues>;
+};
 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;
@@ -86,14 +86,15 @@ type FormControllerProps<TFieldValues> = Omit<ControllerProps<FieldValues, Field
     }) => react.ReactElement;
 };
 declare function FormController<TFieldValues = never>(props: FormControllerProps<TFieldValues>): react.JSX.Element;
-type FormErrorRenderProps = {
+declare function FormDescription(props: InferProps<"p">): react.JSX.Element;
+type ErrorMessageRenderProps = {
     className: string;
     "data-index": number;
     "data-part": string;
     "data-scope": string;
     onAnimationEnd?: react.ReactEventHandler<HTMLElement>;
 };
-type FormErrorRenderPropState = {
+type ErrorMessageRenderState = {
     errorMessage: string;
     errorMessageArray: string[];
     index: number;
@@ -107,8 +108,8 @@ type FormErrorMessagePrimitiveProps<TFieldValues extends FieldValues> = {
     };
     control: Control<TFieldValues>;
     render: (context: {
-        props: FormErrorRenderProps;
-        state: FormErrorRenderPropState;
+        props: ErrorMessageRenderProps;
+        state: ErrorMessageRenderState;
     }) => react.ReactNode;
     withAnimationOnInvalid?: boolean;
 } & ({
@@ -118,12 +119,15 @@ type FormErrorMessagePrimitiveProps<TFieldValues extends FieldValues> = {
     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 FormErrorMessagePrimitiveType = {
+    <TFieldValues extends FieldValues>(props: Extract<FormErrorMessagePrimitiveProps<TFieldValues>, {
+        type?: "regular";
+    }>): react.ReactNode;
+    <TFieldValues extends FieldValues>(props: Extract<FormErrorMessagePrimitiveProps<TFieldValues>, {
+        type: "root";
+    }>): react.ReactNode;
+};
+declare const FormErrorMessagePrimitive: FormErrorMessagePrimitiveType;
 type FormErrorMessageProps<TControl, TFieldValues extends FieldValues> = (TControl extends Control<infer TValues> ? {
     className?: string;
     control?: never;
@@ -141,19 +145,9 @@ type FormErrorMessageProps<TControl, TFieldValues extends FieldValues> = (TContr
     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 };
+declare namespace formParts {
+  export { FormController as Controller, Controller as ControllerPrimitive, FormDescription as Description, FormErrorMessage as ErrorMessage, FormErrorMessagePrimitive as ErrorMessagePrimitive, FormInput as Input, FormInputGroup as InputGroup, FormInputLeftItem as InputLeftItem, FormInputPrimitive as InputPrimitive, FormInputRightItem as InputRightItem, FormItem as Item, FormItemContext as ItemContext, FormLabel as Label, FormRoot as Root, FormTextArea as TextArea, FormTextAreaPrimitive as TextAreaPrimitive };
+}
+
+export { formParts as Form, FormController, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormItem, FormItemContext, FormLabel, FormRoot, FormTextArea, FormTextAreaPrimitive, useStrictFormItemContext as useFormItemContext };

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

@@ -1,12 +1,12 @@
-import { getElementList } from '../../chunk-GBLTOENX.js';
+import { getElementList } from '../../chunk-MPOYLILK.js';
 import { cnMerge } from '../../chunk-OHG7GB7O.js';
+import { __export } from '../../chunk-PZ5AY32C.js';
 import * as React2 from 'react';
-import { useId, useMemo, Fragment, useRef, useEffect } from 'react';
+import { useId, useMemo, useRef, useEffect, Fragment } from 'react';
 import { toArray } from '@zayne-labs/toolkit-core';
-import { createCustomContext, useToggle } from '@zayne-labs/toolkit-react';
+import { createCustomContext, useToggle, ContextError } 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';
+import { Controller, FormProvider, useFormState, useFormContext } from 'react-hook-form';
 
 var EyeIconInvisible = (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",
@@ -22,15 +22,26 @@ var EyeIconVisible = (props) => /* @__PURE__ */ React2.createElement("svg", { xm
     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 useFormFieldContext = () => {
+  const formContext = useFormContext();
+  if (!formContext) {
+    throw new ContextError(
+      `useFormFieldContext returned "null". Did you forget to wrap the necessary components within FormRoot?`
+    );
+  }
+  return formContext;
+};
 var [StrictFormItemProvider, useStrictFormItemContext] = createCustomContext({
-  hookName: "useStrictFormItemContext",
-  providerName: "StrictFormItemProvider"
+  hookName: "useFormItemContext",
+  providerName: "FormItem"
 });
 var [LaxFormItemProvider, useLaxFormItemContext] = createCustomContext({
   hookName: "useLaxFormItemContext",
-  providerName: "LaxFormItemProvider",
+  providerName: "FormItem",
   strict: false
 });
+
+// src/components/ui/form/form.tsx
 function FormRoot(props) {
   const { children, className, methods, ...restOfProps } = props;
   return /* @__PURE__ */ React2.createElement(FormProvider, { ...methods }, /* @__PURE__ */ React2.createElement(
@@ -173,7 +184,7 @@ function FormInputPrimitive(props) {
 function FormInput(props) {
   const { rules, ...restOfProps } = props;
   const { name } = useStrictFormItemContext();
-  const { formState, register } = useFormContext();
+  const { formState, register } = useFormFieldContext();
   return /* @__PURE__ */ React2.createElement(
     FormInputPrimitive,
     {
@@ -217,7 +228,7 @@ function FormTextAreaPrimitive(props) {
 function FormTextArea(props) {
   const { rules, ...restOfProps } = props;
   const { name } = useStrictFormItemContext();
-  const { formState, register } = useFormContext();
+  const { formState, register } = useFormFieldContext();
   return /* @__PURE__ */ React2.createElement(
     FormTextAreaPrimitive,
     {
@@ -229,11 +240,15 @@ function FormTextArea(props) {
   );
 }
 function FormController(props) {
-  const { control } = useFormContext();
+  const { control } = useFormFieldContext();
   const { name } = useStrictFormItemContext();
   return /* @__PURE__ */ React2.createElement(Controller, { name, control, ...props });
 }
-function FormErrorMessagePrimitive(props) {
+function FormDescription(props) {
+  const { className, ...restOfProps } = props;
+  return /* @__PURE__ */ React2.createElement("p", { className: cnMerge("text-[12px]", className), ...restOfProps });
+}
+var FormErrorMessagePrimitive = (props) => {
   const {
     className,
     classNames,
@@ -271,7 +286,19 @@ function FormErrorMessagePrimitive(props) {
   }
   const errorMessageArray = toArray(message);
   const [ErrorMessageList] = getElementList();
-  const onAnimationEnd = withAnimationOnInvalid ? (event) => event.currentTarget.classList.remove(errorAnimationClass) : void 0;
+  const onAnimationEnd = withAnimationOnInvalid ? (event) => event.currentTarget.classList.remove(errorAnimationClass) : undefined;
+  const getRenderProps = ({ index }) => ({
+    className: cnMerge(errorAnimationClass, className, classNames?.errorMessage),
+    "data-index": index,
+    "data-part": "error-message",
+    "data-scope": "form",
+    onAnimationEnd
+  });
+  const getRenderState = ({ errorMessage, index }) => ({
+    errorMessage,
+    errorMessageArray,
+    index
+  });
   return /* @__PURE__ */ React2.createElement(
     ErrorMessageList,
     {
@@ -280,23 +307,17 @@ function FormErrorMessagePrimitive(props) {
       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 }
+          props: getRenderProps({ index }),
+          state: getRenderState({ errorMessage, index })
         });
       }
     }
   );
-}
+};
 function FormErrorMessage(props) {
   const contextValues = useLaxFormItemContext();
   const { className, errorField = contextValues?.name, type = "regular" } = props;
-  const { control } = useFormContext();
+  const { control } = useFormFieldContext();
   return /* @__PURE__ */ React2.createElement(
     FormErrorMessagePrimitive,
     {
@@ -306,8 +327,8 @@ function FormErrorMessage(props) {
       render: ({ props: renderProps, state: { errorMessage } }) => /* @__PURE__ */ React2.createElement(
         "p",
         {
-          key: errorMessage,
           ...renderProps,
+          key: errorMessage,
           className: cnMerge("text-[13px]", "data-[index=0]:mt-1", renderProps.className, className)
         },
         errorMessage
@@ -315,21 +336,28 @@ function FormErrorMessage(props) {
     }
   );
 }
-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 };
+// src/components/ui/form/form-parts.ts
+var form_parts_exports = {};
+__export(form_parts_exports, {
+  Controller: () => FormController,
+  ControllerPrimitive: () => Controller,
+  Description: () => FormDescription,
+  ErrorMessage: () => FormErrorMessage,
+  ErrorMessagePrimitive: () => FormErrorMessagePrimitive,
+  Input: () => FormInput,
+  InputGroup: () => FormInputGroup,
+  InputLeftItem: () => FormInputLeftItem,
+  InputPrimitive: () => FormInputPrimitive,
+  InputRightItem: () => FormInputRightItem,
+  Item: () => FormItem,
+  ItemContext: () => FormItemContext,
+  Label: () => FormLabel,
+  Root: () => FormRoot,
+  TextArea: () => FormTextArea,
+  TextAreaPrimitive: () => FormTextAreaPrimitive
+});
+
+export { form_parts_exports as Form, FormController, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormItem, FormItemContext, FormLabel, FormRoot, FormTextArea, FormTextAreaPrimitive, useStrictFormItemContext as useFormItemContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map