@ark-ui/solid 1.0.0-beta.2 → 1.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -79,68 +79,68 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0-beta.0",
-    "@zag-js/accordion": "0.26.0",
-    "@zag-js/anatomy": "0.26.0",
-    "@zag-js/avatar": "0.26.0",
-    "@zag-js/carousel": "0.26.0",
-    "@zag-js/checkbox": "0.26.0",
-    "@zag-js/color-picker": "0.26.0",
-    "@zag-js/combobox": "0.26.0",
-    "@zag-js/date-picker": "0.26.0",
-    "@zag-js/dialog": "0.26.0",
-    "@zag-js/editable": "0.26.0",
-    "@zag-js/hover-card": "0.26.0",
-    "@zag-js/menu": "0.26.0",
-    "@zag-js/number-input": "0.26.0",
-    "@zag-js/pagination": "0.26.0",
-    "@zag-js/pin-input": "0.26.0",
-    "@zag-js/popover": "0.26.0",
-    "@zag-js/presence": "0.26.0",
-    "@zag-js/radio-group": "0.26.0",
-    "@zag-js/rating-group": "0.26.0",
-    "@zag-js/select": "0.26.0",
-    "@zag-js/slider": "0.26.0",
-    "@zag-js/solid": "0.26.0",
-    "@zag-js/splitter": "0.26.0",
-    "@zag-js/switch": "0.26.0",
-    "@zag-js/tabs": "0.26.0",
-    "@zag-js/tags-input": "0.26.0",
-    "@zag-js/toast": "0.26.0",
-    "@zag-js/toggle-group": "0.26.0",
-    "@zag-js/tooltip": "0.26.0",
-    "@zag-js/types": "0.26.0"
+    "@ark-ui/anatomy": "1.0.0-beta.1",
+    "@zag-js/accordion": "0.27.1",
+    "@zag-js/anatomy": "0.27.1",
+    "@zag-js/avatar": "0.27.1",
+    "@zag-js/carousel": "0.27.1",
+    "@zag-js/checkbox": "0.27.1",
+    "@zag-js/color-picker": "0.27.1",
+    "@zag-js/combobox": "0.27.1",
+    "@zag-js/date-picker": "0.27.1",
+    "@zag-js/dialog": "0.27.1",
+    "@zag-js/editable": "0.27.1",
+    "@zag-js/hover-card": "0.27.1",
+    "@zag-js/menu": "0.27.1",
+    "@zag-js/number-input": "0.27.1",
+    "@zag-js/pagination": "0.27.1",
+    "@zag-js/pin-input": "0.27.1",
+    "@zag-js/popover": "0.27.1",
+    "@zag-js/presence": "0.27.1",
+    "@zag-js/radio-group": "0.27.1",
+    "@zag-js/rating-group": "0.27.1",
+    "@zag-js/select": "0.27.1",
+    "@zag-js/slider": "0.27.1",
+    "@zag-js/solid": "0.27.1",
+    "@zag-js/splitter": "0.27.1",
+    "@zag-js/switch": "0.27.1",
+    "@zag-js/tabs": "0.27.1",
+    "@zag-js/tags-input": "0.27.1",
+    "@zag-js/toast": "0.27.1",
+    "@zag-js/toggle-group": "0.27.1",
+    "@zag-js/tooltip": "0.27.1",
+    "@zag-js/types": "0.27.1"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
     "@solidjs/testing-library": "0.8.4",
-    "@storybook/addon-essentials": "7.5.1",
-    "@storybook/addon-interactions": "7.5.1",
-    "@storybook/addon-links": "7.5.1",
-    "@storybook/blocks": "7.5.1",
+    "@storybook/addon-essentials": "7.5.2",
+    "@storybook/addon-interactions": "7.5.2",
+    "@storybook/addon-links": "7.5.2",
+    "@storybook/blocks": "7.5.2",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/user-event": "14.5.1",
     "@types/jsdom": "21.1.4",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
-    "@vitest/coverage-v8": "0.34.3",
-    "eslint": "8.51.0",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
+    "@typescript-eslint/parser": "6.9.1",
+    "@vitest/coverage-v8": "0.34.6",
+    "eslint": "8.52.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "release-it": "16.2.1",
-    "rollup": "4.1.4",
+    "rollup": "4.2.0",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.1",
-    "storybook": "7.5.1",
+    "solid-js": "1.8.5",
+    "storybook": "7.5.2",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.2.2",
-    "vite": "4.4.11",
+    "vite": "4.5.0",
     "vite-plugin-solid": "2.7.2",
     "vitest": "0.34.2"
   },

