@ark-ui/solid 3.0.0-1 → 3.0.0-2

package/dist/source/components/number-input/number-input-root.jsx

@@ -0,0 +1,38 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useNumberInput } from './use-number-input';
+import { NumberInputProvider } from './use-number-input-context';
+export const NumberInputRoot = (props) => {
+    const [useNumberInputProps, localProps] = createSplitProps()(props, [
+        'allowMouseWheel',
+        'allowOverflow',
+        'clampValueOnBlur',
+        'disabled',
+        'focusInputOnChange',
+        'form',
+        'formatOptions',
+        'id',
+        'ids',
+        'inputMode',
+        'invalid',
+        'locale',
+        'max',
+        'min',
+        'name',
+        'onFocusChange',
+        'onValueChange',
+        'onValueInvalid',
+        'pattern',
+        'readOnly',
+        'spinOnPress',
+        'step',
+        'translations',
+        'value',
+    ]);
+    const api = useNumberInput(useNumberInputProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<NumberInputProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </NumberInputProvider>);
+};

package/dist/source/components/number-input/number-input.js

@@ -0,0 +1,8 @@
+export { NumberInputContext as Context, } from './number-input-context';
+export { NumberInputControl as Control, } from './number-input-control';
+export { NumberInputDecrementTrigger as DecrementTrigger, } from './number-input-decrement-trigger';
+export { NumberInputIncrementTrigger as IncrementTrigger, } from './number-input-increment-trigger';
+export { NumberInputInput as Input, } from './number-input-input';
+export { NumberInputLabel as Label, } from './number-input-label';
+export { NumberInputRoot as Root, } from './number-input-root';
+export { NumberInputScrubber as Scrubber, } from './number-input-scrubber';

package/dist/source/components/number-input/use-number-input-context.js

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

package/dist/source/components/number-input/use-number-input.js

@@ -0,0 +1,11 @@
+import * as numberInput from '@zag-js/number-input';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const useNumberInput = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const [state, send] = useMachine(numberInput.machine(context), { context });
+    return createMemo(() => numberInput.connect(state, send, normalizeProps));
+};

package/dist/source/components/pagination/index.js

@@ -0,0 +1,8 @@
+export { PaginationContext } from './pagination-context';
+export { PaginationEllipsis } from './pagination-ellipsis';
+export { PaginationItem } from './pagination-item';
+export { PaginationNextTrigger } from './pagination-next-trigger';
+export { PaginationPrevTrigger } from './pagination-prev-trigger';
+export { PaginationRoot } from './pagination-root';
+export { usePaginationContext } from './use-pagination-context';
+export * as Pagination from './pagination';

package/dist/source/components/pagination/pagination-ellipsis.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { usePaginationContext } from './use-pagination-context';
+export const PaginationEllipsis = (props) => {
+    const [ellipsisProps, localProps] = createSplitProps()(props, ['index']);
+    const api = usePaginationContext();
+    const mergedProps = mergeProps(() => api().getEllipsisProps(ellipsisProps), localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/components/pagination/pagination-item.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { usePaginationContext } from './use-pagination-context';
+export const PaginationItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['value', 'type']);
+    const api = usePaginationContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/components/pagination/pagination-root.jsx

@@ -0,0 +1,23 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { usePagination } from './use-pagination';
+import { PaginationProvider } from './use-pagination-context';
+export const PaginationRoot = (props) => {
+    const [usePaginationProps, localProps] = createSplitProps()(props, [
+        'count',
+        'id',
+        'ids',
+        'onPageChange',
+        'page',
+        'pageSize',
+        'siblingCount',
+        'translations',
+        'type',
+    ]);
+    const api = usePagination(usePaginationProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<PaginationProvider value={api}>
+      <ark.nav {...mergedProps}/>
+    </PaginationProvider>);
+};

package/dist/source/components/pagination/pagination.js

@@ -0,0 +1,6 @@
+export { PaginationContext as Context, } from './pagination-context';
+export { PaginationEllipsis as Ellipsis, } from './pagination-ellipsis';
+export { PaginationItem as Item } from './pagination-item';
+export { PaginationNextTrigger as NextTrigger, } from './pagination-next-trigger';
+export { PaginationPrevTrigger as PrevTrigger, } from './pagination-prev-trigger';
+export { PaginationRoot as Root } from './pagination-root';

package/dist/source/components/pagination/use-pagination-context.js

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

package/dist/source/components/pagination/use-pagination.js

@@ -0,0 +1,11 @@
+import * as pagination from '@zag-js/pagination';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const usePagination = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const [state, send] = useMachine(pagination.machine(context), { context });
+    return createMemo(() => pagination.connect(state, send, normalizeProps));
+};

