refactor: implement dropzone props

packages/react/src/components/file-upload/file-upload-dropzone.tsx

@@ -1,18 +1,31 @@
-import { mergeProps } from '@zag-js/react'
-import { forwardRef } from 'react'
-import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
-import { useFileUploadContext } from './use-file-upload-context'
+import type { DropzoneProps } from "@zag-js/file-upload";
+import { mergeProps } from "@zag-js/react";
+import { forwardRef } from "react";
+import { createSplitProps } from "../../utils/create-split-props";
+import { type HTMLProps, type PolymorphicProps, ark } from "../factory";
+import { useFileUploadContext } from "./use-file-upload-context";
 
-export interface FileUploadDropzoneBaseProps extends PolymorphicProps {}
-export interface FileUploadDropzoneProps extends HTMLProps<'div'>, FileUploadDropzoneBaseProps {}
+export interface FileUploadDropzoneBaseProps
+	extends PolymorphicProps,
+		DropzoneProps {}
+export interface FileUploadDropzoneProps
+	extends HTMLProps<"div">,
+		FileUploadDropzoneBaseProps {}
 
-export const FileUploadDropzone = forwardRef<HTMLDivElement, FileUploadDropzoneProps>(
-  (props, ref) => {
-    const fileUpload = useFileUploadContext()
-    const mergedProps = mergeProps(fileUpload.getDropzoneProps(), props)
+export const FileUploadDropzone = forwardRef<
+	HTMLDivElement,
+	FileUploadDropzoneProps
+>((props, ref) => {
+	const [dropzoneProps, localProps] = createSplitProps<DropzoneProps>()(props, [
+		"disableClick",
+	]);
+	const fileUpload = useFileUploadContext();
+	const mergedProps = mergeProps(
+		fileUpload.getDropzoneProps(dropzoneProps),
+		localProps,
+	);
 
-    return <ark.div {...mergedProps} ref={ref} />
-  },
-)
+	return <ark.div {...mergedProps} ref={ref} />;
+});
 
-FileUploadDropzone.displayName = 'FileUploadDropzone'
+FileUploadDropzone.displayName = "FileUploadDropzone";

packages/solid/src/components/file-upload/file-upload-dropzone.tsx

@@ -1,13 +1,25 @@
-import { mergeProps } from '@zag-js/solid'
-import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
-import { useFileUploadContext } from './use-file-upload-context'
+import type { DropzoneProps } from "@zag-js/file-upload";
+import { mergeProps } from "@zag-js/solid";
+import { createSplitProps } from "../../utils/create-split-props";
+import { type HTMLProps, type PolymorphicProps, ark } from "../factory";
+import { useFileUploadContext } from "./use-file-upload-context";
 
-export interface FileUploadDropzoneBaseProps extends PolymorphicProps<'div'> {}
-export interface FileUploadDropzoneProps extends HTMLProps<'div'>, FileUploadDropzoneBaseProps {}
+export interface FileUploadDropzoneBaseProps
+	extends PolymorphicProps<"div">,
+		DropzoneProps {}
+export interface FileUploadDropzoneProps
+	extends HTMLProps<"div">,
+		FileUploadDropzoneBaseProps {}
 
 export const FileUploadDropzone = (props: FileUploadDropzoneProps) => {
-  const fileUpload = useFileUploadContext()
-  const mergedProps = mergeProps(() => fileUpload().getDropzoneProps(), props)
+	const [dropzoneProps, localProps] = createSplitProps<DropzoneProps>()(props, [
+		"disableClick",
+	]);
+	const fileUpload = useFileUploadContext();
+	const mergedProps = mergeProps(
+		() => fileUpload().getDropzoneProps(dropzoneProps),
+		localProps,
+	);
 
-  return <ark.div {...mergedProps} />
-}
+	return <ark.div {...mergedProps} />;
+};

packages/vue/src/components/file-upload/file-upload-dropzone.vue

@@ -1,30 +1,35 @@
 <script lang="ts">
-import type { HTMLAttributes } from 'vue'
-import type { PolymorphicProps } from '../factory'
+import type { DropzoneProps } from "@zag-js/file-upload";
+import type { HTMLAttributes } from "vue";
+import type { PolymorphicProps } from "../factory";
 
-export interface FileUploadDropzoneBaseProps extends PolymorphicProps {}
+export interface FileUploadDropzoneBaseProps
+	extends PolymorphicProps,
+		DropzoneProps {}
 export interface FileUploadDropzoneProps
-  extends FileUploadDropzoneBaseProps,
-    /**
-     * @vue-ignore
-     */
-    HTMLAttributes {}
+	extends FileUploadDropzoneBaseProps,
+		/**
+		 * @vue-ignore
+		 */
+		HTMLAttributes {}
 </script>
 
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useFileUploadContext } from './use-file-upload-context'
 import { useForwardExpose } from '../../utils'
 
-defineProps<FileUploadDropzoneProps>()
+const props = withDefaults(defineProps<FileUploadDropzoneProps>(), {
+  disableClick: undefined,
+} satisfies BooleanDefaults<DropzoneProps>)
 
 const fileUpload = useFileUploadContext()
 
 useForwardExpose()
 </script>
 
 <template>
-  <ark.div v-bind="fileUpload.getDropzoneProps()" :as-child="asChild">
+  <ark.div v-bind="fileUpload.getDropzoneProps(props)" :as-child="asChild">
     <slot />
   </ark.div>
 </template>