@ark-ui/solid 1.3.0 → 2.0.0

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

@@ -1,9 +1,11 @@
 import type { ItemProps, ItemState } from '@zag-js/select';
 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 SelectItemProps extends Assign<HTMLArkProps<'div'>, {
+interface ElementProps extends ItemProps {
     children?: JSX.Element | ((state: Accessor<ItemState>) => JSX.Element);
-}>, ItemProps {
 }
-export declare const SelectItem: (props: SelectItemProps) => JSX.Element;
+export interface SelectItemProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const SelectItem: ArkComponent<'div', SelectItemProps>;
+export {};

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

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

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

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

package/types/select/{select.d.ts → select-root.d.ts}

@@ -3,8 +3,8 @@ import { type HTMLArkProps } from '../factory';
 import { type UsePresenceProps } from '../presence';
 import type { Assign, CollectionItem } from '../types';
 import { type UseSelectProps, type UseSelectReturn } from './use-select';
-export interface SelectProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
+export interface SelectRootProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: JSX.Element | ((api: UseSelectReturn<T>) => JSX.Element);
 }>, UseSelectProps<T>>, UsePresenceProps {
 }
-export declare const Select: <T extends CollectionItem>(props: SelectProps<T>) => JSX.Element;
+export declare const SelectRoot: <T extends CollectionItem>(props: SelectRootProps<T>) => JSX.Element;

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

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

package/types/select/select-value-text.d.ts

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

package/types/slider/index.d.ts

@@ -1,24 +1,24 @@
 import type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails } from '@zag-js/slider';
-import { type SliderProps } from './slider';
 import { useSliderContext, type SliderContext } from './slider-context';
 import { SliderControl, type SliderControlProps } from './slider-control';
 import { SliderLabel, type SliderLabelProps } from './slider-label';
 import { SliderMarker, type SliderMarkerProps } from './slider-marker';
 import { SliderMarkerGroup, type SliderMarkerGroupProps } from './slider-marker-group';
 import { SliderRange, type SliderRangeProps } from './slider-range';
+import { SliderRoot, type SliderRootProps } from './slider-root';
 import { SliderThumb, type SliderThumbProps } from './slider-thumb';
 import { SliderTrack, type SliderTrackProps } from './slider-track';
 import { SliderValueText, type SliderValueTextProps } from './slider-value-text';
-declare const Slider: ((props: SliderProps) => import("solid-js").JSX.Element) & {
-    Root: (props: SliderProps) => import("solid-js").JSX.Element;
-    Control: (props: SliderControlProps) => import("solid-js").JSX.Element;
-    Label: (props: SliderLabelProps) => import("solid-js").JSX.Element;
-    Marker: (props: SliderMarkerProps) => import("solid-js").JSX.Element;
-    MarkerGroup: (props: SliderMarkerGroupProps) => import("solid-js").JSX.Element;
-    Range: (props: SliderRangeProps) => import("solid-js").JSX.Element;
-    Thumb: (props: SliderThumbProps) => import("solid-js").JSX.Element;
-    Track: (props: SliderTrackProps) => import("solid-js").JSX.Element;
-    ValueText: (props: SliderValueTextProps) => import("solid-js").JSX.Element;
+export declare const Slider: {
+    Root: import("..").ArkComponent<"div", SliderRootProps>;
+    Control: import("..").ArkComponent<"div", object>;
+    Label: import("..").ArkComponent<"label", object>;
+    Marker: import("..").ArkComponent<"span", import("@zag-js/slider").MarkerProps>;
+    MarkerGroup: import("..").ArkComponent<"div", object>;
+    Range: import("..").ArkComponent<"div", object>;
+    Thumb: import("..").ArkComponent<"div", import("@zag-js/slider").ThumbProps>;
+    Track: import("..").ArkComponent<"div", object>;
+    ValueText: import("..").ArkComponent<"div", object>;
 };
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };
-export type { SliderContext, SliderControlProps, SliderFocusChangeDetails, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, SliderValueChangeDetails, SliderValueTextProps, };
+export { SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };
+export type { SliderContext, SliderControlProps, SliderFocusChangeDetails, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderRangeProps, SliderRootProps, SliderThumbProps, SliderTrackProps, SliderValueChangeDetails, SliderValueTextProps, };

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

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

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

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

package/types/slider/slider-marker-group.d.ts

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

package/types/slider/slider-marker.d.ts

@@ -1,6 +1,6 @@
 import type { MarkerProps } from '@zag-js/slider';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface SliderMarkerProps extends Assign<HTMLArkProps<'span'>, MarkerProps> {
 }
