@ark-ui/solid 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -13,6 +13,7 @@
     "dialog",
     "editable",
     "environment",
+    "file upload",
     "hover card",
     "menu",
     "number input",
@@ -79,39 +80,40 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0",
-    "@zag-js/accordion": "0.29.0",
-    "@zag-js/avatar": "0.29.0",
-    "@zag-js/carousel": "0.29.0",
-    "@zag-js/checkbox": "0.29.0",
-    "@zag-js/color-picker": "0.29.0",
-    "@zag-js/combobox": "0.29.0",
-    "@zag-js/date-picker": "0.29.0",
-    "@zag-js/dialog": "0.29.0",
-    "@zag-js/editable": "0.29.0",
-    "@zag-js/hover-card": "0.29.0",
-    "@zag-js/menu": "0.29.0",
-    "@zag-js/number-input": "0.29.0",
-    "@zag-js/pagination": "0.29.0",
-    "@zag-js/pin-input": "0.29.0",
-    "@zag-js/popover": "0.29.0",
-    "@zag-js/presence": "0.29.0",
-    "@zag-js/radio-group": "0.29.0",
-    "@zag-js/rating-group": "0.29.0",
-    "@zag-js/select": "0.29.0",
-    "@zag-js/slider": "0.29.0",
-    "@zag-js/solid": "0.29.0",
-    "@zag-js/splitter": "0.29.0",
-    "@zag-js/switch": "0.29.0",
-    "@zag-js/tabs": "0.29.0",
-    "@zag-js/tags-input": "0.29.0",
-    "@zag-js/toast": "0.29.0",
-    "@zag-js/toggle-group": "0.29.0",
-    "@zag-js/tooltip": "0.29.0",
-    "@zag-js/types": "0.29.0"
+    "@ark-ui/anatomy": "1.1.0",
+    "@zag-js/accordion": "0.30.0",
+    "@zag-js/avatar": "0.30.0",
+    "@zag-js/carousel": "0.30.0",
+    "@zag-js/checkbox": "0.30.0",
+    "@zag-js/color-picker": "0.30.0",
+    "@zag-js/combobox": "0.30.0",
+    "@zag-js/date-picker": "0.30.0",
+    "@zag-js/dialog": "0.30.0",
+    "@zag-js/editable": "0.30.0",
+    "@zag-js/file-upload": "0.30.0",
+    "@zag-js/hover-card": "0.30.0",
+    "@zag-js/menu": "0.30.0",
+    "@zag-js/number-input": "0.30.0",
+    "@zag-js/pagination": "0.30.0",
+    "@zag-js/pin-input": "0.30.0",
+    "@zag-js/popover": "0.30.0",
+    "@zag-js/presence": "0.30.0",
+    "@zag-js/radio-group": "0.30.0",
+    "@zag-js/rating-group": "0.30.0",
+    "@zag-js/select": "0.30.0",
+    "@zag-js/slider": "0.30.0",
+    "@zag-js/solid": "0.30.0",
+    "@zag-js/splitter": "0.30.0",
+    "@zag-js/switch": "0.30.0",
+    "@zag-js/tabs": "0.30.0",
+    "@zag-js/tags-input": "0.30.0",
+    "@zag-js/toast": "0.30.0",
+    "@zag-js/toggle-group": "0.30.0",
+    "@zag-js/tooltip": "0.30.0",
+    "@zag-js/types": "0.30.0"
   },
   "devDependencies": {
-    "@release-it/keep-a-changelog": "4.0.0",
+    "@release-it/keep-a-changelog": "5.0.0",
     "@solidjs/testing-library": "0.8.4",
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/addon-interactions": "7.5.3",
@@ -121,25 +123,26 @@
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.5",
+    "@types/jsdom": "21.1.6",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.10.0",
-    "@typescript-eslint/parser": "6.10.0",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.53.0",
-    "globby": "13.2.2",
+    "eslint": "8.54.0",
+    "globby": "14.0.0",
     "jsdom": "22.1.0",
+    "lucide-solid": "0.292.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "release-it": "16.2.1",
+    "release-it": "17.0.0",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.3.0",
+    "rollup": "4.5.0",
     "rollup-preset-solid": "2.0.1",
     "solid-js": "1.8.5",
     "storybook": "7.5.3",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
-    "typescript": "5.2.2",
+    "typescript": "5.3.2",
     "vite": "4.5.0",
     "vite-plugin-solid": "2.7.2",
     "vitest": "0.34.2"

package/source/color-picker/color-picker-format-select.jsx

@@ -0,0 +1,13 @@
+import { mergeProps } from '@zag-js/solid';
+import { Index } from 'solid-js';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerFormatSelect = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().formatSelectProps, props);
+    return (<ark.select {...mergedProps}>
+      <Index each={['rgba', 'hsla', 'hsba']}>
+        {(format) => <ark.option value={format()}>{format()}</ark.option>}
+      </Index>
+    </ark.select>);
+};

