@ark-ui/solid 3.0.0-0 → 3.0.0-2

package/dist/source/components/date-picker/index.js

@@ -0,0 +1,27 @@
+export { DatePickerClearTrigger, } from './date-picker-clear-trigger';
+export { DatePickerContent } from './date-picker-content';
+export { DatePickerContext } from './date-picker-context';
+export { DatePickerControl } from './date-picker-control';
+export { DatePickerInput } from './date-picker-input';
+export { DatePickerLabel } from './date-picker-label';
+export { DatePickerMonthSelect } from './date-picker-month-select';
+export { DatePickerNextTrigger } from './date-picker-next-trigger';
+export { DatePickerPositioner } from './date-picker-positioner';
+export { DatePickerPresetTrigger, } from './date-picker-preset-trigger';
+export { DatePickerPrevTrigger } from './date-picker-prev-trigger';
+export { DatePickerRangeText } from './date-picker-range-text';
+export { DatePickerRoot } from './date-picker-root';
+export { DatePickerTable } from './date-picker-table';
+export { DatePickerTableBody } from './date-picker-table-body';
+export { DatePickerTableCell } from './date-picker-table-cell';
+export { DatePickerTableCellTrigger, } from './date-picker-table-cell-trigger';
+export { DatePickerTableHead } from './date-picker-table-head';
+export { DatePickerTableHeader } from './date-picker-table-header';
+export { DatePickerTableRow } from './date-picker-table-row';
+export { DatePickerTrigger } from './date-picker-trigger';
+export { DatePickerView } from './date-picker-view';
+export { DatePickerViewControl } from './date-picker-view-control';
+export { DatePickerViewTrigger } from './date-picker-view-trigger';
+export { DatePickerYearSelect } from './date-picker-year-select';
+export { useDatePickerContext } from './use-date-picker-context';
+export * as DatePicker from './date-picker';

package/dist/source/components/date-picker/use-date-picker-context.js

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

package/dist/source/components/date-picker/use-date-picker-table-cell-props-context.js

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

package/dist/source/components/date-picker/use-date-picker-table-props-context.js

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

package/dist/source/components/date-picker/use-date-picker-view-props-context.js

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

package/dist/source/components/date-picker/use-date-picker.js

@@ -0,0 +1,21 @@
+import * as datePicker from '@zag-js/date-picker';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId, splitProps } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const useDatePicker = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const [localProps, restProps] = splitProps(props, ['value', 'focusedValue', 'min', 'max']);
+    const context = mergeProps(() => ({
+        id: createUniqueId(),
+        dir: locale().dir,
+        getRootNode,
+        'open.controlled': props.open !== undefined,
+        focusedValue: localProps.focusedValue ? datePicker.parse(localProps.focusedValue) : undefined,
+        value: localProps.value ? datePicker.parse(localProps.value) : undefined,
+        max: localProps.max ? datePicker.parse(localProps.max) : undefined,
+        min: localProps.min ? datePicker.parse(localProps.min) : undefined,
+    }), restProps);
+    const [state, send] = useMachine(datePicker.machine(context), { context });
+    return createMemo(() => datePicker.connect(state, send, normalizeProps));
+};

