@ark-ui/solid 1.0.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -13,6 +13,7 @@
     "dialog",
     "editable",
     "environment",
+    "file upload",
     "hover card",
     "menu",
     "number input",
@@ -79,69 +80,73 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0",
-    "@zag-js/accordion": "0.29.0",
-    "@zag-js/avatar": "0.29.0",
-    "@zag-js/carousel": "0.29.0",
-    "@zag-js/checkbox": "0.29.0",
-    "@zag-js/color-picker": "0.29.0",
-    "@zag-js/combobox": "0.29.0",
-    "@zag-js/date-picker": "0.29.0",
-    "@zag-js/dialog": "0.29.0",
-    "@zag-js/editable": "0.29.0",
-    "@zag-js/hover-card": "0.29.0",
-    "@zag-js/menu": "0.29.0",
-    "@zag-js/number-input": "0.29.0",
-    "@zag-js/pagination": "0.29.0",
-    "@zag-js/pin-input": "0.29.0",
-    "@zag-js/popover": "0.29.0",
-    "@zag-js/presence": "0.29.0",
-    "@zag-js/radio-group": "0.29.0",
-    "@zag-js/rating-group": "0.29.0",
-    "@zag-js/select": "0.29.0",
-    "@zag-js/slider": "0.29.0",
-    "@zag-js/solid": "0.29.0",
-    "@zag-js/splitter": "0.29.0",
-    "@zag-js/switch": "0.29.0",
-    "@zag-js/tabs": "0.29.0",
-    "@zag-js/tags-input": "0.29.0",
-    "@zag-js/toast": "0.29.0",
-    "@zag-js/toggle-group": "0.29.0",
-    "@zag-js/tooltip": "0.29.0",
-    "@zag-js/types": "0.29.0"
+    "@ark-ui/anatomy": "1.2.0",
+    "@zag-js/accordion": "0.31.1",
+    "@zag-js/avatar": "0.31.1",
+    "@zag-js/carousel": "0.31.1",
+    "@zag-js/checkbox": "0.31.1",
+    "@zag-js/color-picker": "0.31.1",
+    "@zag-js/combobox": "0.31.1",
+    "@zag-js/date-picker": "0.31.1",
+    "@zag-js/dialog": "0.31.1",
+    "@zag-js/editable": "0.31.1",
+    "@zag-js/file-upload": "0.31.1",
+    "@zag-js/hover-card": "0.31.1",
+    "@zag-js/menu": "0.31.1",
+    "@zag-js/number-input": "0.31.1",
+    "@zag-js/pagination": "0.31.1",
+    "@zag-js/pin-input": "0.31.1",
+    "@zag-js/popover": "0.31.1",
+    "@zag-js/presence": "0.31.1",
+    "@zag-js/radio-group": "0.31.1",
+    "@zag-js/rating-group": "0.31.1",
+    "@zag-js/select": "0.31.1",
+    "@zag-js/slider": "0.31.1",
+    "@zag-js/solid": "0.31.1",
+    "@zag-js/splitter": "0.31.1",
+    "@zag-js/switch": "0.31.1",
+    "@zag-js/tabs": "0.31.1",
+    "@zag-js/tags-input": "0.31.1",
+    "@zag-js/toast": "0.31.1",
+    "@zag-js/toggle-group": "0.31.1",
+    "@zag-js/tooltip": "0.31.1",
+    "@zag-js/types": "0.31.1"
   },
   "devDependencies": {
-    "@release-it/keep-a-changelog": "4.0.0",
+    "@release-it/keep-a-changelog": "5.0.0",
     "@solidjs/testing-library": "0.8.4",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-interactions": "7.5.3",
-    "@storybook/addon-links": "7.5.3",
-    "@storybook/blocks": "7.5.3",
+    "@storybook/addon-essentials": "7.6.4",
+    "@storybook/addon-interactions": "7.6.4",
+    "@storybook/addon-links": "7.6.4",
+    "@storybook/blocks": "7.6.4",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.4",
+    "@testing-library/jest-dom": "6.1.5",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.5",
+    "@types/jsdom": "21.1.6",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.10.0",
-    "@typescript-eslint/parser": "6.10.0",
+    "@typescript-eslint/eslint-plugin": "6.14.0",
+    "@typescript-eslint/parser": "6.14.0",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.53.0",
-    "globby": "13.2.2",
-    "jsdom": "22.1.0",
+    "eslint": "8.55.0",
+    "eslint-plugin-jest-dom": "5.1.0",
+    "eslint-plugin-testing-library": "6.2.0",
+    "globby": "14.0.0",
+    "jsdom": "23.0.1",
+    "lucide-solid": "0.294.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "release-it": "16.2.1",
+    "release-it": "17.0.1",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.3.0",
+    "rollup": "4.9.0",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.5",
-    "storybook": "7.5.3",
+    "solid-js": "1.8.7",
+    "storybook": "7.6.4",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
-    "typescript": "5.2.2",
-    "vite": "4.5.0",
-    "vite-plugin-solid": "2.7.2",
+    "typescript": "5.3.3",
+    "vite": "5.0.8",
+    "vite-plugin-solid": "2.8.0",
     "vitest": "0.34.2"
   },
   "peerDependencies": {

package/source/color-picker/color-picker-format-select.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Index } from 'solid-js';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerFormatSelect = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().formatSelectProps, props);
+    return (<ark.select {...mergedProps}>
+      <Index each={['rgba', 'hsla', 'hsba']}>
+        {(format) => <ark.option value={format()}>{format()}</ark.option>}
+      </Index>
+    </ark.select>);
+};

