@ark-ui/solid 3.0.0-7 → 3.0.1

package/dist/source/components/color-picker/color-picker-view.jsx

@@ -6,7 +6,6 @@ import { useColorPickerContext } from './use-color-picker-context';
 export const ColorPickerView = (props) => {
     const api = useColorPickerContext();
     const mergedProps = mergeProps(() => colorPickerAnatomy.build().view.attrs, props);
-    // TODO @segunadebayo
     return (<Show when={api().format === props.format}>
       <ark.div data-format={props.format} {...mergedProps}/>
     </Show>);

package/dist/source/components/pagination/pagination-root.jsx

@@ -10,6 +10,7 @@ export const PaginationRoot = (props) => {
         'id',
         'ids',
         'onPageChange',
+        'onPageSizeChange',
         'page',
         'pageSize',
         'siblingCount',

package/dist/source/components/radio-group/index.js

@@ -3,6 +3,7 @@ export { RadioGroupIndicator } from './radio-group-indicator';
 export { RadioGroupItem } from './radio-group-item';
 export { RadioGroupItemContext } from './radio-group-item-context';
 export { RadioGroupItemControl } from './radio-group-item-control';
+export { RadioGroupItemHiddenInput, } from './radio-group-item-hidden-input';
 export { RadioGroupItemText } from './radio-group-item-text';
 export { RadioGroupLabel } from './radio-group-label';
 export { RadioGroupRoot } from './radio-group-root';

package/dist/source/components/radio-group/radio-group-item-control.jsx

@@ -6,8 +6,5 @@ export const RadioGroupItemControl = (props) => {
     const radioGroup = useRadioGroupContext();
     const itemProps = useRadioGroupItemPropsContext();
     const mergedProps = mergeProps(() => radioGroup().getItemControlProps(itemProps), props);
-    return (<>
-      <ark.div {...mergedProps}/>
-      <input {...radioGroup().getItemHiddenInputProps(itemProps)}/>
-    </>);
+    return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/radio-group/radio-group-item-hidden-input.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useRadioGroupContext } from './use-radio-group-context';
+import { useRadioGroupItemPropsContext } from './use-radio-group-item-props-context';
+export const RadioGroupItemHiddenInput = (props) => {
+    const radioGroup = useRadioGroupContext();
+    const itemProps = useRadioGroupItemPropsContext();
+    const mergedProps = mergeProps(() => radioGroup().getItemHiddenInputProps(itemProps), props);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/radio-group/radio-group.js

@@ -3,6 +3,7 @@ export { RadioGroupIndicator as Indicator, } from './radio-group-indicator';
 export { RadioGroupItem as Item } from './radio-group-item';
 export { RadioGroupItemContext as ItemContext, } from './radio-group-item-context';
 export { RadioGroupItemControl as ItemControl, } from './radio-group-item-control';
+export { RadioGroupItemHiddenInput as ItemHiddenInput, } from './radio-group-item-hidden-input';
 export { RadioGroupItemText as ItemText, } from './radio-group-item-text';
 export { RadioGroupLabel as Label, } from './radio-group-label';
 export { RadioGroupRoot as Root } from './radio-group-root';

package/dist/source/components/segment-group/index.js

@@ -3,6 +3,7 @@ export { SegmentGroupIndicator } from './segment-group-indicator';
 export { SegmentGroupItem } from './segment-group-item';
 export { SegmentGroupItemContext, } from './segment-group-item-context';
 export { SegmentGroupItemControl, } from './segment-group-item-control';
+export { SegmentGroupItemHiddenInput, } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText } from './segment-group-item-text';
 export { SegmentGroupLabel } from './segment-group-label';
 export { SegmentGroupRoot } from './segment-group-root';

package/dist/source/components/segment-group/segment-group-item-control.jsx

@@ -7,8 +7,5 @@ export const SegmentGroupItemControl = (props) => {
     const segmentGroup = useSegmentGroupContext();
     const itemProps = useSegmentGroupItemPropsContext();
     const mergedProps = mergeProps(() => segmentGroup().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
-    return (<>
-      <ark.div {...mergedProps}/>
-      <input {...segmentGroup().getItemHiddenInputProps(itemProps)}/>
-    </>);
+    return <ark.div {...mergedProps}/>;
 };

package/dist/source/components/segment-group/segment-group-item-hidden-input.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSegmentGroupContext } from './use-segment-group-context';
+import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context';
+export const SegmentGroupItemHiddenInput = (props) => {
+    const segmentGroup = useSegmentGroupContext();
+    const itemProps = useSegmentGroupItemPropsContext();
+    const mergedProps = mergeProps(() => segmentGroup().getItemHiddenInputProps(itemProps), props);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/segment-group/segment-group.js

@@ -3,6 +3,7 @@ export { SegmentGroupIndicator as Indicator, } from './segment-group-indicator';
 export { SegmentGroupItem as Item, } from './segment-group-item';
 export { SegmentGroupItemContext as ItemContext, } from './segment-group-item-context';
 export { SegmentGroupItemControl as ItemControl, } from './segment-group-item-control';
+export { SegmentGroupItemHiddenInput as ItemHiddenInput } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText as ItemText, } from './segment-group-item-text';
 export { SegmentGroupLabel as Label, } from './segment-group-label';
 export { SegmentGroupRoot as Root, } from './segment-group-root';

package/dist/source/components/slider/index.js

@@ -1,5 +1,6 @@
 export { SliderContext } from './slider-context';
 export { SliderControl } from './slider-control';
+export { SliderHiddenInput } from './slider-hidden-input';
 export { SliderLabel } from './slider-label';
 export { SliderMarker } from './slider-marker';
 export { SliderMarkerGroup } from './slider-marker-group';

package/dist/source/components/slider/slider-hidden-input.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSliderContext } from './use-slider-context';
+import { useSliderThumbPropsContext } from './use-slider-thumb-props-context';
+export const SliderHiddenInput = (props) => {
+    const slider = useSliderContext();
+    const thumbProps = useSliderThumbPropsContext();
+    const mergedProps = mergeProps(slider().getHiddenInputProps(thumbProps), props);
+    return <ark.input {...mergedProps}/>;
+};

package/dist/source/components/slider/slider-thumb.jsx

@@ -2,9 +2,12 @@ import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../../utils/create-split-props';
 import { ark } from '../factory';
 import { useSliderContext } from './use-slider-context';
+import { SliderThumbPropsProvider } from './use-slider-thumb-props-context';
 export const SliderThumb = (props) => {
     const [thumbProps, localProps] = createSplitProps()(props, ['index', 'name']);
-    const api = useSliderContext();
-    const mergedProps = mergeProps(() => api().getThumbProps(thumbProps), localProps);
-    return <ark.div {...mergedProps}/>;
+    const slider = useSliderContext();
+    const mergedProps = mergeProps(() => slider().getThumbProps(thumbProps), localProps);
+    return (<SliderThumbPropsProvider value={thumbProps}>
+      <ark.div {...mergedProps}/>
+    </SliderThumbPropsProvider>);
 };

package/dist/source/components/slider/slider.js

@@ -1,5 +1,6 @@
 export { SliderContext as Context } from './slider-context';
 export { SliderControl as Control } from './slider-control';
+export { SliderHiddenInput as HiddenInput, } from './slider-hidden-input';
 export { SliderLabel as Label } from './slider-label';
 export { SliderMarker as Marker } from './slider-marker';
 export { SliderMarkerGroup as MarkerGroup, } from './slider-marker-group';

package/dist/source/components/slider/use-slider-thumb-props-context.js

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

package/dist/types/components/color-picker/color-picker-view.d.ts

@@ -1,7 +1,6 @@
 import type { ColorFormat } from '@zag-js/color-picker';
-import { type JSX } from 'solid-js';
-export interface ColorPickerViewProps {
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerViewProps extends HTMLArkProps<'div'> {
     format: ColorFormat;
-    children?: JSX.Element;
 }
-export declare const ColorPickerView: (props: ColorPickerViewProps) => JSX.Element;
+export declare const ColorPickerView: (props: ColorPickerViewProps) => import("solid-js").JSX.Element;

package/dist/types/components/pagination/index.d.ts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, } from '@zag-js/pagination';
+export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext, type PaginationContextProps } from './pagination-context';
 export { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
 export { PaginationItem, type PaginationItemProps } from './pagination-item';

package/dist/types/components/pagination/pagination.d.ts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails, PageChangeDetails } from '@zag-js/pagination';
+export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails } from '@zag-js/pagination';
 export { PaginationContext as Context, type PaginationContextProps as ContextProps, } from './pagination-context';
 export { PaginationEllipsis as Ellipsis, type PaginationEllipsisProps as EllipsisProps, } from './pagination-ellipsis';
 export { PaginationItem as Item, type PaginationItemProps as ItemProps } from './pagination-item';