package/source/accordion/accordion-item-content.jsx

@@ -7,8 +7,8 @@ export const AccordionItemContent = (props) => {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useAccordionContext();
     const accordionItem = useAccordionItemContext();
-    const contentProps = mergeProps(() => api().getItemContentProps(accordionItem), localProps);
-    return (<Presence present={accordionItem.isOpen} {...presenceProps}>
-      <ark.div {...contentProps}/>
+    const mergedProps = mergeProps(() => api().getItemContentProps(accordionItem), localProps);
+    return (<Presence present={accordionItem.isOpen} {...presenceProps} fallback={<div {...api().getItemContentProps(accordionItem)}/>}>
+      <ark.div {...mergedProps}/>
     </Presence>);
 };

package/source/color-picker/color-picker-content.jsx

@@ -1,8 +1,12 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { Presence, splitPresenceProps } from '../presence';
 import { useColorPickerContext } from './color-picker-context';
 export const ColorPickerContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().contentProps, props);
-    return <ark.div {...mergedProps}/>;
+    const mergedProps = mergeProps(() => api().contentProps, localProps);
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
+      <ark.div {...mergedProps}/>
+    </Presence>);
 };

package/source/color-picker/color-picker-value-text.jsx

@@ -0,0 +1,9 @@
+import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerValueText = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => colorPickerAnatomy.build().valueText.attrs, props);
+    return <ark.span {...mergedProps}>{api().valueAsString || props.children}</ark.span>;
+};

package/source/color-picker/index.js

@@ -19,6 +19,7 @@ import { ColorPickerSwatchGroup, } from './color-picker-swatch-group';
 import { ColorPickerSwatchTrigger, } from './color-picker-swatch-trigger';
 import { ColorPickerTransparencyGrid, } from './color-picker-transparency-grid';
 import { ColorPickerTrigger } from './color-picker-trigger';
+import { ColorPickerValueText } from './color-picker-value-text';
 const ColorPicker = Object.assign(ColorPickerRoot, {
     Root: ColorPickerRoot,
     Area: ColorPickerArea,
@@ -38,5 +39,6 @@ const ColorPicker = Object.assign(ColorPickerRoot, {
     SwatchTrigger: ColorPickerSwatchTrigger,
     TransparencyGrid: ColorPickerTransparencyGrid,
     Trigger: ColorPickerTrigger,
+    ValueText: ColorPickerValueText,
 });
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };

package/source/combobox/combobox-content.jsx

@@ -6,7 +6,7 @@ export const ComboboxContent = (props) => {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useComboboxContext();
     const mergedProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps}>
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
       <ark.div {...mergedProps}/>
     </Presence>);
 };

package/source/combobox/combobox-item-group-label.jsx

@@ -3,8 +3,8 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useComboboxContext } from './combobox-context';
 export const ComboboxItemGroupLabel = (props) => {
-    const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+    const [labelProps, localProps] = createSplitProps()(props, ['for']);
     const api = useComboboxContext();
-    const mergedProps = mergeProps(() => api().getItemGroupLabelProps(labelProps), localProps);
+    const mergedProps = mergeProps(() => api().getItemGroupLabelProps({ htmlFor: labelProps.for }), localProps);
     return <ark.div {...mergedProps}/>;
 };

package/source/date-picker/date-picker-content.jsx

@@ -1,8 +1,12 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
+import { Presence, splitPresenceProps } from '../presence';
 import { useDatePickerContext } from './date-picker-context';
 export const DatePickerContent = (props) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useDatePickerContext();
-    const mergedProps = mergeProps(() => api().contentProps, props);
-    return <ark.div {...mergedProps}/>;
+    const mergedProps = mergeProps(() => api().contentProps, localProps);
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
+      <ark.div {...mergedProps}/>
+    </Presence>);
 };

package/source/date-picker/date-picker-view.jsx

