@ark-ui/solid 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -21,6 +21,7 @@
     "pin input",
     "popover",
     "presence",
+    "progress",
     "radio group",
     "rating group",
     "segment group",
@@ -80,72 +81,73 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.2.0",
-    "@zag-js/accordion": "0.31.1",
-    "@zag-js/avatar": "0.31.1",
-    "@zag-js/carousel": "0.31.1",
-    "@zag-js/checkbox": "0.31.1",
-    "@zag-js/color-picker": "0.31.1",
-    "@zag-js/combobox": "0.31.1",
-    "@zag-js/date-picker": "0.31.1",
-    "@zag-js/dialog": "0.31.1",
-    "@zag-js/editable": "0.31.1",
-    "@zag-js/file-upload": "0.31.1",
-    "@zag-js/hover-card": "0.31.1",
-    "@zag-js/menu": "0.31.1",
-    "@zag-js/number-input": "0.31.1",
-    "@zag-js/pagination": "0.31.1",
-    "@zag-js/pin-input": "0.31.1",
-    "@zag-js/popover": "0.31.1",
-    "@zag-js/presence": "0.31.1",
-    "@zag-js/radio-group": "0.31.1",
-    "@zag-js/rating-group": "0.31.1",
-    "@zag-js/select": "0.31.1",
-    "@zag-js/slider": "0.31.1",
-    "@zag-js/solid": "0.31.1",
-    "@zag-js/splitter": "0.31.1",
-    "@zag-js/switch": "0.31.1",
-    "@zag-js/tabs": "0.31.1",
-    "@zag-js/tags-input": "0.31.1",
-    "@zag-js/toast": "0.31.1",
-    "@zag-js/toggle-group": "0.31.1",
-    "@zag-js/tooltip": "0.31.1",
-    "@zag-js/types": "0.31.1"
+    "@ark-ui/anatomy": "1.3.0",
+    "@zag-js/accordion": "0.32.1",
+    "@zag-js/avatar": "0.32.1",
+    "@zag-js/carousel": "0.32.1",
+    "@zag-js/checkbox": "0.32.1",
+    "@zag-js/color-picker": "0.32.1",
+    "@zag-js/combobox": "0.32.1",
+    "@zag-js/date-picker": "0.32.1",
+    "@zag-js/dialog": "0.32.1",
+    "@zag-js/editable": "0.32.1",
+    "@zag-js/file-upload": "0.32.1",
+    "@zag-js/hover-card": "0.32.1",
+    "@zag-js/menu": "0.32.1",
+    "@zag-js/number-input": "0.32.1",
+    "@zag-js/pagination": "0.32.1",
+    "@zag-js/pin-input": "0.32.1",
+    "@zag-js/popover": "0.32.1",
+    "@zag-js/presence": "0.32.1",
+    "@zag-js/progress": "0.32.1",
+    "@zag-js/radio-group": "0.32.1",
+    "@zag-js/rating-group": "0.32.1",
+    "@zag-js/select": "0.32.1",
+    "@zag-js/slider": "0.32.1",
+    "@zag-js/solid": "0.32.1",
+    "@zag-js/splitter": "0.32.1",
+    "@zag-js/switch": "0.32.1",
+    "@zag-js/tabs": "0.32.1",
+    "@zag-js/tags-input": "0.32.1",
+    "@zag-js/toast": "0.32.1",
+    "@zag-js/toggle-group": "0.32.1",
+    "@zag-js/tooltip": "0.32.1",
+    "@zag-js/types": "0.32.1"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",
-    "@solidjs/testing-library": "0.8.4",
-    "@storybook/addon-essentials": "7.6.4",
-    "@storybook/addon-interactions": "7.6.4",
-    "@storybook/addon-links": "7.6.4",
-    "@storybook/blocks": "7.6.4",
+    "@solidjs/testing-library": "0.8.5",
+    "@storybook/addon-essentials": "7.6.8",
+    "@storybook/addon-interactions": "7.6.8",
+    "@storybook/addon-links": "7.6.8",
+    "@storybook/blocks": "7.6.8",
     "@storybook/testing-library": "0.2.2",
-    "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "6.1.5",
-    "@testing-library/user-event": "14.5.1",
+    "@testing-library/dom": "9.3.4",
+    "@testing-library/jest-dom": "6.2.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.14.0",
-    "@typescript-eslint/parser": "6.14.0",
+    "@typescript-eslint/eslint-plugin": "6.18.1",
+    "@typescript-eslint/parser": "6.18.1",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.55.0",
+    "eslint": "8.56.0",
     "eslint-plugin-jest-dom": "5.1.0",
     "eslint-plugin-testing-library": "6.2.0",
     "globby": "14.0.0",
     "jsdom": "23.0.1",
