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

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 };

package/segment-group/segment-group-label.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 SegmentGroupLabel = props => {
   const api = segmentGroupContext.useSegmentGroupContext();
-  const labelProps = solid.mergeProps(() => api().labelProps, props);
-  return web.createComponent(factory.ark.label, web.mergeProps(labelProps, () => segmentGroup_anatomy.parts.label.attrs));
+  const mergedProps = solid.mergeProps(() => api().labelProps, anatomy.segmentGroupAnatomy.build().label.attrs, props);
+  return web.createComponent(factory.ark.label, mergedProps);
 };
 
 exports.SegmentGroupLabel = SegmentGroupLabel;

package/segment-group/segment-group-label.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 SegmentGroupLabel = props => {
   const api = useSegmentGroupContext();
-  const labelProps = mergeProps(() => api().labelProps, props);
-  return createComponent(ark.label, mergeProps$1(labelProps, () => parts.label.attrs));
+  const mergedProps = mergeProps(() => api().labelProps, segmentGroupAnatomy.build().label.attrs, props);
+  return createComponent(ark.label, mergedProps);
 };
 
 export { SegmentGroupLabel };

package/segment-group/segment-group.cjs

@@ -3,21 +3,21 @@
 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 segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroup = require('./use-segment-group.cjs');
 
 const SegmentGroup = props => {
-  const [groupParams, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
+  const [groupParams, localProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
   const api = useSegmentGroup.useSegmentGroup(groupParams);
-  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
   return web.createComponent(segmentGroupContext.SegmentGroupProvider, {
     value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, () => segmentGroup_anatomy.parts.root.attrs));
+      return web.createComponent(factory.ark.div, mergedProps);
     }
   });
 };

package/segment-group/segment-group.mjs

