ui-ingredients 0.15.0 → 0.16.0

package/README.md

@@ -6,16 +6,14 @@ Headless component library for [Svelte](https://svelte.dev/) powered by [zag](ht
 
 ```bash
 npm install ui-ingredients
-# yarn add ui-ingredients
-# pnpm add ui-ingredients
 ```
 
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
   import {Dialog, Portal} from 'ui-ingredients';
-  import {XCloseIcon, Button} from '$lib';
+  import {XCloseIcon, Button} from '$lib/icons';
 </script>
 
 <Dialog.Root lazyMount keepMounted>
@@ -40,64 +38,11 @@ npm install ui-ingredients
 </Dialog.Root>
 ```
 
-## Documentation
-
-- [Accordion](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/accordion.md)
-- [Alert](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert.md)
-- [AlertDialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/alert-dialog.md)
-- [Avatar](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/avatar.md)
-- [Breadcrumbs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/breadcrumbs.md)
-- [Carousel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/carousel.md)
-- [Checkbox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/checkbox.md)
-- [Clipboard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/clipboard.md)
-- [Collapsible](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/collapsible.md)
-- [ColorPicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/color-picker.md)
-- [Combobox](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/combobox.md)
-- [DatePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/date-picker.md)
-- [Dialog](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/dialog.md)
-- [Drawer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/drawer.md)
-- [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
-- [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
-- [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
-- [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
-- [Highlight](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/highlight.md)
-- [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
-- [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
-- [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
-- [Pagination](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pagination.md)
-- [PinInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/pin-input.md)
-- [Popover](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/popover.md)
-- [Portal](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/portal.md)
-- [Presence](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/presence.md)
-- [Progress](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/progress.md)
-- [QrCode](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/qr-code.md)
-- [RadioGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/radio-group.md)
-- [RatingGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/rating-group.md)
-- [Select](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/select.md)
-- [SegmentGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/segment-group.md)
-- [SignaturePad](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/signature-pad.md)
-- [Slider](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/slider.md)
-- [Splitter](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/splitter.md)
-- [Steps](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/steps.md)
-- [Switch](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/switch.md)
-- [Tabs](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tabs.md)
-- [TagsInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tags-input.md)
-- [TimePicker](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/time-picker.md)
-- [Timer](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/timer.md)
-- [Toast](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toast.md)
-- [Toggle](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle.md)
-- [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
-- [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
-- [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
-- [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
-- [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
-- [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
-
-## Credits
+## Inspirations
 
 - [zag](https://zagjs.com/) - The fantastic library that powers UI ingredients
 - [ark](https://ark-ui.com/) - The outstanding headless component library that greatly inspired this one
 
-## Demo
+## Documentation
 
-View components demo [here](https://ui-ingredients.vercel.app/)
+Browse our beta [documentaion](https://ui-ingredients-next.vercel.app/)

package/dist/accordion/accordion-item-content.svelte

@@ -1,55 +1,55 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-  import type {Action} from 'svelte/action';
-
-  export interface AccordionItemContentProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {reflect} from '@zag-js/svelte';
-  import {
-    getAccordionContext,
-    getAccordionItemPropsContext,
-  } from './accordion-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionItemContentProps = $props();
-
-  let accordion = getAccordionContext();
-  let itemProps = getAccordionItemPropsContext();
-  let itemsState = $derived(accordion.getItemState(itemProps));
-
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: itemsState.expanded,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(
-      accordion.getItemContentProps(itemProps),
-      presence.getPresenceProps(),
-      props,
-    ),
-  );
-</script>
-
-{#if presence.mounted}
-  {#if asChild}
-    {@render asChild(presence.setReference, mergedProps)}
-  {:else}
-    <div bind:this={ref} use:presence.setReference {...mergedProps}>
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface AccordionItemContentProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {
+    getAccordionContext,
+    getAccordionItemPropsContext,
+  } from './accordion-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionItemContentProps = $props();
+
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
+  let itemsState = $derived(accordion.getItemState(itemProps));
+
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: itemsState.expanded,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      accordion.getItemContentProps(itemProps),
+      presence.getPresenceProps(),
+      props,
+    ),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/accordion/accordion-item-indicator.svelte

@@ -1,36 +1,36 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AccordionIndicatorProps
-    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {
-    getAccordionContext,
-    getAccordionItemPropsContext,
-  } from './accordion-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionIndicatorProps = $props();
-
-  let accordion = getAccordionContext();
-  let itemProps = getAccordionItemPropsContext();
-
-  let mergedProps = $derived(
-    mergeProps(accordion.getItemIndicatorProps(itemProps), props),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <span bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AccordionIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getAccordionContext,
+    getAccordionItemPropsContext,
+  } from './accordion-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionIndicatorProps = $props();
+
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
+
+  let mergedProps = $derived(
+    mergeProps(accordion.getItemIndicatorProps(itemProps), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/accordion/accordion-item-trigger.svelte

@@ -1,36 +1,36 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AccordionItemTriggerProps
-    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {
-    getAccordionContext,
-    getAccordionItemPropsContext,
-  } from './accordion-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionItemTriggerProps = $props();
-
-  let accordion = getAccordionContext();
-  let itemProps = getAccordionItemPropsContext();
-
-  let mergedProps = $derived(
-    mergeProps(accordion.getItemTriggerProps(itemProps), props),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps)}
-{:else}
-  <button bind:this={ref} {...mergedProps}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AccordionItemTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getAccordionContext,
+    getAccordionItemPropsContext,
+  } from './accordion-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionItemTriggerProps = $props();
+
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
+
+  let mergedProps = $derived(
+    mergeProps(accordion.getItemTriggerProps(itemProps), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/accordion/accordion-item.svelte

@@ -1,47 +1,47 @@
-<script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/accordion';
-
-  export interface AccordionItemProps
-    extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
-      ItemProps
-    > {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {createSplitProps} from '@zag-js/utils';
-  import {
-    getAccordionContext,
-    setAccordionItemPropsContext,
-  } from './accordion-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionItemProps = $props();
-
-  let accordion = getAccordionContext();
-
-  let [itemProps, localProps] = $derived(
-    createSplitProps<ItemProps>(['value', 'disabled'])(props),
-  );
-
-  let itemState = $derived(accordion.getItemState(itemProps));
-  let mergedProps = $derived(
-    mergeProps(accordion.getItemProps(itemProps), localProps),
-  );
-
-  setAccordionItemPropsContext(() => itemProps);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, itemState)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.(itemState)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/accordion';
+
+  export interface AccordionItemProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
+      ItemProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {
+    getAccordionContext,
+    setAccordionItemPropsContext,
+  } from './accordion-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionItemProps = $props();
+
+  let accordion = getAccordionContext();
+
+  let [itemProps, localProps] = $derived(
+    createSplitProps<ItemProps>(['value', 'disabled'])(props),
+  );
+
+  let itemState = $derived(accordion.getItemState(itemProps));
+  let mergedProps = $derived(
+    mergeProps(accordion.getItemProps(itemProps), localProps),
+  );
+
+  setAccordionItemPropsContext(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(itemState)}
+  </div>
+{/if}

package/dist/accordion/accordion-root.svelte

@@ -1,66 +1,66 @@
-<script lang="ts" module>
-  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {
-    CreateAccordionProps,
-    CreateAccordionReturn,
-  } from './create-accordion.svelte.js';
-
-  export interface AccordionProps
-    extends Assign<
-        HtmlIngredientProps<'div', HTMLDivElement, CreateAccordionReturn>,
-        CreateAccordionProps
-      >,
-      PresenceStrategyProps {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setAccordionContext} from './accordion-context.svelte.js';
-  import {createAccordion} from './create-accordion.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionProps = $props();
-
-  let [presenceStrategyProps, rest] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
-  );
-
-  let [createAccordionProps, localProps] = $derived(
-    createSplitProps<CreateAccordionProps>([
-      'id',
-      'ids',
-      'value',
-      'disabled',
-      'multiple',
-      'orientation',
-      'collapsible',
-      'onFocusChange',
-      'onValueChange',
-    ])(rest),
-  );
-
-  let accordion = createAccordion(reflect(() => createAccordionProps));
-
-  let mergedProps = $derived(mergeProps(accordion.getRootProps(), localProps));
-
-  setAccordionContext(accordion);
-  setPresenceStrategyPropsContext(() => presenceStrategyProps);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, accordion)}
-{:else}
-  <div bind:this={ref} {...mergedProps}>
-    {@render children?.(accordion)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {
+    CreateAccordionProps,
+    CreateAccordionReturn,
+  } from './create-accordion.svelte.js';
+
+  export interface AccordionProps
+    extends Assign<
+        HtmlIngredientProps<'div', HTMLDivElement, CreateAccordionReturn>,
+        CreateAccordionProps
+      >,
+      PresenceStrategyProps {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {setPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setAccordionContext} from './accordion-context.svelte.js';
+  import {createAccordion} from './create-accordion.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionProps = $props();
+
+  let [presenceStrategyProps, rest] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let [createAccordionProps, localProps] = $derived(
+    createSplitProps<CreateAccordionProps>([
+      'id',
+      'ids',
+      'value',
+      'disabled',
+      'multiple',
+      'orientation',
+      'collapsible',
+      'onFocusChange',
+      'onValueChange',
+    ])(rest),
+  );
+
+  let accordion = createAccordion(reflect(() => createAccordionProps));
+
+  let mergedProps = $derived(mergeProps(accordion.getRootProps(), localProps));
+
+  setAccordionContext(accordion);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, accordion)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(accordion)}
+  </div>
+{/if}

package/dist/alert/alert-description.svelte

@@ -1,25 +1,25 @@
-<script lang="ts" module>
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertDescriptionProps
-    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {getAlertContext} from './alert-context.js';
-
-  let {ref, asChild, children, ...props}: AlertDescriptionProps = $props();
-
-  let alert = getAlertContext();
-
-  let attrs = $derived(mergeProps(alert.getDescriptionProps(), props));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <p bind:this={ref} {...attrs}>
-    {@render children?.()}
-  </p>
-{/if}
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertDescriptionProps
+    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getAlertContext} from './alert-context.js';
+
+  let {ref, asChild, children, ...props}: AlertDescriptionProps = $props();
+
+  let alert = getAlertContext();
+
+  let attrs = $derived(mergeProps(alert.getDescriptionProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(attrs)}
+{:else}
+  <p bind:this={ref} {...attrs}>
+    {@render children?.()}
+  </p>
+{/if}