ui-ingredients 0.0.25 → 0.0.26

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TreeViewBranchIndicatorProps extends HtmlProps<'span'> {}
+  export interface TreeViewBranchIndicatorProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
 
-  let {children, ...props}: TreeViewBranchIndicatorProps = $props();
+  let {asChild, children, ...props}: TreeViewBranchIndicatorProps = $props();
 
   let treeView = treeViewContext.get();
   let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, treeView.getBranchIndicatorProps(branchProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TreeViewBranchTextProps extends HtmlProps<'span'> {}
+  export interface TreeViewBranchTextProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
 
-  let {children, ...props}: TreeViewBranchTextProps = $props();
+  let {asChild, children, ...props}: TreeViewBranchTextProps = $props();
 
   let treeView = treeViewContext.get();
   let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, treeView.getBranchTextProps(branchProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TreeViewBranchTriggerProps extends HtmlProps<'div'> {}
+  export interface TreeViewBranchTriggerProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
 
-  let {children, ...props}: TreeViewBranchTriggerProps = $props();
+  let {asChild, children, ...props}: TreeViewBranchTriggerProps = $props();
 
   let treeView = treeViewContext.get();
   let branchProps = treeViewBranchPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, treeView.getBranchTriggerProps(branchProps)));
 </script>
 
-<div {...attrs}>
-  {@render children?.()}
-</div>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tree-view/branch.svelte

@@ -1,26 +1,20 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, 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> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: BranchState]>;
     children?: Snippet<[state: BranchState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewBranchPropsContext, treeViewContext} from './context.svelte.js';
 
-  let {
-    /**/
-    depth,
-    value,
-    disabled,
-    children,
-    ...props
-  }: TreeViewBranchProps = $props();
+  let {depth, value, disabled, asChild, children, ...props}: TreeViewBranchProps = $props();
 
   let treeView = treeViewContext.get();
   let branchProps: BranchProps = $derived({
@@ -35,6 +29,10 @@
   treeViewBranchPropsContext.set(() => branchProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TreeViewItemIndicatorProps extends HtmlProps<'span'> {}
+  export interface TreeViewItemIndicatorProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: TreeViewItemIndicatorProps = $props();
+  let {asChild, children, ...props}: TreeViewItemIndicatorProps = $props();
 
   let treeView = treeViewContext.get();
   let itemProps = treeViewItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, treeView.getItemIndicatorProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -1,14 +1,17 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TreeViewItemTextProps extends HtmlProps<'span'> {}
+  export interface TreeViewItemTextProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
 
-  let {children, ...props}: TreeViewItemTextProps = $props();
+  let {asChild, children, ...props}: TreeViewItemTextProps = $props();
 
   let treeView = treeViewContext.get();
   let itemProps = treeViewItemPropsContext.get();
@@ -16,6 +19,10 @@
   let attrs = $derived(mergeProps(props, treeView.getItemTextProps(itemProps)));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tree-view/item.svelte

@@ -1,25 +1,19 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, 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> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, state: ItemState]>;
     children?: Snippet<[state: ItemState]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
 
-  let {
-    /**/
-    depth,
-    value,
-    disabled,
-    children,
-    ...props
-  }: TreeViewItemProps = $props();
+  let {depth, value, disabled, asChild, children, ...props}: TreeViewItemProps = $props();
 
   let treeView = treeViewContext.get();
   let itemProps: ItemProps = $derived({
@@ -34,6 +28,10 @@
   treeViewItemPropsContext.set(() => itemProps);
 </script>
 
-<div {...attrs}>
-  {@render children?.(state)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, state)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(state)}
+  </div>
+{/if}

package/dist/tree-view/label.svelte

@@ -1,20 +1,27 @@
 <script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
+  import type {GenericHtmlProps, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
 
-  export interface TreeViewLabelProps extends HtmlProps<'span'> {}
+  export interface TreeViewLabelProps extends HtmlProps<'div'> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>]>;
+  }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewContext} from './context.svelte.js';
 
-  let {children, ...props}: TreeViewLabelProps = $props();
+  let {asChild, children, ...props}: TreeViewLabelProps = $props();
 
   let treeView = treeViewContext.get();
 
   let attrs = $derived(mergeProps(props, treeView.getLabelProps()));
 </script>
 
-<span {...attrs}>
-  {@render children?.()}
-</span>
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <div {...attrs}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/tree-view/root.svelte

@@ -1,16 +1,17 @@
 <script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
+  import type {Assign, GenericHtmlProps, 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> {
+    asChild?: Snippet<[attrs: Omit<GenericHtmlProps, 'children'>, treeView: CreateTreeViewReturn]>;
     children?: Snippet<[treeView: CreateTreeViewReturn]>;
   }
 </script>
 
 <script lang="ts">
-  import {mergeProps} from '@zag-js/svelte';
+  import {mergeProps} from '../utils.svelte.js';
   import {treeViewContext} from './context.svelte.js';
   import {createTreeView} from './create-tree-view.svelte.js';
 
@@ -26,6 +27,7 @@
     onFocusChange,
     onExpandedChange,
     onSelectionChange,
+    asChild,
     children,
     ...props
   }: TreeViewProps = $props();
@@ -44,11 +46,15 @@
     onSelectionChange,
   });
 
