ui-ingredients 0.0.27 → 0.0.29

package/dist/tree-view/item.svelte

@@ -1,37 +1,41 @@
-<script lang="ts" module>
-  import type {AsChild, 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?: AsChild<GenericHtmlProps, ItemState>;
-    children?: Snippet<[state: ItemState]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
-
-  let {depth, value, disabled, asChild, 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>
-
-{#if asChild}
-  {@render asChild(attrs, state)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(state)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, 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> {
+    asChild?: AsChild<ItemState>;
+    children?: Snippet<[ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {treeViewContext, treeViewItemPropsContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TreeViewItemProps = $props();
+
+  let treeView = treeViewContext.get();
+
+  let [itemProps, otherProps] = $derived(
+    createSplitProps<ItemProps>(['depth', 'value', 'disabled'])(props),
+  );
+
+  let itemState = $derived(treeView.getItemState(itemProps));
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, treeView.getItemProps(itemProps)),
+  );
+
+  treeViewItemPropsContext.set(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/tree-view/label.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface TreeViewLabelProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {treeViewContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: TreeViewLabelProps = $props();
-
-  let treeView = treeViewContext.get();
-
-  let attrs = $derived(mergeProps(props, treeView.getLabelProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <span {...attrs}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface TreeViewLabelProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {treeViewContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TreeViewLabelProps = $props();
+
+  let treeView = treeViewContext.get();
+
+  let mergedProps = $derived(mergeProps(props, treeView.getLabelProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/tree-view/root.svelte

@@ -1,60 +1,53 @@
-<script lang="ts" module>
-  import type {AsChild, 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?: AsChild<GenericHtmlProps, CreateTreeViewReturn>;
-    children?: Snippet<[treeView: CreateTreeViewReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  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,
-    asChild,
-    children,
-    ...props
-  }: TreeViewProps = $props();
-
-  let treeView = createTreeView({
-    id,
-    ids,
-    typeahead,
-    focusedValue,
-    expandedValue,
-    expandOnClick,
-    selectedValue,
-    selectionMode,
-    onFocusChange,
-    onExpandedChange,
-    onSelectionChange,
-  });
-
-  let attrs = $derived(mergeProps<Record<string, any>>(props, treeView.getRootProps()));
-
-  treeViewContext.set(treeView);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, treeView)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(treeView)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, 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> {
+    asChild?: AsChild<CreateTreeViewReturn>;
+    children?: Snippet<[CreateTreeViewReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {treeViewContext} from './context.svelte.js';
+  import {createTreeView} from './create-tree-view.svelte.js';
+
+  let {asChild, children, ...props}: TreeViewProps = $props();
+
+  let [treeViewProps, otherProps] = $derived(
+    createSplitProps<CreateTreeViewProps>([
+      'id',
+      'ids',
+      'typeahead',
+      'focusedValue',
+      'expandedValue',
+      'expandOnClick',
+      'selectedValue',
+      'selectionMode',
+      'onFocusChange',
+      'onExpandedChange',
+      'onSelectionChange',
+    ])(props),
+  );
+
+  let treeView = createTreeView(treeViewProps);
+
+  let mergedProps = $derived(mergeProps(otherProps, treeView.getRootProps()));
+
+  treeViewContext.set(treeView);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, treeView)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(treeView)}
+  </div>
+{/if}

package/dist/tree-view/tree.svelte

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

package/dist/types.d.ts

@@ -1,14 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
-export type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
+import type { SvelteHTMLElements } from 'svelte/elements';
+export type GenericObject = Record<string, any>;
+export type Assign<Target extends GenericObject, Source extends GenericObject> = Source & Omit<Target, keyof 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>;
-type GenericObject = Record<string, any>;
-type WithoutChildren<T> = Assign<T, {
-    children?: never;
-}>;
-export type AsChild<T extends GenericObject = GenericHtmlProps, C = never> = [C] extends [never] ? Snippet<[attrs: WithoutChildren<T>]> : Snippet<[attrs: WithoutChildren<T>, context: C]>;
+export type HTMLProps<T extends IntrinsicElements> = SvelteHTMLElements[T];
+export type AsChild<Context = never> = [Context] extends [never] ? Snippet<[props: GenericObject]> : Snippet<[props: GenericObject, context: Context]>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -128,6 +128,7 @@
     "@zag-js/tooltip": "0.65.1",
     "@zag-js/tour": "0.65.1",
     "@zag-js/tree-view": "0.65.1",
+    "@zag-js/utils": "0.65.1",
     "uid": "2.0.2"
   },
   "peerDependencies": {

package/dist/utils.svelte.d.ts

@@ -1,10 +0,0 @@
-export declare const createUniqueId: () => string;
-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;
-    constructor(key: string, strict?: boolean);
-    get(): T;
-    set(context: T | (() => T)): any;
-}