@ark-ui/svelte 5.1.1 → 5.2.0

package/dist/components/checkbox/checkbox-group-provider.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseCheckboxGroupReturn } from './use-checkbox-group.svelte'
+
+  export interface CheckboxGroupProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+    value: UseCheckboxGroupReturn
+  }
+  export interface CheckboxGroupProviderProps extends Assign<HTMLProps<'div'>, CheckboxGroupProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { CheckboxGroupContextProvider } from './use-checkbox-group-context'
+  import { checkboxAnatomy } from './checkbox.anatomy'
+
+  let { ref = $bindable(null), value, ...props }: CheckboxGroupProviderProps = $props()
+
+  const mergedProps = $derived(mergeProps({ role: 'group', ...checkboxAnatomy.build().group.attrs }, props))
+
+  CheckboxGroupContextProvider(value)
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/checkbox/checkbox-group-provider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseCheckboxGroupReturn } from './use-checkbox-group.svelte';
+export interface CheckboxGroupProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+    value: UseCheckboxGroupReturn;
+}
+export interface CheckboxGroupProviderProps extends Assign<HTMLProps<'div'>, CheckboxGroupProviderBaseProps> {
+}
+declare const CheckboxGroupProvider: import("svelte").Component<CheckboxGroupProviderProps, {}, "ref">;
+type CheckboxGroupProvider = ReturnType<typeof CheckboxGroupProvider>;
+export default CheckboxGroupProvider;

package/dist/components/checkbox/checkbox-group.svelte

@@ -9,7 +9,7 @@
 <script lang="ts">
   import { Ark } from '../factory'
   import { checkboxAnatomy } from './checkbox.anatomy'
-  import { CheckboxGroupProvider } from './use-checkbox-group-context'
+  import { CheckboxGroupContextProvider } from './use-checkbox-group-context'
   import { splitCheckboxGroupProps } from './split-checkbox-group-props.svelte'
   import { useCheckboxGroup } from './use-checkbox-group.svelte'
 
@@ -28,7 +28,7 @@
 
   const checkboxGroup = useCheckboxGroup(() => resolvedProps)
 
-  CheckboxGroupProvider(checkboxGroup)
+  CheckboxGroupContextProvider(checkboxGroup)
 </script>
 
 <Ark as="div" bind:ref role="group" {...checkboxAnatomy.build().group.attrs} {...localProps} />

package/dist/components/checkbox/checkbox.d.ts

@@ -2,6 +2,7 @@ export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
 export { default as Context, type CheckboxContextProps as ContextProps } from './checkbox-context.svelte';
 export { default as Control, type CheckboxControlBaseProps as ControlBaseProps, type CheckboxControlProps as ControlProps, } from './checkbox-control.svelte';
 export { default as Group, type CheckboxGroupBaseProps as GroupBaseProps, type CheckboxGroupProps as GroupProps, } from './checkbox-group.svelte';