package/source/color-picker/color-picker-format-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerFormatTrigger = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().formatTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/color-picker/color-picker-swatch-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext({
+    hookName: 'useColorPickerSwatchContext',
+    providerName: '<ColorPickerSwatchProvider />',
+});

package/source/color-picker/color-picker-swatch-indicator.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+import { useColorPickerSwatchContext } from './color-picker-swatch-context';
+export const ColorPickerSwatchIndicator = (props) => {
+    const api = useColorPickerContext();
+    const swatchProps = useColorPickerSwatchContext();
+    const mergedProps = mergeProps(() => api().getSwatchIndicatorProps(swatchProps), props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-swatch-trigger.jsx

@@ -3,7 +3,10 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useColorPickerContext } from './color-picker-context';
 export const ColorPickerSwatchTrigger = (props) => {
-    const [triggerProps, localProps] = createSplitProps()(props, ['value']);
+    const [triggerProps, localProps] = createSplitProps()(props, [
+        'value',
+        'disabled',
+    ]);
     const api = useColorPickerContext();
     const mergedProps = mergeProps(() => api().getSwatchTriggerProps(triggerProps), localProps);
     return <ark.button {...mergedProps}/>;

package/source/color-picker/color-picker-swatch.jsx

@@ -2,12 +2,15 @@ import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useColorPickerContext } from './color-picker-context';
+import { ColorPickerSwatchProvider } from './color-picker-swatch-context';
 export const ColorPickerSwatch = (props) => {
-    const [colorSwatchProps, localProps] = createSplitProps()(props, [
+    const [swatchProps, localProps] = createSplitProps()(props, [
         'respectAlpha',
         'value',
     ]);
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().getSwatchProps(colorSwatchProps), localProps);
-    return <ark.div {...mergedProps}/>;
+    const mergedProps = mergeProps(() => api().getSwatchProps(swatchProps), localProps);
+    return (<ColorPickerSwatchProvider value={swatchProps}>
+      <ark.div {...mergedProps}/>
+    </ColorPickerSwatchProvider>);
 };

package/source/color-picker/color-picker.jsx

@@ -8,9 +8,10 @@ import { useColorPicker, } from './use-color-picker';
 export const ColorPicker = (props) => {
     const [presenceProps, colorPickerProps] = splitPresenceProps(props);
     const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
-        'autoFocus',
+        'closeOnSelect',
         'dir',
         'disabled',
+        'format',
         'getRootNode',
         'id',
         'ids',
@@ -18,6 +19,7 @@ export const ColorPicker = (props) => {
         'name',
         'name',
         'onFocusOutside',
+        'onFormatChange',
         'onInteractOutside',
         'onOpenChange',
         'onPointerDownOutside',

package/source/color-picker/index.js

@@ -12,10 +12,13 @@ import { ColorPickerContent } from './color-picker-content';
 import { useColorPickerContext } from './color-picker-context';
 import { ColorPickerControl } from './color-picker-control';
 import { ColorPickerEyeDropperTrigger, } from './color-picker-eye-dropper-trigger';
+import { ColorPickerFormatSelect, } from './color-picker-format-select';
+import { ColorPickerFormatTrigger, } from './color-picker-format-trigger';
 import { ColorPickerLabel } from './color-picker-label';
 import { ColorPickerPositioner } from './color-picker-positioner';
 import { ColorPickerSwatch } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, } from './color-picker-swatch-group';
+import { ColorPickerSwatchIndicator, } from './color-picker-swatch-indicator';
 import { ColorPickerSwatchTrigger, } from './color-picker-swatch-trigger';
 import { ColorPickerTransparencyGrid, } from './color-picker-transparency-grid';
 import { ColorPickerTrigger } from './color-picker-trigger';
@@ -33,14 +36,17 @@ const ColorPicker = Object.assign(ColorPickerRoot, {
     Content: ColorPickerContent,
     Control: ColorPickerControl,
     EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+    FormatTrigger: ColorPickerFormatTrigger,
+    FormatSelect: ColorPickerFormatSelect,
     Label: ColorPickerLabel,
     Positioner: ColorPickerPositioner,
     Swatch: ColorPickerSwatch,
     SwatchGroup: ColorPickerSwatchGroup,
+    SwatchIndicator: ColorPickerSwatchIndicator,
     SwatchTrigger: ColorPickerSwatchTrigger,
     TransparencyGrid: ColorPickerTransparencyGrid,
     Trigger: ColorPickerTrigger,
     ValueText: ColorPickerValueText,
     View: ColorPickerView,
 });
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };

package/source/date-picker/date-picker.jsx

@@ -21,7 +21,6 @@ export const DatePicker = (props) => {
         'isDateUnavailable',
         'locale',
         'max',
-        'messages',
         'min',
         'modal',
         'name',
@@ -37,6 +36,7 @@ export const DatePicker = (props) => {
         'selectionMode',
         'startOfWeek',
         'timeZone',
+        'translations',
         'value',
         'view',
     ]);

package/source/dialog/dialog-close-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDialogContext } from './dialog-context';
 export const DialogCloseTrigger = (props) => {
     const dialog = useDialogContext();
-    const mergedProps = mergeProps(() => dialog().triggerProps, props);
+    const mergedProps = mergeProps(() => dialog().closeTriggerProps, props);
     return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable-area.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableArea = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().areaProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().areaProps, props);
     return <ark.div {...mergedProps}/>;
 };

