@ark-ui/solid 0.10.1 → 1.0.0-beta.0

package/date-picker/index.d.ts

@@ -1,55 +1,55 @@
 import { JSX } from 'solid-js';
 import { type DatePickerProps } from './date-picker';
-import { useDatePickerCellContext } from './date-picker-cell-context';
 import { DatePickerClearTrigger, type DatePickerClearTriggerProps } from './date-picker-clear-trigger';
-import { DatePickerColumnHeader, type DatePickerColumnHeaderProps } from './date-picker-column-header';
 import { DatePickerContent, type DatePickerContentProps } from './date-picker-content';
-import { useDatePickerContext } from './date-picker-context';
+import { useDatePickerContext, type DatePickerContext } from './date-picker-context';
 import { DatePickerControl, type DatePickerControlProps } from './date-picker-control';
-import { DatePickerDayCell, type DatePickerDayCellProps } from './date-picker-day-cell';
-import { useDatePickerDayCellContext } from './date-picker-day-cell-context';
-import { DatePickerDayCellTrigger, type DatePickerDayCellTriggerProps } from './date-picker-day-cell-trigger';
-import { DatePickerGrid, type DatePickerGridProps } from './date-picker-grid';
 import { DatePickerInput, type DatePickerInputProps } from './date-picker-input';
-import { DatePickerMonthCell, type DatePickerMonthCellProps } from './date-picker-month-cell';
-import { DatePickerMonthCellTrigger, type DatePickerMonthCellTriggerProps } from './date-picker-month-cell-trigger';
+import { DatePickerLabel, type DatePickerLabelProps } from './date-picker-label';
 import { DatePickerMonthSelect, type DatePickerMonthSelectProps } from './date-picker-month-select';
 import { DatePickerNextTrigger, type DatePickerNextTriggerProps } from './date-picker-next-trigger';
 import { DatePickerPositioner, type DatePickerPositionerProps } from './date-picker-positioner';
 import { DatePickerPrevTrigger, type DatePickerPrevTriggerProps } from './date-picker-prev-trigger';
-import { DatePickerRow, type DatePickerRowProps } from './date-picker-row';
-import { DatePickerRowGroup, type DatePickerRowGroupProps } from './date-picker-row-group';
-import { DatePickerRowHeader, type DatePickerRowHeaderProps } from './date-picker-row-header';
+import { DatePickerRangeText, type DatePickerRangeTextProps } from './date-picker-range-text';
+import { DatePickerTable, type DatePickerTableProps } from './date-picker-table';
+import { DatePickerTableBody, type DatePickerTableBodyProps } from './date-picker-table-body';
+import { DatePickerTableCell, type DatePickerTableCellProps } from './date-picker-table-cell';
+import { useDatePickerTableCellContext, type DatePickerTableCellContext } from './date-picker-table-cell-context';
+import { DatePickerTableCellTrigger, type DatePickerTableCellTriggerProps } from './date-picker-table-cell-trigger';
+import { useDatePickerTableContext, type DatePickerTableContext } from './date-picker-table-context';
+import { DatePickerTableHead, type DatePickerTableHeadProps } from './date-picker-table-head';
+import { DatePickerTableHeader, type DatePickerTableHeaderProps } from './date-picker-table-header';
+import { DatePickerTableRow, type DatePickerTableRowProps } from './date-picker-table-row';
 import { DatePickerTrigger, type DatePickerTriggerProps } from './date-picker-trigger';
+import { DatePickerView, type DatePickerViewProps } from './date-picker-view';
+import { useDatePickerViewContext, type DatePickerViewContext } from './date-picker-view-context';
+import { DatePickerViewControl, type DatePickerViewControlProps } from './date-picker-view-control';
 import { DatePickerViewTrigger, type DatePickerViewTriggerProps } from './date-picker-view-trigger';
