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

package/rating-group/index.cjs

@@ -2,28 +2,23 @@
 
 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 ratingGroupItem = require('./rating-group-item.cjs');
+const ratingGroupItemContext = require('./rating-group-item-context.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
+  Item: ratingGroupItem.RatingGroupItem
 });
 
-exports.Rating = rating.Rating;
-exports.useRatingContext = ratingContext.useRatingContext;
 exports.useRatingGroupContext = ratingGroupContext.useRatingGroupContext;
 exports.RatingGroupControl = ratingGroupControl.RatingGroupControl;
+exports.RatingGroupItem = ratingGroupItem.RatingGroupItem;
+exports.useRatingGroupItemContext = ratingGroupItemContext.useRatingGroupItemContext;
 exports.RatingGroupLabel = ratingGroupLabel.RatingGroupLabel;
-Object.defineProperty(exports, 'ratingGroupAnatomy', {
-  enumerable: true,
-  get: () => rating$1.anatomy
-});
 exports.RatingGroup = RatingGroup;

package/rating-group/index.d.ts

@@ -1,16 +1,15 @@
 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 { useRatingGroupContext, type RatingGroupContext } from './rating-group-context';
 import { RatingGroupControl, type RatingGroupControlProps } from './rating-group-control';
+import { RatingGroupItem, type RatingGroupItemProps } from './rating-group-item';
+import { useRatingGroupItemContext, type RatingGroupItemContext } from './rating-group-item-context';
 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;
+    Item: (props: RatingGroupItemProps) => JSX.Element;
 };
-export { Rating, RatingGroup, RatingGroupControl, RatingGroupLabel, ratingGroupAnatomy, useRatingContext, useRatingGroupContext, };
-export type { RatingGroupControlProps, RatingGroupLabelProps, RatingGroupProps, RatingProps };
+export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, useRatingGroupContext, useRatingGroupItemContext, };
+export type { RatingGroupContext, RatingGroupControlProps, RatingGroupItemContext, RatingGroupItemProps, RatingGroupLabelProps, RatingGroupProps, };

package/rating-group/index.mjs

@@ -1,16 +1,15 @@
-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 { RatingGroupItem } from './rating-group-item.mjs';
+export { useRatingGroupItemContext } from './rating-group-item-context.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
+  Item: RatingGroupItem
 });
 
-export { Rating, RatingGroup, RatingGroupControl, RatingGroupLabel };
+export { RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel };

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

