ui-ingredients 1.2.0 → 1.4.0

package/dist/listbox/listbox-item-group.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxItemGroupProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getListboxContext,
+    setListboxItemGroupPropsContext,
+  } from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    id,
+    asChild,
+    children,
+    ...props
+  }: ListboxItemGroupProps = $props();
+
+  let uid = $props.id();
+  let itemGroupProps = $derived({id: id ?? uid});
+  let listbox = getListboxContext();
+  let mergedProps = $derived(
+    mergeProps(listbox.getItemGroupProps(itemGroupProps), props),
+  );
+
+  setListboxItemGroupPropsContext(() => itemGroupProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/listbox/listbox-item-group.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxItemGroupProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+declare const ListboxItemGroup: import("svelte").Component<ListboxItemGroupProps, {}, "ref">;
+type ListboxItemGroup = ReturnType<typeof ListboxItemGroup>;
+export default ListboxItemGroup;

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

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

package/dist/listbox/listbox-item-indicator.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxItemIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const ListboxItemIndicator: import("svelte").Component<ListboxItemIndicatorProps, {}, "ref">;
+type ListboxItemIndicator = ReturnType<typeof ListboxItemIndicator>;
+export default ListboxItemIndicator;

package/dist/listbox/listbox-item-text.svelte

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

package/dist/listbox/listbox-item-text.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxItemTextProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const ListboxItemText: import("svelte").Component<ListboxItemTextProps, {}, "ref">;
+type ListboxItemText = ReturnType<typeof ListboxItemText>;
+export default ListboxItemText;

package/dist/listbox/listbox-item.svelte

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

package/dist/listbox/listbox-item.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ItemProps, ItemState } from '@zag-js/listbox';
+import type { Assign, HtmlIngredientProps } from '../types.js';
+export interface ListboxItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, ItemState>, ItemProps> {
+}
+declare const ListboxItem: import("svelte").Component<ListboxItemProps, {}, "ref">;
+type ListboxItem = ReturnType<typeof ListboxItem>;
+export default ListboxItem;

package/dist/listbox/listbox-label.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxLabelProps
+    extends HtmlIngredientProps<'label', HTMLLabelElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxLabelProps = $props();
+
+  let listbox = getListboxContext();
+  let mergedProps = $derived(mergeProps(listbox.getLabelProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <label bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/listbox/listbox-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxLabelProps extends HtmlIngredientProps<'label', HTMLLabelElement> {
+}
+declare const ListboxLabel: import("svelte").Component<ListboxLabelProps, {}, "ref">;
+type ListboxLabel = ReturnType<typeof ListboxLabel>;
+export default ListboxLabel;

package/dist/listbox/listbox-root.svelte

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
+  import type {
+    CreateListboxProps,
+    CreateListboxReturn,
+  } from './create-listbox.svelte.js';
+
+  export interface ListboxProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, CreateListboxReturn>,
+      Optional<CreateListboxProps, 'id'>
+    > {}
+</script>
+
+<script lang="ts">
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps} from '../merge-props.js';
+  import {createListbox} from './create-listbox.svelte.js';
+  import {setListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    id,
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxProps = $props();
+
+  let uid = $props.id();
+
+  let [createListboxProps, localProps] = $derived(
+    createSplitProps<Omit<CreateListboxProps, 'id'>>([
+      'collection',
+      'defaultHighlightedValue',
+      'defaultValue',
+      'deselectable',
+      'disabled',
+      'disallowSelectAll',
+      'highlightedValue',
+      'ids',
+      'loopFocus',
+      'onHighlightChange',
+      'onSelect',
+      'onValueChange',
+      'orientation',
+      'scrollToIndexFn',
+      'selectOnHighlight',
+      'selectionMode',
+      'typeahead',
+      'value',
+    ])(props),
+  );
+
+  let listbox = createListbox(
+    reflect(() => ({...createListboxProps, id: id ?? uid})),
+  );
+
+  let mergedProps = $derived(mergeProps(listbox.getRootProps(), localProps));
+
+  setListboxContext(listbox);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, listbox)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(listbox)}
+  </div>
+{/if}