package/dist/types/components/radio-group/index.d.ts

@@ -4,6 +4,7 @@ export { RadioGroupIndicator, type RadioGroupIndicatorProps } from './radio-grou
 export { RadioGroupItem, type RadioGroupItemProps } from './radio-group-item';
 export { RadioGroupItemContext, type RadioGroupItemContextProps } from './radio-group-item-context';
 export { RadioGroupItemControl, type RadioGroupItemControlProps } from './radio-group-item-control';
+export { RadioGroupItemHiddenInput, type RadioGroupItemHiddenInputProps, } from './radio-group-item-hidden-input';
 export { RadioGroupItemText, type RadioGroupItemTextProps } from './radio-group-item-text';
 export { RadioGroupLabel, type RadioGroupLabelProps } from './radio-group-label';
 export { RadioGroupRoot, type RadioGroupRootProps } from './radio-group-root';

package/dist/types/components/radio-group/radio-group-item-hidden-input.d.ts

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

package/dist/types/components/radio-group/radio-group.d.ts

@@ -4,6 +4,7 @@ export { RadioGroupIndicator as Indicator, type RadioGroupIndicatorProps as Indi
 export { RadioGroupItem as Item, type RadioGroupItemProps as ItemProps } from './radio-group-item';
 export { RadioGroupItemContext as ItemContext, type RadioGroupItemContext as ItemContextProps, } from './radio-group-item-context';
 export { RadioGroupItemControl as ItemControl, type RadioGroupItemControlProps as ItemControlProps, } from './radio-group-item-control';
+export { RadioGroupItemHiddenInput as ItemHiddenInput, type RadioGroupItemHiddenInputProps as ItemHiddenInputProps, } from './radio-group-item-hidden-input';
 export { RadioGroupItemText as ItemText, type RadioGroupItemTextProps as ItemTextProps, } from './radio-group-item-text';
 export { RadioGroupLabel as Label, type RadioGroupLabelProps as LabelProps, } from './radio-group-label';
 export { RadioGroupRoot as Root, type RadioGroupRootProps as RootProps } from './radio-group-root';

package/dist/types/components/segment-group/index.d.ts

@@ -4,9 +4,10 @@ export { SegmentGroupIndicator, type SegmentGroupIndicatorProps } from './segmen
 export { SegmentGroupItem, type SegmentGroupItemProps } from './segment-group-item';
 export { SegmentGroupItemContext, type SegmentGroupItemContextProps, } from './segment-group-item-context';
 export { SegmentGroupItemControl, type SegmentGroupItemControlProps, } from './segment-group-item-control';
+export { SegmentGroupItemHiddenInput, type SegmentGroupItemHiddenInputProps, } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText, type SegmentGroupItemTextProps } from './segment-group-item-text';
 export { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
 export { SegmentGroupRoot, type SegmentGroupRootProps } from './segment-group-root';
-export { type UseSegmentGroupContext, useSegmentGroupContext } from './use-segment-group-context';
-export { type UseSegmentGroupItemContext, useSegmentGroupItemContext, } from './use-segment-group-item-context';
+export { useSegmentGroupContext, type UseSegmentGroupContext } from './use-segment-group-context';
+export { useSegmentGroupItemContext, type UseSegmentGroupItemContext, } from './use-segment-group-item-context';
 export * as SegmentGroup from './segment-group';

package/dist/types/components/segment-group/segment-group-item-hidden-input.d.ts

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

package/dist/types/components/segment-group/segment-group.d.ts

@@ -4,6 +4,7 @@ export { SegmentGroupIndicator as Indicator, type SegmentGroupIndicatorProps as
 export { SegmentGroupItem as Item, type SegmentGroupItemProps as ItemProps, } from './segment-group-item';
 export { SegmentGroupItemContext as ItemContext, type SegmentGroupItemContextProps as ItemContextProps, } from './segment-group-item-context';
 export { SegmentGroupItemControl as ItemControl, type SegmentGroupItemControlProps as ItemControlProps, } from './segment-group-item-control';
+export { SegmentGroupItemHiddenInput as ItemHiddenInput } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText as ItemText, type SegmentGroupItemTextProps as ItemTextProps, } from './segment-group-item-text';
 export { SegmentGroupLabel as Label, type SegmentGroupLabelProps as LabelProps, } from './segment-group-label';
 export { SegmentGroupRoot as Root, type SegmentGroupRootProps as RootProps, } from './segment-group-root';

package/dist/types/components/slider/index.d.ts

@@ -1,6 +1,7 @@
 export type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails, } from '@zag-js/slider';
 export { SliderContext, type SliderContextProps } from './slider-context';
 export { SliderControl, type SliderControlProps } from './slider-control';
