@ark-ui/solid 1.0.0-beta.1 → 1.0.0-beta.3

package/source/spread.js

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { createMemo, mergeProps } from 'solid-js';
+import { spread as solidSpread } from 'solid-js/web';
+import { mergeStyle } from './merge-style';
+const getEventKey = (key) => `$$${key.toLowerCase().slice(2)}`;
+const hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
+function mapProps(props, mapper) {
+    return Object.fromEntries(Object.entries(props).map(([key, value]) => [key, mapper(key, value)]));
+}
+export const spread = (node, props) => {
+    const nodeEvents = Object.fromEntries(Object.keys(node)
+        .filter((prop) => prop.startsWith('$$'))
+        // @ts-expect-error - fix later
+        .map((prop) => [prop, node[prop]]));
+    const childProps = createMemo(() => mapProps(props, (key, value) => {
+        const eventKey = getEventKey(key);
+        // event composition
+        if (hasOwn(nodeEvents, eventKey)) {
+            return function next(...args) {
+                if (typeof value === 'function')
+                    value(...args);
+                nodeEvents[eventKey](...args);
+            };
+        }
+        // style composition
+        if (key === 'style') {
+            return mergeStyle(node.style.cssText, value);
+        }
+        // class composition
+        if (key === 'class') {
+            return [node.className, value].filter(Boolean).join(' ');
+        }
+        // don't override existing child attributes
+        if (node.hasAttribute(key))
+            return;
+        return value;
+    }));
+    solidSpread(node, mergeProps(childProps));
+};

package/source/ssr-spread.js

@@ -0,0 +1,19 @@
+import { filterBooleanAttributeValues, filterEmptyValues, filterFunctionValues, } from './filter-object';
+import { mergeStyle } from './merge-style';
+import { parse, render } from './parse-template';
+import { pipe } from './pipe';
+export const ssrSpread = (children, attributes) => {
+    if (isJSXElement(children))
+        return children;
+    const { t } = children;
+    const ast = parse(t);
+    const [node] = ast.children;
+    const mergedAttributes = Object.assign({}, attributes, {
+        class: [attributes?.class, node.attributes.class].filter(Boolean).join(' '),
+        style: mergeStyle(attributes.style, node.attributes.style),
+    });
+    const ssrAttributes = pipe(mergedAttributes, filterEmptyValues, filterFunctionValues, filterBooleanAttributeValues);
+    Object.assign(node.attributes, ssrAttributes);
+    return { t: render(ast) };
+};
+const isJSXElement = (children) => !Object.hasOwnProperty.call(children, 't');

package/source/switch/index.js

@@ -0,0 +1,12 @@
+import { Switch as SwitchRoot } from './switch';
+import { useSwitchContext } from './switch-context';
+import { SwitchControl } from './switch-control';
+import { SwitchLabel } from './switch-label';
+import { SwitchThumb } from './switch-thumb';
+const Switch = Object.assign(SwitchRoot, {
+    Root: SwitchRoot,
+    Control: SwitchControl,
+    Label: SwitchLabel,
+    Thumb: SwitchThumb,
+});
+export { Switch, SwitchControl, SwitchLabel, SwitchThumb, useSwitchContext };

package/source/switch/switch-context.js

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

package/source/switch/switch-control.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSwitchContext } from './switch-context';
+export const SwitchControl = (props) => {
+    const api = useSwitchContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return (<>
+      <ark.span {...mergedProps}/>
+      <input {...api().hiddenInputProps}/>
+    </>);
+};

package/source/switch/switch-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSwitchContext } from './switch-context';
+export const SwitchLabel = (props) => {
+    const checkbox = useSwitchContext();
+    const labelProps = mergeProps(() => checkbox().labelProps, props);
+    return <ark.span {...labelProps}/>;
+};

package/source/switch/switch-thumb.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSwitchContext } from './switch-context';
+export const SwitchThumb = (props) => {
+    const checkbox = useSwitchContext();
+    const thumbProps = mergeProps(() => checkbox().thumbProps, props);
+    return <ark.span {...thumbProps}/>;
+};

package/source/switch/switch.jsx

