@ark-ui/solid 1.3.0 → 2.0.1

package/types/carousel/carousel.d.ts

@@ -1,9 +1,10 @@
-import { type JSX } from 'solid-js';
-import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-import { type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
-export interface CarouselProps extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: JSX.Element | ((api: UseCarouselReturn) => JSX.Element);
-}>, UseCarouselProps> {
-}
-export declare const Carousel: (props: CarouselProps) => JSX.Element;
+import { CarouselControl as Control } from './carousel-control';
+import { CarouselIndicator as Indicator } from './carousel-indicator';
+import { CarouselIndicatorGroup as IndicatorGroup } from './carousel-indicator-group';
+import { CarouselItem as Item } from './carousel-item';
+import { CarouselItemGroup as ItemGroup } from './carousel-item-group';
+import { CarouselNextTrigger as NextTrigger } from './carousel-next-trigger';
+import { CarouselPrevTrigger as PrevTrigger } from './carousel-prev-trigger';
+import { CarouselRoot as Root } from './carousel-root';
+import { CarouselViewport as Viewport } from './carousel-viewport';
+export { Control, Indicator, IndicatorGroup, Item, ItemGroup, NextTrigger, PrevTrigger, Root, Viewport, };

package/types/carousel/index.d.ts

@@ -1,24 +1,14 @@
 import type { SlideChangeDetails as CarouselSlideChangeDetails } from '@zag-js/carousel';
-import { type CarouselProps } from './carousel';
 import { useCarouselContext, type CarouselContext } from './carousel-context';
 import { CarouselControl, type CarouselControlProps } from './carousel-control';
 import { CarouselIndicator, type CarouselIndicatorProps } from './carousel-indicator';
 import { CarouselIndicatorGroup, type CarouselIndicatorGroupProps } from './carousel-indicator-group';
+import { CarouselItem, type CarouselItemProps } from './carousel-item';
+import { CarouselItemGroup, type CarouselItemGroupProps } from './carousel-item-group';
 import { CarouselNextTrigger, type CarouselNextTriggerProps } from './carousel-next-trigger';
 import { CarouselPrevTrigger, type CarouselPrevTriggerProps } from './carousel-prev-trigger';
-import { CarouselItem, type CarouselItemProps } from './carousel-slide';
-import { CarouselItemGroup, type CarouselItemGroupProps } from './carousel-slide-group';
+import { CarouselRoot, type CarouselRootProps } from './carousel-root';
 import { CarouselViewport, type CarouselViewportProps } from './carousel-viewport';
-declare const Carousel: ((props: CarouselProps) => import("solid-js").JSX.Element) & {
-    Root: (props: CarouselProps) => import("solid-js").JSX.Element;
-    Control: (props: CarouselControlProps) => import("solid-js").JSX.Element;
-    Indicator: (props: CarouselIndicatorProps) => import("solid-js").JSX.Element;
-    IndicatorGroup: (props: CarouselIndicatorGroupProps) => import("solid-js").JSX.Element;
-    NextTrigger: (props: CarouselNextTriggerProps) => import("solid-js").JSX.Element;
-    PrevTrigger: (props: CarouselPrevTriggerProps) => import("solid-js").JSX.Element;
-    Item: (props: CarouselItemProps) => import("solid-js").JSX.Element;
-    ItemGroup: (props: CarouselItemGroupProps) => import("solid-js").JSX.Element;
-    Viewport: (props: CarouselViewportProps) => import("solid-js").JSX.Element;
-};
-export { Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, useCarouselContext, };
-export type { CarouselContext, CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselItemGroupProps, CarouselItemProps, CarouselNextTriggerProps, CarouselPrevTriggerProps, CarouselProps, CarouselSlideChangeDetails, CarouselViewportProps, };
+export * as Carousel from './carousel';
+export { CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, useCarouselContext, };
+export type { CarouselContext, CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselItemGroupProps, CarouselItemProps, CarouselNextTriggerProps, CarouselPrevTriggerProps, CarouselRootProps, CarouselSlideChangeDetails, CarouselViewportProps, };

package/types/checkbox/checkbox-control.d.ts

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