-    "lucide-solid": "0.294.0",
+    "lucide-solid": "0.309.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "release-it": "17.0.1",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.9.0",
+    "rollup": "4.9.5",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.7",
-    "storybook": "7.6.4",
+    "solid-js": "1.8.11",
+    "storybook": "7.6.8",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.3.3",
-    "vite": "5.0.8",
+    "vite": "5.0.11",
     "vite-plugin-solid": "2.8.0",
     "vitest": "0.34.2"
   },

package/source/combobox/use-combobox.js

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

package/source/factory.jsx

@@ -13,7 +13,7 @@ function withAsChild(Component) {
         const getChildren = children(() => ssrSpread(localProps.children, restProps));
         createEffect(() => {
             const children = getChildren();
-            if (children instanceof HTMLElement) {
+            if (children instanceof HTMLElement || children instanceof SVGElement) {
                 spread(children, restProps);
             }
         });

package/source/index.jsx

@@ -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/source/popover/popover-description.jsx

@@ -4,5 +4,5 @@ import { usePopoverContext } from './popover-context';
 export const PopoverDescription = (props) => {
     const api = usePopoverContext();
     const mergedProps = mergeProps(() => api().descriptionProps, props);
-    return <ark.div {...mergedProps}/>;
+    return <ark.p {...mergedProps}/>;
 };

package/source/progress/index.js

@@ -0,0 +1,22 @@
+import { Progress as ProgressRoot } from './progress';
+import { ProgressCircle } from './progress-circle';
+import { ProgressCircleRange } from './progress-circle-range';
+import { ProgressCircleTrack } from './progress-circle-track';
+import { useProgressContext } from './progress-context';
+import { ProgressIndicator } from './progress-indicator';
+import { ProgressLabel } from './progress-label';
+import { ProgressRange } from './progress-range';
+import { ProgressTrack } from './progress-track';
+import { ProgressValueText } from './progress-value-text';
+const Progress = Object.assign(ProgressRoot, {
+    Root: ProgressRoot,
+    Label: ProgressLabel,
+    Track: ProgressTrack,
+    Range: ProgressRange,
+    ValueText: ProgressValueText,
+    Indicator: ProgressIndicator,
+    Circle: ProgressCircle,
+    CircleTrack: ProgressCircleTrack,
+    CircleRange: ProgressCircleRange,
+});
+export { Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressIndicator, ProgressLabel, ProgressRange, ProgressTrack, ProgressValueText, useProgressContext, };

package/source/progress/progress-circle-range.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressCircleRange = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().circleRangeProps, props);
+    return <ark.circle {...mergedProps}/>;
+};

package/source/progress/progress-circle-track.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressCircleTrack = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().circleTrackProps, props);
+    return <ark.circle {...mergedProps}/>;
+};

package/source/progress/progress-circle.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressCircle = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().circleProps, props);
+    return <ark.svg {...mergedProps}/>;
+};

package/source/progress/progress-context.js

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

package/source/progress/progress-indicator.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressIndicator = (props) => {
+    const [state, localProps] = createSplitProps()(props, ['state']);
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().getIndicatorProps(state), localProps);
+    return <ark.span {...mergedProps}/>;
+};

package/source/progress/progress-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressLabel = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/progress/progress-range.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressRange = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().rangeProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/progress/progress-track.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useProgressContext } from './progress-context';
+export const ProgressTrack = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().trackProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/progress/progress-value-text.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useProgressContext } from './progress-context';
+export const ProgressValueText = (props) => {
+    const api = useProgressContext();
+    const mergedProps = mergeProps(() => api().valueTextProps, props);
+    const getChildren = () => runIfFn(props.children, () => api().valueAsString);
+    return <ark.span {...mergedProps}>{getChildren() || api().valueAsString}</ark.span>;
+};

package/source/progress/progress.jsx

@@ -0,0 +1,24 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { ProgressProvider } from './progress-context';
+import { useProgress } from './use-progress';
+export const Progress = (props) => {
+    const [progressProps, localProps] = createSplitProps()(props, [
+        'dir',
+        'getRootNode',
+        'id',
+        'max',
+        'min',
+        'orientation',
+        'translations',
+        'value',
+    ]);
+    const api = useProgress(progressProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<ProgressProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </ProgressProvider>);
+};

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/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/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/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';
@@ -24,4 +25,4 @@ declare const FileUpload: ((props: FileUploadProps) => import("solid-js").JSX.El
     Trigger: (props: FileUploadTriggerProps) => import("solid-js").JSX.Element;
 };
 export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
-export type { FileUploadContext, FileUploadDropzoneProps, FileUploadItemDeleteTriggerProps, FileUploadItemGroupProps, FileUploadItemNameProps, FileUploadItemPreviewImageProps, FileUploadItemPreviewProps, FileUploadItemProps, FileUploadItemSizeTextProps, FileUploadLabelProps, FileUploadProps, FileUploadTriggerProps, };
+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,3 +1,4 @@
+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';
@@ -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,3 +1,4 @@
+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';
@@ -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];