@ark-ui/solid 3.0.2 → 3.2.0

package/dist/source/components/combobox/combobox-root-provider.jsx

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { ComboboxProvider } from './use-combobox-context';
+export const ComboboxRootProvider = (props) => {
+    const [presenceProps, comboboxProps] = splitPresenceProps(props);
+    const [{ value: combobox }, localProps] = createSplitProps()(comboboxProps, ['value']);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: combobox().open })));
+    const mergedProps = mergeProps(() => combobox().getRootProps(), localProps);
+    return (<ComboboxProvider value={combobox}>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}/>
+      </PresenceProvider>
+    </ComboboxProvider>);
+};

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

@@ -52,7 +52,7 @@ export const ComboboxRoot = (props) => {
     ]);
     const api = useCombobox(useComboboxProps);
     const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().open })));
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<ComboboxProvider value={api}>
       <PresenceProvider value={apiPresence}>
         <ark.div {...mergedProps}/>

package/dist/source/components/combobox/combobox.js

@@ -12,4 +12,5 @@ export { ComboboxItemText as ItemText, } from './combobox-item-text';
 export { ComboboxLabel as Label } from './combobox-label';
 export { ComboboxPositioner as Positioner, } from './combobox-positioner';
 export { ComboboxRoot as Root } from './combobox-root';
+export { ComboboxRootProvider as RootProvider, } from './combobox-root-provider';
 export { ComboboxTrigger as Trigger, } from './combobox-trigger';

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

@@ -12,7 +12,9 @@ export { ComboboxItemText } from './combobox-item-text';
 export { ComboboxLabel } from './combobox-label';
 export { ComboboxPositioner } from './combobox-positioner';
 export { ComboboxRoot } from './combobox-root';
+export { ComboboxRootProvider } from './combobox-root-provider';
 export { ComboboxTrigger } from './combobox-trigger';
+export { useCombobox } from './use-combobox';
 export { useComboboxContext } from './use-combobox-context';
 export { useComboboxItemContext } from './use-combobox-item-context';
 export * as Combobox from './combobox';