@@ -1,3 +1,5 @@
+import { datePickerAnatomy } 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';
@@ -7,8 +9,9 @@ export const DatePickerView = (props) => {
     const [viewProps, localProps] = createSplitProps()(props, ['view']);
     const api = useDatePickerContext();
     const getChildren = () => runIfFn(localProps.children, api);
+    const mergedProps = mergeProps(() => datePickerAnatomy.build().view.attrs, localProps);
     return (<DatePickerViewProvider value={viewProps}>
-      <ark.div {...localProps} hidden={api().view !== viewProps.view}>
+      <ark.div {...mergedProps} hidden={api().view !== viewProps.view}>
         {getChildren()}
       </ark.div>
     </DatePickerViewProvider>);

package/source/date-picker/date-picker.jsx

@@ -6,6 +6,7 @@ import { DatePickerProvider } from './date-picker-context';
 import { useDatePicker } from './use-date-picker';
 export const DatePicker = (props) => {
     const [datePickerProps, localProps] = createSplitProps()(props, [
+        'closeOnSelect',
         'dir',
         'disabled',
         'fixedWeeks',
@@ -14,7 +15,6 @@ export const DatePicker = (props) => {
         'getRootNode',
         'id',
         'ids',
-        'inline',
         'isDateUnavailable',
         'isDateUnavailable',
         'locale',

package/source/dialog/dialog-backdrop.jsx

@@ -6,7 +6,7 @@ export const DialogBackdrop = (props) => {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useDialogContext();
     const mergedProps = mergeProps(() => api().backdropProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps}>
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().backdropProps}/>}>
       <ark.div {...mergedProps}/>
     </Presence>);
 };

package/source/dialog/dialog-content.jsx

@@ -6,7 +6,7 @@ export const DialogContent = (props) => {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useDialogContext();
     const mergedProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps}>
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
       <ark.div {...mergedProps}/>
     </Presence>);
 };

package/source/hover-card/hover-card-content.jsx

@@ -6,7 +6,7 @@ export const HoverCardContent = (props) => {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useHoverCardContext();
     const mergedProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps}>
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
       <ark.div {...mergedProps}/>
     </Presence>);
 };

package/source/menu/menu-content.jsx

@@ -6,7 +6,7 @@ export const MenuContent = (props) => {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useMenuContext();
     const mergedProps = mergeProps(() => api?.().contentProps, localProps);
-    return (<Presence present={api?.().isOpen} {...presenceProps}>
+    return (<Presence present={api?.().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
       <ark.div {...mergedProps}/>
     </Presence>);
 };

package/source/menu/menu-item-group-label.jsx

@@ -4,9 +4,7 @@ import { ark } from '../factory';
 import { useMenuContext } from './menu-context';
 export const MenuItemGroupLabel = (props) => {
     const menu = useMenuContext();
-    const [itemGroupLabelProps, localProps] = createSplitProps()(props, [
-        'htmlFor',
-    ]);
-    const labelProps = mergeProps(() => menu?.().getItemGroupLabelProps(itemGroupLabelProps), localProps);
-    return <ark.label {...labelProps}/>;
+    const [labelProps, localProps] = createSplitProps()(props, ['for']);
+    const mergedProps = mergeProps(() => menu?.().getItemGroupLabelProps({ htmlFor: labelProps.for }), localProps);
+    return <ark.div {...mergedProps}/>;
 };

package/source/popover/popover-content.jsx

@@ -6,7 +6,7 @@ export const PopoverContent = (props) => {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = usePopoverContext();
     const mergedProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps}>
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
       <ark.div {...mergedProps}/>
     </Presence>);
 };

package/source/presence/presence.jsx

@@ -26,7 +26,7 @@ export const Presence = (props) => {
     return (<>
       {(!api().isPresent && !wasEverPresent() && localProps.lazyMount) ||
             (localProps.unmountOnExit && !api().isPresent && wasEverPresent())
-            ? null
+            ? localProps.fallback
             : getChildren()}
     </>);
 };

package/source/presence/split-presence-props.js

