@ark-ui/solid 0.9.0 → 0.10.1

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,7 +1,7 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { Accessor } 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<rating.PublicApi<PropTypes>>;
+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

@@ -7,21 +7,26 @@ 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,10 +1,20 @@
-export { Segment, type SegmentProps } from './segment';
-export { useSegmentContext } from './segment-context';
-export { SegmentControl, type SegmentControlProps } from './segment-control';
-export { SegmentGroup, type SegmentGroupProps } from './segment-group';
-export { useSegmentGroupContext } from './segment-group-context';
-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,10 +1,20 @@
-export { Segment } from './segment.mjs';
+import { Segment } from './segment.mjs';
 export { useSegmentContext } from './segment-context.mjs';
-export { SegmentControl } from './segment-control.mjs';
-export { SegmentGroup } from './segment-group.mjs';
+import { SegmentControl } from './segment-control.mjs';
+import { SegmentGroup as SegmentGroup$1 } from './segment-group.mjs';
 export { useSegmentGroupContext } from './segment-group-context.mjs';
-export { SegmentGroupLabel } from './segment-group-label.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,4 +1,4 @@
-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<{

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

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

@@ -1,7 +1,4 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { PublicApi } from '@zag-js/radio-group';
-import type { Accessor } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseSegmentGroupReturn } from './use-segment-group';
 export type SegmentGroupContext = UseSegmentGroupReturn;
-export declare const SegmentGroupProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useSegmentGroupContext: () => Accessor<PublicApi<PropTypes>>;
+export declare const SegmentGroupProvider: ContextProviderComponent<UseSegmentGroupReturn>, useSegmentGroupContext: () => UseSegmentGroupReturn;

package/segment-group/{segment-indicator.cjs → segment-group-indicator.cjs}

@@ -8,10 +8,10 @@ const factory = require('../factory.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
-const SegmentIndicator = props => {
+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));
 };
 
-exports.SegmentIndicator = SegmentIndicator;
+exports.SegmentGroupIndicator = SegmentGroupIndicator;

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

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

package/segment-group/{segment-indicator.mjs → segment-group-indicator.mjs}

@@ -4,10 +4,10 @@ import { ark } from '../factory.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
 
-const SegmentIndicator = props => {
+const SegmentGroupIndicator = props => {
   const api = useSegmentGroupContext();
   const indicatorProps = mergeProps(() => api().indicatorProps, props);
   return createComponent(ark.input, mergeProps$1(indicatorProps, () => parts.indicator.attrs));
 };
 
-export { SegmentIndicator };
+export { SegmentGroupIndicator };

package/segment-group/segment-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 SegmentGroupLabelProps = HTMLArkProps<'label'>;
 export declare const SegmentGroupLabel: (props: SegmentGroupLabelProps) => JSX.Element;

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

@@ -1,3 +1,3 @@
-import type { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl" | "radioInput">;
-export declare const parts: Record<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl" | "radioInput", AnatomyPart>;
+import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
+export declare const segmentGroupAnatomy: Anatomy<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl">;
+export declare const parts: Record<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl", AnatomyPart>;

package/segment-group/segment-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 UseSegmentGroupProps } from './use-segment-group';

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

@@ -0,0 +1,7 @@
+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 Controlled: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;

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

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

package/segment-group/segment-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 SegmentLabelProps = HTMLArkProps<'span'>;
 export declare const SegmentLabel: (props: SegmentLabelProps) => JSX.Element;

package/segment-group/segment.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 SegmentContext } from './segment-context';