-import { DatePickerYearCell, type DatePickerYearCellProps } from './date-picker-year-cell';
-import { DatePickerYearCellTrigger, type DatePickerYearCellTriggerProps } from './date-picker-year-cell-trigger';
 import { DatePickerYearSelect, type DatePickerYearSelectProps } from './date-picker-year-select';
-import { datePickerAnatomy } from './date-picker.anatomy';
 declare const DatePicker: ((props: DatePickerProps) => JSX.Element) & {
     Root: (props: DatePickerProps) => JSX.Element;
     ClearTrigger: (props: DatePickerClearTriggerProps) => JSX.Element;
-    ColumnHeader: (props: DatePickerColumnHeaderProps) => JSX.Element;
     Content: (props: DatePickerContentProps) => JSX.Element;
     Control: (props: DatePickerControlProps) => JSX.Element;
-    DayCell: (props: DatePickerDayCellProps) => JSX.Element;
-    DayCellTrigger: (props: DatePickerDayCellTriggerProps) => JSX.Element;
-    Grid: (props: DatePickerGridProps) => JSX.Element;
     Input: (props: DatePickerInputProps) => JSX.Element;
-    MonthCell: (props: DatePickerMonthCellProps) => JSX.Element;
-    MonthCellTrigger: (props: DatePickerMonthCellTriggerProps) => JSX.Element;
+    Label: (props: DatePickerLabelProps) => JSX.Element;
     MonthSelect: (props: DatePickerMonthSelectProps) => JSX.Element;
     NextTrigger: (props: DatePickerNextTriggerProps) => JSX.Element;
     Positioner: (props: DatePickerPositionerProps) => JSX.Element;
     PrevTrigger: (props: DatePickerPrevTriggerProps) => JSX.Element;
-    Row: (props: DatePickerRowProps) => JSX.Element;
-    RowGroup: (props: DatePickerRowGroupProps) => JSX.Element;
-    RowHeader: (props: DatePickerRowHeaderProps) => JSX.Element;
+    RangeText: (props: DatePickerRangeTextProps) => JSX.Element;
+    Table: (props: DatePickerTableProps) => JSX.Element;
+    TableBody: (props: DatePickerTableBodyProps) => JSX.Element;
+    TableCell: (props: DatePickerTableCellProps) => JSX.Element;
+    TableCellTrigger: (props: DatePickerTableCellTriggerProps) => JSX.Element;
+    TableHead: (props: DatePickerTableHeadProps) => JSX.Element;
+    TableHeader: (props: DatePickerTableHeaderProps) => JSX.Element;
+    TableRow: (props: DatePickerTableRowProps) => JSX.Element;
     Trigger: (props: DatePickerTriggerProps) => JSX.Element;
+    View: (props: DatePickerViewProps) => JSX.Element;
+    ViewControl: (props: DatePickerViewControlProps) => JSX.Element;
     ViewTrigger: (props: DatePickerViewTriggerProps) => JSX.Element;
-    YearCell: (props: DatePickerYearCellProps) => JSX.Element;
-    YearCellTrigger: (props: DatePickerYearCellTriggerProps) => JSX.Element;
     YearSelect: (props: DatePickerYearSelectProps) => JSX.Element;
 };