package/dist/source/components/pin-input/index.js

@@ -0,0 +1,7 @@
+export { PinInputContext } from './pin-input-context';
+export { PinInputControl } from './pin-input-control';
+export { PinInputInput } from './pin-input-input';
+export { PinInputLabel } from './pin-input-label';
+export { PinInputRoot } from './pin-input-root';
+export { usePinInputContext } from './use-pin-input-context';
+export * as PinInput from './pin-input';

package/dist/source/components/pin-input/pin-input-input.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { usePinInputContext } from './use-pin-input-context';
+export const PinInputInput = (props) => {
+    const [inputProps, localProps] = createSplitProps()(props, ['index']);
+    const api = usePinInputContext();
+    const mergedProps = mergeProps(() => api().getInputProps(inputProps), localProps);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/pin-input/pin-input-root.jsx

@@ -0,0 +1,34 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { usePinInput } from './use-pin-input';
+import { PinInputProvider } from './use-pin-input-context';
+export const PinInputRoot = (props) => {
+    const [usePinInputProps, localProps] = createSplitProps()(props, [
+        'autoFocus',
+        'blurOnComplete',
+        'disabled',
+        'form',
+        'id',
+        'ids',
+        'invalid',
+        'mask',
+        'name',
+        'onValueChange',
+        'onValueComplete',
+        'onValueInvalid',
+        'otp',
+        'pattern',
+        'placeholder',
+        'selectOnFocus',
+        'translations',
+        'type',
+        'value',
+    ]);
+    const api = usePinInput(usePinInputProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<PinInputProvider value={api}>
+      <ark.div {...mergedProps}/>
+      <input {...api().hiddenInputProps}/>
+    </PinInputProvider>);
+};

package/dist/source/components/pin-input/pin-input.js

@@ -0,0 +1,5 @@
+export { PinInputContext as Context, } from './pin-input-context';
+export { PinInputControl as Control, } from './pin-input-control';
+export { PinInputInput as Input } from './pin-input-input';
+export { PinInputLabel as Label } from './pin-input-label';
+export { PinInputRoot as Root } from './pin-input-root';

package/dist/source/components/pin-input/use-pin-input-context.js

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

package/dist/source/components/pin-input/use-pin-input.js

@@ -0,0 +1,11 @@
+import * as pinInput from '@zag-js/pin-input';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const usePinInput = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const [state, send] = useMachine(pinInput.machine(context), { context });
+    return createMemo(() => pinInput.connect(state, send, normalizeProps));
+};

package/dist/source/components/popover/index.js

@@ -0,0 +1,14 @@
+export { PopoverAnchor } from './popover-anchor';
+export { PopoverArrow } from './popover-arrow';
+export { PopoverArrowTip } from './popover-arrow-tip';
+export { PopoverCloseTrigger } from './popover-close-trigger';
+export { PopoverContent } from './popover-content';
+export { PopoverContext } from './popover-context';
+export { PopoverDescription } from './popover-description';
+export { PopoverIndicator } from './popover-indicator';
+export { PopoverPositioner } from './popover-positioner';
+export { PopoverRoot } from './popover-root';
+export { PopoverTitle } from './popover-title';
+export { PopoverTrigger } from './popover-trigger';
+export { usePopoverContext } from './use-popover-context';
+export * as Popover from './popover';

package/dist/source/components/popover/popover-content.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { usePopoverContext } from './use-popover-context';
+export const PopoverContent = (props) => {
+    const api = usePopoverContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().contentProps, () => presenceApi().presenceProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/popover/popover-positioner.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { usePopoverContext } from './use-popover-context';
+export const PopoverPositioner = (props) => {
+    const api = usePopoverContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().positionerProps, props);
+    return (<Show when={!presenceApi().unmounted}>
+      <ark.div {...mergedProps}/>
+    </Show>);
+};

package/dist/source/components/popover/popover-root.jsx

