ui-ingredients 0.0.43 → 0.0.45

package/dist/splitter/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: SplitterProps = $props();
 
-  let [splitterProps, otherProps] = $derived(
+  let [splitterProps, localProps] = $derived(
     createSplitProps<CreateSplitterProps>([
       'id',
       'ids',
@@ -34,7 +34,7 @@
 
   let splitter = createSplitter(reflect(() => splitterProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, splitter.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, splitter.getRootProps()));
 
   setSplitterContext(splitter);
 </script>

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

@@ -7,13 +7,12 @@ export function createSteps(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(steps.machine(context), { context });
-    const api = $derived(reflect(() => steps.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => steps.connect(state, send, normalizeProps));
 }

package/dist/steps/item.svelte

@@ -15,14 +15,14 @@
 
   let steps = getStepsContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['index'])(props),
   );
 
   let itemState = $derived(steps.getItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, steps.getItemProps(itemProps)),
+    mergeProps(localProps, steps.getItemProps(itemProps)),
   );
 
   setStepsItemPropsContext(() => itemProps);

package/dist/steps/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: StepsProps = $props();
 
-  let [stepsProps, otherProps] = $derived(
+  let [stepsProps, localProps] = $derived(
     createSplitProps<CreateStepsProps>([
       'id',
       'ids',
@@ -36,7 +36,7 @@
 
   let steps = createSteps(reflect(() => stepsProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, steps.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, steps.getRootProps()));
 
   setStepsContext(steps);
 </script>

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

@@ -9,7 +9,7 @@ export function createSwitch(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -22,9 +22,9 @@ export function createSwitch(props) {
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(switch$.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = switch$.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -35,6 +35,5 @@ export function createSwitch(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/switch/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: SwitchProps = $props();
 
-  let [switchProps, otherProps] = $derived(
+  let [switchProps, localProps] = $derived(
     createSplitProps<CreateSwitchProps>([
       'id',
       'ids',
@@ -40,7 +40,7 @@
 
   let switch$ = createSwitch(reflect(() => switchProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, switch$.getRootProps()));
 
   setSwitchContext(switch$);
 </script>

package/dist/tabs/content.svelte

@@ -15,12 +15,12 @@
 
   let tabs = getTabsContext();
 
-  let [contentProps, otherProps] = $derived(
+  let [contentProps, localProps] = $derived(
     createSplitProps<ContentProps>(['value'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, tabs.getContentProps(contentProps)),
+    mergeProps(localProps, tabs.getContentProps(contentProps)),
   );
 </script>
 

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

@@ -7,13 +7,12 @@ export function createTabs(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(tabs.machine(context), { context });
-    const api = $derived(reflect(() => tabs.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => tabs.connect(state, send, normalizeProps));
 }

package/dist/tabs/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: TabsProps = $props();
 
-  let [tabsProps, otherProps] = $derived(
+  let [tabsProps, localProps] = $derived(
     createSplitProps<CreateTabsProps>([
       'id',
       'ids',
@@ -38,7 +38,7 @@
 
   let tabs = createTabs(reflect(() => tabsProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, tabs.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, tabs.getRootProps()));
 
   setTabsContext(tabs);
 </script>

package/dist/tabs/trigger.svelte

@@ -15,12 +15,12 @@
 
   let tabs = getTabsContext();
 
-  let [triggerProps, otherProps] = $derived(
+  let [triggerProps, localProps] = $derived(
     createSplitProps<TriggerProps>(['value', 'disabled'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, tabs.getTriggerProps(triggerProps)),
+    mergeProps(localProps, tabs.getTriggerProps(triggerProps)),
   );
 </script>
 

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

@@ -9,7 +9,7 @@ export function createTagsInput(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -22,9 +22,9 @@ export function createTagsInput(props) {
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(tagsInput.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = tagsInput.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -35,6 +35,5 @@ export function createTagsInput(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/tags-input/item.svelte

@@ -18,14 +18,14 @@
 
   let tagsInput = getTagsInputContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['index', 'value', 'disabled'])(props),
   );
 
   let itemState = $derived(tagsInput.getItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, tagsInput.getItemProps(itemProps)),
+    mergeProps(localProps, tagsInput.getItemProps(itemProps)),
   );
 
   setTagsInputItemPropsContext(() => itemProps);

package/dist/tags-input/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: TagsInputProps = $props();
 
-  let [tagsInputProps, otherProps] = $derived(
+  let [tagsInputProps, localProps] = $derived(
     createSplitProps<CreateTagsInputProps>([
       'id',
       'ids',
@@ -55,7 +55,7 @@
 
   let tagsInput = createTagsInput(reflect(() => tagsInputProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, tagsInput.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, tagsInput.getRootProps()));
 
   setTagsInputContext(tagsInput);
 </script>

package/dist/time-picker/create-time-picker.svelte.js

@@ -7,7 +7,7 @@ export function createTimePicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
@@ -15,8 +15,7 @@ export function createTimePicker(props) {
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.defaultOpen != null,
-    })));
+    }));
     const [state, send] = useMachine(timePicker.machine(context), { context });
-    const api = $derived(reflect(() => timePicker.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => timePicker.connect(state, send, normalizeProps));
 }

package/dist/time-picker/root.svelte

@@ -25,7 +25,7 @@
 
   let {asChild, children, ...props}: TimePickerProps = $props();
 
-  let [timePickerProps, otherProps] = $derived(
+  let [timePickerProps, rest] = $derived(
     createSplitProps<CreateTimePickerProps>([
       'id',
       'ids',
@@ -49,30 +49,20 @@
     ])(props),
   );
 
-  let timePicker = createTimePicker(reflect(() => timePickerProps));
-
-  let [presenceStrategyProps, elementProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      otherProps,
-    ),
+  let [presenceStrategyProps, localProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(rest),
   );
 
-  let presence = createPresence({
-    get present() {
-      return timePicker.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
-
-  let mergedProps = $derived(
-    mergeProps(elementProps, timePicker.getRootProps()),
+  let timePicker = createTimePicker(reflect(() => timePickerProps));
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: timePicker.open,
+    })),
   );
 
+  let mergedProps = $derived(mergeProps(localProps, timePicker.getRootProps()));
+
   setTimePickerContext(timePicker);
   setPresenceContext(presence);
 </script>

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

@@ -5,12 +5,11 @@ import { uid } from 'uid';
 export function createTimer(props) {
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(timer.machine(context), { context });
-    const api = $derived(reflect(() => timer.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => timer.connect(state, send, normalizeProps));
 }

package/dist/timer/item.svelte

@@ -15,12 +15,12 @@
 
   let timer = getTimerContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['type'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, timer.getItemProps(itemProps)),
+    mergeProps(localProps, timer.getItemProps(itemProps)),
   );
 
   setTimerItemPropsContext(() => itemProps);

package/dist/timer/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: TimerProps = $props();
 
-  let [timerProps, otherProps] = $derived(
+  let [timerProps, localProps] = $derived(
     createSplitProps<CreateTimerProps>([
       'id',
       'startMs',
@@ -36,7 +36,7 @@
 
   let timer = createTimer(reflect(() => timerProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, timer.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, timer.getRootProps()));
 
   setTimerContext(timer);
 </script>

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

@@ -2,6 +2,5 @@ import { normalizeProps, reflect, useActor } from '@zag-js/svelte';
 import * as toast from '@zag-js/toast';
 export function createToast(props) {
     const [state, send] = useActor(props);
-    const api = $derived(reflect(() => toast.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => toast.connect(state, send, normalizeProps));
 }

package/dist/toast/create-toaster.svelte.js

@@ -13,9 +13,8 @@ export function createToaster(props) {
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
     }));
-    const api = $derived(reflect(() => ({
+    return reflect(() => ({
         machine,
         ...toast.group.connect(machine, machine.send, normalizeProps),
-    })));
-    return api;
+    }));
 }

package/dist/toggle-group/create-toggle-group.svelte.js

@@ -7,13 +7,12 @@ export function createToggleGroup(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(toggleGroup.machine(context), { context });
-    const api = $derived(reflect(() => toggleGroup.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => toggleGroup.connect(state, send, normalizeProps));
 }

package/dist/toggle-group/item.svelte

@@ -15,14 +15,14 @@
 
   let toggleGroup = getToggleGroupContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['value', 'disabled'])(props),
   );
 
   let itemState = $derived(toggleGroup.getItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, toggleGroup.getItemProps(itemProps)),
+    mergeProps(localProps, toggleGroup.getItemProps(itemProps)),
   );
 </script>
 

package/dist/toggle-group/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: ToggleGroupProps = $props();
 
-  let [toggleGroupProps, otherProps] = $derived(
+  let [toggleGroupProps, localProps] = $derived(
     createSplitProps<CreateToggleGroupProps>([
       'id',
       'ids',
@@ -38,7 +38,7 @@
   let toggleGroup = createToggleGroup(reflect(() => toggleGroupProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, toggleGroup.getRootProps()),
+    mergeProps(localProps, toggleGroup.getRootProps()),
   );
 
   setToggleGroupContext(toggleGroup);

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

@@ -7,15 +7,14 @@ export function createTooltip(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    })));
+    }));
     const [state, send] = useMachine(tooltip.machine(context), { context });
-    const api = $derived(reflect(() => tooltip.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => tooltip.connect(state, send, normalizeProps));
 }

package/dist/tooltip/root.svelte

@@ -30,18 +30,12 @@
   );
 
   let tooltip = createTooltip(reflect(() => tooltipProps));
-
-  let presence = createPresence({
-    get present() {
-      return tooltip.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: tooltip.open,
+    })),
+  );
 
   setTooltipContext(tooltip);
   setPresenceContext(presence);

package/dist/tour/arrow-tip.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TourArrowTipProps extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getTourContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TourArrowTipProps = $props();
+
+  let tour = getTourContext();
+
+  let mergedProps = $derived(mergeProps(props, tour.getArrowTipProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/tour/arrow-tip.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ArrowTip: $$__sveltets_2_IsomorphicComponent<TourArrowTipProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ArrowTip = InstanceType<typeof ArrowTip>;
+export default ArrowTip;

package/dist/tour/arrow.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TourArrowProps extends HtmlIngredientProps<'span'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getTourContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TourArrowProps = $props();
+
+  let tour = getTourContext();
+
+  let mergedProps = $derived(mergeProps(props, tour.getArrowProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/tour/arrow.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Arrow: $$__sveltets_2_IsomorphicComponent<TourArrowProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Arrow = InstanceType<typeof Arrow>;
+export default Arrow;

package/dist/tour/close-trigger.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface TourCloseTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getTourContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TourCloseTriggerProps = $props();
+
+  let tour = getTourContext();
+
+  let mergedProps = $derived(mergeProps(props, tour.getCloseTriggerProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/tour/close-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CloseTrigger: $$__sveltets_2_IsomorphicComponent<TourCloseTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type CloseTrigger = InstanceType<typeof CloseTrigger>;
+export default CloseTrigger;