package/source/editable/editable-cancel-trigger.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableCancelTrigger = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().cancelTriggerProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().cancelTriggerProps, props);
     return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable-control.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableControl = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().controlProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
     return <ark.div {...mergedProps}/>;
 };

package/source/editable/editable-edit-trigger.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableEditTrigger = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().editTriggerProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().editTriggerProps, props);
     return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable-input.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableInput = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().inputProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().inputProps, props);
     return <ark.input {...mergedProps}/>;
 };

package/source/editable/editable-label.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableLabel = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().labelProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
     return <ark.label {...mergedProps}/>;
 };

package/source/editable/editable-preview.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditablePreview = (props) => {
-    const editable = useEditableContext();
-    const mergedProps = mergeProps(() => editable().previewProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().previewProps, props);
     return <ark.span {...mergedProps}/>;
 };

package/source/editable/editable-submit-trigger.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useEditableContext } from './editable-context';
 export const EditableSubmitTrigger = (props) => {
-    const dialog = useEditableContext();
-    const mergedProps = mergeProps(() => dialog().submitTriggerProps, props);
+    const api = useEditableContext();
+    const mergedProps = mergeProps(() => api().submitTriggerProps, props);
     return <ark.button {...mergedProps}/>;
 };

package/source/editable/editable.jsx

@@ -1,12 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
-import { splitProps } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { EditableProvider } from './editable-context';
 import { useEditable } from './use-editable';
 export const Editable = (props) => {
-    const [useEditableProps, restProps] = createSplitProps()(props, [
+    const [useEditableProps, localProps] = createSplitProps()(props, [
         'activationMode',
         'autoResize',
         'dir',
@@ -34,11 +33,10 @@ export const Editable = (props) => {
         'translations',
         'value',
     ]);
-    const editable = useEditable(useEditableProps);
-    const [childrenProps, localProps] = splitProps(restProps, ['children']);
-    const mergedProps = mergeProps(() => editable().rootProps, localProps);
-    const getChildren = () => runIfFn(childrenProps.children, editable);
-    return (<EditableProvider value={editable}>
+    const api = useEditable(useEditableProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<EditableProvider value={api}>
       <ark.div {...mergedProps}>{getChildren()}</ark.div>
     </EditableProvider>);
 };

package/source/file-upload/file-upload-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [FileUploadProvider, useFileUploadContext] = createContext({
+    hookName: 'useFileUploadContext',
+    providerName: '<FileUploadProvider />',
+});

package/source/file-upload/file-upload-dropzone.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+export const FileUploadDropzone = (props) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().dropzoneProps, props);
+    return (<>
+      <ark.div {...mergedProps}/>
+      <input {...api().hiddenInputProps}/>
+    </>);
+};

package/source/file-upload/file-upload-item-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [FileUploadItemProvider, useFileUploadItemContext] = createContext({
+    hookName: 'useFileUploadItemContext',
+    providerName: '<FileUploadItemProvider />',
+});

package/source/file-upload/file-upload-item-delete-trigger.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemDeleteTrigger = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(() => api().getItemDeleteTriggerProps(item), props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/file-upload/file-upload-item-group.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useFileUploadContext } from './file-upload-context';
+export const FileUploadItemGroup = (props) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().itemGroupProps, props);
+    const getChildren = () => runIfFn(props.children, () => api().files);
+    return <ark.ul {...mergedProps}>{getChildren()}</ark.ul>;
+};