package/source/color-picker/color-picker-format-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+export const ColorPickerFormatTrigger = (props) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(() => api().formatTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/color-picker/color-picker-swatch-context.js

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

package/source/color-picker/color-picker-swatch-indicator.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useColorPickerContext } from './color-picker-context';
+import { useColorPickerSwatchContext } from './color-picker-swatch-context';
+export const ColorPickerSwatchIndicator = (props) => {
+    const api = useColorPickerContext();
+    const swatchProps = useColorPickerSwatchContext();
+    const mergedProps = mergeProps(() => api().getSwatchIndicatorProps(swatchProps), props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/color-picker/color-picker-swatch-trigger.jsx

@@ -3,7 +3,10 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useColorPickerContext } from './color-picker-context';
 export const ColorPickerSwatchTrigger = (props) => {
-    const [triggerProps, localProps] = createSplitProps()(props, ['value']);
+    const [triggerProps, localProps] = createSplitProps()(props, [
+        'value',
+        'disabled',
+    ]);
     const api = useColorPickerContext();
     const mergedProps = mergeProps(() => api().getSwatchTriggerProps(triggerProps), localProps);
     return <ark.button {...mergedProps}/>;

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

@@ -2,12 +2,15 @@ import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useColorPickerContext } from './color-picker-context';
+import { ColorPickerSwatchProvider } from './color-picker-swatch-context';
 export const ColorPickerSwatch = (props) => {
-    const [colorSwatchProps, localProps] = createSplitProps()(props, [
+    const [swatchProps, localProps] = createSplitProps()(props, [
         'respectAlpha',
         'value',
     ]);
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(() => api().getSwatchProps(colorSwatchProps), localProps);
-    return <ark.div {...mergedProps}/>;
+    const mergedProps = mergeProps(() => api().getSwatchProps(swatchProps), localProps);
+    return (<ColorPickerSwatchProvider value={swatchProps}>
+      <ark.div {...mergedProps}/>
+    </ColorPickerSwatchProvider>);
 };

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

@@ -8,9 +8,10 @@ import { useColorPicker, } from './use-color-picker';
 export const ColorPicker = (props) => {
     const [presenceProps, colorPickerProps] = splitPresenceProps(props);
     const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, [
-        'autoFocus',
+        'closeOnSelect',
         'dir',
         'disabled',
+        'format',
         'getRootNode',
         'id',
         'ids',
@@ -18,6 +19,7 @@ export const ColorPicker = (props) => {
         'name',
         'name',
         'onFocusOutside',
+        'onFormatChange',
         'onInteractOutside',
         'onOpenChange',
         'onPointerDownOutside',

package/source/color-picker/index.js

@@ -12,10 +12,13 @@ import { ColorPickerContent } from './color-picker-content';
 import { useColorPickerContext } from './color-picker-context';
 import { ColorPickerControl } from './color-picker-control';
 import { ColorPickerEyeDropperTrigger, } from './color-picker-eye-dropper-trigger';
+import { ColorPickerFormatSelect, } from './color-picker-format-select';
+import { ColorPickerFormatTrigger, } from './color-picker-format-trigger';
 import { ColorPickerLabel } from './color-picker-label';
 import { ColorPickerPositioner } from './color-picker-positioner';
 import { ColorPickerSwatch } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, } from './color-picker-swatch-group';
+import { ColorPickerSwatchIndicator, } from './color-picker-swatch-indicator';
 import { ColorPickerSwatchTrigger, } from './color-picker-swatch-trigger';
 import { ColorPickerTransparencyGrid, } from './color-picker-transparency-grid';
 import { ColorPickerTrigger } from './color-picker-trigger';
@@ -33,14 +36,17 @@ const ColorPicker = Object.assign(ColorPickerRoot, {
     Content: ColorPickerContent,
     Control: ColorPickerControl,
     EyeDropperTrigger: ColorPickerEyeDropperTrigger,
+    FormatTrigger: ColorPickerFormatTrigger,
+    FormatSelect: ColorPickerFormatSelect,
     Label: ColorPickerLabel,
     Positioner: ColorPickerPositioner,
     Swatch: ColorPickerSwatch,
     SwatchGroup: ColorPickerSwatchGroup,
+    SwatchIndicator: ColorPickerSwatchIndicator,
     SwatchTrigger: ColorPickerSwatchTrigger,
     TransparencyGrid: ColorPickerTransparencyGrid,
     Trigger: ColorPickerTrigger,
     ValueText: ColorPickerValueText,
     View: ColorPickerView,
 });
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+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, };

package/source/dialog/dialog-close-trigger.jsx

@@ -3,6 +3,6 @@ import { ark } from '../factory';
 import { useDialogContext } from './dialog-context';
 export const DialogCloseTrigger = (props) => {
     const dialog = useDialogContext();
-    const mergedProps = mergeProps(() => dialog().triggerProps, props);
+    const mergedProps = mergeProps(() => dialog().closeTriggerProps, props);
     return <ark.button {...mergedProps}/>;
 };

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

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

package/source/file-upload/file-upload-dropzone.jsx

@@ -0,0 +1,11 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+export const FileUploadDropzone = (props) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().dropzoneProps, props);
+    return (<>
+      <ark.div {...mergedProps}/>
+      <input {...api().hiddenInputProps}/>
+    </>);
+};

package/source/file-upload/file-upload-item-context.js

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

package/source/file-upload/file-upload-item-delete-trigger.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemDeleteTrigger = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(() => api().getItemDeleteTriggerProps(item), props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/file-upload/file-upload-item-group.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useFileUploadContext } from './file-upload-context';
+export const FileUploadItemGroup = (props) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().itemGroupProps, props);
+    const getChildren = () => runIfFn(props.children, () => api().files);
+    return <ark.ul {...mergedProps}>{getChildren()}</ark.ul>;
+};

