@ark-ui/svelte 5.0.0-0 → 5.0.0

package/dist/components/tree-view/index.d.ts

@@ -13,6 +13,8 @@ export { default as TreeViewItemIndicator, type TreeViewItemIndicatorBaseProps,
 export { default as TreeViewItemText, type TreeViewItemTextBaseProps, type TreeViewItemTextProps, } from './tree-view-item-text.svelte';
 export { default as TreeViewLabel, type TreeViewLabelBaseProps, type TreeViewLabelProps, } from './tree-view-label.svelte';
 export { default as TreeViewNodeContext, type TreeViewNodeContextProps } from './tree-view-node-context.svelte';
+export { default as TreeViewNodeCheckbox, type TreeViewNodeCheckboxBaseProps, type TreeViewNodeCheckboxProps, } from './tree-view-node-checkbox.svelte';
+export { default as TreeViewNodeCheckboxIndicator, type TreeViewNodeCheckboxIndicatorBaseProps, type TreeViewNodeCheckboxIndicatorProps, } from './tree-view-node-checkbox-indicator.svelte';
 export { default as TreeViewNodeProvider, type TreeViewNodeProviderBaseProps, type TreeViewNodeProviderProps, } from './tree-view-node-provider.svelte';
 export { default as TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootProps } from './tree-view-root.svelte';
 export { default as TreeViewRootProvider, type TreeViewRootProviderBaseProps, type TreeViewRootProviderProps, } from './tree-view-root-provider.svelte';

package/dist/components/tree-view/index.js

@@ -12,6 +12,8 @@ export { default as TreeViewItemIndicator, } from './tree-view-item-indicator.sv
 export { default as TreeViewItemText, } from './tree-view-item-text.svelte';
 export { default as TreeViewLabel, } from './tree-view-label.svelte';
 export { default as TreeViewNodeContext } from './tree-view-node-context.svelte';
+export { default as TreeViewNodeCheckbox, } from './tree-view-node-checkbox.svelte';
+export { default as TreeViewNodeCheckboxIndicator, } from './tree-view-node-checkbox-indicator.svelte';
 export { default as TreeViewNodeProvider, } from './tree-view-node-provider.svelte';
 export { default as TreeViewRoot } from './tree-view-root.svelte';
 export { default as TreeViewRootProvider, } from './tree-view-root-provider.svelte';

package/dist/components/tree-view/tree-view-node-checkbox-indicator.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+
+  export interface TreeViewNodeCheckboxIndicatorBaseProps {
+    children?: Snippet
+    indeterminate?: Snippet
+    fallback?: Snippet
+  }
+  export interface TreeViewNodeCheckboxIndicatorProps extends TreeViewNodeCheckboxIndicatorBaseProps {}
+</script>
+
+<script lang="ts">
+  import { useTreeViewNodeContext } from './use-tree-view-node-context'
+
+  const { children, indeterminate, fallback }: TreeViewNodeCheckboxIndicatorProps = $props()
+
+  const nodeState = useTreeViewNodeContext()
+  const checkedState = $derived(nodeState().checked)
+</script>
+
+{#if checkedState === 'indeterminate' && indeterminate}
+  {@render indeterminate()}
+{:else if checkedState === true && children}
+  {@render children()}
+{:else if fallback}
+  {@render fallback()}
+{/if}

package/dist/components/tree-view/tree-view-node-checkbox-indicator.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+export interface TreeViewNodeCheckboxIndicatorBaseProps {
+    children?: Snippet;
+    indeterminate?: Snippet;
+    fallback?: Snippet;
+}
+export interface TreeViewNodeCheckboxIndicatorProps extends TreeViewNodeCheckboxIndicatorBaseProps {
+}
+declare const TreeViewNodeCheckboxIndicator: import("svelte").Component<TreeViewNodeCheckboxIndicatorProps, {}, "">;
+type TreeViewNodeCheckboxIndicator = ReturnType<typeof TreeViewNodeCheckboxIndicator>;
+export default TreeViewNodeCheckboxIndicator;

package/dist/components/tree-view/tree-view-node-checkbox.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface TreeViewNodeCheckboxBaseProps extends PolymorphicProps<'span'> {}
+  export interface TreeViewNodeCheckboxProps extends Assign<HTMLProps<'span'>, TreeViewNodeCheckboxBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useTreeViewContext } from './use-tree-view-context'
+  import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context'
+
+  const props: TreeViewNodeCheckboxProps = $props()
+
+  const treeView = useTreeViewContext()
+  const nodeProps = useTreeViewNodePropsContext()
+
+  const mergedProps = $derived(mergeProps(treeView().getNodeCheckboxProps(nodeProps()), props))
+</script>
+
+<Ark as="span" {...mergedProps} />

package/dist/components/tree-view/tree-view-node-checkbox.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface TreeViewNodeCheckboxBaseProps extends PolymorphicProps<'span'> {
+}
+export interface TreeViewNodeCheckboxProps extends Assign<HTMLProps<'span'>, TreeViewNodeCheckboxBaseProps> {
+}
+declare const TreeViewNodeCheckbox: import("svelte").Component<TreeViewNodeCheckboxProps, {}, "">;
+type TreeViewNodeCheckbox = ReturnType<typeof TreeViewNodeCheckbox>;
+export default TreeViewNodeCheckbox;

package/dist/components/tree-view/tree-view-root.svelte

@@ -27,6 +27,7 @@
     expandedValue = $bindable<string[]>(),
     selectedValue = $bindable<string[]>(),
     focusedValue = $bindable<string>(),
+    checkedValue = $bindable<string[]>(),
     ...props
   }: TreeViewRootProps<T> = $props()
 