@@ -12,8 +12,8 @@ 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, {
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return [web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
     get children() {
       return getChildren();
     }

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

@@ -8,8 +8,8 @@ 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, {
+  const mergedProps = mergeProps(() => api().controlProps, props);
+  return [createComponent(ark.div, mergeProps$1(mergedProps, {
     get children() {
       return getChildren();
     }

package/rating-group/rating-group-item-context.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('@zag-js/rating-group');
+const createContext = require('../create-context.cjs');
+
+const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext.createContext({
+  hookName: "useRatingGroupItemContext",
+  providerName: "<RatingGroupItemProvider />"
+});
+
+exports.RatingGroupItemProvider = RatingGroupItemProvider;
+exports.useRatingGroupItemContext = useRatingGroupItemContext;

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

@@ -0,0 +1,4 @@
+import { ContextProviderComponent } from 'solid-js';
+import { type ItemState } from '@zag-js/rating-group';
+export type RatingGroupItemContext = ItemState;
+export declare const RatingGroupItemProvider: ContextProviderComponent<ItemState>, useRatingGroupItemContext: () => ItemState;

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

@@ -0,0 +1,9 @@
+import '@zag-js/rating-group';
+import { createContext } from '../create-context.mjs';
+
+const [RatingGroupItemProvider, useRatingGroupItemContext] = createContext({
+  hookName: "useRatingGroupItemContext",
+  providerName: "<RatingGroupItemProvider />"
+});
+
+export { RatingGroupItemProvider, useRatingGroupItemContext };

package/rating-group/{rating.cjs → rating-group-item.cjs}

@@ -7,25 +7,25 @@ const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
-const ratingContext = require('./rating-context.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
+const ratingGroupItemContext = require('./rating-group-item-context.cjs');
 
-const Rating = props => {
+const RatingGroupItem = props => {
   const [ratingParams, restProps] = createSplitProps.createSplitProps()(props, ['index']);
   const api = ratingGroupContext.useRatingGroupContext();
-  const ratingState = () => api().getRatingState(ratingParams);
-  const getChildren = () => runIfFn.runIfFn(restProps.children, ratingState);
-  const ratingProps = solid.mergeProps(() => api().getRatingProps(ratingParams), restProps);
-  return web.createComponent(factory.ark.span, web.mergeProps(ratingProps, {
+  const itemState = api().getItemState(ratingParams);
+  const mergedProps = solid.mergeProps(() => api().getItemProps(ratingParams), restProps);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, itemState);
+  return web.createComponent(ratingGroupItemContext.RatingGroupItemProvider, {
+    value: itemState,
     get children() {
-      return web.createComponent(ratingContext.RatingProvider, {
-        value: ratingState,
+      return web.createComponent(factory.ark.span, web.mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }
-      });
+      }));
     }
-  }));
+  });
 };
 
-exports.Rating = Rating;
+exports.RatingGroupItem = RatingGroupItem;

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

@@ -0,0 +1,9 @@
+import type { ItemProps } from '@zag-js/rating-group';
+import { type JSX } from 'solid-js/jsx-runtime';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type RatingGroupItemContext } from './rating-group-item-context';
+export type RatingGroupItemProps = Assign<HTMLArkProps<'span'>, ItemProps & {
+    children: (state: RatingGroupItemContext) => JSX.Element | JSX.Element;
+}>;
+export declare const RatingGroupItem: (props: RatingGroupItemProps) => JSX.Element;

package/rating-group/{rating.mjs → rating-group-item.mjs}

@@ -3,25 +3,25 @@ import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
-import { RatingProvider } from './rating-context.mjs';
 import { useRatingGroupContext } from './rating-group-context.mjs';
+import { RatingGroupItemProvider } from './rating-group-item-context.mjs';
 
-const Rating = props => {
+const RatingGroupItem = props => {
   const [ratingParams, restProps] = createSplitProps()(props, ['index']);
   const api = useRatingGroupContext();
-  const ratingState = () => api().getRatingState(ratingParams);
-  const getChildren = () => runIfFn(restProps.children, ratingState);
-  const ratingProps = mergeProps(() => api().getRatingProps(ratingParams), restProps);
-  return createComponent(ark.span, mergeProps$1(ratingProps, {
+  const itemState = api().getItemState(ratingParams);
+  const mergedProps = mergeProps(() => api().getItemProps(ratingParams), restProps);
+  const getChildren = () => runIfFn(restProps.children, itemState);
+  return createComponent(RatingGroupItemProvider, {
+    value: itemState,
     get children() {
-      return createComponent(RatingProvider, {
-        value: ratingState,
+      return createComponent(ark.span, mergeProps$1(mergedProps, {
         get children() {
           return getChildren();
         }
-      });
+      }));
     }
-  }));
+  });
 };
 
-export { Rating };
+export { RatingGroupItem };

package/rating-group/rating-group-label.cjs

@@ -8,9 +8,9 @@ const factory = require('../factory.cjs');
 const ratingGroupContext = require('./rating-group-context.cjs');
 
 const RatingGroupLabel = props => {
-  const ratingGroup = ratingGroupContext.useRatingGroupContext();
-  const labelProps = solid.mergeProps(() => ratingGroup().labelProps, props);
-  return web.createComponent(factory.ark.label, labelProps);
+  const api = ratingGroupContext.useRatingGroupContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, mergedProps);
 };
 
 exports.RatingGroupLabel = RatingGroupLabel;

package/rating-group/rating-group-label.mjs

@@ -4,9 +4,9 @@ import { ark } from '../factory.mjs';
 import { useRatingGroupContext } from './rating-group-context.mjs';
 
 const RatingGroupLabel = props => {
-  const ratingGroup = useRatingGroupContext();
-  const labelProps = mergeProps(() => ratingGroup().labelProps, props);
-  return createComponent(ark.label, labelProps);
+  const api = useRatingGroupContext();
+  const mergedProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
 };
 
 export { RatingGroupLabel };

package/rating-group/rating-group.cjs

@@ -10,7 +10,7 @@ const ratingGroupContext = require('./rating-group-context.cjs');
 const useRatingGroup = require('./use-rating-group.cjs');
 
 const RatingGroup = props => {
-  const [ratingParams, localProps] = 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', 'count', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onHoverChange', 'onValueChange', 'readOnly', 'translations', 'value']);
   const api = useRatingGroup.useRatingGroup(ratingParams);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(ratingGroupContext.RatingGroupProvider, {

package/rating-group/rating-group.mjs

@@ -6,7 +6,7 @@ import { RatingGroupProvider } from './rating-group-context.mjs';
 import { useRatingGroup } from './use-rating-group.mjs';
 
 const RatingGroup = props => {
-  const [ratingParams, localProps] = createSplitProps()(props, ['allowHalf', 'autoFocus', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'max', 'name', 'onChange', 'onHover', 'readOnly', 'translations', 'value']);
+  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 createComponent(RatingGroupProvider, {

package/segment-group/index.cjs

@@ -2,31 +2,29 @@
 
 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 segmentGroupItem = require('./segment-group-item.cjs');
+const segmentGroupItemContext = require('./segment-group-item-context.cjs');
+const segmentGroupItemControl = require('./segment-group-item-control.cjs');
+const segmentGroupItemText = require('./segment-group-item-text.cjs');
 const segmentGroupLabel = require('./segment-group-label.cjs');
-const segmentGroup_anatomy = require('./segment-group.anatomy.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
+  Item: segmentGroupItem.SegmentGroupItem,
+  ItemControl: segmentGroupItemControl.SegmentGroupItemControl,
+  ItemText: segmentGroupItemText.SegmentGroupItemText,
+  Label: segmentGroupLabel.SegmentGroupLabel
 });
 
-exports.Segment = segment.Segment;
-exports.useSegmentContext = segmentContext.useSegmentContext;
-exports.SegmentControl = segmentControl.SegmentControl;
 exports.useSegmentGroupContext = segmentGroupContext.useSegmentGroupContext;
 exports.SegmentGroupIndicator = segmentGroupIndicator.SegmentGroupIndicator;
+exports.SegmentGroupItem = segmentGroupItem.SegmentGroupItem;
+exports.useSegmentGroupItemContext = segmentGroupItemContext.useSegmentGroupItemContext;
+exports.SegmentGroupItemControl = segmentGroupItemControl.SegmentGroupItemControl;
+exports.SegmentGroupItemText = segmentGroupItemText.SegmentGroupItemText;
 exports.SegmentGroupLabel = segmentGroupLabel.SegmentGroupLabel;
-exports.segmentGroupAnatomy = segmentGroup_anatomy.segmentGroupAnatomy;
-exports.SegmentLabel = segmentLabel.SegmentLabel;
 exports.SegmentGroup = SegmentGroup;

package/segment-group/index.d.ts

@@ -1,20 +1,19 @@
 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 { useSegmentGroupContext, type SegmentGroupContext } from './segment-group-context';
 import { SegmentGroupIndicator, type SegmentGroupIndicatorProps } from './segment-group-indicator';
+import { SegmentGroupItem, type SegmentGroupItemProps } from './segment-group-item';
+import { useSegmentGroupItemContext, type SegmentGroupItemContext } from './segment-group-item-context';
+import { SegmentGroupItemControl, type SegmentGroupItemControlProps } from './segment-group-item-control';
+import { SegmentGroupItemText, type SegmentGroupItemTextProps } from './segment-group-item-text';
 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;
+    Item: (props: SegmentGroupItemProps) => JSX.Element;
+    ItemControl: (props: SegmentGroupItemControlProps) => JSX.Element;
+    ItemText: (props: SegmentGroupItemTextProps) => JSX.Element;
+    Label: (props: SegmentGroupLabelProps) => JSX.Element;
 };
-export { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentGroupLabel, SegmentLabel, segmentGroupAnatomy, useSegmentContext, useSegmentGroupContext, };
-export type { SegmentControlProps, SegmentGroupIndicatorProps, SegmentGroupLabelProps, SegmentGroupProps, SegmentLabelProps, SegmentProps, };
+export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, useSegmentGroupContext, useSegmentGroupItemContext, };
+export type { SegmentGroupContext, SegmentGroupIndicatorProps, SegmentGroupItemContext, SegmentGroupItemControlProps, SegmentGroupItemProps, SegmentGroupItemTextProps, SegmentGroupLabelProps, SegmentGroupProps, };

package/segment-group/index.mjs

@@ -1,20 +1,19 @@
-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 { SegmentGroupItem } from './segment-group-item.mjs';
+export { useSegmentGroupItemContext } from './segment-group-item-context.mjs';
+import { SegmentGroupItemControl } from './segment-group-item-control.mjs';
+import { SegmentGroupItemText } from './segment-group-item-text.mjs';
 import { SegmentGroupLabel } from './segment-group-label.mjs';
-export { segmentGroupAnatomy } from './segment-group.anatomy.mjs';
-import { SegmentLabel } from './segment-label.mjs';
 
 const SegmentGroup = Object.assign(SegmentGroup$1, {
   Root: SegmentGroup$1,
-  Label: SegmentGroupLabel,
   Indicator: SegmentGroupIndicator,
-  Segment,
-  SegmentLabel,
-  SegmentControl
+  Item: SegmentGroupItem,
+  ItemControl: SegmentGroupItemControl,
+  ItemText: SegmentGroupItemText,
+  Label: SegmentGroupLabel
 });
 
-export { Segment, SegmentControl, SegmentGroup, SegmentGroupIndicator, SegmentGroupLabel, SegmentLabel };
+export { SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel };

package/segment-group/segment-group-indicator.cjs

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const anatomy = require('@ark-ui/anatomy');
 const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
-const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
 const SegmentGroupIndicator = props => {
   const api = segmentGroupContext.useSegmentGroupContext();
-  const indicatorProps = solid.mergeProps(() => api().indicatorProps, props);
-  return web.createComponent(factory.ark.input, web.mergeProps(indicatorProps, () => segmentGroup_anatomy.parts.indicator.attrs));
+  const mergedProps = solid.mergeProps(() => api().indicatorProps, anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.SegmentGroupIndicator = SegmentGroupIndicator;

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

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

package/segment-group/segment-group-indicator.mjs

@@ -1,13 +1,13 @@
-import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
-import { parts } from './segment-group.anatomy.mjs';
 
 const SegmentGroupIndicator = props => {
   const api = useSegmentGroupContext();
-  const indicatorProps = mergeProps(() => api().indicatorProps, props);
-  return createComponent(ark.input, mergeProps$1(indicatorProps, () => parts.indicator.attrs));
+  const mergedProps = mergeProps(() => api().indicatorProps, segmentGroupAnatomy.build().indicator.attrs, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { SegmentGroupIndicator };

package/segment-group/segment-group-item-context.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [SegmentProvider, useSegmentGroupItemContext] = createContext.createContext(
+  {
+    hookName: "useSegmentGroupItemContext",
+    providerName: "<SegmentProvider />"
+  }
+);
+
+exports.SegmentProvider = SegmentProvider;
+exports.useSegmentGroupItemContext = useSegmentGroupItemContext;

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

@@ -0,0 +1,16 @@
+import { ContextProviderComponent } from 'solid-js';
+export interface ItemProps {
+    value: string;
+    disabled?: boolean;
+    invalid?: boolean;
+}
+export interface ItemState {
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isChecked: boolean;
+    isFocused: boolean;
+    isHovered: boolean;
+    isActive: boolean;
+}
+export type SegmentGroupItemContext = ItemProps;
+export declare const SegmentProvider: ContextProviderComponent<ItemProps>, useSegmentGroupItemContext: () => ItemProps;

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

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

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const anatomy = require('@ark-ui/anatomy');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroupItemContext = require('./segment-group-item-context.cjs');
+
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
+const SegmentGroupItemControl = props => {
+  const api = segmentGroupContext.useSegmentGroupContext();
+  const itemProps = segmentGroupItemContext.useSegmentGroupItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
+  return [web.createComponent(factory.ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$();
+    web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+exports.SegmentGroupItemControl = SegmentGroupItemControl;

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

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

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

@@ -0,0 +1,20 @@
+import { createComponent, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSegmentGroupContext } from './segment-group-context.mjs';
+import { useSegmentGroupItemContext } from './segment-group-item-context.mjs';
+
+const _tmpl$ = /*#__PURE__*/template(`<input>`);
+const SegmentGroupItemControl = props => {
+  const api = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemContext();
+  const mergedProps = mergeProps(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
+  return [createComponent(ark.div, mergedProps), (() => {
+    const _el$ = _tmpl$();
+    spread(_el$, mergeProps$1(() => api().getItemHiddenInputProps(itemProps)), false, false);
+    return _el$;
+  })()];
+};
+
+export { SegmentGroupItemControl };

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const anatomy = require('@ark-ui/anatomy');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroupItemContext = require('./segment-group-item-context.cjs');
+
+const SegmentGroupItemText = props => {
+  const api = segmentGroupContext.useSegmentGroupContext();
+  const itemProps = segmentGroupItemContext.useSegmentGroupItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), anatomy.segmentGroupAnatomy.build().itemText.attrs, props);
+  return web.createComponent(factory.ark.span, mergedProps);
+};
+
+exports.SegmentGroupItemText = SegmentGroupItemText;

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

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

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

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

package/segment-group/segment-group-item.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const anatomy = require('@ark-ui/anatomy');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroupItemContext = require('./segment-group-item-context.cjs');
+
+const SegmentGroupItem = props => {
+  const [itemProps, restProps] = createSplitProps.createSplitProps()(props, ['value', 'disabled', 'invalid']);
+  const api = segmentGroupContext.useSegmentGroupContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), anatomy.segmentGroupAnatomy.build().item.attrs, restProps);
+  return web.createComponent(segmentGroupItemContext.SegmentProvider, {
+    value: itemProps,
+    get children() {
+      return web.createComponent(factory.ark.label, mergedProps);
+    }
+  });
+};
+
+exports.SegmentGroupItem = SegmentGroupItem;

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

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type SegmentGroupItemContext } from './segment-group-item-context';
+export type SegmentGroupItemProps = Assign<HTMLArkProps<'label'>, SegmentGroupItemContext>;
+export declare const SegmentGroupItem: (props: SegmentGroupItemProps) => JSX.Element;

package/segment-group/segment-group-item.mjs

@@ -0,0 +1,21 @@
+import { createComponent } from 'solid-js/web';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useSegmentGroupContext } from './segment-group-context.mjs';
+import { SegmentProvider } from './segment-group-item-context.mjs';
+
+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 createComponent(SegmentProvider, {
+    value: itemProps,
+    get children() {
+      return createComponent(ark.label, mergedProps);
+    }
+  });
+};
+
+export { SegmentGroupItem };