@@ -0,0 +1,29 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { SwitchProvider } from './switch-context';
+import { useSwitch } from './use-switch';
+export const Switch = (props) => {
+    const [switchProps, labelProps] = createSplitProps()(props, [
+        'checked',
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'invalid',
+        'label',
+        'name',
+        'onCheckedChange',
+        'required',
+        'value',
+    ]);
+    const api = useSwitch(switchProps);
+    const mergedProps = mergeProps(() => api().rootProps, labelProps);
+    const getChildren = () => runIfFn(props.children, api);
+    return (<SwitchProvider value={api}>
+      <ark.label {...mergedProps}>{getChildren()}</ark.label>
+    </SwitchProvider>);
+};

package/source/switch/use-switch.js

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

package/source/tabs/index.js

@@ -0,0 +1,14 @@
+import { TabContent } from './tab-content';
+import { TabIndicator } from './tab-indicator';
+import { TabList } from './tab-list';
+import { TabTrigger } from './tab-trigger';
+import { Tabs as TabsRoot } from './tabs';
+import { useTabsContext } from './tabs-context';
+const Tabs = Object.assign(TabsRoot, {
+    Root: TabsRoot,
+    Content: TabContent,
+    Indicator: TabIndicator,
+    List: TabList,
+    Trigger: TabTrigger,
+});
+export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, useTabsContext };

package/source/tabs/tab-content.jsx

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { splitPresenceProps } from '../presence';
+import { TabPresence } from './tab-presence';
+import { useTabsContext } from './tabs-context';
+export const TabContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const [getContentProps, restProps] = createSplitProps()(localProps, ['value']);
+    const api = useTabsContext();
+    const contentProps = mergeProps(() => api().getContentProps(getContentProps), restProps);
+    return (<TabPresence {...presenceProps} {...getContentProps}>
+      <ark.div {...contentProps}/>
+    </TabPresence>);
+};

package/source/tabs/tab-indicator.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTabsContext } from './tabs-context';
+export const TabIndicator = (props) => {
+    const api = useTabsContext();
+    const indicatorProps = mergeProps(() => api().indicatorProps, props);
+    return <ark.div {...indicatorProps}/>;
+};

package/source/tabs/tab-list.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTabsContext } from './tabs-context';
+export const TabList = (props) => {
+    const api = useTabsContext();
+    const tablistProps = mergeProps(() => api().tablistProps, props);
+    return <ark.div {...tablistProps}/>;
+};

package/source/tabs/tab-presence.jsx

@@ -0,0 +1,6 @@
+import { Presence } from '../presence';
+import { useTabsContext } from './tabs-context';
+export const TabPresence = (props) => {
+    const api = useTabsContext();
+    return <Presence present={api().value === props.value} {...props}/>;
+};

package/source/tabs/tab-trigger.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useTabsContext } from './tabs-context';
+export const TabTrigger = (props) => {
+    const [tabParams, restProps] = createSplitProps()(props, ['disabled', 'value']);
+    const api = useTabsContext();
+    const triggerProps = mergeProps(() => api().getTriggerProps(tabParams), restProps);
+    return <ark.button {...triggerProps}/>;
+};

package/source/tabs/tabs-context.js

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

package/source/tabs/tabs.jsx

@@ -0,0 +1,25 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { TabsProvider } from './tabs-context';
+import { useTabs } from './use-tabs';
+export const Tabs = (props) => {
+    const [tabsParams, restProps] = createSplitProps()(props, [
+        'activationMode',
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'loop',
+        'onFocusChange',
+        'onValueChange',
+        'orientation',
+        'translations',
+        'value',
+    ]);
+    const api = useTabs(tabsParams);
+    const rootProps = mergeProps(() => api().rootProps, restProps);
+    return (<TabsProvider value={api}>
+      <ark.div {...rootProps}/>
+    </TabsProvider>);
+};

package/source/tabs/use-tabs.js

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

package/source/tags-input/index.js