@@ -35,24 +36,29 @@
 
   const id = $props.id()
 
-  const machineProps = $derived.by(() => ({
+  const machineProps = $derived.by<UseTreeViewProps<T>>(() => ({
     ...useTreeViewProps,
     id: useTreeViewProps.id ?? id,
     selectedValue,
     expandedValue,
     focusedValue,
-    onExpandedChange: (details: any) => {
+    checkedValue,
+    onExpandedChange: (details) => {
       useTreeViewProps.onExpandedChange?.(details)
       expandedValue = details.expandedValue
     },
-    onFocusChange: (details: any) => {
+    onFocusChange: (details) => {
       useTreeViewProps.onFocusChange?.(details)
       focusedValue = details.focusedValue
     },
-    onSelectionChange: (details: any) => {
+    onSelectionChange: (details) => {
       useTreeViewProps.onSelectionChange?.(details)
       selectedValue = details.selectedValue
     },
+    onCheckedChange: (details) => {
+      useTreeViewProps.onCheckedChange?.(details)
+      checkedValue = details.checkedValue
+    },
   }))
 
   const treeView = useTreeView(() => machineProps)

package/dist/components/tree-view/tree-view-root.svelte.d.ts

@@ -10,7 +10,7 @@ declare class __sveltets_Render<T extends TreeNode> {
     props(): TreeViewRootProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "focusedValue" | "expandedValue" | "selectedValue";
+    bindings(): "focusedValue" | "expandedValue" | "selectedValue" | "checkedValue";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/tree-view/tree-view-split-props.d.ts

@@ -1,3 +1,3 @@
 import type { TreeNode } from '../collection';
 import type { UseTreeViewProps } from './use-tree-view.svelte';
-export declare function splitTreeViewProps<T extends UseTreeViewProps<TreeNode>>(props: T): [UseTreeViewProps<any>, Omit<T, "ids" | "id" | "onFocusChange" | "collection" | "focusedValue" | "selectionMode" | "typeahead" | "expandedValue" | "defaultExpandedValue" | "selectedValue" | "defaultSelectedValue" | "onExpandedChange" | "onSelectionChange" | "onLoadChildrenComplete" | "expandOnClick" | "loadChildren">];
+export declare function splitTreeViewProps<T extends UseTreeViewProps<TreeNode>>(props: T): [UseTreeViewProps<any>, Omit<T, "ids" | "id" | "onFocusChange" | "onCheckedChange" | "collection" | "focusedValue" | "defaultFocusedValue" | "selectionMode" | "typeahead" | "expandedValue" | "defaultExpandedValue" | "selectedValue" | "defaultSelectedValue" | "defaultCheckedValue" | "checkedValue" | "onExpandedChange" | "onSelectionChange" | "onLoadChildrenComplete" | "onLoadChildrenError" | "expandOnClick" | "loadChildren">];

package/dist/components/tree-view/tree-view-split-props.js

@@ -2,21 +2,26 @@ import { createSplitProps } from '../../utils/create-split-props';
 const splitFn = createSplitProps();
 export function splitTreeViewProps(props) {
     return splitFn(props, [
+        'checkedValue',
         'collection',
+        'defaultCheckedValue',
         'defaultExpandedValue',
+        'defaultFocusedValue',
         'defaultSelectedValue',
         'expandedValue',
         'expandOnClick',
         'focusedValue',
         'id',
         'ids',
+        'loadChildren',
+        'onCheckedChange',
         'onExpandedChange',
         'onFocusChange',
+        'onLoadChildrenComplete',
+        'onLoadChildrenError',
         'onSelectionChange',
         'selectedValue',
         'selectionMode',
         'typeahead',
-        'loadChildren',
-        'onLoadChildrenComplete',
     ]);
 }

package/dist/components/tree-view/tree-view.d.ts

@@ -11,6 +11,8 @@ export { default as Item, type TreeViewItemBaseProps as ItemBaseProps, type Tree
 export { default as ItemIndicator, type TreeViewItemIndicatorBaseProps as ItemIndicatorBaseProps, type TreeViewItemIndicatorProps as ItemIndicatorProps, } from './tree-view-item-indicator.svelte';
 export { default as ItemText, type TreeViewItemTextBaseProps as ItemTextBaseProps, type TreeViewItemTextProps as ItemTextProps, } from './tree-view-item-text.svelte';
 export { default as Label, type TreeViewLabelBaseProps as LabelBaseProps, type TreeViewLabelProps as LabelProps, } from './tree-view-label.svelte';
+export { default as NodeCheckbox, type TreeViewNodeCheckboxBaseProps as NodeCheckboxBaseProps, type TreeViewNodeCheckboxProps as NodeCheckboxProps, } from './tree-view-node-checkbox.svelte';
+export { default as NodeCheckboxIndicator, type TreeViewNodeCheckboxIndicatorBaseProps as NodeCheckboxIndicatorBaseProps, type TreeViewNodeCheckboxIndicatorProps as NodeCheckboxIndicatorProps, } from './tree-view-node-checkbox-indicator.svelte';
 export { default as NodeContext, type TreeViewNodeContextProps as NodeContextProps, } from './tree-view-node-context.svelte';
 export { default as NodeProvider, type TreeViewNodeProviderBaseProps as NodeProviderBaseProps, type TreeViewNodeProviderProps as NodeProviderProps, } from './tree-view-node-provider.svelte';
 export { default as Root, type TreeViewRootBaseProps as RootBaseProps, type TreeViewRootProps as RootProps, } from './tree-view-root.svelte';

package/dist/components/tree-view/tree-view.js

@@ -10,6 +10,8 @@ export { default as Item, } from './tree-view-item.svelte';
 export { default as ItemIndicator, } from './tree-view-item-indicator.svelte';
 export { default as ItemText, } from './tree-view-item-text.svelte';
 export { default as Label, } from './tree-view-label.svelte';
+export { default as NodeCheckbox, } from './tree-view-node-checkbox.svelte';
+export { default as NodeCheckboxIndicator, } from './tree-view-node-checkbox-indicator.svelte';
 export { default as NodeContext, } from './tree-view-node-context.svelte';
 export { default as NodeProvider, } from './tree-view-node-provider.svelte';
 export { default as Root, } from './tree-view-root.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/svelte",
   "type": "module",
-  "version": "5.0.0-0",
+  "version": "5.0.0",
   "description": "A collection of unstyled, accessible UI components for Svelte",
   "keywords": [
     "avatar",
@@ -81,63 +81,63 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.15.7",
-    "@zag-js/angle-slider": "1.15.7",
-    "@zag-js/anatomy": "1.15.7",
-    "@zag-js/auto-resize": "1.15.7",
-    "@zag-js/avatar": "1.15.7",
-    "@zag-js/carousel": "1.15.7",
-    "@zag-js/checkbox": "1.15.7",
-    "@zag-js/clipboard": "1.15.7",
-    "@zag-js/collapsible": "1.15.7",
-    "@zag-js/collection": "1.15.7",
-    "@zag-js/color-picker": "1.15.7",
-    "@zag-js/color-utils": "1.15.7",
-    "@zag-js/combobox": "1.15.7",
-    "@zag-js/core": "1.15.7",
-    "@zag-js/date-picker": "1.15.7",
-    "@zag-js/date-utils": "1.15.7",
-    "@zag-js/dialog": "1.15.7",
-    "@zag-js/dom-query": "1.15.7",
-    "@zag-js/editable": "1.15.7",
-    "@zag-js/file-upload": "1.15.7",
-    "@zag-js/file-utils": "1.15.7",
-    "@zag-js/focus-trap": "1.15.7",
-    "@zag-js/floating-panel": "1.15.7",
-    "@zag-js/highlight-word": "1.15.7",
-    "@zag-js/hover-card": "1.15.7",
-    "@zag-js/i18n-utils": "1.15.7",
-    "@zag-js/listbox": "1.15.7",
-    "@zag-js/menu": "1.15.7",
-    "@zag-js/number-input": "1.15.7",
-    "@zag-js/pagination": "1.15.7",
-    "@zag-js/password-input": "1.15.7",
-    "@zag-js/pin-input": "1.15.7",
-    "@zag-js/popover": "1.15.7",
-    "@zag-js/presence": "1.15.7",
-    "@zag-js/progress": "1.15.7",
-    "@zag-js/qr-code": "1.15.7",
-    "@zag-js/radio-group": "1.15.7",
-    "@zag-js/rating-group": "1.15.7",
-    "@zag-js/svelte": "1.15.7",
-    "@zag-js/select": "1.15.7",
-    "@zag-js/signature-pad": "1.15.7",
-    "@zag-js/slider": "1.15.7",
-    "@zag-js/splitter": "1.15.7",
-    "@zag-js/steps": "1.15.7",
-    "@zag-js/switch": "1.15.7",
-    "@zag-js/tabs": "1.15.7",
-    "@zag-js/tags-input": "1.15.7",
-    "@zag-js/time-picker": "1.15.7",
-    "@zag-js/timer": "1.15.7",
-    "@zag-js/toast": "1.15.7",
-    "@zag-js/toggle": "1.15.7",
-    "@zag-js/toggle-group": "1.15.7",
-    "@zag-js/tooltip": "1.15.7",
-    "@zag-js/tour": "1.15.7",
-    "@zag-js/tree-view": "1.15.7",
-    "@zag-js/types": "1.15.7",
-    "@zag-js/utils": "1.15.7"
+    "@zag-js/accordion": "1.17.0",
+    "@zag-js/angle-slider": "1.17.0",
+    "@zag-js/anatomy": "1.17.0",
+    "@zag-js/auto-resize": "1.17.0",
+    "@zag-js/avatar": "1.17.0",
+    "@zag-js/carousel": "1.17.0",
+    "@zag-js/checkbox": "1.17.0",
+    "@zag-js/clipboard": "1.17.0",
+    "@zag-js/collapsible": "1.17.0",
+    "@zag-js/collection": "1.17.0",
+    "@zag-js/color-picker": "1.17.0",
+    "@zag-js/color-utils": "1.17.0",
+    "@zag-js/combobox": "1.17.0",
+    "@zag-js/core": "1.17.0",
+    "@zag-js/date-picker": "1.17.0",
+    "@zag-js/date-utils": "1.17.0",
+    "@zag-js/dialog": "1.17.0",
+    "@zag-js/dom-query": "1.17.0",
+    "@zag-js/editable": "1.17.0",
+    "@zag-js/file-upload": "1.17.0",
+    "@zag-js/file-utils": "1.17.0",
+    "@zag-js/focus-trap": "1.17.0",
+    "@zag-js/floating-panel": "1.17.0",
+    "@zag-js/highlight-word": "1.17.0",
+    "@zag-js/hover-card": "1.17.0",
+    "@zag-js/i18n-utils": "1.17.0",
+    "@zag-js/listbox": "1.17.0",
+    "@zag-js/menu": "1.17.0",
+    "@zag-js/number-input": "1.17.0",
+    "@zag-js/pagination": "1.17.0",
+    "@zag-js/password-input": "1.17.0",
+    "@zag-js/pin-input": "1.17.0",
+    "@zag-js/popover": "1.17.0",
+    "@zag-js/presence": "1.17.0",
+    "@zag-js/progress": "1.17.0",
+    "@zag-js/qr-code": "1.17.0",
+    "@zag-js/radio-group": "1.17.0",
+    "@zag-js/rating-group": "1.17.0",
+    "@zag-js/svelte": "1.17.0",
+    "@zag-js/select": "1.17.0",
+    "@zag-js/signature-pad": "1.17.0",
+    "@zag-js/slider": "1.17.0",
+    "@zag-js/splitter": "1.17.0",
+    "@zag-js/steps": "1.17.0",
+    "@zag-js/switch": "1.17.0",
+    "@zag-js/tabs": "1.17.0",
+    "@zag-js/tags-input": "1.17.0",
+    "@zag-js/time-picker": "1.17.0",
+    "@zag-js/timer": "1.17.0",
+    "@zag-js/toast": "1.17.0",
+    "@zag-js/toggle": "1.17.0",
+    "@zag-js/toggle-group": "1.17.0",
+    "@zag-js/tooltip": "1.17.0",
+    "@zag-js/tour": "1.17.0",
+    "@zag-js/tree-view": "1.17.0",
+    "@zag-js/types": "1.17.0",
+    "@zag-js/utils": "1.17.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "9.0.10",