ui-ingredients 0.0.5 → 0.0.7

package/README.md

@@ -1,75 +1,75 @@
-# 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
-- 🟢 HoverCard
-- 🟡 Menu
-- 🟢 NumberInput
-- 🟢 Pagination
-- 🟢 PinInput
-- 🟢 Popover
-- 🟢 Portal
-- 🟢 Presence
-- 🟢 Progress
-- ⚪ QRCode
-- 🟢 RadioGroup
-- ⚪ RatingGroup
-- 🟢 Select
-- ⚪ SignaturePad
-- 🟢 Slider
-- ⚪ Splitter
-- 🟢 Steps
-- 🟢 Switch
-- 🟢 Tabs
-- 🟡 TagsInput
-- ⚪ Timer
-- 🟢 Toast
-- 🟢 ToggleGroup
-- 🟢 Tooltip
-
-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
+- 🟢 HoverCard
+- 🟡 Menu
+- 🟢 NumberInput
+- 🟢 Pagination
+- 🟢 PinInput
+- 🟢 Popover
+- 🟢 Portal
+- 🟢 Presence
+- 🟢 Progress
+- ⚪ QRCode
+- 🟢 RadioGroup
+- ⚪ RatingGroup
+- 🟢 Select
+- ⚪ SignaturePad
+- 🟢 Slider
+- ⚪ Splitter
+- 🟢 Steps
+- 🟢 Switch
+- 🟢 Tabs
+- 🟡 TagsInput
+- ⚪ Timer
+- 🟢 Toast
+- 🟢 ToggleGroup
+- 🟢 Tooltip
+
+View components demo [here](https://ui-ingredients.vercel.app/)

package/dist/accordion/context.svelte.js

@@ -13,7 +13,7 @@ export function useAccordionContext() {
     return getContext('Accordion');
 }
 export function setAccordionItemContext(value) {
-    setContext('AccordionItem', reflect(() => value));
+    setContext('AccordionItem', value);
 }
 export function useAccordionItemContext() {
     return getContext('AccordionItem');

package/dist/accordion/item-content.svelte

@@ -1,13 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useAccordionContext, useAccordionItemContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useAccordionContext();
-let itemContext = useAccordionItemContext();
-let attrs = $derived(mergeProps(props, context.getItemContentProps(itemContext)));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface AccordionItemContentProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useAccordionContext, useAccordionItemContext} from './context.svelte.js';
+
+  let {children, ...props}: AccordionItemContentProps = $props();
+
+  let context = useAccordionContext();
+  let itemContext = useAccordionItemContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemContentProps(itemContext)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/accordion/item-indicator.svelte

@@ -1,13 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useAccordionContext, useAccordionItemContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useAccordionContext();
-let itemContext = useAccordionItemContext();
-let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemContext)));
-</script>
-
-<span {...attrs}>
-  {@render children?.()}
-</span>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface AccordionIndicatorProps extends Assign<SvelteHTMLElements['span'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useAccordionContext, useAccordionItemContext} from './context.svelte.js';
+
+  let {children, ...props}: AccordionIndicatorProps = $props();
+
+  let context = useAccordionContext();
+  let itemContext = useAccordionItemContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemIndicatorProps(itemContext)));
+</script>
+
+<span {...attrs}>
+  {@render children?.()}
+</span>

package/dist/accordion/item-trigger.svelte

@@ -1,13 +1,22 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useAccordionContext, useAccordionItemContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useAccordionContext();
-let itemContext = useAccordionItemContext();
-let attrs = $derived(mergeProps(props, context.getItemTriggerProps(itemContext)));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface AccordionItemTriggerProps extends Assign<SvelteHTMLElements['button'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useAccordionContext, useAccordionItemContext} from './context.svelte.js';
+
+  let {children, ...props}: AccordionItemTriggerProps = $props();
+
+  let context = useAccordionContext();
+  let itemContext = useAccordionItemContext();
+
+  let attrs = $derived(mergeProps(props, context.getItemTriggerProps(itemContext)));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/accordion/item.svelte

@@ -1,24 +1,35 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { setAccordionItemContext, useAccordionContext } from "./context.svelte.js";
-let { value, disabled, children, ...props } = $props();
-let context = useAccordionContext();
-let attrs = $derived(
-  mergeProps(
-    props,
-    context.getItemProps({
-      value,
-      disabled
-    })
-  )
-);
-setAccordionItemContext({
-  value,
-  disabled
-});
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {ItemProps} from '@zag-js/accordion';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface AccordionItemProps extends Assign<SvelteHTMLElements['div'], ItemProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {setAccordionItemContext, useAccordionContext} from './context.svelte.js';
+
+  let {value, disabled, children, ...props}: AccordionItemProps = $props();
+
+  let context = useAccordionContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getItemProps({
+        value,
+        disabled,
+      }),
+    ),
+  );
+
+  setAccordionItemContext({
+    value,
+    disabled,
+  });
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/accordion/root.svelte