@@ -1,19 +1,19 @@
-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 { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { SegmentGroupProvider } from './segment-group-context.mjs';
-import { parts } from './segment-group.anatomy.mjs';
 import { useSegmentGroup } from './use-segment-group.mjs';
 
 const SegmentGroup = props => {
-  const [groupParams, restProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
+  const [groupParams, localProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'value']);
   const api = useSegmentGroup(groupParams);
-  const rootProps = mergeProps(() => api().rootProps, restProps);
+  const mergedProps = mergeProps(() => api().rootProps, segmentGroupAnatomy.build().root.attrs, localProps);
   return createComponent(SegmentGroupProvider, {
     value: api,
     get children() {
-      return createComponent(ark.div, mergeProps$1(rootProps, () => parts.root.attrs));
+      return createComponent(ark.div, mergedProps);
     }
   });
 };

package/select/index.cjs

@@ -2,38 +2,53 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const select$1 = require('./select.cjs');
+const select = require('./select.cjs');
+const selectClearTrigger = require('./select-clear-trigger.cjs');
 const selectContent = require('./select-content.cjs');
 const selectContext = require('./select-context.cjs');
+const selectControl = require('./select-control.cjs');
+const selectIndicator = require('./select-indicator.cjs');
+const selectItem = require('./select-item.cjs');
+const selectItemContext = require('./select-item-context.cjs');
+const selectItemGroup = require('./select-item-group.cjs');
+const selectItemGroupLabel = require('./select-item-group-label.cjs');
+const selectItemIndicator = require('./select-item-indicator.cjs');
+const selectItemText = require('./select-item-text.cjs');
 const selectLabel = require('./select-label.cjs');
-const selectOption = require('./select-option.cjs');
-const selectOptionGroup = require('./select-option-group.cjs');
-const selectOptionGroupLabel = require('./select-option-group-label.cjs');
 const selectPositioner = require('./select-positioner.cjs');
 const selectTrigger = require('./select-trigger.cjs');
-const select = require('@zag-js/select');
+const selectValueText = require('./select-value-text.cjs');
 
-const Select = Object.assign(select$1.Select, {
-  Root: select$1.Select,
+const Select = Object.assign(select.Select, {
+  Root: select.Select,
+  ClearTrigger: selectClearTrigger.SelectClearTrigger,
   Content: selectContent.SelectContent,
+  Control: selectControl.SelectControl,
+  Indicator: selectIndicator.SelectIndicator,
+  Item: selectItem.SelectItem,
+  ItemGroup: selectItemGroup.SelectItemGroup,
+  ItemGroupLabel: selectItemGroupLabel.SelectItemGroupLabel,
+  ItemIndicator: selectItemIndicator.SelectItemIndicator,
+  ItemText: selectItemText.SelectItemText,
   Label: selectLabel.SelectLabel,
-  Option: selectOption.SelectOption,
-  OptionGroup: selectOptionGroup.SelectOptionGroup,
-  OptionGroupLabel: selectOptionGroupLabel.SelectOptionGroupLabel,
   Positioner: selectPositioner.SelectPositioner,
-  Trigger: selectTrigger.SelectTrigger
+  Trigger: selectTrigger.SelectTrigger,
+  ValueText: selectValueText.SelectValueText
 });
 
+exports.SelectClearTrigger = selectClearTrigger.SelectClearTrigger;
 exports.SelectContent = selectContent.SelectContent;
 exports.useSelectContext = selectContext.useSelectContext;
+exports.SelectControl = selectControl.SelectControl;
+exports.SelectIndicator = selectIndicator.SelectIndicator;
+exports.SelectItem = selectItem.SelectItem;
+exports.useSelectItemContext = selectItemContext.useSelectItemContext;
+exports.SelectItemGroup = selectItemGroup.SelectItemGroup;
+exports.SelectItemGroupLabel = selectItemGroupLabel.SelectItemGroupLabel;
+exports.SelectItemIndicator = selectItemIndicator.SelectItemIndicator;
+exports.SelectItemText = selectItemText.SelectItemText;
 exports.SelectLabel = selectLabel.SelectLabel;
-exports.SelectOption = selectOption.SelectOption;
-exports.SelectOptionGroup = selectOptionGroup.SelectOptionGroup;
-exports.SelectOptionGroupLabel = selectOptionGroupLabel.SelectOptionGroupLabel;
 exports.SelectPositioner = selectPositioner.SelectPositioner;
 exports.SelectTrigger = selectTrigger.SelectTrigger;
-Object.defineProperty(exports, 'selectAnatomy', {
-  enumerable: true,
-  get: () => select.anatomy
-});
+exports.SelectValueText = selectValueText.SelectValueText;
 exports.Select = Select;

package/select/index.d.ts

@@ -1,23 +1,36 @@
 import { JSX } from 'solid-js';
+import type { CollectionItem } from '../types';
 import { type SelectProps } from './select';
+import { SelectClearTrigger, type SelectClearTriggerProps } from './select-clear-trigger';
 import { SelectContent, type SelectContentProps } from './select-content';
-import { useSelectContext } from './select-context';
+import { useSelectContext, type SelectContext } from './select-context';
+import { SelectControl, type SelectControlProps } from './select-control';
+import { SelectIndicator, type SelectIndicatorProps } from './select-indicator';
+import { SelectItem, type SelectItemProps } from './select-item';
+import { useSelectItemContext, type SelectItemContext } from './select-item-context';
+import { SelectItemGroup, type SelectItemGroupProps } from './select-item-group';
+import { SelectItemGroupLabel, type SelectItemGroupLabelProps } from './select-item-group-label';
+import { SelectItemIndicator, type SelectItemIndicatorProps } from './select-item-indicator';
+import { SelectItemText, type SelectItemTextProps } from './select-item-text';
 import { SelectLabel, type SelectLabelProps } from './select-label';
-import { SelectOption, type SelectOptionProps } from './select-option';
-import { SelectOptionGroup, type SelectOptionGroupProps } from './select-option-group';
-import { SelectOptionGroupLabel, type SelectOptionGroupLabelProps } from './select-option-group-label';
 import { SelectPositioner, type SelectPositionerProps } from './select-positioner';
 import { SelectTrigger, type SelectTriggerProps } from './select-trigger';
-import { selectAnatomy } from './select.anatomy';
-declare const Select: ((props: SelectProps) => JSX.Element) & {
-    Root: (props: SelectProps) => JSX.Element;
+import { SelectValueText, type SelectValueTextProps } from './select-value-text';
+declare const Select: (<T extends CollectionItem>(props: SelectProps<T>) => JSX.Element) & {
+    Root: <T extends CollectionItem>(props: SelectProps<T>) => JSX.Element;
+    ClearTrigger: (props: SelectClearTriggerProps) => JSX.Element;
     Content: (props: SelectContentProps) => JSX.Element;
+    Control: (props: SelectControlProps) => JSX.Element;
+    Indicator: (props: SelectIndicatorProps) => JSX.Element;
+    Item: (props: SelectItemProps) => JSX.Element;
+    ItemGroup: (props: SelectItemGroupProps) => JSX.Element;
+    ItemGroupLabel: (props: SelectItemGroupLabelProps) => JSX.Element;
+    ItemIndicator: (props: SelectItemIndicatorProps) => JSX.Element;
+    ItemText: (props: SelectItemTextProps) => JSX.Element;
     Label: (props: SelectLabelProps) => JSX.Element;
-    Option: (props: SelectOptionProps) => JSX.Element;
-    OptionGroup: (props: SelectOptionGroupProps) => JSX.Element;
-    OptionGroupLabel: (props: SelectOptionGroupLabelProps) => JSX.Element;
     Positioner: (props: SelectPositionerProps) => JSX.Element;
     Trigger: (props: SelectTriggerProps) => JSX.Element;
+    ValueText: (props: SelectValueTextProps) => JSX.Element;
 };
-export { Select, SelectContent, SelectLabel, SelectOption, SelectOptionGroup, SelectOptionGroupLabel, SelectPositioner, SelectTrigger, selectAnatomy, useSelectContext, };
-export type { SelectContentProps, SelectLabelProps, SelectOptionGroupLabelProps, SelectOptionGroupProps, SelectOptionProps, SelectPositionerProps, SelectProps, SelectTriggerProps, };
+export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, useSelectContext, useSelectItemContext, };
+export type { CollectionItem, SelectClearTriggerProps, SelectContentProps, SelectContext, SelectControlProps, SelectIndicatorProps, SelectItemContext, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectPositionerProps, SelectProps, SelectTriggerProps, SelectValueTextProps, };

package/select/index.mjs

@@ -1,23 +1,35 @@
 import { Select as Select$1 } from './select.mjs';
+import { SelectClearTrigger } from './select-clear-trigger.mjs';
 import { SelectContent } from './select-content.mjs';
 export { useSelectContext } from './select-context.mjs';
+import { SelectControl } from './select-control.mjs';
+import { SelectIndicator } from './select-indicator.mjs';
+import { SelectItem } from './select-item.mjs';
+export { useSelectItemContext } from './select-item-context.mjs';
+import { SelectItemGroup } from './select-item-group.mjs';
+import { SelectItemGroupLabel } from './select-item-group-label.mjs';
+import { SelectItemIndicator } from './select-item-indicator.mjs';
+import { SelectItemText } from './select-item-text.mjs';
 import { SelectLabel } from './select-label.mjs';
-import { SelectOption } from './select-option.mjs';
-import { SelectOptionGroup } from './select-option-group.mjs';
-import { SelectOptionGroupLabel } from './select-option-group-label.mjs';
 import { SelectPositioner } from './select-positioner.mjs';
 import { SelectTrigger } from './select-trigger.mjs';
-export { anatomy as selectAnatomy } from '@zag-js/select';
+import { SelectValueText } from './select-value-text.mjs';
 
 const Select = Object.assign(Select$1, {
   Root: Select$1,
+  ClearTrigger: SelectClearTrigger,
   Content: SelectContent,
+  Control: SelectControl,
+  Indicator: SelectIndicator,
+  Item: SelectItem,
+  ItemGroup: SelectItemGroup,
+  ItemGroupLabel: SelectItemGroupLabel,
+  ItemIndicator: SelectItemIndicator,
+  ItemText: SelectItemText,
   Label: SelectLabel,
-  Option: SelectOption,
-  OptionGroup: SelectOptionGroup,
-  OptionGroupLabel: SelectOptionGroupLabel,
   Positioner: SelectPositioner,
-  Trigger: SelectTrigger
+  Trigger: SelectTrigger,
+  ValueText: SelectValueText
 });
 
-export { Select, SelectContent, SelectLabel, SelectOption, SelectOptionGroup, SelectOptionGroupLabel, SelectPositioner, SelectTrigger };
+export { Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText };

package/select/select-clear-trigger.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 selectContext = require('./select-context.cjs');
+
+const SelectClearTrigger = props => {
+  const api = selectContext.useSelectContext();
+  const mergedProps = solid.mergeProps(() => api().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, mergedProps);
+};
+
+exports.SelectClearTrigger = SelectClearTrigger;

package/select/select-clear-trigger.d.ts

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

package/select/select-clear-trigger.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSelectContext } from './select-context.mjs';
+
+const SelectClearTrigger = props => {
+  const api = useSelectContext();
+  const mergedProps = mergeProps(() => api().clearTriggerProps, props);
+  return createComponent(ark.button, mergedProps);
+};
+
+export { SelectClearTrigger };

package/select/select-content.cjs

@@ -5,12 +5,23 @@ 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 index = require('../presence/index.cjs');
 const selectContext = require('./select-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const SelectContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = selectContext.useSelectContext();
-  const contentProps = solid.mergeProps(() => api().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.SelectContent = SelectContent;