@@ -0,0 +1,23 @@
+import { TagsInput as TagsInputRoot } from './tags-input';
+import { TagsInputClearTrigger } from './tags-input-clear-trigger';
+import { useTagsInputContext } from './tags-input-context';
+import { TagsInputControl } from './tags-input-control';
+import { TagsInputInput } from './tags-input-input';
+import { TagsInputItem } from './tags-input-item';
+import { useTagsInputItemContext } from './tags-input-item-context';
+import { TagsInputItemDeleteTrigger, } from './tags-input-item-delete-trigger';
+import { TagsInputItemInput } from './tags-input-item-input';
+import { TagsInputItemText } from './tags-input-item-text';
+import { TagsInputLabel } from './tags-input-label';
+const TagsInput = Object.assign(TagsInputRoot, {
+    Root: TagsInputRoot,
+    ClearTrigger: TagsInputClearTrigger,
+    Control: TagsInputControl,
+    Input: TagsInputInput,
+    Item: TagsInputItem,
+    ItemDeleteTrigger: TagsInputItemDeleteTrigger,
+    ItemInput: TagsInputItemInput,
+    ItemText: TagsInputItemText,
+    Label: TagsInputLabel,
+});
+export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, useTagsInputContext, useTagsInputItemContext, };

package/source/tags-input/tags-input-clear-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTagsInputContext } from './tags-input-context';
+export const TagsInputClearTrigger = (props) => {
+    const api = useTagsInputContext();
+    const mergedProps = mergeProps(() => api().clearTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/tags-input/tags-input-context.js

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

package/source/tags-input/tags-input-control.jsx

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

package/source/tags-input/tags-input-input.jsx

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

package/source/tags-input/tags-input-item-context.js

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

package/source/tags-input/tags-input-item-delete-trigger.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTagsInputContext } from './tags-input-context';
+import { useTagsInputItemContext } from './tags-input-item-context';
+export const TagsInputItemDeleteTrigger = (props) => {
+    const api = useTagsInputContext();
+    const itemProps = useTagsInputItemContext();
+    const mergedProps = mergeProps(() => api().getItemDeleteTriggerProps(itemProps), props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/tags-input/tags-input-item-input.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTagsInputContext } from './tags-input-context';
+import { useTagsInputItemContext } from './tags-input-item-context';
+export const TagsInputItemInput = (props) => {
+    const api = useTagsInputContext();
+    const itemProps = useTagsInputItemContext();
+    const mergedProps = mergeProps(() => api().getItemInputProps(itemProps), props);
+    return <ark.input {...mergedProps}/>;
+};

package/source/tags-input/tags-input-item-text.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTagsInputContext } from './tags-input-context';
+import { useTagsInputItemContext } from './tags-input-item-context';
+export const TagsInputItemText = (props) => {
+    const api = useTagsInputContext();
+    const itemProps = useTagsInputItemContext();
+    const mergedProps = mergeProps(() => api().getItemTextProps(itemProps), props);
+    return <ark.span {...mergedProps}/>;
+};

package/source/tags-input/tags-input-item.jsx

@@ -0,0 +1,19 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useTagsInputContext } from './tags-input-context';
+import { TagsInputItemProvider } from './tags-input-item-context';
+export const TagsInputItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, [
+        'disabled',
+        'index',
+        'value',
+    ]);
+    const api = useTagsInputContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+    return (<TagsInputItemProvider value={itemProps}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </TagsInputItemProvider>);
+};

package/source/tags-input/tags-input-label.jsx

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

package/source/tags-input/tags-input.jsx

@@ -0,0 +1,44 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { TagsInputProvider } from './tags-input-context';
+import { useTagsInput } from './use-tags-input';
+export const TagsInput = (props) => {
+    const [tagsInputParams, restProps] = createSplitProps()(props, [
+        'addOnPaste',
+        'allowEditTag',
+        'allowOverflow',
+        'autoFocus',
+        'blurBehavior',
+        'delimiter',
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'inputValue',
+        'invalid',
+        'max',
+        'maxLength',
+        'name',
+        'onFocusOutside',
+        'onHighlightChange',
+        'onInteractOutside',
+        'onPointerDownOutside',
+        'onValueChange',
+        'onValueInvalid',
+        'readOnly',
+        'translations',
+        'validate',
+        'value',
+    ]);
+    const api = useTagsInput(tagsInputParams);
+    const mergedProps = mergeProps(() => api().rootProps, restProps);
+    const getChildren = () => runIfFn(restProps.children, api);
+    return (<TagsInputProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      <input {...api().hiddenInputProps}/>
+    </TagsInputProvider>);
+};

