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

package/pin-input/pin-input.mjs

@@ -1,18 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { PinInputProvider } from './pin-input-context.mjs';
 import { usePinInput } from './use-pin-input.mjs';
 
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const PinInput = props => {
-  const [pinInputProps, htmlProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onChange', 'onComplete', 'onInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const [pinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
   const api = usePinInput(pinInputProps);
-  const rootProps = mergeProps(() => api().rootProps, htmlProps);
+  const mergedProps = mergeProps(() => api().rootProps, localProps);
   return createComponent(PinInputProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, rootProps);
+      return [createComponent(ark.div, mergedProps), (() => {
+        const _el$ = _tmpl$();
+        spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
     }
   });
 };

package/popover/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popover$1 = require('./popover.cjs');
+const popover = require('./popover.cjs');
 const popoverAnchor = require('./popover-anchor.cjs');
 const popoverArrow = require('./popover-arrow.cjs');
 const popoverArrowTip = require('./popover-arrow-tip.cjs');
@@ -10,19 +10,20 @@ const popoverCloseTrigger = require('./popover-close-trigger.cjs');
 const popoverContent = require('./popover-content.cjs');
 const popoverContext = require('./popover-context.cjs');
 const popoverDescription = require('./popover-description.cjs');
+const popoverIndicator = require('./popover-indicator.cjs');
 const popoverPositioner = require('./popover-positioner.cjs');
 const popoverTitle = require('./popover-title.cjs');
 const popoverTrigger = require('./popover-trigger.cjs');
-const popover = require('@zag-js/popover');
 
-const Popover = Object.assign(popover$1.Popover, {
-  Root: popover$1.Popover,
+const Popover = Object.assign(popover.Popover, {
+  Root: popover.Popover,
   Anchor: popoverAnchor.PopoverAnchor,
   Arrow: popoverArrow.PopoverArrow,
   ArrowTip: popoverArrowTip.PopoverArrowTip,
   CloseTrigger: popoverCloseTrigger.PopoverCloseTrigger,
   Content: popoverContent.PopoverContent,
   Description: popoverDescription.PopoverDescription,
+  Indicator: popoverIndicator.PopoverIndicator,
   Positioner: popoverPositioner.PopoverPositioner,
   Title: popoverTitle.PopoverTitle,
   Trigger: popoverTrigger.PopoverTrigger
@@ -35,11 +36,8 @@ exports.PopoverCloseTrigger = popoverCloseTrigger.PopoverCloseTrigger;
 exports.PopoverContent = popoverContent.PopoverContent;
 exports.usePopoverContext = popoverContext.usePopoverContext;
 exports.PopoverDescription = popoverDescription.PopoverDescription;
+exports.PopoverIndicator = popoverIndicator.PopoverIndicator;
 exports.PopoverPositioner = popoverPositioner.PopoverPositioner;
 exports.PopoverTitle = popoverTitle.PopoverTitle;
 exports.PopoverTrigger = popoverTrigger.PopoverTrigger;
-Object.defineProperty(exports, 'popoverAnatomy', {
-  enumerable: true,
-  get: () => popover.anatomy
-});
 exports.Popover = Popover;

package/popover/index.d.ts

@@ -5,12 +5,12 @@ import { PopoverArrow, type PopoverArrowProps } from './popover-arrow';
 import { PopoverArrowTip, type PopoverArrowTipProps } from './popover-arrow-tip';
 import { PopoverCloseTrigger, type PopoverCloseTriggerProps } from './popover-close-trigger';
 import { PopoverContent, type PopoverContentProps } from './popover-content';
-import { usePopoverContext } from './popover-context';
+import { usePopoverContext, type PopoverContext } from './popover-context';
 import { PopoverDescription, type PopoverDescriptionProps } from './popover-description';
+import { PopoverIndicator, type PopoverIndicatorProps } from './popover-indicator';
 import { PopoverPositioner, type PopoverPositionerProps } from './popover-positioner';
 import { PopoverTitle, type PopoverTitleProps } from './popover-title';
 import { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger';
-import { popoverAnatomy } from './popover.anatomy';
 declare const Popover: ((props: PopoverProps) => JSX.Element) & {
     Root: (props: PopoverProps) => JSX.Element;
     Anchor: (props: PopoverAnchorProps) => JSX.Element;
@@ -19,9 +19,10 @@ declare const Popover: ((props: PopoverProps) => JSX.Element) & {
     CloseTrigger: (props: PopoverCloseTriggerProps) => JSX.Element;
     Content: (props: PopoverContentProps) => JSX.Element;
     Description: (props: PopoverDescriptionProps) => JSX.Element;
+    Indicator: (props: PopoverIndicatorProps) => JSX.Element;
     Positioner: (props: PopoverPositionerProps) => JSX.Element;
     Title: (props: PopoverTitleProps) => JSX.Element;
     Trigger: (props: PopoverTriggerProps) => JSX.Element;
 };
-export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverPositioner, PopoverTitle, PopoverTrigger, popoverAnatomy, usePopoverContext, };
-export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverDescriptionProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopoverContext, };
+export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverContext, PopoverDescriptionProps, PopoverIndicatorProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };

package/popover/index.mjs

@@ -6,10 +6,10 @@ import { PopoverCloseTrigger } from './popover-close-trigger.mjs';
 import { PopoverContent } from './popover-content.mjs';
 export { usePopoverContext } from './popover-context.mjs';
 import { PopoverDescription } from './popover-description.mjs';
+import { PopoverIndicator } from './popover-indicator.mjs';
 import { PopoverPositioner } from './popover-positioner.mjs';
 import { PopoverTitle } from './popover-title.mjs';
 import { PopoverTrigger } from './popover-trigger.mjs';
-export { anatomy as popoverAnatomy } from '@zag-js/popover';
 
 const Popover = Object.assign(Popover$1, {
   Root: Popover$1,
@@ -19,9 +19,10 @@ const Popover = Object.assign(Popover$1, {
   CloseTrigger: PopoverCloseTrigger,
   Content: PopoverContent,
   Description: PopoverDescription,
+  Indicator: PopoverIndicator,
   Positioner: PopoverPositioner,
   Title: PopoverTitle,
   Trigger: PopoverTrigger
 });
 
-export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverPositioner, PopoverTitle, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger };

package/popover/popover-indicator.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const popoverContext = require('./popover-context.cjs');
+
+const PopoverIndicator = props => {
+  const popover = popoverContext.usePopoverContext();
+  const mergedProps = solid.mergeProps(() => popover().indicatorProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.PopoverIndicator = PopoverIndicator;

package/popover/popover-indicator.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type PopoverIndicatorProps = HTMLArkProps<'div'>;
+export declare const PopoverIndicator: (props: PopoverIndicatorProps) => JSX.Element;

package/popover/popover-indicator.mjs

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

package/popover/popover.cjs

@@ -8,7 +8,7 @@ const popoverContext = require('./popover-context.cjs');
 const usePopover = require('./use-popover.cjs');
 
 const Popover = props => {
-  const [usePopoverProps, restProps] = createSplitProps.createSplitProps()(props, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  const [usePopoverProps, restProps] = createSplitProps.createSplitProps()(props, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'dir', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
   const api = usePopover.usePopover(usePopoverProps);
   return web.createComponent(popoverContext.PopoverProvider, {
     value: api,

package/popover/popover.mjs

@@ -4,7 +4,7 @@ import { PopoverProvider } from './popover-context.mjs';
 import { usePopover } from './use-popover.mjs';
 
 const Popover = props => {
-  const [usePopoverProps, restProps] = createSplitProps()(props, ['autoFocus', 'closeOnEsc', 'closeOnInteractOutside', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'modal', 'onClose', 'onEscapeKeyDown', 'onFocusOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'open', 'portalled', 'positioning']);
+  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 createComponent(PopoverProvider, {
     value: api,

package/presence/presence.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
 import type { Meta } from 'storybook-solidjs';
-import { Presence } from './presence';
+import { Presence } from './';
 type PresenceType = typeof Presence;
 declare const meta: Meta<PresenceType>;
 export default meta;

package/radio-group/index.cjs

@@ -2,31 +2,28 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const radio = require('./radio.cjs');
-const radioContext = require('./radio-context.cjs');
-const radioControl = require('./radio-control.cjs');
 const radioGroup = require('./radio-group.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
+const radioGroupIndicator = require('./radio-group-indicator.cjs');
+const radioGroupItem = require('./radio-group-item.cjs');
+const radioGroupItemContext = require('./radio-group-item-context.cjs');
+const radioGroupItemControl = require('./radio-group-item-control.cjs');
+const radioGroupItemText = require('./radio-group-item-text.cjs');
 const radioGroupLabel = require('./radio-group-label.cjs');
-const radioLabel = require('./radio-label.cjs');
-const radio$1 = require('@zag-js/radio-group');
 
 const RadioGroup = Object.assign(radioGroup.RadioGroup, {
   Root: radioGroup.RadioGroup,
-  Label: radioGroupLabel.RadioGroupLabel,
-  Radio: radio.Radio,
-  RadioLabel: radioLabel.RadioLabel,
-  RadioControl: radioControl.RadioControl
+  Indicator: radioGroupIndicator.RadioGroupIndicator,
+  Item: radioGroupItem.RadioGroupItem,
+  ItemControl: radioGroupItemControl.RadioGroupItemControl,
+  ItemText: radioGroupItemText.RadioGroupItemText,
+  Label: radioGroupLabel.RadioGroupLabel
 });
 
-exports.Radio = radio.Radio;
-exports.useRadioContext = radioContext.useRadioContext;
-exports.RadioControl = radioControl.RadioControl;
 exports.useRadioGroupContext = radioGroupContext.useRadioGroupContext;
+exports.RadioGroupItem = radioGroupItem.RadioGroupItem;
+exports.useRadioGroupItemContext = radioGroupItemContext.useRadioGroupItemContext;
+exports.RadioGroupItemControl = radioGroupItemControl.RadioGroupItemControl;
+exports.RadioGroupItemText = radioGroupItemText.RadioGroupItemText;
 exports.RadioGroupLabel = radioGroupLabel.RadioGroupLabel;
-exports.RadioLabel = radioLabel.RadioLabel;
-Object.defineProperty(exports, 'radioGroupAnatomy', {
-  enumerable: true,
-  get: () => radio$1.anatomy
-});
 exports.RadioGroup = RadioGroup;

package/radio-group/index.d.ts

@@ -1,18 +1,19 @@
 import { JSX } from 'solid-js';
-import { Radio, type RadioProps } from './radio';
-import { useRadioContext } from './radio-context';
-import { RadioControl, type RadioControlProps } from './radio-control';
 import { type RadioGroupProps } from './radio-group';
-import { useRadioGroupContext } from './radio-group-context';
+import { useRadioGroupContext, type RadioGroupContext } from './radio-group-context';
+import { type RadioGroupIndicatorProps } from './radio-group-indicator';
+import { RadioGroupItem, type RadioGroupItemProps } from './radio-group-item';
+import { useRadioGroupItemContext, type RadioGroupItemContext } from './radio-group-item-context';
+import { RadioGroupItemControl, type RadioGroupItemControlProps } from './radio-group-item-control';
+import { RadioGroupItemText, type RadioGroupItemTextProps } from './radio-group-item-text';
 import { RadioGroupLabel, type RadioGroupLabelProps } from './radio-group-label';
-import { radioGroupAnatomy } from './radio-group.anatomy';
-import { RadioLabel, type RadioLabelProps } from './radio-label';
 declare const RadioGroup: ((props: RadioGroupProps) => JSX.Element) & {
     Root: (props: RadioGroupProps) => JSX.Element;
+    Indicator: (props: RadioGroupIndicatorProps) => JSX.Element;
+    Item: (props: RadioGroupItemProps) => JSX.Element;
+    ItemControl: (props: RadioGroupItemControlProps) => JSX.Element;
+    ItemText: (props: RadioGroupItemTextProps) => JSX.Element;
     Label: (props: RadioGroupLabelProps) => JSX.Element;
-    Radio: (props: RadioProps) => JSX.Element;
-    RadioLabel: (props: RadioLabelProps) => JSX.Element;
-    RadioControl: (props: RadioControlProps) => JSX.Element;
 };
-export { Radio, RadioControl, RadioGroup, RadioGroupLabel, RadioLabel, radioGroupAnatomy, useRadioContext, useRadioGroupContext, };
-export type { RadioControlProps, RadioGroupLabelProps, RadioGroupProps, RadioLabelProps, RadioProps, };
+export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, useRadioGroupContext, useRadioGroupItemContext, };
+export type { RadioGroupContext, RadioGroupIndicatorProps, RadioGroupItemContext, RadioGroupItemControlProps, RadioGroupItemProps, RadioGroupItemTextProps, RadioGroupLabelProps, RadioGroupProps, };

package/radio-group/index.mjs

@@ -1,18 +1,19 @@
-import { Radio } from './radio.mjs';
-export { useRadioContext } from './radio-context.mjs';
-import { RadioControl } from './radio-control.mjs';
 import { RadioGroup as RadioGroup$1 } from './radio-group.mjs';
 export { useRadioGroupContext } from './radio-group-context.mjs';
+import { RadioGroupIndicator } from './radio-group-indicator.mjs';
+import { RadioGroupItem } from './radio-group-item.mjs';
+export { useRadioGroupItemContext } from './radio-group-item-context.mjs';
+import { RadioGroupItemControl } from './radio-group-item-control.mjs';
+import { RadioGroupItemText } from './radio-group-item-text.mjs';
 import { RadioGroupLabel } from './radio-group-label.mjs';
-import { RadioLabel } from './radio-label.mjs';
-export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
 
 const RadioGroup = Object.assign(RadioGroup$1, {
   Root: RadioGroup$1,
-  Label: RadioGroupLabel,
-  Radio,
-  RadioLabel,
-  RadioControl
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemControl: RadioGroupItemControl,
+  ItemText: RadioGroupItemText,
+  Label: RadioGroupLabel
 });
 
-export { Radio, RadioControl, RadioGroup, RadioGroupLabel, RadioLabel };
+export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel };

package/radio-group/{radio-label.cjs → radio-group-indicator.cjs}

@@ -5,14 +5,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
-const radioContext = require('./radio-context.cjs');
 const radioGroupContext = require('./radio-group-context.cjs');
 
-const RadioLabel = props => {
+const RadioGroupIndicator = props => {
   const api = radioGroupContext.useRadioGroupContext();
-  const radioParams = radioContext.useRadioContext();
-  const labelProps = solid.mergeProps(() => api().getRadioLabelProps(radioParams), props);
-  return web.createComponent(factory.ark.span, labelProps);
+  const mergedProps = solid.mergeProps(() => api().indicatorProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
-exports.RadioLabel = RadioLabel;
+exports.RadioGroupIndicator = RadioGroupIndicator;

package/radio-group/radio-group-indicator.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type RadioGroupIndicatorProps = HTMLArkProps<'div'>;
+export declare const RadioGroupIndicator: (props: RadioGroupIndicatorProps) => JSX.Element;

package/radio-group/radio-group-indicator.mjs

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

package/radio-group/{radio-context.cjs → radio-group-item-context.cjs}

@@ -2,13 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('@zag-js/radio-group');
 const createContext = require('../create-context.cjs');
 
-const [RadioProvider, useRadioContext] = createContext.createContext({
-  hookName: "useRadioContext",
+const [RadioProvider, useRadioGroupItemContext] = createContext.createContext({
+  hookName: "useRadioGroupItemContext",
   providerName: "<RadioProvider />"
 });
 
 exports.RadioProvider = RadioProvider;
-exports.useRadioContext = useRadioContext;
+exports.useRadioGroupItemContext = useRadioGroupItemContext;

package/radio-group/radio-group-item-context.d.ts

@@ -0,0 +1,4 @@
+import { ContextProviderComponent } from 'solid-js';
+import type { ItemProps } from '@zag-js/radio-group';
+export type RadioGroupItemContext = ItemProps;
+export declare const RadioProvider: ContextProviderComponent<ItemProps>, useRadioGroupItemContext: () => ItemProps;

package/radio-group/radio-group-item-context.mjs

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

package/radio-group/radio-group-item-control.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const radioGroupContext = require('./radio-group-context.cjs');
+const radioGroupItemContext = require('./radio-group-item-context.cjs');
+
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
+const RadioGroupItemControl = props => {
+  const api = radioGroupContext.useRadioGroupContext();
+  const itemProps = radioGroupItemContext.useRadioGroupItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), props);
+  return [web.createComponent(factory.ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$();
+    web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+exports.RadioGroupItemControl = RadioGroupItemControl;

package/radio-group/radio-group-item-control.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type RadioGroupItemControlProps = HTMLArkProps<'div'>;
+export declare const RadioGroupItemControl: (props: RadioGroupItemControlProps) => JSX.Element;

package/radio-group/radio-group-item-control.mjs

@@ -0,0 +1,19 @@
+import { createComponent, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useRadioGroupContext } from './radio-group-context.mjs';
+import { useRadioGroupItemContext } from './radio-group-item-context.mjs';
+
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
+const RadioGroupItemControl = props => {
+  const api = useRadioGroupContext();
+  const itemProps = useRadioGroupItemContext();
+  const mergedProps = mergeProps(() => api().getItemControlProps(itemProps), props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+export { RadioGroupItemControl };

package/radio-group/radio-group-item-text.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const radioGroupContext = require('./radio-group-context.cjs');
+const radioGroupItemContext = require('./radio-group-item-context.cjs');
+
+const RadioGroupItemText = props => {
+  const api = radioGroupContext.useRadioGroupContext();
+  const itemProps = radioGroupItemContext.useRadioGroupItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
+  return web.createComponent(factory.ark.span, mergedProps);
+};
+
+exports.RadioGroupItemText = RadioGroupItemText;

package/radio-group/radio-group-item-text.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type RadioGroupItemTextProps = HTMLArkProps<'span'>;
+export declare const RadioGroupItemText: (props: RadioGroupItemTextProps) => JSX.Element;

package/radio-group/radio-group-item-text.mjs

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

package/radio-group/radio-group-item.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const radioGroupContext = require('./radio-group-context.cjs');
+const radioGroupItemContext = require('./radio-group-item-context.cjs');
+
+const RadioGroupItem = props => {
+  const [itemProps, restProps] = createSplitProps.createSplitProps()(props, ['value', 'disabled', 'invalid']);
+  const api = radioGroupContext.useRadioGroupContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), restProps);
+  return web.createComponent(radioGroupItemContext.RadioProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(factory.ark.label, mergedProps);
+    }
+  });
+};
+
+exports.RadioGroupItem = RadioGroupItem;

package/radio-group/radio-group-item.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { ItemProps } from '@zag-js/radio-group';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type RadioGroupItemProps = Assign<HTMLArkProps<'label'>, ItemProps>;
+export declare const RadioGroupItem: (props: RadioGroupItemProps) => JSX.Element;

package/radio-group/radio-group-item.mjs

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

package/radio-group/radio-group-label.cjs

@@ -9,8 +9,8 @@ const radioGroupContext = require('./radio-group-context.cjs');
 
 const RadioGroupLabel = props => {
   const api = radioGroupContext.useRadioGroupContext();
-  const labelProps = solid.mergeProps(() => api().labelProps, props);
-  return web.createComponent(factory.ark.label, labelProps);
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, mergedProps);
 };
 
 exports.RadioGroupLabel = RadioGroupLabel;

package/radio-group/radio-group-label.mjs

@@ -5,8 +5,8 @@ import { useRadioGroupContext } from './radio-group-context.mjs';
 
 const RadioGroupLabel = props => {
   const api = useRadioGroupContext();
-  const labelProps = mergeProps(() => api().labelProps, props);
-  return createComponent(ark.label, labelProps);
+  const mergedProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
 };
 
 export { RadioGroupLabel };

package/radio-group/radio-group.cjs

@@ -10,13 +10,13 @@ const radioGroupContext = require('./radio-group-context.cjs');
 const useRadioGroup = require('./use-radio-group.cjs');
 
 const RadioGroup = props => {
-  const [groupParams, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
-  const api = useRadioGroup.useRadioGroup(groupParams);
-  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  const [useRadioGroupProps, localProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
+  const api = useRadioGroup.useRadioGroup(useRadioGroupProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(radioGroupContext.RadioGroupProvider, {
     value: api,
     get children() {
-      return web.createComponent(factory.ark.div, rootProps);
+      return web.createComponent(factory.ark.div, mergedProps);
     }
   });
 };

package/radio-group/radio-group.mjs

@@ -6,13 +6,13 @@ import { RadioGroupProvider } from './radio-group-context.mjs';
 import { useRadioGroup } from './use-radio-group.mjs';
 
 const RadioGroup = props => {
-  const [groupParams, restProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
-  const api = useRadioGroup(groupParams);
-  const rootProps = mergeProps(() => api().rootProps, restProps);
+  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 createComponent(RadioGroupProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, rootProps);
+      return createComponent(ark.div, mergedProps);
     }
   });
 };

package/radio-group/radio-group.stories.d.ts

@@ -3,4 +3,3 @@ import type { Meta } from 'storybook-solidjs';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const Disabled: () => JSX.Element;