ui-ingredients 0.0.44 → 0.0.45

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/create-tour.svelte.js

@@ -7,13 +7,12 @@ export function createTour(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(tour.machine(context), { context });
-    const api = $derived(reflect(() => tour.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => tour.connect(state, send, normalizeProps));
 }

package/dist/tour/overlay.svelte

@@ -8,24 +8,19 @@
   import {mergeProps} from '../merge-props.js';
   import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
   import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
   import {getTourContext} from './context.svelte.js';
 
   let {asChild, children, ...props}: TourOverlayProps = $props();
 
   let tour = getTourContext();
-
   let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence({
-    get present() {
-      return tour.currentStep != null;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: tour.currentStep != null,
+    })),
+  );
 
   let mergedProps = $derived(
     mergeProps(props, tour.getOverlayProps(), presence.getPresenceProps()),

package/dist/tour/root.svelte

@@ -32,17 +32,12 @@
 
   let tour = createTour(reflect(() => tourProps));
 
-  let presence = createPresence({
-    get present() {
-      return tour.currentStep != null;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: tour.currentStep != null,
+    })),
+  );
 
   setTourContext(tour);
   setPresenceContext(presence);

package/dist/tree-view/branch.svelte

@@ -18,14 +18,14 @@
 
   let treeView = getTreeViewContext();
 
-  let [branchProps, otherProps] = $derived(
+  let [branchProps, localProps] = $derived(
     createSplitProps<BranchProps>(['depth', 'value', 'disabled'])(props),
   );
 
   let branchState = $derived(treeView.getBranchState(branchProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, treeView.getBranchProps(branchProps)),
+    mergeProps(localProps, treeView.getBranchProps(branchProps)),
   );
 
   setTreeViewBranchPropsContext(() => branchProps);

package/dist/tree-view/create-tree-view.svelte.js

@@ -7,13 +7,12 @@ export function createTreeView(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(treeView.machine(context), { context });
-    const api = $derived(reflect(() => treeView.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => treeView.connect(state, send, normalizeProps));
 }

package/dist/tree-view/item.svelte

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

package/dist/tree-view/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: TreeViewProps = $props();
 
-  let [treeViewProps, otherProps] = $derived(
+  let [treeViewProps, localProps] = $derived(
     createSplitProps<CreateTreeViewProps>([
       'id',
       'ids',
@@ -39,7 +39,7 @@
 
   let treeView = createTreeView(reflect(() => treeViewProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, treeView.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, treeView.getRootProps()));
 
   setTreeViewContext(treeView);
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-ingredients",
   "type": "module",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "packageManager": "pnpm@9.7.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -100,6 +100,7 @@
     "@zag-js/editable": "0.67.0",
     "@zag-js/file-upload": "0.67.0",
     "@zag-js/floating-panel": "0.67.0",
+    "@zag-js/highlight-word": "0.67.0",
     "@zag-js/hover-card": "0.67.0",
     "@zag-js/i18n-utils": "0.67.0",
     "@zag-js/menu": "0.67.0",