@ark-ui/solid 1.1.0 → 1.3.0

package/source/progress/use-progress.js

@@ -0,0 +1,10 @@
+import * as progress from '@zag-js/progress';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useProgress = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(progress.machine(context), { context });
+    return createMemo(() => progress.connect(state, send, normalizeProps));
+};

package/source/radio-group/radio-group-item-context.js

@@ -1,5 +1,5 @@
 import { createContext } from '../create-context';
-export const [RadioProvider, useRadioGroupItemContext] = createContext({
+export const [RadioGroupItemProvider, useRadioGroupItemContext] = createContext({
     hookName: 'useRadioGroupItemContext',
-    providerName: '<RadioProvider />',
+    providerName: '<RadioGroupItemProvider />',
 });

package/source/radio-group/radio-group-item.jsx

@@ -1,17 +1,20 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
 import { useRadioGroupContext } from './radio-group-context';
-import { RadioProvider } from './radio-group-item-context';
+import { RadioGroupItemProvider } from './radio-group-item-context';
 export const RadioGroupItem = (props) => {
-    const [itemProps, restProps] = createSplitProps()(props, [
+    const [itemProps, localProps] = createSplitProps()(props, [
         'value',
         'disabled',
         'invalid',
     ]);
     const api = useRadioGroupContext();
-    const mergedProps = mergeProps(() => api().getItemProps(itemProps), restProps);
-    return (<RadioProvider value={itemProps}>
-      <ark.label {...mergedProps}/>
-    </RadioProvider>);
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    const itemState = api().getItemState(itemProps);
+    const getChildren = () => runIfFn(localProps.children, itemState);
+    return (<RadioGroupItemProvider value={itemProps}>
+      <ark.label {...mergedProps}>{getChildren()}</ark.label>
+    </RadioGroupItemProvider>);
 };

package/source/rating-group/rating-group-control.jsx

@@ -4,8 +4,8 @@ import { runIfFn } from '../run-if-fn';
 import { useRatingGroupContext } from './rating-group-context';
 export const RatingGroupControl = (props) => {
     const api = useRatingGroupContext();
-    const getChildren = () => runIfFn(props.children, api);
     const mergedProps = mergeProps(() => api().controlProps, props);
+    const getChildren = () => runIfFn(props.children, api);
     return (<>
       <ark.div {...mergedProps}>{getChildren()}</ark.div>
       <input {...api().hiddenInputProps}/>

package/source/rating-group/rating-group-item.jsx

@@ -8,10 +8,10 @@ import { RatingGroupItemProvider } from './rating-group-item-context';
 export const RatingGroupItem = (props) => {
     const [itemProps, localProps] = createSplitProps()(props, ['index']);
     const api = useRatingGroupContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
     const itemState = createMemo(() => api().getItemState(itemProps));
     const getChildren = () => runIfFn(localProps.children, itemState);
-    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
-    return (<RatingGroupItemProvider value={itemState}>
+    return (<RatingGroupItemProvider value={itemProps}>
       <ark.span {...mergedProps}>{getChildren()}</ark.span>
     </RatingGroupItemProvider>);
 };

package/source/rating-group/rating-group.jsx

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { RatingGroupProvider } from './rating-group-context';
 import { useRatingGroup } from './use-rating-group';
 export const RatingGroup = (props) => {
-    const [ratingParams, localProps] = createSplitProps()(props, [
+    const [useRatingProps, localProps] = createSplitProps()(props, [
         'allowHalf',
         'autoFocus',
         'count',
@@ -21,7 +21,7 @@ export const RatingGroup = (props) => {
         'translations',
         'value',
     ]);
-    const api = useRatingGroup(ratingParams);
+    const api = useRatingGroup(useRatingProps);
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<RatingGroupProvider value={api}>
       <ark.div {...mergedProps}/>

package/source/segment-group/segment-group-item-context.js

@@ -1,5 +1,5 @@
 import { createContext } from '../create-context';
-export const [SegmentProvider, useSegmentGroupItemContext] = createContext({
+export const [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext({
     hookName: 'useSegmentGroupItemContext',
-    providerName: '<SegmentProvider />',
+    providerName: '<SegmentGroupItemProvider />',
 });

package/source/segment-group/segment-group-item.jsx

@@ -2,17 +2,20 @@ import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
 import { useSegmentGroupContext } from './segment-group-context';
-import { SegmentProvider } from './segment-group-item-context';
+import { SegmentGroupItemProvider, } from './segment-group-item-context';
 export const SegmentGroupItem = (props) => {
-    const [itemProps, restProps] = createSplitProps()(props, [
+    const [itemProps, localProps] = createSplitProps()(props, [
         'value',
         'disabled',
         'invalid',
     ]);
     const api = useSegmentGroupContext();
-    const mergedProps = mergeProps(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, restProps);
-    return (<SegmentProvider value={itemProps}>
-      <ark.label {...mergedProps}/>
-    </SegmentProvider>);
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, localProps);
+    const itemState = api().getItemState(itemProps);
+    const getChildren = () => runIfFn(localProps.children, itemState);
+    return (<SegmentGroupItemProvider value={itemProps}>
+      <ark.label {...mergedProps}>{getChildren()}</ark.label>
+    </SegmentGroupItemProvider>);
 };

package/source/select/select-indicator.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useSelectContext } from './select-context';
 export const SelectIndicator = (props) => {
     const api = useSelectContext();
-    const mergedProps = mergeProps(() => api().controlProps, props);
+    const mergedProps = mergeProps(() => api().indicatorProps, props);
     return <ark.div {...mergedProps}/>;
 };

package/source/select/select-item-group.jsx

@@ -3,8 +3,8 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useSelectContext } from './select-context';
 export const SelectItemGroup = (props) => {
-    const [groupProps, localProps] = createSplitProps()(props, ['id']);
+    const [itemGroupProps, localProps] = createSplitProps()(props, ['id']);
     const api = useSelectContext();
-    const mergedProps = mergeProps(() => api().getItemGroupProps(groupProps), localProps);
+    const mergedProps = mergeProps(() => api().getItemGroupProps(itemGroupProps), localProps);
     return <ark.div {...mergedProps}/>;
 };

package/source/select/select.jsx

@@ -37,11 +37,11 @@ export const Select = (props) => {
         'value',
     ]);
     const api = useSelect(useSelectProps);
-    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const presenceApi = usePresence(mergeProps(() => ({ present: api().isOpen }), presenceProps));
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     const getChildren = () => runIfFn(localProps.children, api);
     return (<SelectProvider value={api}>
-      <PresenceProvider value={apiPresence}>
+      <PresenceProvider value={presenceApi}>
         <ark.div {...mergedProps}>{getChildren()}</ark.div>
       </PresenceProvider>
     </SelectProvider>);

package/source/select/use-select.js

@@ -10,10 +10,10 @@ export const useSelect = (props) => {
         'itemToString',
         'items',
     ]);
-    const collection = select.collection(collectionOptions);
+    const collection = () => select.collection(collectionOptions);
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode, collection }, rest);
-    const [state, send] = useMachine(select.machine(context), {
+    const context = () => mergeProps({ id: createUniqueId(), getRootNode, collection: collection() }, rest);
+    const [state, send] = useMachine(select.machine(context()), {
         context,
     });
     return createMemo(() => select.connect(state, send, normalizeProps));

package/source/spread.js

@@ -12,6 +12,7 @@ export const spread = (node, props) => {
         .filter((prop) => prop.startsWith('$$'))
         // @ts-expect-error - fix later
         .map((prop) => [prop, node[prop]]));
+    const isSVG = node instanceof SVGElement;
     const childProps = createMemo(() => mapProps(props, (key, value) => {
         const eventKey = getEventKey(key);
         // event composition
@@ -28,12 +29,12 @@ export const spread = (node, props) => {
         }
         // class composition
         if (key === 'class') {
-            return [node.className, value].filter(Boolean).join(' ');
+            return [node.classList.toString(), value].filter(Boolean).join(' ');
         }
         // don't override existing child attributes
         if (node.hasAttribute(key))
             return;
         return value;
     }));
-    solidSpread(node, mergeProps(childProps));
+    solidSpread(node, mergeProps(childProps), isSVG);
 };

package/source/switch/switch-label.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useSwitchContext } from './switch-context';
 export const SwitchLabel = (props) => {
-    const checkbox = useSwitchContext();
-    const mergedProps = mergeProps(() => checkbox().labelProps, props);
+    const api = useSwitchContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
     return <ark.span {...mergedProps}/>;
 };

package/source/switch/switch-thumb.jsx

@@ -2,7 +2,7 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useSwitchContext } from './switch-context';
 export const SwitchThumb = (props) => {
-    const checkbox = useSwitchContext();
-    const mergedProps = mergeProps(() => checkbox().thumbProps, props);
+    const api = useSwitchContext();
+    const mergedProps = mergeProps(() => api().thumbProps, props);
     return <ark.span {...mergedProps}/>;
 };

package/source/switch/switch.jsx

@@ -5,7 +5,7 @@ import { runIfFn } from '../run-if-fn';
 import { SwitchProvider } from './switch-context';
 import { useSwitch } from './use-switch';
 export const Switch = (props) => {
-    const [switchProps, labelProps] = createSplitProps()(props, [
+    const [switchProps, localProps] = createSplitProps()(props, [
         'checked',
         'dir',
         'disabled',
@@ -21,7 +21,7 @@ export const Switch = (props) => {
         'value',
     ]);
     const api = useSwitch(switchProps);
-    const mergedProps = mergeProps(() => api().rootProps, labelProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
     const getChildren = () => runIfFn(props.children, api);
     return (<SwitchProvider value={api}>
       <ark.label {...mergedProps}>{getChildren()}</ark.label>

package/source/toast/create-toaster.jsx

@@ -2,8 +2,8 @@ import { mergeProps, normalizeProps, useActor } from '@zag-js/solid';
 import * as toast from '@zag-js/toast';
 import { Index, createEffect, createMemo, onCleanup } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
-import { ark } from '../factory';
 import { ToastProvider } from './toast-context';
+import { ToastGroup } from './toast-group';
 export const createToaster = (props) => {
     const service = toast.group.machine({ id: '1', ...props }).start();
     const [state, send] = useActor(service);
@@ -15,11 +15,11 @@ export const createToaster = (props) => {
             onCleanup(() => service.stop());
         });
         const mergedProps = mergeProps(() => api().getGroupProps({ placement: props.placement }), toasterProps);
-        return (<ark.ol {...mergedProps}>
+        return (<ToastGroup {...mergedProps}>
         <Index each={api().toastsByPlacement[props.placement]}>
           {(toast) => <ToastProviderFactory service={toast()}/>}
         </Index>
-      </ark.ol>);
+      </ToastGroup>);
     };
     return [Toaster, api];
 };

package/source/toast/index.js

@@ -2,11 +2,13 @@ import { createToaster } from './create-toaster';
 import { Toast as ToastRoot } from './toast';
 import { ToastCloseTrigger } from './toast-close-trigger';
 import { ToastDescription } from './toast-description';
+import { ToastGroup } from './toast-group';
 import { ToastTitle } from './toast-title';
 const Toast = Object.assign(ToastRoot, {
     Root: ToastRoot,
-    Title: ToastTitle,
-    Description: ToastDescription,
     CloseTrigger: ToastCloseTrigger,
+    Description: ToastDescription,
+    Group: ToastGroup,
+    Title: ToastTitle,
 });
-export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastTitle };
+export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };

package/source/toast/toast-group.jsx

@@ -0,0 +1,4 @@
+import { ark } from '../factory';
+export const ToastGroup = (props) => {
+    return <ark.ol {...props}/>;
+};

package/types/accordion/index.d.ts

@@ -1,3 +1,4 @@
+import type { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails as AccordionValueChangeDetails } from '@zag-js/accordion';
 import { type AccordionProps } from './accordion';
 import { useAccordionContext, type AccordionContext } from './accordion-context';
 import { AccordionItem, type AccordionItemProps } from './accordion-item';
@@ -13,4 +14,4 @@ declare const Accordion: ((props: AccordionProps) => import("solid-js").JSX.Elem
     ItemTrigger: (props: AccordionItemTriggerProps) => import("solid-js").JSX.Element;
 };
 export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, useAccordionContext, useAccordionItemContext, };
-export type { AccordionContext, AccordionItemContentProps, AccordionItemContext, AccordionItemIndicatorProps, AccordionItemProps, AccordionItemTriggerProps, AccordionProps, };
+export type { AccordionContext, AccordionFocusChangeDetails, AccordionItemContentProps, AccordionItemContext, AccordionItemIndicatorProps, AccordionItemProps, AccordionItemTriggerProps, AccordionProps, AccordionValueChangeDetails, };

package/types/avatar/index.d.ts

@@ -1,3 +1,4 @@
+import type { StatusChangeDetails as AvatarStatusChangeDetails } from '@zag-js/avatar';
 import { type AvatarProps } from './avatar';
 import { useAvatarContext, type AvatarContext } from './avatar-context';
 import { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
@@ -8,4 +9,4 @@ declare const Avatar: ((props: AvatarProps) => import("solid-js").JSX.Element) &
     Image: (props: AvatarImageProps) => import("solid-js").JSX.Element;
 };
 export { Avatar, AvatarFallback, AvatarImage, useAvatarContext };
-export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarProps };
+export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarProps, AvatarStatusChangeDetails, };

package/types/carousel/index.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -20,4 +21,4 @@ declare const Carousel: ((props: CarouselProps) => import("solid-js").JSX.Elemen
     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, CarouselViewportProps, };
+export type { CarouselContext, CarouselControlProps, CarouselIndicatorGroupProps, CarouselIndicatorProps, CarouselItemGroupProps, CarouselItemProps, CarouselNextTriggerProps, CarouselPrevTriggerProps, CarouselProps, CarouselSlideChangeDetails, CarouselViewportProps, };

package/types/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import type { CheckedState } from '@zag-js/checkbox';
+import type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
 import { type CheckboxProps } from './checkbox';
 import { useCheckboxContext, type CheckboxContext } from './checkbox-context';
 import { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
@@ -11,4 +11,4 @@ declare const Checkbox: ((props: CheckboxProps) => import("solid-js").JSX.Elemen
     Indicator: (props: CheckboxIndicatorProps) => import("solid-js").JSX.Element;
 };
 export { Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, useCheckboxContext };
-export type { CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxProps, CheckedState, };
+export type { CheckboxCheckedChangeDetails, CheckboxContext, CheckboxControlProps, CheckboxIndicatorProps, CheckboxLabelProps, CheckboxProps, CheckedState, };

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

@@ -1,4 +1,4 @@
-import type { ColorFormat } from '@zag-js/color-picker';
+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';
@@ -51,4 +51,4 @@ declare const ColorPicker: ((props: ColorPickerProps) => import("solid-js").JSX.
     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, ColorPickerFormatSelectProps, ColorPickerFormatTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchIndicatorProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, ColorPickerViewProps, };
+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, };

package/types/combobox/index.d.ts

@@ -1,3 +1,4 @@
+import type { HighlightChangeDetails as ComboboxHighlightChangeDetails, InputValueChangeDetails as ComboboxInputValueChangeDetails, OpenChangeDetails as ComboboxOpenChangeDetails, ValueChangeDetails as ComboboxValueChangeDetails } from '@zag-js/combobox';
 import type { CollectionItem } from '../types';
 import { type ComboboxProps } from './combobox';
 import { ComboboxClearTrigger, type ComboboxClearTriggerProps } from './combobox-clear-trigger';
@@ -29,4 +30,4 @@ declare const Combobox: (<T extends CollectionItem>(props: ComboboxProps<T>) =>
     Trigger: (props: ComboboxTriggerProps) => import("solid-js").JSX.Element;
 };
 export { Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, useComboboxContext, };
-export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, };
+export type { CollectionItem, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxContext, ComboboxControlProps, ComboboxHighlightChangeDetails, ComboboxInputProps, ComboboxInputValueChangeDetails, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxOpenChangeDetails, ComboboxPositionerProps, ComboboxProps, ComboboxTriggerProps, ComboboxValueChangeDetails, };

package/types/create-split-props.d.ts

@@ -1,3 +1,3 @@
 type EnsureKeys<ExpectedKeys extends (keyof Target)[], Target> = ExpectedKeys extends (keyof Target)[] ? [keyof Target] extends [ExpectedKeys[number]] ? unknown : `Missing required keys: ${Exclude<keyof Target, ExpectedKeys[number]>}` : never;
-export declare const createSplitProps: <Target extends Record<never, never>>() => <Keys extends (keyof Target)[], Props extends Target = Target>(props: Props, keys: Keys & EnsureKeys<Keys, Target>) => [Pick<Props, Extract<Keys & EnsureKeys<Keys, Target>, readonly (keyof Props)[]>[number]>, Omit<Props, (Keys & EnsureKeys<Keys, Target>)[number]>];
+export declare const createSplitProps: <Target extends Record<never, never>>() => <Keys extends (keyof Target)[], Props extends Target = Target>(props: Props, keys: Keys & EnsureKeys<Keys, Target>) => [Pick<Props, Extract<Keys & EnsureKeys<Keys, Target>, readonly (keyof Props)[]>[number]>, { [P in keyof Props as Exclude<P, (Keys & EnsureKeys<Keys, Target>)[number]>]: Props[P]; }];
 export {};

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

@@ -1,3 +1,4 @@
+import type { FocusChangeDetails as DatePickerFocusChangeDetails, OpenChangeDetails as DatePickerOpenChangeDetails, ValueChangeDetails as DatePickerValueChangeDetails, ViewChangeDetails as DatePickerViewChangeDetails } from '@zag-js/date-picker';
 import { type DatePickerProps } from './date-picker';
 import { DatePickerClearTrigger, type DatePickerClearTriggerProps } from './date-picker-clear-trigger';
 import { DatePickerContent, type DatePickerContentProps } from './date-picker-content';
@@ -51,4 +52,4 @@ declare const DatePicker: ((props: DatePickerProps) => import("solid-js").JSX.El
     YearSelect: (props: DatePickerYearSelectProps) => import("solid-js").JSX.Element;
 };
 export { DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
-export type { DatePickerClearTriggerProps, DatePickerContentProps, DatePickerContext, DatePickerControlProps, DatePickerInputProps, DatePickerLabelProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerPositionerProps, DatePickerPrevTriggerProps, DatePickerProps, DatePickerRangeTextProps, DatePickerTableBodyProps, DatePickerTableCellContext, DatePickerTableCellProps, DatePickerTableCellTriggerProps, DatePickerTableContext, DatePickerTableHeadProps, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRowProps, DatePickerTriggerProps, DatePickerViewContext, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTriggerProps, DatePickerYearSelectProps, };
+export type { DatePickerClearTriggerProps, DatePickerContentProps, DatePickerContext, DatePickerControlProps, DatePickerFocusChangeDetails, DatePickerInputProps, DatePickerLabelProps, DatePickerMonthSelectProps, DatePickerNextTriggerProps, DatePickerOpenChangeDetails, DatePickerPositionerProps, DatePickerPrevTriggerProps, DatePickerProps, DatePickerRangeTextProps, DatePickerTableBodyProps, DatePickerTableCellContext, DatePickerTableCellProps, DatePickerTableCellTriggerProps, DatePickerTableContext, DatePickerTableHeadProps, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRowProps, DatePickerTriggerProps, DatePickerValueChangeDetails, DatePickerViewChangeDetails, DatePickerViewContext, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTriggerProps, DatePickerYearSelectProps, };

package/types/dialog/index.d.ts

@@ -1,3 +1,4 @@
+import type { OpenChangeDetails as DialogOpenChangeDetails } from '@zag-js/dialog';
 import { type DialogProps } from './dialog';
 import { DialogBackdrop, type DialogBackdropProps } from './dialog-backdrop';
 import { DialogCloseTrigger, type DialogCloseTriggerProps } from './dialog-close-trigger';
@@ -18,4 +19,4 @@ declare const Dialog: ((props: DialogProps) => import("solid-js").JSX.Element) &
     Trigger: (props: DialogTriggerProps) => import("solid-js").JSX.Element;
 };
 export { Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, useDialogContext, };
-export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContentProps, DialogContext, DialogDescriptionProps, DialogPositionerProps, DialogProps, DialogTitleProps, DialogTriggerProps, };
+export type { DialogBackdropProps, DialogCloseTriggerProps, DialogContentProps, DialogContext, DialogDescriptionProps, DialogOpenChangeDetails, DialogPositionerProps, DialogProps, DialogTitleProps, DialogTriggerProps, };

package/types/editable/index.d.ts

@@ -1,3 +1,4 @@
+import type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
 import { type EditableProps } from './editable';
 import { EditableArea, type EditableAreaProps } from './editable-area';
 import { EditableCancelTrigger, type EditableCancelTriggerProps } from './editable-cancel-trigger';
@@ -20,4 +21,4 @@ declare const Editable: ((props: EditableProps) => import("solid-js").JSX.Elemen
     SubmitTrigger: (props: EditableSubmitTriggerProps) => import("solid-js").JSX.Element;
 };
 export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, useEditableContext, };
-export type { EditableAreaProps, EditableCancelTriggerProps, EditableContext, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableProps, EditableSubmitTriggerProps, };
+export type { EditableAreaProps, EditableCancelTriggerProps, EditableContext, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableProps, EditableSubmitTriggerProps, EditableValueChangeDetails, };

package/types/file-upload/file-upload-item-preview-image.d.ts

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

package/types/file-upload/file-upload-item-preview.d.ts

@@ -1,4 +1,9 @@
 import { type HTMLArkProps } from '../factory';
-export interface FileUploadItemPreviewProps extends HTMLArkProps<'img'> {
+export interface FileUploadItemPreviewProps extends HTMLArkProps<'div'> {
+    /**
+     * The file type to match against. Matches all file types by default.
+     * @default '.*'
+     */
+    type?: string;
 }
 export declare const FileUploadItemPreview: (props: FileUploadItemPreviewProps) => import("solid-js").JSX.Element;

package/types/file-upload/index.d.ts

@@ -1,3 +1,4 @@
+import type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails } from '@zag-js/file-upload';
 import { type FileUploadProps } from './file-upload';
 import { useFileUploadContext, type FileUploadContext } from './file-upload-context';
 import { FileUploadDropzone, type FileUploadDropzoneProps } from './file-upload-dropzone';
@@ -5,21 +6,23 @@ import { FileUploadItem, type FileUploadItemProps } from './file-upload-item';
 import { FileUploadItemDeleteTrigger, type FileUploadItemDeleteTriggerProps } from './file-upload-item-delete-trigger';
 import { FileUploadItemGroup, type FileUploadItemGroupProps } from './file-upload-item-group';
 import { FileUploadItemName, type FileUploadItemNameProps } from './file-upload-item-name';
-import { FileUploadItemPreview, type FileUploadItemPreviewProps } from './file-upload-item-preview';
+import { type FileUploadItemPreviewProps } from './file-upload-item-preview';
+import { FileUploadItemPreviewImage, type FileUploadItemPreviewImageProps } from './file-upload-item-preview-image';
 import { FileUploadItemSizeText, type FileUploadItemSizeTextProps } from './file-upload-item-size-text';
 import { FileUploadLabel, type FileUploadLabelProps } from './file-upload-label';
 import { FileUploadTrigger, type FileUploadTriggerProps } from './file-upload-trigger';
 declare const FileUpload: ((props: FileUploadProps) => import("solid-js").JSX.Element) & {
     Root: (props: FileUploadProps) => import("solid-js").JSX.Element;
     Dropzone: (props: FileUploadDropzoneProps) => import("solid-js").JSX.Element;
-    Label: (props: FileUploadLabelProps) => import("solid-js").JSX.Element;
-    Trigger: (props: FileUploadTriggerProps) => import("solid-js").JSX.Element;
-    ItemGroup: (props: FileUploadItemGroupProps) => import("solid-js").JSX.Element;
     Item: (props: FileUploadItemProps) => import("solid-js").JSX.Element;
+    ItemDeleteTrigger: (props: FileUploadItemDeleteTriggerProps) => import("solid-js").JSX.Element;
+    ItemGroup: (props: FileUploadItemGroupProps) => import("solid-js").JSX.Element;
     ItemName: (props: FileUploadItemNameProps) => import("solid-js").JSX.Element;
     ItemPreview: (props: FileUploadItemPreviewProps) => import("solid-js").JSX.Element;
+    ItemPreviewImage: (props: FileUploadItemPreviewImageProps) => import("solid-js").JSX.Element;
     ItemSizeText: (props: FileUploadItemSizeTextProps) => import("solid-js").JSX.Element;
-    ItemDeleteTrigger: (props: FileUploadItemDeleteTriggerProps) => import("solid-js").JSX.Element;
+    Label: (props: FileUploadLabelProps) => import("solid-js").JSX.Element;
+    Trigger: (props: FileUploadTriggerProps) => import("solid-js").JSX.Element;
 };
-export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
-export type { FileUploadContext, FileUploadDropzoneProps, FileUploadItemDeleteTriggerProps, FileUploadItemGroupProps, FileUploadItemNameProps, FileUploadItemPreviewProps, FileUploadItemProps, FileUploadItemSizeTextProps, FileUploadLabelProps, FileUploadProps, FileUploadTriggerProps, };
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
+export type { FileUploadContext, FileUploadDropzoneProps, FileUploadFileAcceptDetails, FileUploadFileChangeDetails, FileUploadFileRejectDetails, FileUploadItemDeleteTriggerProps, FileUploadItemGroupProps, FileUploadItemNameProps, FileUploadItemPreviewImageProps, FileUploadItemPreviewProps, FileUploadItemProps, FileUploadItemSizeTextProps, FileUploadLabelProps, FileUploadProps, FileUploadTriggerProps, };

package/types/hover-card/index.d.ts

@@ -1,3 +1,4 @@
+import type { OpenChangeDetails as HoverCardOpenChangeDetails } from '@zag-js/color-picker';
 import { type HoverCardProps } from './hover-card';
 import { HoverCardArrow, type HoverCardArrowProps } from './hover-card-arrow';
 import { HoverCardArrowTip, type HoverCardArrowTipProps } from './hover-card-arrow-tip';
@@ -14,4 +15,4 @@ declare const HoverCard: ((props: HoverCardProps) => import("solid-js").JSX.Elem
     Trigger: (props: HoverCardTriggerProps) => import("solid-js").JSX.Element;
 };
 export { HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, useHoverCardContext, };
-export type { HoverCardArrowProps, HoverCardArrowTipProps, HoverCardContentProps, HoverCardContext, HoverCardPositionerProps, HoverCardProps, HoverCardTriggerProps, };
+export type { HoverCardArrowProps, HoverCardArrowTipProps, HoverCardContentProps, HoverCardContext, HoverCardOpenChangeDetails, HoverCardPositionerProps, HoverCardProps, HoverCardTriggerProps, };

package/types/index.d.ts

@@ -17,6 +17,7 @@ export * from './pagination';
 export * from './pin-input';
 export * from './popover';
 export * from './presence';
+export * from './progress';
 export * from './radio-group';
 export * from './rating-group';
 export * from './segment-group';

package/types/menu/index.d.ts

@@ -1,3 +1,4 @@
+import type { OpenChangeDetails as MenuOpenChangeDetails, ValueChangeDetails as MenuValueChangeDetails } from '@zag-js/menu';
 import { type MenuProps } from './menu';
 import { MenuArrow, type MenuArrowProps } from './menu-arrow';
 import { MenuArrowTip, type MenuArrowTipProps } from './menu-arrow-tip';
@@ -28,4 +29,4 @@ declare const Menu: ((props: MenuProps) => import("solid-js").JSX.Element) & {
     TriggerItem: (props: MenuTriggerItemProps) => import("solid-js").JSX.Element;
 };
 export { Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, useMenuContext, };
-export type { MenuArrowProps, MenuArrowTipProps, MenuContentProps, MenuContextTriggerProps, MenuItemGroupLabelProps, MenuItemGroupProps, MenuItemProps, MenuOptionItemProps, MenuPositionerProps, MenuProps, MenuSeparatorProps, MenuTriggerItemProps, MenuTriggerProps, };
+export type { MenuArrowProps, MenuArrowTipProps, MenuContentProps, MenuContextTriggerProps, MenuItemGroupLabelProps, MenuItemGroupProps, MenuItemProps, MenuOpenChangeDetails, MenuOptionItemProps, MenuPositionerProps, MenuProps, MenuSeparatorProps, MenuTriggerItemProps, MenuTriggerProps, MenuValueChangeDetails, };

package/types/number-input/index.d.ts

@@ -1,9 +1,10 @@
+import type { FocusChangeDetails as NumberInputFocusChangeDetails, ValueChangeDetails as NumberInputValueChangeDetails, ValueInvalidDetails as NumberInputValueInvalidDetails } from '@zag-js/number-input';
 import { type NumberInputProps } from './number-input';
 import { useNumberInputContext, type NumberInputContext } from './number-input-context';
 import { NumberInputControl, type NumberInputControlProps } from './number-input-control';
 import { NumberInputDecrementTrigger, type NumberInputDecrementTriggerProps } from './number-input-decrement-trigger';
-import { NumberInputInput, type NumberInputInputProps } from './number-input-field';
 import { NumberInputIncrementTrigger, type NumberInputIncrementTriggerProps } from './number-input-increment-trigger';
+import { NumberInputInput, type NumberInputInputProps } from './number-input-input';
 import { NumberInputLabel, type NumberInputLabelProps } from './number-input-label';
 import { NumberInputScrubber, type NumberInputScrubberProps } from './number-input-scrubber';
 declare const NumberInput: ((props: NumberInputProps) => import("solid-js").JSX.Element) & {
@@ -16,4 +17,4 @@ declare const NumberInput: ((props: NumberInputProps) => import("solid-js").JSX.
     Scrubber: (props: NumberInputScrubberProps) => import("solid-js").JSX.Element;
 };
 export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, useNumberInputContext, };
-export type { NumberInputContext, NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputProps, NumberInputScrubberProps, };
+export type { NumberInputContext, NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputFocusChangeDetails, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputProps, NumberInputScrubberProps, NumberInputValueChangeDetails, NumberInputValueInvalidDetails, };

package/types/pagination/index.d.ts

@@ -1,3 +1,4 @@
+import type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails } from '@zag-js/pagination';
 import { type PaginationProps } from './pagination';
 import { usePaginationContext, type PaginationContext } from './pagination-context';
 import { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
@@ -12,4 +13,4 @@ declare const Pagination: ((props: PaginationProps) => import("solid-js").JSX.El
     PrevTrigger: (props: PaginationPrevTriggerProps) => import("solid-js").JSX.Element;
 };
 export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, usePaginationContext, };
-export type { PaginationContext, PaginationEllipsisProps, PaginationItemProps, PaginationNextTriggerProps, PaginationPrevTriggerProps, PaginationProps, };
+export type { PaginationContext, PaginationEllipsisProps, PaginationItemLabelDetails, PaginationItemProps, PaginationNextTriggerProps, PaginationPageChangeDetails, PaginationPrevTriggerProps, PaginationProps, };

package/types/pin-input/index.d.ts

@@ -1,7 +1,8 @@
+import type { ValueChangeDetails as PinInputValueChangeDetails, ValueInvalidDetails as PinInputValueInvalidDetails } from '@zag-js/pin-input';
 import { type PinInputProps } from './pin-input';
 import { usePinInputContext, type PinInputContext } from './pin-input-context';
 import { PinInputControl, type PinInputControlProps } from './pin-input-control';
-import { PinInputInput, type PinInputInputProps } from './pin-input-field';
+import { PinInputInput, type PinInputInputProps } from './pin-input-input';
 import { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
 declare const PinInput: ((props: PinInputProps) => import("solid-js").JSX.Element) & {
     Root: (props: PinInputProps) => import("solid-js").JSX.Element;
@@ -10,4 +11,4 @@ declare const PinInput: ((props: PinInputProps) => import("solid-js").JSX.Elemen
     Label: (props: PinInputLabelProps) => import("solid-js").JSX.Element;
 };
 export { PinInput, PinInputControl, PinInputInput, PinInputLabel, usePinInputContext };
-export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps, };
+export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps, PinInputValueChangeDetails, PinInputValueInvalidDetails, };

package/types/popover/index.d.ts

@@ -1,3 +1,4 @@
+import type { OpenChangeDetails as PopoverOpenChangeDetails } from '@zag-js/popover';
 import { type PopoverProps } from './popover';
 import { PopoverAnchor, type PopoverAnchorProps } from './popover-anchor';
 import { PopoverArrow, type PopoverArrowProps } from './popover-arrow';
@@ -24,4 +25,4 @@ declare const Popover: ((props: PopoverProps) => import("solid-js").JSX.Element)
     Trigger: (props: PopoverTriggerProps) => import("solid-js").JSX.Element;
 };
 export { Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopoverContext, };
-export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverContext, PopoverDescriptionProps, PopoverIndicatorProps, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };
+export type { PopoverAnchorProps, PopoverArrowProps, PopoverArrowTipProps, PopoverCloseTriggerProps, PopoverContentProps, PopoverContext, PopoverDescriptionProps, PopoverIndicatorProps, PopoverOpenChangeDetails, PopoverPositionerProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, };

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

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

package/types/presence/split-presence-props.d.ts

@@ -1,2 +1,2 @@
 import type { UsePresenceProps } from './use-presence';
-export declare function splitPresenceProps<T>(props: T & UsePresenceProps): [Pick<T & UsePresenceProps, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">, Omit<T & UsePresenceProps, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];
+export declare function splitPresenceProps<T>(props: T & UsePresenceProps): [Pick<T & UsePresenceProps, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">, T & UsePresenceProps extends infer T_1 ? { [P in keyof T_1 as Exclude<P, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">]: (T & UsePresenceProps)[P]; } : never];