package/dist/source/components/date-picker/date-picker-clear-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerClearTrigger = (props) => {
     const api = useDatePickerContext();
-    const mergedProps = mergeProps(() => api().clearTriggerProps, props);
+    const mergedProps = mergeProps(() => api().getClearTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

package/dist/source/components/date-picker/date-picker-content.jsx

@@ -6,7 +6,7 @@ import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerContent = (props) => {
     const api = useDatePickerContext();
     const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    const mergedProps = mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
     return (<Show when={!presenceApi().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

package/dist/source/components/date-picker/date-picker-control.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerControl = (props) => {
     const api = useDatePickerContext();
-    const mergedProps = mergeProps(() => api().controlProps, props);
+    const mergedProps = mergeProps(() => api().getControlProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/date-picker/date-picker-label.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerLabel = (props) => {
     const api = useDatePickerContext();
-    const mergedProps = mergeProps(() => api().labelProps, props);
+    const mergedProps = mergeProps(() => api().getLabelProps(), props);
     return <ark.label {...mergedProps}/>;
 };

package/dist/source/components/date-picker/date-picker-month-select.jsx

@@ -3,7 +3,7 @@ import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerMonthSelect = (props) => {
     const api = useDatePickerContext();
-    const mergedProps = mergeProps(() => api().monthSelectProps, props);
+    const mergedProps = mergeProps(() => api().getMonthSelectProps(), props);
     return (<ark.select {...mergedProps}>
       {api()
             .getMonths()

package/dist/source/components/date-picker/date-picker-positioner.jsx

@@ -6,7 +6,7 @@ import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerPositioner = (props) => {
     const api = useDatePickerContext();
     const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().positionerProps, props);
+    const mergedProps = mergeProps(() => api().getPositionerProps(), props);
     return (<Show when={!presenceApi().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

package/dist/source/components/date-picker/date-picker-range-text.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerRangeText = (props) => {
     const api = useDatePickerContext();
-    const mergedProps = mergeProps(() => api().rangeTextProps, props);
+    const mergedProps = mergeProps(() => api().getRangeTextProps(), props);
     return <ark.div {...mergedProps}>{api().visibleRangeText.start}</ark.div>;
 };

package/dist/source/components/date-picker/date-picker-root-provider.jsx

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { DatePickerProvider } from './use-date-picker-context';
+export const DatePickerRootProvider = (props) => {
+    const [presenceProps, datePickerProps] = splitPresenceProps(props);
+    const [{ value: datePicker }, localProps] = createSplitProps()(datePickerProps, ['value']);
+    const presence = usePresence(mergeProps(presenceProps, () => ({ present: datePicker().open })));
+    const mergedProps = mergeProps(() => datePicker().getRootProps(), localProps);
+    return (<DatePickerProvider value={datePicker}>
+      <PresenceProvider value={presence}>
+        <ark.div {...mergedProps}/>
+      </PresenceProvider>
+    </DatePickerProvider>);
+};

package/dist/source/components/date-picker/date-picker-root.jsx

@@ -40,7 +40,7 @@ export const DatePickerRoot = (props) => {
     ]);
     const api = useDatePicker(useDatePickerProps);
     const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().open })));
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<DatePickerProvider value={api}>
       <PresenceProvider value={apiPresence}>
         <ark.div {...mergedProps}/>

package/dist/source/components/date-picker/date-picker-table-cell-trigger.jsx

@@ -1,4 +1,5 @@
 import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
 import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 import { useDatePickerTableCellContext } from './use-date-picker-table-cell-props-context';
@@ -7,12 +8,16 @@ export const DatePickerTableCellTrigger = (props) => {
     const api = useDatePickerContext();
     const cellProps = useDatePickerTableCellContext();
     const viewProps = useDatePickerViewContext();
-    const triggerProps = {
-        day: api().getDayTableCellTriggerProps,
-        month: api().getMonthTableCellTriggerProps,
-        year: api().getYearTableCellTriggerProps,
-        // @ts-expect-error value is number filter
-    }[viewProps.view](cellProps);
-    const mergedProps = mergeProps(() => triggerProps, props);
-    return <ark.button {...mergedProps}/>;
+    const triggerProps = createMemo(() => {
+        const viewMap = {
+            day: api().getDayTableCellTriggerProps,
+            month: api().getMonthTableCellTriggerProps,
+            year: api().getYearTableCellTriggerProps,
+        };
+        const viewFn = viewMap[viewProps.view];
+        // @ts-expect-error
+        return viewFn(cellProps);
+    });
+    const mergedProps = mergeProps(triggerProps, props);
+    return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/date-picker/date-picker-table-cell.jsx

@@ -1,4 +1,5 @@
 import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
 import { createSplitProps } from '../../utils/create-split-props';
 import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
@@ -13,13 +14,17 @@ export const DatePickerTableCell = (props) => {
     ]);
     const api = useDatePickerContext();
     const viewProps = useDatePickerViewContext();
-    const tableCellProps = {
-        day: api().getDayTableCellProps,
-        month: api().getMonthTableCellProps,
-        year: api().getYearTableCellProps,
-        // @ts-expect-error use filter guard
-    }[viewProps.view](cellProps);
-    const mergedProps = mergeProps(() => tableCellProps, localProps);
+    const tableCellProps = createMemo(() => {
+        const viewMap = {
+            day: api().getDayTableCellProps,
+            month: api().getMonthTableCellProps,
+            year: api().getYearTableCellProps,
+        };
+        const viewFn = viewMap[viewProps.view];
+        // @ts-expect-error
+        return viewFn(cellProps);
+    });
+    const mergedProps = mergeProps(tableCellProps, localProps);
     return (<DatePickerTableCellProvider value={cellProps}>
       <ark.td {...mergedProps}/>
     </DatePickerTableCellProvider>);

package/dist/source/components/date-picker/date-picker-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerTrigger = (props) => {
     const api = useDatePickerContext();
-    const mergedProps = mergeProps(() => api().triggerProps, props);
+    const mergedProps = mergeProps(() => api().getTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

package/dist/source/components/date-picker/date-picker-year-select.jsx

@@ -3,7 +3,7 @@ import { ark } from '../factory';
 import { useDatePickerContext } from './use-date-picker-context';
 export const DatePickerYearSelect = (props) => {
     const api = useDatePickerContext();
-    const mergedProps = mergeProps(() => api().yearSelectProps, props);
+    const mergedProps = mergeProps(() => api().getYearSelectProps(), props);
     return (<ark.select {...mergedProps}>
       {getYearsRange({ from: 1_000, to: 4_000 }).map((year) => (<option value={year}>{year}</option>))}
     </ark.select>);

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

@@ -11,6 +11,7 @@ export { DatePickerPresetTrigger as PresetTrigger, } from './date-picker-preset-
 export { DatePickerPrevTrigger as PrevTrigger, } from './date-picker-prev-trigger';
 export { DatePickerRangeText as RangeText, } from './date-picker-range-text';
 export { DatePickerRoot as Root } from './date-picker-root';
+export { DatePickerRootProvider as RootProvider, } from './date-picker-root-provider';
 export { DatePickerTable as Table, } from './date-picker-table';
 export { DatePickerTableBody as TableBody, } from './date-picker-table-body';
 export { DatePickerTableCell as TableCell, } from './date-picker-table-cell';

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

@@ -11,6 +11,7 @@ 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 { DatePickerRootProvider, } from './date-picker-root-provider';
 export { DatePickerTable } from './date-picker-table';
 export { DatePickerTableBody } from './date-picker-table-body';
 export { DatePickerTableCell } from './date-picker-table-cell';
@@ -23,5 +24,6 @@ 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 { useDatePicker } from './use-date-picker';
 export { useDatePickerContext } from './use-date-picker-context';
 export * as DatePicker from './date-picker';

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

@@ -2,4 +2,6 @@ import { createContext } from '../../utils/create-context';
 export const [DatePickerViewProvider, useDatePickerViewContext] = createContext({
     hookName: 'useDatePickerViewContext',
     providerName: '<DatePickerViewProvider />',
+    strict: false,
+    defaultValue: { view: 'day' },
 });

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

@@ -8,7 +8,7 @@ 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);
+    const mergedProps = mergeProps(() => api().getBackdropProps(), () => presenceApi().presenceProps, props);
     return (<Show when={!presenceApi().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

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

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

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

@@ -6,7 +6,7 @@ import { useDialogContext } from './use-dialog-context';
 export const DialogContent = (props) => {
     const api = useDialogContext();
     const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    const mergedProps = mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
     return (<Show when={!presenceApi().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDialogContext } from './use-dialog-context';
 export const DialogDescription = (props) => {
     const dialog = useDialogContext();
-    const mergedProps = mergeProps(() => dialog().descriptionProps, props);
+    const mergedProps = mergeProps(() => dialog().getDescriptionProps(), props);
     return <ark.div {...mergedProps}/>;
 };

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

@@ -6,7 +6,7 @@ import { useDialogContext } from './use-dialog-context';
 export const DialogPositioner = (props) => {
     const api = useDialogContext();
     const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().positionerProps, props);
+    const mergedProps = mergeProps(() => api().getPositionerProps(), props);
     return (<Show when={!presenceApi().unmounted}>
       <ark.div {...mergedProps}/>
     </Show>);

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

@@ -0,0 +1,14 @@
+import { mergeProps } from '@zag-js/solid';
+import { RenderStrategyProvider, splitRenderStrategyProps } from '../../utils/render-strategy';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { DialogProvider } from './use-dialog-context';
+export const DialogRootProvider = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: localProps.value().open })));
+    return (<DialogProvider value={localProps.value}>
+      <RenderStrategyProvider value={renderStrategyProps}>
+        <PresenceProvider value={apiPresence}>{localProps.children}</PresenceProvider>
+      </RenderStrategyProvider>
+    </DialogProvider>);
+};

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDialogContext } from './use-dialog-context';
 export const DialogTitle = (props) => {
     const dialog = useDialogContext();
-    const mergedProps = mergeProps(() => dialog().titleProps, props);
+    const mergedProps = mergeProps(() => dialog().getTitleProps(), props);
     return <ark.h2 {...mergedProps}/>;
 };

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

@@ -5,6 +5,6 @@ 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);
+    const mergedProps = mergeProps(() => api().getTriggerProps(), () => ({ 'aria-controls': presenceApi().unmounted && null }), props);
     return <ark.button {...mergedProps}/>;
 };

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

@@ -5,5 +5,6 @@ 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 { DialogRootProvider as RootProvider, } from './dialog-root-provider';
 export { DialogTitle as Title } from './dialog-title';
 export { DialogTrigger as Trigger } from './dialog-trigger';

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

@@ -5,7 +5,9 @@ export { DialogContext } from './dialog-context';
 export { DialogDescription } from './dialog-description';
 export { DialogPositioner } from './dialog-positioner';
 export { DialogRoot } from './dialog-root';
+export { DialogRootProvider } from './dialog-root-provider';
 export { DialogTitle } from './dialog-title';
 export { DialogTrigger } from './dialog-trigger';
+export { useDialog } from './use-dialog';
 export { useDialogContext } from './use-dialog-context';
 export * as Dialog from './dialog';

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './use-editable-context';
 export const EditableArea = (props) => {
     const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().areaProps, props);
+    const mergedProps = mergeProps(() => api().getAreaProps(), props);
     return <ark.div {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './use-editable-context';
 export const EditableCancelTrigger = (props) => {
     const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().cancelTriggerProps, props);
+    const mergedProps = mergeProps(() => api().getCancelTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './use-editable-context';
 export const EditableControl = (props) => {
     const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().controlProps, props);
+    const mergedProps = mergeProps(() => api().getControlProps(), props);
     return <ark.div {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './use-editable-context';
 export const EditableEditTrigger = (props) => {
     const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().editTriggerProps, props);
+    const mergedProps = mergeProps(() => api().getEditTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './use-editable-context';
 export const EditableInput = (props) => {
     const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().inputProps, props);
+    const mergedProps = mergeProps(() => api().getInputProps(), props);
     return <ark.input {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './use-editable-context';
 export const EditableLabel = (props) => {
     const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().labelProps, props);
+    const mergedProps = mergeProps(() => api().getLabelProps(), props);
     return <ark.label {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './use-editable-context';
 export const EditablePreview = (props) => {
     const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().previewProps, props);
+    const mergedProps = mergeProps(() => api().getPreviewProps(), props);
     return <ark.span {...mergedProps}/>;
 };

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

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { EditableProvider } from './use-editable-context';
+export const EditableRootProvider = (props) => {
+    const [{ value: editable }, localProps] = createSplitProps()(props, ['value']);
+    const mergedProps = mergeProps(() => editable().getRootProps(), localProps);
+    return (<EditableProvider value={editable}>
+      <ark.div {...mergedProps}/>
+    </EditableProvider>);
+};

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

@@ -32,7 +32,7 @@ export const EditableRoot = (props) => {
         'value',
     ]);
     const api = useEditable(useEditableProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
     return (<EditableProvider value={api}>
       <ark.div {...mergedProps}/>
     </EditableProvider>);

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useEditableContext } from './use-editable-context';
 export const EditableSubmitTrigger = (props) => {
     const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().submitTriggerProps, props);
+    const mergedProps = mergeProps(() => api().getSubmitTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

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

@@ -7,4 +7,5 @@ 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 { EditableRootProvider as RootProvider, } from './editable-root-provider';
 export { EditableSubmitTrigger as SubmitTrigger, } from './editable-submit-trigger';

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

@@ -7,6 +7,8 @@ export { EditableInput } from './editable-input';
 export { EditableLabel } from './editable-label';
 export { EditablePreview } from './editable-preview';
 export { EditableRoot } from './editable-root';
+export { EditableRootProvider } from './editable-root-provider';
 export { EditableSubmitTrigger } from './editable-submit-trigger';
+export { useEditable } from './use-editable';
 export { useEditableContext } from './use-editable-context';
 export * as Editable from './editable';

package/dist/source/components/factory.jsx

@@ -8,7 +8,7 @@ const withAsProp = (Component) => {
             // @ts-expect-error
             const propsFn = (userProps) => {
                 const [, restProps] = splitProps(parentProps, ['ref']);
-                return { ref: parentProps.ref, ...mergeProps(restProps, userProps) };
+                return mergeProps(restProps, userProps);
             };
             return localProps.asChild(propsFn);
         }

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useFileUploadContext } from './use-file-upload-context';
 export const FileUploadDropzone = (props) => {
     const fileUpload = useFileUploadContext();
-    const mergedProps = mergeProps(() => fileUpload().dropzoneProps, props);
+    const mergedProps = mergeProps(() => fileUpload().getDropzoneProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/file-upload/file-upload-hidden-input.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useFileUploadContext } from './use-file-upload-context';
 export const FileUploadHiddenInput = (props) => {
     const fileUpload = useFileUploadContext();
-    const mergedProps = mergeProps(() => fileUpload().hiddenInputProps, props);
+    const mergedProps = mergeProps(() => fileUpload().getHiddenInputProps(), props);
     return <ark.input {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useFileUploadContext } from './use-file-upload-context';
 export const FileUploadItemGroup = (props) => {
     const fileUpload = useFileUploadContext();
-    const mergedProps = mergeProps(() => fileUpload().itemGroupProps, props);
+    const mergedProps = mergeProps(() => fileUpload().getItemGroupProps(), props);
     return <ark.ul {...mergedProps}/>;
 };

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useFileUploadContext } from './use-file-upload-context';
 export const FileUploadLabel = (props) => {
     const fileUpload = useFileUploadContext();
-    const mergedProps = mergeProps(() => fileUpload().labelProps, props);
+    const mergedProps = mergeProps(() => fileUpload().getLabelProps(), props);
     return <ark.label {...mergedProps}/>;
 };

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

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { FileUploadProvider } from './use-file-upload-context';
+export const FileUploadRootProvider = (props) => {
+    const [{ value: fileUpload }, localProps] = createSplitProps()(props, [
+        'value',
+    ]);
+    const mergedProps = mergeProps(() => fileUpload().getRootProps(), localProps);
+    return (<FileUploadProvider value={fileUpload}>
+      <ark.div {...mergedProps}/>
+    </FileUploadProvider>);
+};

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

@@ -24,7 +24,7 @@ export const FileUploadRoot = (props) => {
         'validate',
     ]);
     const fileUpload = useFileUpload(fileUploadProps);
-    const mergedProps = mergeProps(() => fileUpload().rootProps, localProps);
+    const mergedProps = mergeProps(() => fileUpload().getRootProps(), localProps);
     return (<FileUploadProvider value={fileUpload}>
       <ark.div {...mergedProps}/>
     </FileUploadProvider>);

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

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useFileUploadContext } from './use-file-upload-context';
 export const FileUploadTrigger = (props) => {
     const fileUpload = useFileUploadContext();
-    const mergedProps = mergeProps(() => fileUpload().triggerProps, props);
+    const mergedProps = mergeProps(() => fileUpload().getTriggerProps(), props);
     return <ark.button {...mergedProps}/>;
 };

package/dist/source/components/file-upload/file-upload.js

@@ -9,5 +9,6 @@ export { FileUploadItemPreviewImage as ItemPreviewImage, } from './file-upload-i
 export { FileUploadItemSizeText as ItemSizeText, } from './file-upload-item-size-text';
 export { FileUploadLabel as Label, } from './file-upload-label';
 export { FileUploadRoot as Root } from './file-upload-root';
+export { FileUploadRootProvider as RootProvider, } from './file-upload-root-provider';
 export { FileUploadTrigger as Trigger, } from './file-upload-trigger';
 export { FileUploadHiddenInput as HiddenInput, } from './file-upload-hidden-input';

package/dist/source/components/file-upload/index.js

@@ -1,5 +1,6 @@
 export { FileUploadContext } from './file-upload-context';
 export { FileUploadDropzone } from './file-upload-dropzone';
+export { FileUploadHiddenInput } from './file-upload-hidden-input';
 export { FileUploadItem } from './file-upload-item';
 export { FileUploadItemDeleteTrigger, } from './file-upload-item-delete-trigger';
 export { FileUploadItemGroup } from './file-upload-item-group';
@@ -9,7 +10,8 @@ export { FileUploadItemPreviewImage, } from './file-upload-item-preview-image';
 export { FileUploadItemSizeText, } from './file-upload-item-size-text';
 export { FileUploadLabel } from './file-upload-label';
 export { FileUploadRoot } from './file-upload-root';
+export { FileUploadRootProvider, } from './file-upload-root-provider';
 export { FileUploadTrigger } from './file-upload-trigger';
-export { FileUploadHiddenInput } from './file-upload-hidden-input';
+export { useFileUpload } from './use-file-upload';
 export { useFileUploadContext } from './use-file-upload-context';
 export * as FileUpload from './file-upload';

package/dist/source/components/hover-card/hover-card-arrow-tip.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useHoverCardContext } from './use-hover-card-context';
 export const HoverCardArrowTip = (props) => {
     const hoverCard = useHoverCardContext();
-    const mergedProps = mergeProps(() => hoverCard().arrowTipProps, props);
+    const mergedProps = mergeProps(() => hoverCard().getArrowTipProps(), props);
     return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/hover-card/hover-card-arrow.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useHoverCardContext } from './use-hover-card-context';
 export const HoverCardArrow = (props) => {
     const hoverCard = useHoverCardContext();
-    const mergedProps = mergeProps(() => hoverCard().arrowProps, props);
+    const mergedProps = mergeProps(() => hoverCard().getArrowProps(), props);
     return <ark.div {...mergedProps}/>;
 };