package/source/file-upload/file-upload-item-name.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { children } from 'solid-js';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemName = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(() => api().getItemNameProps(item), props);
+    const getChildren = children(() => props.children);
+    return <ark.div {...mergedProps}>{getChildren() || item.file.name}</ark.div>;
+};

package/source/file-upload/file-upload-item-preview.jsx

@@ -0,0 +1,19 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSignal } from 'solid-js';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemPreview = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const [url, setUrl] = createSignal('');
+    api().createFileUrl(item.file, (url) => setUrl(url));
+    try {
+        const mergedProps = mergeProps(api().getItemPreviewProps({ ...item, url: url() }), props);
+        return <ark.img {...mergedProps}/>;
+    }
+    catch (e) {
+        // TODO We could render a fallback component
+        return null;
+    }
+};

package/source/file-upload/file-upload-item-size-text.jsx

@@ -0,0 +1,12 @@
+import { mergeProps } from '@zag-js/solid';
+import { children } from 'solid-js';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+import { useFileUploadItemContext } from './file-upload-item-context';
+export const FileUploadItemSizeText = (props) => {
+    const api = useFileUploadContext();
+    const item = useFileUploadItemContext();
+    const mergedProps = mergeProps(() => api().getItemSizeTextProps(item), props);
+    const getChildren = children(() => props.children);
+    return <ark.div {...mergedProps}>{getChildren() || api().getFileSize(item.file)}</ark.div>;
+};