@@ -0,0 +1,30 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { usePopover } from './use-popover';
+import { PopoverProvider } from './use-popover-context';
+export const PopoverRoot = (props) => {
+    const [presenceProps, popoverProps] = splitPresenceProps(props);
+    const [usePopoverProps, localProps] = createSplitProps()(popoverProps, [
+        'autoFocus',
+        'closeOnEsc',
+        'closeOnInteractOutside',
+        'id',
+        'ids',
+        'initialFocusEl',
+        'modal',
+        'onEscapeKeyDown',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'open',
+        'portalled',
+        'positioning',
+    ]);
+    const api = usePopover(usePopoverProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().open })));
+    return (<PopoverProvider value={api}>
+      <PresenceProvider value={apiPresence}>{localProps.children}</PresenceProvider>
+    </PopoverProvider>);
+};

package/dist/source/components/popover/popover-trigger.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { usePresenceContext } from '../presence';
+import { usePopoverContext } from './use-popover-context';
+export const PopoverTrigger = (props) => {
+    const api = usePopoverContext();
+    const presenceApi = usePresenceContext();
+    const mergedProps = mergeProps(() => api().triggerProps, () => ({ 'aria-controls': presenceApi().unmounted && null }), props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/components/popover/popover.js

@@ -0,0 +1,12 @@
+export { PopoverAnchor as Anchor } from './popover-anchor';
+export { PopoverArrow as Arrow } from './popover-arrow';
+export { PopoverArrowTip as ArrowTip, } from './popover-arrow-tip';
+export { PopoverCloseTrigger as CloseTrigger, } from './popover-close-trigger';
+export { PopoverContent as Content, } from './popover-content';
+export { PopoverContext as Context, } from './popover-context';
+export { PopoverDescription as Description, } from './popover-description';
+export { PopoverIndicator as Indicator, } from './popover-indicator';
+export { PopoverPositioner as Positioner, } from './popover-positioner';
+export { PopoverRoot as Root } from './popover-root';
+export { PopoverTitle as Title } from './popover-title';
+export { PopoverTrigger as Trigger, } from './popover-trigger';

package/dist/source/components/popover/use-popover-context.js

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

package/dist/source/components/popover/use-popover.js

@@ -0,0 +1,16 @@
+import * as popover from '@zag-js/popover';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const usePopover = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({
+        id: createUniqueId(),
+        dir: locale().dir,
+        getRootNode,
+        'open.controlled': props.open !== undefined,
+    }, props);
+    const [state, send] = useMachine(popover.machine(context), { context });
+    return createMemo(() => popover.connect(state, send, normalizeProps));
+};

package/dist/source/components/presence/presence.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { splitPresenceProps } from './split-presence-props';
+import { usePresence } from './use-presence';
+export const Presence = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = usePresence(presenceProps);
+    const mergedProps = mergeProps(() => api().presenceProps, localProps);
+    return (<Show when={!api().unmounted}>
+      <ark.div {...mergedProps} data-scope="presence" data-part="root"/>
+    </Show>);
+};

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

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

package/dist/source/components/presence/use-presence-context.js

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

package/dist/source/components/presence/use-presence.js

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

package/dist/source/components/progress/index.js

@@ -0,0 +1,12 @@
+export { ProgressCircle } from './progress-circle';
+export { ProgressCircleRange } from './progress-circle-range';
+export { ProgressCircleTrack } from './progress-circle-track';
+export { ProgressContext } from './progress-context';
+export { ProgressLabel } from './progress-label';
+export { ProgressRange } from './progress-range';
+export { ProgressRoot } from './progress-root';
+export { ProgressTrack } from './progress-track';
+export { ProgressValueText } from './progress-value-text';
+export { ProgressView } from './progress-view';
+export { useProgressContext } from './use-progress-context';
+export * as Progress from './progress';

package/dist/source/components/progress/progress-root.jsx

@@ -0,0 +1,21 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useProgress } from './use-progress';
+import { ProgressProvider } from './use-progress-context';
+export const ProgressRoot = (props) => {
+    const [progressProps, localProps] = createSplitProps()(props, [
+        'id',
+        'ids',
+        'max',
+        'min',
+        'orientation',
+        'translations',
+        'value',
+    ]);
+    const api = useProgress(progressProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<ProgressProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </ProgressProvider>);
+};

