@ark-ui/solid 2.2.0 → 3.0.0-1

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

@@ -0,0 +1,20 @@
+import * as combobox from '@zag-js/combobox';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { useEnvironmentContext } from '../environment';
+export const useCombobox = (props) => {
+    const [collectionOptions, rest] = createSplitProps()(props, [
+        'isItemDisabled',
+        'itemToValue',
+        'itemToString',
+        'items',
+    ]);
+    const collection = () => combobox.collection(collectionOptions);
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode, collection: collection() }, rest);
+    const [state, send] = useMachine(combobox.machine(context), {
+        context,
+    });
+    return createMemo(() => combobox.connect(state, send, normalizeProps));
+};

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

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+export const DatePickerClearTrigger = (props) => {
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(() => api().clearTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/date-picker/date-picker-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 { useDatePickerContext } from './use-date-picker-context';
+export const DatePickerContent = (props) => {
+    const api = useDatePickerContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

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

@@ -0,0 +1,2 @@
+import { useDatePickerContext } from './use-date-picker-context';
+export const DatePickerContext = (props) => props.children(useDatePickerContext());

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

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

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+export const DatePickerInput = (props) => {
+    const [inputProps, localProps] = createSplitProps()(props, ['index']);
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(() => api().getInputProps(inputProps), localProps);
+    return <ark.input {...mergedProps}/>;
+};

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

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

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

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+export const DatePickerMonthSelect = (props) => {
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(() => api().monthSelectProps, props);
+    return (<ark.select {...mergedProps}>
+      {api()
+            .getMonths()
+            .map((month) => (<option value={month.value}>{month.label}</option>))}
+    </ark.select>);
+};

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { useDatePickerViewContext } from './use-date-picker-view-context';
+export const DatePickerNextTrigger = (props) => {
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const mergedProps = mergeProps(() => api().getNextTriggerProps(viewProps), props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/date-picker/date-picker-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 { useDatePickerContext } from './use-date-picker-context';
+export const DatePickerPositioner = (props) => {
+    const api = useDatePickerContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+export const DatePickerPresetTrigger = (props) => {
+    const [presetTriggerProps, localProps] = createSplitProps()(props, ['value']);
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
+    return <ark.button {...mergedProps}/>;
+};

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { useDatePickerViewContext } from './use-date-picker-view-context';
+export const DatePickerPrevTrigger = (props) => {
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const mergedProps = mergeProps(() => api().getPrevTriggerProps(viewProps), props);
+    return <ark.button {...mergedProps}/>;
+};

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

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

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

@@ -0,0 +1,49 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { useDatePicker } from './use-date-picker';
+import { DatePickerProvider } from './use-date-picker-context';
+export const DatePickerRoot = (props) => {
+    const [presenceProps, datePickerProps] = splitPresenceProps(props);
+    const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, [
+        'closeOnSelect',
+        'dir',
+        'disabled',
+        'fixedWeeks',
+        'focusedValue',
+        'format',
+        'getRootNode',
+        'id',
+        'ids',
+        'isDateUnavailable',
+        'isDateUnavailable',
+        'locale',
+        'max',
+        'min',
+        'modal',
+        'name',
+        'numOfMonths',
+        'onFocusChange',
+        'onOpenChange',
+        'onValueChange',
+        'onViewChange',
+        'open',
+        'positioning',
+        'readOnly',
+        'selectionMode',
+        'startOfWeek',
+        'timeZone',
+        'translations',
+        'value',
+        'view',
+    ]);
+    const api = useDatePicker(useDatePickerProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<DatePickerProvider value={api}>
+      <PresenceProvider value={apiPresence}>
+        <ark.div {...mergedProps}/>
+      </PresenceProvider>
+    </DatePickerProvider>);
+};

package/dist/source/date-picker/date-picker-table-body.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { useDatePickerTableContext } from './use-date-picker-table-context';
+export const DatePickerTableBody = (props) => {
+    const api = useDatePickerContext();
+    const tableProps = useDatePickerTableContext();
+    const mergedProps = mergeProps(() => api().getTableBodyProps(tableProps), props);
+    return <ark.tbody {...mergedProps}/>;
+};

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

@@ -0,0 +1,18 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { useDatePickerTableCellContext } from './use-date-picker-table-cell-context';
+import { useDatePickerViewContext } from './use-date-picker-view-context';
+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}/>;
+};

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

@@ -0,0 +1,26 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { DatePickerTableCellProvider, } from './use-date-picker-table-cell-context';
+import { useDatePickerViewContext } from './use-date-picker-view-context';
+export const DatePickerTableCell = (props) => {
+    const [cellProps, localProps] = createSplitProps()(props, [
+        'disabled',
+        'value',
+        'visibleRange',
+        'columns',
+    ]);
+    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);
+    return (<DatePickerTableCellProvider value={cellProps}>
+      <ark.td {...mergedProps}/>
+    </DatePickerTableCellProvider>);
+};

package/dist/source/date-picker/date-picker-table-head.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { useDatePickerTableContext } from './use-date-picker-table-context';
+export const DatePickerTableHead = (props) => {
+    const api = useDatePickerContext();
+    const tableProps = useDatePickerTableContext();
+    const mergedProps = mergeProps(() => api().getTableHeadProps(tableProps), props);
+    return <ark.thead {...mergedProps}/>;
+};

package/dist/source/date-picker/date-picker-table-header.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { useDatePickerTableContext } from './use-date-picker-table-context';
+export const DatePickerTableHeader = (props) => {
+    const api = useDatePickerContext();
+    const tableProps = useDatePickerTableContext();
+    const mergedProps = mergeProps(() => api().getTableHeaderProps(tableProps), props);
+    return <ark.th {...mergedProps}/>;
+};

package/dist/source/date-picker/date-picker-table-row.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { useDatePickerTableContext } from './use-date-picker-table-context';
+export const DatePickerTableRow = (props) => {
+    const api = useDatePickerContext();
+    const tableProps = useDatePickerTableContext();
+    const mergedProps = mergeProps(() => api().getTableRowProps(tableProps), props);
+    return <ark.tr {...mergedProps}/>;
+};

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

@@ -0,0 +1,19 @@
+import { mergeProps } from '@zag-js/solid';
+import { createUniqueId } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { DatePickerTableProvider } from './use-date-picker-table-context';
+import { useDatePickerViewContext } from './use-date-picker-view-context';
+export const DatePickerTable = (props) => {
+    const [{ columns }, localProps] = createSplitProps()(props, [
+        'columns',
+    ]);
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const tableProps = { columns, id: createUniqueId(), ...viewProps };
+    const mergedProps = mergeProps(() => api().getTableProps(tableProps), localProps);
+    return (<DatePickerTableProvider value={tableProps}>
+      <ark.table {...mergedProps}/>
+    </DatePickerTableProvider>);
+};

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

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+export const DatePickerTrigger = (props) => {
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(() => api().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { useDatePickerViewContext } from './use-date-picker-view-context';
+export const DatePickerViewControl = (props) => {
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const mergedProps = mergeProps(() => api().getViewControlProps(viewProps), props);
+    return <ark.div {...mergedProps}/>;
+};

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { useDatePickerViewContext } from './use-date-picker-view-context';
+export const DatePickerViewTrigger = (props) => {
+    const api = useDatePickerContext();
+    const viewProps = useDatePickerViewContext();
+    const mergedProps = mergeProps(() => api().getViewTriggerProps(viewProps), props);
+    return <ark.button {...mergedProps}/>;
+};

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

@@ -0,0 +1,14 @@
+import { datePickerAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+import { DatePickerViewProvider } from './use-date-picker-view-context';
+export const DatePickerView = (props) => {
+    const [viewProps, localProps] = createSplitProps()(props, ['view']);
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(() => datePickerAnatomy.build().view.attrs, localProps);
+    return (<DatePickerViewProvider value={viewProps}>
+      <ark.div {...mergedProps} hidden={api().view !== viewProps.view}/>
+    </DatePickerViewProvider>);
+};

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

@@ -0,0 +1,17 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useDatePickerContext } from './use-date-picker-context';
+export const DatePickerYearSelect = (props) => {
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(() => api().yearSelectProps, props);
+    return (<ark.select {...mergedProps}>
+      {getYearsRange({ from: 1_000, to: 4_000 }).map((year) => (<option value={year}>{year}</option>))}
+    </ark.select>);
+};
+function getYearsRange(range) {
+    const years = [];
+    for (let year = range.from; year <= range.to; year += 1) {
+        years.push(year);
+    }
+    return years;
+}

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

@@ -0,0 +1,26 @@
+import { DatePickerClearTrigger as ClearTrigger, } from './date-picker-clear-trigger';
+import { DatePickerContent as Content, } from './date-picker-content';
+import { DatePickerContext as Context, } from './date-picker-context';
+import { DatePickerControl as Control, } from './date-picker-control';
+import { DatePickerInput as Input, } from './date-picker-input';
+import { DatePickerLabel as Label, } from './date-picker-label';
+import { DatePickerMonthSelect as MonthSelect, } from './date-picker-month-select';
+import { DatePickerNextTrigger as NextTrigger, } from './date-picker-next-trigger';
+import { DatePickerPositioner as Positioner, } from './date-picker-positioner';
+import { DatePickerPresetTrigger as PresetTrigger, } from './date-picker-preset-trigger';
+import { DatePickerPrevTrigger as PrevTrigger, } from './date-picker-prev-trigger';
+import { DatePickerRangeText as RangeText, } from './date-picker-range-text';
+import { DatePickerRoot as Root } from './date-picker-root';
+import { DatePickerTable as Table, } from './date-picker-table';
+import { DatePickerTableBody as TableBody, } from './date-picker-table-body';
+import { DatePickerTableCell as TableCell, } from './date-picker-table-cell';
+import { DatePickerTableCellTrigger as TableCellTrigger, } from './date-picker-table-cell-trigger';
+import { DatePickerTableHead as TableHead, } from './date-picker-table-head';
+import { DatePickerTableHeader as TableHeader, } from './date-picker-table-header';
+import { DatePickerTableRow as TableRow, } from './date-picker-table-row';
+import { DatePickerTrigger as Trigger, } from './date-picker-trigger';
+import { DatePickerView as View } from './date-picker-view';
+import { DatePickerViewControl as ViewControl, } from './date-picker-view-control';
+import { DatePickerViewTrigger as ViewTrigger, } from './date-picker-view-trigger';
+import { DatePickerYearSelect as YearSelect, } from './date-picker-year-select';
+export { ClearTrigger, Content, Context, Control, Input, Label, MonthSelect, NextTrigger, Positioner, PresetTrigger, PrevTrigger, RangeText, Root, Table, TableBody, TableCell, TableCellTrigger, TableHead, TableHeader, TableRow, Trigger, View, ViewControl, ViewTrigger, YearSelect, };

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.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, };