package/source/file-upload/file-upload-item.jsx

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useFileUploadContext } from './file-upload-context';
+import { FileUploadItemProvider } from './file-upload-item-context';
+export const FileUploadItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['file']);
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    const getChildren = () => runIfFn(localProps.children);
+    return (<FileUploadItemProvider value={itemProps}>
+      <ark.li {...mergedProps}>{getChildren()}</ark.li>
+    </FileUploadItemProvider>);
+};

package/source/file-upload/file-upload-label.jsx

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

package/source/file-upload/file-upload-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useFileUploadContext } from './file-upload-context';
+export const FileUploadTrigger = (props) => {
+    const api = useFileUploadContext();
+    const mergedProps = mergeProps(() => api().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/file-upload/file-upload.jsx

@@ -0,0 +1,30 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { FileUploadProvider } from './file-upload-context';
+import { useFileUpload } from './use-file-upload';
+export const FileUpload = (props) => {
+    const [fileUploadProps, localProps] = createSplitProps()(props, [
+        'accept',
+        'allowDrop',
+        'dir',
+        'disabled',
+        'files',
+        'getRootNode',
+        'id',
+        'isValidFile',
+        'locale',
+        'maxFiles',
+        'maxFileSize',
+        'minFileSize',
+        'name',
+        'onFilesChange',
+    ]);
+    const api = useFileUpload(fileUploadProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<FileUploadProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </FileUploadProvider>);
+};

package/source/file-upload/index.js

@@ -0,0 +1,24 @@
+import { FileUpload as FileUploadRoot } from './file-upload';
+import { useFileUploadContext } from './file-upload-context';
+import { FileUploadDropzone } from './file-upload-dropzone';
+import { FileUploadItem } from './file-upload-item';
+import { FileUploadItemDeleteTrigger, } from './file-upload-item-delete-trigger';
+import { FileUploadItemGroup } from './file-upload-item-group';
+import { FileUploadItemName } from './file-upload-item-name';
+import { FileUploadItemPreview } from './file-upload-item-preview';
+import { FileUploadItemSizeText, } from './file-upload-item-size-text';
+import { FileUploadLabel } from './file-upload-label';
+import { FileUploadTrigger } from './file-upload-trigger';
+const FileUpload = Object.assign(FileUploadRoot, {
+    Root: FileUploadRoot,
+    Dropzone: FileUploadDropzone,
+    Label: FileUploadLabel,
+    Trigger: FileUploadTrigger,
+    ItemGroup: FileUploadItemGroup,
+    Item: FileUploadItem,
+    ItemName: FileUploadItemName,
+    ItemPreview: FileUploadItemPreview,
+    ItemSizeText: FileUploadItemSizeText,
+    ItemDeleteTrigger: FileUploadItemDeleteTrigger,
+});
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };

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/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/toast/create-toaster.jsx

@@ -5,19 +5,18 @@ import { useEnvironmentContext } from '../environment';
 import { ark } from '../factory';
 import { ToastProvider } from './toast-context';
 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);
+        const mergedProps = mergeProps(() => api().getGroupProps({ placement: props.placement }), toasterProps);
         return (<ark.ol {...mergedProps}>
-        <Index each={api().toastsByPlacement[placement]}>
+        <Index each={api().toastsByPlacement[props.placement]}>
           {(toast) => <ToastProviderFactory service={toast()}/>}
         </Index>
       </ark.ol>);
@@ -26,6 +25,6 @@ export const createToaster = (props) => {
 };
 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/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 {};