@ark-ui/solid 2.1.0 → 2.2.0

package/source/presence/use-presence.js

@@ -1,11 +1,12 @@
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/solid';
-import { createEffect, createMemo, createSignal, splitProps } from 'solid-js';
+import { createEffect, createMemo, createSignal } from 'solid-js';
+import { splitRenderStrategyProps } from '../render-strategy';
 export const usePresence = (props) => {
-    const [localProps, machineProps] = splitProps(props, ['lazyMount', 'unmountOnExit']);
+    const [renderStrategyProps, context] = splitRenderStrategyProps(props);
     const [wasEverPresent, setWasEverPresent] = createSignal(false);
-    const [state, send] = useMachine(presence.machine(machineProps), {
-        context: machineProps,
+    const [state, send] = useMachine(presence.machine(context), {
+        context,
     });
     const api = createMemo(() => presence.connect(state, send, normalizeProps));
     createEffect(() => {
@@ -14,13 +15,13 @@ export const usePresence = (props) => {
             setWasEverPresent(true);
     });
     return createMemo(() => ({
-        isUnmounted: (!api().isPresent && !wasEverPresent() && localProps.lazyMount) ||
-            (localProps.unmountOnExit && !api().isPresent && wasEverPresent()),
+        isUnmounted: (!api().isPresent && !wasEverPresent() && renderStrategyProps.lazyMount) ||
+            (renderStrategyProps.unmountOnExit && !api().isPresent && wasEverPresent()),
         isPresent: api().isPresent,
         presenceProps: {
             ref: api().setNode,
             hidden: !api().isPresent,
-            'data-state': machineProps.present ? 'open' : 'closed',
+            'data-state': context.present ? 'open' : 'closed',
         },
     }));
 };

package/source/render-strategy.js

@@ -0,0 +1,7 @@
+import { createContext } from './create-context';
+import { createSplitProps } from './create-split-props';
+export const [RenderStrategyProvider, useRenderStrategyContext] = createContext({
+    hookName: 'useRenderStrategyContext',
+    providerName: '<RenderStrategyProvider />',
+});
+export const splitRenderStrategyProps = (props) => createSplitProps()(props, ['lazyMount', 'unmountOnExit']);

package/source/select/use-select.js

@@ -16,7 +16,6 @@ export const useSelect = (props) => {
         id: createUniqueId(),
         getRootNode,
         collection: collection(),
-        'open.controlled': props.open !== undefined,
     }, rest);
     const [state, send] = useMachine(select.machine(context()), {
         context,

package/source/splitter/splitter-root.jsx

@@ -12,7 +12,6 @@ export const SplitterRoot = (props) => {
         'ids',
         'onSizeChange',
         'onSizeChangeEnd',
-        'onSizeChangeStart',
         'orientation',
         'size',
     ]);

package/source/tabs/tab-content.jsx

@@ -2,13 +2,14 @@ import { mergeProps } from '@zag-js/solid';
 import { Show } from 'solid-js';
 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 { useTabsContext } from './tabs-context';
 export const TabContent = (props) => {
     const [contentProps, localProps] = createSplitProps()(props, ['value']);
     const api = useTabsContext();
-    const presenceProps = usePresencePropsContext();
-    const presenceApi = usePresence(mergeProps(presenceProps, () => ({ present: api().value === contentProps.value })));
+    const renderStrategyProps = useRenderStrategyContext();
+    const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({ present: api().value === contentProps.value })));
     const mergedProps = mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
     return (<PresenceProvider value={presenceApi}>
       <Show when={!presenceApi().isUnmounted}>

package/source/tabs/tabs-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 { TabsProvider } from './tabs-context';
 import { useTabs } from './use-tabs';
 export const TabsRoot = (props) => {
-    const [presenceProps, tabsProps] = splitPresenceProps(props);
+    const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
     const [tabsParams, restProps] = createSplitProps()(tabsProps, [
         'activationMode',
         'dir',
@@ -22,8 +22,8 @@ export const TabsRoot = (props) => {
     const api = useTabs(tabsParams);
     const mergedProps = mergeProps(() => api().rootProps, restProps);
     return (<TabsProvider value={api}>
-      <PresencePropsProvider value={presenceProps}>
+      <RenderStrategyProvider value={renderStrategyProps}>
         <ark.div {...mergedProps}/>
-      </PresencePropsProvider>
+      </RenderStrategyProvider>
     </TabsProvider>);
 };

package/source/tooltip/use-tooltip.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useTooltip = (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(tooltip.machine(context), { context });
     return createMemo(() => tooltip.connect(state, send, normalizeProps));
 };

package/source/tree-view/tree-view-branch-indicator.jsx

@@ -1,4 +1,3 @@
-import { treeViewAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useTreeViewBranchContext } from './tree-view-branch-context';
@@ -6,8 +5,6 @@ import { useTreeViewContext } from './tree-view-context';
 export const TreeViewBranchIndicator = (props) => {
     const api = useTreeViewContext();
     const branchProps = useTreeViewBranchContext();
-    const mergedProps = mergeProps(() => api().getBranchProps(branchProps), 
-    // TODO use api.getBranchIndicatorProps() when available
-    treeViewAnatomy.build().branchIndicator.attrs, props);
+    const mergedProps = mergeProps(() => api().getBranchIndicatorProps(branchProps), props);
     return <ark.div {...mergedProps}/>;
 };

package/types/clipboard/clipboard-context.d.ts

@@ -0,0 +1,4 @@
+import { type UseClipboardReturn } from './use-clipboard';
+export interface ClipboardContext extends UseClipboardReturn {
+}
+export declare const ClipboardProvider: import("solid-js").ContextProviderComponent<ClipboardContext>, useClipboardContext: () => ClipboardContext;

package/types/clipboard/clipboard-control.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ClipboardControlProps extends HTMLArkProps<'div'> {
+}
+export declare const ClipboardControl: ArkComponent<'div'>;

package/types/clipboard/clipboard-indicator.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+interface ElementProps {
+    copied?: JSX.Element;
+}
+export interface ClipboardIndicatorProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const ClipboardIndicator: ArkComponent<'div', ElementProps>;
+export {};

package/types/clipboard/clipboard-input.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ClipboardInputProps extends HTMLArkProps<'input'> {
+}
+export declare const ClipboardInput: ArkComponent<'input'>;

package/types/clipboard/clipboard-label.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ClipboardLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const ClipboardLabel: ArkComponent<'label'>;

package/types/clipboard/clipboard-root.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseClipboardProps, type UseClipboardReturn } from './use-clipboard';
+interface ElementProps extends UseClipboardProps {
+    children?: JSX.Element | ((api: UseClipboardReturn) => JSX.Element);
+}
+export interface ClipboardRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const ClipboardRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/clipboard/clipboard-trigger.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ClipboardTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const ClipboardTrigger: ArkComponent<'button'>;

package/types/clipboard/clipboard.d.ts

@@ -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/types/clipboard/index.d.ts

@@ -0,0 +1,11 @@
+import { type CopyStatusDetails as ClipboardCopyStatusDetails } from '@zag-js/clipboard';
+import { useClipboardContext, type ClipboardContext } from './clipboard-context';
+import { ClipboardControl, type ClipboardControlProps } from './clipboard-control';
+import { ClipboardIndicator, type ClipboardIndicatorProps } from './clipboard-indicator';
+import { ClipboardInput, type ClipboardInputProps } from './clipboard-input';
+import { ClipboardLabel, type ClipboardLabelProps } from './clipboard-label';
+import { ClipboardRoot, type ClipboardRootProps } from './clipboard-root';
+import { ClipboardTrigger, type ClipboardTriggerProps } from './clipboard-trigger';
+export * as Clipboard from './clipboard';
+export { ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, useClipboardContext, };
+export type { ClipboardContext, ClipboardControlProps, ClipboardCopyStatusDetails, ClipboardIndicatorProps, ClipboardInputProps, ClipboardLabelProps, ClipboardRootProps, ClipboardTriggerProps, };

package/types/clipboard/use-clipboard.d.ts

@@ -0,0 +1,9 @@
+import * as clipboard from '@zag-js/clipboard';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
+import { type Optional } from '../types';
+export interface UseClipboardProps extends Optional<clipboard.Context, 'id'> {
+}
+export interface UseClipboardReturn extends Accessor<clipboard.Api<PropTypes>> {
+}
+export declare const useClipboard: (props: UseClipboardProps) => UseClipboardReturn;

package/types/collapsible/collapsible-content.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface CollapsibleContentProps extends HTMLArkProps<'div'> {
+}
+export declare const CollapsibleContent: ArkComponent<'div'>;

package/types/collapsible/collapsible-context.d.ts

@@ -0,0 +1,4 @@
+import { type UseCollapsibleReturn } from './use-collapsible';
+export interface CollapsibleContext extends UseCollapsibleReturn {
+}
+export declare const CollapsibleProvider: import("solid-js").ContextProviderComponent<CollapsibleContext>, useCollapsibleContext: () => CollapsibleContext;

package/types/collapsible/collapsible-root.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseCollapsibleProps } from './use-collapsible';
+export interface CollapsibleRootProps extends Assign<HTMLArkProps<'div'>, UseCollapsibleProps> {
+}
+export declare const CollapsibleRoot: ArkComponent<'div', UseCollapsibleProps>;

package/types/collapsible/collapsible-trigger.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface CollapsibleTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const CollapsibleTrigger: ArkComponent<'button'>;

package/types/collapsible/collapsible.d.ts

@@ -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/types/collapsible/index.d.ts

@@ -0,0 +1,8 @@
+import type { OpenChangeDetails as CollapsibleOpenChangeDetails } from '@zag-js/collapsible';
+import { CollapsibleContent, type CollapsibleContentProps } from './collapsible-content';
+import { useCollapsibleContext, type CollapsibleContext } from './collapsible-context';
+import { CollapsibleRoot, type CollapsibleRootProps } from './collapsible-root';
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from './collapsible-trigger';
+export * as Collapsible from './collapsible';
+export { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useCollapsibleContext };
+export type { CollapsibleContentProps, CollapsibleContext, CollapsibleOpenChangeDetails, CollapsibleRootProps, CollapsibleTriggerProps, };

package/types/collapsible/use-collapsible.d.ts

@@ -0,0 +1,15 @@
+import * as collapsible from '@zag-js/collapsible';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
+import { type RenderStrategyProps } from '../render-strategy';
+import { type Optional } from '../types';
+export interface UseCollapsibleProps extends Optional<Omit<collapsible.Context, 'open.controlled'>, 'id'>, RenderStrategyProps {
+}
+export interface UseCollapsibleReturn extends Accessor<collapsible.Api<PropTypes> & {
+    /**
+     * Whether the content is unmounted
+     */
+    isUnmounted?: boolean;
+}> {
+}
+export declare const useCollapsible: (props: UseCollapsibleProps) => UseCollapsibleReturn;

package/types/index.d.ts

@@ -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/types/locale/index.d.ts

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

package/types/locale/locale-context.d.ts

@@ -0,0 +1,5 @@
+import { type Locale } from '@zag-js/i18n-utils';
+import type { Accessor } from 'solid-js';
+export interface LocaleContext extends Locale {
+}
+export declare const LocaleContextProvider: import("solid-js").ContextProviderComponent<Accessor<LocaleContext>>, useLocaleContext: () => Accessor<LocaleContext>;

package/types/locale/locale.d.ts

@@ -0,0 +1,9 @@
+import { type LocaleOptions } from '@zag-js/i18n-utils';
+import { type ParentProps } from 'solid-js';
+export interface LocaleProviderProps extends LocaleOptions, ParentProps {
+    /**
+     * The default locale to use if no locale is provided via props.
+     */
+    defaultLocale?: string;
+}
+export declare const LocaleProvider: (props: LocaleProviderProps) => import("solid-js").JSX.Element;

package/types/menu/menu-item-group.d.ts

@@ -1,8 +1,6 @@
+import type { ItemGroupProps } from '@zag-js/menu';
 import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-import { type UseMenuReturn } from './use-menu';
-type MenuItemGroupParams = Parameters<ReturnType<ReturnType<UseMenuReturn>['api']>['getItemGroupProps']>[0];
-export interface MenuItemGroupProps extends Assign<HTMLArkProps<'div'>, MenuItemGroupParams> {
+export interface MenuItemGroupProps extends Assign<HTMLArkProps<'div'>, ItemGroupProps> {
 }
-export declare const MenuItemGroup: ArkComponent<'div', MenuItemGroupParams>;
-export {};
+export declare const MenuItemGroup: ArkComponent<'div', ItemGroupProps>;

package/types/presence/index.d.ts

@@ -1,7 +1,6 @@
 import { Presence, type PresenceProps } from './presence';
 import { PresenceProvider, usePresenceContext, type PresenceContext } from './presence-context';
-import { PresencePropsProvider, usePresencePropsContext, type PresencePropsContext } from './presence-props-context';
 import { splitPresenceProps } from './split-presence-props';
 import { usePresence, type UsePresenceProps, type UsePresenceReturn } from './use-presence';
-export { Presence, PresencePropsProvider, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext, usePresencePropsContext, };
-export type { PresenceContext, PresenceProps, PresencePropsContext, UsePresenceProps, UsePresenceReturn, };
+export { Presence, PresenceProvider, splitPresenceProps, usePresence, usePresenceContext };
+export type { PresenceContext, PresenceProps, UsePresenceProps, UsePresenceReturn };

package/types/presence/split-presence-props.d.ts

@@ -1,2 +1,2 @@
 import type { UsePresenceProps } from './use-presence';
-export declare function splitPresenceProps<T>(props: T & UsePresenceProps): [Pick<T & UsePresenceProps, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">, T & UsePresenceProps extends infer T_1 ? { [P in keyof T_1 as Exclude<P, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">]: (T & UsePresenceProps)[P]; } : never];
+export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [Pick<T, Extract<("present" | "onExitComplete" | "lazyMount" | "unmountOnExit")[], readonly (keyof T)[]>[number]>, { [P in keyof T as Exclude<P, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">]: T[P]; }];

package/types/presence/use-presence.d.ts

@@ -1,16 +1,7 @@
 import * as presence from '@zag-js/presence';
+import { type RenderStrategyProps } from '../render-strategy';
 import type { Optional } from '../types';
-export interface UsePresenceProps extends Optional<presence.Context, 'present'> {
-    /**
-     * Whether to enable lazy mounting
-     * @default false
-     */
-    lazyMount?: boolean;
-    /**
-     * Whether to unmount on exit.
-     * @default false
-     */
-    unmountOnExit?: boolean;
+export interface UsePresenceProps extends Optional<presence.Context, 'present'>, RenderStrategyProps {
 }
 export interface UsePresenceReturn extends ReturnType<typeof usePresence> {
 }

package/types/render-strategy.d.ts

@@ -0,0 +1,14 @@
+export interface RenderStrategyProps {
+    /**
+     * Whether to enable lazy mounting
+     * @default false
+     */
+    lazyMount?: boolean;
+    /**
+     * Whether to unmount on exit.
+     * @default false
+     */
+    unmountOnExit?: boolean;
+}
+export declare const RenderStrategyProvider: import("solid-js").ContextProviderComponent<RenderStrategyProps>, useRenderStrategyContext: () => RenderStrategyProps;
+export declare const splitRenderStrategyProps: <T extends RenderStrategyProps>(props: T) => [Pick<T, Extract<("lazyMount" | "unmountOnExit")[], readonly (keyof T)[]>[number]>, { [P in keyof T as Exclude<P, "lazyMount" | "unmountOnExit">]: T[P]; }];

package/types/tabs/tabs-root.d.ts

@@ -1,8 +1,8 @@
 import { type ArkComponent, type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
+import { type RenderStrategyProps } from '../render-strategy';
 import type { Assign } from '../types';
 import { type UseTabsProps } from './use-tabs';
-interface ElementProps extends UseTabsProps, UsePresenceProps {
+interface ElementProps extends UseTabsProps, RenderStrategyProps {
 }
 export interface TabsRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
 }

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

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

package/types/presence/presence-props-context.d.ts

@@ -1,4 +0,0 @@
-import type { UsePresenceProps } from './use-presence';
-export interface PresencePropsContext extends UsePresenceProps {
-}
-export declare const PresencePropsProvider: import("solid-js").ContextProviderComponent<PresencePropsContext>, usePresencePropsContext: () => PresencePropsContext;