ui-ingredients 0.0.23 → 0.0.25

package/dist/tree-view/branch-indicator.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BranchIndicator: $$__sveltets_2_IsomorphicComponent<TreeViewBranchIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type BranchIndicator = InstanceType<typeof BranchIndicator>;
+export default BranchIndicator;

package/dist/tree-view/branch-text.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface TreeViewBranchTextProps extends HtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
+
+  let {children, ...props}: TreeViewBranchTextProps = $props();
+
+  let treeView = treeViewContext.get();
+  let branchProps = treeViewBranchPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, treeView.getBranchTextProps(branchProps)));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/tree-view/branch-text.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BranchText: $$__sveltets_2_IsomorphicComponent<TreeViewBranchTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type BranchText = InstanceType<typeof BranchText>;
+export default BranchText;

package/dist/tree-view/branch-trigger.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface TreeViewBranchTriggerProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
+
+  let {children, ...props}: TreeViewBranchTriggerProps = $props();
+
+  let treeView = treeViewContext.get();
+  let branchProps = treeViewBranchPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, treeView.getBranchTriggerProps(branchProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/tree-view/branch-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BranchTrigger: $$__sveltets_2_IsomorphicComponent<TreeViewBranchTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type BranchTrigger = InstanceType<typeof BranchTrigger>;
+export default BranchTrigger;

package/dist/tree-view/branch.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {BranchProps, BranchState} from '@zag-js/tree-view';
+  import type {Snippet} from 'svelte';
+
+  export interface TreeViewBranchProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, BranchProps> {
+    children?: Snippet<[state: BranchState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
+
+  let {
+    /**/
+    depth,
+    value,
+    disabled,
+    children,
+    ...props
+  }: TreeViewBranchProps = $props();
+
+  let treeView = treeViewContext.get();
+  let branchProps: BranchProps = $derived({
+    depth,
+    value,
+    disabled,
+  });
+
+  let attrs = $derived(mergeProps(props, treeView.getBranchProps(branchProps)));
+  let state = $derived(treeView.getBranchState(branchProps));
+
+  treeViewBranchPropsContext.set(() => branchProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

package/dist/tree-view/branch.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Branch: $$__sveltets_2_IsomorphicComponent<TreeViewBranchProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Branch = InstanceType<typeof Branch>;
+export default Branch;

package/dist/tree-view/context.svelte.d.ts

@@ -0,0 +1,6 @@
+import { Context } from '../utils.svelte.js';
+import type { BranchProps, ItemProps } from '@zag-js/tree-view';
+import type { CreateTreeViewReturn } from './create-tree-view.svelte.js';
+export declare const treeViewContext: Context<CreateTreeViewReturn>;
+export declare const treeViewItemPropsContext: Context<ItemProps>;
+export declare const treeViewBranchPropsContext: Context<BranchProps>;

package/dist/tree-view/context.svelte.js

@@ -0,0 +1,4 @@
+import { Context } from '../utils.svelte.js';
+export const treeViewContext = new Context('TreeView');
+export const treeViewItemPropsContext = new Context('TreeViewItem');
+export const treeViewBranchPropsContext = new Context('TreeViewBranch');

package/dist/tree-view/create-tree-view.svelte.d.ts

@@ -0,0 +1,7 @@
+import * as treeView from '@zag-js/tree-view';
+export interface CreateTreeViewProps extends Omit<treeView.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
+}
+export interface CreateTreeViewReturn extends treeView.Api {
+}
+export declare function createTreeView(props: CreateTreeViewProps): any;

package/dist/tree-view/create-tree-view.svelte.js

@@ -0,0 +1,17 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import * as treeView from '@zag-js/tree-view';
+export function createTreeView(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const [state, send] = useMachine(treeView.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: locale?.dir,
+        getRootNode: environment?.getRootNode,
+    }));
+    const api = $derived(reflect(() => treeView.connect(state, send, normalizeProps)));
+    return api;
+}

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

@@ -0,0 +1,13 @@
+export * as TreeView from './tree-view.js';
+export type { TreeViewBranchContentProps } from './branch-content.svelte';
+export type { TreeViewBranchControlProps } from './branch-control.svelte';
+export type { TreeViewBranchIndicatorProps } from './branch-indicator.svelte';
+export type { TreeViewBranchTextProps } from './branch-text.svelte';
+export type { TreeViewBranchTriggerProps } from './branch-trigger.svelte';
+export type { TreeViewBranchProps } from './branch.svelte';
+export type { TreeViewItemIndicatorProps } from './item-indicator.svelte';
+export type { TreeViewItemTextProps } from './item-text.svelte';
+export type { TreeViewItemProps } from './item.svelte';
+export type { TreeViewLabelProps } from './label.svelte';
+export type { TreeViewProps } from './root.svelte';
+export type { TreeViewTreeProps } from './tree.svelte';

package/dist/tree-view/index.js

@@ -0,0 +1 @@
+export * as TreeView from './tree-view.js';

package/dist/tree-view/item-indicator.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface TreeViewItemIndicatorProps extends HtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: TreeViewItemIndicatorProps = $props();
+
+  let treeView = treeViewContext.get();
+  let itemProps = treeViewItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, treeView.getItemIndicatorProps(itemProps)));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/tree-view/item-indicator.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ItemIndicator: $$__sveltets_2_IsomorphicComponent<TreeViewItemIndicatorProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemIndicator = InstanceType<typeof ItemIndicator>;
+export default ItemIndicator;