package/source/tags-input/use-tags-input.js

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

package/source/toast/create-toaster.jsx

@@ -0,0 +1,31 @@
+import { mergeProps, normalizeProps, useActor } from '@zag-js/solid';
+import * as toast from '@zag-js/toast';
+import { Index, createEffect, createMemo, onCleanup } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+import { ark } from '../factory';
+import { ToastProvider } from './toast-context';
+export const createToaster = (props) => {
+    const { placement, ...rest } = props;
+    const service = toast.group.machine({ id: '1', placement, ...rest }).start();
+    const [state, send] = useActor(service);
+    const api = createMemo(() => toast.group.connect(state, send, normalizeProps));
+    const Toaster = (props) => {
+        const getRootNode = useEnvironmentContext();
+        createEffect(() => {
+            service.setContext({ getRootNode });
+            onCleanup(() => service.stop());
+        });
+        const mergedProps = mergeProps(() => api().getGroupProps({ placement }), props);
+        return (<ark.ol {...mergedProps}>
+        <Index each={api().toastsByPlacement[placement]}>
+          {(toast) => <ToastProviderFactory service={toast()}/>}
+        </Index>
+      </ark.ol>);
+    };
+    return [Toaster, api];
+};
+const ToastProviderFactory = (props) => {
+    const [state, send] = useActor(props.service);
+    const api = toast.connect(state, send, normalizeProps);
+    return <ToastProvider value={createMemo(() => api)}>{state.context.render?.(api)}</ToastProvider>;
+};

package/source/toast/index.js

@@ -0,0 +1,12 @@
+import { createToaster } from './create-toaster';
+import { Toast as ToastRoot } from './toast';
+import { ToastCloseTrigger } from './toast-close-trigger';
+import { ToastDescription } from './toast-description';
+import { ToastTitle } from './toast-title';
+const Toast = Object.assign(ToastRoot, {
+    Root: ToastRoot,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    CloseTrigger: ToastCloseTrigger,
+});
+export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastTitle };

package/source/toast/toast-close-trigger.jsx

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

package/source/toast/toast-context.js

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

package/source/toast/toast-description.jsx

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

package/source/toast/toast-title.jsx

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

package/source/toast/toast.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useToastContext } from './toast-context';
+export const Toast = (props) => {
+    const api = useToastContext();
+    const mergedProps = mergeProps(() => api().rootProps, props);
+    return <ark.li {...mergedProps}/>;
+};

package/source/toggle-group/index.js

@@ -0,0 +1,8 @@
+import { ToggleGroup as ToggleGroupRoot } from './toggle-group';
+import { useToggleGroupContext } from './toggle-group-context';
+import { ToggleGroupItem } from './toggle-group-item';
+const ToggleGroup = Object.assign(ToggleGroupRoot, {
+    Root: ToggleGroupRoot,
+    Item: ToggleGroupItem,
+});
+export { ToggleGroup, ToggleGroupItem, useToggleGroupContext };

package/source/toggle-group/toggle-group-context.js

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

package/source/toggle-group/toggle-group-item.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useToggleGroupContext } from './toggle-group-context';
+export const ToggleGroupItem = (props) => {
+    const [toggleProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
+    const api = useToggleGroupContext();
+    const mergedProps = mergeProps(() => api().getItemProps(toggleProps), restProps);
+    return <ark.button {...mergedProps}/>;
+};

package/source/toggle-group/toggle-group.jsx

@@ -0,0 +1,25 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { ToggleGroupProvider } from './toggle-group-context';
+import { useToggleGroup } from './use-toggle-group';
+export const ToggleGroup = (props) => {
+    const [groupParams, restProps] = createSplitProps()(props, [
+        'dir',
+        'disabled',
+        'getRootNode',
+        'id',
+        'ids',
+        'loop',
+        'multiple',
+        'onValueChange',
+        'orientation',
+        'rovingFocus',
+        'value',
+    ]);
+    const api = useToggleGroup(groupParams);
+    const rootProps = mergeProps(() => api().rootProps, restProps);
+    return (<ToggleGroupProvider value={api}>
+      <ark.div {...rootProps}/>
+    </ToggleGroupProvider>);
+};

package/source/toggle-group/use-toggle-group.js

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