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

package/source/popover/popover-anchor.jsx

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

package/source/popover/popover-arrow-tip.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { usePopoverContext } from './popover-context';
+export const PopoverArrowTip = (props) => {
+    const popover = usePopoverContext();
+    const arrowTipProps = mergeProps(() => popover().arrowTipProps, props);
+    return <ark.div {...arrowTipProps}/>;
+};

package/source/popover/popover-arrow.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { usePopoverContext } from './popover-context';
+export const PopoverArrow = (props) => {
+    const popover = usePopoverContext();
+    const arrowProps = mergeProps(() => popover().arrowProps, props);
+    return <ark.div {...arrowProps}/>;
+};

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

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

package/source/popover/popover-content.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { Presence, splitPresenceProps } from '../presence';
+import { usePopoverContext } from './popover-context';
+export const PopoverContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = usePopoverContext();
+    const mergedProps = mergeProps(() => api().contentProps, localProps);
+    return (<Presence present={api().isOpen} {...presenceProps}>
+      <ark.div {...mergedProps}/>
+    </Presence>);
+};

package/source/popover/popover-context.js

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

package/source/popover/popover-description.jsx

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

package/source/popover/popover-indicator.jsx

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

package/source/popover/popover-positioner.jsx

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

package/source/popover/popover-title.jsx

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

package/source/popover/popover-trigger.jsx

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

package/source/popover/popover.jsx

@@ -0,0 +1,26 @@
+import { createSplitProps } from '../create-split-props';
+import { PopoverProvider } from './popover-context';
+import { usePopover } from './use-popover';
+export const Popover = (props) => {
+    const [usePopoverProps, restProps] = createSplitProps()(props, [
+        'autoFocus',
+        'closeOnEsc',
+        'closeOnInteractOutside',
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'initialFocusEl',
+        'modal',
+        'onEscapeKeyDown',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'open',
+        'portalled',
+        'positioning',
+    ]);
+    const api = usePopover(usePopoverProps);
+    return <PopoverProvider value={api}>{restProps.children}</PopoverProvider>;
+};

package/source/popover/use-popover.js

@@ -0,0 +1,10 @@
+import * as popover from '@zag-js/popover';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const usePopover = (props) => {
+    const getRootNode = useEnvironmentContext();
+    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

@@ -0,0 +1,6 @@
+import { Presence as PresenceRoot } from './presence';
+import { splitPresenceProps } from './split-presence-props';
+const Presence = Object.assign(PresenceRoot, {
+    Root: PresenceRoot,
+});
+export { Presence, splitPresenceProps };

package/source/presence/presence.jsx

@@ -0,0 +1,32 @@
+import { children, createEffect, createSignal } from 'solid-js';
+import { spread } from 'solid-js/web';
+import { createSplitProps } from '../create-split-props';
+import { usePresence } from './use-presence';
+export const Presence = (props) => {
+    const [presenceProps, localProps] = createSplitProps()(props, [
+        'onExitComplete',
+        'present',
+    ]);
+    const api = usePresence(presenceProps);
+    const [wasEverPresent, setWasEverPresent] = createSignal(false);
+    const getChildren = children(() => props.children);
+    createEffect(() => {
+        const isPresent = api().isPresent;
+        if (isPresent)
+            setWasEverPresent(true);
+        const children = getChildren();
+        if (children instanceof HTMLElement) {
+            api().setNode(children);
+            spread(children, {
+                ['data-state']: presenceProps.present ? 'open' : 'closed',
+                hidden: !api().isPresent,
+            });
+        }
+    });
+    return (<>
+      {(!api().isPresent && !wasEverPresent() && localProps.lazyMount) ||
+            (localProps.unmountOnExit && !api().isPresent && wasEverPresent())
+            ? null
+            : getChildren()}
+    </>);
+};

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

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

package/source/presence/use-presence.js

@@ -0,0 +1,9 @@
+import * as presence from '@zag-js/presence';
+import { normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+export const usePresence = (props) => {
+    const [state, send] = useMachine(presence.machine(props), {
+        context: props,
+    });
+    return createMemo(() => presence.connect(state, send, normalizeProps));
+};

package/source/radio-group/index.js

@@ -0,0 +1,17 @@
+import { RadioGroup as RadioGroupRoot } from './radio-group';
+import { useRadioGroupContext } from './radio-group-context';
+import { RadioGroupIndicator } from './radio-group-indicator';
+import { RadioGroupItem } from './radio-group-item';
+import { useRadioGroupItemContext } from './radio-group-item-context';
+import { RadioGroupItemControl } from './radio-group-item-control';
+import { RadioGroupItemText } from './radio-group-item-text';
+import { RadioGroupLabel } from './radio-group-label';
+const RadioGroup = Object.assign(RadioGroupRoot, {
+    Root: RadioGroupRoot,
+    Indicator: RadioGroupIndicator,
+    Item: RadioGroupItem,
+    ItemControl: RadioGroupItemControl,
+    ItemText: RadioGroupItemText,
+    Label: RadioGroupLabel,
+});
+export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, useRadioGroupContext, useRadioGroupItemContext, };

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

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

package/source/radio-group/radio-group-indicator.jsx

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

package/source/radio-group/radio-group-item-context.js

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

package/source/radio-group/radio-group-item-control.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useRadioGroupContext } from './radio-group-context';
+import { useRadioGroupItemContext } from './radio-group-item-context';
+export const RadioGroupItemControl = (props) => {
+    const api = useRadioGroupContext();
+    const itemProps = useRadioGroupItemContext();
+    const mergedProps = mergeProps(() => api().getItemControlProps(itemProps), props);
+    return (<>
+      <ark.div {...mergedProps}/>
+      <input {...api().getItemHiddenInputProps(itemProps)}/>
+    </>);
+};