-export declare const SliderMarker: (props: SliderMarkerProps) => import("solid-js").JSX.Element;
+export declare const SliderMarker: ArkComponent<'span', MarkerProps>;

package/types/slider/slider-range.d.ts

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

package/types/slider/slider-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 UseSliderProps, type UseSliderReturn } from './use-slider';
+interface ElementProps extends UseSliderProps {
+    children?: JSX.Element | ((api: UseSliderReturn) => JSX.Element);
+}
+export interface SliderRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const SliderRoot: ArkComponent<'div', SliderRootProps>;
+export {};

package/types/slider/slider-thumb.d.ts

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

package/types/slider/slider-track.d.ts

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

package/types/slider/slider-value-text.d.ts

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

package/types/splitter/index.d.ts

@@ -1,12 +1,12 @@
 import type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
-import { type SplitterProps } from './splitter';
 import { useSplitterContext, type SplitterContext } from './splitter-context';
 import { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
 import { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
-declare const Splitter: ((props: SplitterProps) => import("solid-js").JSX.Element) & {
-    Root: (props: SplitterProps) => import("solid-js").JSX.Element;
-    Panel: (props: SplitterPanelProps) => import("solid-js").JSX.Element;
-    ResizeTrigger: (props: SplitterResizeTriggerProps) => import("solid-js").JSX.Element;
+import { SplitterRoot, type SplitterRootProps } from './splitter-root';
+export declare const Splitter: {
+    Root: import("..").ArkComponent<"div", SplitterRootProps>;
+    Panel: import("..").ArkComponent<"div", import("@zag-js/splitter").PanelProps>;
+    ResizeTrigger: import("..").ArkComponent<"button", import("@zag-js/splitter").ResizeTriggerProps>;
 };
-export { Splitter, SplitterPanel, SplitterResizeTrigger, useSplitterContext };
-export type { SplitterContext, SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps, SplitterSizeChangeDetails, };
+export { SplitterPanel, SplitterResizeTrigger, SplitterRoot, useSplitterContext };
+export type { SplitterContext, SplitterPanelProps, SplitterResizeTriggerProps, SplitterRootProps, SplitterSizeChangeDetails, };

package/types/splitter/splitter-panel.d.ts

@@ -1,8 +1,8 @@
 import { type connect } from '@zag-js/splitter';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 type PanelParams = Parameters<ReturnType<typeof connect>['getPanelProps']>[0];
 export interface SplitterPanelProps extends Assign<HTMLArkProps<'div'>, PanelParams> {
 }
-export declare const SplitterPanel: (props: SplitterPanelProps) => import("solid-js").JSX.Element;
+export declare const SplitterPanel: ArkComponent<'div', PanelParams>;
 export {};

package/types/splitter/splitter-resize-trigger.d.ts

@@ -1,8 +1,8 @@
 import { connect } from '@zag-js/splitter';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 type TriggerParams = Parameters<ReturnType<typeof connect>['getResizeTriggerProps']>[0];
 export interface SplitterResizeTriggerProps extends Assign<HTMLArkProps<'button'>, TriggerParams> {
 }
-export declare const SplitterResizeTrigger: (props: SplitterResizeTriggerProps) => import("solid-js").JSX.Element;
+export declare const SplitterResizeTrigger: ArkComponent<'button', TriggerParams>;
 export {};

package/types/splitter/splitter-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 UseSplitterProps, type UseSplitterReturn } from './use-splitter';
+interface ElementProps extends UseSplitterProps {
+    children?: JSX.Element | ((api: UseSplitterReturn) => JSX.Element);
+}
+export interface SplitterRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const SplitterRoot: ArkComponent<'div', SplitterRootProps>;
+export {};

package/types/switch/index.d.ts

@@ -1,14 +1,14 @@
 import type { CheckedChangeDetails as SwitchCheckedChangeDetails } from '@zag-js/switch';
-import { type SwitchProps } from './switch';
 import { useSwitchContext, type SwitchContext } from './switch-context';
 import { SwitchControl, type SwitchControlProps } from './switch-control';
 import { SwitchLabel, type SwitchLabelProps } from './switch-label';
+import { SwitchRoot, type SwitchRootProps } from './switch-root';
 import { SwitchThumb, type SwitchThumbProps } from './switch-thumb';
-declare const Switch: ((props: SwitchProps) => import("solid-js").JSX.Element) & {
-    Root: (props: SwitchProps) => import("solid-js").JSX.Element;
-    Control: (props: SwitchControlProps) => import("solid-js").JSX.Element;
-    Label: (props: SwitchLabelProps) => import("solid-js").JSX.Element;
-    Thumb: (props: SwitchThumbProps) => import("solid-js").JSX.Element;
+export declare const Switch: {
+    Root: import("..").ArkComponent<"label", SwitchRootProps>;
+    Control: import("..").ArkComponent<"span", object>;
+    Label: import("..").ArkComponent<"span", object>;
+    Thumb: import("..").ArkComponent<"span", object>;
 };
-export { Switch, SwitchControl, SwitchLabel, SwitchThumb, useSwitchContext };
-export type { SwitchCheckedChangeDetails, SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchProps, SwitchThumbProps, };
+export { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, useSwitchContext };
+export type { SwitchCheckedChangeDetails, SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchRootProps, SwitchThumbProps, };

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

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

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

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

package/types/switch/switch-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 UseSwitchProps, type UseSwitchReturn } from './use-switch';
+interface ElementProps extends UseSwitchProps {
+    children?: JSX.Element | ((api: UseSwitchReturn) => JSX.Element);
+}
+export interface SwitchRootProps extends Assign<HTMLArkProps<'label'>, ElementProps> {
+}
+export declare const SwitchRoot: ArkComponent<'label', SwitchRootProps>;
+export {};

package/types/switch/switch-thumb.d.ts

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

package/types/tabs/index.d.ts

@@ -3,14 +3,14 @@ import { TabContent, type TabContentProps } from './tab-content';
 import { TabIndicator, type TabIndicatorProps } from './tab-indicator';
 import { TabList, type TabListProps } from './tab-list';
 import { TabTrigger, type TabTriggerProps } from './tab-trigger';
-import { type TabsProps } from './tabs';
 import { useTabsContext, type TabsContext } from './tabs-context';
-declare const Tabs: ((props: TabsProps) => import("solid-js").JSX.Element) & {
-    Root: (props: TabsProps) => import("solid-js").JSX.Element;
-    Content: (props: TabContentProps) => import("solid-js").JSX.Element;
-    Indicator: (props: TabIndicatorProps) => import("solid-js").JSX.Element;
-    List: (props: TabListProps) => import("solid-js").JSX.Element;
-    Trigger: (props: TabTriggerProps) => import("solid-js").JSX.Element;
+import { TabsRoot, type TabsRootProps } from './tabs-root';
+export declare const Tabs: {
+    Root: import("..").ArkComponent<"div", TabsRootProps>;
+    Content: import("..").ArkComponent<"div", import("@zag-js/tabs").ContentProps>;
+    Indicator: import("..").ArkComponent<"div", object>;
+    List: import("..").ArkComponent<"div", object>;
+    Trigger: import("..").ArkComponent<"button", import("@zag-js/tabs").TriggerProps>;
 };
-export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, useTabsContext };
-export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsFocusChangeDetails, TabsProps, TabsValueChangeDetails, };
+export { TabContent, TabIndicator, TabList, TabTrigger, TabsRoot, useTabsContext };
+export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsFocusChangeDetails, TabsRootProps, TabsValueChangeDetails, };