package/dist/tree-view/item-text.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface TreeViewItemTextProps extends HtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: TreeViewItemTextProps = $props();
+
+  let treeView = treeViewContext.get();
+  let itemProps = treeViewItemPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, treeView.getItemTextProps(itemProps)));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/tree-view/item-text.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ItemText: $$__sveltets_2_IsomorphicComponent<TreeViewItemTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ItemText = InstanceType<typeof ItemText>;
+export default ItemText;

package/dist/tree-view/item.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/tree-view';
+  import type {Snippet} from 'svelte';
+
+  export interface TreeViewItemProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
+    children?: Snippet<[state: ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
+
+  let {
+    /**/
+    depth,
+    value,
+    disabled,
+    children,
+    ...props
+  }: TreeViewItemProps = $props();
+
+  let treeView = treeViewContext.get();
+  let itemProps: ItemProps = $derived({
+    depth,
+    value,
+    disabled,
+  });
+
+  let attrs = $derived(mergeProps(props, treeView.getItemProps(itemProps)));
+  let state = $derived(treeView.getItemState(itemProps));
+
+  treeViewItemPropsContext.set(() => itemProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

package/dist/tree-view/item.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Item: $$__sveltets_2_IsomorphicComponent<TreeViewItemProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Item = InstanceType<typeof Item>;
+export default Item;

package/dist/tree-view/label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface TreeViewLabelProps extends HtmlProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {treeViewContext} from './context.svelte.js';
+
+  let {children, ...props}: TreeViewLabelProps = $props();
+
+  let treeView = treeViewContext.get();
+
+  let attrs = $derived(mergeProps(props, treeView.getLabelProps()));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/tree-view/label.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Label: $$__sveltets_2_IsomorphicComponent<TreeViewLabelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Label = InstanceType<typeof Label>;
+export default Label;

package/dist/tree-view/root.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {CreateTreeViewProps, CreateTreeViewReturn} from './create-tree-view.svelte.js';
+
+  export interface TreeViewProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTreeViewProps> {
+    children?: Snippet<[treeView: CreateTreeViewReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {treeViewContext} from './context.svelte.js';
+  import {createTreeView} from './create-tree-view.svelte.js';
+
+  let {
+    id,
+    ids,
+    typeahead,
+    focusedValue,
+    expandedValue,
+    expandOnClick,
+    selectedValue,
+    selectionMode,
+    onFocusChange,
+    onExpandedChange,
+    onSelectionChange,
+    children,
+    ...props
+  }: TreeViewProps = $props();
+
+  let treeView = createTreeView({
+    id,
+    ids,
+    typeahead,
+    focusedValue,
+    expandedValue,
+    expandOnClick,
+    selectedValue,
+    selectionMode,
+    onFocusChange,
+    onExpandedChange,
+    onSelectionChange,
+  });
+
+  let attrs = $derived(mergeProps(props, treeView.getRootProps()));
+
+  treeViewContext.set(treeView);
+</script>
+
+<div {...attrs}>
+  {@render children?.(treeView)}
+</div>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Root: $$__sveltets_2_IsomorphicComponent<TreeViewProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Root = InstanceType<typeof Root>;
+export default Root;

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

@@ -0,0 +1,13 @@
+export { anatomy } from '@zag-js/tree-view';
+export { default as BranchContent } from './branch-content.svelte';
+export { default as BranchControl } from './branch-control.svelte';
+export { default as BranchIndicator } from './branch-indicator.svelte';
+export { default as BranchText } from './branch-text.svelte';
+export { default as BranchTrigger } from './branch-trigger.svelte';
+export { default as Branch } from './branch.svelte';
+export { default as ItemIndicator } from './item-indicator.svelte';
+export { default as ItemText } from './item-text.svelte';
+export { default as Item } from './item.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';
+export { default as Tree } from './tree.svelte';

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

@@ -0,0 +1,13 @@
+export { anatomy } from '@zag-js/tree-view';
+export { default as BranchContent } from './branch-content.svelte';
+export { default as BranchControl } from './branch-control.svelte';
+export { default as BranchIndicator } from './branch-indicator.svelte';
+export { default as BranchText } from './branch-text.svelte';
+export { default as BranchTrigger } from './branch-trigger.svelte';
+export { default as Branch } from './branch.svelte';
+export { default as ItemIndicator } from './item-indicator.svelte';
+export { default as ItemText } from './item-text.svelte';
+export { default as Item } from './item.svelte';
+export { default as Label } from './label.svelte';
+export { default as Root } from './root.svelte';
+export { default as Tree } from './tree.svelte';

package/dist/tree-view/tree.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
+
+  export interface TreeViewTreeProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {treeViewContext} from './context.svelte.js';
+
+  let {children, ...props}: TreeViewTreeProps = $props();
+
+  let treeView = treeViewContext.get();
+
+  let attrs = $derived(mergeProps(props, treeView.getTreeProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Tree: $$__sveltets_2_IsomorphicComponent<TreeViewTreeProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Tree = InstanceType<typeof Tree>;
+export default Tree;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",