package/dist/listbox/listbox-root.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
+import type { CreateListboxProps, CreateListboxReturn } from './create-listbox.svelte.js';
+export interface ListboxProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateListboxReturn>, Optional<CreateListboxProps, 'id'>> {
+}
+declare const ListboxRoot: import("svelte").Component<ListboxProps, {}, "ref">;
+type ListboxRoot = ReturnType<typeof ListboxRoot>;
+export default ListboxRoot;

package/dist/listbox/listbox-value-text.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ListboxValueTextProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getListboxContext} from './listbox-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: ListboxValueTextProps = $props();
+
+  let listbox = getListboxContext();
+  let mergedProps = $derived(mergeProps(listbox.getValueTextProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {listbox.valueAsString}
+    {/if}
+  </span>
+{/if}

package/dist/listbox/listbox-value-text.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ListboxValueTextProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const ListboxValueText: import("svelte").Component<ListboxValueTextProps, {}, "ref">;
+type ListboxValueText = ReturnType<typeof ListboxValueText>;
+export default ListboxValueText;

package/dist/listbox/listbox.d.ts

@@ -0,0 +1,11 @@
+export { collection } from '@zag-js/listbox';
+export { default as Content } from './listbox-content.svelte';
+export { default as Input } from './listbox-input.svelte';
+export { default as ItemGroupLabel } from './listbox-item-group-label.svelte';
+export { default as ItemGroup } from './listbox-item-group.svelte';
+export { default as ItemIndicator } from './listbox-item-indicator.svelte';
+export { default as ItemText } from './listbox-item-text.svelte';
+export { default as Item } from './listbox-item.svelte';
+export { default as Label } from './listbox-label.svelte';
+export { default as Root } from './listbox-root.svelte';
+export { default as ValueText } from './listbox-value-text.svelte';

package/dist/listbox/listbox.js

@@ -0,0 +1,11 @@
+export { collection } from '@zag-js/listbox';
+export { default as Content } from './listbox-content.svelte';
+export { default as Input } from './listbox-input.svelte';
+export { default as ItemGroupLabel } from './listbox-item-group-label.svelte';
+export { default as ItemGroup } from './listbox-item-group.svelte';
+export { default as ItemIndicator } from './listbox-item-indicator.svelte';
+export { default as ItemText } from './listbox-item-text.svelte';
+export { default as Item } from './listbox-item.svelte';
+export { default as Label } from './listbox-label.svelte';
+export { default as Root } from './listbox-root.svelte';
+export { default as ValueText } from './listbox-value-text.svelte';

package/dist/menu/menu-context.svelte.js

@@ -1,5 +1,5 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getMenuContext, setMenuContext] = createContext('Menu', false);
-export const [getMenuItemGroupPropsContext, setMenuItemGroupPropsContext] = createContext('MenuItemGroup [PROPS]');
-export const [getMenuOptionItemPropsContext, setMenuOptionItemPropsContext] = createContext('MenuOptionItem [PROPS]');
+export const [getMenuItemGroupPropsContext, setMenuItemGroupPropsContext] = createContext('MenuItemGroup.props');
+export const [getMenuOptionItemPropsContext, setMenuOptionItemPropsContext] = createContext('MenuOptionItem.props');
 export const [getMenuTriggerItemContext, setMenuTriggerItemContext] = createContext('MenuTriggerItem');

package/dist/portal/portal-context.svelte.js

@@ -1,2 +1,2 @@
 import { createContext } from '../create-context.svelte.js';
-export const [getPortalProviderPropsContext, setPortalProviderPropsContext] = createContext('PortalProvider [PROPS]', false);
+export const [getPortalProviderPropsContext, setPortalProviderPropsContext] = createContext('PortalProvider.props', false);

package/dist/presence/create-presence.svelte.d.ts

@@ -6,6 +6,8 @@ export interface PresenceStrategyProps {
     lazyMount?: boolean;
     /** @default true */
     keepMounted?: boolean;
+    /** @default true */
+    animateOnMount?: boolean;
 }
 export interface CreatePresenceProps extends PresenceStrategyProps, presence.Props {
 }

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

@@ -1,12 +1,17 @@
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 export function createPresence(props) {
+    const { present, lazyMount, keepMounted, animateOnMount } = $derived(Object.assign({
+        lazyMount: false,
+        keepMounted: true,
+        animateOnMount: true,
+    }, props));
     const service = useMachine(presence.machine, props);
     const api = $derived(presence.connect(service, normalizeProps));
     function getPresenceProps() {
         return {
             hidden: !api.present,
-            'data-state': props.present ? 'open' : 'closed',
+            'data-state': api.skip && !animateOnMount ? undefined : present ? 'open' : 'closed',
         };
     }
     let wasPresent = $state(false);
@@ -20,9 +25,9 @@ export function createPresence(props) {
     const unmounted = $derived.by(() => {
         if (api.present)
             return false;
-        if (!wasPresent && props.lazyMount)
+        if (!wasPresent && lazyMount)
             return true;
-        if (wasPresent && !props.keepMounted)
+        if (wasPresent && !keepMounted)
             return true;
         return false;
     });

package/dist/segment-group/segment-group-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getSegmentGroupContext, setSegmentGroupContext] = createContext('SegmentGroup');
-export const [getSegmentGroupItemPropsContext, setSegmentGroupItemPropsContext,] = createContext('SegmentGroupItem [PROPS]');
+export const [getSegmentGroupItemPropsContext, setSegmentGroupItemPropsContext,] = createContext('SegmentGroupItem.props');

package/dist/select/select-context.svelte.js

@@ -1,4 +1,4 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getSelectContext, setSelectContext] = createContext('Select');
-export const [getSelectItemPropsContext, setSelectItemPropsContext] = createContext('SelectItem [PROPS]');
-export const [getSelectItemGroupPropsContext, setSelectItemGroupPropsContext] = createContext('SelectItemGroup [PROPS]');
+export const [getSelectItemPropsContext, setSelectItemPropsContext] = createContext('SelectItem.props');
+export const [getSelectItemGroupPropsContext, setSelectItemGroupPropsContext] = createContext('SelectItemGroup.props');

package/dist/select/select-root.svelte

@@ -66,9 +66,11 @@
   );
 
   let [presenceStrategyProps, localProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      selectProps,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(selectProps),
   );
 
   let select = createSelect(

package/dist/slider/slider-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getSliderContext, setSliderContext] = createContext('Slider');
-export const [getSliderThumbPropsContext, setSliderThumbPropsContext] = createContext('SliderThumb [PROPS]');
+export const [getSliderThumbPropsContext, setSliderThumbPropsContext] = createContext('SliderThumb.props');