package/types/checkbox/checkbox-indicator.d.ts

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

package/types/checkbox/checkbox-label.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface CheckboxLabelProps extends HTMLArkProps<'span'> {
 }
-export declare const CheckboxLabel: (props: CheckboxLabelProps) => import("solid-js").JSX.Element;
+export declare const CheckboxLabel: ArkComponent<'span'>;

package/types/checkbox/checkbox-root.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
+interface ElementProps extends UseCheckboxProps {
+    children?: JSX.Element | ((api: UseCheckboxReturn) => JSX.Element);
+}
+export interface CheckboxRootProps extends Assign<HTMLArkProps<'label'>, ElementProps> {
+}
+export declare const CheckboxRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/checkbox/checkbox.d.ts

@@ -1,9 +1,5 @@
-import { type JSX } from 'solid-js';
-import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-import { type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
-export interface CheckboxProps extends Assign<Assign<HTMLArkProps<'label'>, {
-    children?: JSX.Element | ((api: UseCheckboxReturn) => JSX.Element);
-}>, UseCheckboxProps> {
-}
-export declare const Checkbox: (props: CheckboxProps) => JSX.Element;
+import { CheckboxControl as Control } from './checkbox-control';
+import { CheckboxIndicator as Indicator } from './checkbox-indicator';
+import { CheckboxLabel as Label } from './checkbox-label';
+import { CheckboxRoot as Root } from './checkbox-root';
+export { Control, Indicator, Label, Root };

package/types/checkbox/index.d.ts

@@ -1,14 +1,9 @@
-import type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
-import { type CheckboxProps } from './checkbox';
+import type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState as CheckboxState } from '@zag-js/checkbox';
 import { useCheckboxContext, type CheckboxContext } from './checkbox-context';
 import { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
 import { CheckboxIndicator, type CheckboxIndicatorProps } from './checkbox-indicator';
 import { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
-declare const Checkbox: ((props: CheckboxProps) => import("solid-js").JSX.Element) & {
-    Root: (props: CheckboxProps) => import("solid-js").JSX.Element;
-    Control: (props: CheckboxControlProps) => import("solid-js").JSX.Element;
-    Label: (props: CheckboxLabelProps) => import("solid-js").JSX.Element;
-    Indicator: (props: CheckboxIndicatorProps) => import("solid-js").JSX.Element;
-};
-export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, useCheckboxContext };
-export type { CheckboxCheckedChangeDetails, CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxProps, CheckedState, };
+import { CheckboxRoot, type CheckboxRootProps } from './checkbox-root';
+export * as Checkbox from './checkbox';
+export { CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, useCheckboxContext };
+export type { CheckboxCheckedChangeDetails, CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxRootProps, CheckboxState, };

package/types/color-picker/color-picker-area-background.d.ts

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

package/types/color-picker/color-picker-area-thumb.d.ts

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

package/types/color-picker/color-picker-area.d.ts

@@ -1,6 +1,6 @@
 import type { AreaProps } from '@zag-js/color-picker';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ColorPickerAreaProps extends Assign<HTMLArkProps<'div'>, AreaProps> {
 }
-export declare const ColorPickerArea: (props: ColorPickerAreaProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerArea: ArkComponent<'div', AreaProps>;

package/types/color-picker/color-picker-channel-input.d.ts

@@ -1,6 +1,6 @@
 import type { ChannelInputProps } from '@zag-js/color-picker';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export interface ColorPickerChannelInputProps extends Assign<ChannelInputProps, HTMLArkProps<'input'>> {
+export interface ColorPickerChannelInputProps extends Assign<HTMLArkProps<'input'>, ChannelInputProps> {
 }
-export declare const ColorPickerChannelInput: (props: ColorPickerChannelInputProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerChannelInput: ArkComponent<'input', ChannelInputProps>;

package/types/color-picker/color-picker-channel-slider-thumb.d.ts

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

package/types/color-picker/color-picker-channel-slider-track.d.ts

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

package/types/color-picker/color-picker-channel-slider.d.ts

@@ -1,6 +1,6 @@
 import type { ChannelProps } from '@zag-js/color-picker';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ColorPickerChannelSliderProps extends Assign<HTMLArkProps<'div'>, ChannelProps> {
 }
-export declare const ColorPickerChannelSlider: (props: ColorPickerChannelSliderProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerChannelSlider: ArkComponent<'div', ChannelProps>;

package/types/color-picker/color-picker-content.d.ts

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

package/types/color-picker/color-picker-control.d.ts

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

package/types/color-picker/color-picker-eye-dropper-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerEyeDropperTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const ColorPickerEyeDropperTrigger: (props: ColorPickerEyeDropperTriggerProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerEyeDropperTrigger: ArkComponent<'button'>;

package/types/color-picker/color-picker-format-select.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerFormatSelectProps extends HTMLArkProps<'select'> {
 }
-export declare const ColorPickerFormatSelect: (props: ColorPickerFormatSelectProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerFormatSelect: ArkComponent<'select'>;

package/types/color-picker/color-picker-format-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerFormatTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const ColorPickerFormatTrigger: (props: ColorPickerFormatTriggerProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerFormatTrigger: ArkComponent<'button'>;

package/types/color-picker/color-picker-label.d.ts

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

package/types/color-picker/color-picker-positioner.d.ts

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

package/types/color-picker/color-picker-root.d.ts

@@ -0,0 +1,12 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
+import { type Assign } from '../types';
+import { type UseColorPickerProps, type UseColorPickerReturn } from './use-color-picker';
+interface ElementProps extends UseColorPickerProps, UsePresenceProps {
+    children?: JSX.Element | ((api: UseColorPickerReturn) => JSX.Element);
+}
+export interface ColorPickerRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const ColorPickerRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/color-picker/color-picker-swatch-group.d.ts

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

package/types/color-picker/color-picker-swatch-indicator.d.ts

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

package/types/color-picker/color-picker-swatch-trigger.d.ts

@@ -1,6 +1,6 @@
 import type { SwatchTriggerProps } from '@zag-js/color-picker';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ColorPickerSwatchTriggerProps extends Assign<HTMLArkProps<'button'>, SwatchTriggerProps> {
 }
-export declare const ColorPickerSwatchTrigger: (props: ColorPickerSwatchTriggerProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerSwatchTrigger: ArkComponent<'button', SwatchTriggerProps>;

package/types/color-picker/color-picker-swatch.d.ts

@@ -1,6 +1,6 @@
 import type { SwatchProps } from '@zag-js/color-picker';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ColorPickerSwatchProps extends Assign<HTMLArkProps<'div'>, SwatchProps> {
 }
-export declare const ColorPickerSwatch: (props: ColorPickerSwatchProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerSwatch: ArkComponent<'div', SwatchProps>;

package/types/color-picker/color-picker-transparency-grid.d.ts

@@ -1,6 +1,6 @@
 import type { TransparencyGridProps } from '@zag-js/color-picker';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, TransparencyGridProps> {
 }
-export declare const ColorPickerTransparencyGrid: (props: ColorPickerTransparencyGridProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerTransparencyGrid: ArkComponent<'div', TransparencyGridProps>;

package/types/color-picker/color-picker-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const ColorPickerTrigger: (props: ColorPickerTriggerProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerTrigger: ArkComponent<'button'>;

package/types/color-picker/color-picker-value-text.d.ts

@@ -1,5 +1,8 @@
-import { type HTMLArkProps } from '../factory';
-export interface ColorPickerValueTextProps extends HTMLArkProps<'span'> {
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+interface ElementProps {
     placeholder?: string;
 }
-export declare const ColorPickerValueText: (props: ColorPickerValueTextProps) => import("solid-js").JSX.Element;
+export interface ColorPickerValueTextProps extends HTMLArkProps<'span'>, ElementProps {
+}
+export declare const ColorPickerValueText: ArkComponent<'span', ElementProps>;
+export {};

package/types/color-picker/color-picker.d.ts

@@ -1,10 +1,24 @@
-import { type JSX } from 'solid-js';
-import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
-import { type Assign } from '../types';
-import { type UseColorPickerProps, type UseColorPickerReturn } from './use-color-picker';
-export interface ColorPickerProps extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: JSX.Element | ((api: UseColorPickerReturn) => JSX.Element);
-}>, UseColorPickerProps>, UsePresenceProps {
-}
-export declare const ColorPicker: (props: ColorPickerProps) => JSX.Element;
+import { ColorPickerArea as Area } from './color-picker-area';
+import { ColorPickerAreaBackground as AreaBackground } from './color-picker-area-background';
+import { ColorPickerAreaThumb as AreaThumb } from './color-picker-area-thumb';
+import { ColorPickerChannelInput as ChannelInput } from './color-picker-channel-input';
+import { ColorPickerChannelSlider as ChannelSlider } from './color-picker-channel-slider';
+import { ColorPickerChannelSliderThumb as ChannelSliderThumb } from './color-picker-channel-slider-thumb';
+import { ColorPickerChannelSliderTrack as ChannelSliderTrack } from './color-picker-channel-slider-track';
+import { ColorPickerContent as Content } from './color-picker-content';
+import { ColorPickerControl as Control } from './color-picker-control';
+import { ColorPickerEyeDropperTrigger as EyeDropperTrigger } from './color-picker-eye-dropper-trigger';
+import { ColorPickerFormatSelect as FormatSelect } from './color-picker-format-select';
+import { ColorPickerFormatTrigger as FormatTrigger } from './color-picker-format-trigger';
+import { ColorPickerLabel as Label } from './color-picker-label';
+import { ColorPickerPositioner as Positioner } from './color-picker-positioner';
+import { ColorPickerRoot as Root } from './color-picker-root';
+import { ColorPickerSwatch as Swatch } from './color-picker-swatch';
+import { ColorPickerSwatchGroup as SwatchGroup } from './color-picker-swatch-group';
+import { ColorPickerSwatchIndicator as SwatchIndicator } from './color-picker-swatch-indicator';
+import { ColorPickerSwatchTrigger as SwatchTrigger } from './color-picker-swatch-trigger';
+import { ColorPickerTransparencyGrid as TransparencyGrid } from './color-picker-transparency-grid';
+import { ColorPickerTrigger as Trigger } from './color-picker-trigger';
+import { ColorPickerValueText as ValueText } from './color-picker-value-text';
+import { ColorPickerView as View } from './color-picker-view';
+export { Area, AreaBackground, AreaThumb, ChannelInput, ChannelSlider, ChannelSliderThumb, ChannelSliderTrack, Content, Control, EyeDropperTrigger, FormatSelect, FormatTrigger, Label, Positioner, Root, Swatch, SwatchGroup, SwatchIndicator, SwatchTrigger, TransparencyGrid, Trigger, ValueText, View, };

package/types/color-picker/index.d.ts

@@ -1,5 +1,4 @@
 import type { ColorFormat, FormatChangeDetails as ColorPickerFormatChangeDetails, OpenChangeDetails as ColorPickerOpenChangeDetails, ValueChangeDetails as ColorPickerValueChangeDetails } from '@zag-js/color-picker';
-import { type ColorPickerProps } from './color-picker';
 import { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
 import { ColorPickerAreaBackground, type ColorPickerAreaBackgroundProps } from './color-picker-area-background';
 import { useColorPickerAreaContext, type ColorPickerAreaContext } from './color-picker-area-context';
@@ -17,6 +16,7 @@ import { ColorPickerFormatSelect, type ColorPickerFormatSelectProps } from './co
 import { ColorPickerFormatTrigger, type ColorPickerFormatTriggerProps } from './color-picker-format-trigger';
 import { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
 import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
+import { ColorPickerRoot, type ColorPickerRootProps } from './color-picker-root';
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
 import { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorProps } from './color-picker-swatch-indicator';
@@ -25,30 +25,6 @@ import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps } fr
 import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
 import { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
 import { ColorPickerView, type ColorPickerViewProps } from './color-picker-view';
-declare const ColorPicker: ((props: ColorPickerProps) => import("solid-js").JSX.Element) & {
-    Root: (props: ColorPickerProps) => import("solid-js").JSX.Element;
-    Area: (props: ColorPickerAreaProps) => import("solid-js").JSX.Element;
-    AreaBackground: (props: ColorPickerAreaBackgroundProps) => import("solid-js").JSX.Element;
-    AreaThumb: (props: ColorPickerAreaThumbProps) => import("solid-js").JSX.Element;
-    ChannelInput: (props: ColorPickerChannelInputProps) => import("solid-js").JSX.Element;
-    ChannelSlider: (props: ColorPickerChannelSliderProps) => import("solid-js").JSX.Element;
-    ChannelSliderThumb: (props: ColorPickerChannelSliderThumbProps) => import("solid-js").JSX.Element;
-    ChannelSliderTrack: (props: ColorPickerChannelSliderTrackProps) => import("solid-js").JSX.Element;
-    Content: (props: ColorPickerContentProps) => import("solid-js").JSX.Element;
-    Control: (props: ColorPickerControlProps) => import("solid-js").JSX.Element;
-    EyeDropperTrigger: (props: ColorPickerEyeDropperTriggerProps) => import("solid-js").JSX.Element;
-    FormatTrigger: (props: ColorPickerFormatTriggerProps) => import("solid-js").JSX.Element;
-    FormatSelect: (props: ColorPickerFormatSelectProps) => import("solid-js").JSX.Element;
-    Label: (props: ColorPickerLabelProps) => import("solid-js").JSX.Element;
-    Positioner: (props: ColorPickerPositionerProps) => import("solid-js").JSX.Element;
-    Swatch: (props: ColorPickerSwatchProps) => import("solid-js").JSX.Element;
-    SwatchGroup: (props: ColorPickerSwatchGroupProps) => import("solid-js").JSX.Element;
-    SwatchIndicator: (props: ColorPickerSwatchIndicatorProps) => import("solid-js").JSX.Element;
-    SwatchTrigger: (props: ColorPickerSwatchTriggerProps) => import("solid-js").JSX.Element;
-    TransparencyGrid: (props: ColorPickerTransparencyGridProps) => import("solid-js").JSX.Element;
-    Trigger: (props: ColorPickerTriggerProps) => import("solid-js").JSX.Element;
-    ValueText: (props: ColorPickerValueTextProps) => import("solid-js").JSX.Element;
-    View: (props: ColorPickerViewProps) => import("solid-js").JSX.Element;
-};
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
-export type { ColorFormat, ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerFormatChangeDetails, ColorPickerFormatSelectProps, ColorPickerFormatTriggerProps, ColorPickerLabelProps, ColorPickerOpenChangeDetails, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchIndicatorProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueChangeDetails, ColorPickerValueTextProps, ColorPickerViewProps, };
+export * as ColorPicker from './color-picker';
+export { ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorFormat, ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerFormatChangeDetails, ColorPickerFormatSelectProps, ColorPickerFormatTriggerProps, ColorPickerLabelProps, ColorPickerOpenChangeDetails, ColorPickerPositionerProps, ColorPickerRootProps, ColorPickerSwatchGroupProps, ColorPickerSwatchIndicatorProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueChangeDetails, ColorPickerValueTextProps, ColorPickerViewProps, };

package/types/combobox/combobox-clear-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ComboboxClearTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const ComboboxClearTrigger: (props: ComboboxClearTriggerProps) => import("solid-js").JSX.Element;
+export declare const ComboboxClearTrigger: ArkComponent<'button'>;

package/types/combobox/combobox-content.d.ts

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

package/types/combobox/combobox-control.d.ts

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

package/types/combobox/combobox-input.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ComboboxInputProps extends HTMLArkProps<'input'> {
 }
-export declare const ComboboxInput: (props: ComboboxInputProps) => import("solid-js").JSX.Element;
+export declare const ComboboxInput: ArkComponent<'input'>;

package/types/combobox/combobox-item-group-label.d.ts

@@ -1,9 +1,9 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 interface ItemGroupLabelProps {
     for: string;
 }
 export interface ComboboxItemGroupLabelProps extends Assign<HTMLArkProps<'div'>, ItemGroupLabelProps> {
 }
-export declare const ComboboxItemGroupLabel: (props: ComboboxItemGroupLabelProps) => import("solid-js").JSX.Element;
+export declare const ComboboxItemGroupLabel: ArkComponent<'div', ItemGroupLabelProps>;
 export {};

package/types/combobox/combobox-item-group.d.ts

@@ -1,6 +1,6 @@
 import type { ItemGroupProps } from '@zag-js/combobox';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ComboboxItemGroupProps extends Assign<HTMLArkProps<'div'>, ItemGroupProps> {
 }
-export declare const ComboboxItemGroup: (props: ComboboxItemGroupProps) => import("solid-js").JSX.Element;
+export declare const ComboboxItemGroup: ArkComponent<'div', ItemGroupProps>;

package/types/combobox/combobox-item-indicator.d.ts

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

package/types/combobox/combobox-item-text.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ComboboxItemTextProps extends HTMLArkProps<'span'> {
 }
-export declare const ComboboxItemText: (props: ComboboxItemTextProps) => import("solid-js").JSX.Element;
+export declare const ComboboxItemText: ArkComponent<'span'>;

package/types/combobox/combobox-item.d.ts

@@ -1,9 +1,11 @@
 import type { ItemProps, ItemState } from '@zag-js/combobox';
 import { type Accessor, type JSX } from 'solid-js';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export interface ComboboxItemProps extends Assign<HTMLArkProps<'div'>, {
+interface ElementProps extends ItemProps {
     children?: JSX.Element | ((state: Accessor<ItemState>) => JSX.Element);
-}>, ItemProps {
 }
-export declare const ComboboxItem: (props: ComboboxItemProps) => JSX.Element;
+export interface ComboboxItemProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const ComboboxItem: ArkComponent<'div', ElementProps>;
+export {};

package/types/combobox/combobox-label.d.ts

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

package/types/combobox/combobox-positioner.d.ts

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

package/types/combobox/combobox-root.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
+import type { Assign, CollectionItem } from '../types';
+import { type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
+export interface ComboboxRootProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: JSX.Element | ((api: UseComboboxReturn<T>) => JSX.Element);
+}>, UseComboboxProps<T>>, UsePresenceProps {
+}
+export declare const ComboboxRoot: <T extends CollectionItem>(props: ComboboxRootProps<T>) => JSX.Element;

package/types/combobox/combobox-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ComboboxTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const ComboboxTrigger: (props: ComboboxTriggerProps) => import("solid-js").JSX.Element;
+export declare const ComboboxTrigger: ArkComponent<'button'>;

package/types/combobox/combobox.d.ts

@@ -1,10 +1,14 @@
-import { type JSX } from 'solid-js';
-import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
-import type { Assign, CollectionItem } from '../types';
-import { type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
-export interface ComboboxProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: JSX.Element | ((api: UseComboboxReturn<T>) => JSX.Element);
-}>, UseComboboxProps<T>>, UsePresenceProps {
-}
-export declare const Combobox: <T extends CollectionItem>(props: ComboboxProps<T>) => JSX.Element;
+import { ComboboxClearTrigger as ClearTrigger } from './combobox-clear-trigger';
+import { ComboboxContent as Content } from './combobox-content';
+import { ComboboxControl as Control } from './combobox-control';
+import { ComboboxInput as Input } from './combobox-input';
+import { ComboboxItem as Item } from './combobox-item';
+import { ComboboxItemGroup as ItemGroup } from './combobox-item-group';
+import { ComboboxItemGroupLabel as ItemGroupLabel } from './combobox-item-group-label';
+import { ComboboxItemIndicator as ItemIndicator } from './combobox-item-indicator';
+import { ComboboxItemText as ItemText } from './combobox-item-text';
+import { ComboboxLabel as Label } from './combobox-label';
+import { ComboboxPositioner as Positioner } from './combobox-positioner';
+import { ComboboxRoot as Root } from './combobox-root';
+import { ComboboxTrigger as Trigger } from './combobox-trigger';
+export { ClearTrigger, Content, Control, Input, Item, ItemGroup, ItemGroupLabel, ItemIndicator, ItemText, Label, Positioner, Root, Trigger, };