package/dist/source/components/dialog/dialog-backdrop.jsx

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { useRenderStrategyContext } from '../../utils/render-strategy';
+import { ark } from '../factory';
+import { usePresence } from '../presence';
+import { useDialogContext } from './use-dialog-context';
+export const DialogBackdrop = (props) => {
+    const api = useDialogContext();
+    const renderStrategyProps = useRenderStrategyContext();
+    const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({ present: api().open })));
+    const mergedProps = mergeProps(() => api().backdropProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

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

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDialogContext } from './use-dialog-context';
+export const DialogCloseTrigger = (props) => {
+    const dialog = useDialogContext();
+    const mergedProps = mergeProps(() => dialog().closeTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/components/dialog/dialog-content.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useDialogContext } from './use-dialog-context';
+export const DialogContent = (props) => {
+    const api = useDialogContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/dialog/dialog-context.jsx

@@ -0,0 +1,2 @@
+import { useDialogContext } from './use-dialog-context';
+export const DialogContext = (props) => props.children(useDialogContext());

package/dist/source/components/dialog/dialog-description.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDialogContext } from './use-dialog-context';
+export const DialogDescription = (props) => {
+    const dialog = useDialogContext();
+    const mergedProps = mergeProps(() => dialog().descriptionProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/components/dialog/dialog-positioner.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useDialogContext } from './use-dialog-context';
+export const DialogPositioner = (props) => {
+    const api = useDialogContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/dialog/dialog-root.jsx

@@ -0,0 +1,37 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { RenderStrategyProvider, splitRenderStrategyProps } from '../../utils/render-strategy';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { useDialog } from './use-dialog';
+import { DialogProvider } from './use-dialog-context';
+export const DialogRoot = (props) => {
+    const [presenceProps, dialogProps] = splitPresenceProps(props);
+    const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
+    const [useDialogProps, localProps] = createSplitProps()(dialogProps, [
+        'aria-label',
+        'closeOnEscape',
+        'closeOnInteractOutside',
+        'finalFocusEl',
+        'id',
+        'ids',
+        'initialFocusEl',
+        'modal',
+        'onEscapeKeyDown',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'open',
+        'preventScroll',
+        'restoreFocus',
+        'role',
+        'trapFocus',
+    ]);
+    const api = useDialog(useDialogProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().open })));
+    return (<DialogProvider value={api}>
+      <RenderStrategyProvider value={renderStrategyProps}>
+        <PresenceProvider value={apiPresence}>{localProps.children}</PresenceProvider>
+      </RenderStrategyProvider>
+    </DialogProvider>);
+};

package/dist/source/components/dialog/dialog-title.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDialogContext } from './use-dialog-context';
+export const DialogTitle = (props) => {
+    const dialog = useDialogContext();
+    const mergedProps = mergeProps(() => dialog().titleProps, props);
+    return <ark.h2 {...mergedProps}/>;
+};

package/dist/source/components/dialog/dialog-trigger.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { useDialogContext } from './use-dialog-context';
+export const DialogTrigger = (props) => {
+    const api = useDialogContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().triggerProps, () => ({ 'aria-controls': presenceApi().unmounted && null }), props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/components/dialog/dialog.js

@@ -0,0 +1,9 @@
+export { DialogBackdrop as Backdrop, } from './dialog-backdrop';
+export { DialogCloseTrigger as CloseTrigger, } from './dialog-close-trigger';
+export { DialogContent as Content } from './dialog-content';
+export { DialogContext as Context } from './dialog-context';
+export { DialogDescription as Description, } from './dialog-description';
+export { DialogPositioner as Positioner, } from './dialog-positioner';
+export { DialogRoot as Root } from './dialog-root';
+export { DialogTitle as Title } from './dialog-title';
+export { DialogTrigger as Trigger } from './dialog-trigger';

package/dist/source/components/dialog/index.js

@@ -0,0 +1,11 @@
+export { DialogBackdrop } from './dialog-backdrop';
+export { DialogCloseTrigger } from './dialog-close-trigger';
+export { DialogContent } from './dialog-content';
+export { DialogContext } from './dialog-context';
+export { DialogDescription } from './dialog-description';
+export { DialogPositioner } from './dialog-positioner';
+export { DialogRoot } from './dialog-root';
+export { DialogTitle } from './dialog-title';
+export { DialogTrigger } from './dialog-trigger';
+export { useDialogContext } from './use-dialog-context';
+export * as Dialog from './dialog';

package/dist/source/components/dialog/use-dialog-context.js

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

package/dist/source/components/dialog/use-dialog.js

@@ -0,0 +1,16 @@
+import * as dialog from '@zag-js/dialog';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const useDialog = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({
+        id: createUniqueId(),
+        dir: locale().dir,
+        getRootNode,
+        'open.controlled': props.open !== undefined,
+    }, props);
+    const [state, send] = useMachine(dialog.machine(context), { context });
+    return createMemo(() => dialog.connect(state, send, normalizeProps));
+};

