@zayne-labs/ui-react 0.10.8 → 0.10.10

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

@@ -1,4 +1,115 @@
-import "../../cn-s-D7vHW1.js";
-import { useDragScroll } from "../../drag-scroll-Bb1SG4On.js";
+import { cnMerge } from "../../cn-DdD3uYxA.js";
+import { composeRefs, mergeTwoProps } from "@zayne-labs/toolkit-react/utils";
+import { useCallback, useMemo, useRef } from "react";
+import { useCallbackRef } from "@zayne-labs/toolkit-react";
+import { checkIsDeviceMobile, off, on } from "@zayne-labs/toolkit-core";
 
-export { useDragScroll };
+//#region src/components/ui/drag-scroll/utils.ts
+const updateCursor = (element) => {
+	element.style.cursor = "grabbing";
+	element.style.userSelect = "none";
+};
+const onScrollSnap = (action, element) => {
+	if (action === "remove") {
+		element.style.scrollSnapType = "none";
+		return;
+	}
+	element.style.scrollSnapType = "";
+};
+const resetCursor = (element) => {
+	element.style.cursor = "";
+	element.style.userSelect = "";
+};
+const handleScrollSnap = (dragContainer) => {
+	if (!checkIsDeviceMobile()) onScrollSnap("remove", dragContainer);
+	else onScrollSnap("reset", dragContainer);
+};
+
+//#endregion
+//#region src/components/ui/drag-scroll/use-drag-scroll.ts
+const useDragScroll = (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) => {
+		if (!dragContainerRef.current) return;
+		if (orientation === "horizontal" || orientation === "both") {
+			const dx = event.clientX - positionRef.current.x;
+			dragContainerRef.current.scrollLeft = positionRef.current.left - dx;
+		}
+		if (orientation === "vertical" || orientation === "both") {
+			const dy = event.clientY - positionRef.current.y;
+			dragContainerRef.current.scrollTop = positionRef.current.top - dy;
+		}
+	});
+	const handleMouseUpOrLeave = useCallbackRef(() => {
+		if (!dragContainerRef.current) return;
+		off("mousemove", dragContainerRef.current, handleMouseMove);
+		off("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
+		off("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
+		resetCursor(dragContainerRef.current);
+	});
+	const handleMouseDown = useCallbackRef((event) => {
+		if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
+		if (usage === "desktopOnly" && window.innerWidth < 768) return;
+		if (!dragContainerRef.current) return;
+		if (orientation === "horizontal" || orientation === "both") {
+			positionRef.current.x = event.clientX;
+			positionRef.current.left = dragContainerRef.current.scrollLeft;
+		}
+		if (orientation === "vertical" || orientation === "both") {
+			positionRef.current.y = event.clientY;
+			positionRef.current.top = dragContainerRef.current.scrollTop;
+		}
+		updateCursor(dragContainerRef.current);
+		on("mousemove", dragContainerRef.current, handleMouseMove);
+		on("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
+		on("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
+	});
+	const refCallBack = useCallbackRef((node) => {
+		dragContainerRef.current = node;
+		node && handleScrollSnap(node);
+		return on("mousedown", dragContainerRef.current, handleMouseDown);
+	});
+	const getRootProps = useCallback((rootProps) => {
+		const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
+		return {
+			...mergedRootProps,
+			className: cnMerge(`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll
+					overflow-y-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",
+			"data-slot": "drag-scroll-root",
+			ref: composeRefs(refCallBack, mergedRootProps?.ref)
+		};
+	}, [
+		extraRootProps,
+		classNames?.base,
+		orientation,
+		refCallBack,
+		usage
+	]);
+	const getItemProps = useCallback((itemProps) => {
+		const mergedItemProps = mergeTwoProps(extraItemProps, itemProps);
+		return {
+			...mergedItemProps,
+			className: cnMerge("snap-center snap-always", classNames?.item, mergedItemProps.className),
+			"data-part": "item",
+			"data-scope": "drag-scroll",
+			"data-slot": "drag-scroll-item"
+		};
+	}, [extraItemProps, classNames?.item]);
+	return useMemo(() => ({
+		getItemProps,
+		getRootProps
+	}), [getItemProps, getRootProps]);
+};
+
+//#endregion
+export { useDragScroll };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["refCallBack: RefCallback<TElement>","getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"]","getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"]"],"sources":["../../../../src/components/ui/drag-scroll/utils.ts","../../../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"sourcesContent":["import { checkIsDeviceMobile } 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 isMobile = checkIsDeviceMobile();\n\n\tif (!isMobile) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { composeRefs, type InferProps, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useCallback, useMemo, useRef } from \"react\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype ItemProps<TItemElement extends HTMLElement> = Omit<InferProps<TItemElement>, \"children\">;\n\ntype RootProps<TElement extends HTMLElement> = Omit<InferProps<TElement>, \"children\">;\n\ntype DragScrollProps<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: ItemProps<TItemElement>;\n\textraRootProps?: InferProps<TElement>;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\ntype DragScrollResult<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tgetItemProps: (itemProps?: ItemProps<TItemElement>) => ItemProps<TItemElement>;\n\tgetRootProps: (rootProps?: RootProps<TElement>) => RootProps<TElement>;\n};\n\nconst useDragScroll = <TElement extends HTMLElement, TItemElement extends HTMLElement = HTMLElement>(\n\tprops?: DragScrollProps<TElement, TItemElement>\n): DragScrollResult<TElement, TItemElement> => {\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\treturn cleanup;\n\t});\n\n\tconst getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"] = useCallback(\n\t\t(rootProps) => {\n\t\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedRootProps,\n\t\t\t\tclassName: cnMerge(\n\t\t\t\t\t`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-x-scroll\n\t\t\t\t\toverflow-y-hidden`,\n\t\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tmergedRootProps.className\n\t\t\t\t),\n\t\t\t\t\"data-part\": \"root\",\n\t\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\t\"data-slot\": \"drag-scroll-root\",\n\t\t\t\tref: composeRefs(\n\t\t\t\t\trefCallBack,\n\t\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[extraRootProps, classNames?.base, orientation, refCallBack, usage]\n\t);\n\n\tconst getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"] = useCallback(\n\t\t(itemProps) => {\n\t\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\t\treturn {\n\t\t\t\t...mergedItemProps,\n\t\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\t\"data-part\": \"item\",\n\t\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\t\"data-slot\": \"drag-scroll-item\",\n\t\t\t};\n\t\t},\n\t\t[extraItemProps, classNames?.item]\n\t);\n\n\tconst result = useMemo(() => ({ getItemProps, getRootProps }), [getItemProps, getRootProps]);\n\n\treturn result;\n};\n\nexport { useDragScroll };\n"],"mappings":"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"}

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

@@ -1,2 +1,346 @@
-import { DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneError, DropZoneFileClear, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemMetadata, DropZoneFileItemPreview, DropZoneFileItemProgress, DropZoneFileList, DropZoneInput, DropZoneRoot, DropZoneTrigger, drop_zone_parts_d_exports, useDropZone, useDropZoneStoreContext } from "../../index-BoZe50e8.js";
-export { drop_zone_parts_d_exports as DropZone, DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneError, DropZoneFileClear, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemMetadata, DropZoneFileItemPreview, DropZoneFileItemProgress, DropZoneFileList, DropZoneInput, DropZoneRoot, DropZoneTrigger, useDropZone, useDropZoneStoreContext };
+import { InferProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
+import * as _zayne_labs_toolkit_type_helpers0 from "@zayne-labs/toolkit-type-helpers";
+import { Awaitable, SelectorFn } from "@zayne-labs/toolkit-type-helpers";
+import * as react4 from "react";
+import "@zayne-labs/toolkit-react";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as _zayne_labs_toolkit_core1 from "@zayne-labs/toolkit-core";
+import { FileMeta, FileOrFileMeta, FileValidationErrorContextEach, FileValidationHooksAsync, FileValidationSettingsAsync } from "@zayne-labs/toolkit-core";
+
+//#region src/components/ui/drop-zone/utils.d.ts
+
+declare class DropZoneError extends Error {
+  readonly dropZoneErrorSymbol: symbol;
+  file?: FileValidationErrorContextEach["file"];
+  name: "DropZoneError";
+  constructor(ctx: Pick<FileValidationErrorContextEach, "message"> & {
+    file?: FileValidationErrorContextEach["file"];
+  });
+  static isError(error: unknown): error is DropZoneError;
+}
+//#endregion
+//#region src/components/ui/drop-zone/types.d.ts
+type FileErrorContext = Omit<FileValidationErrorContextEach, "code"> & {
+  code: "upload-error" | FileValidationErrorContextEach["code"];
+};
+interface FileState {
+  /**
+   *  Validation errors for the file
+   *
+   */
+  error?: FileErrorContext;
+  /**
+   *  File object or file metadata
+   */
+  file: FileOrFileMeta;
+  /**
+   *  Unique ID for the file
+   */
+  id: string;
+  /**
+   *  Preview URL for the file
+   *  - Will be undefined if `disallowPreviewForNonImageFiles` is set to `true` and the file is not an image
+   *  - Can also be undefined if `URL.createObjectURL` fails
+   */
+  preview: string | undefined;
+  /**
+   *  Progress of the file upload
+   */
+  progress: number;
+  /**
+   *  Status of the file upload
+   */
+  status: "error" | "idle" | "success" | "uploading";
+}
+type FileStateOrIDProp = {
+  fileStateOrID: FileOrFileMeta | FileState | FileState["id"];
+};
+type RecordForDataAttr = Record<`data-${string}`, unknown>;
+interface PartProps {
+  container: {
+    input: PartProps["container"]["output"];
+    output: InferProps<HTMLElement> & RecordForDataAttr;
+  };
+  fileItem: {
+    input: PartProps["fileItem"]["output"];
+    output: InferProps<"li"> & RecordForDataAttr;
+  };
+  fileItemClear: {
+    input: PartProps["fileItemClear"]["output"];
+    output: InferProps<"button"> & RecordForDataAttr;
+  };
+  fileItemDelete: {
+    input: Partial<FileStateOrIDProp> & PartProps["fileItemDelete"]["output"];
+    output: InferProps<"button"> & RecordForDataAttr;
+  };
+  fileItemMetadata: {
+    input: PartProps["fileItemMetadata"]["output"];
+    output: InferProps<"div"> & RecordForDataAttr;
+  };
+  fileItemPreview: {
+    input: PartProps["fileItemPreview"]["output"];
+    output: InferProps<"span"> & RecordForDataAttr;
+  };
+  fileItemProgress: {
+    input: PartProps["fileItemProgress"]["output"] & {
+      variant?: "circular" | "fill" | "linear";
+    };
+    output: InferProps<"span"> & RecordForDataAttr;
+  };
+  fileList: {
+    input: PartProps["fileList"]["output"] & {
+      orientation?: "horizontal" | "vertical";
+    };
+    output: InferProps<"ul"> & RecordForDataAttr;
+  };
+  input: {
+    input: PartProps["input"]["output"];
+    output: InferProps<"input"> & RecordForDataAttr;
+  };
+  trigger: {
+    input: PartProps["trigger"]["output"];
+    output: InferProps<"button"> & RecordForDataAttr;
+  };
+}
+type DropZonePropGetters = { [Key in keyof PartProps as `get${Capitalize<Key>}Props`]: (props: PartProps[Key]["input"]) => PartProps[Key]["output"] };
+type PartInputProps = { [Key in keyof PartProps]: PartProps[Key]["input"] };
+type DropZoneState = {
+  /**
+   *  List of validation errors
+   */
+  errors: FileErrorContext[];
+  /**
+   *  List of files with their preview URLs and unique IDs
+   */
+  fileStateArray: FileState[];
+  /**
+   *  Whether or not a file is currently being dragged over the drop zone
+   */
+  isDraggingOver: boolean;
+  /**
+   *  Whether or not any of the files are invalid
+   */
+  isInvalid: boolean;
+};
+type DropZoneActions = {
+  actions: {
+    addFiles: (files: FileList | FileOrFileMeta[] | null) => Awaitable<void>;
+    clearErrors: () => void;
+    clearFiles: () => void;
+    clearObjectURLs: () => void;
+    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => Awaitable<void>;
+    handleDragEnter: (event: React.DragEvent<HTMLElement>) => void;
+    handleDragLeave: (event: React.DragEvent<HTMLElement>) => void;
+    handleDragOver: (event: React.DragEvent<HTMLElement>) => void;
+    handleDrop: (event: React.DragEvent<HTMLElement>) => Awaitable<void>;
+    handleFileUpload: (ctx: {
+      newFileStateArray: DropZoneState["fileStateArray"];
+    }) => Awaitable<void>;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    handlePaste: (event: React.ClipboardEvent<HTMLElement>) => Awaitable<void>;
+    openFilePicker: () => void;
+    removeFile: (ctx: FileStateOrIDProp) => void;
+    updateFileState: (ctx: FileStateOrIDProp & Partial<Omit<FileState, "file" | "id" | "preview">>) => void;
+  };
+};
+interface UseDropZoneResult extends Pick<Required<UseDropZoneProps>, "disabled" | "disableInternalStateSubscription"> {
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  propGetters: DropZonePropGetters;
+  storeApi: ReturnType<typeof createDropZoneStore>;
+  useDropZoneStore: typeof useDropZoneStoreContext;
+}
+interface UseDropZoneProps extends FileValidationSettingsAsync {
+  /**
+   * Whether or not the drop zone is disabled
+   */
+  disabled?: boolean;
+  /**
+   *  Whether to disable the internal state subscription such as drag over state etc for setting things like data attributes
+   *  - This is useful if you want to subscribe to the state yourself
+   *  @default false
+   */
+  disableInternalStateSubscription?: boolean;
+  /**
+   * Whether to disallow preview for non-image files
+   * @default true
+   */
+  disablePreviewForNonImageFiles?: boolean;
+  /**
+   * Extra props to pass to various parts of the dropzone
+   */
+  extraProps?: PartProps;
+  /**
+   * Initial files to populate the drop zone
+   */
+  initialFiles?: FileMeta | FileMeta[] | null;
+  /**
+   * Whether to allow multiple files to be uploaded
+   */
+  multiple?: boolean;
+  /**
+   * Callback function to be called when internal files state changes
+   */
+  onFilesChange?: (context: Pick<DropZoneState, "fileStateArray">) => void;
+  /**
+   * Callback function to be called when new files are uploaded
+   */
+  onUpload?: (context: Pick<DropZoneState, "fileStateArray"> & {
+    onError: (ctx: FileStateOrIDProp & {
+      error: DropZoneError;
+    }) => void;
+    onProgress: (ctx: FileStateOrIDProp & {
+      progress: number;
+    }) => void;
+    onSuccess: (ctx: FileStateOrIDProp) => void;
+  }) => Awaitable<void>;
+  /**
+   * Callback function to be called on each file validation error as they occur
+   */
+  onValidationError?: FileValidationHooksAsync["onErrorEach"];
+  /**
+   * Callback function to be called once after all files have been successfully validated
+   */
+  onValidationSuccess?: FileValidationHooksAsync["onSuccessBatch"];
+  /**
+   * Whether clicking the drop zone area will open the default file picker or not
+   *
+   * @default true
+   */
+  shouldOpenFilePickerOnAreaClick?: boolean;
+  /**
+   * Custom validation function.
+   *
+   * If the function returns false, the file will be rejected
+   *
+   */
+  validator?: FileValidationSettingsAsync["validator"];
+}
+//#endregion
+//#region src/components/ui/drop-zone/drop-zone-store.d.ts
+type DropZoneStore = DropZoneActions & DropZoneState;
+type RequiredUseDropZoneProps = { [Key in keyof Required<UseDropZoneProps>]: UseDropZoneProps[Key] | undefined };
+type InitStoreValues = Omit<RequiredUseDropZoneProps, "disabled" | "disableInternalStateSubscription" | "extraProps" | "shouldOpenFilePickerOnAreaClick"> & {
+  inputRef: React.RefObject<HTMLInputElement | null>;
+};
+declare const createDropZoneStore: (initStoreValues: InitStoreValues) => _zayne_labs_toolkit_core1.StoreApi<DropZoneStore>;
+//#endregion
+//#region src/components/ui/drop-zone/drop-zone-context.d.ts
+declare const DropZoneStoreContextProvider: (props: {
+    children: React.ReactNode;
+    store: _zayne_labs_toolkit_core1.StoreApi<DropZoneStore>;
+  }) => react4.FunctionComponentElement<react4.ProviderProps<_zayne_labs_toolkit_core1.StoreApi<DropZoneStore>>>, useDropZoneStoreContext: <TResult = DropZoneStore>(selector?: _zayne_labs_toolkit_type_helpers0.SelectorFn<DropZoneStore, TResult> | undefined) => TResult;
+type FileItemContextType = {
+  fileState: FileState;
+};
+//#endregion
+//#region src/components/ui/drop-zone/drop-zone.d.ts
+type DropZoneRootProps = UseDropZoneProps & {
+  children: react4.ReactNode;
+};
+declare function DropZoneRoot(props: DropZoneRootProps): react_jsx_runtime26.JSX.Element;
+type DropZoneContextProps<TSlice> = {
+  children: react4.ReactNode | ((context: TSlice) => react4.ReactNode);
+  selector?: SelectorFn<DropZoneStore, TSlice>;
+};
+declare function DropZoneContext<TSlice = DropZoneStore>(props: DropZoneContextProps<TSlice>): react4.ReactNode;
+type DropZoneContainerProps = PartInputProps["container"] & {
+  asChild?: boolean;
+};
+declare function DropZoneContainer<TElement extends react4.ElementType = "div">(props: PolymorphicPropsStrict<TElement, DropZoneContainerProps>): react_jsx_runtime26.JSX.Element;
+type DropZoneInputProps = PartInputProps["input"] & {
+  asChild?: boolean;
+};
+declare function DropZoneInput(props: DropZoneInputProps): react_jsx_runtime26.JSX.Element;
+type DropZoneAreaProps<TSlice> = {
+  children: react4.ReactNode | ((context: TSlice) => react4.ReactNode);
+  classNames?: Partial<Record<Extract<keyof PartInputProps, "container" | "input">, string>>;
+  extraProps?: Pick<PartInputProps, "container" | "input">;
+  selector?: SelectorFn<DropZoneStore, TSlice>;
+};
+declare function DropZoneArea<TSlice = DropZoneStore>(props: DropZoneAreaProps<TSlice>): react_jsx_runtime26.JSX.Element;
+type DropZoneTriggerProps = PartInputProps["trigger"] & {
+  asChild?: boolean;
+};
+declare function DropZoneTrigger(props: DropZoneTriggerProps): react_jsx_runtime26.JSX.Element;
+type ListPerItemContext = Pick<DropZoneStore, "actions"> & {
+  array: DropZoneStore["fileStateArray"];
+  fileState: DropZoneStore["fileStateArray"][number];
+  index: number;
+};
+type FileListPerItemVariant = {
+  children: react4.ReactNode | ((context: ListPerItemContext) => react4.ReactNode);
+  renderMode?: "per-item";
+};
+type ListManualListContext = Pick<DropZoneStore, "actions" | "fileStateArray">;
+type FileListManualListVariant = {
+  children: react4.ReactNode | ((context: ListManualListContext) => react4.ReactNode);
+  renderMode: "manual-list";
+};
+type DropZoneFileListProps = Omit<PartInputProps["fileList"], "children"> & {
+  asChild?: boolean;
+  forceMount?: boolean;
+} & (FileListManualListVariant | FileListPerItemVariant);
+declare function DropZoneFileList<TElement extends react4.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, DropZoneFileListProps>): react_jsx_runtime26.JSX.Element;
+type DropZoneFileItemProps = FileItemContextType & PartInputProps["fileItem"] & {
+  asChild?: boolean;
+};
+declare function DropZoneFileItem<TElement extends react4.ElementType = "li">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProps>): react_jsx_runtime26.JSX.Element;
+type DropZoneFileItemDeleteProps = PartInputProps["fileItemDelete"] & {
+  asChild?: boolean;
+};
+declare function DropZoneFileItemDelete(props: DropZoneFileItemDeleteProps): react_jsx_runtime26.JSX.Element;
+type DropZoneFileItemProgressProps = PartInputProps["fileItemProgress"] & {
+  asChild?: boolean;
+  forceMount?: boolean;
+  size?: number;
+};
+declare function DropZoneFileItemProgress<TElement extends react4.ElementType = "span">(props: PolymorphicPropsStrict<TElement, DropZoneFileItemProgressProps>): react_jsx_runtime26.JSX.Element | null;
+type RenderPreviewDetails<TElement extends react4.ElementType = "svg"> = {
+  node?: react4.ReactNode;
+} & {
+  props?: InferProps<TElement>;
+};
+type RenderPropContext = Pick<FileItemContextType, "fileState"> & {
+  fileExtension: string;
+  fileType: string;
+};
+type RenderPreview = (context: RenderPropContext) => {
+  archive?: RenderPreviewDetails;
+  audio?: RenderPreviewDetails;
+  code?: RenderPreviewDetails;
+  default?: RenderPreviewDetails;
+  executable?: RenderPreviewDetails;
+  image?: RenderPreviewDetails<"img">;
+  text?: RenderPreviewDetails;
+  video?: RenderPreviewDetails;
+};
+type DropZoneFileItemPreviewProps = Omit<PartInputProps["fileItemPreview"], "children"> & Partial<Pick<FileItemContextType, "fileState">> & {
+  asChild?: boolean;
+  children?: react4.ReactNode | ((context: RenderPropContext) => react4.ReactNode);
+  renderPreview?: boolean | RenderPreview;
+};
+declare function DropZoneFileItemPreview<TElement extends react4.ElementType>(props: PolymorphicPropsStrict<TElement, DropZoneFileItemPreviewProps>): react_jsx_runtime26.JSX.Element | null;
+type DropZoneFileItemMetadataProps = Omit<PartInputProps["fileItemMetadata"], "children"> & Partial<Pick<FileItemContextType, "fileState">> & {
+  asChild?: boolean;
+  children?: react4.ReactNode | ((context: Pick<FileItemContextType, "fileState">) => react4.ReactNode);
+  classNames?: {
+    name?: string;
+    size?: string;
+  };
+  size?: "default" | "sm";
+};
+declare function DropZoneFileItemMetadata(props: DropZoneFileItemMetadataProps): react_jsx_runtime26.JSX.Element | null;
+type DropZoneFileClearProps = PartInputProps["fileItemClear"] & {
+  asChild?: boolean;
+  forceMount?: boolean;
+};
+declare function DropZoneFileClear(props: DropZoneFileClearProps): react_jsx_runtime26.JSX.Element | null;
+declare namespace drop_zone_parts_d_exports {
+  export { DropZoneArea as Area, DropZoneContainer as Container, DropZoneContext as Context, DropZoneFileClear as FileClear, DropZoneFileItem as FileItem, DropZoneFileItemDelete as FileItemDelete, DropZoneFileItemMetadata as FileItemMetadata, DropZoneFileItemPreview as FileItemPreview, DropZoneFileItemProgress as FileItemProgress, DropZoneFileList as FileList, DropZoneInput as Input, DropZoneRoot as Root, DropZoneTrigger as Trigger };
+}
+//#endregion
+//#region src/components/ui/drop-zone/use-drop-zone.d.ts
+declare const useDropZone: (props?: UseDropZoneProps) => UseDropZoneResult;
+//#endregion
+export { drop_zone_parts_d_exports as DropZone, DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneError, DropZoneFileClear, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemMetadata, DropZoneFileItemPreview, DropZoneFileItemProgress, DropZoneFileList, DropZoneInput, DropZoneRoot, DropZoneTrigger, useDropZone, useDropZoneStoreContext };
+//# sourceMappingURL=index.d.ts.map