@ark-ui/solid 4.0.0 → 4.1.0

package/dist/source/components/file-upload/file-upload-item-preview-image.jsx

@@ -1,5 +1,5 @@
 import { mergeProps } from '@zag-js/solid';
-import { createSignal } from 'solid-js';
+import { createEffect, createSignal, onCleanup } from 'solid-js';
 import { ark } from '../factory';
 import { useFileUploadContext } from './use-file-upload-context';
 import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context';
@@ -7,7 +7,10 @@ export const FileUploadItemPreviewImage = (props) => {
     const fileUpload = useFileUploadContext();
     const itemProps = useFileUploadItemPropsContext();
     const [url, setUrl] = createSignal('');
-    fileUpload().createFileUrl(itemProps.file, (url) => setUrl(url));
+    createEffect(() => {
+        const cleanup = fileUpload().createFileUrl(itemProps.file, (url) => setUrl(url));
+        onCleanup(cleanup);
+    });
     const mergedProps = mergeProps(fileUpload().getItemPreviewImageProps({ ...itemProps, url: url() }), props);
     return <ark.img {...mergedProps}/>;
 };

package/dist/source/components/index.js

@@ -39,6 +39,7 @@ export * from './tags-input';
 export * from './time-picker';
 export * from './timer';
 export * from './toast';
+export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
 export * from './tree-view';

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

@@ -0,0 +1,7 @@
+export { ToggleContext } from './toggle-context';
+export { ToggleIndicator, } from './toggle-indicator';
+export { ToggleRoot } from './toggle-root';
+export { toggleAnatomy } from './toggle.anatomy';
+export { useToggle } from './use-toggle';
+export { useToggleContext } from './use-toggle-context';
+export * as Toggle from './toggle';

package/dist/source/components/toggle/toggle-context.jsx

@@ -0,0 +1,2 @@
+import { useToggleContext } from './use-toggle-context';
+export const ToggleContext = (props) => props.children(useToggleContext());

package/dist/source/components/toggle/toggle-indicator.jsx

@@ -0,0 +1,15 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show } from 'solid-js';
+import { ark } from '../factory';
+import { useToggleContext } from './use-toggle-context';
+export const ToggleIndicator = (props) => {
+    const { children, fallback, ...restProps } = props;
+    const toggle = useToggleContext();
+    const mergedProps = mergeProps(() => toggle().getIndicatorProps(), restProps);
+    return (<ark.div {...mergedProps}>
+      {/* @ts-ignore */}
+      <Show when={toggle().pressed} fallback={fallback}>
+        {children}
+      </Show>
+    </ark.div>);
+};

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

@@ -0,0 +1,17 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { useToggle } from './use-toggle';
+import { ToggleProvider } from './use-toggle-context';
+export const ToggleRoot = (props) => {
+    const [useToggleProps, localProps] = createSplitProps()(props, [
+        'pressed',
+        'defaultPressed',
+        'disabled',
+        'onPressedChange',
+    ]);
+    const toggle = useToggle(useToggleProps);
+    const mergedProps = mergeProps(() => toggle().getRootProps(), localProps);
+    return (<ToggleProvider value={toggle}>
+      <button {...mergedProps}/>
+    </ToggleProvider>);
+};

package/dist/source/components/toggle/toggle.anatomy.js

@@ -0,0 +1,3 @@
+import { createAnatomy } from '@zag-js/anatomy';
+export const toggleAnatomy = createAnatomy('toggle', ['root', 'indicator']);
+export const parts = toggleAnatomy.build();

package/dist/source/components/toggle/toggle.js

@@ -0,0 +1,4 @@
+export { ToggleContext as Context } from './toggle-context';
+export { ToggleIndicator as Indicator, } from './toggle-indicator';
+export { ToggleRoot as Root, } from './toggle-root';
+export { toggleAnatomy } from './toggle.anatomy';

package/dist/source/components/toggle/use-toggle-context.js

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