package/dist/source/components/editable/editable-area.jsx

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

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

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

package/dist/source/components/editable/editable-context.jsx

@@ -0,0 +1,2 @@
+import { useEditableContext } from './use-editable-context';
+export const EditableContext = (props) => props.children(useEditableContext());

package/dist/source/components/editable/editable-control.jsx

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

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

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

package/dist/source/components/editable/editable-input.jsx

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

package/dist/source/components/editable/editable-label.jsx

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

package/dist/source/components/editable/editable-preview.jsx

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

package/dist/source/components/editable/editable-root.jsx

@@ -0,0 +1,38 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useEditable } from './use-editable';
+import { EditableProvider } from './use-editable-context';
+export const EditableRoot = (props) => {
+    const [useEditableProps, localProps] = createSplitProps()(props, [
+        'activationMode',
+        'autoResize',
+        'disabled',
+        'finalFocusEl',
+        'form',
+        'id',
+        'ids',
+        'invalid',
+        'maxLength',
+        'name',
+        'onEdit',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onPointerDownOutside',
+        'onValueChange',
+        'onValueCommit',
+        'onValueRevert',
+        'placeholder',
+        'readOnly',
+        'selectOnFocus',
+        'startWithEditView',
+        'submitMode',
+        'translations',
+        'value',
+    ]);
+    const api = useEditable(useEditableProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<EditableProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </EditableProvider>);
+};

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

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

package/dist/source/components/editable/editable.js

@@ -0,0 +1,10 @@
+export { EditableArea as Area } from './editable-area';
+export { EditableCancelTrigger as CancelTrigger, } from './editable-cancel-trigger';
+export { EditableContext as Context, } from './editable-context';
+export { EditableControl as Control, } from './editable-control';
+export { EditableEditTrigger as EditTrigger, } from './editable-edit-trigger';
+export { EditableInput as Input } from './editable-input';
+export { EditableLabel as Label } from './editable-label';
+export { EditablePreview as Preview, } from './editable-preview';
+export { EditableRoot as Root } from './editable-root';
+export { EditableSubmitTrigger as SubmitTrigger, } from './editable-submit-trigger';

package/dist/source/components/editable/index.js

@@ -0,0 +1,12 @@
+export { EditableArea } from './editable-area';
+export { EditableCancelTrigger } from './editable-cancel-trigger';
+export { EditableContext } from './editable-context';
+export { EditableControl } from './editable-control';
+export { EditableEditTrigger } from './editable-edit-trigger';
+export { EditableInput } from './editable-input';
+export { EditableLabel } from './editable-label';
+export { EditablePreview } from './editable-preview';
+export { EditableRoot } from './editable-root';
+export { EditableSubmitTrigger } from './editable-submit-trigger';
+export { useEditableContext } from './use-editable-context';
+export * as Editable from './editable';

package/dist/source/components/editable/use-editable-context.js

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

package/dist/source/components/editable/use-editable.js

@@ -0,0 +1,11 @@
+import * as editable from '@zag-js/editable';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const useEditable = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const [state, send] = useMachine(editable.machine(context), { context });
+    return createMemo(() => editable.connect(state, send, normalizeProps));
+};

package/dist/source/components/factory.jsx

