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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+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 } from '../environment';
+export const useDatePicker = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const [localProps, restProps] = splitProps(props, ['value', 'focusedValue', 'min', 'max']);
+    const context = mergeProps(() => ({
+        id: createUniqueId(),
+        getRootNode,
+        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/dialog/dialog-backdrop.jsx

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

package/dist/source/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/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().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

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

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

package/dist/source/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/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().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

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

@@ -0,0 +1,39 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { RenderStrategyProvider, splitRenderStrategyProps } from '../render-strategy';
+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',
+        'closeOnEscapeKeyDown',
+        'closeOnInteractOutside',
+        'dir',
+        'finalFocusEl',
+        'getRootNode',
+        '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().isOpen })));
+    return (<DialogProvider value={api}>
+      <RenderStrategyProvider value={renderStrategyProps}>
+        <PresenceProvider value={apiPresence}>{localProps.children}</PresenceProvider>
+      </RenderStrategyProvider>
+    </DialogProvider>);
+};

package/dist/source/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/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().isUnmounted && null }), props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/dialog/dialog.jsx

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

package/dist/source/dialog/index.js

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

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

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

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

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

package/dist/source/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/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/editable/editable-context.jsx

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

package/dist/source/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/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/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/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/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/editable/editable-root.jsx

@@ -0,0 +1,40 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../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',
+        'dir',
+        'disabled',
+        'finalFocusEl',
+        'form',
+        'getRootNode',
+        '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/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/editable/editable.jsx

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

package/dist/source/editable/index.js

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

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

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

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

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

package/dist/source/environment/environment.jsx

@@ -0,0 +1,12 @@
+import { createMemo } from 'solid-js';
+import { EnvironmentProvider } from './use-environment-context';
+export const Environment = (props) => {
+    // eslint-disable-next-line prefer-const
+    let spanRef = undefined;
+    // @ts-expect-error TODO fix
+    const currentEnv = createMemo(() => () => props.value ?? spanRef?.ownerDocument ?? document);
+    return (<EnvironmentProvider value={currentEnv()}>
+      {props.children}
+      {!props.value && <span hidden ref={spanRef}/>}
+    </EnvironmentProvider>);
+};

package/dist/source/environment/index.js

@@ -0,0 +1,3 @@
+import { Environment } from './environment';
+import { useEnvironmentContext } from './use-environment-context';
+export { Environment, useEnvironmentContext };

package/dist/source/environment/use-environment-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '../create-context';
+export const [EnvironmentProvider, useEnvironmentContext] = createContext({
+    hookName: 'useEnvironmentContext',
+    providerName: '<EnvironmentProvider />',
+    strict: false,
+});

package/dist/source/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)}</>;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        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/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/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 api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().dropzoneProps, props);
+    return (<>
+      <ark.div {...mergedProps}/>
+      <input {...api().hiddenInputProps}/>
+    </>);
+};

package/dist/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 './use-file-upload-context';
+import { useFileUploadItemContext } from './use-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/dist/source/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 api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().itemGroupProps, props);
+    return <ark.ul {...mergedProps}/>;
+};

package/dist/source/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 { useFileUploadItemContext } from './use-file-upload-item-context';
+export const FileUploadItemName = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(() => api().getItemNameProps(item), props);
+    return <ark.div {...mergedProps}>{props.children || item.file.name}</ark.div>;
+};

package/dist/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 './use-file-upload-context';
+import { useFileUploadItemContext } from './use-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/dist/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 './use-file-upload-context';
+import { useFileUploadItemContext } from './use-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/dist/source/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 { useFileUploadItemContext } from './use-file-upload-item-context';
+export const FileUploadItemSizeText = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(() => api().getItemSizeTextProps(item), props);
+    return <ark.div {...mergedProps}>{props.children || api().getFileSize(item.file)}</ark.div>;
+};

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

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

package/dist/source/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 api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};