package/segment-group/use-segment-group.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const radio = require('@zag-js/radio-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/segment-group/use-segment-group.d.ts

@@ -1,7 +1,7 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { Accessor } from 'solid-js';
 import * as segment from '@zag-js/radio-group';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseSegmentGroupProps = Optional<segment.Context, 'id'>;
-export type UseSegmentGroupReturn = ReturnType<typeof useSegmentGroup>;
-export declare const useSegmentGroup: (props: UseSegmentGroupProps) => Accessor<segment.PublicApi<PropTypes>>;
+export type UseSegmentGroupReturn = Accessor<segment.Api<PropTypes>>;
+export declare const useSegmentGroup: (props: UseSegmentGroupProps) => UseSegmentGroupReturn;

package/segment-group/use-segment-group.mjs

@@ -1,6 +1,7 @@
 import * as radio from '@zag-js/radio-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 useSegmentGroup = props => {

package/select/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const select = require('./select.cjs');
+const select$1 = require('./select.cjs');
 const selectContent = require('./select-content.cjs');
 const selectContext = require('./select-context.cjs');
 const selectLabel = require('./select-label.cjs');
@@ -11,11 +11,19 @@ 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$1 = require('@zag-js/select');
-
+const select = require('@zag-js/select');
 
+const Select = Object.assign(select$1.Select, {
+  Root: select$1.Select,
+  Content: selectContent.SelectContent,
+  Label: selectLabel.SelectLabel,
+  Option: selectOption.SelectOption,
+  OptionGroup: selectOptionGroup.SelectOptionGroup,
+  OptionGroupLabel: selectOptionGroupLabel.SelectOptionGroupLabel,
+  Positioner: selectPositioner.SelectPositioner,
+  Trigger: selectTrigger.SelectTrigger
+});
 
-exports.Select = select.Select;
 exports.SelectContent = selectContent.SelectContent;
 exports.useSelectContext = selectContext.useSelectContext;
 exports.SelectLabel = selectLabel.SelectLabel;
@@ -26,5 +34,6 @@ exports.SelectPositioner = selectPositioner.SelectPositioner;
 exports.SelectTrigger = selectTrigger.SelectTrigger;
 Object.defineProperty(exports, 'selectAnatomy', {
   enumerable: true,
-  get: () => select$1.anatomy
+  get: () => select.anatomy
 });
+exports.Select = Select;

package/select/index.d.ts

@@ -1,10 +1,23 @@
-export { Select, type SelectProps } from './select';
-export { SelectContent, type SelectContentProps } from './select-content';
-export { useSelectContext } from './select-context';
-export { SelectLabel, type SelectLabelProps } from './select-label';
-export { SelectOption, type SelectOptionProps } from './select-option';
-export { SelectOptionGroup, type SelectOptionGroupProps } from './select-option-group';
-export { SelectOptionGroupLabel, type SelectOptionGroupLabelProps, } from './select-option-group-label';
-export { SelectPositioner, type SelectPositionerProps } from './select-positioner';
-export { SelectTrigger, type SelectTriggerProps } from './select-trigger';
-export { selectAnatomy } from './select.anatomy';
+import { JSX } from 'solid-js';
+import { type SelectProps } from './select';
+import { SelectContent, type SelectContentProps } from './select-content';
+import { useSelectContext } from './select-context';
+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;
+    Content: (props: SelectContentProps) => 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;
+};
+export { Select, SelectContent, SelectLabel, SelectOption, SelectOptionGroup, SelectOptionGroupLabel, SelectPositioner, SelectTrigger, selectAnatomy, useSelectContext, };
+export type { SelectContentProps, SelectLabelProps, SelectOptionGroupLabelProps, SelectOptionGroupProps, SelectOptionProps, SelectPositionerProps, SelectProps, SelectTriggerProps, };

package/select/index.mjs

@@ -1,10 +1,23 @@
-export { Select } from './select.mjs';
-export { SelectContent } from './select-content.mjs';
+import { Select as Select$1 } from './select.mjs';
+import { SelectContent } from './select-content.mjs';
 export { useSelectContext } from './select-context.mjs';
-export { SelectLabel } from './select-label.mjs';
-export { SelectOption } from './select-option.mjs';
-export { SelectOptionGroup } from './select-option-group.mjs';
-export { SelectOptionGroupLabel } from './select-option-group-label.mjs';
-export { SelectPositioner } from './select-positioner.mjs';
-export { SelectTrigger } from './select-trigger.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';
+
+const Select = Object.assign(Select$1, {
+  Root: Select$1,
+  Content: SelectContent,
+  Label: SelectLabel,
+  Option: SelectOption,
+  OptionGroup: SelectOptionGroup,
+  OptionGroupLabel: SelectOptionGroupLabel,
+  Positioner: SelectPositioner,
+  Trigger: SelectTrigger
+});
+
+export { Select, SelectContent, SelectLabel, SelectOption, SelectOptionGroup, SelectOptionGroupLabel, SelectPositioner, SelectTrigger };

package/select/select-content.cjs

@@ -10,7 +10,7 @@ const selectContext = require('./select-context.cjs');
 const SelectContent = props => {
   const api = selectContext.useSelectContext();
   const contentProps = solid.mergeProps(() => api().contentProps, props);
-  return web.createComponent(factory.ark.ul, contentProps);
+  return web.createComponent(factory.ark.div, contentProps);
 };
 
 exports.SelectContent = SelectContent;