@@ -0,0 +1,38 @@
+import { mergeProps } from '@zag-js/solid';
+import { splitProps } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+const withAsProp = (Component) => {
+    const ArkComponent = (props) => {
+        const [localProps, otherProps] = splitProps(props, ['asChild']);
+        if (localProps.asChild) {
+            if (typeof otherProps.children !== 'function') {
+                throw new Error('Children must be a function');
+            }
+            // @ts-expect-error TODO improve
+            const fn = (userProps) => {
+                const [, restProps] = splitProps(otherProps, ['children', 'ref']);
+                return { ref: otherProps.ref, ...mergeProps(restProps, userProps) };
+            };
+            return <>{otherProps.children(fn)}</>;
+        }
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        return <Dynamic component={Component} {...otherProps}/>;
+    };
+    return ArkComponent;
+};
+function jsxFactory() {
+    const cache = new Map();
+    return new Proxy(withAsProp, {
+        apply(_target, _thisArg, argArray) {
+            return withAsProp(argArray[0]);
+        },
+        get(_, element) {
+            const asElement = element;
+            if (!cache.has(asElement)) {
+                cache.set(asElement, withAsProp(asElement));
+            }
+            return cache.get(asElement);
+        },
+    });
+}
+export const ark = jsxFactory();

package/dist/source/components/file-upload/file-upload-context.jsx

@@ -0,0 +1,2 @@
+import { useFileUploadContext } from './use-file-upload-context';
+export const FileUploadContext = (props) => props.children(useFileUploadContext());

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

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

package/dist/source/components/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 './use-file-upload-context';
+import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context';
+export const FileUploadItemDeleteTrigger = (props) => {
+    const fileUpload = useFileUploadContext();
+    const itemProps = useFileUploadItemPropsContext();
+    const mergedProps = mergeProps(() => fileUpload().getItemDeleteTriggerProps(itemProps), props);
+    return <ark.button {...mergedProps}/>;
+};

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

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './use-file-upload-context';
+export const FileUploadItemGroup = (props) => {
+    const fileUpload = useFileUploadContext();
+    const mergedProps = mergeProps(() => fileUpload().itemGroupProps, props);
+    return <ark.ul {...mergedProps}/>;
+};

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

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

package/dist/source/components/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 './use-file-upload-context';
+import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context';
+export const FileUploadItemPreviewImage = (props) => {
+    const fileUpload = useFileUploadContext();
+    const itemProps = useFileUploadItemPropsContext();
+    const [url, setUrl] = createSignal('');
+    fileUpload().createFileUrl(itemProps.file, (url) => setUrl(url));
+    const mergedProps = mergeProps(fileUpload().getItemPreviewImageProps({ ...itemProps, url: url() }), props);
+    return <ark.img {...mergedProps}/>;
+};

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useFileUploadContext } from './use-file-upload-context';
+import { FileUploadItemPropsProvider } from './use-file-upload-item-props-context';
+export const FileUploadItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['file']);
+    const fileUpload = useFileUploadContext();
+    const mergedProps = mergeProps(() => fileUpload().getItemProps(itemProps), localProps);
+    return (<FileUploadItemPropsProvider value={itemProps}>
+      <ark.li {...mergedProps}/>
+    </FileUploadItemPropsProvider>);
+};

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

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

package/dist/source/components/file-upload/file-upload-root.jsx

@@ -0,0 +1,31 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useFileUpload } from './use-file-upload';
+import { FileUploadProvider } from './use-file-upload-context';
+export const FileUploadRoot = (props) => {
+    const [fileUploadProps, localProps] = createSplitProps()(props, [
+        'accept',
+        'allowDrop',
+        'capture',
+        'directory',
+        'disabled',
+        'id',
+        'ids',
+        'locale',
+        'maxFiles',
+        'maxFileSize',
+        'minFileSize',
+        'name',
+        'onFileAccept',
+        'onFileChange',
+        'onFileReject',
+        'translations',
+        'validate',
+    ]);
+    const fileUpload = useFileUpload(fileUploadProps);
+    const mergedProps = mergeProps(() => fileUpload().rootProps, localProps);
+    return (<FileUploadProvider value={fileUpload}>
+      <ark.div {...mergedProps}/>
+    </FileUploadProvider>);
+};

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

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