@@ -1,6 +1,7 @@
 import { createSplitProps } from '../create-split-props';
 export function splitPresenceProps(props) {
     return createSplitProps()(props, [
+        'fallback',
         'lazyMount',
         'onExitComplete',
         'present',

package/source/select/select-content.jsx

@@ -6,7 +6,7 @@ export const SelectContent = (props) => {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useSelectContext();
     const mergedProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps}>
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
       <ark.div {...mergedProps}/>
     </Presence>);
 };

package/source/select/select-control.jsx

@@ -1,8 +1,16 @@
 import { mergeProps } from '@zag-js/solid';
+import { Index } from 'solid-js';
 import { ark } from '../factory';
 import { useSelectContext } from './select-context';
 export const SelectControl = (props) => {
     const api = useSelectContext();
     const mergedProps = mergeProps(() => api().controlProps, props);
-    return <ark.div {...mergedProps}/>;
+    return (<>
+      <ark.div {...mergedProps}/>
+      <select {...api().hiddenSelectProps}>
+        <Index each={api().collection.toArray()}>
+          {(option) => <option value={option().value}>{option().label}</option>}
+        </Index>
+      </select>
+    </>);
 };

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

@@ -3,8 +3,8 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useSelectContext } from './select-context';
 export const SelectItemGroupLabel = (props) => {
-    const [labelProps, localProps] = createSplitProps()(props, ['htmlFor']);
+    const [labelProps, localProps] = createSplitProps()(props, ['for']);
     const api = useSelectContext();
-    const mergedProps = mergeProps(() => api().getItemGroupLabelProps(labelProps), localProps);
+    const mergedProps = mergeProps(() => api().getItemGroupLabelProps({ htmlFor: labelProps.for }), localProps);
     return <ark.div {...mergedProps}/>;
 };

package/source/slider/index.js

@@ -4,19 +4,19 @@ import { SliderControl } from './slider-control';
 import { SliderLabel } from './slider-label';
 import { SliderMarker } from './slider-marker';
 import { SliderMarkerGroup } from './slider-marker-group';
-import { SliderOutput } from './slider-output';
 import { SliderRange } from './slider-range';
 import { SliderThumb } from './slider-thumb';
 import { SliderTrack } from './slider-track';
+import { SliderValueText } from './slider-value-text';
 const Slider = Object.assign(SliderRoot, {
     Root: SliderRoot,
     Control: SliderControl,
     Label: SliderLabel,
     Marker: SliderMarker,
     MarkerGroup: SliderMarkerGroup,
-    Output: SliderOutput,
     Range: SliderRange,
     Thumb: SliderThumb,
     Track: SliderTrack,
+    ValueText: SliderValueText,
 });
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, useSliderContext, };
+export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };

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

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

package/source/tooltip/tooltip-content.jsx

@@ -6,7 +6,7 @@ export const TooltipContent = (props) => {
     const [presenceProps, localProps] = splitPresenceProps(props);
     const api = useTooltipContext();
     const contentProps = mergeProps(() => api().contentProps, localProps);
-    return (<Presence present={api().isOpen} {...presenceProps}>
+    return (<Presence present={api().isOpen} {...presenceProps} fallback={<div {...api().contentProps}/>}>
       <ark.div {...contentProps}/>
     </Presence>);
 };

package/types/accordion/accordion-item-content.d.ts

@@ -1,4 +1,6 @@
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
-export type AccordionItemContentProps = HTMLArkProps<'div'> & PresenceProps;
+import type { Assign } from '../types';
+export interface AccordionItemContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'fallback'>> {
+}
 export declare const AccordionItemContent: (props: AccordionItemContentProps) => import("solid-js").JSX.Element;

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

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

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

@@ -3,7 +3,7 @@ import type { Assign } from '../types';
 interface TransparancyGridProps {
     size: string;
 }
-export interface ColorPickerTransparencyGridPrps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
+export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
 }
-export declare const ColorPickerTransparencyGrid: (props: ColorPickerTransparencyGridPrps) => import("solid-js").JSX.Element;
+export declare const ColorPickerTransparencyGrid: (props: ColorPickerTransparencyGridProps) => import("solid-js").JSX.Element;
 export {};

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

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

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

@@ -17,8 +17,9 @@ import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
 import { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerProps } from './color-picker-swatch-trigger';
-import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridPrps } from './color-picker-transparency-grid';
+import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps } from './color-picker-transparency-grid';
 import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
