@ark-ui/solid 0.8.1 → 0.10.0

package/range-slider/range-slider-thumb.d.ts

@@ -1,8 +1,8 @@
-import type { JSX, type Accessor } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 type RangeSliderThumbParams = {
-    index: Accessor<number>;
+    index: number;
 };
 export type RangeSliderThumbProps = Assign<HTMLArkProps<'div'>, RangeSliderThumbParams>;
 export declare const RangeSliderThumb: (props: RangeSliderThumbProps) => JSX.Element;

package/range-slider/range-slider-thumb.mjs

@@ -1,14 +1,19 @@
-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 { useRangeSliderContext } from './range-slider-context.mjs';
 
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const RangeSliderThumb = props => {
   const [thumbParams, restProps] = createSplitProps()(props, ['index']);
   const api = useRangeSliderContext();
-  const thumbProps = mergeProps(() => api().getThumbProps(thumbParams.index()), restProps);
-  return createComponent(ark.div, thumbProps);
+  const thumbProps = mergeProps(() => api().getThumbProps(thumbParams.index), restProps);
+  return [createComponent(ark.div, thumbProps), (() => {
+    const _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(() => api().getHiddenInputProps(thumbParams.index)), false, false);
+    return _el$;
+  })()];
 };
 
 export { RangeSliderThumb };

package/range-slider/range-slider-track.d.ts

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

package/range-slider/range-slider.cjs

