@ark-ui/react 0.10.0 → 0.11.0-beta.1

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

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

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

@@ -1,4 +1,5 @@
-import type { HTMLAttributes, CSSProperties } from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import * as ratingGroup from '@zag-js/rating-group';
 import { type Optional } from '../types';
 export type UseRatingGroupProps = Optional<ratingGroup.Context, 'id'> & {

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

@@ -2,6 +2,7 @@
 import * as ratingGroup from '@zag-js/rating-group';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+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

@@ -13,15 +13,23 @@ 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,
+  Segment: segment.Segment,
+  SegmentIndicator: segmentIndicator.SegmentIndicator,
+  SegmentInput: segmentInput.SegmentInput,
+  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.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,70 @@
-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 { Context } from '@zag-js/radio-group';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, LabelHTMLAttributes, InputHTMLAttributes } from 'react';
+/// <reference types="react" />
+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 { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
+import { segmentGroupAnatomy } from './segment-group.anatomy';
+import { SegmentIndicator, type SegmentIndicatorProps } from './segment-indicator';
+import { SegmentInput, type SegmentInputProps } from './segment-input';
+import { SegmentLabel, type SegmentLabelProps } from './segment-label';
+declare const SegmentGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultValue?: string | null | undefined;
+} & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+        defaultValue?: string | null | undefined;
+    } & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLLabelElement>>;
+    Segment: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, keyof {
+        value: string;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        invalid?: boolean | undefined;
+    }> & {
+        value: string;
+        disabled?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        invalid?: boolean | undefined;
+    } & RefAttributes<HTMLLabelElement>>;
+    SegmentIndicator: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    SegmentInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLInputElement>>;
+    SegmentLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLSpanElement>>;
+    SegmentControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+};
+export { Segment, SegmentControl, SegmentGroup, SegmentGroupLabel, SegmentIndicator, SegmentInput, SegmentLabel, segmentGroupAnatomy, useSegmentContext, useSegmentGroupContext, };
+export type { SegmentControlProps, SegmentGroupLabelProps, SegmentGroupProps, SegmentIndicatorProps, SegmentInputProps, SegmentLabelProps, SegmentProps, };

package/segment-group/index.mjs