package/select/select-content.d.ts

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

package/select/select-content.mjs

@@ -6,7 +6,7 @@ import { useSelectContext } from './select-context.mjs';
 const SelectContent = props => {
   const api = useSelectContext();
   const contentProps = mergeProps(() => api().contentProps, props);
-  return createComponent(ark.ul, contentProps);
+  return createComponent(ark.div, contentProps);
 };
 
 export { SelectContent };

package/select/select-context.d.ts

@@ -1,7 +1,4 @@
-import type { PropTypes } from '@zag-js/solid';
-import type { PublicApi } from '@zag-js/select';
-import type { Accessor } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseSelectReturn } from './use-select';
 export type SelectContext = UseSelectReturn;
-export declare const SelectProvider: ContextProviderComponent<Accessor<PublicApi<PropTypes>>>, useSelectContext: () => Accessor<PublicApi<PropTypes>>;
+export declare const SelectProvider: ContextProviderComponent<UseSelectReturn>, useSelectContext: () => UseSelectReturn;

package/select/select-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 SelectLabelProps = HTMLArkProps<'label'>;
 export declare const SelectLabel: (props: SelectLabelProps) => JSX.Element;

package/select/select-option-group-label.cjs

@@ -12,7 +12,7 @@ const SelectOptionGroupLabel = props => {
   const [labelParams, restProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
   const api = selectContext.useSelectContext();
   const groupLabelProps = solid.mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
-  return web.createComponent(factory.ark.label, groupLabelProps);
+  return web.createComponent(factory.ark.div, groupLabelProps);
 };
 
 exports.SelectOptionGroupLabel = SelectOptionGroupLabel;

package/select/select-option-group-label.d.ts

@@ -1,9 +1,9 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 type GroupLabelParams = {
     htmlFor: string;
 };
-export type SelectOptionGroupLabelProps = Assign<HTMLArkProps<'label'>, GroupLabelParams>;
+export type SelectOptionGroupLabelProps = Assign<HTMLArkProps<'div'>, GroupLabelParams>;
 export declare const SelectOptionGroupLabel: (props: SelectOptionGroupLabelProps) => JSX.Element;
 export {};

package/select/select-option-group-label.mjs

@@ -8,7 +8,7 @@ const SelectOptionGroupLabel = props => {
   const [labelParams, restProps] = createSplitProps()(props, ['htmlFor']);
   const api = useSelectContext();
   const groupLabelProps = mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
-  return createComponent(ark.label, groupLabelProps);
+  return createComponent(ark.div, groupLabelProps);
 };
 
 export { SelectOptionGroupLabel };

package/select/select-option-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';
 type OptionGroupParams = {

package/select/select-option.cjs

@@ -12,7 +12,7 @@ const SelectOption = props => {
   const [optionParams, restProps] = createSplitProps.createSplitProps()(props, ['disabled', 'label', 'value', 'valueText']);
   const api = selectContext.useSelectContext();
   const optionProps = solid.mergeProps(() => api().getOptionProps(optionParams), restProps);
-  return web.createComponent(factory.ark.li, web.mergeProps(optionProps, {
+  return web.createComponent(factory.ark.div, web.mergeProps(optionProps, {
     get children() {
       return restProps.children ?? optionParams.label;
     }

package/select/select-option.d.ts

@@ -1,8 +1,6 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
+import type { OptionProps } from '@zag-js/select';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-import { useSelectContext } from './select-context';
-type OptionParams = Parameters<ReturnType<ReturnType<typeof useSelectContext>>['getOptionProps']>[0];
-export type SelectOptionProps = Assign<HTMLArkProps<'li'>, OptionParams>;
+export type SelectOptionProps = Assign<HTMLArkProps<'div'>, OptionProps>;
 export declare const SelectOption: (props: SelectOptionProps) => JSX.Element;
-export {};

package/select/select-option.mjs

@@ -8,7 +8,7 @@ const SelectOption = props => {
   const [optionParams, restProps] = createSplitProps()(props, ['disabled', 'label', 'value', 'valueText']);
   const api = useSelectContext();
   const optionProps = mergeProps(() => api().getOptionProps(optionParams), restProps);
-  return createComponent(ark.li, mergeProps$1(optionProps, {
+  return createComponent(ark.div, mergeProps$1(optionProps, {
     get children() {
       return restProps.children ?? optionParams.label;
     }