package/source/radio-group/radio-group-item-text.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useRadioGroupContext } from './radio-group-context';
+import { useRadioGroupItemContext } from './radio-group-item-context';
+export const RadioGroupItemText = (props) => {
+    const api = useRadioGroupContext();
+    const itemProps = useRadioGroupItemContext();
+    const mergedProps = mergeProps(() => api().getItemTextProps(itemProps), props);
+    return <ark.span {...mergedProps}/>;
+};

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

@@ -0,0 +1,17 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useRadioGroupContext } from './radio-group-context';
+import { RadioProvider } from './radio-group-item-context';
+export const RadioGroupItem = (props) => {
+    const [itemProps, restProps] = createSplitProps()(props, [
+        'value',
+        'disabled',
+        'invalid',
+    ]);
+    const api = useRadioGroupContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), restProps);
+    return (<RadioProvider value={itemProps}>
+      <ark.label {...mergedProps}/>
+    </RadioProvider>);
+};

package/source/radio-group/radio-group-label.jsx

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

package/source/radio-group/radio-group.jsx

@@ -0,0 +1,24 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { RadioGroupProvider } from './radio-group-context';
+import { useRadioGroup } from './use-radio-group';
+export const RadioGroup = (props) => {
+    const [useRadioGroupProps, localProps] = createSplitProps()(props, [
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'name',
+        'onValueChange',
+        'orientation',
+        'value',
+    ]);
+    const api = useRadioGroup(useRadioGroupProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<RadioGroupProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </RadioGroupProvider>);
+};

package/source/radio-group/use-radio-group.jsx

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

package/source/rating-group/index.js

@@ -0,0 +1,13 @@
+import { RatingGroup as RatingGroupRoot } from './rating-group';
+import { useRatingGroupContext } from './rating-group-context';
+import { RatingGroupControl } from './rating-group-control';
+import { RatingGroupItem } from './rating-group-item';
+import { useRatingGroupItemContext } from './rating-group-item-context';
+import { RatingGroupLabel } from './rating-group-label';
+const RatingGroup = Object.assign(RatingGroupRoot, {
+    Root: RatingGroupRoot,
+    Control: RatingGroupControl,
+    Label: RatingGroupLabel,
+    Item: RatingGroupItem,
+});
+export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, useRatingGroupContext, useRatingGroupItemContext, };

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

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

package/source/rating-group/rating-group-control.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useRatingGroupContext } from './rating-group-context';
+export const RatingGroupControl = (props) => {
+    const api = useRatingGroupContext();
+    const getChildren = () => runIfFn(props.children, api);
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return (<>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+      <input {...api().hiddenInputProps}/>
+    </>);
+};

package/source/rating-group/rating-group-item-context.js

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

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

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useRatingGroupContext } from './rating-group-context';
+import { RatingGroupItemProvider } from './rating-group-item-context';
+export const RatingGroupItem = (props) => {
+    const [ratingParams, restProps] = createSplitProps()(props, ['index']);
+    const api = useRatingGroupContext();
+    const itemState = api().getItemState(ratingParams);
+    const mergedProps = mergeProps(() => api().getItemProps(ratingParams), restProps);
+    const getChildren = () => runIfFn(restProps.children, itemState);
+    return (<RatingGroupItemProvider value={itemState}>
+      <ark.span {...mergedProps}>{getChildren()}</ark.span>
+    </RatingGroupItemProvider>);
+};

package/source/rating-group/rating-group-label.jsx

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

package/source/rating-group/rating-group.jsx