+export { default as GroupProvider, type CheckboxGroupProviderBaseProps as GroupProviderBaseProps, type CheckboxGroupProviderProps as GroupProviderProps, } from './checkbox-group-provider.svelte';
 export { default as HiddenInput, type CheckboxHiddenInputBaseProps as HiddenInputBaseProps, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input.svelte';
 export { default as Indicator, type CheckboxIndicatorBaseProps as IndicatorBaseProps, type CheckboxIndicatorProps as IndicatorProps, } from './checkbox-indicator.svelte';
 export { default as Label, type CheckboxLabelBaseProps as LabelBaseProps, type CheckboxLabelProps as LabelProps, } from './checkbox-label.svelte';

package/dist/components/checkbox/checkbox.js

@@ -1,6 +1,7 @@
 export { default as Context } from './checkbox-context.svelte';
 export { default as Control, } from './checkbox-control.svelte';
 export { default as Group, } from './checkbox-group.svelte';
+export { default as GroupProvider, } from './checkbox-group-provider.svelte';
 export { default as HiddenInput, } from './checkbox-hidden-input.svelte';
 export { default as Indicator, } from './checkbox-indicator.svelte';
 export { default as Label, } from './checkbox-label.svelte';

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

@@ -2,6 +2,7 @@ export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState
 export { default as CheckboxContext, type CheckboxContextProps } from './checkbox-context.svelte';
 export { default as CheckboxControl, type CheckboxControlBaseProps, type CheckboxControlProps, } from './checkbox-control.svelte';
 export { default as CheckboxGroup, type CheckboxGroupBaseProps, type CheckboxGroupProps } from './checkbox-group.svelte';
+export { default as CheckboxGroupProvider, type CheckboxGroupProviderBaseProps, type CheckboxGroupProviderProps, } from './checkbox-group-provider.svelte';
 export { default as CheckboxHiddenInput, type CheckboxHiddenInputBaseProps, type CheckboxHiddenInputProps, } from './checkbox-hidden-input.svelte';
 export { default as CheckboxIndicator, type CheckboxIndicatorBaseProps, type CheckboxIndicatorProps, } from './checkbox-indicator.svelte';
 export { default as CheckboxLabel, type CheckboxLabelBaseProps, type CheckboxLabelProps } from './checkbox-label.svelte';
@@ -10,7 +11,7 @@ export { default as CheckboxRoot, type CheckboxRootBaseProps, type CheckboxRootP
 export { checkboxAnatomy } from './checkbox.anatomy';
 export { CheckboxProvider, useCheckboxContext } from './use-checkbox-context';
 export type { UseCheckboxContext } from './use-checkbox-context';
-export { CheckboxGroupProvider, useCheckboxGroupContext } from './use-checkbox-group-context';
+export { useCheckboxGroupContext } from './use-checkbox-group-context';
 export type { UseCheckboxGroupContext } from './use-checkbox-group-context';
 export { useCheckboxGroup } from './use-checkbox-group.svelte';
 export type { UseCheckboxGroupProps, UseCheckboxGroupReturn } from './use-checkbox-group.svelte';

package/dist/components/checkbox/index.js

@@ -1,6 +1,7 @@
 export { default as CheckboxContext } from './checkbox-context.svelte';
 export { default as CheckboxControl, } from './checkbox-control.svelte';
 export { default as CheckboxGroup } from './checkbox-group.svelte';
+export { default as CheckboxGroupProvider, } from './checkbox-group-provider.svelte';
 export { default as CheckboxHiddenInput, } from './checkbox-hidden-input.svelte';
 export { default as CheckboxIndicator, } from './checkbox-indicator.svelte';
 export { default as CheckboxLabel } from './checkbox-label.svelte';
@@ -8,7 +9,7 @@ export { default as CheckboxRootProvider, } from './checkbox-root-provider.svelt
 export { default as CheckboxRoot } from './checkbox-root.svelte';
 export { checkboxAnatomy } from './checkbox.anatomy';
 export { CheckboxProvider, useCheckboxContext } from './use-checkbox-context';
-export { CheckboxGroupProvider, useCheckboxGroupContext } from './use-checkbox-group-context';
+export { useCheckboxGroupContext } from './use-checkbox-group-context';
 export { useCheckboxGroup } from './use-checkbox-group.svelte';
 export { useCheckbox } from './use-checkbox.svelte';
 export * as Checkbox from './checkbox';

package/dist/components/checkbox/use-checkbox-group-context.d.ts

@@ -1,4 +1,4 @@
 import type { UseCheckboxGroupReturn } from './use-checkbox-group.svelte';
 export interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {
 }
-export declare const CheckboxGroupProvider: (opts: UseCheckboxGroupContext) => void, useCheckboxGroupContext: (fallback?: UseCheckboxGroupContext | undefined) => UseCheckboxGroupContext;
+export declare const CheckboxGroupContextProvider: (opts: UseCheckboxGroupContext) => void, useCheckboxGroupContext: (fallback?: UseCheckboxGroupContext | undefined) => UseCheckboxGroupContext;

package/dist/components/checkbox/use-checkbox-group-context.js

@@ -1,5 +1,5 @@
 import { createContext } from '../../utils/create-context';
-export const [CheckboxGroupProvider, useCheckboxGroupContext] = createContext({
+export const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
     name: 'CheckboxGroupContext',
     strict: false,
 });

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

@@ -1,4 +1,4 @@
 export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection';
 export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection';
 export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection';
-export { useListCollection, type UseListCollectionProps } from './use-list-collection.svelte';
+export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn, } from './use-list-collection.svelte';

package/dist/components/collection/index.js

@@ -1,4 +1,4 @@
 export { createGridCollection } from './grid-collection';
 export { createListCollection, } from './list-collection';
 export { createFileTreeCollection, createTreeCollection, } from './tree-collection';
-export { useListCollection } from './use-list-collection.svelte';
+export { useListCollection, } from './use-list-collection.svelte';

package/dist/components/file-upload/file-upload.d.ts

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails } from '@zag-js/file-upload';
+export type { FileAcceptDetails, FileChangeDetails, FileRejectDetails, FileValidateDetails, FileError, FileMimeType, FileRejection, } from '@zag-js/file-upload';
 export { default as ClearTrigger, type FileUploadClearTriggerBaseProps as ClearTriggerBaseProps, type FileUploadClearTriggerProps as ClearTriggerProps, } from './file-upload-clear-trigger.svelte';
 export { default as Context, type FileUploadContextProps as ContextProps } from './file-upload-context.svelte';
 export { default as Dropzone, type FileUploadDropzoneBaseProps as DropzoneBaseProps, type FileUploadDropzoneProps as DropzoneProps, } from './file-upload-dropzone.svelte';