-export { DatePicker, DatePickerClearTrigger, DatePickerColumnHeader, DatePickerContent, DatePickerControl, DatePickerDayCell, DatePickerDayCellTrigger, DatePickerGrid, DatePickerInput, DatePickerMonthCell, DatePickerMonthCellTrigger, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRow, DatePickerRowGroup, DatePickerRowHeader, DatePickerTrigger, DatePickerViewTrigger, DatePickerYearCell, DatePickerYearCellTrigger, DatePickerYearSelect, datePickerAnatomy, useDatePickerCellContext, useDatePickerContext, useDatePickerDayCellContext, };
-export type { DatePickerClearTriggerProps, DatePickerColumnHeaderProps, DatePickerContentProps, DatePickerControlProps, DatePickerDayCellProps, DatePickerDayCellTriggerProps, DatePickerGridProps, DatePickerInputProps, DatePickerMonthCellProps, DatePickerMonthCellTriggerProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerPositionerProps, DatePickerPrevTriggerProps, DatePickerProps, DatePickerRowGroupProps, DatePickerRowHeaderProps, DatePickerRowProps, DatePickerTriggerProps, DatePickerViewTriggerProps, DatePickerYearCellProps, DatePickerYearCellTriggerProps, DatePickerYearSelectProps, };
+export { DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
+export type { DatePickerClearTriggerProps, DatePickerContentProps, DatePickerContext, DatePickerControlProps, DatePickerInputProps, DatePickerLabelProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerPositionerProps, DatePickerPrevTriggerProps, DatePickerProps, DatePickerRangeTextProps, DatePickerTableBodyProps, DatePickerTableCellContext, DatePickerTableCellProps, DatePickerTableCellTriggerProps, DatePickerTableContext, DatePickerTableHeadProps, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRowProps, DatePickerTriggerProps, DatePickerViewContext, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTriggerProps, DatePickerYearSelectProps, };

package/date-picker/index.mjs

@@ -1,55 +1,55 @@
 import { DatePicker as DatePicker$1 } from './date-picker.mjs';
-export { useDatePickerCellContext } from './date-picker-cell-context.mjs';
 import { DatePickerClearTrigger } from './date-picker-clear-trigger.mjs';
-import { DatePickerColumnHeader } from './date-picker-column-header.mjs';
 import { DatePickerContent } from './date-picker-content.mjs';
 export { useDatePickerContext } from './date-picker-context.mjs';
 import { DatePickerControl } from './date-picker-control.mjs';
-import { DatePickerDayCell } from './date-picker-day-cell.mjs';
-export { useDatePickerDayCellContext } from './date-picker-day-cell-context.mjs';
-import { DatePickerDayCellTrigger } from './date-picker-day-cell-trigger.mjs';
-import { DatePickerGrid } from './date-picker-grid.mjs';
 import { DatePickerInput } from './date-picker-input.mjs';
-import { DatePickerMonthCell } from './date-picker-month-cell.mjs';
-import { DatePickerMonthCellTrigger } from './date-picker-month-cell-trigger.mjs';
+import { DatePickerLabel } from './date-picker-label.mjs';
 import { DatePickerMonthSelect } from './date-picker-month-select.mjs';
 import { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
 import { DatePickerPositioner } from './date-picker-positioner.mjs';
 import { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
-import { DatePickerRow } from './date-picker-row.mjs';
-import { DatePickerRowGroup } from './date-picker-row-group.mjs';
-import { DatePickerRowHeader } from './date-picker-row-header.mjs';
+import { DatePickerRangeText } from './date-picker-range-text.mjs';
+import { DatePickerTable } from './date-picker-table.mjs';
+import { DatePickerTableBody } from './date-picker-table-body.mjs';
+import { DatePickerTableCell } from './date-picker-table-cell.mjs';
+export { useDatePickerTableCellContext } from './date-picker-table-cell-context.mjs';
+import { DatePickerTableCellTrigger } from './date-picker-table-cell-trigger.mjs';
+export { useDatePickerTableContext } from './date-picker-table-context.mjs';
+import { DatePickerTableHead } from './date-picker-table-head.mjs';
+import { DatePickerTableHeader } from './date-picker-table-header.mjs';
+import { DatePickerTableRow } from './date-picker-table-row.mjs';
 import { DatePickerTrigger } from './date-picker-trigger.mjs';
+import { DatePickerView } from './date-picker-view.mjs';
+export { useDatePickerViewContext } from './date-picker-view-context.mjs';
+import { DatePickerViewControl } from './date-picker-view-control.mjs';
 import { DatePickerViewTrigger } from './date-picker-view-trigger.mjs';
-import { DatePickerYearCell } from './date-picker-year-cell.mjs';
-import { DatePickerYearCellTrigger } from './date-picker-year-cell-trigger.mjs';
 import { DatePickerYearSelect } from './date-picker-year-select.mjs';
-export { datePickerAnatomy } from './date-picker.anatomy.mjs';
 
 const DatePicker = Object.assign(DatePicker$1, {
   Root: DatePicker$1,
   ClearTrigger: DatePickerClearTrigger,
-  ColumnHeader: DatePickerColumnHeader,
   Content: DatePickerContent,
   Control: DatePickerControl,
-  DayCell: DatePickerDayCell,
-  DayCellTrigger: DatePickerDayCellTrigger,
-  Grid: DatePickerGrid,
   Input: DatePickerInput,
-  MonthCell: DatePickerMonthCell,
-  MonthCellTrigger: DatePickerMonthCellTrigger,
+  Label: DatePickerLabel,
   MonthSelect: DatePickerMonthSelect,
   NextTrigger: DatePickerNextTrigger,
   Positioner: DatePickerPositioner,
   PrevTrigger: DatePickerPrevTrigger,
-  Row: DatePickerRow,
-  RowGroup: DatePickerRowGroup,
-  RowHeader: DatePickerRowHeader,
+  RangeText: DatePickerRangeText,
+  Table: DatePickerTable,
+  TableBody: DatePickerTableBody,
+  TableCell: DatePickerTableCell,
+  TableCellTrigger: DatePickerTableCellTrigger,
+  TableHead: DatePickerTableHead,
+  TableHeader: DatePickerTableHeader,
+  TableRow: DatePickerTableRow,
   Trigger: DatePickerTrigger,
+  View: DatePickerView,
+  ViewControl: DatePickerViewControl,
   ViewTrigger: DatePickerViewTrigger,
-  YearCell: DatePickerYearCell,
-  YearCellTrigger: DatePickerYearCellTrigger,
   YearSelect: DatePickerYearSelect
 });
 
-export { DatePicker, DatePickerClearTrigger, DatePickerColumnHeader, DatePickerContent, DatePickerControl, DatePickerDayCell, DatePickerDayCellTrigger, DatePickerGrid, DatePickerInput, DatePickerMonthCell, DatePickerMonthCellTrigger, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRow, DatePickerRowGroup, DatePickerRowHeader, DatePickerTrigger, DatePickerViewTrigger, DatePickerYearCell, DatePickerYearCellTrigger, DatePickerYearSelect };
+export { DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect };

package/date-picker/use-date-picker.cjs

@@ -28,11 +28,13 @@ function _interopNamespaceDefault(e) {
 const datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker);
 
 const useDatePicker = props => {
+  const [local, rest] = solidJs.splitProps(props, ['value']);
   const getRootNode = environmentContext.useEnvironmentContext();
-  const context = solid.mergeProps({
+  const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
-    getRootNode
-  }, props);
+    getRootNode,
+    value: local.value ? datePicker__namespace.parse(local.value) : undefined
+  }), rest);
   const [state, send] = solid.useMachine(datePicker__namespace.machine(context), {
     context
   });

package/date-picker/use-date-picker.d.ts

@@ -2,6 +2,9 @@ import * as datePicker from '@zag-js/date-picker';
 import { type PropTypes } from '@zag-js/solid';
 import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
-export type UseDatePickerProps = Optional<datePicker.Context, 'id'>;
-export type UseDatePickerReturn = Accessor<datePicker.Api<PropTypes>>;
+export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'value'>, 'id'> {
+    value?: string[];
+}
+export interface UseDatePickerReturn extends Accessor<datePicker.Api<PropTypes>> {
+}
 export declare const useDatePicker: (props: UseDatePickerProps) => UseDatePickerReturn;

package/date-picker/use-date-picker.mjs

@@ -1,15 +1,17 @@
 import * as datePicker from '@zag-js/date-picker';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
-import { createUniqueId, createMemo } from 'solid-js';
+import { splitProps, createUniqueId, createMemo } from 'solid-js';
 import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useDatePicker = props => {
+  const [local, rest] = splitProps(props, ['value']);
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps({
+  const context = mergeProps(() => ({
     id: createUniqueId(),
-    getRootNode
-  }, props);
+    getRootNode,
+    value: local.value ? datePicker.parse(local.value) : undefined
+  }), rest);
   const [state, send] = useMachine(datePicker.machine(context), {
     context
   });

package/dialog/dialog-backdrop.cjs

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const dialogContext = require('./dialog-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const DialogBackdrop = props => {
-  const dialog = dialogContext.useDialogContext();
-  const backdropProps = solid.mergeProps(() => dialog().backdropProps, props);
-  return web.createComponent(factory.ark.div, backdropProps);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = dialogContext.useDialogContext();
+  const mergedProps = solid.mergeProps(() => api().backdropProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.DialogBackdrop = DialogBackdrop;

package/dialog/dialog-backdrop.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type DialogBackdropProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type DialogBackdropProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const DialogBackdrop: (props: DialogBackdropProps) => JSX.Element;

package/dialog/dialog-backdrop.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useDialogContext } from './dialog-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const DialogBackdrop = props => {
-  const dialog = useDialogContext();
-  const backdropProps = mergeProps(() => dialog().backdropProps, props);
-  return createComponent(ark.div, backdropProps);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useDialogContext();
+  const mergedProps = mergeProps(() => api().backdropProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { DialogBackdrop };

package/dialog/dialog-content.cjs

@@ -5,12 +5,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const dialogContext = require('./dialog-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const DialogContent = props => {
-  const dialog = dialogContext.useDialogContext();
-  const contentProps = solid.mergeProps(() => dialog().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = dialogContext.useDialogContext();
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.DialogContent = DialogContent;

package/dialog/dialog-content.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type DialogContentProps = HTMLArkProps<'div'>;
+import { type PresenceProps } from '../presence';
+export type DialogContentProps = HTMLArkProps<'div'> & PresenceProps;
 export declare const DialogContent: (props: DialogContentProps) => JSX.Element;

package/dialog/dialog-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useDialogContext } from './dialog-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const DialogContent = props => {
-  const dialog = useDialogContext();
-  const contentProps = mergeProps(() => dialog().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useDialogContext();
+  const mergedProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { DialogContent };

package/dialog/{dialog-container.cjs → dialog-positioner.cjs}

@@ -7,10 +7,10 @@ const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const dialogContext = require('./dialog-context.cjs');
 
-const DialogContainer = props => {
+const DialogPositioner = props => {
   const dialog = dialogContext.useDialogContext();
-  const containerProps = solid.mergeProps(() => dialog().containerProps, props);
-  return web.createComponent(factory.ark.div, containerProps);
+  const mergedProps = solid.mergeProps(() => dialog().positionerProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
-exports.DialogContainer = DialogContainer;
+exports.DialogPositioner = DialogPositioner;

package/dialog/dialog-positioner.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DialogPositionerProps = HTMLArkProps<'div'>;
+export declare const DialogPositioner: (props: DialogPositionerProps) => JSX.Element;

package/dialog/{dialog-container.mjs → dialog-positioner.mjs}

@@ -3,10 +3,10 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useDialogContext } from './dialog-context.mjs';
 
-const DialogContainer = props => {
+const DialogPositioner = props => {
   const dialog = useDialogContext();
-  const containerProps = mergeProps(() => dialog().containerProps, props);
-  return createComponent(ark.div, containerProps);
+  const mergedProps = mergeProps(() => dialog().positionerProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
-export { DialogContainer };
+export { DialogPositioner };

package/dialog/dialog.cjs

@@ -9,7 +9,7 @@ const dialogContext = require('./dialog-context.cjs');
 const useDialog = require('./use-dialog.cjs');
 
 const Dialog = props => {
-  const [dialogParams, localProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'closeOnEsc', 'closeOnOutsideClick', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEsc', 'onOutsideClick', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus', 'onOpen']);
+  const [dialogParams, localProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
   const api = useDialog.useDialog(dialogParams);
   const getChildren = () => runIfFn.runIfFn(localProps.children, api);
   return web.createComponent(dialogContext.DialogProvider, {

package/dialog/dialog.mjs

@@ -5,7 +5,7 @@ import { DialogProvider } from './dialog-context.mjs';
 import { useDialog } from './use-dialog.mjs';
 
 const Dialog = props => {
-  const [dialogParams, localProps] = createSplitProps()(props, ['aria-label', 'closeOnEsc', 'closeOnOutsideClick', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEsc', 'onOutsideClick', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus', 'onOpen']);
+  const [dialogParams, localProps] = createSplitProps()(props, ['aria-label', 'closeOnEscapeKeyDown', 'closeOnInteractOutside', 'dir', 'finalFocusEl', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'preventScroll', 'restoreFocus', 'role', 'trapFocus']);
   const api = useDialog(dialogParams);
   const getChildren = () => runIfFn(localProps.children, api);
   return createComponent(DialogProvider, {

package/dialog/index.cjs

@@ -2,22 +2,21 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const dialog$1 = require('./dialog.cjs');
+const dialog = require('./dialog.cjs');
 const dialogBackdrop = require('./dialog-backdrop.cjs');
 const dialogCloseTrigger = require('./dialog-close-trigger.cjs');
-const dialogContainer = require('./dialog-container.cjs');
 const dialogContent = require('./dialog-content.cjs');
 const dialogContext = require('./dialog-context.cjs');
 const dialogDescription = require('./dialog-description.cjs');
+const dialogPositioner = require('./dialog-positioner.cjs');
 const dialogTitle = require('./dialog-title.cjs');
 const dialogTrigger = require('./dialog-trigger.cjs');
-const dialog = require('@zag-js/dialog');
 
-const Dialog = Object.assign(dialog$1.Dialog, {
-  Root: dialog$1.Dialog,
+const Dialog = Object.assign(dialog.Dialog, {
+  Root: dialog.Dialog,
   Backdrop: dialogBackdrop.DialogBackdrop,
   CloseTrigger: dialogCloseTrigger.DialogCloseTrigger,
-  Container: dialogContainer.DialogContainer,
+  Positioner: dialogPositioner.DialogPositioner,
   Content: dialogContent.DialogContent,
   Description: dialogDescription.DialogDescription,
   Title: dialogTitle.DialogTitle,
@@ -26,14 +25,10 @@ const Dialog = Object.assign(dialog$1.Dialog, {
 
 exports.DialogBackdrop = dialogBackdrop.DialogBackdrop;
 exports.DialogCloseTrigger = dialogCloseTrigger.DialogCloseTrigger;
-exports.DialogContainer = dialogContainer.DialogContainer;
 exports.DialogContent = dialogContent.DialogContent;
 exports.useDialogContext = dialogContext.useDialogContext;
 exports.DialogDescription = dialogDescription.DialogDescription;
+exports.DialogPositioner = dialogPositioner.DialogPositioner;
 exports.DialogTitle = dialogTitle.DialogTitle;
 exports.DialogTrigger = dialogTrigger.DialogTrigger;
-Object.defineProperty(exports, 'dialogAnatomy', {
-  enumerable: true,
-  get: () => dialog.anatomy
-});
 exports.Dialog = Dialog;

package/dialog/index.d.ts

@@ -2,22 +2,21 @@ import { JSX } from 'solid-js';
 import { type DialogProps } from './dialog';
 import { DialogBackdrop, type DialogBackdropProps } from './dialog-backdrop';
 import { DialogCloseTrigger, type DialogCloseTriggerProps } from './dialog-close-trigger';
-import { DialogContainer, type DialogContainerProps } from './dialog-container';
 import { DialogContent, type DialogContentProps } from './dialog-content';
-import { useDialogContext } from './dialog-context';
+import { useDialogContext, type DialogContext } from './dialog-context';
 import { DialogDescription, type DialogDescriptionProps } from './dialog-description';
+import { DialogPositioner, type DialogPositionerProps } from './dialog-positioner';
 import { DialogTitle, type DialogTitleProps } from './dialog-title';
 import { DialogTrigger, type DialogTriggerProps } from './dialog-trigger';
-import { dialogAnatomy } from './dialog.anatomy';
 declare const Dialog: ((props: DialogProps) => JSX.Element) & {
     Root: (props: DialogProps) => JSX.Element;
     Backdrop: (props: DialogBackdropProps) => JSX.Element;
     CloseTrigger: (props: DialogCloseTriggerProps) => JSX.Element;
-    Container: (props: DialogContainerProps) => JSX.Element;
+    Positioner: (props: DialogPositionerProps) => JSX.Element;
     Content: (props: DialogContentProps) => JSX.Element;
     Description: (props: DialogDescriptionProps) => JSX.Element;
     Title: (props: DialogTitleProps) => JSX.Element;
     Trigger: (props: DialogTriggerProps) => JSX.Element;
 };
-export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContainer, DialogContent, DialogDescription, DialogTitle, DialogTrigger, dialogAnatomy, useDialogContext, };
-export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContainerProps, DialogContentProps, DialogDescriptionProps, DialogProps, DialogTitleProps, DialogTriggerProps, };
+export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, useDialogContext, };
+export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContentProps, DialogContext, DialogDescriptionProps, DialogPositionerProps, DialogProps, DialogTitleProps, DialogTriggerProps, };

package/dialog/index.mjs

@@ -1,23 +1,22 @@
 import { Dialog as Dialog$1 } from './dialog.mjs';
 import { DialogBackdrop } from './dialog-backdrop.mjs';
 import { DialogCloseTrigger } from './dialog-close-trigger.mjs';
-import { DialogContainer } from './dialog-container.mjs';
 import { DialogContent } from './dialog-content.mjs';
 export { useDialogContext } from './dialog-context.mjs';
 import { DialogDescription } from './dialog-description.mjs';
+import { DialogPositioner } from './dialog-positioner.mjs';
 import { DialogTitle } from './dialog-title.mjs';
 import { DialogTrigger } from './dialog-trigger.mjs';
-export { anatomy as dialogAnatomy } from '@zag-js/dialog';
 
 const Dialog = Object.assign(Dialog$1, {
   Root: Dialog$1,
   Backdrop: DialogBackdrop,
   CloseTrigger: DialogCloseTrigger,
-  Container: DialogContainer,
+  Positioner: DialogPositioner,
   Content: DialogContent,
   Description: DialogDescription,
   Title: DialogTitle,
   Trigger: DialogTrigger
 });
 
-export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContainer, DialogContent, DialogDescription, DialogTitle, DialogTrigger };
+export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger };

package/editable/editable.cjs

@@ -12,7 +12,7 @@ const editableContext = require('./editable-context.cjs');
 const useEditable = require('./use-editable.cjs');
 
 const Editable = props => {
-  const [useEditableProps, restProps] = createSplitProps.createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onCancel', 'onChange', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onInteractOutside', 'onPointerDownOutside', 'onSubmit', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const [useEditableProps, restProps] = createSplitProps.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 editable = useEditable.useEditable(useEditableProps);
   const [childrenProps, localProps] = solidJs.splitProps(restProps, ['children']);
   const rootProps = solid.mergeProps(() => editable().rootProps, localProps);

package/editable/editable.mjs

@@ -8,7 +8,7 @@ import { EditableProvider } from './editable-context.mjs';
 import { useEditable } from './use-editable.mjs';
 
 const Editable = props => {
-  const [useEditableProps, restProps] = createSplitProps()(props, ['activationMode', 'autoResize', 'dir', 'disabled', 'finalFocusEl', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'maxLength', 'name', 'onCancel', 'onChange', 'onEdit', 'onFocusOutside', 'onInteractOutside', 'onInteractOutside', 'onPointerDownOutside', 'onSubmit', 'placeholder', 'readOnly', 'selectOnFocus', 'startWithEditView', 'submitMode', 'translations', 'value']);
+  const [useEditableProps, restProps] = 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 editable = useEditable(useEditableProps);
   const [childrenProps, localProps] = splitProps(restProps, ['children']);
   const rootProps = mergeProps(() => editable().rootProps, localProps);

package/editable/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const editable$1 = require('./editable.cjs');
+const editable = require('./editable.cjs');
 const editableArea = require('./editable-area.cjs');
 const editableCancelTrigger = require('./editable-cancel-trigger.cjs');
 const editableContext = require('./editable-context.cjs');
@@ -12,10 +12,9 @@ const editableInput = require('./editable-input.cjs');
 const editableLabel = require('./editable-label.cjs');
 const editablePreview = require('./editable-preview.cjs');
 const editableSubmitTrigger = require('./editable-submit-trigger.cjs');
-const editable = require('@zag-js/editable');
 
-const Editable = Object.assign(editable$1.Editable, {
-  Root: editable$1.Editable,
+const Editable = Object.assign(editable.Editable, {
+  Root: editable.Editable,
   Area: editableArea.EditableArea,
   CancelTrigger: editableCancelTrigger.EditableCancelTrigger,
   Control: editableControl.EditableControl,
@@ -35,8 +34,4 @@ exports.EditableInput = editableInput.EditableInput;
 exports.EditableLabel = editableLabel.EditableLabel;
 exports.EditablePreview = editablePreview.EditablePreview;
 exports.EditableSubmitTrigger = editableSubmitTrigger.EditableSubmitTrigger;
-Object.defineProperty(exports, 'editableAnatomy', {
-  enumerable: true,
-  get: () => editable.anatomy
-});
 exports.Editable = Editable;

package/editable/index.d.ts

@@ -2,14 +2,13 @@ import { JSX } from 'solid-js';
 import { type EditableProps } from './editable';
 import { EditableArea, type EditableAreaProps } from './editable-area';
 import { EditableCancelTrigger, type EditableCancelTriggerProps } from './editable-cancel-trigger';
-import { useEditableContext } from './editable-context';
+import { useEditableContext, type EditableContext } from './editable-context';
 import { EditableControl, type EditableControlProps } from './editable-control';
 import { EditableEditTrigger, type EditableEditTriggerProps } from './editable-edit-trigger';
 import { EditableInput, type EditableInputProps } from './editable-input';
 import { EditableLabel, type EditableLabelProps } from './editable-label';
 import { EditablePreview, type EditablePreviewProps } from './editable-preview';
 import { EditableSubmitTrigger, type EditableSubmitTriggerProps } from './editable-submit-trigger';
-import { editableAnatomy } from './editable.anatomy';
 declare const Editable: ((props: EditableProps) => JSX.Element) & {
     Root: (props: EditableProps) => JSX.Element;
     Area: (props: EditableAreaProps) => JSX.Element;
@@ -21,5 +20,5 @@ declare const Editable: ((props: EditableProps) => JSX.Element) & {
     Preview: (props: EditablePreviewProps) => JSX.Element;
     SubmitTrigger: (props: EditableSubmitTriggerProps) => JSX.Element;
 };
-export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, editableAnatomy, useEditableContext, };
-export type { EditableAreaProps, EditableCancelTriggerProps, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableProps, EditableSubmitTriggerProps, };
+export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, useEditableContext, };
+export type { EditableAreaProps, EditableCancelTriggerProps, EditableContext, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableProps, EditableSubmitTriggerProps, };

package/editable/index.mjs

@@ -8,7 +8,6 @@ import { EditableInput } from './editable-input.mjs';
 import { EditableLabel } from './editable-label.mjs';
 import { EditablePreview } from './editable-preview.mjs';
 import { EditableSubmitTrigger } from './editable-submit-trigger.mjs';
-export { anatomy as editableAnatomy } from '@zag-js/editable';
 
 const Editable = Object.assign(Editable$1, {
   Root: Editable$1,