package/dist/steps/steps-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getStepsContext, setStepsContext] = createContext('Steps');
-export const [getStepsItemPropsContext, setStepsItemPropsContext] = createContext('StepsItem [PROPS]');
+export const [getStepsItemPropsContext, setStepsItemPropsContext] = createContext('StepsItem.props');

package/dist/steps/steps-root.svelte

@@ -33,9 +33,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, stepsProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let [createStepsProps, localProps] = $derived(

package/dist/tags-input/tags-input-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getTagsInputContext, setTagsInputContext] = createContext('TagsInput');
-export const [getTagsInputItemPropsContext, setTagsInputItemPropsContext] = createContext('TagsInputItem [PROPS]');
+export const [getTagsInputItemPropsContext, setTagsInputItemPropsContext] = createContext('TagsInputItem.props');

package/dist/time-picker/time-picker-root.svelte

@@ -58,9 +58,11 @@
   );
 
   let [presenceStrategyProps, localProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      timePickerProps,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(timePickerProps),
   );
 
   let timePicker = createTimePicker(

package/dist/timer/timer-context.svelte.js

@@ -1,3 +1,3 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getTimerContext, setTimerContext] = createContext('Timer');
-export const [getTimerItemPropsContext, setTimerItemPropsContext] = createContext('TimerItem [PROPS]');
+export const [getTimerItemPropsContext, setTimerItemPropsContext] = createContext('TimerItem.props');

package/dist/tooltip/tooltip-root.svelte

@@ -27,9 +27,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, createTooltipProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let tooltip = createTooltip(

package/dist/tour/tour-root.svelte

@@ -30,9 +30,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, createTourProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let tour = createTour(reflect(() => ({...createTourProps, id: id ?? uid})));

package/dist/tree-view/tree-view-root.svelte

@@ -33,9 +33,11 @@
   let uid = $props.id();
 
   let [presenceStrategyProps, treeviewProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
+    createSplitProps<PresenceStrategyProps>([
+      'lazyMount',
+      'keepMounted',
+      'animateOnMount',
+    ])(props),
   );
 
   let [createTreeViewProps, localProps] = $derived(