@ark-ui/solid 1.0.1 → 1.2.0

package/source/file-upload/use-file-upload.js

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

package/source/index.jsx

@@ -9,6 +9,7 @@ export * from './dialog';
 export * from './editable';
 export * from './environment';
 export * from './factory';
+export * from './file-upload';
 export * from './hover-card';
 export * from './menu';
 export * from './number-input';

package/source/number-input/index.js

@@ -2,8 +2,8 @@ import { NumberInput as NumberInputRoot } from './number-input';
 import { useNumberInputContext } from './number-input-context';
 import { NumberInputControl } from './number-input-control';
 import { NumberInputDecrementTrigger, } from './number-input-decrement-trigger';
-import { NumberInputInput } from './number-input-field';
 import { NumberInputIncrementTrigger, } from './number-input-increment-trigger';
+import { NumberInputInput } from './number-input-input';
 import { NumberInputLabel } from './number-input-label';
 import { NumberInputScrubber } from './number-input-scrubber';
 const NumberInput = Object.assign(NumberInputRoot, {

package/source/number-input/number-input.jsx

@@ -1,8 +1,9 @@
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
 import { NumberInputProvider } from './number-input-context';
-import { useNumberInput } from './use-number-input';
+import { useNumberInput, } from './use-number-input';
 export const NumberInput = (props) => {
     const [useNumberInputProps, localProps] = createSplitProps()(props, [
         'allowMouseWheel',
@@ -34,7 +35,8 @@ export const NumberInput = (props) => {
     ]);
     const api = useNumberInput(useNumberInputProps);
     const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
     return (<NumberInputProvider value={api}>
-      <ark.div {...mergedProps}/>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
     </NumberInputProvider>);
 };

package/source/pagination/pagination-ellipsis.jsx

@@ -3,8 +3,8 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { usePaginationContext } from './pagination-context';
 export const PaginationEllipsis = (props) => {
-    const [ellipsisProps, restProps] = createSplitProps()(props, ['index']);
+    const [ellipsisProps, localProps] = createSplitProps()(props, ['index']);
     const api = usePaginationContext();
-    const mergedProps = mergeProps(() => api().getEllipsisProps(ellipsisProps), restProps);
+    const mergedProps = mergeProps(() => api().getEllipsisProps(ellipsisProps), localProps);
     return <ark.div {...mergedProps}/>;
 };

package/source/pagination/pagination.jsx

@@ -1,12 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
-import { splitProps } from 'solid-js';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { PaginationProvider } from './pagination-context';
 import { usePagination } from './use-pagination';
 export const Pagination = (props) => {
-    const [paginationParams, restProps] = createSplitProps()(props, [
+    const [paginationParams, localProps] = createSplitProps()(props, [
         'count',
         'dir',
         'getRootNode',
@@ -19,10 +18,9 @@ export const Pagination = (props) => {
         'translations',
         'type',
     ]);
-    const [childrenProps, localProps] = splitProps(restProps, ['children']);
     const api = usePagination(paginationParams);
-    const getChildren = () => runIfFn(childrenProps.children, api);
     const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
     return (<PaginationProvider value={api}>
       <ark.nav {...mergedProps}>{getChildren()}</ark.nav>
     </PaginationProvider>);

package/source/pin-input/index.js

@@ -1,7 +1,7 @@
 import { PinInput as PinInputRoot } from './pin-input';
 import { usePinInputContext } from './pin-input-context';
 import { PinInputControl } from './pin-input-control';
-import { PinInputInput } from './pin-input-field';
+import { PinInputInput } from './pin-input-input';
 import { PinInputLabel } from './pin-input-label';
 const PinInput = Object.assign(PinInputRoot, {
     Root: PinInputRoot,

package/source/pin-input/pin-input.jsx

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { PinInputProvider } from './pin-input-context';
 import { usePinInput } from './use-pin-input';
 export const PinInput = (props) => {
-    const [pinInputProps, localProps] = createSplitProps()(props, [
+    const [usePinInputProps, localProps] = createSplitProps()(props, [
         'autoFocus',
         'blurOnComplete',
         'dir',
@@ -27,7 +27,7 @@ export const PinInput = (props) => {
         'type',
         'value',
     ]);
-    const api = usePinInput(pinInputProps);
+    const api = usePinInput(usePinInputProps);
     const mergedProps = mergeProps(() => api().rootProps, localProps);
     return (<PinInputProvider value={api}>
       <ark.div {...mergedProps}/>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/source/select/select-indicator.jsx

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

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

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

package/source/select/select.jsx

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

package/source/switch/switch-label.jsx

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

package/source/switch/switch-thumb.jsx

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

package/source/switch/switch.jsx

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

package/source/toast/create-toaster.jsx

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

package/source/toast/index.js

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

package/source/toast/toast-group.jsx

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

package/types/color-picker/color-picker-format-select.d.ts

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

package/types/color-picker/color-picker-format-trigger.d.ts

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

package/types/color-picker/color-picker-swatch-context.d.ts

@@ -0,0 +1,4 @@
+import type { SwatchProps } from '@zag-js/color-picker';
+export interface ColorPickerSwatchContext extends SwatchProps {
+}
+export declare const ColorPickerSwatchProvider: import("solid-js").ContextProviderComponent<ColorPickerSwatchContext>, useColorPickerSwatchContext: () => ColorPickerSwatchContext;

package/types/color-picker/color-picker-swatch-indicator.d.ts

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

package/types/color-picker/color-picker-swatch-trigger.d.ts

@@ -1,10 +1,6 @@
-import type { Color } from '@zag-js/color-picker';
+import type { SwatchTriggerProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-interface SwatchTriggerProps {
-    value: string | Color;
-}
 export interface ColorPickerSwatchTriggerProps extends Assign<HTMLArkProps<'button'>, SwatchTriggerProps> {
 }
 export declare const ColorPickerSwatchTrigger: (props: ColorPickerSwatchTriggerProps) => import("solid-js").JSX.Element;
-export {};

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

@@ -1,9 +1,6 @@
+import type { TransparencyGridProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-interface TransparancyGridProps {
-    size: string;
-}
-export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
+export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, TransparencyGridProps> {
 }
 export declare const ColorPickerTransparencyGrid: (props: ColorPickerTransparencyGridProps) => import("solid-js").JSX.Element;
-export {};

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

@@ -1,3 +1,4 @@
+import type { ColorFormat } 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';
@@ -12,15 +13,18 @@ import { ColorPickerContent, type ColorPickerContentProps } from './color-picker
 import { useColorPickerContext, type ColorPickerContext } from './color-picker-context';
 import { ColorPickerControl, type ColorPickerControlProps } from './color-picker-control';
 import { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps } from './color-picker-eye-dropper-trigger';
+import { ColorPickerFormatSelect, type ColorPickerFormatSelectProps } from './color-picker-format-select';
+import { ColorPickerFormatTrigger, type ColorPickerFormatTriggerProps } from './color-picker-format-trigger';
 import { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
 import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
+import { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorProps } from './color-picker-swatch-indicator';
 import { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerProps } from './color-picker-swatch-trigger';
 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';
-import { type ColorPickerViewProps } from './color-picker-view';
+import { ColorPickerView, type ColorPickerViewProps } from './color-picker-view';
 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;
@@ -33,15 +37,18 @@ declare const ColorPicker: ((props: ColorPickerProps) => import("solid-js").JSX.
     Content: (props: ColorPickerContentProps) => import("solid-js").JSX.Element;
     Control: (props: ColorPickerControlProps) => import("solid-js").JSX.Element;
     EyeDropperTrigger: (props: ColorPickerEyeDropperTriggerProps) => import("solid-js").JSX.Element;
+    FormatTrigger: (props: ColorPickerFormatTriggerProps) => import("solid-js").JSX.Element;
+    FormatSelect: (props: ColorPickerFormatSelectProps) => import("solid-js").JSX.Element;
     Label: (props: ColorPickerLabelProps) => import("solid-js").JSX.Element;
     Positioner: (props: ColorPickerPositionerProps) => import("solid-js").JSX.Element;
     Swatch: (props: ColorPickerSwatchProps) => import("solid-js").JSX.Element;
     SwatchGroup: (props: ColorPickerSwatchGroupProps) => import("solid-js").JSX.Element;
+    SwatchIndicator: (props: ColorPickerSwatchIndicatorProps) => import("solid-js").JSX.Element;
     SwatchTrigger: (props: ColorPickerSwatchTriggerProps) => 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;
     View: (props: ColorPickerViewProps) => import("solid-js").JSX.Element;
 };
-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, ColorPickerViewProps, };
+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, };

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

@@ -3,6 +3,9 @@ import { type PropTypes } from '@zag-js/solid';
 import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export interface UseColorPickerProps extends Optional<Omit<colorPicker.Context, 'value'>, 'id'> {
+    /**
+     * The current value of the color picker.
+     */
     value?: string;
 }
 export interface UseColorPickerReturn extends Accessor<colorPicker.Api<PropTypes>> {

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

@@ -0,0 +1,4 @@
+import { type UseFileUploadReturn } from './use-file-upload';
+export interface FileUploadContext extends UseFileUploadReturn {
+}
+export declare const FileUploadProvider: import("solid-js").ContextProviderComponent<FileUploadContext>, useFileUploadContext: () => FileUploadContext;

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

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

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

@@ -0,0 +1,4 @@
+import { type ItemProps } from '@zag-js/file-upload';
+export interface FileUploadItemContext extends ItemProps {
+}
+export declare const FileUploadItemProvider: import("solid-js").ContextProviderComponent<FileUploadItemContext>, useFileUploadItemContext: () => FileUploadItemContext;

package/types/file-upload/file-upload-item-delete-trigger.d.ts

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

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

@@ -0,0 +1,8 @@
+import { type Accessor, type JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface FileUploadItemGroupProps extends Assign<HTMLArkProps<'ul'>, {
+    children?: JSX.Element | ((state: Accessor<File[]>) => JSX.Element);
+}> {
+}
+export declare const FileUploadItemGroup: (props: FileUploadItemGroupProps) => JSX.Element;

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

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

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

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

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

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

package/types/file-upload/file-upload-item-size-text.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { ItemProps } from '@zag-js/file-upload';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface FileUploadItemProps extends Assign<HTMLArkProps<'li'>, ItemProps> {
+}
+export declare const FileUploadItem: (props: FileUploadItemProps) => import("solid-js").JSX.Element;

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { type JSX } from 'solid-js/jsx-runtime';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseFileUploadProps, type UseFileUploadReturn } from './use-file-upload';
+export interface FileUploadProps extends Assign<HTMLArkProps<'div'>, UseFileUploadProps & {
+    children?: ((api: UseFileUploadReturn) => JSX.Element) | JSX.Element;
+}> {
+}
+export declare const FileUpload: (props: FileUploadProps) => JSX.Element;