@@ -10,7 +10,7 @@ const rangeSliderContext = require('./range-slider-context.cjs');
 const useRangeSlider = require('./use-range-slider.cjs');
 
 const RangeSlider = props => {
-  const [useRangeSliderProps, divProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'readOnly', 'step', 'thumbAlignment', 'value']);
+  const [useRangeSliderProps, divProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'onFocusChange', 'orientation', 'readOnly', 'step', 'thumbAlignment', 'thumbSize', 'value']);
   const api = useRangeSlider.useRangeSlider(useRangeSliderProps);
   const getChildren = () => runIfFn.runIfFn(props.children, api);
   return web.createComponent(rangeSliderContext.RangeSliderProvider, {

package/range-slider/range-slider.mjs

@@ -6,7 +6,7 @@ import { RangeSliderProvider } from './range-slider-context.mjs';
 import { useRangeSlider } from './use-range-slider.mjs';
 
 const RangeSlider = props => {
-  const [useRangeSliderProps, divProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'orientation', 'readOnly', 'step', 'thumbAlignment', 'value']);
+  const [useRangeSliderProps, divProps] = createSplitProps()(props, ['aria-label', 'aria-labelledby', 'dir', 'disabled', 'form', 'getAriaValueText', 'getRootNode', 'id', 'ids', 'invalid', 'max', 'min', 'minStepsBetweenThumbs', 'name', 'onChange', 'onChangeEnd', 'onChangeStart', 'onFocusChange', 'orientation', 'readOnly', 'step', 'thumbAlignment', 'thumbSize', 'value']);
   const api = useRangeSlider(useRangeSliderProps);
   const getChildren = () => runIfFn(props.children, api);
   return createComponent(RangeSliderProvider, {

package/range-slider/range-slider.stories.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;

package/range-slider/range-slider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/range-slider/use-range-slider.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const rangeSlider = require('@zag-js/range-slider');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/range-slider/use-range-slider.d.ts

@@ -1,34 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
 import * as rangeSlider from '@zag-js/range-slider';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseRangeSliderProps = Optional<rangeSlider.Context, 'id'>;
-export type UseRangeSliderReturn = ReturnType<typeof useRangeSlider>;
-export declare const useRangeSlider: (props: UseRangeSliderProps) => Accessor<{
-    value: number[];
-    isDragging: boolean;
-    isFocused: boolean;
-    setValue(value: number[]): void;
-    getThumbValue(index: number): number;
-    setThumbValue(index: number, value: number): void;
-    getValuePercent: (value: number) => number;
-    getPercentValue: (percent: number) => number;
-    getThumbPercent(index: number): number;
-    setThumbPercent(index: number, percent: number): void;
-    getThumbMin(index: number): number;
-    getThumbMax(index: number): number;
-    increment(index: number): void;
-    decrement(index: number): void;
-    focus(): void;
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    rootProps: JSX.HTMLAttributes<any>;
-    outputProps: JSX.OutputHTMLAttributes<HTMLElement>;
-    trackProps: JSX.HTMLAttributes<any>;
-    getThumbProps(index: number): JSX.HTMLAttributes<any>;
-    getHiddenInputProps(index: number): JSX.InputHTMLAttributes<HTMLInputElement>;
-    rangeProps: JSX.HTMLAttributes<any>;
-    controlProps: JSX.HTMLAttributes<any>;
-    markerGroupProps: JSX.HTMLAttributes<any>;
-    getMarkerProps({ value }: {
-        value: number;
-    }): JSX.HTMLAttributes<any>;
-}>;
+export type UseRangeSliderReturn = Accessor<rangeSlider.Api<PropTypes>>;
+export declare const useRangeSlider: (props: UseRangeSliderProps) => UseRangeSliderReturn;

package/range-slider/use-range-slider.mjs

@@ -1,6 +1,7 @@
 import * as rangeSlider from '@zag-js/range-slider';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRangeSlider = (props) => {

package/rating-group/index.cjs

@@ -3,18 +3,27 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const rating = require('./rating.cjs');
+const ratingContext = require('./rating-context.cjs');
 const ratingGroup = require('./rating-group.cjs');
+const ratingGroupContext = require('./rating-group-context.cjs');
 const ratingGroupControl = require('./rating-group-control.cjs');
 const ratingGroupLabel = require('./rating-group-label.cjs');
 const rating$1 = require('@zag-js/rating-group');
 
-
+const RatingGroup = Object.assign(ratingGroup.RatingGroup, {
+  Root: ratingGroup.RatingGroup,
+  Control: ratingGroupControl.RatingGroupControl,
+  Label: ratingGroupLabel.RatingGroupLabel,
+  Rating: rating.Rating
+});
 
 exports.Rating = rating.Rating;
-exports.RatingGroup = ratingGroup.RatingGroup;
+exports.useRatingContext = ratingContext.useRatingContext;
+exports.useRatingGroupContext = ratingGroupContext.useRatingGroupContext;
 exports.RatingGroupControl = ratingGroupControl.RatingGroupControl;
 exports.RatingGroupLabel = ratingGroupLabel.RatingGroupLabel;
 Object.defineProperty(exports, 'ratingGroupAnatomy', {
-	enumerable: true,
-	get: () => rating$1.anatomy
+  enumerable: true,
+  get: () => rating$1.anatomy
 });
+exports.RatingGroup = RatingGroup;

package/rating-group/index.d.ts

@@ -1,5 +1,16 @@
-export { Rating, type RatingProps } from './rating';
-export { RatingGroup, type RatingGroupProps } from './rating-group';
-export { RatingGroupControl, type RatingGroupControlProps } from './rating-group-control';
-export { RatingGroupLabel, type RatingGroupLabelProps } from './rating-group-label';
-export { ratingGroupAnatomy } from './rating-group.anatomy';
+import { JSX } from 'solid-js';
+import { Rating, type RatingProps } from './rating';
+import { useRatingContext } from './rating-context';
+import { type RatingGroupProps } from './rating-group';
+import { useRatingGroupContext } from './rating-group-context';
+import { RatingGroupControl, type RatingGroupControlProps } from './rating-group-control';
+import { RatingGroupLabel, type RatingGroupLabelProps } from './rating-group-label';
+import { ratingGroupAnatomy } from './rating-group.anatomy';
+declare const RatingGroup: ((props: RatingGroupProps) => JSX.Element) & {
+    Root: (props: RatingGroupProps) => JSX.Element;
+    Control: (props: RatingGroupControlProps) => JSX.Element;
+    Label: (props: RatingGroupLabelProps) => JSX.Element;
+    Rating: (props: RatingProps) => JSX.Element;
+};
+export { Rating, RatingGroup, RatingGroupControl, RatingGroupLabel, ratingGroupAnatomy, useRatingContext, useRatingGroupContext, };
+export type { RatingGroupControlProps, RatingGroupLabelProps, RatingGroupProps, RatingProps };

package/rating-group/index.mjs

@@ -1,5 +1,16 @@
-export { Rating } from './rating.mjs';
-export { RatingGroup } from './rating-group.mjs';
-export { RatingGroupControl } from './rating-group-control.mjs';
-export { RatingGroupLabel } from './rating-group-label.mjs';
+import { Rating } from './rating.mjs';
+export { useRatingContext } from './rating-context.mjs';
+import { RatingGroup as RatingGroup$1 } from './rating-group.mjs';
+export { useRatingGroupContext } from './rating-group-context.mjs';
+import { RatingGroupControl } from './rating-group-control.mjs';
+import { RatingGroupLabel } from './rating-group-label.mjs';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
+
+const RatingGroup = Object.assign(RatingGroup$1, {
+  Root: RatingGroup$1,
+  Control: RatingGroupControl,
+  Label: RatingGroupLabel,
+  Rating
+});
+
+export { Rating, RatingGroup, RatingGroupControl, RatingGroupLabel };

package/rating-group/rating-context.d.ts

@@ -1,5 +1,4 @@
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
-import type { ItemState, type connect } from '@zag-js/rating-group';
-import type { Accessor } from 'solid-js';
+import { ItemState, type connect } from '@zag-js/rating-group';
+import { ContextProviderComponent, Accessor } from 'solid-js';
 export type RatingContext = ReturnType<ReturnType<typeof connect>['getRatingState']>;
 export declare const RatingProvider: ContextProviderComponent<Accessor<ItemState>>, useRatingContext: () => Accessor<ItemState>;

package/rating-group/rating-group-context.d.ts

@@ -1,34 +1,4 @@
-import type { ItemProps, ItemState } from '@zag-js/rating-group';
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseRatingGroupReturn } from './use-rating-group';
 export type RatingGroupContext = UseRatingGroupReturn;
-export declare const RatingGroupProvider: ContextProviderComponent<Accessor<{
-    setValue(value: number): void;
-    clearValue(): void;
-    isHovering: boolean;
-    value: number;
-    hoveredValue: number;
-    size: number;
-    sizeArray: number[];
-    getRatingState(props: ItemProps): ItemState;
-    rootProps: JSX.HTMLAttributes<any>;
-    hiddenInputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    labelProps: JSX.HTMLAttributes<any>;
-    controlProps: JSX.HTMLAttributes<any>;
-    getRatingProps(props: ItemProps): JSX.HTMLAttributes<any>;
-}>>, useRatingGroupContext: () => Accessor<{
-    setValue(value: number): void;
-    clearValue(): void;
-    isHovering: boolean;
-    value: number;
-    hoveredValue: number;
-    size: number;
-    sizeArray: number[];
-    getRatingState(props: ItemProps): ItemState;
-    rootProps: JSX.HTMLAttributes<any>;
-    hiddenInputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    labelProps: JSX.HTMLAttributes<any>;
-    controlProps: JSX.HTMLAttributes<any>;
-    getRatingProps(props: ItemProps): JSX.HTMLAttributes<any>;
-}>;
+export declare const RatingGroupProvider: ContextProviderComponent<UseRatingGroupReturn>, useRatingGroupContext: () => UseRatingGroupReturn;

package/rating-group/rating-group-control.cjs

@@ -8,15 +8,20 @@ const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const RatingGroupControl = props => {
   const api = ratingGroupContext.useRatingGroupContext();
   const getChildren = () => runIfFn.runIfFn(props.children, api);
   const controlProps = solid.mergeProps(() => api().controlProps, props);
-  return web.createComponent(factory.ark.div, web.mergeProps(controlProps, {
+  return [web.createComponent(factory.ark.div, web.mergeProps(controlProps, {
     get children() {
       return getChildren();
     }
-  }));
+  })), (() => {
+    const _el$ = _tmpl$();
+    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
 };
 
 exports.RatingGroupControl = RatingGroupControl;

package/rating-group/rating-group-control.mjs

@@ -1,18 +1,23 @@
-import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, spread, template } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useRatingGroupContext } from './rating-group-context.mjs';
 
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
   const getChildren = () => runIfFn(props.children, api);
   const controlProps = mergeProps(() => api().controlProps, props);
-  return createComponent(ark.div, mergeProps$1(controlProps, {
+  return [createComponent(ark.div, mergeProps$1(controlProps, {
     get children() {
       return getChildren();
     }
-  }));
+  })), (() => {
+    const _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
+    return _el$;
+  })()];
 };
 
 export { RatingGroupControl };

package/rating-group/rating-group-label.d.ts

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

package/rating-group/rating-group.cjs

@@ -10,17 +10,13 @@ const ratingGroupContext = require('./rating-group-context.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 
 const RatingGroup = props => {
-  const [ratingParams, restProps] = createSplitProps.createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
+  const [ratingParams, localProps] = createSplitProps.createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
   const api = useRatingGroup.useRatingGroup(ratingParams);
-  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(ratingGroupContext.RatingGroupProvider, {
     value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
-        get children() {
-          return [restProps.children, web.createComponent(factory.ark.input, web.mergeProps(() => api().hiddenInputProps))];
-        }
-      }));
+      return web.createComponent(factory.ark.div, mergedProps);
     }
   });
 };

package/rating-group/rating-group.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseRatingGroupProps } from './use-rating-group';