@@ -0,0 +1,29 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { RatingGroupProvider } from './rating-group-context';
+import { useRatingGroup } from './use-rating-group';
+export const RatingGroup = (props) => {
+    const [ratingParams, localProps] = createSplitProps()(props, [
+        'allowHalf',
+        'autoFocus',
+        'count',
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'name',
+        'onHoverChange',
+        'onValueChange',
+        'readOnly',
+        'translations',
+        'value',
+    ]);
+    const api = useRatingGroup(ratingParams);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<RatingGroupProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </RatingGroupProvider>);
+};

package/source/rating-group/use-rating-group.jsx

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

package/source/run-if-fn.js

@@ -0,0 +1,4 @@
+const isFunction = (value) => typeof value === 'function';
+export const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn)
+    ? valueOrFn(...args)
+    : valueOrFn;

package/source/segment-group/index.js

@@ -0,0 +1,17 @@
+import { SegmentGroup as SegmentGroupRoot } from './segment-group';
+import { useSegmentGroupContext } from './segment-group-context';
+import { SegmentGroupIndicator } from './segment-group-indicator';
+import { SegmentGroupItem } from './segment-group-item';
+import { useSegmentGroupItemContext, } from './segment-group-item-context';
+import { SegmentGroupItemControl, } from './segment-group-item-control';
+import { SegmentGroupItemText } from './segment-group-item-text';
+import { SegmentGroupLabel } from './segment-group-label';
+const SegmentGroup = Object.assign(SegmentGroupRoot, {
+    Root: SegmentGroupRoot,
+    Indicator: SegmentGroupIndicator,
+    Item: SegmentGroupItem,
+    ItemControl: SegmentGroupItemControl,
+    ItemText: SegmentGroupItemText,
+    Label: SegmentGroupLabel,
+});
+export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, useSegmentGroupContext, useSegmentGroupItemContext, };

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

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

package/source/segment-group/segment-group-indicator.jsx

@@ -0,0 +1,9 @@
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSegmentGroupContext } from './segment-group-context';
+export const SegmentGroupIndicator = (props) => {
+    const api = useSegmentGroupContext();
+    const mergedProps = mergeProps(() => api().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/segment-group/segment-group-item-context.js

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

package/source/segment-group/segment-group-item-control.jsx

@@ -0,0 +1,14 @@
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSegmentGroupContext } from './segment-group-context';
+import { useSegmentGroupItemContext } from './segment-group-item-context';
+export const SegmentGroupItemControl = (props) => {
+    const api = useSegmentGroupContext();
+    const itemProps = useSegmentGroupItemContext();
+    const mergedProps = mergeProps(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
+    return (<>
+      <ark.div {...mergedProps}/>
+      <input {...api().getItemHiddenInputProps(itemProps)}/>
+    </>);
+};

package/source/segment-group/segment-group-item-text.jsx

@@ -0,0 +1,11 @@
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSegmentGroupContext } from './segment-group-context';
+import { useSegmentGroupItemContext } from './segment-group-item-context';
+export const SegmentGroupItemText = (props) => {
+    const api = useSegmentGroupContext();
+    const itemProps = useSegmentGroupItemContext();
+    const mergedProps = mergeProps(() => api().getItemTextProps(itemProps), segmentGroupAnatomy.build().itemText.attrs, props);
+    return <ark.span {...mergedProps}/>;
+};

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

@@ -0,0 +1,18 @@
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useSegmentGroupContext } from './segment-group-context';
+import { SegmentProvider } from './segment-group-item-context';
+export const SegmentGroupItem = (props) => {
+    const [itemProps, restProps] = createSplitProps()(props, [
+        'value',
+        'disabled',
+        'invalid',
+    ]);
+    const api = useSegmentGroupContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, restProps);
+    return (<SegmentProvider value={itemProps}>
+      <ark.label {...mergedProps}/>
+    </SegmentProvider>);
+};

package/source/segment-group/segment-group-label.jsx

@@ -0,0 +1,9 @@
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSegmentGroupContext } from './segment-group-context';
+export const SegmentGroupLabel = (props) => {
+    const api = useSegmentGroupContext();
+    const mergedProps = mergeProps(() => api().labelProps, segmentGroupAnatomy.build().label.attrs, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/segment-group/segment-group.jsx

@@ -0,0 +1,25 @@
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { SegmentGroupProvider } from './segment-group-context';
+import { useSegmentGroup } from './use-segment-group';
+export const SegmentGroup = (props) => {
+    const [groupParams, localProps] = createSplitProps()(props, [
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'name',
+        'onValueChange',
+        'orientation',
+        'value',
+    ]);
+    const api = useSegmentGroup(groupParams);
+    const mergedProps = mergeProps(() => api().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
+    return (<SegmentGroupProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </SegmentGroupProvider>);
+};

package/source/segment-group/use-segment-group.jsx

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