ui-ingredients 0.0.44 → 0.0.46

package/dist/floating-panel/create-floating-panel.svelte.js

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

package/dist/floating-panel/drag-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelDragTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelDragTriggerProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
 
@@ -21,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/floating-panel/header.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelHeaderProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelHeaderProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/floating-panel/maximize-trigger.svelte

@@ -9,8 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelMaximizeTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelMaximizeTriggerProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
 
@@ -22,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/floating-panel/minimize-trigger.svelte

@@ -9,8 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelMinimizeTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelMinimizeTriggerProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
 
@@ -22,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/floating-panel/positioner.svelte

@@ -10,7 +10,12 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelPositionerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelPositionerProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
   let presence = getPresenceContext();
@@ -28,7 +33,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <div {...mergedProps}>
+    <div bind:this={e} {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/floating-panel/resize-trigger.svelte

@@ -11,17 +11,22 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelResizeTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelResizeTriggerProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
 
-  let [resizeTriggerProps, otherProps] = $derived(
+  let [resizeTriggerProps, localProps] = $derived(
     createSplitProps<ResizeTriggerProps>([])(props),
   );
 
   let mergedProps = $derived(
     mergeProps(
-      otherProps,
+      localProps,
       floatingPanel.getResizeTriggerProps(resizeTriggerProps),
     ),
   );
@@ -30,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/floating-panel/restore-trigger.svelte

@@ -9,8 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelRestoreTriggerProps =
-    $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelRestoreTriggerProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
 
@@ -22,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/floating-panel/root.svelte

@@ -31,17 +31,12 @@
 
   let floatingPanel = createFloatingPanel(reflect(() => floatingPanelProps));
 
-  let presence = createPresence({
-    get present() {
-      return floatingPanel.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: floatingPanel.open,
+    })),
+  );
 
   setFloatingPanelContext(floatingPanel);
   setPresenceContext(presence);

package/dist/floating-panel/title.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelTitleProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelTitleProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/floating-panel/trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getFloatingPanelContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: FloatingPanelTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: FloatingPanelTriggerProps = $props();
 
   let floatingPanel = getFloatingPanelContext();
 
@@ -21,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/highlight/highlight.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {HighlightWordProps} from '@zag-js/highlight-word';
+
+  export interface HighlightProps
+    extends Assign<
+      Omit<HtmlIngredientProps<'div'>, 'children'>,
+      HighlightWordProps
+    > {}
+</script>
+
+<script lang="ts">
+  import {highlightWord} from '@zag-js/highlight-word';
+  import {createSplitProps} from '@zag-js/utils';
+
+  let {this: e, asChild, ...props}: HighlightProps = $props();
+
+  let [highlightProps, localProps] = $derived(
+    createSplitProps<HighlightWordProps>([
+      'text',
+      'query',
+      'matchAll',
+      'ignoreCase',
+    ])(props),
+  );
+
+  let chunks = $derived(highlightWord(highlightProps));
+</script>
+
+{#if asChild}
+  {@render asChild(localProps)}
+{:else}
+  <div bind:this={e} {...localProps}>
+    {#each chunks as chunk}
+      {#if chunk.match}
+        <mark>{chunk.text}</mark>
+      {:else}
+        {chunk.text}
+      {/if}
+    {/each}
+  </div>
+{/if}

package/dist/highlight/highlight.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 Highlight: $$__sveltets_2_IsomorphicComponent<HighlightProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Highlight = InstanceType<typeof Highlight>;
+export default Highlight;

package/dist/highlight/index.d.ts

@@ -0,0 +1 @@
+export { default as Highlight, type HighlightProps } from './highlight.svelte';

package/dist/highlight/index.js

@@ -0,0 +1 @@
+export { default as Highlight } from './highlight.svelte';

package/dist/hover-card/arrow-tip.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getHoverCardContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: HoverCardArrowTipProps = $props();
+  let {this: e, asChild, children, ...props}: HoverCardArrowTipProps = $props();
 
   let hoverCard = getHoverCardContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/hover-card/arrow.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getHoverCardContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: HoverCardArrowProps = $props();
+  let {this: e, asChild, children, ...props}: HoverCardArrowProps = $props();
 
   let hoverCard = getHoverCardContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/hover-card/content.svelte

@@ -11,7 +11,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getHoverCardContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: HoverCardContentProps = $props();
+  let {this: e, asChild, children, ...props}: HoverCardContentProps = $props();
 
   let hoverCard = getHoverCardContext();
   let presence = getPresenceContext();
@@ -25,7 +25,7 @@
   {#if asChild}
     {@render asChild(presence.ref, mergedProps)}
   {:else}
-    <div use:presence.ref {...mergedProps}>
+    <div bind:this={e} use:presence.ref {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/hover-card/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { CreateHoverCardReturn } from './create-hover-card.svelte.js';
-export declare const getHoverCardContext: () => CreateHoverCardReturn, setHoverCardContext: (context: CreateHoverCardReturn | (() => CreateHoverCardReturn)) => void;
+export declare const getHoverCardContext: () => CreateHoverCardReturn, setHoverCardContext: (context: CreateHoverCardReturn | (() => CreateHoverCardReturn)) => CreateHoverCardReturn;

package/dist/hover-card/create-hover-card.svelte.js

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

package/dist/hover-card/positioner.svelte

@@ -10,7 +10,12 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getHoverCardContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: HoverCardPositionerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: HoverCardPositionerProps = $props();
 
   let hoverCard = getHoverCardContext();
   let presence = getPresenceContext();
@@ -28,7 +33,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <div {...mergedProps}>
+    <div bind:this={e} {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/hover-card/root.svelte

@@ -38,17 +38,12 @@
 
   let hoverCard = createHoverCard(reflect(() => hoverCardProps));
 
-  let presence = createPresence({
-    get present() {
-      return hoverCard.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: hoverCard.open,
+    })),
+  );
 
   setHoverCardContext(hoverCard);
   setPresenceContext(presence);

package/dist/hover-card/trigger.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getHoverCardContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: HoverCardTriggerProps = $props();
+  let {this: e, asChild, children, ...props}: HoverCardTriggerProps = $props();
 
   let hoverCard = getHoverCardContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <a {...mergedProps}>
+  <a bind:this={e} {...mergedProps}>
     {@render children?.()}
   </a>
 {/if}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from './environment-provider/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
 export * from './floating-panel/index.js';
+export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';

package/dist/index.js

@@ -13,6 +13,7 @@ export * from './environment-provider/index.js';
 export * from './field/index.js';
 export * from './file-upload/index.js';
 export * from './floating-panel/index.js';
+export * from './highlight/index.js';
 export * from './hover-card/index.js';
 export * from './locale-provider/index.js';
 export * from './menu/index.js';

package/dist/locale-provider/context.svelte.d.ts

@@ -1,2 +1,2 @@
 import type { Locale } from '@zag-js/i18n-utils';
-export declare const getLocaleContext: () => Locale, setLocaleContext: (context: Locale | (() => Locale)) => void;
+export declare const getLocaleContext: () => Locale, setLocaleContext: (context: Locale | (() => Locale)) => Locale;

package/dist/locale-provider/root.svelte

@@ -8,17 +8,19 @@
 </script>
 
 <script lang="ts">
-  import {isRTL, type Locale} from '@zag-js/i18n-utils';
+  import {isRTL} from '@zag-js/i18n-utils';
   import {setLocaleContext} from './context.svelte.js';
 
   let {children, ...props}: LocaleProviderProps = $props();
 
-  let locale: Locale = $derived({
-    locale: props.locale,
-    dir: isRTL(props.locale) ? 'rtl' : 'ltr',
+  setLocaleContext({
+    get locale() {
+      return props.locale;
+    },
+    get dir() {
+      return isRTL(props.locale) ? 'rtl' : 'ltr';
+    },
   });
-
-  setLocaleContext(() => locale);
 </script>
 
 {@render children()}

package/dist/menu/arrow-tip.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuArrowTipProps = $props();
+  let {this: e, asChild, children, ...props}: MenuArrowTipProps = $props();
 
   let menu = getMenuContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/menu/arrow.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuArrowProps = $props();
+  let {this: e, asChild, children, ...props}: MenuArrowProps = $props();
 
   let menu = getMenuContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/menu/content.svelte

@@ -11,7 +11,7 @@
   import {getPresenceContext} from '../presence/context.svelte.js';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuContentProps = $props();
+  let {this: e, asChild, children, ...props}: MenuContentProps = $props();
 
   let menu = getMenuContext();
   let presence = getPresenceContext();
@@ -25,7 +25,7 @@
   {#if asChild}
     {@render asChild(presence.ref, mergedProps)}
   {:else}
-    <div use:presence.ref {...mergedProps}>
+    <div bind:this={e} use:presence.ref {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/menu/context-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuContextTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: MenuContextTriggerProps = $props();
 
   let menu = getMenuContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/menu/context.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { ItemGroupProps, OptionItemProps } from '@zag-js/menu';
 import type { CreateMenuReturn } from './create-menu.svelte.js';
-export declare const getMenuContext: () => CreateMenuReturn, setMenuContext: (context: CreateMenuReturn | (() => CreateMenuReturn)) => void;
-export declare const getMenuItemGroupPropsContext: () => ItemGroupProps, setMenuItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => void;
-export declare const getMenuOptionItemPropsContext: () => OptionItemProps, setMenuOptionItemPropsContext: (context: OptionItemProps | (() => OptionItemProps)) => void;
+export declare const getMenuContext: () => CreateMenuReturn, setMenuContext: (context: CreateMenuReturn | (() => CreateMenuReturn)) => CreateMenuReturn;
+export declare const getMenuItemGroupPropsContext: () => ItemGroupProps, setMenuItemGroupPropsContext: (context: ItemGroupProps | (() => ItemGroupProps)) => ItemGroupProps;
+export declare const getMenuOptionItemPropsContext: () => OptionItemProps, setMenuOptionItemPropsContext: (context: OptionItemProps | (() => OptionItemProps)) => OptionItemProps;

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

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

package/dist/menu/indicator.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getMenuContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: MenuIndicatorProps = $props();
+  let {this: e, asChild, children, ...props}: MenuIndicatorProps = $props();
 
   let menu = getMenuContext();
 
@@ -18,7 +18,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}