package/dist/source/components/progress/progress-view.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useProgressContext } from './use-progress-context';
+export const ProgressView = (props) => {
+    const [state, localProps] = createSplitProps()(props, ['state']);
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().getViewProps(state), localProps);
+    return <ark.span {...mergedProps}/>;
+};

package/dist/source/components/progress/progress.js

@@ -0,0 +1,10 @@
+export { ProgressCircle as Circle, } from './progress-circle';
+export { ProgressCircleRange as CircleRange, } from './progress-circle-range';
+export { ProgressCircleTrack as CircleTrack, } from './progress-circle-track';
+export { ProgressContext as Context, } from './progress-context';
+export { ProgressLabel as Label } from './progress-label';
+export { ProgressRange as Range } from './progress-range';
+export { ProgressRoot as Root } from './progress-root';
+export { ProgressTrack as Track } from './progress-track';
+export { ProgressValueText as ValueText, } from './progress-value-text';
+export { ProgressView as View } from './progress-view';

package/dist/source/components/progress/use-progress-context.js

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

package/dist/source/components/progress/use-progress.js

@@ -0,0 +1,11 @@
+import * as progress from '@zag-js/progress';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const useProgress = (props) => {
+    const locale = useLocaleContext();
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), dir: locale().dir, getRootNode }, props);
+    const [state, send] = useMachine(progress.machine(context), { context });
+    return createMemo(() => progress.connect(state, send, normalizeProps));
+};

package/dist/source/components/radio-group/index.js

@@ -0,0 +1,11 @@
+export { RadioGroupContext } from './radio-group-context';
+export { RadioGroupIndicator } from './radio-group-indicator';
+export { RadioGroupItem } from './radio-group-item';
+export { RadioGroupItemContext } from './radio-group-item-context';
+export { RadioGroupItemControl } from './radio-group-item-control';
+export { RadioGroupItemText } from './radio-group-item-text';
+export { RadioGroupLabel } from './radio-group-label';
+export { RadioGroupRoot } from './radio-group-root';
+export { useRadioGroupContext } from './use-radio-group-context';
+export { useRadioGroupItemContext, } from './use-radio-group-item-context';
+export * as RadioGroup from './radio-group';

package/dist/source/components/radio-group/radio-group-context.jsx

@@ -0,0 +1,2 @@
+import { useRadioGroupContext } from './use-radio-group-context';
+export const RadioGroupContext = (props) => props.children(useRadioGroupContext());

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

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

package/dist/source/components/radio-group/radio-group-item-context.jsx

@@ -0,0 +1,2 @@
+import { useRadioGroupItemContext, } from './use-radio-group-item-context';
+export const RadioGroupItemContext = (props) => props.children(useRadioGroupItemContext());

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { mergeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useRadioGroupContext } from './use-radio-group-context';
+import { RadioGroupItemProvider } from './use-radio-group-item-context';
+import { RadioGroupItemPropsProvider } from './use-radio-group-item-props-context';
+export const RadioGroupItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, [
+        'value',
+        'disabled',
+        'invalid',
+    ]);
+    const radioGroup = useRadioGroupContext();
+    const mergedProps = mergeProps(() => radioGroup().getItemProps(itemProps), localProps);
+    const itemState = createMemo(() => radioGroup().getItemState(itemProps));
+    return (<RadioGroupItemPropsProvider value={itemProps}>
+      <RadioGroupItemProvider value={itemState}>
+        <ark.label {...mergedProps}/>
+      </RadioGroupItemProvider>
+    </RadioGroupItemPropsProvider>);
+};

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

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

package/dist/source/components/radio-group/radio-group-root.jsx

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

package/dist/source/components/radio-group/radio-group.js

@@ -0,0 +1,8 @@
+export { RadioGroupContext as Context, } from './radio-group-context';
+export { RadioGroupIndicator as Indicator, } from './radio-group-indicator';
+export { RadioGroupItem as Item } from './radio-group-item';
+export { RadioGroupItemContext as ItemContext, } from './radio-group-item-context';
+export { RadioGroupItemControl as ItemControl, } from './radio-group-item-control';
+export { RadioGroupItemText as ItemText, } from './radio-group-item-text';
+export { RadioGroupLabel as Label, } from './radio-group-label';
+export { RadioGroupRoot as Root } from './radio-group-root';