-  let attrs = $derived(mergeProps(props, treeView.getRootProps()));
+  let attrs = $derived(mergeProps<Record<string, any>>(props, treeView.getRootProps()));
 
   treeViewContext.set(treeView);
 </script>
 
-<div {...attrs}>
-  {@render children?.(treeView)}
-</div>
+{#if asChild}
+  {@render asChild(attrs, treeView)}
+{:else}
+  <div {...attrs}>
+    {@render children?.(treeView)}
+  </div>
+{/if}

package/dist/tree-view/tree.svelte

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

package/dist/types.d.ts

@@ -1,7 +1,8 @@
-import type { SvelteHTMLElements } from 'svelte/elements';
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 export type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
 type IntrinsicElements = keyof {
     [K in keyof SvelteHTMLElements as string extends K ? never : number extends K ? never : K]: string;
 };
 export type HtmlProps<T extends IntrinsicElements> = SvelteHTMLElements[T];
+export type GenericHtmlProps = HTMLAttributes<HTMLElement>;
 export {};

package/dist/utils.svelte.d.ts

@@ -1,9 +1,6 @@
 export declare const createUniqueId: () => string;
-export declare function ensureStyleIsString<T extends {
-    style?: null | string | Record<string, string | number>;
-}>(o: T): Omit<T, "style"> & {
-    style?: string | null;
-};
+export declare function isObject<T extends Record<string, unknown>>(value: unknown): value is T;
+export declare function mergeProps<T extends Record<string, any>>(...args: T[]): T;
 export declare class Context<T extends Record<string, any>> {
     private key;
     private strict;

package/dist/utils.svelte.js

@@ -1,20 +1,20 @@
-import { reflect } from '@zag-js/svelte';
+import { mergeProps as originalMergeProps, reflect } from '@zag-js/svelte';
 import { getContext, hasContext, setContext } from 'svelte';
 import { uid } from 'uid';
 export const createUniqueId = () => uid();
-function isObject(value) {
+export function isObject(value) {
     return Object.prototype.toString.call(value) === '[object Object]' && value === Object(value);
 }
-export function ensureStyleIsString(o) {
-    const c = { ...o };
-    if (isObject(c.style)) {
+export function mergeProps(...args) {
+    const r = originalMergeProps(...args);
+    if (r.style && isObject(r.style)) {
         let s = '';
-        for (const k in c.style) {
-            s += `${k}:${c.style[k]};`;
+        for (const k in r.style) {
+            s += `${k}:${r.style[k]};`;
         }
-        c.style = s;
+        r.style = s;
     }
-    return c;
+    return r;
 }
 export class Context {
     key;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -135,15 +135,16 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-vercel": "5.4.3",
-    "@sveltejs/kit": "2.5.24",
+    "@sveltejs/kit": "2.5.25",
     "@sveltejs/package": "2.3.4",
     "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
+    "@untitled-theme/icons-svelte": "0.10.7",
     "autoprefixer": "10.4.20",
     "globals": "15.9.0",
     "postcss": "8.4.41",
     "publint": "0.2.10",
     "release-it": "17.6.0",
-    "svelte": "5.0.0-next.236",
+    "svelte": "5.0.0-next.239",
     "svelte-check": "3.8.6",
     "tailwindcss": "3.4.10",
     "typescript": "5.5.4",