package/types/tabs/tab-content.d.ts

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

package/types/tabs/tab-indicator.d.ts

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

package/types/tabs/tab-list.d.ts

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

package/types/tabs/tab-trigger.d.ts

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

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

@@ -0,0 +1,10 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
+import type { Assign } from '../types';
+import { type UseTabsProps } from './use-tabs';
+interface ElementProps extends UseTabsProps, UsePresenceProps {
+}
+export interface TabsRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const TabsRoot: ArkComponent<'div', TabsRootProps>;
+export {};

package/types/tags-input/tags-input-clear-trigger.d.ts

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

package/types/tags-input/tags-input-control.d.ts

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

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

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

package/types/tags-input/tags-input-item-delete-trigger.d.ts

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

package/types/tags-input/tags-input-item-input.d.ts

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

package/types/tags-input/tags-input-item-preview.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface TagsInputItemPreviewProps extends HTMLArkProps<'div'> {
+}
+export declare const TagsInputItemPreview: ArkComponent<'div'>;

package/types/tags-input/tags-input-item-text.d.ts

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

package/types/tags-input/tags-input-item.d.ts

@@ -1,9 +1,11 @@
 import type { ItemProps, ItemState } from '@zag-js/tags-input';
 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 TagsInputItemProps extends Assign<HTMLArkProps<'div'>, {
+interface ElementProps extends ItemProps {
     children?: JSX.Element | ((state: Accessor<ItemState>) => JSX.Element);
-}>, ItemProps {
 }
-export declare const TagsInputItem: (props: TagsInputItemProps) => JSX.Element;
+export interface TagsInputItemProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const TagsInputItem: ArkComponent<'div', TagsInputItemProps>;
+export {};

package/types/tags-input/tags-input-label.d.ts

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

package/types/tags-input/tags-input-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 UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input';
+interface ElementProps extends UseTagsInputProps {
+    children?: JSX.Element | ((api: UseTagsInputReturn) => JSX.Element);
+}
+export interface TagsInputRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const TagsInputRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/toast/index.d.ts

@@ -1,15 +1,15 @@
 import { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
-import { type ToastProps } from './toast';
 import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger';
 import { ToastDescription, type ToastDescriptionProps } from './toast-description';
 import { ToastGroup, type ToastGroupProps } from './toast-group';
+import { ToastRoot, type ToastRootProps } from './toast-root';
 import { ToastTitle, type ToastTitleProps } from './toast-title';
-declare const Toast: ((props: ToastProps) => import("solid-js").JSX.Element) & {
-    Root: (props: ToastProps) => import("solid-js").JSX.Element;
-    CloseTrigger: (props: ToastCloseTriggerProps) => import("solid-js").JSX.Element;
-    Description: (props: ToastDescriptionProps) => import("solid-js").JSX.Element;
-    Group: (props: ToastGroupProps) => import("solid-js").JSX.Element;
-    Title: (props: ToastTitleProps) => import("solid-js").JSX.Element;
+export declare const Toast: {
+    Root: import("..").ArkComponent<"li", object>;
+    CloseTrigger: import("..").ArkComponent<"button", object>;
+    Description: import("..").ArkComponent<"div", object>;
+    Group: import("..").ArkComponent<"ol", object>;
+    Title: import("..").ArkComponent<"div", object>;
 };
-export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };
-export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastProps, ToastTitleProps, };
+export { createToaster, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle };
+export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastRootProps, ToastTitleProps, };

