ui-ingredients 0.0.28 → 0.0.30

package/README.md

@@ -1,80 +1,80 @@
-# UI Ingredients
-
-Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
-
-## Installation
-
-```bash
-npm install ui-ingredients
-```
-
-## Usage
-
-```svelte
-<script>
-  import {Clipboard} from 'ui-ingredients';
-
-  let {data} = $props();
-</script>
-
-<Clipboard.Root value={data.token}>
-  <Clipboard.Label>Token</Clipboard.Label>
-  <Clipboard.Control>
-    <Clipboard.Input />
-    <Clipboard.Trigger>
-      <Clipboard.Indicator copied>
-        <CheckIcon />
-      </Clipboard.Indicator>
-      <Clipboard.Indicator>
-        <CopyIcon />
-      </Clipboard.Indicator>
-    </Clipboard.Trigger>
-  </Clipboard.Control>
-</Clipboard.Root>
-```
-
-## Components
-
-- 🟢 Accordion
-- 🟢 Avatar
-- 🟢 Carousel
-- 🟢 Checkbox
-- 🟢 Clipboard
-- 🟢 Collapsible
-- ⚪ ColorPicker
-- 🟢 Combobox
-- 🟢 DatePicker
-- 🟢 Dialog
-- 🟢 Editable
-- 🟢 FileUpload
-- ⚪ FloatingPanel
-- 🟢 HoverCard
-- 🟢 Menu
-- 🟢 NumberInput
-- 🟢 Pagination
-- 🟢 PinInput
-- 🟢 Popover
-- 🟢 Portal
-- ⚪ Presence
-- 🟢 Progress
-- 🟢 QRCode
-- 🟢 RadioGroup
-- 🟢 RatingGroup
-- 🟢 Select
-- 🟢 SegmentGroup
-- 🟢 SignaturePad
-- 🟢 Slider
-- 🟢 Splitter
-- 🟢 Steps
-- 🟢 Switch
-- 🟢 Tabs
-- 🟢 TagsInput
-- 🟢 TimePicker
-- 🟢 Timer
-- 🟢 Toast
-- 🟢 ToggleGroup
-- 🟢 Tooltip
-- ⚪ Tour
-- 🟢 TreeView
-
-View components demo [here](https://ui-ingredients.vercel.app/)
+# UI Ingredients
+
+Headless component library for [Svelte](https://svelte.dev/) powered by [zag](https://zagjs.com/)
+
+## Installation
+
+```bash
+npm install ui-ingredients
+```
+
+## Usage
+
+```svelte
+<script>
+  import {Clipboard} from 'ui-ingredients';
+
+  let {data} = $props();
+</script>
+
+<Clipboard.Root value={data.token}>
+  <Clipboard.Label>Token</Clipboard.Label>
+  <Clipboard.Control>
+    <Clipboard.Input />
+    <Clipboard.Trigger>
+      <Clipboard.Indicator copied>
+        <CheckIcon />
+      </Clipboard.Indicator>
+      <Clipboard.Indicator>
+        <CopyIcon />
+      </Clipboard.Indicator>
+    </Clipboard.Trigger>
+  </Clipboard.Control>
+</Clipboard.Root>
+```
+
+## Components
+
+- 🟢 Accordion
+- 🟢 Avatar
+- 🟢 Carousel
+- 🟢 Checkbox
+- 🟢 Clipboard
+- 🟢 Collapsible
+- ⚪ ColorPicker
+- 🟢 Combobox
+- 🟢 DatePicker
+- 🟢 Dialog
+- 🟢 Editable
+- 🟢 FileUpload
+- ⚪ FloatingPanel
+- 🟢 HoverCard
+- 🟢 Menu
+- 🟢 NumberInput
+- 🟢 Pagination
+- 🟢 PinInput
+- 🟢 Popover
+- 🟢 Portal
+- ⚪ Presence
+- 🟢 Progress
+- 🟢 QRCode
+- 🟢 RadioGroup
+- 🟢 RatingGroup
+- 🟢 Select
+- 🟢 SegmentGroup
+- 🟢 SignaturePad
+- 🟢 Slider
+- 🟢 Splitter
+- 🟢 Steps
+- 🟢 Switch
+- 🟢 Tabs
+- 🟢 TagsInput
+- 🟢 TimePicker
+- 🟢 Timer
+- 🟢 Toast
+- 🟢 ToggleGroup
+- 🟢 Tooltip
+- ⚪ Tour
+- 🟢 TreeView
+
+View components demo [here](https://ui-ingredients.vercel.app/)

package/dist/accordion/context.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/accordion';
 import type { CreateAccordionReturn } from './create-accordion.svelte.js';
 export declare const accordionContext: Context<CreateAccordionReturn>;

package/dist/accordion/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const accordionContext = new Context('Accordion');
 export const accordionItemPropsContext = new Context('AccordionItem');

package/dist/accordion/create-accordion.svelte.js

@@ -1,6 +1,6 @@
+import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
-import { createUniqueId } from '../utils.svelte.js';
 import * as accordion from '@zag-js/accordion';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createAccordion(props) {

package/dist/accordion/item-content.svelte

@@ -1,27 +1,32 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface AccordionItemContentProps extends HtmlProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {accordionContext, accordionItemPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: AccordionItemContentProps = $props();
-
-  let accordion = accordionContext.get();
-  let itemProps = accordionItemPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, accordion.getItemContentProps(itemProps)));
-</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 AccordionItemContentProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    accordionContext,
+    accordionItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: AccordionItemContentProps = $props();
+
+  let accordion = accordionContext.get();
+  let itemProps = accordionItemPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, accordion.getItemContentProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/accordion/item-indicator.svelte

@@ -1,27 +1,32 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface AccordionIndicatorProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {accordionContext, accordionItemPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: AccordionIndicatorProps = $props();
-
-  let accordion = accordionContext.get();
-  let itemProps = accordionItemPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, accordion.getItemIndicatorProps(itemProps)));
-</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 AccordionIndicatorProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    accordionContext,
+    accordionItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: AccordionIndicatorProps = $props();
+
+  let accordion = accordionContext.get();
+  let itemProps = accordionItemPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, accordion.getItemIndicatorProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/accordion/item-trigger.svelte

@@ -1,27 +1,32 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface AccordionItemTriggerProps extends HtmlProps<'button'> {
-    asChild?: AsChild<HtmlProps<'button'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {accordionContext, accordionItemPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: AccordionItemTriggerProps = $props();
-
-  let accordion = accordionContext.get();
-  let itemProps = accordionItemPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, accordion.getItemTriggerProps(itemProps)));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <button type="button" {...attrs}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface AccordionItemTriggerProps extends HTMLProps<'button'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    accordionContext,
+    accordionItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: AccordionItemTriggerProps = $props();
+
+  let accordion = accordionContext.get();
+  let itemProps = accordionItemPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, accordion.getItemTriggerProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/accordion/item.svelte

@@ -1,37 +1,43 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/accordion';
-  import type {Snippet} from 'svelte';
-
-  export interface AccordionItemProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, ItemProps> {
-    asChild?: AsChild;
-    children?: Snippet<[state: ItemState]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {accordionContext, accordionItemPropsContext} from './context.svelte.js';
-
-  let {value, disabled, asChild, children, ...props}: AccordionItemProps = $props();
-
-  let accordion = accordionContext.get();
-  let itemProps = $derived({
-    value,
-    disabled,
-  });
-
-  let state = $derived(accordion.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, accordion.getItemProps(itemProps)));
-
-  accordionItemPropsContext.set(() => itemProps);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{: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/accordion';
+  import type {Snippet} from 'svelte';
+
+  export interface AccordionItemProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, ItemProps> {
+    asChild?: AsChild;
+    children?: Snippet<[ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {
+    accordionContext,
+    accordionItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: AccordionItemProps = $props();
+
+  let accordion = accordionContext.get();
+
+  let [itemProps, otherProps] = $derived(
+    createSplitProps<ItemProps>(['value', 'disabled'])(props),
+  );
+
+  let itemState = $derived(accordion.getItemState(itemProps));
+  let mergedProps = $derived(
+    mergeProps(otherProps, accordion.getItemProps(itemProps)),
+  );
+
+  accordionItemPropsContext.set(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/accordion/root.svelte

@@ -1,56 +1,52 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateAccordionProps, CreateAccordionReturn} from './create-accordion.svelte.js';
-
-  export interface AccordionProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateAccordionProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateAccordionReturn>;
-    children?: Snippet<[accordion: CreateAccordionReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {accordionContext} from './context.svelte.js';
-  import {createAccordion} from './create-accordion.svelte.js';
-
-  let {
-    id,
-    ids,
-    value,
-    disabled,
-    multiple,
-    orientation,
-    collapsible,
-    onFocusChange,
-    onValueChange,
-    asChild,
-    children,
-    ...props
-  }: AccordionProps = $props();
-
-  let accordion = createAccordion({
-    id,
-    ids,
-    value: $state.snapshot(value),
-    multiple,
-    disabled,
-    collapsible,
-    orientation,
-    onFocusChange,
-    onValueChange,
-  });
-
-  let attrs = $derived(mergeProps(props, accordion.getRootProps()));
-
-  accordionContext.set(accordion);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, accordion)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(accordion)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateAccordionProps,
+    CreateAccordionReturn,
+  } from './create-accordion.svelte.js';
+
+  export interface AccordionProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateAccordionProps> {
+    asChild?: AsChild<CreateAccordionReturn>;
+    children?: Snippet<[CreateAccordionReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {accordionContext} from './context.svelte.js';
+  import {createAccordion} from './create-accordion.svelte.js';
+
+  let {asChild, children, ...props}: AccordionProps = $props();
+
+  let [accordionProps, otherProps] = $derived(
+    createSplitProps<CreateAccordionProps>([
+      'id',
+      'ids',
+      'value',
+      'disabled',
+      'multiple',
+      'orientation',
+      'collapsible',
+      'onFocusChange',
+      'onValueChange',
+    ])(props),
+  );
+
+  let accordion = createAccordion(reflect(() => accordionProps));
+
+  let mergedProps = $derived(mergeProps(otherProps, accordion.getRootProps()));
+
+  accordionContext.set(accordion);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, accordion)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(accordion)}
+  </div>
+{/if}

package/dist/avatar/context.svelte.d.ts

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { CreateAvatarReturn } from './create-avatar.svelte.js';
 export declare const avatarContext: Context<CreateAvatarReturn>;

package/dist/avatar/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const avatarContext = new Context('Avatar');

package/dist/avatar/create-avatar.svelte.js

@@ -1,6 +1,6 @@
+import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
-import { createUniqueId } from '../utils.svelte.js';
 import * as avatar from '@zag-js/avatar';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createAvatar(props) {

package/dist/avatar/fallback.svelte

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