@@ -1,40 +1,61 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createAccordionContext, setAccordionContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  value,
-  disabled,
-  multiple,
-  orientation,
-  collapsible,
-  onFocusChange,
-  onValueChange,
-  getRootNode,
-  children,
-  ...props
-} = $props();
-let context = createAccordionContext({
-  id,
-  ids,
-  dir,
-  value: $state.snapshot(value),
-  multiple,
-  disabled,
-  collapsible,
-  orientation,
-  onFocusChange,
-  onValueChange,
-  getRootNode
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setAccordionContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import type {
+    CreateAccordionContextProps,
+    CreateAccordionContextReturn,
+  } from './context.svelte.js';
+
+  export interface AccordionProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateAccordionContextProps>
+    > {
+    children?: Snippet<[CreateAccordionContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createAccordionContext, setAccordionContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    value,
+    disabled,
+    multiple,
+    orientation,
+    collapsible,
+    onFocusChange,
+    onValueChange,
+    getRootNode,
+    children,
+    ...props
+  }: AccordionProps = $props();
+
+  let context = createAccordionContext({
+    id,
+    ids,
+    dir,
+    value: $state.snapshot(value),
+    multiple,
+    disabled,
+    collapsible,
+    orientation,
+    onFocusChange,
+    onValueChange,
+    getRootNode,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setAccordionContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/avatar/fallback.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useAvatarContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useAvatarContext();
-let attrs = $derived(mergeProps(props, context.getFallbackProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface AvatarFallbackProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useAvatarContext} from './context.svelte.js';
+
+  let {children, ...props}: AvatarFallbackProps = $props();
+
+  let context = useAvatarContext();
+
+  let attrs = $derived(mergeProps(props, context.getFallbackProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/avatar/image.svelte

@@ -1,10 +1,19 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useAvatarContext } from "./context.svelte.js";
-let { ...props } = $props();
-let context = useAvatarContext();
-let attrs = $derived(mergeProps(props, context.getImageProps()));
-</script>
-
-<img {...attrs} />
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface AvatarImageProps extends Assign<SvelteHTMLElements['img'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useAvatarContext} from './context.svelte.js';
+
+  let {...props}: AvatarImageProps = $props();
+
+  let context = useAvatarContext();
+
+  let attrs = $derived(mergeProps(props, context.getImageProps()));
+</script>
+
+<img {...attrs} />

package/dist/avatar/root.svelte

@@ -1,29 +1,46 @@
-<script lang="ts" context="module">import {} from "./context.svelte.js";
-</script>
-
-<script lang="ts">import { uuid } from "../utils.svelte.js";
-import { mergeProps } from "@zag-js/svelte";
-import { createAvatarContext, setAvatarContext } from "./context.svelte.js";
-let {
-  id = uuid(),
-  ids,
-  dir,
-  getRootNode,
-  onStatusChange,
-  children,
-  ...props
-} = $props();
-let context = createAvatarContext({
-  id,
-  ids,
-  dir,
-  getRootNode,
-  onStatusChange
-});
-let attrs = $derived(mergeProps(props, context.getRootProps()));
-setAvatarContext(context);
-</script>
-
-<div {...attrs}>
-  {@render children?.(context)}
-</div>
+<script lang="ts" context="module">
+  import type {Assign, OptionalId, WithoutChildren} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+  import {type CreateAvatarContextProps, type CreateAvatarContextReturn} from './context.svelte.js';
+
+  export interface AvatarProps
+    extends Assign<
+      WithoutChildren<SvelteHTMLElements['div']>,
+      OptionalId<CreateAvatarContextProps>
+    > {
+    children?: Snippet<[CreateAvatarContextReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {uuid} from '../utils.svelte.js';
+  import {mergeProps} from '@zag-js/svelte';
+  import {createAvatarContext, setAvatarContext} from './context.svelte.js';
+
+  let {
+    id = uuid(),
+    ids,
+    dir,
+    getRootNode,
+    onStatusChange,
+    children,
+    ...props
+  }: AvatarProps = $props();
+
+  let context = createAvatarContext({
+    id,
+    ids,
+    dir,
+    getRootNode,
+    onStatusChange,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  setAvatarContext(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

package/dist/carousel/indicator-group.svelte

@@ -1,12 +1,21 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useCarouselContext } from "./context.svelte.js";
-let { children, ...props } = $props();
-let context = useCarouselContext();
-let attrs = $derived(mergeProps(props, context.getIndicatorGroupProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface CarouselIndicatorGroupProps extends Assign<SvelteHTMLElements['div'], {}> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useCarouselContext} from './context.svelte.js';
+
+  let {children, ...props}: CarouselIndicatorGroupProps = $props();
+
+  let context = useCarouselContext();
+
+  let attrs = $derived(mergeProps(props, context.getIndicatorGroupProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/carousel/indicator.svelte

@@ -1,20 +1,31 @@
-<script lang="ts" context="module"></script>
-
-<script lang="ts">import { mergeProps } from "@zag-js/svelte";
-import { useCarouselContext } from "./context.svelte.js";
-let { index, readOnly, children, ...props } = $props();
-let context = useCarouselContext();
-let attrs = $derived(
-  mergeProps(
-    props,
-    context.getIndicatorProps({
-      index,
-      readOnly
-    })
-  )
-);
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" context="module">
+  import type {Assign} from '../types.js';
+  import type {IndicatorProps} from '@zag-js/carousel';
+  import type {SvelteHTMLElements} from 'svelte/elements';
+
+  export interface CarouselIndicatorProps
+    extends Assign<SvelteHTMLElements['button'], IndicatorProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {useCarouselContext} from './context.svelte.js';
+
+  let {index, readOnly, children, ...props}: CarouselIndicatorProps = $props();
+
+  let context = useCarouselContext();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      context.getIndicatorProps({
+        index,
+        readOnly,
+      }),
+    ),
+  );
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>