package/dist/source/components/toggle/use-toggle.js

@@ -0,0 +1,43 @@
+import { dataAttr } from '@zag-js/dom-query';
+import { createMemo } from 'solid-js';
+import { useControllableState } from '../../utils/use-controllable-state';
+import { parts } from './toggle.anatomy';
+export function useToggle(props) {
+    const { defaultPressed, pressed, onPressedChange, disabled } = props;
+    const [pressedState, setPressedState] = useControllableState({
+        defaultValue: !!defaultPressed,
+        value: pressed,
+        onChange: onPressedChange,
+    });
+    return createMemo(() => ({
+        pressed: pressedState(),
+        disabled: !!disabled,
+        setPressed: setPressedState,
+        getRootProps() {
+            return {
+                ...parts.root.attrs,
+                type: 'button',
+                disabled,
+                'aria-pressed': pressedState(),
+                'data-state': pressedState() ? 'on' : 'off',
+                'data-pressed': dataAttr(pressedState()),
+                'data-disabled': dataAttr(disabled),
+                onClick(event) {
+                    if (event.defaultPrevented)
+                        return;
+                    if (disabled)
+                        return;
+                    setPressedState(!pressedState());
+                },
+            };
+        },
+        getIndicatorProps() {
+            return {
+                ...parts.indicator.attrs,
+                'data-disabled': dataAttr(disabled),
+                'data-pressed': dataAttr(pressedState()),
+                'data-state': pressedState() ? 'on' : 'off',
+            };
+        },
+    }));
+}

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

@@ -39,6 +39,7 @@ export * from './tags-input';
 export * from './time-picker';
 export * from './timer';
 export * from './toast';
+export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
 export * from './tree-view';

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

@@ -0,0 +1,7 @@
+export { ToggleContext, type ToggleContextProps } from './toggle-context';
+export { ToggleIndicator, type ToggleIndicatorProps, type ToggleIndicatorBaseProps, } from './toggle-indicator';
+export { ToggleRoot, type ToggleRootBaseProps, type ToggleRootProps } from './toggle-root';
+export { toggleAnatomy } from './toggle.anatomy';
+export { useToggle, type UseToggleProps, type UseToggleReturn } from './use-toggle';
+export { useToggleContext, type UseToggleContext } from './use-toggle-context';
+export * as Toggle from './toggle';

package/dist/types/components/toggle/toggle-context.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import { type UseToggleContext } from './use-toggle-context';
+export interface ToggleContextProps {
+    children: (context: UseToggleContext) => JSX.Element;
+}
+export declare const ToggleContext: (props: ToggleContextProps) => JSX.Element;

package/dist/types/components/toggle/toggle-indicator.d.ts

@@ -0,0 +1,8 @@
+import { type JSX } from 'solid-js';
+import type { HTMLProps, PolymorphicProps } from '../factory';
+export interface ToggleIndicatorBaseProps extends PolymorphicProps<'div'> {
+    fallback?: JSX.Element;
+}
+export interface ToggleIndicatorProps extends HTMLProps<'div'>, ToggleIndicatorBaseProps {
+}
+export declare const ToggleIndicator: (props: ToggleIndicatorProps) => JSX.Element;

package/dist/types/components/toggle/toggle-root.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLProps, PolymorphicProps } from '../factory';
+import { type UseToggleProps } from './use-toggle';
+export interface ToggleRootBaseProps extends UseToggleProps, PolymorphicProps<'button'> {
+}
+export interface ToggleRootProps extends HTMLProps<'button'>, ToggleRootBaseProps {
+}
+export declare const ToggleRoot: (props: ToggleRootProps) => import("solid-js").JSX.Element;

package/dist/types/components/toggle/toggle.anatomy.d.ts

@@ -0,0 +1,2 @@
+export declare const toggleAnatomy: import("@zag-js/anatomy").Anatomy<"root" | "indicator">;
+export declare const parts: Record<"root" | "indicator", import("@zag-js/anatomy").AnatomyPart>;

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

@@ -0,0 +1,4 @@
+export { ToggleContext as Context, type ToggleContextProps as ContextProps } from './toggle-context';
+export { ToggleIndicator as Indicator, type ToggleIndicatorProps as IndicatorProps, type ToggleIndicatorBaseProps as IndicatorBaseProps, } from './toggle-indicator';
+export { ToggleRoot as Root, type ToggleRootBaseProps as RootBaseProps, type ToggleRootProps as RootProps, } from './toggle-root';
+export { toggleAnatomy } from './toggle.anatomy';

package/dist/types/components/toggle/use-toggle-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseToggleReturn } from './use-toggle';
+export interface UseToggleContext extends UseToggleReturn {
+}
+export declare const ToggleProvider: import("solid-js").ContextProviderComponent<UseToggleContext>, useToggleContext: () => UseToggleContext;

package/dist/types/components/toggle/use-toggle.d.ts

@@ -0,0 +1,36 @@
+import { type Accessor } from 'solid-js';
+export interface UseToggleProps {
+    /**
+     * Whether the toggle is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The default pressed state of the toggle.
+     */
+    defaultPressed?: boolean;
+    /**
+     * The pressed state of the toggle.
+     */
+    pressed?: Accessor<boolean>;
+    /**
+     * Event handler called when the pressed state of the toggle changes.
+     */
+    onPressedChange?: (pressed: boolean) => void;
+}
+export type UseToggleReturn = Accessor<{
+    /**
+     * Whether the toggle is pressed.
+     */
+    pressed: boolean;
+    /**
+     * Whether the toggle is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Sets the pressed state of the toggle.
+     */
+    setPressed(pressed: boolean): void;
+    getRootProps(): JSX.IntrinsicElements['button'];
+    getIndicatorProps(): JSX.IntrinsicElements['div'];
+}>;
+export declare function useToggle(props: UseToggleProps): UseToggleReturn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -86,73 +86,73 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.5.5",
-    "@zag-js/accordion": "0.71.0",
-    "@zag-js/anatomy": "0.71.0",
-    "@zag-js/avatar": "0.71.0",
-    "@zag-js/carousel": "0.71.0",
-    "@zag-js/checkbox": "0.71.0",
-    "@zag-js/clipboard": "0.71.0",
-    "@zag-js/collapsible": "0.71.0",
-    "@zag-js/collection": "0.71.0",
-    "@zag-js/color-picker": "0.71.0",
-    "@zag-js/combobox": "0.71.0",
-    "@zag-js/date-picker": "0.71.0",
-    "@zag-js/dialog": "0.71.0",
-    "@zag-js/dom-query": "0.71.0",
-    "@zag-js/editable": "0.71.0",
-    "@zag-js/file-upload": "0.71.0",
-    "@zag-js/highlight-word": "0.71.0",
-    "@zag-js/hover-card": "0.71.0",
-    "@zag-js/file-utils": "0.71.0",
-    "@zag-js/i18n-utils": "0.71.0",
-    "@zag-js/menu": "0.71.0",
-    "@zag-js/number-input": "0.71.0",
-    "@zag-js/pagination": "0.71.0",
-    "@zag-js/pin-input": "0.71.0",
-    "@zag-js/popover": "0.71.0",
-    "@zag-js/presence": "0.71.0",
-    "@zag-js/progress": "0.71.0",
-    "@zag-js/qr-code": "0.71.0",
-    "@zag-js/radio-group": "0.71.0",
-    "@zag-js/rating-group": "0.71.0",
-    "@zag-js/select": "0.71.0",
-    "@zag-js/signature-pad": "0.71.0",
-    "@zag-js/slider": "0.71.0",
-    "@zag-js/solid": "0.71.0",
-    "@zag-js/splitter": "0.71.0",
-    "@zag-js/steps": "0.71.0",
-    "@zag-js/switch": "0.71.0",
-    "@zag-js/tabs": "0.71.0",
-    "@zag-js/tags-input": "0.71.0",
-    "@zag-js/timer": "0.71.0",
-    "@zag-js/time-picker": "0.71.0",
-    "@zag-js/toast": "0.71.0",
-    "@zag-js/toggle-group": "0.71.0",
-    "@zag-js/tooltip": "0.71.0",
-    "@zag-js/tree-view": "0.71.0",
-    "@zag-js/types": "0.71.0"
+    "@zag-js/accordion": "0.73.0",
+    "@zag-js/anatomy": "0.73.0",
+    "@zag-js/avatar": "0.73.0",
+    "@zag-js/carousel": "0.73.0",
+    "@zag-js/checkbox": "0.73.0",
+    "@zag-js/clipboard": "0.73.0",
+    "@zag-js/collapsible": "0.73.0",
+    "@zag-js/collection": "0.73.0",
+    "@zag-js/color-picker": "0.73.0",
+    "@zag-js/combobox": "0.73.0",
+    "@zag-js/date-picker": "0.73.0",
+    "@zag-js/dialog": "0.73.0",
+    "@zag-js/dom-query": "0.73.0",
+    "@zag-js/editable": "0.73.0",
+    "@zag-js/file-upload": "0.73.0",
+    "@zag-js/highlight-word": "0.73.0",
+    "@zag-js/hover-card": "0.73.0",
+    "@zag-js/file-utils": "0.73.0",
+    "@zag-js/i18n-utils": "0.73.0",
+    "@zag-js/menu": "0.73.0",
+    "@zag-js/number-input": "0.73.0",
+    "@zag-js/pagination": "0.73.0",
+    "@zag-js/pin-input": "0.73.0",
+    "@zag-js/popover": "0.73.0",
+    "@zag-js/presence": "0.73.0",
+    "@zag-js/progress": "0.73.0",
+    "@zag-js/qr-code": "0.73.0",
+    "@zag-js/radio-group": "0.73.0",
+    "@zag-js/rating-group": "0.73.0",
+    "@zag-js/select": "0.73.0",
+    "@zag-js/signature-pad": "0.73.0",
+    "@zag-js/slider": "0.73.0",
+    "@zag-js/solid": "0.73.0",
+    "@zag-js/splitter": "0.73.0",
+    "@zag-js/steps": "0.73.0",
+    "@zag-js/switch": "0.73.0",
+    "@zag-js/tabs": "0.73.0",
+    "@zag-js/tags-input": "0.73.0",
+    "@zag-js/timer": "0.73.0",
+    "@zag-js/time-picker": "0.73.0",
+    "@zag-js/toast": "0.73.0",
+    "@zag-js/toggle-group": "0.73.0",
+    "@zag-js/tooltip": "0.73.0",
+    "@zag-js/tree-view": "0.73.0",
+    "@zag-js/types": "0.73.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.2",
     "@release-it/keep-a-changelog": "5.0.0",
     "@solidjs/testing-library": "0.8.10",
-    "@storybook/addon-a11y": "8.3.3",
-    "@storybook/docs-tools": "8.3.3",
-    "@storybook/addon-essentials": "8.3.3",
+    "@storybook/addon-a11y": "8.3.4",
+    "@storybook/docs-tools": "8.3.4",
+    "@storybook/addon-essentials": "8.3.4",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
-    "@zag-js/stringify-state": "0.71.0",
+    "@zag-js/stringify-state": "0.73.0",
     "globby": "14.0.2",
     "jsdom": "25.0.1",
     "lucide-solid": "0.446.0",
     "release-it": "17.6.0",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.22.4",
+    "rollup": "4.22.5",
     "rollup-preset-solid": "2.0.1",
     "solid-js": "1.9.1",
-    "storybook": "8.3.3",
+    "storybook": "8.3.4",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.6.2",