package/dist/components/file-upload/index.d.ts

@@ -1,4 +1,4 @@
-export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, } from '@zag-js/file-upload';
+export type { FileAcceptDetails as FileUploadFileAcceptDetails, FileChangeDetails as FileUploadFileChangeDetails, FileRejectDetails as FileUploadFileRejectDetails, FileValidateDetails as FileUploadFileValidateDetails, FileError as FileUploadFileError, FileMimeType as FileUploadFileMimeType, FileRejection as FileUploadFileRejection, } from '@zag-js/file-upload';
 export { default as FileUploadClearTrigger, type FileUploadClearTriggerBaseProps, type FileUploadClearTriggerProps, } from './file-upload-clear-trigger.svelte';
 export { default as FileUploadContext, type FileUploadContextProps } from './file-upload-context.svelte';
 export { default as FileUploadDropzone, type FileUploadDropzoneBaseProps, type FileUploadDropzoneProps, } from './file-upload-dropzone.svelte';

package/dist/components/portal/portal.svelte

@@ -1,7 +1,18 @@
 <script module lang="ts">
   import type { Snippet } from 'svelte'
+
   export interface PortalProps {
+    /**
+     * If true, the portal will not be rendered.
+     */
+    disabled?: boolean
+    /**
+     * The container to render the portal into.
+     */
     container?: HTMLElement
+    /**
+     * The children to render in the portal.
+     */
     children: Snippet
   }
 </script>
@@ -13,13 +24,37 @@
   import { getAllContexts, mount, unmount } from 'svelte'
   import PortalConsumer from './portal-consumer.svelte'
 
-  const { container = globalThis?.document?.body, children }: PortalProps = $props()
+  const { container = globalThis?.document?.body, children, disabled = false }: PortalProps = $props()
 
   const context = getAllContexts()
 
+  let instance: ReturnType<typeof mount> | null = null
+
+  const unmountInstance = () => {
+    if (instance) {
+      unmount(instance)
+      instance = null
+    }
+  }
+
   $effect(() => {
-    mount(PortalConsumer, { target: container, props: { children }, context })
+    if (disabled || !container) {
+      unmountInstance()
+      return
+    }
+
+    instance = mount(PortalConsumer, {
+      target: container,
+      props: { children },
+      context,
+    })
 
-    return () => unmount(PortalConsumer)
+    return () => {
+      unmountInstance()
+    }
   })
 </script>