package/source/file-upload/file-upload-item-name.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { children } from 'solid-js';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemName = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(() => api().getItemNameProps(item), props);
+    const getChildren = children(() => props.children);
+    return <ark.div {...mergedProps}>{getChildren() || item.file.name}</ark.div>;
+};

package/source/file-upload/file-upload-item-preview-image.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSignal } from 'solid-js';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemPreviewImage = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const [url, setUrl] = createSignal('');
+    api().createFileUrl(item.file, (url) => setUrl(url));
+    const mergedProps = mergeProps(api().getItemPreviewImageProps({ ...item, url: url() }), props);
+    return <ark.img {...mergedProps}/>;
+};

package/source/file-upload/file-upload-item-preview.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemPreview = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(() => api().getItemPreviewProps(item), props);
+    if (!item.file.type.match(props.type ?? '.*'))
+        return null;
+    return <ark.div {...mergedProps}/>;
+};

package/source/file-upload/file-upload-item-size-text.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { children } from 'solid-js';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemSizeText = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(() => api().getItemSizeTextProps(item), props);
+    const getChildren = children(() => props.children);
+    return <ark.div {...mergedProps}>{getChildren() || api().getFileSize(item.file)}</ark.div>;
+};

package/source/file-upload/file-upload-item.jsx

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useFileUploadContext } from './file-upload-context';
+import { FileUploadItemProvider } from './file-upload-item-context';
+export const FileUploadItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['file']);
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    const getChildren = () => runIfFn(localProps.children);
+    return (<FileUploadItemProvider value={itemProps}>
+      <ark.li {...mergedProps}>{getChildren()}</ark.li>
+    </FileUploadItemProvider>);
+};

package/source/file-upload/file-upload-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+export const FileUploadLabel = (props) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/file-upload/file-upload-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+export const FileUploadTrigger = (props) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/file-upload/file-upload.jsx

@@ -0,0 +1,34 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { FileUploadProvider } from './file-upload-context';
+import { useFileUpload } from './use-file-upload';
+export const FileUpload = (props) => {
+    const [fileUploadProps, localProps] = createSplitProps()(props, [
+        'accept',
+        'allowDrop',
+        'dir',
+        'disabled',
+        'files',
+        'getRootNode',
+        'id',
+        'ids',
+        'locale',
+        'maxFiles',
+        'maxFileSize',
+        'minFileSize',
+        'name',
+        'onFileAccept',
+        'onFileReject',
+        'onFilesChange',
+        'translations',
+        'validate',
+    ]);
+    const api = useFileUpload(fileUploadProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<FileUploadProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </FileUploadProvider>);
+};

package/source/file-upload/index.js

@@ -0,0 +1,26 @@
+import { FileUpload as FileUploadRoot } from './file-upload';
+import { useFileUploadContext } from './file-upload-context';
+import { FileUploadDropzone } from './file-upload-dropzone';
+import { FileUploadItem } from './file-upload-item';
+import { FileUploadItemDeleteTrigger, } from './file-upload-item-delete-trigger';
+import { FileUploadItemGroup } from './file-upload-item-group';
+import { FileUploadItemName } from './file-upload-item-name';
+import { FileUploadItemPreview } from './file-upload-item-preview';
+import { FileUploadItemPreviewImage, } from './file-upload-item-preview-image';
+import { FileUploadItemSizeText, } from './file-upload-item-size-text';
+import { FileUploadLabel } from './file-upload-label';
+import { FileUploadTrigger } from './file-upload-trigger';
+const FileUpload = Object.assign(FileUploadRoot, {
+    Root: FileUploadRoot,
+    Dropzone: FileUploadDropzone,
+    Item: FileUploadItem,
+    ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+    ItemGroup: FileUploadItemGroup,
+    ItemName: FileUploadItemName,
+    ItemPreview: FileUploadItemPreview,
+    ItemPreviewImage: FileUploadItemPreviewImage,
+    ItemSizeText: FileUploadItemSizeText,
+    Label: FileUploadLabel,
+    Trigger: FileUploadTrigger,
+});
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };