@ark-ui/solid 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -8,6 +8,7 @@
     "carousel",
     "checkbox",
     "clipboard",
+    "collapsible",
     "color picker",
     "combobox",
     "date picker",
@@ -84,78 +85,78 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "2.2.0",
-    "@zag-js/accordion": "0.36.2",
-    "@zag-js/avatar": "0.36.2",
-    "@zag-js/carousel": "0.36.2",
-    "@zag-js/checkbox": "0.36.2",
-    "@zag-js/clipboard": "0.36.2",
-    "@zag-js/collapsible": "0.36.2",
-    "@zag-js/color-picker": "0.36.2",
-    "@zag-js/combobox": "0.36.2",
-    "@zag-js/date-picker": "0.36.2",
-    "@zag-js/dialog": "0.36.2",
-    "@zag-js/editable": "0.36.2",
-    "@zag-js/file-upload": "0.36.2",
-    "@zag-js/hover-card": "0.36.2",
-    "@zag-js/i18n-utils": "0.36.2",
-    "@zag-js/menu": "0.36.2",
-    "@zag-js/number-input": "0.36.2",
-    "@zag-js/pagination": "0.36.2",
-    "@zag-js/pin-input": "0.36.2",
-    "@zag-js/popover": "0.36.2",
-    "@zag-js/presence": "0.36.2",
-    "@zag-js/progress": "0.36.2",
-    "@zag-js/radio-group": "0.36.2",
-    "@zag-js/rating-group": "0.36.2",
-    "@zag-js/select": "0.36.2",
-    "@zag-js/slider": "0.36.2",
-    "@zag-js/solid": "0.36.2",
-    "@zag-js/splitter": "0.36.2",
-    "@zag-js/switch": "0.36.2",
-    "@zag-js/tabs": "0.36.2",
-    "@zag-js/tags-input": "0.36.2",
-    "@zag-js/toast": "0.36.2",
-    "@zag-js/toggle-group": "0.36.2",
-    "@zag-js/tooltip": "0.36.2",
-    "@zag-js/tree-view": "0.36.2",
-    "@zag-js/types": "0.36.2"
+    "@ark-ui/anatomy": "2.3.1",
+    "@zag-js/accordion": "0.38.0",
+    "@zag-js/avatar": "0.38.0",
+    "@zag-js/carousel": "0.38.0",
+    "@zag-js/checkbox": "0.38.0",
+    "@zag-js/clipboard": "0.38.0",
+    "@zag-js/collapsible": "0.38.0",
+    "@zag-js/color-picker": "0.38.0",
+    "@zag-js/combobox": "0.38.0",
+    "@zag-js/date-picker": "0.38.0",
+    "@zag-js/dialog": "0.38.0",
+    "@zag-js/editable": "0.38.0",
+    "@zag-js/file-upload": "0.38.0",
+    "@zag-js/hover-card": "0.38.0",
+    "@zag-js/i18n-utils": "0.38.0",
+    "@zag-js/menu": "0.38.0",
+    "@zag-js/number-input": "0.38.0",
+    "@zag-js/pagination": "0.38.0",
+    "@zag-js/pin-input": "0.38.0",
+    "@zag-js/popover": "0.38.0",
+    "@zag-js/presence": "0.38.0",
+    "@zag-js/progress": "0.38.0",
+    "@zag-js/radio-group": "0.38.0",
+    "@zag-js/rating-group": "0.38.0",
+    "@zag-js/select": "0.38.0",
+    "@zag-js/slider": "0.38.0",
+    "@zag-js/solid": "0.38.0",
+    "@zag-js/splitter": "0.38.0",
+    "@zag-js/switch": "0.38.0",
+    "@zag-js/tabs": "0.38.0",
+    "@zag-js/tags-input": "0.38.0",
+    "@zag-js/toast": "0.38.0",
+    "@zag-js/toggle-group": "0.38.0",
+    "@zag-js/tooltip": "0.38.0",
+    "@zag-js/tree-view": "0.38.0",
+    "@zag-js/types": "0.38.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",
     "@solidjs/testing-library": "0.8.6",
-    "@storybook/addon-essentials": "7.6.14",
-    "@storybook/addon-interactions": "7.6.14",
-    "@storybook/addon-links": "7.6.14",
-    "@storybook/blocks": "7.6.14",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-interactions": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/blocks": "7.6.17",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
-    "@vitest/coverage-v8": "1.2.2",
-    "eslint": "8.56.0",
+    "@typescript-eslint/eslint-plugin": "7.0.2",
+    "@typescript-eslint/parser": "7.0.2",
+    "@vitest/coverage-v8": "1.3.1",
+    "eslint": "8.57.0",
     "eslint-plugin-jest-dom": "5.1.0",
     "eslint-plugin-testing-library": "6.2.0",
     "globby": "14.0.1",
     "jsdom": "24.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "release-it": "17.0.3",
+    "release-it": "17.1.1",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.10.0",
+    "rollup": "4.12.0",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.14",
-    "storybook": "7.6.14",
+    "solid-js": "1.8.15",
+    "storybook": "7.6.17",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.3.3",
-    "vite": "5.1.1",
-    "vite-plugin-solid": "2.9.1",
-    "vitest": "1.2.2"
+    "vite": "5.1.4",
+    "vite-plugin-solid": "2.10.1",
+    "vitest": "1.3.1"
   },
   "peerDependencies": {
     "solid-js": ">=1.6.0"

package/source/accordion/accordion-item.jsx

@@ -1,15 +1,16 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
-import { PresenceProvider, usePresence, usePresencePropsContext } from '../presence';
+import { PresenceProvider, usePresence } from '../presence';
+import { useRenderStrategyContext } from '../render-strategy';
 import { runIfFn } from '../run-if-fn';
 import { useAccordionContext } from './accordion-context';
 import { AccordionItemProvider } from './accordion-item-context';
 export const AccordionItem = (props) => {
     const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled']);
     const api = useAccordionContext();
-    const presenceProps = usePresencePropsContext();
-    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().getItemState(itemProps).isOpen })));
+    const renderStrategyProps = useRenderStrategyContext();
+    const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({ present: api().getItemState(itemProps).isOpen })));
     const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
     const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
     return (<AccordionItemProvider value={itemProps}>

package/source/accordion/accordion-root.jsx

@@ -1,11 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
-import { PresencePropsProvider, splitPresenceProps } from '../presence';
+import { RenderStrategyProvider, splitRenderStrategyProps } from '../render-strategy';
 import { AccordionProvider } from './accordion-context';
 import { useAccordion } from './use-accordion';
 export const AccordionRoot = (props) => {
-    const [presenceProps, accordionProps] = splitPresenceProps(props);
+    const [renderStrategyProps, accordionProps] = splitRenderStrategyProps(props);
     const [useAccordionProps, localProps] = createSplitProps()(accordionProps, [
         'collapsible',
         'dir',
@@ -22,8 +22,8 @@ export const AccordionRoot = (props) => {
     const api = useAccordion(useAccordionProps);
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<AccordionProvider value={api}>
-      <PresencePropsProvider value={presenceProps}>
+      <RenderStrategyProvider value={renderStrategyProps}>
         <ark.div {...mergedProps}/>
-      </PresencePropsProvider>
+      </RenderStrategyProvider>
     </AccordionProvider>);
 };

package/source/clipboard/clipboard-context.js

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

package/source/clipboard/clipboard-control.jsx

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

package/source/clipboard/clipboard-indicator.jsx

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show, children } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardIndicator = (props) => {
+    const [indicatorProps, localProps] = createSplitProps()(props, ['copied']);
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(api().getIndicatorProps({ copied: api().isCopied }), localProps);
+    const getChildren = children(() => localProps.children);
+    return (<ark.div {...mergedProps}>
+      <Show when={api().isCopied} fallback={getChildren()}>
+        {indicatorProps.copied}
+      </Show>
+    </ark.div>);
+};

package/source/clipboard/clipboard-input.jsx

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

package/source/clipboard/clipboard-label.jsx

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

package/source/clipboard/clipboard-root.jsx

@@ -0,0 +1,22 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { ClipboardProvider } from './clipboard-context';
+import { useClipboard } from './use-clipboard';
+export const ClipboardRoot = (props) => {
+    const [useClipboardProps, localProps] = createSplitProps()(props, [
+        'getRootNode',
+        'id',
+        'ids',
+        'value',
+        'timeout',
+        'onCopyStatusChange',
+    ]);
+    const api = useClipboard(useClipboardProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<ClipboardProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </ClipboardProvider>);
+};

package/source/clipboard/clipboard-trigger.jsx

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

package/source/clipboard/clipboard.jsx

@@ -0,0 +1,7 @@
+import { ClipboardControl as Control } from './clipboard-control';
+import { ClipboardIndicator as Indicator } from './clipboard-indicator';
+import { ClipboardInput as Input } from './clipboard-input';
+import { ClipboardLabel as Label } from './clipboard-label';
+import { ClipboardRoot as Root } from './clipboard-root';
+import { ClipboardTrigger as Trigger } from './clipboard-trigger';
+export { Control, Indicator, Input, Label, Root, Trigger };

package/source/clipboard/index.js

@@ -0,0 +1,9 @@
+import { useClipboardContext } from './clipboard-context';
+import { ClipboardControl } from './clipboard-control';
+import { ClipboardIndicator } from './clipboard-indicator';
+import { ClipboardInput } from './clipboard-input';
+import { ClipboardLabel } from './clipboard-label';
+import { ClipboardRoot } from './clipboard-root';
+import { ClipboardTrigger } from './clipboard-trigger';
+export * as Clipboard from './clipboard';
+export { ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, useClipboardContext, };

package/source/clipboard/use-clipboard.jsx

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

package/source/collapsible/collapsible-content.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { useCollapsibleContext } from './collapsible-context';
+export const CollapsibleContent = (props) => {
+    const api = useCollapsibleContext();
+    const mergedProps = mergeProps(() => api().contentProps, props);
+    return (<Show when={!api().isUnmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/source/collapsible/collapsible-context.js

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

package/source/collapsible/collapsible-root.jsx

@@ -0,0 +1,24 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { CollapsibleProvider } from './collapsible-context';
+import { useCollapsible } from './use-collapsible';
+export const CollapsibleRoot = (props) => {
+    const [params, localProps] = createSplitProps()(props, [
+        'dir',
+        'disabled',
+        'getRootNode',
+        'id',
+        'ids',
+        'lazyMount',
+        'onExitComplete',
+        'onOpenChange',
+        'open',
+        'unmountOnExit',
+    ]);
+    const api = useCollapsible(params);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<CollapsibleProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </CollapsibleProvider>);
+};

package/source/collapsible/collapsible-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useCollapsibleContext } from './collapsible-context';
+export const CollapsibleTrigger = (props) => {
+    const api = useCollapsibleContext();
+    const mergedProps = () => mergeProps(api().triggerProps, props);
+    return <ark.button {...mergedProps}>{props.children}</ark.button>;
+};

package/source/collapsible/collapsible.jsx

@@ -0,0 +1,4 @@
+import { CollapsibleContent as Content } from './collapsible-content';
+import { CollapsibleRoot as Root } from './collapsible-root';
+import { CollapsibleTrigger as Trigger } from './collapsible-trigger';
+export { Content, Root, Trigger };

package/source/collapsible/index.js

@@ -0,0 +1,6 @@
+import { CollapsibleContent } from './collapsible-content';
+import { useCollapsibleContext } from './collapsible-context';
+import { CollapsibleRoot } from './collapsible-root';
+import { CollapsibleTrigger } from './collapsible-trigger';
+export * as Collapsible from './collapsible';
+export { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useCollapsibleContext };

package/source/collapsible/use-collapsible.js

@@ -0,0 +1,23 @@
+import * as collapsible from '@zag-js/collapsible';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createEffect, createMemo, createSignal, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+import { splitRenderStrategyProps } from '../render-strategy';
+export const useCollapsible = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, collapsibleProps);
+    const [state, send] = useMachine(collapsible.machine(context), { context });
+    const [wasVisible, setWasVisible] = createSignal(false);
+    createEffect(() => {
+        const isPresent = api().isVisible;
+        if (isPresent)
+            setWasVisible(true);
+    });
+    const api = createMemo(() => collapsible.connect(state, send, normalizeProps));
+    return createMemo(() => ({
+        ...api(),
+        isUnmounted: (!api().isVisible && !wasVisible() && renderStrategyProps.lazyMount) ||
+            (renderStrategyProps.unmountOnExit && !api().isVisible && wasVisible()),
+    }));
+};

package/source/color-picker/use-color-picker.js

@@ -9,7 +9,6 @@ export const useColorPicker = (props) => {
         id: createUniqueId(),
         getRootNode,
         value: local.value ? colorPicker.parse(local.value) : undefined,
-        'open.controlled': props.open !== undefined,
     }), rest);
     const [state, send] = useMachine(colorPicker.machine(context), { context });
     return createMemo(() => colorPicker.connect(state, send, normalizeProps));

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

@@ -10,7 +10,6 @@ export const useDatePicker = (props) => {
         getRootNode,
         focusedValue: local.focusedValue ? datePicker.parse(local.focusedValue) : undefined,
         value: local.value ? datePicker.parse(local.value) : undefined,
-        'open.controlled': props.open !== undefined,
     }), rest);
     const [state, send] = useMachine(datePicker.machine(context), { context });
     return createMemo(() => datePicker.connect(state, send, normalizeProps));

package/source/dialog/dialog-backdrop.jsx

@@ -1,12 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
 import { Show } from 'solid-js';
 import { ark } from '../factory';
-import { usePresence, usePresencePropsContext } from '../presence';
+import { usePresence } from '../presence';
+import { useRenderStrategyContext } from '../render-strategy';
 import { useDialogContext } from './dialog-context';
 export const DialogBackdrop = (props) => {
     const api = useDialogContext();
-    const presenceProps = usePresencePropsContext();
-    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    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}/>

package/source/dialog/dialog-root.jsx

@@ -1,11 +1,13 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
-import { PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { RenderStrategyProvider, splitRenderStrategyProps } from '../render-strategy';
 import { runIfFn } from '../run-if-fn';
 import { DialogProvider } from './dialog-context';
 import { useDialog } from './use-dialog';
 export const DialogRoot = (props) => {
     const [presenceProps, dialogProps] = splitPresenceProps(props);
+    const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
     const [useDialogProps, localProps] = createSplitProps()(dialogProps, [
         'aria-label',
         'closeOnEscapeKeyDown',
@@ -32,8 +34,8 @@ export const DialogRoot = (props) => {
     const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
     const getChildren = () => runIfFn(localProps.children, api);
     return (<DialogProvider value={api}>
-      <PresencePropsProvider value={presenceProps}>
+      <RenderStrategyProvider value={renderStrategyProps}>
         <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
-      </PresencePropsProvider>
+      </RenderStrategyProvider>
     </DialogProvider>);
 };

package/source/dialog/use-dialog.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useDialog = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
     const [state, send] = useMachine(dialog.machine(context), { context });
     return createMemo(() => dialog.connect(state, send, normalizeProps));
 };

package/source/hover-card/use-hover-card.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useHoverCard = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
     const [state, send] = useMachine(hoverCard.machine(context), { context });
     return createMemo(() => hoverCard.connect(state, send, normalizeProps));
 };

package/source/index.jsx

@@ -2,6 +2,8 @@ export * from './accordion';
 export * from './avatar';
 export * from './carousel';
 export * from './checkbox';
+export * from './clipboard';
+export * from './collapsible';
 export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';
@@ -11,6 +13,7 @@ export * from './environment';
 export * from './factory';
 export * from './file-upload';
 export * from './hover-card';
+export * from './locale';
 export * from './menu';
 export * from './number-input';
 export * from './pagination';

package/source/locale/index.js

@@ -0,0 +1,2 @@
+export { LocaleProvider } from './locale';
+export { useLocaleContext } from './locale-context';

package/source/locale/locale-context.jsx

@@ -0,0 +1,7 @@
+import { createContext } from '../create-context';
+export const [LocaleContextProvider, useLocaleContext] = createContext({
+    hookName: 'useEnvironmentContext',
+    providerName: '<EnvironmentProvider />',
+    strict: false,
+    defaultValue: () => ({ dir: 'ltr', locale: 'en-US' }),
+});

package/source/locale/locale.jsx

@@ -0,0 +1,24 @@
+import { isRTL, trackLocale } from '@zag-js/i18n-utils';
+import { createEffect, createMemo, createSignal, onCleanup, splitProps, } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+import { LocaleContextProvider } from './locale-context';
+export const LocaleProvider = (props) => {
+    const [localeProps, restProps] = splitProps(props, ['locale', 'defaultLocale']);
+    const [locale, setLocale] = createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
+    const getRootNode = useEnvironmentContext();
+    createEffect(() => {
+        const cleanup = trackLocale({
+            locale: localeProps.locale,
+            getRootNode,
+            onLocaleChange(locale) {
+                setLocale(locale.locale);
+            },
+        });
+        onCleanup(cleanup);
+    });
+    const context = createMemo(() => ({
+        locale: locale(),
+        dir: isRTL(locale()) ? 'rtl' : 'ltr',
+    }));
+    return <LocaleContextProvider value={context}>{restProps.children}</LocaleContextProvider>;
+};

package/source/menu/use-menu.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useMenu = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
     const [state, send, machine] = useMachine(menu.machine(context), { context });
     return createMemo(() => ({
         api: () => menu.connect(state, send, normalizeProps),

package/source/popover/use-popover.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const usePopover = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
     const [state, send] = useMachine(popover.machine(context), { context });
     return createMemo(() => popover.connect(state, send, normalizeProps));
 };

package/source/presence/index.js

@@ -1,6 +1,5 @@
 import { Presence } from './presence';
 import { PresenceProvider, usePresenceContext } from './presence-context';
-import { PresencePropsProvider, usePresencePropsContext, } from './presence-props-context';
 import { splitPresenceProps } from './split-presence-props';
 import { usePresence } from './use-presence';
-export { Presence, PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext, usePresencePropsContext, };
+export { Presence, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext };

package/source/presence/split-presence-props.js

@@ -1,9 +1,7 @@
 import { createSplitProps } from '../create-split-props';
-export function splitPresenceProps(props) {
-    return createSplitProps()(props, [
-        'lazyMount',
-        'onExitComplete',
-        'present',
-        'unmountOnExit',
-    ]);
-}
+export const splitPresenceProps = (props) => createSplitProps()(props, [
+    'lazyMount',
+    'onExitComplete',
+    'present',
+    'unmountOnExit',
+]);