+
+{#if disabled}
+  {@render children?.()}
+{/if}

package/dist/components/portal/portal.svelte.d.ts

@@ -1,6 +1,16 @@
 import type { Snippet } from 'svelte';
 export interface PortalProps {
+    /**
+     * If true, the portal will not be rendered.
+     */
+    disabled?: boolean;
+    /**
+     * The container to render the portal into.
+     */
     container?: HTMLElement;
+    /**
+     * The children to render in the portal.
+     */
     children: Snippet;
 }
 declare const Portal: import("svelte").Component<PortalProps, {}, "">;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "accordion",
@@ -120,84 +120,84 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.18.2",
-    "@zag-js/angle-slider": "1.18.2",
-    "@zag-js/anatomy": "1.18.2",
-    "@zag-js/auto-resize": "1.18.2",
-    "@zag-js/avatar": "1.18.2",
-    "@zag-js/carousel": "1.18.2",
-    "@zag-js/checkbox": "1.18.2",
-    "@zag-js/clipboard": "1.18.2",
-    "@zag-js/collapsible": "1.18.2",
-    "@zag-js/collection": "1.18.2",
-    "@zag-js/color-picker": "1.18.2",
-    "@zag-js/color-utils": "1.18.2",
-    "@zag-js/combobox": "1.18.2",
-    "@zag-js/core": "1.18.2",
-    "@zag-js/date-picker": "1.18.2",
-    "@zag-js/date-utils": "1.18.2",
-    "@zag-js/dialog": "1.18.2",
-    "@zag-js/dom-query": "1.18.2",
-    "@zag-js/editable": "1.18.2",
-    "@zag-js/file-upload": "1.18.2",
-    "@zag-js/file-utils": "1.18.2",
-    "@zag-js/focus-trap": "1.18.2",
-    "@zag-js/floating-panel": "1.18.2",
-    "@zag-js/highlight-word": "1.18.2",
-    "@zag-js/hover-card": "1.18.2",
-    "@zag-js/i18n-utils": "1.18.2",
-    "@zag-js/listbox": "1.18.2",
-    "@zag-js/menu": "1.18.2",
-    "@zag-js/number-input": "1.18.2",
-    "@zag-js/pagination": "1.18.2",
-    "@zag-js/password-input": "1.18.2",
-    "@zag-js/pin-input": "1.18.2",
-    "@zag-js/popover": "1.18.2",
-    "@zag-js/presence": "1.18.2",
-    "@zag-js/progress": "1.18.2",
-    "@zag-js/qr-code": "1.18.2",
-    "@zag-js/radio-group": "1.18.2",
-    "@zag-js/rating-group": "1.18.2",
-    "@zag-js/svelte": "1.18.2",
-    "@zag-js/select": "1.18.2",
-    "@zag-js/signature-pad": "1.18.2",
-    "@zag-js/slider": "1.18.2",
-    "@zag-js/splitter": "1.18.2",
-    "@zag-js/steps": "1.18.2",
-    "@zag-js/switch": "1.18.2",
-    "@zag-js/tabs": "1.18.2",
-    "@zag-js/tags-input": "1.18.2",
-    "@zag-js/time-picker": "1.18.2",
-    "@zag-js/timer": "1.18.2",
-    "@zag-js/toast": "1.18.2",
-    "@zag-js/toggle": "1.18.2",
-    "@zag-js/toggle-group": "1.18.2",
-    "@zag-js/tooltip": "1.18.2",
-    "@zag-js/tour": "1.18.2",
-    "@zag-js/tree-view": "1.18.2",
-    "@zag-js/types": "1.18.2",
-    "@zag-js/utils": "1.18.2"
+    "@zag-js/accordion": "1.18.4",
+    "@zag-js/angle-slider": "1.18.4",
+    "@zag-js/anatomy": "1.18.4",
+    "@zag-js/auto-resize": "1.18.4",
+    "@zag-js/avatar": "1.18.4",
+    "@zag-js/carousel": "1.18.4",
+    "@zag-js/checkbox": "1.18.4",
+    "@zag-js/clipboard": "1.18.4",
+    "@zag-js/collapsible": "1.18.4",
+    "@zag-js/collection": "1.18.4",
+    "@zag-js/color-picker": "1.18.4",
+    "@zag-js/color-utils": "1.18.4",
+    "@zag-js/combobox": "1.18.4",
+    "@zag-js/core": "1.18.4",
+    "@zag-js/date-picker": "1.18.4",
+    "@zag-js/date-utils": "1.18.4",
+    "@zag-js/dialog": "1.18.4",
+    "@zag-js/dom-query": "1.18.4",
+    "@zag-js/editable": "1.18.4",
+    "@zag-js/file-upload": "1.18.4",
+    "@zag-js/file-utils": "1.18.4",
+    "@zag-js/focus-trap": "1.18.4",
+    "@zag-js/floating-panel": "1.18.4",
+    "@zag-js/highlight-word": "1.18.4",
+    "@zag-js/hover-card": "1.18.4",
+    "@zag-js/i18n-utils": "1.18.4",
+    "@zag-js/listbox": "1.18.4",
+    "@zag-js/menu": "1.18.4",
+    "@zag-js/number-input": "1.18.4",
+    "@zag-js/pagination": "1.18.4",
+    "@zag-js/password-input": "1.18.4",
+    "@zag-js/pin-input": "1.18.4",
+    "@zag-js/popover": "1.18.4",
+    "@zag-js/presence": "1.18.4",
+    "@zag-js/progress": "1.18.4",
+    "@zag-js/qr-code": "1.18.4",
+    "@zag-js/radio-group": "1.18.4",
+    "@zag-js/rating-group": "1.18.4",
+    "@zag-js/svelte": "1.18.4",
+    "@zag-js/select": "1.18.4",
+    "@zag-js/signature-pad": "1.18.4",
+    "@zag-js/slider": "1.18.4",
+    "@zag-js/splitter": "1.18.4",
+    "@zag-js/steps": "1.18.4",
+    "@zag-js/switch": "1.18.4",
+    "@zag-js/tabs": "1.18.4",
+    "@zag-js/tags-input": "1.18.4",
+    "@zag-js/time-picker": "1.18.4",
+    "@zag-js/timer": "1.18.4",
+    "@zag-js/toast": "1.18.4",
+    "@zag-js/toggle": "1.18.4",
+    "@zag-js/toggle-group": "1.18.4",
+    "@zag-js/tooltip": "1.18.4",
+    "@zag-js/tour": "1.18.4",
+    "@zag-js/tree-view": "1.18.4",
+    "@zag-js/types": "1.18.4",
+    "@zag-js/utils": "1.18.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "9.0.15",
-    "@storybook/sveltekit": "9.0.15",
+    "@storybook/addon-a11y": "9.0.17",
+    "@storybook/sveltekit": "9.0.17",
     "@sveltejs/adapter-auto": "6.0.1",
-    "@sveltejs/kit": "2.22.2",
-    "@sveltejs/package": "2.3.12",
-    "@sveltejs/vite-plugin-svelte": "5.1.0",
-    "@tanstack/svelte-form": "1.12.4",
+    "@sveltejs/kit": "2.25.0",
+    "@sveltejs/package": "2.4.0",
+    "@sveltejs/vite-plugin-svelte": "6.1.0",
+    "@tanstack/svelte-form": "1.14.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "14.6.1",
     "@vitest/coverage-v8": "3.2.4",
     "clean-package": "2.2.0",
     "lucide-svelte": "0.525.0",
-    "storybook": "9.0.15",
-    "svelte": "5.35.2",
-    "svelte-check": "4.2.2",
+    "storybook": "9.0.17",
+    "svelte": "5.36.7",
+    "svelte-check": "4.3.0",
     "tslib": "2.8.1",
     "typescript": "5.8.3",
-    "vite": "7.0.2",
+    "vite": "7.0.5",
     "vitest": "3.2.4"
   },
   "peerDependencies": {