+export { SliderHiddenInput, type SliderHiddenInputProps } from './slider-hidden-input';
 export { SliderLabel, type SliderLabelProps } from './slider-label';
 export { SliderMarker, type SliderMarkerProps } from './slider-marker';
 export { SliderMarkerGroup, type SliderMarkerGroupProps } from './slider-marker-group';
@@ -9,5 +10,5 @@ export { SliderRoot, type SliderRootProps } from './slider-root';
 export { SliderThumb, type SliderThumbProps } from './slider-thumb';
 export { SliderTrack, type SliderTrackProps } from './slider-track';
 export { SliderValueText, type SliderValueTextProps } from './slider-value-text';
-export { type UseSliderContext, useSliderContext } from './use-slider-context';
+export { useSliderContext, type UseSliderContext } from './use-slider-context';
 export * as Slider from './slider';

package/dist/types/components/slider/slider-hidden-input.d.ts

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

package/dist/types/components/slider/slider.d.ts

@@ -1,6 +1,7 @@
 export type { FocusChangeDetails, ValueChangeDetails } from '@zag-js/slider';
 export { SliderContext as Context, type SliderContextProps as ContextProps } from './slider-context';
 export { SliderControl as Control, type SliderControlProps as ControlProps } from './slider-control';
+export { SliderHiddenInput as HiddenInput, type SliderHiddenInputProps as HiddenInputProps, } from './slider-hidden-input';
 export { SliderLabel as Label, type SliderLabelProps as LabelProps } from './slider-label';
 export { SliderMarker as Marker, type SliderMarkerProps as MarkerProps } from './slider-marker';
 export { SliderMarkerGroup as MarkerGroup, type SliderMarkerGroupProps as MarkerGroupProps, } from './slider-marker-group';