package/rating-group/rating-group.mjs

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
@@ -6,17 +6,13 @@ import { RatingGroupProvider } from './rating-group-context.mjs';
 import { useRatingGroup } from './use-rating-group.mjs';
 
 const RatingGroup = props => {
-  const [ratingParams, restProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
+  const [ratingParams, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
   const api = useRatingGroup(ratingParams);
-  const rootProps = mergeProps(() => api().rootProps, restProps);
+  const mergedProps = mergeProps(() => api().rootProps, localProps);
   return createComponent(RatingGroupProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(rootProps, {
-        get children() {
-          return [restProps.children, createComponent(ark.input, mergeProps$1(() => api().hiddenInputProps))];
-        }
-      }));
+      return createComponent(ark.div, mergedProps);
     }
   });
 };

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

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const ControlledRatingGroup: () => JSX.Element;

package/rating-group/use-rating-group.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const rating = require('@zag-js/rating-group');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/rating-group/use-rating-group.d.ts

@@ -1,20 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
 import * as rating from '@zag-js/rating-group';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseRatingGroupProps = Optional<rating.Context, 'id'>;
-export type UseRatingGroupReturn = ReturnType<typeof useRatingGroup>;
-export declare const useRatingGroup: (props: UseRatingGroupProps) => Accessor<{
-    setValue(value: number): void;
-    clearValue(): void;
-    isHovering: boolean;
-    value: number;
-    hoveredValue: number;
-    size: number;
-    sizeArray: number[];
-    getRatingState(props: rating.ItemProps): rating.ItemState;
-    rootProps: JSX.HTMLAttributes<any>;
-    hiddenInputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-    labelProps: JSX.HTMLAttributes<any>;
-    controlProps: JSX.HTMLAttributes<any>;
-    getRatingProps(props: rating.ItemProps): JSX.HTMLAttributes<any>;
-}>;
+export type UseRatingGroupReturn = Accessor<rating.Api<PropTypes>>;
+export declare const useRatingGroup: (props: UseRatingGroupProps) => UseRatingGroupReturn;