+import { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
 declare const ColorPicker: ((props: ColorPickerProps) => import("solid-js").JSX.Element) & {
     Root: (props: ColorPickerProps) => import("solid-js").JSX.Element;
     Area: (props: ColorPickerAreaProps) => import("solid-js").JSX.Element;
@@ -36,8 +37,9 @@ declare const ColorPicker: ((props: ColorPickerProps) => import("solid-js").JSX.
     Swatch: (props: ColorPickerSwatchProps) => import("solid-js").JSX.Element;
     SwatchGroup: (props: ColorPickerSwatchGroupProps) => import("solid-js").JSX.Element;
     SwatchTrigger: (props: ColorPickerSwatchTriggerProps) => import("solid-js").JSX.Element;
-    TransparencyGrid: (props: ColorPickerTransparencyGridPrps) => import("solid-js").JSX.Element;
+    TransparencyGrid: (props: ColorPickerTransparencyGridProps) => import("solid-js").JSX.Element;
     Trigger: (props: ColorPickerTriggerProps) => import("solid-js").JSX.Element;
+    ValueText: (props: ColorPickerValueTextProps) => import("solid-js").JSX.Element;
 };
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
-export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridPrps, ColorPickerTriggerProps, };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, };

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

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

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

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

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

@@ -1,4 +1,6 @@
 import { type HTMLArkProps } from '../factory';
-export interface DatePickerContentProps extends HTMLArkProps<'div'> {
+import { type PresenceProps } from '../presence';
+import type { Assign } from '../types';
+export interface DatePickerContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'fallback'>> {
 }
 export declare const DatePickerContent: (props: DatePickerContentProps) => import("solid-js").JSX.Element;

package/types/dialog/dialog-backdrop.d.ts

@@ -1,4 +1,6 @@
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
-export type DialogBackdropProps = HTMLArkProps<'div'> & PresenceProps;
+import type { Assign } from '../types';
+export interface DialogBackdropProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'fallback'>> {
+}
 export declare const DialogBackdrop: (props: DialogBackdropProps) => import("solid-js").JSX.Element;

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

@@ -1,4 +1,6 @@
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
-export type DialogContentProps = HTMLArkProps<'div'> & PresenceProps;
+import type { Assign } from '../types';
+export interface DialogContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'fallback'>> {
+}
 export declare const DialogContent: (props: DialogContentProps) => import("solid-js").JSX.Element;

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

@@ -1,4 +1,6 @@
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
-export type HoverCardContentProps = HTMLArkProps<'div'> & PresenceProps;
+import type { Assign } from '../types';
+export interface HoverCardContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'fallback'>> {
+}
 export declare const HoverCardContent: (props: HoverCardContentProps) => import("solid-js").JSX.Element;

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

@@ -1,4 +1,6 @@
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
-export type MenuContentProps = HTMLArkProps<'div'> & PresenceProps;
+import type { Assign } from '../types';
+export interface MenuContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'fallback'>> {
+}
 export declare const MenuContent: (props: MenuContentProps) => import("solid-js").JSX.Element;

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

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

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

@@ -1,4 +1,6 @@
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
-export type PopoverContentProps = HTMLArkProps<'div'> & PresenceProps;
+import type { Assign } from '../types';
+export interface PopoverContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'fallback'>> {
+}
 export declare const PopoverContent: (props: PopoverContentProps) => import("solid-js").JSX.Element;

package/types/presence/presence.d.ts

@@ -1,6 +1,6 @@
 import { type JSXElement } from 'solid-js';
 import { type UsePresenceProps } from './use-presence';
-export type PresenceProps = UsePresenceProps & {
+export interface PresenceProps extends UsePresenceProps {
     /**
      * Whether to enable lazy mounting. Defaults to `false`.
      */
@@ -13,5 +13,9 @@ export type PresenceProps = UsePresenceProps & {
      * The children to render.
      */
     children?: JSXElement;
-};
+    /**
+     * A fallback to render the component is not present.
+     */
+    fallback?: JSXElement;
+}
 export declare const Presence: (props: PresenceProps) => import("solid-js").JSX.Element;

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

@@ -1,2 +1,2 @@
 import type { PresenceProps } from './presence';
-export declare function splitPresenceProps<T>(props: T & Omit<PresenceProps, 'children'>): [Pick<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">, Omit<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];
+export declare function splitPresenceProps<T>(props: T & Omit<PresenceProps, 'children'>): [Pick<T & Omit<PresenceProps, "children">, "fallback" | "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">, Omit<T & Omit<PresenceProps, "children">, "fallback" | "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];