package/dist/types/components/slider/use-slider-thumb-props-context.d.ts

@@ -0,0 +1,2 @@
+import type { ThumbProps } from '@zag-js/slider';
+export declare const SliderThumbPropsProvider: import("solid-js").ContextProviderComponent<ThumbProps>, useSliderThumbPropsContext: () => ThumbProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "3.0.0-7",
+  "version": "3.0.1",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -80,51 +80,51 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@ark-ui/anatomy": "3.1.0",
-    "@zag-js/accordion": "0.50.0",
-    "@zag-js/avatar": "0.50.0",
-    "@zag-js/carousel": "0.50.0",
-    "@zag-js/checkbox": "0.50.0",
-    "@zag-js/clipboard": "0.50.0",
-    "@zag-js/collapsible": "0.50.0",
-    "@zag-js/color-picker": "0.50.0",
-    "@zag-js/combobox": "0.50.0",
-    "@zag-js/date-picker": "0.50.0",
-    "@zag-js/dialog": "0.50.0",
-    "@zag-js/dom-query": "0.50.0",
-    "@zag-js/editable": "0.50.0",
-    "@zag-js/file-upload": "0.50.0",
-    "@zag-js/hover-card": "0.50.0",
-    "@zag-js/file-utils": "0.50.0",
-    "@zag-js/i18n-utils": "0.50.0",
-    "@zag-js/menu": "0.50.0",
-    "@zag-js/number-input": "0.50.0",
-    "@zag-js/pagination": "0.50.0",
-    "@zag-js/pin-input": "0.50.0",
-    "@zag-js/popover": "0.50.0",
-    "@zag-js/presence": "0.50.0",
-    "@zag-js/progress": "0.50.0",
-    "@zag-js/radio-group": "0.50.0",
-    "@zag-js/rating-group": "0.50.0",
-    "@zag-js/select": "0.50.0",
-    "@zag-js/slider": "0.50.0",
-    "@zag-js/solid": "0.50.0",
-    "@zag-js/splitter": "0.50.0",
-    "@zag-js/switch": "0.50.0",
-    "@zag-js/tabs": "0.50.0",
-    "@zag-js/tags-input": "0.50.0",
-    "@zag-js/toast": "0.50.0",
-    "@zag-js/toggle-group": "0.50.0",
-    "@zag-js/tooltip": "0.50.0",
-    "@zag-js/tree-view": "0.50.0",
-    "@zag-js/types": "0.50.0"
+    "@ark-ui/anatomy": "3.2.0",
+    "@zag-js/accordion": "0.51.1",
+    "@zag-js/avatar": "0.51.1",
+    "@zag-js/carousel": "0.51.1",
+    "@zag-js/checkbox": "0.51.1",
+    "@zag-js/clipboard": "0.51.1",
+    "@zag-js/collapsible": "0.51.1",
+    "@zag-js/color-picker": "0.51.1",
+    "@zag-js/combobox": "0.51.1",
+    "@zag-js/date-picker": "0.51.1",
+    "@zag-js/dialog": "0.51.1",
+    "@zag-js/dom-query": "0.51.1",
+    "@zag-js/editable": "0.51.1",
+    "@zag-js/file-upload": "0.51.1",
+    "@zag-js/hover-card": "0.51.1",
+    "@zag-js/file-utils": "0.51.1",
+    "@zag-js/i18n-utils": "0.51.1",
+    "@zag-js/menu": "0.51.1",
+    "@zag-js/number-input": "0.51.1",
+    "@zag-js/pagination": "0.51.1",
+    "@zag-js/pin-input": "0.51.1",
+    "@zag-js/popover": "0.51.1",
+    "@zag-js/presence": "0.51.1",
+    "@zag-js/progress": "0.51.1",
+    "@zag-js/radio-group": "0.51.1",
+    "@zag-js/rating-group": "0.51.1",
+    "@zag-js/select": "0.51.1",
+    "@zag-js/slider": "0.51.1",
+    "@zag-js/solid": "0.51.1",
+    "@zag-js/splitter": "0.51.1",
+    "@zag-js/switch": "0.51.1",
+    "@zag-js/tabs": "0.51.1",
+    "@zag-js/tags-input": "0.51.1",
+    "@zag-js/toast": "0.51.1",
+    "@zag-js/toggle-group": "0.51.1",
+    "@zag-js/tooltip": "0.51.1",
+    "@zag-js/tree-view": "0.51.1",
+    "@zag-js/types": "0.51.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.7.3",
     "@release-it/keep-a-changelog": "5.0.0",
     "@solidjs/testing-library": "0.8.8",
-    "@storybook/addon-a11y": "8.1.1",
-    "@storybook/addon-essentials": "8.1.1",
+    "@storybook/addon-a11y": "8.1.3",
+    "@storybook/addon-essentials": "8.1.3",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/user-event": "14.5.2",
@@ -132,13 +132,13 @@
     "@types/testing-library__jest-dom": "5.14.9",
     "globby": "14.0.1",
     "jsdom": "24.0.0",
-    "lucide-solid": "0.378.0",
-    "release-it": "17.2.1",
+    "lucide-solid": "0.379.0",
+    "release-it": "17.3.0",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.17.2",
+    "rollup": "4.18.0",
     "rollup-preset-solid": "2.0.1",
     "solid-js": "1.8.17",
-    "storybook": "8.1.1",
+    "storybook": "8.1.3",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.4.5",