@zayne-labs/ui-react 0.0.8 → 0.1.0

package/dist/esm/ui/drag-scroll/index.js

@@ -1,10 +1,10 @@
-import { twMerge } from 'tailwind-merge';
+import { cnMerge } from '../../chunk-OHG7GB7O.js';
+import '../../chunk-PZ5AY32C.js';
 import { off, on, checkIsDeviceMobileOrTablet } from '@zayne-labs/toolkit-core';
 import { useCallbackRef } from '@zayne-labs/toolkit-react';
+import { mergeProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
 import { useRef } from 'react';
 
-// src/lib/utils/cn.ts
-var cnMerge = (...classNames) => twMerge(classNames);
 var updateCursor = (element) => {
   element.style.cursor = "grabbing";
   element.style.userSelect = "none";
@@ -29,9 +29,15 @@ var handleScrollSnap = (dragContainer) => {
   }
 };
 
-// src/components/ui/drag-scroll/useDragScroll.ts
+// src/components/ui/drag-scroll/use-drag-scroll.ts
 var useDragScroll = (props = {}) => {
-  const { classNames, orientation = "horizontal", usage = "allScreens" } = props;
+  const {
+    classNames,
+    extraItemProps,
+    extraRootProps,
+    orientation = "horizontal",
+    usage = "allScreens"
+  } = props;
   const dragContainerRef = useRef(null);
   const positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });
   const handleMouseMove = useCallbackRef((event) => {
@@ -79,25 +85,37 @@ var useDragScroll = (props = {}) => {
     }
     return cleanup;
   });
-  const getRootProps = () => ({
-    className: cnMerge(
-      `flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll
-			[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,
-      orientation === "horizontal" && "flex-row",
-      orientation === "vertical" && "flex-col",
-      usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col",
-      usage === "desktopOnly" && "max-md:cursor-default max-md:flex-col",
-      classNames?.base
-    ),
-    "data-part": "root",
-    "data-scope": "drag-scroll",
-    ref: refCallBack
-  });
-  const getItemProps = () => ({
-    className: cnMerge("snap-center snap-always", classNames?.item),
-    "data-part": "item",
-    "data-scope": "drag-scroll"
-  });
+  const getRootProps = (rootProps) => {
+    const mergedRootProps = mergeProps(extraRootProps, rootProps);
+    return {
+      ...mergedRootProps,
+      className: cnMerge(
+        `flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll
+				[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,
+        orientation === "horizontal" && "flex-row",
+        orientation === "vertical" && "flex-col",
+        usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col",
+        usage === "desktopOnly" && "max-md:cursor-default max-md:flex-col",
+        classNames?.base,
+        mergedRootProps.className
+      ),
+      "data-part": "root",
+      "data-scope": "drag-scroll",
+      ref: composeRefs([
+        refCallBack,
+        mergedRootProps?.ref
+      ])
+    };
+  };
+  const getItemProps = (itemProps) => {
+    const mergedItemProps = mergeProps(extraItemProps, itemProps);
+    return {
+      ...mergedItemProps,
+      className: cnMerge("snap-center snap-always", classNames?.item, mergedItemProps.className),
+      "data-part": "item",
+      "data-scope": "drag-scroll"
+    };
+  };
   return { getItemProps, getRootProps };
 };
 

