@zayne-labs/ui-react 0.8.18 → 0.9.0

package/dist/esm/{ui → components/ui}/drop-zone/index.d.ts

@@ -1,9 +1,10 @@
 import * as React$1 from 'react';
-import { DiscriminatedRenderProps, InferProps, GetSlotComponentProps } from '@zayne-labs/toolkit-react/utils';
+import { GetSlotComponentProps } from '../../../lib/utils/getSlotMap/index.js';
+import { InferProps, DiscriminatedRenderProps, PolymorphicProps } from '@zayne-labs/toolkit-react/utils';
 import { FileMeta, FileValidationErrorContext, FileValidationOptions } from '@zayne-labs/toolkit-core';
 import { Prettify } from '@zayne-labs/toolkit-type-helpers';
 
-type RootProps = InferProps<HTMLElement> & {
+type ContainerProps = InferProps<HTMLElement> & {
     classNames?: {
         base?: string;
         isDragging?: string;
@@ -52,18 +53,14 @@ type DropZoneActions = {
     openFilePicker: () => void;
     removeFile: (fileToRemoveOrId: string | FileWithPreview) => void;
 };
-type RenderProps = {
+type DropZoneResult = {
     dropZoneActions: DropZoneActions;
     dropZoneState: DropZoneState;
+    getContainerProps: (containerProps?: ContainerProps) => ContainerProps;
     getInputProps: (inputProps?: InputProps) => InputProps;
-    getRootProps: (rootProps?: RootProps) => RootProps;
     inputRef: React.RefObject<HTMLInputElement | null>;
 };
-type DropZoneResult = RenderProps & {
-    getResolvedChildren: () => React.ReactNode;
-};
-type DropZoneRenderProps = DiscriminatedRenderProps<React.ReactNode | ((props: RenderProps) => React.ReactNode)>;
-type DropZoneProps = DropZoneRenderProps & {
+type DropZoneProps = {
     /**
      * Allowed file types to be uploaded.
      */
@@ -71,7 +68,7 @@ type DropZoneProps = DropZoneRenderProps & {
     /**
      * CSS classes to apply to the various parts of the drop zone
      */
-    classNames?: Prettify<RootProps["classNames"] & {
+    classNames?: Prettify<ContainerProps["classNames"] & {
         input?: string;
     }>;
     /**
@@ -85,13 +82,13 @@ type DropZoneProps = DropZoneRenderProps & {
      */
     disallowPreviewForNonImageFiles?: boolean;
     /**
-     * Extra props to pass to the input element
+     * Extra props to pass to the container element
      */
-    extraInputProps?: InputProps;
+    extraContainerProps?: ContainerProps;
     /**
-     * Extra props to pass to the root element
+     * Extra props to pass to the input element
      */
-    extraRootProps?: RootProps;
+    extraInputProps?: InputProps;
     /**
      * Initial files to populate the drop zone
      */
@@ -117,7 +114,7 @@ type DropZoneProps = DropZoneRenderProps & {
     /**
      * Callback function to be called when the render props change
      */
-    onRenderPropsChange?: (props: RenderProps) => void;
+    onRenderPropsChange?: (props: DropZoneResult) => void;
     /**
      * Callback function to be called when new files are uploaded
      */
@@ -138,27 +135,45 @@ type DropZoneProps = DropZoneRenderProps & {
      */
     onUploadSuccess?: FileValidationOptions["onSuccess"];
     /**
-     * Custom validator function to handle file validation
+     * Custom validation function.
+     *
+     * If the function returns false, the file will be rejected
      */
-    validator?: FileValidationOptions["validator"];
+    validator?: NonNullable<FileValidationOptions["validationSettings"]>["validator"];
+    /**
+     * Custom validation function that runs after all file validation has occurred
+     */
+    validatorForAllFiles?: FileValidationOptions["validatorForAllFiles"];
 };
 declare const useDropZone: (props?: DropZoneProps) => DropZoneResult;
 
-type DropZoneWrapperProps = DropZoneProps & {
+type DropZoneRenderPropType = DiscriminatedRenderProps<React$1.ReactNode | ((props: DropZoneResult) => React$1.ReactNode)>;
+type DropZoneRootProps = DropZoneProps & DropZoneRenderPropType & {
     /**
      * Controls whether to include internal elements (root and input) or not.
      */
     withInternalElements?: boolean;
 };
-declare function DropZoneRoot(props: DropZoneWrapperProps): React$1.JSX.Element;
+declare function DropZoneRoot(props: DropZoneRootProps): React$1.JSX.Element;
+type DropZoneInputProps = InputProps & {
+    asChild?: boolean;
+};
+declare function DropZoneInput(props: DropZoneInputProps): React$1.JSX.Element;
+type DropZoneContainerProps = ContainerProps & {
+    asChild?: boolean;
+};
+declare function DropZoneContainer<TElement extends React$1.ElementType = "div">(props: PolymorphicProps<TElement, DropZoneContainerProps>): React$1.JSX.Element;
+type SlotComponentProps = GetSlotComponentProps<"preview", React$1.ReactNode | ((props: DropZoneResult) => React$1.ReactNode)>;
 declare const DropZoneImagePreview: {
-    (props: Pick<GetSlotComponentProps<string, React$1.ReactNode>, "children"> & Record<string, unknown>): React$1.ReactNode;
+    (props: Pick<SlotComponentProps, "children"> & Record<string, unknown>): React$1.ReactNode;
     readonly slotName?: "preview" | undefined;
     readonly slotSymbol?: symbol;
 };
 
 declare namespace dropZoneParts {
-  export { DropZoneImagePreview as ImagePreview, DropZoneRoot as Root };
+  export { DropZoneContainer as Container, DropZoneImagePreview as ImagePreview, DropZoneInput as Input, DropZoneRoot as Root };
 }
 
-export { dropZoneParts as DropZone, type DropZoneActions, DropZoneImagePreview, type DropZoneProps, type DropZoneResult, DropZoneRoot, type DropZoneState, type FileWithPreview, type InputProps, type RenderProps, type RootProps, useDropZone };
+declare const useDropZoneContext: () => DropZoneResult;
+
+export { type ContainerProps, dropZoneParts as DropZone, type DropZoneActions, DropZoneContainer, DropZoneImagePreview, DropZoneInput, type DropZoneProps, type DropZoneResult, DropZoneRoot, type DropZoneState, type FileWithPreview, type InputProps, useDropZone, useDropZoneContext };

package/dist/esm/{ui → components/ui}/drop-zone/index.js

@@ -1,13 +1,20 @@
-import { dataAttr } from '../../chunk-DNYM6XGW.js';
-import { cnMerge } from '../../chunk-OHG7GB7O.js';
-import { __export } from '../../chunk-PZ5AY32C.js';
+import { withSlotNameAndSymbol, getSlotMap } from '../../../chunk-ET4KZBFA.js';
+import { dataAttr } from '../../../chunk-DNYM6XGW.js';
+import { cnMerge } from '../../../chunk-OHG7GB7O.js';
+import { Slot } from '../../../chunk-2P3P5AXH.js';
+import { __export } from '../../../chunk-PZ5AY32C.js';
 import * as React from 'react';
 import { isValidElement, Fragment, useRef, useState, useCallback, useMemo } from 'react';
-import { withSlotNameAndSymbol, getSlotMap, mergeTwoProps, composeTwoEventHandlers, composeRefs } from '@zayne-labs/toolkit-react/utils';
-import { isArray, isString, isFile, isFunction } from '@zayne-labs/toolkit-type-helpers';
+import { isFunction, isArray, isString, isFile } from '@zayne-labs/toolkit-type-helpers';
+import { createCustomContext, useCallbackRef } from '@zayne-labs/toolkit-react';
 import { toArray, handleFileValidation, createImagePreview } from '@zayne-labs/toolkit-core';
-import { useCallbackRef } from '@zayne-labs/toolkit-react';
+import { mergeTwoProps, composeTwoEventHandlers, composeRefs } from '@zayne-labs/toolkit-react/utils';
 
+var [DropZoneContextProvider, useDropZoneContext] = createCustomContext({
+  hookName: "useDropZoneContext",
+  name: "DropZoneContext",
+  providerName: "DropZoneRoot"
+});
 var generateUniqueId = (file) => {
   if (!isFile(file)) {
     return file.id;
@@ -29,12 +36,11 @@ var clearObjectURL = (fileWithPreview, disallowPreviewForNonImageFiles) => {
 var useDropZone = (props) => {
   const {
     allowedFileTypes,
-    children,
     classNames,
     disallowDuplicates = true,
     disallowPreviewForNonImageFiles = true,
+    extraContainerProps,
     extraInputProps,
-    extraRootProps,
     initialFiles,
     maxFileCount,
     maxFileSize,
@@ -45,8 +51,8 @@ var useDropZone = (props) => {
     onUploadError,
     onUploadErrors,
     onUploadSuccess,
-    render,
-    validator
+    validator,
+    validatorForAllFiles
   } = props ?? {};
   const inputRef = useRef(null);
   const initialFileArray = toArray(initialFiles).filter(Boolean);
@@ -77,8 +83,14 @@ var useDropZone = (props) => {
       onError: onUploadError,
       onErrors: onUploadErrors,
       onSuccess: onUploadSuccess,
-      validationSettings: { allowedFileTypes, disallowDuplicates, maxFileCount, maxFileSize },
-      validator
+      validationSettings: {
+        allowedFileTypes,
+        disallowDuplicates,
+        maxFileCount,
+        maxFileSize,
+        validator
+      },
+      validatorForAllFiles
     });
     if (validFiles.length === 0) {
       setDropZoneState((prevState) => ({ ...prevState, errors }));
@@ -164,36 +176,36 @@ var useDropZone = (props) => {
   const openFilePicker = useCallbackRef(() => {
     inputRef.current?.click();
   });
-  const getRootProps = useCallback(
-    (rootProps) => {
-      const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
+  const getContainerProps = useCallback(
+    (containerProps) => {
+      const mergedContainerProps = mergeTwoProps(extraContainerProps, containerProps);
       return {
-        ...mergedRootProps,
+        ...mergedContainerProps,
         className: cnMerge(
           "relative isolate flex flex-col",
-          mergedRootProps.className,
+          mergedContainerProps.className,
           classNames?.base,
           dropZoneState.isDragging && [
             "opacity-60",
             classNames?.isDragging,
-            rootProps?.classNames?.isDragging
+            containerProps?.classNames?.isDragging
           ]
         ),
         "data-dragging": dataAttr(dropZoneState.isDragging),
         "data-scope": "dropzone",
         // eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first
-        "data-part": "root",
-        "data-slot": "dropzone-root",
-        onDragEnter: composeTwoEventHandlers(handleDragEnter, mergedRootProps.onDragEnter),
-        onDragLeave: composeTwoEventHandlers(handleDragLeave, mergedRootProps.onDragLeave),
-        onDragOver: composeTwoEventHandlers(handleDragOver, mergedRootProps.onDragOver),
-        onDrop: composeTwoEventHandlers(handleFileUpload, mergedRootProps.onDrop)
+        "data-part": "container",
+        "data-slot": "dropzone-container",
+        onDragEnter: composeTwoEventHandlers(handleDragEnter, mergedContainerProps.onDragEnter),
+        onDragLeave: composeTwoEventHandlers(handleDragLeave, mergedContainerProps.onDragLeave),
+        onDragOver: composeTwoEventHandlers(handleDragOver, mergedContainerProps.onDragOver),
+        onDrop: composeTwoEventHandlers(handleFileUpload, mergedContainerProps.onDrop)
       };
     },
     [
       classNames?.base,
       classNames?.isDragging,
-      extraRootProps,
+      extraContainerProps,
       dropZoneState.isDragging,
       handleDragEnter,
       handleDragLeave,
@@ -233,7 +245,7 @@ var useDropZone = (props) => {
     ]
   );
   const savedOnRenderPropsChange = useCallbackRef(onRenderPropsChange);
-  const renderProps = useMemo(() => {
+  const dropZoneResult = useMemo(() => {
     const propsForRenderFn = {
       dropZoneActions: {
         addFiles,
@@ -247,8 +259,8 @@ var useDropZone = (props) => {
         removeFile
       },
       dropZoneState,
+      getContainerProps,
       getInputProps,
-      getRootProps,
       inputRef
     };
     savedOnRenderPropsChange(propsForRenderFn);
@@ -260,7 +272,7 @@ var useDropZone = (props) => {
     clearFiles,
     dropZoneState,
     getInputProps,
-    getRootProps,
+    getContainerProps,
     handleDragEnter,
     handleDragLeave,
     handleDragOver,
@@ -268,40 +280,48 @@ var useDropZone = (props) => {
     openFilePicker,
     removeFile
   ]);
-  const selectedChildren = children ?? render;
-  const getResolvedChildren = () => {
-    return isFunction(selectedChildren) ? selectedChildren(renderProps) : selectedChildren;
-  };
-  return {
-    ...renderProps,
-    getResolvedChildren
-  };
+  return dropZoneResult;
 };
 
 // src/components/ui/drop-zone/drop-zone.tsx
 function DropZoneRoot(props) {
-  const { withInternalElements = true, ...restOfProps } = props;
-  const api = useDropZone(restOfProps);
-  const RootComponent = withInternalElements ? "div" : Fragment;
-  const InputComponent = withInternalElements ? "input" : Fragment;
-  const rootComponentProps = RootComponent === "div" && api.getRootProps();
-  const inputComponentProps = InputComponent === "input" && api.getInputProps();
-  const resolvedChildren = api.getResolvedChildren();
+  const { children, render, withInternalElements = true, ...restOfProps } = props;
+  const dropZone = useDropZone(restOfProps);
+  const ContainerComponent = withInternalElements ? DropZoneContainer : Fragment;
+  const InputComponent = withInternalElements ? DropZoneInput : Fragment;
+  const selectedChildren = children ?? render;
+  const resolvedChildren = isFunction(selectedChildren) ? selectedChildren(dropZone) : selectedChildren;
   const couldChildrenContainSlots = isArray(resolvedChildren) || isValidElement(resolvedChildren) && resolvedChildren.type === Fragment;
-  const slots = getSlotMap(resolvedChildren, {
-    condition: withInternalElements && couldChildrenContainSlots
-  });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RootComponent, { ...rootComponentProps }, /* @__PURE__ */ React.createElement(InputComponent, { ...inputComponentProps }), slots.default), slots.preview);
+  const slots = withInternalElements && couldChildrenContainSlots ? getSlotMap(resolvedChildren) : { default: resolvedChildren };
+  return /* @__PURE__ */ React.createElement(DropZoneContextProvider, { value: dropZone }, /* @__PURE__ */ React.createElement(ContainerComponent, null, /* @__PURE__ */ React.createElement(InputComponent, null), slots.default), isFunction(slots.preview) ? slots.preview(dropZone) : slots.preview);
+}
+function DropZoneInput(props) {
+  const { asChild, ...restOfProps } = props;
+  const dropZoneContext = useDropZoneContext();
+  const Component = asChild ? Slot : "input";
+  return /* @__PURE__ */ React.createElement(Component, { ...dropZoneContext.getInputProps(restOfProps) });
 }
-var DropZoneImagePreview = withSlotNameAndSymbol("preview");
+function DropZoneContainer(props) {
+  const { as: Element = "div", asChild, ...restOfProps } = props;
+  const dropZoneContext = useDropZoneContext();
+  const Component = asChild ? Slot : Element;
+  return /* @__PURE__ */ React.createElement(Component, { ...dropZoneContext.getContainerProps(restOfProps) });
+}
+var DropZoneImagePreview = withSlotNameAndSymbol("preview", (props) => {
+  const { children } = props;
+  const dropZoneContext = useDropZoneContext();
+  return isFunction(children) ? children(dropZoneContext) : children;
+});
 
 // src/components/ui/drop-zone/drop-zone-parts.ts
 var drop_zone_parts_exports = {};
 __export(drop_zone_parts_exports, {
+  Container: () => DropZoneContainer,
   ImagePreview: () => DropZoneImagePreview,
+  Input: () => DropZoneInput,
   Root: () => DropZoneRoot
 });
 
-export { drop_zone_parts_exports as DropZone, DropZoneImagePreview, DropZoneRoot, useDropZone };
+export { drop_zone_parts_exports as DropZone, DropZoneContainer, DropZoneImagePreview, DropZoneInput, DropZoneRoot, useDropZone, useDropZoneContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/drop-zone/drop-context.ts","../../../../../src/components/ui/drop-zone/utils.ts","../../../../../src/components/ui/drop-zone/use-drop-zone.ts","../../../../../src/components/ui/drop-zone/drop-zone.tsx","../../../../../src/components/ui/drop-zone/drop-zone-parts.ts"],"names":["ReactFragment"],"mappings":"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","file":"index.js","sourcesContent":["import { createCustomContext } from \"@zayne-labs/toolkit-react\";\nimport type { DropZoneResult } from \"./use-drop-zone\";\n\ntype DropZoneContext = DropZoneResult;\n\nexport const [DropZoneContextProvider, useDropZoneContext] = createCustomContext<DropZoneContext>({\n\thookName: \"useDropZoneContext\",\n\tname: \"DropZoneContext\",\n\tproviderName: \"DropZoneRoot\",\n});\n","import { type FileMeta, createImagePreview } from \"@zayne-labs/toolkit-core\";\nimport { isFile } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { FileWithPreview } from \"./use-drop-zone\";\n\nexport const generateUniqueId = (file: File | FileMeta): string => {\n\tif (!isFile(file)) {\n\t\treturn file.id;\n\t}\n\n\treturn `${file.name}-(${Math.round(performance.now())})-${crypto.randomUUID().slice(0, 8)}`;\n};\n\nexport const createObjectURL = (file: File, disallowPreviewForNonImageFiles: boolean) => {\n\tif (disallowPreviewForNonImageFiles && !file.type.startsWith(\"image/\")) return;\n\n\treturn createImagePreview(file);\n};\n\nexport const clearObjectURL = (\n\tfileWithPreview: FileWithPreview | undefined,\n\tdisallowPreviewForNonImageFiles: boolean\n) => {\n\tif (!isFile(fileWithPreview?.file)) return;\n\n\tif (disallowPreviewForNonImageFiles && !fileWithPreview.file.type.startsWith(\"image/\")) return;\n\n\tif (!fileWithPreview.preview) return;\n\n\tURL.revokeObjectURL(fileWithPreview.preview);\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { dataAttr } from \"@/lib/utils/common\";\nimport {\n\ttype FileMeta,\n\ttype FileValidationErrorContext,\n\ttype FileValidationOptions,\n\thandleFileValidation,\n\ttoArray,\n} from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport {\n\ttype InferProps,\n\tcomposeRefs,\n\tcomposeTwoEventHandlers,\n\tmergeTwoProps,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { type Prettify, isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { clearObjectURL, createObjectURL, generateUniqueId } from \"./utils\";\n\nexport type ContainerProps = InferProps<HTMLElement> & {\n\tclassNames?: {\n\t\tbase?: string;\n\t\tisDragging?: string;\n\t};\n};\n\nexport type InputProps = InferProps<\"input\">;\n\nexport type FileWithPreview = {\n\t/**\n\t *  File object or file metadata\n\t */\n\tfile: File | FileMeta;\n\t/**\n\t *  Unique ID for the file\n\t */\n\tid: string;\n\t/**\n\t *  Preview URL for the file\n\t *  - Will be undefined if `disallowPreviewForNonImageFiles` is set to `true` and the file is not an image\n\t *  - Can also be undefined if `URL.createObjectURL` fails\n\t */\n\tpreview: string | undefined;\n};\n\nexport type DropZoneState = {\n\t/**\n\t *  List of validation errors\n\t */\n\terrors: FileValidationErrorContext[];\n\t/**\n\t *  List of files with their preview URLs and unique IDs\n\t */\n\tfilesWithPreview: FileWithPreview[];\n\t/**\n\t *  Whether or not a file is currently being dragged over the drop zone\n\t */\n\tisDragging: boolean;\n};\n\ntype ChangeOrDragEvent = React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>;\n\nexport type DropZoneActions = {\n\taddFiles: (fileList: File[] | FileList | null, event?: ChangeOrDragEvent) => void;\n\tclearErrors: () => void;\n\tclearFiles: () => void;\n\thandleDragEnter: (event: React.DragEvent<HTMLElement>) => void;\n\thandleDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n\thandleDragOver: (event: React.DragEvent<HTMLElement>) => void;\n\thandleFileUpload: (event: ChangeOrDragEvent) => void;\n\topenFilePicker: () => void;\n\tremoveFile: (fileToRemoveOrId: string | FileWithPreview) => void;\n};\n\nexport type DropZoneResult = {\n\tdropZoneActions: DropZoneActions;\n\tdropZoneState: DropZoneState;\n\tgetContainerProps: (containerProps?: ContainerProps) => ContainerProps;\n\tgetInputProps: (inputProps?: InputProps) => InputProps;\n\tinputRef: React.RefObject<HTMLInputElement | null>;\n};\n\nexport type DropZoneProps = {\n\t/**\n\t * Allowed file types to be uploaded.\n\t */\n\tallowedFileTypes?: string[];\n\n\t/**\n\t * CSS classes to apply to the various parts of the drop zone\n\t */\n\tclassNames?: Prettify<ContainerProps[\"classNames\"] & { input?: string }>;\n\n\t/**\n\t * Whether to disallow duplicate files\n\t * @default true\n\t */\n\tdisallowDuplicates?: boolean;\n\n\t/**\n\t * Whether to disallow preview for non-image files\n\t * @default true\n\t */\n\tdisallowPreviewForNonImageFiles?: boolean;\n\n\t/**\n\t * Extra props to pass to the container element\n\t */\n\textraContainerProps?: ContainerProps;\n\n\t/**\n\t * Extra props to pass to the input element\n\t */\n\textraInputProps?: InputProps;\n\n\t/**\n\t * Initial files to populate the drop zone\n\t */\n\tinitialFiles?: FileMeta | FileMeta[] | null;\n\n\t/**\n\t * Maximum number of files that can be uploaded.\n\t */\n\tmaxFileCount?: number;\n\n\t/**\n\t * Maximum file size in MB\n\t */\n\tmaxFileSize?: number;\n\n\t/**\n\t * Whether to allow multiple files to be uploaded\n\t */\n\tmultiple?: boolean;\n\n\t/**\n\t * Callback function to be called when internal files state changes\n\t */\n\tonFilesChange?: (context: { filesWithPreview: FileWithPreview[] }) => void;\n\n\t/**\n\t * Callback function to be called when the render props change\n\t */\n\tonRenderPropsChange?: (props: DropZoneResult) => void;\n\n\t/**\n\t * Callback function to be called when new files are uploaded\n\t */\n\tonUpload?: (context: { event: ChangeOrDragEvent; filesWithPreview: FileWithPreview[] }) => void;\n\n\t/**\n\t * Callback function to be called on each file upload as they occur\n\t */\n\tonUploadError?: FileValidationOptions[\"onError\"];\n\n\t/**\n\t * Callback function to be called once after all file upload errors have occurred\n\t */\n\tonUploadErrors?: FileValidationOptions[\"onErrors\"];\n\n\t/**\n\t * Callback function to be called on file upload success\n\t */\n\tonUploadSuccess?: FileValidationOptions[\"onSuccess\"];\n\n\t/**\n\t * Custom validation function.\n\t *\n\t * If the function returns false, the file will be rejected\n\t */\n\tvalidator?: NonNullable<FileValidationOptions[\"validationSettings\"]>[\"validator\"];\n\n\t/**\n\t * Custom validation function that runs after all file validation has occurred\n\t */\n\tvalidatorForAllFiles?: FileValidationOptions[\"validatorForAllFiles\"];\n};\n\nexport const useDropZone = (props?: DropZoneProps): DropZoneResult => {\n\tconst {\n\t\tallowedFileTypes,\n\t\tclassNames,\n\t\tdisallowDuplicates = true,\n\t\tdisallowPreviewForNonImageFiles = true,\n\t\textraContainerProps,\n\t\textraInputProps,\n\t\tinitialFiles,\n\t\tmaxFileCount,\n\t\tmaxFileSize,\n\t\tmultiple,\n\t\tonFilesChange,\n\t\tonRenderPropsChange,\n\t\tonUpload,\n\t\tonUploadError,\n\t\tonUploadErrors,\n\t\tonUploadSuccess,\n\t\tvalidator,\n\t\tvalidatorForAllFiles,\n\t} = props ?? {};\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\tconst initialFileArray = toArray(initialFiles).filter(Boolean);\n\n\tconst [dropZoneState, setDropZoneState] = useState<DropZoneState>({\n\t\terrors: [],\n\t\tfilesWithPreview: initialFileArray.map((fileMeta) => ({\n\t\t\tfile: fileMeta,\n\t\t\tid: fileMeta.id,\n\t\t\tpreview: fileMeta.url,\n\t\t})),\n\t\tisDragging: false,\n\t});\n\n\tconst toggleIsDragging = (value: boolean) => {\n\t\tsetDropZoneState((prevState) => ({ ...prevState, isDragging: value }));\n\t};\n\n\tconst addFiles: DropZoneActions[\"addFiles\"] = useCallbackRef((fileList, event) => {\n\t\tif (!fileList || fileList.length === 0) {\n\t\t\tconsole.warn(\"No file selected!\");\n\t\t\treturn;\n\t\t}\n\n\t\t// Clear existing errors when new files are uploaded\n\t\tclearErrors();\n\n\t\t// In single file mode, clear existing files first\n\t\tif (!multiple) {\n\t\t\tclearFiles();\n\t\t}\n\n\t\tconst { errors, validFiles } = handleFileValidation({\n\t\t\texistingFiles: dropZoneState.filesWithPreview.map((fileWithPreview) => fileWithPreview.file),\n\t\t\tnewFiles: fileList,\n\t\t\tonError: onUploadError,\n\t\t\tonErrors: onUploadErrors,\n\t\t\tonSuccess: onUploadSuccess,\n\t\t\tvalidationSettings: {\n\t\t\t\tallowedFileTypes,\n\t\t\t\tdisallowDuplicates,\n\t\t\t\tmaxFileCount,\n\t\t\t\tmaxFileSize,\n\t\t\t\tvalidator,\n\t\t\t},\n\t\t\tvalidatorForAllFiles,\n\t\t});\n\n\t\tif (validFiles.length === 0) {\n\t\t\tsetDropZoneState((prevState) => ({ ...prevState, errors }));\n\t\t\treturn;\n\t\t}\n\n\t\tconst filesWithPreview: FileWithPreview[] = validFiles.map((file) => ({\n\t\t\tfile,\n\t\t\tid: generateUniqueId(file),\n\t\t\tpreview: createObjectURL(file, disallowPreviewForNonImageFiles),\n\t\t}));\n\n\t\t// == Only call onUpload callback if event is provided, which indicates that new files were uploaded from an event handler\n\n\t\tif (event) {\n\t\t\tonUpload?.({ event, filesWithPreview });\n\t\t}\n\n\t\tconst newFileUploadState = {\n\t\t\t...dropZoneState,\n\t\t\terrors,\n\t\t\t...(event?.type === \"drop\" && { isDragging: false }),\n\t\t\tfilesWithPreview: multiple\n\t\t\t\t? [...dropZoneState.filesWithPreview, ...filesWithPreview]\n\t\t\t\t: filesWithPreview,\n\t\t} satisfies DropZoneState;\n\n\t\tonFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });\n\n\t\tsetDropZoneState(newFileUploadState);\n\n\t\t// == Reset input value after adding files\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t});\n\n\tconst clearFiles: DropZoneActions[\"clearFiles\"] = useCallbackRef(() => {\n\t\t// == Clean up object URLs if any\n\t\tdropZoneState.filesWithPreview.forEach((fileWithPreview) =>\n\t\t\tclearObjectURL(fileWithPreview, disallowPreviewForNonImageFiles)\n\t\t);\n\n\t\tconst newFileUploadState = {\n\t\t\t...dropZoneState,\n\t\t\terrors: [],\n\t\t\tfilesWithPreview: [],\n\t\t} satisfies DropZoneState;\n\n\t\tonFilesChange?.({ filesWithPreview: newFileUploadState.filesWithPreview });\n\n\t\tsetDropZoneState(newFileUploadState);\n\n\t\t// == Reset input value after clearing files\n\t\tinputRef.current && (inputRef.current.value = \"\");\n\t});\n\n\tconst removeFile: DropZoneActions[\"removeFile\"] = useCallbackRef((fileToRemoveOrId) => {\n\t\tconst actualFileToRemove = isString(fileToRemoveOrId)\n\t\t\t? dropZoneState.filesWithPreview.find((file) => file.id === fileToRemoveOrId)\n\t\t\t: fileToRemoveOrId;\n\n\t\tif (!actualFileToRemove) return;\n\n\t\tclearObjectURL(actualFileToRemove, disallowPreviewForNonImageFiles);\n\n\t\tconst newFilesWithPreview = dropZoneState.filesWithPreview.filter(\n\t\t\t(file) => file.id !== actualFileToRemove.id\n\t\t);\n\n\t\tonFilesChange?.({ filesWithPreview: newFilesWithPreview });\n\n\t\tsetDropZoneState({\n\t\t\t...dropZoneState,\n\t\t\terrors: [],\n\t\t\tfilesWithPreview: newFilesWithPreview,\n\t\t});\n\t});\n\n\tconst clearErrors: DropZoneActions[\"clearErrors\"] = useCallbackRef(() => {\n\t\tsetDropZoneState((prevState) => ({ ...prevState, errors: [] }));\n\t});\n\n\tconst handleFileUpload: DropZoneActions[\"handleFileUpload\"] = useCallbackRef((event) => {\n\t\tif (inputRef.current?.disabled) return;\n\n\t\tif (event.type === \"drop\") {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tconst fileList =\n\t\t\tevent.type === \"drop\"\n\t\t\t\t? (event as React.DragEvent).dataTransfer.files\n\t\t\t\t: (event as React.ChangeEvent<HTMLInputElement>).target.files;\n\n\t\t// == In single file mode, only use the first file\n\t\tif (!multiple) {\n\t\t\tconst firstFile = fileList?.[0];\n\n\t\t\tfirstFile && addFiles([firstFile], event);\n\n\t\t\treturn;\n\t\t}\n\n\t\taddFiles(fileList, event);\n\t});\n\n\tconst handleDragEnter: DropZoneActions[\"handleDragEnter\"] = useCallbackRef((event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\ttoggleIsDragging(true);\n\t});\n\n\tconst handleDragOver: DropZoneActions[\"handleDragOver\"] = useCallbackRef((event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\ttoggleIsDragging(true);\n\t});\n\n\tconst handleDragLeave: DropZoneActions[\"handleDragLeave\"] = useCallbackRef((event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\ttoggleIsDragging(false);\n\t});\n\n\tconst openFilePicker: DropZoneActions[\"openFilePicker\"] = useCallbackRef(() => {\n\t\tinputRef.current?.click();\n\t});\n\n\tconst getContainerProps: DropZoneResult[\"getContainerProps\"] = useCallback(\n\t\t(containerProps) => {\n\t\t\tconst mergedContainerProps = mergeTwoProps(extraContainerProps, containerProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedContainerProps,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t\"relative isolate flex flex-col\",\n\t\t\t\t\tmergedContainerProps.className,\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tdropZoneState.isDragging && [\n\t\t\t\t\t\t\"opacity-60\",\n\t\t\t\t\t\tclassNames?.isDragging,\n\t\t\t\t\t\tcontainerProps?.classNames?.isDragging,\n\t\t\t\t\t]\n\t\t\t\t),\n\t\t\t\t\"data-dragging\": dataAttr(dropZoneState.isDragging),\n\t\t\t\t\"data-scope\": \"dropzone\",\n\t\t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t\t\t\t\"data-part\": \"container\",\n\t\t\t\t\"data-slot\": \"dropzone-container\",\n\t\t\t\tonDragEnter: composeTwoEventHandlers(handleDragEnter, mergedContainerProps.onDragEnter),\n\t\t\t\tonDragLeave: composeTwoEventHandlers(handleDragLeave, mergedContainerProps.onDragLeave),\n\t\t\t\tonDragOver: composeTwoEventHandlers(handleDragOver, mergedContainerProps.onDragOver),\n\t\t\t\tonDrop: composeTwoEventHandlers(handleFileUpload, mergedContainerProps.onDrop),\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tclassNames?.base,\n\t\t\tclassNames?.isDragging,\n\t\t\textraContainerProps,\n\t\t\tdropZoneState.isDragging,\n\t\t\thandleDragEnter,\n\t\t\thandleDragLeave,\n\t\t\thandleDragOver,\n\t\t\thandleFileUpload,\n\t\t]\n\t);\n\n\tconst getInputProps: DropZoneResult[\"getInputProps\"] = useCallback(\n\t\t(inputProps) => {\n\t\t\tconst mergedInputProps = mergeTwoProps(extraInputProps, inputProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedInputProps,\n\t\t\t\taccept: allowedFileTypes ? allowedFileTypes.join(\", \") : mergedInputProps.accept,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t\"absolute inset-0 z-[100] cursor-pointer opacity-0\",\n\t\t\t\t\tclassNames?.input,\n\t\t\t\t\tmergedInputProps.className\n\t\t\t\t),\n\t\t\t\t\"data-dragging\": dataAttr(dropZoneState.isDragging),\n\t\t\t\t\"data-scope\": \"dropzone\",\n\t\t\t\t// eslint-disable-next-line perfectionist/sort-objects -- I need data-scope to be first\n\t\t\t\t\"data-part\": \"input\",\n\t\t\t\t\"data-slot\": \"dropzone-input\",\n\t\t\t\tmultiple: multiple ?? mergedInputProps.multiple,\n\t\t\t\tonChange: composeTwoEventHandlers(handleFileUpload, mergedInputProps.onChange),\n\t\t\t\tref: composeRefs(inputRef, mergedInputProps.ref),\n\t\t\t\ttype: \"file\",\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tallowedFileTypes,\n\t\t\tclassNames?.input,\n\t\t\textraInputProps,\n\t\t\tdropZoneState.isDragging,\n\t\t\thandleFileUpload,\n\t\t\tmultiple,\n\t\t]\n\t);\n\n\tconst savedOnRenderPropsChange = useCallbackRef(onRenderPropsChange);\n\n\tconst dropZoneResult = useMemo(() => {\n\t\tconst propsForRenderFn = {\n\t\t\tdropZoneActions: {\n\t\t\t\taddFiles,\n\t\t\t\tclearErrors,\n\t\t\t\tclearFiles,\n\t\t\t\thandleDragEnter,\n\t\t\t\thandleDragLeave,\n\t\t\t\thandleDragOver,\n\t\t\t\thandleFileUpload,\n\t\t\t\topenFilePicker,\n\t\t\t\tremoveFile,\n\t\t\t},\n\t\t\tdropZoneState,\n\t\t\tgetContainerProps,\n\t\t\tgetInputProps,\n\t\t\tinputRef,\n\t\t} satisfies DropZoneResult;\n\n\t\tsavedOnRenderPropsChange(propsForRenderFn);\n\n\t\treturn propsForRenderFn;\n\t}, [\n\t\tsavedOnRenderPropsChange,\n\t\taddFiles,\n\t\tclearErrors,\n\t\tclearFiles,\n\t\tdropZoneState,\n\t\tgetInputProps,\n\t\tgetContainerProps,\n\t\thandleDragEnter,\n\t\thandleDragLeave,\n\t\thandleDragOver,\n\t\thandleFileUpload,\n\t\topenFilePicker,\n\t\tremoveFile,\n\t]);\n\n\treturn dropZoneResult;\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { Slot } from \"@/components/common\";\nimport { type GetSlotComponentProps, getSlotMap, withSlotNameAndSymbol } from \"@/lib/utils/getSlotMap\";\nimport type { DiscriminatedRenderProps, PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isArray, isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Fragment as ReactFragment, isValidElement } from \"react\";\nimport { DropZoneContextProvider, useDropZoneContext } from \"./drop-context\";\nimport {\n\ttype ContainerProps,\n\ttype DropZoneProps,\n\ttype DropZoneResult,\n\ttype InputProps,\n\tuseDropZone,\n} from \"./use-drop-zone\";\n\ntype DropZoneRenderPropType = DiscriminatedRenderProps<\n\tReact.ReactNode | ((props: DropZoneResult) => React.ReactNode)\n>;\n\ntype DropZoneRootProps = DropZoneProps\n\t& DropZoneRenderPropType & {\n\t\t/**\n\t\t * Controls whether to include internal elements (root and input) or not.\n\t\t */\n\t\twithInternalElements?: boolean;\n\t};\n\nexport function DropZoneRoot(props: DropZoneRootProps) {\n\tconst { children, render, withInternalElements = true, ...restOfProps } = props;\n\n\tconst dropZone = useDropZone(restOfProps);\n\n\tconst ContainerComponent = withInternalElements ? DropZoneContainer : ReactFragment;\n\tconst InputComponent = withInternalElements ? DropZoneInput : ReactFragment;\n\n\tconst selectedChildren = children ?? render;\n\n\tconst resolvedChildren = isFunction(selectedChildren) ? selectedChildren(dropZone) : selectedChildren;\n\n\tconst couldChildrenContainSlots =\n\t\tisArray(resolvedChildren)\n\t\t|| (isValidElement(resolvedChildren) && resolvedChildren.type === ReactFragment);\n\n\tconst slots =\n\t\twithInternalElements && couldChildrenContainSlots\n\t\t\t? getSlotMap<SlotComponentProps>(resolvedChildren)\n\t\t\t: ({ default: resolvedChildren } as ReturnType<typeof getSlotMap<SlotComponentProps>>);\n\n\treturn (\n\t\t<DropZoneContextProvider value={dropZone}>\n\t\t\t<ContainerComponent>\n\t\t\t\t<InputComponent />\n\n\t\t\t\t{slots.default}\n\t\t\t</ContainerComponent>\n\n\t\t\t{isFunction(slots.preview) ? slots.preview(dropZone) : slots.preview}\n\t\t</DropZoneContextProvider>\n\t);\n}\n\ntype DropZoneInputProps = InputProps & { asChild?: boolean };\n\nexport function DropZoneInput(props: DropZoneInputProps) {\n\tconst { asChild, ...restOfProps } = props;\n\n\tconst dropZoneContext = useDropZoneContext();\n\n\tconst Component = asChild ? Slot : \"input\";\n\n\treturn <Component {...dropZoneContext.getInputProps(restOfProps)} />;\n}\n\ntype DropZoneContainerProps = ContainerProps & { asChild?: boolean };\n\nexport function DropZoneContainer<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement, DropZoneContainerProps>\n) {\n\tconst { as: Element = \"div\", asChild, ...restOfProps } = props;\n\n\tconst dropZoneContext = useDropZoneContext();\n\n\tconst Component = asChild ? Slot : Element;\n\n\treturn <Component {...dropZoneContext.getContainerProps(restOfProps)} />;\n}\n\ntype SlotComponentProps = GetSlotComponentProps<\n\t\"preview\",\n\tReact.ReactNode | ((props: DropZoneResult) => React.ReactNode)\n>;\n\nexport const DropZoneImagePreview = withSlotNameAndSymbol<SlotComponentProps>(\"preview\", (props) => {\n\tconst { children } = props;\n\n\tconst dropZoneContext = useDropZoneContext();\n\n\treturn isFunction(children) ? children(dropZoneContext) : children;\n});\n","export {\n\tDropZoneRoot as Root,\n\tDropZoneImagePreview as ImagePreview,\n\tDropZoneInput as Input,\n\tDropZoneContainer as Container,\n} from \"./drop-zone\";\n"]}

package/dist/esm/{ui → components/ui}/form/index.d.ts

@@ -1,12 +1,23 @@
 import * as React$1 from 'react';
 import { DiscriminatedRenderProps, InferProps, PolymorphicProps } from '@zayne-labs/toolkit-react/utils';
-import { UseFormStateReturn, ControllerProps, Control, FieldPath, ControllerRenderProps, ControllerFieldState, RegisterOptions, UseFormReturn, FieldPathValues, FieldPathValue } from 'react-hook-form';
+import { UseFormStateReturn, Control, FieldPath, ControllerProps, ControllerRenderProps, ControllerFieldState, RegisterOptions, UseFormReturn, FieldPathValues, FieldPathValue } from 'react-hook-form';
 export { useFormContext as useFormRootContext } from 'react-hook-form';
+import { UnionDiscriminator } from '@zayne-labs/toolkit-type-helpers';
 
-type FieldState = {
-    errors?: UseFormStateReturn<FieldValues>["errors"];
-    isDisabled?: boolean;
-    isInvalid?: boolean;
+type RenderIconProps = {
+    isPasswordVisible: boolean;
+};
+type EyeIconObject = UnionDiscriminator<[
+    {
+        closed: React.ReactNode;
+        open: React.ReactNode;
+    },
+    {
+        renderIcon: (props: RenderIconProps) => React.ReactNode;
+    }
+]>;
+type FormRootContext = {
+    withEyeIcon: boolean | EyeIconObject | undefined;
 };
 type FieldContextValue = {
     formDescriptionId: `${string}-(${string})-form-item-description`;
@@ -16,9 +27,14 @@ type FieldContextValue = {
 };
 type FormFieldContextProps = DiscriminatedRenderProps<(contextValue: FieldContextValue) => React.ReactNode>;
 declare const useStrictFormFieldContext: () => FieldContextValue;
+type FieldState = {
+    errors?: UseFormStateReturn<FieldValues>["errors"];
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+};
 
 type FieldValues = Record<string, unknown>;
-type FormRootProps<TFieldValues extends FieldValues> = React$1.ComponentPropsWithoutRef<"form"> & {
+type FormRootProps<TFieldValues extends FieldValues> = FormRootContext & React$1.ComponentPropsWithoutRef<"form"> & {
     children: React$1.ReactNode;
     methods: UseFormReturn<TFieldValues>;
 };
@@ -37,7 +53,6 @@ type FormFieldProps<TControl, TFieldValues extends FieldValues> = (TControl exte
     withWrapper: false;
 });
 declare function FormField<TControl, TFieldValues extends FieldValues = FieldValues>(props: FormFieldProps<TControl, TFieldValues>): React$1.JSX.Element;
-declare function FormControlledField<TFieldValues extends FieldValues>(props: ControllerProps<TFieldValues>): React$1.JSX.Element;
 type FormFieldControllerRenderFn = (props: {
     field: Omit<ControllerRenderProps, "value"> & {
         value: never;
@@ -49,6 +64,7 @@ type FormFieldControllerProps = Omit<ControllerProps<FieldValues, FieldPath<Fiel
     render: FormFieldControllerRenderFn;
 };
 declare function FormFieldController(props: FormFieldControllerProps): React$1.JSX.Element;
+declare function FormFieldControlledField<TFieldValues extends FieldValues>(props: ControllerProps<TFieldValues>): React$1.JSX.Element;
 declare function FormFieldContext(props: FormFieldContextProps): React$1.ReactNode;
 declare function FormLabel(props: InferProps<"label">): React$1.JSX.Element;
 declare function FormInputGroup(props: InferProps<"div">): React$1.JSX.Element;
@@ -74,7 +90,7 @@ type FormInputPrimitiveProps<TFieldValues extends FieldValues = FieldValues> = O
     control?: Control<TFieldValues>;
     fieldState?: FieldState;
     name?: FieldPath<TFieldValues>;
-    withEyeIcon?: boolean;
+    withEyeIcon?: FormRootContext["withEyeIcon"];
 };
 type FormTextAreaPrimitiveProps<TFieldValues extends FieldValues = FieldValues> = React$1.ComponentPropsWithRef<"textarea"> & {
     classNames?: {
@@ -131,7 +147,7 @@ type ErrorMessageRenderProps = {
     "data-scope": "form";
     "data-slot": "form-error-message";
     id: string | undefined;
-    onAnimationEnd?: React$1.ReactEventHandler<HTMLElement>;
+    ref: React$1.RefCallback<HTMLElement>;
 };
 type ErrorMessageRenderState = {
     errorMessage: string;
@@ -153,10 +169,10 @@ type FormErrorMessagePrimitiveProps<TFieldValues extends FieldValues> = Discrimi
     disableErrorAnimation?: boolean;
     disableScrollToErrorField?: boolean;
 } & ({
-    errorField: FieldPath<TFieldValues>;
+    fieldName: FieldPath<TFieldValues>;
     type?: "regular";
 } | {
-    errorField: string;
+    fieldName: string;
     type: "root";
 });
 type FormErrorMessagePrimitiveType = {
@@ -206,7 +222,7 @@ type FormSubscribeToFormStateProps<TFieldValues extends FieldValues> = Discrimin
 declare function FormSubscribeToFormState<TFieldValues extends FieldValues = FieldValues>(props: FormSubscribeToFormStateProps<TFieldValues>): React$1.ReactNode;
 
 declare namespace formParts {
-  export { FormControlledField as ControlledField, FormDescription as Description, FormErrorMessage as ErrorMessage, FormErrorMessagePrimitive as ErrorMessagePrimitive, FormField as Field, FormFieldContext as FieldContext, FormFieldController as FieldController, FormInput as Input, FormInputGroup as InputGroup, FormInputLeftItem as InputLeftItem, FormInputPrimitive as InputPrimitive, FormInputRightItem as InputRightItem, FormLabel as Label, FormRoot as Root, FormSelect as Select, FormSubmit as Submit, FormSubscribeToFieldValue as SubscribeToFieldValue, FormSubscribeToFormState as SubscribeToFormState, FormTextArea as TextArea, FormTextAreaPrimitive as TextAreaPrimitive };
+  export { FormFieldControlledField as ControlledField, FormDescription as Description, FormErrorMessage as ErrorMessage, FormErrorMessagePrimitive as ErrorMessagePrimitive, FormField as Field, FormFieldContext as FieldContext, FormFieldController as FieldController, FormInput as Input, FormInputGroup as InputGroup, FormInputLeftItem as InputLeftItem, FormInputPrimitive as InputPrimitive, FormInputRightItem as InputRightItem, FormLabel as Label, FormRoot as Root, FormSelect as Select, FormSubmit as Submit, FormSubscribeToFieldValue as SubscribeToFieldValue, FormSubscribeToFormState as SubscribeToFormState, FormTextArea as TextArea, FormTextAreaPrimitive as TextAreaPrimitive };
 }
 
-export { type FieldValues, formParts as Form, FormControlledField, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, FormField, FormFieldContext, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, type FormInputProps, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, type FormSelectProps, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, type FormTextAreaProps, useStrictFormFieldContext as useFormFieldContext };
+export { type FieldValues, formParts as Form, FormDescription, FormErrorMessage, FormErrorMessagePrimitive, type FormErrorMessagePrimitiveProps, FormField, FormFieldContext, FormFieldControlledField, FormFieldController, FormInput, FormInputGroup, FormInputLeftItem, FormInputPrimitive, type FormInputProps, FormInputRightItem, FormLabel, FormRoot, FormSelect, FormSelectPrimitive, type FormSelectProps, FormSubmit, FormSubscribeToFieldValue, FormSubscribeToFormState, FormTextArea, FormTextAreaPrimitive, type FormTextAreaProps, useStrictFormFieldContext as useFormFieldContext };