@@ -1,10 +1,22 @@
-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 { 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 { SegmentIndicator } from './segment-indicator.mjs';
+import { SegmentInput } from './segment-input.mjs';
+import { SegmentLabel } from './segment-label.mjs';
+
+const SegmentGroup = Object.assign(SegmentGroup$1, {
+  Root: SegmentGroup$1,
+  Label: SegmentGroupLabel,
+  Segment,
+  SegmentIndicator,
+  SegmentInput,
+  SegmentLabel,
+  SegmentControl
+});
+
+export { Segment, SegmentControl, SegmentGroup, SegmentGroupLabel, SegmentIndicator, SegmentInput, SegmentLabel };

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

@@ -1,4 +1,5 @@
-import type { Provider } from 'react';
+import { Provider } from 'react';
+/// <reference types="react" />
 import { type connect } from '@zag-js/radio-group';
 export type SegmentContext = Parameters<ReturnType<typeof connect>['getRadioProps']>[0];
 export declare const SegmentProvider: Provider<{

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SegmentControlProps = ComponentPropsWithoutRef<typeof ark.div>;
 export declare const SegmentControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

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

@@ -1,5 +1,6 @@
-import type { PublicApi } from '@zag-js/radio-group';
-import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { PublicApi } from '@zag-js/radio-group';
+import { Provider, HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import { type UseSegmentGroupReturn } from './use-segment-group';
 export type SegmentGroupContext = UseSegmentGroupReturn;
 export declare const SegmentGroupProvider: Provider<PublicApi<JSX.IntrinsicElements & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SegmentGroupLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
 export declare const SegmentGroupLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {

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

@@ -1,3 +1,3 @@
-import type { Anatomy, AnatomyPart } from '@zag-js/anatomy';
+import { 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>;

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

@@ -1,5 +1,5 @@
-import type { Context } from '@zag-js/radio-group';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { Context } from '@zag-js/radio-group';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type UseSegmentGroupProps } from './use-segment-group';
@@ -8,6 +8,6 @@ export declare const SegmentGroup: ForwardRefExoticComponent<Omit<Omit<Omit<Deta
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "form" | "id" | "orientation" | "onChange" | "defaultValue" | "dir" | "disabled" | "readOnly" | "getRootNode" | "ids"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string | null | undefined;
 } & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,10 @@
+import { JSX } from 'react/jsx-runtime';
+import type { Meta } from '@storybook/react';
+import { SegmentGroup } from './index';
+type SegmentGroupType = typeof SegmentGroup;
+declare const meta: Meta<SegmentGroupType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const InitialValue: () => 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-indicator.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SegmentIndicatorProps = ComponentPropsWithoutRef<typeof ark.div>;
 export declare const SegmentIndicator: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

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

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SegmentInputProps = ComponentPropsWithoutRef<typeof ark.input>;
 export declare const SegmentInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {

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

@@ -1,8 +1,8 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SegmentLabelProps = ComponentPropsWithoutRef<typeof ark.span>;
 export declare const SegmentLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined;
+    ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref"> & RefAttributes<HTMLSpanElement>>;

package/segment-group/segment.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
 import { type SegmentContext } from './segment-context';

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

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

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

@@ -1,4 +1,5 @@
-import type { HTMLAttributes, CSSProperties } from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import * as segmentGroup from '@zag-js/radio-group';
 import { type Optional } from '../types';
 export type UseSegmentGroupProps = Optional<segmentGroup.Context, 'id'> & {

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

@@ -2,6 +2,7 @@
 import * as radio from '@zag-js/radio-group';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
+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,57 @@
-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 { OptionProps, OptionGroupProps } from '@zag-js/select';
+import { PresenceProps } from '..';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, LabelHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+/// <reference types="react" />
+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: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLLabelElement>>;
+    Option: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, keyof OptionProps> & OptionProps & RefAttributes<HTMLDivElement>>;
+    OptionGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, "id"> & OptionGroupProps & RefAttributes<HTMLDivElement>>;
+    OptionGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, "htmlFor"> & {
+        htmlFor: string;
+    } & RefAttributes<HTMLDivElement>>;
+    Positioner: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+};
+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

@@ -7,9 +7,10 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+require('../presence/index.cjs');
 const selectContext = require('./select-context.cjs');
 const selectPresence = require('./select-presence.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const SelectContent = react.forwardRef((props, ref) => {
   const [presenceProps, selectContentProps] = splitPresenceProps.splitPresenceProps(props);
@@ -20,7 +21,7 @@ const InnerSelectContent = react.forwardRef(
   (props, ref) => {
     const { contentProps } = selectContext.useSelectContext();
     const mergedProps = react$1.mergeProps(contentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 InnerSelectContent.displayName = "InnerSelectContent";

package/select/select-content.d.ts

@@ -1,10 +1,10 @@
-import type { PresenceProps } from '../presence';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { PresenceProps } from '../presence';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import { type SelectPresenceProps } from './select-presence';
-export type SelectContentProps = ComponentPropsWithoutRef<typeof ark.ul> & Omit<SelectPresenceProps, 'children'>;
-export declare const SelectContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-    ref?: ((instance: HTMLUListElement | null) => void) | RefObject<HTMLUListElement> | null | undefined;
+export type SelectContentProps = ComponentPropsWithoutRef<typeof ark.div> & Omit<SelectPresenceProps, 'children'>;
+export declare const SelectContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLUListElement>>;
+}, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;

package/select/select-content.mjs

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import '../presence/index.mjs';
 import { useSelectContext } from './select-context.mjs';
 import { SelectPresence } from './select-presence.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const SelectContent = forwardRef((props, ref) => {
   const [presenceProps, selectContentProps] = splitPresenceProps(props);
@@ -16,7 +17,7 @@ const InnerSelectContent = forwardRef(
   (props, ref) => {
     const { contentProps } = useSelectContext();
     const mergedProps = mergeProps(contentProps, props);
-    return /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 InnerSelectContent.displayName = "InnerSelectContent";

package/select/select-context.d.ts

@@ -1,5 +1,6 @@
-import type { PublicApi } from '@zag-js/select';
-import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { PublicApi } from '@zag-js/select';
+import { Provider, HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import { type UseSelectReturn } from './use-select';
 export type SelectContext = UseSelectReturn;
 export declare const SelectProvider: Provider<PublicApi<JSX.IntrinsicElements & {

package/select/select-label.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SelectLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
 export declare const SelectLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {

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

@@ -14,7 +14,7 @@ const SelectOptionGroupLabel = react.forwardRef(
     const { htmlFor, ...labelProps } = props;
     const { getOptionGroupLabelProps } = selectContext.useSelectContext();
     const mergedProps = react$1.mergeProps(getOptionGroupLabelProps({ htmlFor }), labelProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 SelectOptionGroupLabel.displayName = "SelectOptionGroupLabel";

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

@@ -1,13 +1,13 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
-export type SelectOptionGroupLabelProps = Assign<ComponentPropsWithoutRef<typeof ark.label>, {
+export type SelectOptionGroupLabelProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, {
     htmlFor: string;
 }>;
-export declare const SelectOptionGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+export declare const SelectOptionGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref">, "htmlFor"> & {
     htmlFor: string;
-} & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLDivElement>>;

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

@@ -10,7 +10,7 @@ const SelectOptionGroupLabel = forwardRef(
     const { htmlFor, ...labelProps } = props;
     const { getOptionGroupLabelProps } = useSelectContext();
     const mergedProps = mergeProps(getOptionGroupLabelProps({ htmlFor }), labelProps);
-    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 SelectOptionGroupLabel.displayName = "SelectOptionGroupLabel";

package/select/select-option-group.cjs

@@ -6,14 +6,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
 const SelectOptionGroup = react.forwardRef(
   (props, ref) => {
-    const { id, ...divProps } = props;
+    const [optionProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
     const { getOptionGroupProps } = selectContext.useSelectContext();
-    const mergedProps = react$1.mergeProps(getOptionGroupProps({ id }), divProps);
+    const mergedProps = react$1.mergeProps(getOptionGroupProps(optionProps), localProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

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

@@ -1,13 +1,10 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import type { OptionGroupProps } from '@zag-js/select';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
-export type SelectOptionGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, {
-    id: string;
-}>;
+export type SelectOptionGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, OptionGroupProps>;
 export declare const SelectOptionGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "id"> & {
-    id: string;
-} & RefAttributes<HTMLDivElement>>;
+}, "ref">, "id"> & OptionGroupProps & RefAttributes<HTMLDivElement>>;