package/rating-group/use-rating-group.mjs

@@ -1,6 +1,7 @@
 import * as rating from '@zag-js/rating-group';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useRatingGroup = props => {

package/run-if-fn.test.d.ts

@@ -0,0 +1 @@
+export {};

package/segment-group/index.cjs

@@ -3,21 +3,30 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const segment = require('./segment.cjs');
+const segmentContext = require('./segment-context.cjs');
 const segmentControl = require('./segment-control.cjs');
 const segmentGroup = require('./segment-group.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroupIndicator = require('./segment-group-indicator.cjs');
 const segmentGroupLabel = require('./segment-group-label.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
-const segmentIndicator = require('./segment-indicator.cjs');
-const segmentInput = require('./segment-input.cjs');
 const segmentLabel = require('./segment-label.cjs');
 
-
+const SegmentGroup = Object.assign(segmentGroup.SegmentGroup, {
+  Root: segmentGroup.SegmentGroup,
+  Label: segmentGroupLabel.SegmentGroupLabel,
+  Indicator: segmentGroupIndicator.SegmentGroupIndicator,
+  Segment: segment.Segment,
+  SegmentLabel: segmentLabel.SegmentLabel,
+  SegmentControl: segmentControl.SegmentControl
+});
 
 exports.Segment = segment.Segment;
+exports.useSegmentContext = segmentContext.useSegmentContext;
 exports.SegmentControl = segmentControl.SegmentControl;
-exports.SegmentGroup = segmentGroup.SegmentGroup;
+exports.useSegmentGroupContext = segmentGroupContext.useSegmentGroupContext;
+exports.SegmentGroupIndicator = segmentGroupIndicator.SegmentGroupIndicator;
 exports.SegmentGroupLabel = segmentGroupLabel.SegmentGroupLabel;
 exports.segmentGroupAnatomy = segmentGroup_anatomy.segmentGroupAnatomy;
-exports.SegmentIndicator = segmentIndicator.SegmentIndicator;
-exports.SegmentInput = segmentInput.SegmentInput;
 exports.SegmentLabel = segmentLabel.SegmentLabel;
+exports.SegmentGroup = SegmentGroup;

package/segment-group/index.d.ts

@@ -1,8 +1,20 @@
-export { Segment, type SegmentProps } from './segment';
-export { SegmentControl, type SegmentControlProps } from './segment-control';
-export { SegmentGroup, type SegmentGroupProps } from './segment-group';
-export { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
-export { segmentGroupAnatomy } from './segment-group.anatomy';
-export { SegmentIndicator, type SegmentIndicatorProps } from './segment-indicator';
-export { SegmentInput, type SegmentInputProps } from './segment-input';
-export { SegmentLabel, type SegmentLabelProps } from './segment-label';
+import { JSX } from 'solid-js';
+import { Segment, type SegmentProps } from './segment';
+import { useSegmentContext } from './segment-context';
+import { SegmentControl, type SegmentControlProps } from './segment-control';
+import { type SegmentGroupProps } from './segment-group';
+import { useSegmentGroupContext } from './segment-group-context';
+import { SegmentGroupIndicator, type SegmentGroupIndicatorProps } from './segment-group-indicator';
+import { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
+import { segmentGroupAnatomy } from './segment-group.anatomy';
+import { SegmentLabel, type SegmentLabelProps } from './segment-label';
+declare const SegmentGroup: ((props: SegmentGroupProps) => JSX.Element) & {
+    Root: (props: SegmentGroupProps) => JSX.Element;
+    Label: (props: SegmentGroupLabelProps) => JSX.Element;
+    Indicator: (props: SegmentGroupIndicatorProps) => JSX.Element;
+    Segment: (props: SegmentProps) => JSX.Element;
+    SegmentLabel: (props: SegmentLabelProps) => JSX.Element;
+    SegmentControl: (props: SegmentControlProps) => JSX.Element;
+};
+export { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentGroupLabel, SegmentLabel, segmentGroupAnatomy, useSegmentContext, useSegmentGroupContext, };
+export type { SegmentControlProps, SegmentGroupIndicatorProps, SegmentGroupLabelProps, SegmentGroupProps, SegmentLabelProps, SegmentProps, };

package/segment-group/index.mjs

@@ -1,8 +1,20 @@
-export { Segment } from './segment.mjs';
-export { SegmentControl } from './segment-control.mjs';
-export { SegmentGroup } from './segment-group.mjs';
-export { SegmentGroupLabel } from './segment-group-label.mjs';
+import { Segment } from './segment.mjs';
+export { useSegmentContext } from './segment-context.mjs';
+import { SegmentControl } from './segment-control.mjs';
+import { SegmentGroup as SegmentGroup$1 } from './segment-group.mjs';
+export { useSegmentGroupContext } from './segment-group-context.mjs';
+import { SegmentGroupIndicator } from './segment-group-indicator.mjs';
+import { SegmentGroupLabel } from './segment-group-label.mjs';
 export { segmentGroupAnatomy } from './segment-group.anatomy.mjs';
-export { SegmentIndicator } from './segment-indicator.mjs';
-export { SegmentInput } from './segment-input.mjs';
-export { SegmentLabel } from './segment-label.mjs';
+import { SegmentLabel } from './segment-label.mjs';
+
+const SegmentGroup = Object.assign(SegmentGroup$1, {
+  Root: SegmentGroup$1,
+  Label: SegmentGroupLabel,
+  Indicator: SegmentGroupIndicator,
+  Segment,
+  SegmentLabel,
+  SegmentControl
+});
+
+export { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentGroupLabel, SegmentLabel };

package/segment-group/segment-context.d.ts

@@ -1,5 +1,14 @@
-import type { RadioProps } from '@zag-js/radio-group/dist/radio-group.types';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type connect } from '@zag-js/radio-group';
 export type SegmentContext = Parameters<ReturnType<typeof connect>['getRadioProps']>[0];
-export declare const SegmentProvider: ContextProviderComponent<RadioProps>, useSegmentContext: () => RadioProps;
+export declare const SegmentProvider: ContextProviderComponent<{
+    value: string;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    invalid?: boolean | undefined;
+}>, useSegmentContext: () => {
+    value: string;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    invalid?: boolean | undefined;
+};

package/segment-group/segment-control.cjs

@@ -9,11 +9,16 @@ const segmentContext = require('./segment-context.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const SegmentControl = props => {
   const api = segmentGroupContext.useSegmentGroupContext();
-  const segmentParams = segmentContext.useSegmentContext();
-  const controlProps = solid.mergeProps(() => api().getRadioControlProps(segmentParams), props);
-  return web.createComponent(factory.ark.div, web.mergeProps(controlProps, () => segmentGroup_anatomy.parts.radioControl.attrs));
+  const context = segmentContext.useSegmentContext();
+  const controlProps = solid.mergeProps(() => api().getRadioControlProps(context), props);
+  return [web.createComponent(factory.ark.div, web.mergeProps(controlProps, () => segmentGroup_anatomy.parts.radioControl.attrs)), (() => {
+    const _el$ = _tmpl$();
+    web.spread(_el$, web.mergeProps(() => api().getRadioHiddenInputProps(context)), false, false);
+    return _el$;
+  })()];
 };
 
 exports.SegmentControl = SegmentControl;

package/segment-group/segment-control.d.ts

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

package/segment-group/segment-control.mjs

@@ -1,15 +1,20 @@
-import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, spread, template } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSegmentContext } from './segment-context.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
 
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const SegmentControl = props => {
   const api = useSegmentGroupContext();
-  const segmentParams = useSegmentContext();
-  const controlProps = mergeProps(() => api().getRadioControlProps(segmentParams), props);
-  return createComponent(ark.div, mergeProps$1(controlProps, () => parts.radioControl.attrs));
+  const context = useSegmentContext();
+  const controlProps = mergeProps(() => api().getRadioControlProps(context), props);
+  return [createComponent(ark.div, mergeProps$1(controlProps, () => parts.radioControl.attrs)), (() => {
+    const _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(() => api().getRadioHiddenInputProps(context)), false, false);
+    return _el$;
+  })()];
 };
 
 export { SegmentControl };