package/types/toast/toast-close-trigger.d.ts

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

package/types/toast/toast-description.d.ts

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

package/types/toast/toast-group.d.ts

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

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

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ToastRootProps extends HTMLArkProps<'li'> {
+}
+export declare const ToastRoot: ArkComponent<'li'>;

package/types/toast/toast-title.d.ts

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

package/types/toggle-group/index.d.ts

@@ -1,10 +1,10 @@
 import type { ValueChangeDetails as ToggleGroupValueChangeDetails } from '@zag-js/toggle-group';
-import { type ToggleGroupProps } from './toggle-group';
 import { useToggleGroupContext, type ToggleGroupContext } from './toggle-group-context';
 import { ToggleGroupItem, type ToggleGroupItemProps } from './toggle-group-item';
-declare const ToggleGroup: ((props: ToggleGroupProps) => import("solid-js").JSX.Element) & {
-    Root: (props: ToggleGroupProps) => import("solid-js").JSX.Element;
-    Item: (props: ToggleGroupItemProps) => import("solid-js").JSX.Element;
+import { ToggleGroupRoot, type ToggleGroupRootProps } from './toggle-group-root';
+export declare const ToggleGroup: {
+    Root: import("..").ArkComponent<"div", import("./use-toggle-group").UseToggleGroupProps>;
+    Item: import("..").ArkComponent<"button", import("@zag-js/toggle-group").ItemProps>;
 };
-export { ToggleGroup, ToggleGroupItem, useToggleGroupContext };
-export type { ToggleGroupContext, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValueChangeDetails, };
+export { ToggleGroupItem, ToggleGroupRoot, useToggleGroupContext };
+export type { ToggleGroupContext, ToggleGroupItemProps, ToggleGroupRootProps, ToggleGroupValueChangeDetails, };

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

@@ -1,6 +1,6 @@
 import type { ItemProps } from '@zag-js/toggle-group';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ToggleGroupItemProps extends Assign<HTMLArkProps<'button'>, ItemProps> {
 }
-export declare const ToggleGroupItem: (props: ToggleGroupItemProps) => import("solid-js").JSX.Element;
+export declare const ToggleGroupItem: ArkComponent<'button', ItemProps>;

package/types/toggle-group/toggle-group-root.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseToggleGroupProps } from './use-toggle-group';
+export interface ToggleGroupRootProps extends Assign<HTMLArkProps<'div'>, UseToggleGroupProps> {
+}
+export declare const ToggleGroupRoot: ArkComponent<'div', UseToggleGroupProps>;