package/dist/esm/ui/drag-scroll/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/utils/cn.ts","../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/useDragScroll.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassNameValue, twMerge } from \"tailwind-merge\";\n\nexport const cnMerge = (...classNames: ClassNameValue[]) => twMerge(classNames);\n","import { checkIsDeviceMobileOrTablet } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign  -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobileOrTablet = checkIsDeviceMobileOrTablet();\n\n\tif (!isMobileOrTablet) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype DragScrollProps = {\n\tclassNames?: { base?: string; item?: string };\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\nconst useDragScroll = <TElement extends HTMLElement>(props: DragScrollProps = {}) => {\n\tconst { classNames, orientation = \"horizontal\", usage = \"allScreens\" } = props;\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\t// == Run cleanup manually on unmount if the user is using a version of react that doesn't support cleanup\n\t\tif (!node) {\n\t\t\tcleanup();\n\t\t\treturn;\n\t\t}\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps = () => ({\n\t\tclassName: cnMerge(\n\t\t\t`flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll\n\t\t\t[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,\n\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\tclassNames?.base\n\t\t),\n\t\t\"data-part\": \"root\",\n\t\t\"data-scope\": \"drag-scroll\",\n\t\tref: refCallBack,\n\t});\n\n\tconst getItemProps = () => ({\n\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item),\n\t\t\"data-part\": \"item\",\n\t\t\"data-scope\": \"drag-scroll\",\n\t});\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}
+{"version":3,"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { checkIsDeviceMobileOrTablet } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign  -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobileOrTablet = checkIsDeviceMobileOrTablet();\n\n\tif (!isMobileOrTablet) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { type InferProps, composeRefs, mergeProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype DragScrollProps<TElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: InferProps<HTMLElement>;\n\textraRootProps?: InferProps<TElement>;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\nconst useDragScroll = <TElement extends HTMLElement>(props: DragScrollProps<TElement> = {}) => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props;\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\t// == Run cleanup manually on unmount if the user is using a version of react that doesn't support cleanup\n\t\tif (!node) {\n\t\t\tcleanup();\n\t\t\treturn;\n\t\t}\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps = (rootProps?: DragScrollProps<TElement>[\"extraRootProps\"]) => {\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`flex w-full cursor-grab snap-x snap-mandatory overflow-y-clip overflow-x-scroll\n\t\t\t\t[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,\n\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\tclassNames?.base,\n\t\t\t\tmergedRootProps.className\n\t\t\t),\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\tref: composeRefs([\n\t\t\t\trefCallBack,\n\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref,\n\t\t\t]),\n\t\t};\n\t};\n\n\tconst getItemProps = (itemProps?: DragScrollProps<TElement>[\"extraItemProps\"]) => {\n\t\tconst mergedItemProps = mergeProps(extraItemProps, itemProps);\n\n\t\treturn {\n\t\t\t...mergedItemProps,\n\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\"data-part\": \"item\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t};\n\t};\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}

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,12 +1,12 @@
+import { cnMerge } from '../../chunk-OHG7GB7O.js';
+import '../../chunk-PZ5AY32C.js';
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
 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';
 
-// src/components/ui/drop-zone/drop-zone.tsx
-var cnMerge = (...classNames) => twMerge(classNames);
 var useDropZone = (props) => {
   const inputRef = useRef(null);
   const {
@@ -20,7 +20,6 @@ var useDropZone = (props) => {
     onUpload,
     onUploadError,
     onUploadSuccess,
-    ref,
     validationSettings,
     validator
     // eslint-disable-next-line ts-eslint/no-unnecessary-condition -- Can be undefined
@@ -29,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);
@@ -62,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,
@@ -111,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/lib/utils/cn.ts","../../../../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":["import { type ClassNameValue, twMerge } from \"tailwind-merge\";\n\nexport const cnMerge = (...classNames: ClassNameValue[]) => twMerge(classNames);\n","\"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":";;;;;;;;;AAmDa,IAAA,WAAA,GAAc,CAAC,KAA4B,KAAA;AACvD,EAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA;AAE9C,EAAM,MAAA;AAAA,IACL,gBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,wBAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA;AAAA;AAAA,GAED,GAAI,SAAS,EAAC;AAEd,EAAA,MAAM,CAAC,UAAA,EAAY,gBAAgB,CAAA,GAAI,UAAU,KAAK,CAAA;AAEtD,EAAA,MAAM,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAA,QAAA,CAAiB,EAAE,CAAA;AAE7D,EAAA,MAAM,gBAAmB,GAAA,cAAA;AAAA,IACxB,CAAC,KAAiF,KAAA;AACjF,MAAA,IAAI,MAAM,gBAAkB,EAAA;AAE5B,MAAI,IAAA,KAAA,CAAM,SAAS,MAAQ,EAAA;AAC1B,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA;AAGvB,MAAM,MAAA,QAAA,GACL,MAAM,IAAS,KAAA,MAAA,GACX,MAA0B,YAAa,CAAA,KAAA,GACvC,MAA8C,MAAO,CAAA,KAAA;AAE1D,MAAA,IAAI,aAAa,IAAM,EAAA;AACtB,QAAA,OAAA,CAAQ,KAAK,kBAAkB,CAAA;AAE/B,QAAA;AAAA;AAGD,MAAM,MAAA,0BAAA,GAA6B,CAAC,wBAAA,GACjC,oBAAqB,CAAA;AAAA,QACrB,iBAAmB,EAAA,aAAA;AAAA,QACnB,WAAa,EAAA,QAAA;AAAA,QACb,OAAS,EAAA,aAAA;AAAA,QACT,SAAW,EAAA,eAAA;AAAA,QACX,kBAAA,EAAoB,SAAS,kBAAkB,CAAA,GAC5C,EAAE,GAAG,kBAAA,EAAoB,gBAAiB,EAAA,GAC1C;AAAC,OACJ,IACA,EAAC;AAEJ,MAAM,MAAA,oBAAA,GAAuB,SAC1B,GAAA,SAAA,CAAU,EAAE,iBAAA,EAAmB,eAAe,WAAa,EAAA,QAAA,EAAU,CAAA,GACrE,EAAC;AAEJ,MAAA,MAAM,eAAkB,GAAA,CAAC,GAAG,0BAAA,EAA4B,GAAG,oBAAoB,CAAA;AAE/E,MAAI,IAAA,eAAA,CAAgB,WAAW,CAAG,EAAA;AAElC,MAAA,gBAAA,CAAiB,eAAe,CAAA;AAEhC,MAAA,QAAA,GAAW,EAAE,aAAA,EAAe,eAAiB,EAAA,KAAA,EAAO,CAAA;AAAA;AACrD,GACD;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,KAA2C,KAAA;AAClE,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA,GACtB;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAA2C,KAAA;AACnE,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,GACvB;AAEA,EAAA,MAAM,cAAiB,GAAA,OAAO,EAAE,aAAA,EAAe,UAAU,UAAW,EAAA,CAAA;AAEpE,EAAM,MAAA,WAAA,GAAc,MAAO,UAAW,CAAA,QAAQ,IAAI,QAAS,CAAA,cAAA,EAAgB,CAAI,GAAA,QAAA;AAM/E,EAAM,MAAA,YAAA,GAAe,CAAC,SAA0B,KAAA;AAC/C,IAAM,MAAA,eAAA,GAAkB,UAAW,CAAA,cAAA,EAAgB,SAAS,CAAA;AAE5D,IAAO,OAAA;AAAA,MACN,GAAG,eAAA;AAAA,MACH,SAAW,EAAA,OAAA;AAAA,QACV,gCAAA;AAAA,QACA,eAAgB,CAAA,SAAA;AAAA,QAChB,UAAY,EAAA,IAAA;AAAA,QACZ,cAAc,CAAC,YAAA,EAAc,YAAY,UAAY,EAAA,SAAA,EAAW,YAAY,UAAU;AAAA,OACvF;AAAA,MACA,kBAAoB,EAAA,UAAA;AAAA,MACpB,WAAa,EAAA,MAAA;AAAA,MACb,YAAc,EAAA,UAAA;AAAA,MACd,WAAa,EAAA,cAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,UAAY,EAAA,cAAA;AAAA,MACZ,MAAQ,EAAA;AAAA,KACT;AAAA,GACD;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,UAA4B,KAAA;AAClD,IAAM,MAAA,gBAAA,GAAmB,UAAW,CAAA,eAAA,EAAiB,UAAU,CAAA;AAE/D,IAAO,OAAA;AAAA,MACN,GAAG,gBAAA;AAAA,MACH,QAAQ,gBAAmB,GAAA,gBAAA,CAAiB,IAAK,CAAA,IAAI,IAAI,gBAAiB,CAAA,MAAA;AAAA,MAC1E,SAAW,EAAA,OAAA;AAAA,QACV,mDAAA;AAAA,QACA,UAAY,EAAA,KAAA;AAAA,QACZ,gBAAiB,CAAA;AAAA,OAClB;AAAA,MACA,kBAAoB,EAAA,UAAA;AAAA,MACpB,WAAa,EAAA,OAAA;AAAA,MACb,YAAc,EAAA,UAAA;AAAA,MACd,QAAA,EAAU,CAAC,KAA+C,KAAA;AACzD,QAAA,gBAAA,CAAiB,KAAK,CAAA;AACtB,QAAA,gBAAA,CAAiB,WAAW,KAAK,CAAA;AAAA,OAClC;AAAA,MACA,KAAK,WAAY,CAAA,CAAC,QAAU,EAAA,gBAAA,CAAiB,GAAG,CAAC,CAAA;AAAA,MACjD,IAAM,EAAA;AAAA,KACP;AAAA,GACD;AAEA,EAAO,OAAA;AAAA,IACN,WAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD;AACD;;;AC7LA,SAAS,SAAS,KAAyB,EAAA;AAC1C,EAAM,MAAA,GAAA,GAAM,YAAY,KAAK,CAAA;AAE7B,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,GAAA,CAAI,cACZ,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAA,GAAG,IAAI,aAAc,EAAA,EAAG,CAE/B,EAAA,GAAA,CAAI,aACN,CAAA;AAEF","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 } 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,24 @@ 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 const form_FormController: typeof FormController;
+declare const form_FormDescription: typeof FormDescription;
+declare const form_FormErrorMessage: typeof FormErrorMessage;
+declare const form_FormErrorMessagePrimitive: typeof FormErrorMessagePrimitive;
+declare const form_FormInput: typeof FormInput;
+declare const form_FormInputGroup: typeof FormInputGroup;
+declare const form_FormInputLeftItem: typeof FormInputLeftItem;
+declare const form_FormInputPrimitive: typeof FormInputPrimitive;
+declare const form_FormInputRightItem: typeof FormInputRightItem;
+declare const form_FormItem: typeof FormItem;
+declare const form_FormItemContext: typeof FormItemContext;
+declare const form_FormLabel: typeof FormLabel;
+declare const form_FormRoot: typeof FormRoot;
+declare const form_FormTextArea: typeof FormTextArea;
+declare const form_FormTextAreaPrimitive: typeof FormTextAreaPrimitive;
+declare namespace form {
+  export { form_FormController as FormController, form_FormDescription as FormDescription, form_FormErrorMessage as FormErrorMessage, form_FormErrorMessagePrimitive as FormErrorMessagePrimitive, form_FormInput as FormInput, form_FormInputGroup as FormInputGroup, form_FormInputLeftItem as FormInputLeftItem, form_FormInputPrimitive as FormInputPrimitive, form_FormInputRightItem as FormInputRightItem, form_FormItem as FormItem, form_FormItemContext as FormItemContext, form_FormLabel as FormLabel, form_FormRoot as FormRoot, form_FormTextArea as FormTextArea, form_FormTextAreaPrimitive as FormTextAreaPrimitive };
+}
+
+export { form as Form, FormController, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, FormInputRightItem, FormItem, FormItemContext, FormLabel, FormRoot, FormTextArea, FormTextAreaPrimitive, useStrictFormItemContext as useFormItemContext };