ui-ingredients 0.0.44 → 0.0.46

package/README.md

@@ -53,6 +53,7 @@ npm install ui-ingredients
 - [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)

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

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/accordion';
 import type { CreateAccordionReturn } from './create-accordion.svelte.js';
-export declare const getAccordionContext: () => CreateAccordionReturn, setAccordionContext: (context: CreateAccordionReturn | (() => CreateAccordionReturn)) => void;
-export declare const getAccordionItemPropsContext: () => ItemProps, setAccordionItemPropsContext: (context: ItemProps | (() => ItemProps)) => void;
+export declare const getAccordionContext: () => CreateAccordionReturn, setAccordionContext: (context: CreateAccordionReturn | (() => CreateAccordionReturn)) => CreateAccordionReturn;
+export declare const getAccordionItemPropsContext: () => ItemProps, setAccordionItemPropsContext: (context: ItemProps | (() => ItemProps)) => ItemProps;

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

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

package/dist/accordion/item-content.svelte

@@ -10,29 +10,30 @@
   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 {
     getAccordionContext,
     getAccordionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: AccordionItemContentProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: AccordionItemContentProps = $props();
 
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
   let itemsState = $derived(accordion.getItemState(itemProps));
 
   let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence({
-    get present() {
-      return itemsState.expanded;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: itemsState.expanded,
+    })),
+  );
 
   let mergedProps = $derived(
     mergeProps(
@@ -47,7 +48,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/accordion/item-indicator.svelte

@@ -12,7 +12,12 @@
     getAccordionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: AccordionIndicatorProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: AccordionIndicatorProps = $props();
 
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span {...mergedProps}>
+  <span bind:this={e} {...mergedProps}>
     {@render children?.()}
   </span>
 {/if}

package/dist/accordion/item-trigger.svelte

@@ -12,7 +12,12 @@
     getAccordionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: AccordionItemTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: AccordionItemTriggerProps = $props();
 
   let accordion = getAccordionContext();
   let itemProps = getAccordionItemPropsContext();
@@ -25,7 +30,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/accordion/item.svelte

@@ -14,17 +14,17 @@
     setAccordionItemPropsContext,
   } from './context.svelte.js';
 
-  let {asChild, children, ...props}: AccordionItemProps = $props();
+  let {this: e, asChild, children, ...props}: AccordionItemProps = $props();
 
   let accordion = getAccordionContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['value', 'disabled'])(props),
   );
 
   let itemState = $derived(accordion.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, accordion.getItemProps(itemProps)),
+    mergeProps(localProps, accordion.getItemProps(itemProps)),
   );
 
   setAccordionItemPropsContext(() => itemProps);
@@ -33,7 +33,7 @@
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/accordion/root.svelte

@@ -1,63 +1,61 @@
-<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', CreateAccordionReturn>,
-        CreateAccordionProps
-      >,
-      PresenceStrategyProps {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../merge-props.js';
-  import {setPresenceStrategyPropsContext} from '../presence/context.svelte.js';
-  import {reflect} from '@zag-js/svelte';
-  import {createSplitProps} from '@zag-js/utils';
-  import {setAccordionContext} from './context.svelte.js';
-  import {createAccordion} from './create-accordion.svelte.js';
-
-  let {asChild, children, ...props}: AccordionProps = $props();
-
-  let [presenceStrategyProps, otherProps] = $derived(
-    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
-      props,
-    ),
-  );
-
-  let [accordionProps, elementProps] = $derived(
-    createSplitProps<CreateAccordionProps>([
-      'id',
-      'ids',
-      'value',
-      'disabled',
-      'multiple',
-      'orientation',
-      'collapsible',
-      'onFocusChange',
-      'onValueChange',
-    ])(otherProps),
-  );
-
-  let accordion = createAccordion(reflect(() => accordionProps));
-
-  let mergedProps = $derived(
-    mergeProps(elementProps, accordion.getRootProps()),
-  );
-
-  setAccordionContext(accordion);
-  setPresenceStrategyPropsContext(() => presenceStrategyProps);
-</script>
-
-{#if asChild}
-  {@render asChild(mergedProps, accordion)}
-{:else}
-  <div {...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', CreateAccordionReturn>,
+        CreateAccordionProps
+      >,
+      PresenceStrategyProps {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {setPresenceStrategyPropsContext} from '../presence/context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setAccordionContext} from './context.svelte.js';
+  import {createAccordion} from './create-accordion.svelte.js';
+
+  let {this: e, asChild, children, ...props}: AccordionProps = $props();
+
+  let [presenceStrategyProps, rest] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let [accordionProps, localProps] = $derived(
+    createSplitProps<CreateAccordionProps>([
+      'id',
+      'ids',
+      'value',
+      'disabled',
+      'multiple',
+      'orientation',
+      'collapsible',
+      'onFocusChange',
+      'onValueChange',
+    ])(rest),
+  );
+
+  let accordion = createAccordion(reflect(() => accordionProps));
+
+  let mergedProps = $derived(mergeProps(localProps, accordion.getRootProps()));
+
+  setAccordionContext(accordion);
+  setPresenceStrategyPropsContext(() => presenceStrategyProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, accordion)}
+{:else}
+  <div bind:this={e} {...mergedProps}>
+    {@render children?.(accordion)}
+  </div>
+{/if}

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

@@ -1,2 +1,2 @@
 import type { CreateAvatarReturn } from './create-avatar.svelte.js';
-export declare const getAvatarContext: () => CreateAvatarReturn, setAvatarContext: (context: CreateAvatarReturn | (() => CreateAvatarReturn)) => void;
+export declare const getAvatarContext: () => CreateAvatarReturn, setAvatarContext: (context: CreateAvatarReturn | (() => CreateAvatarReturn)) => CreateAvatarReturn;

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

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

package/dist/avatar/fallback.svelte

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

package/dist/avatar/image.svelte

@@ -8,7 +8,7 @@
   import {mergeProps} from '../merge-props.js';
   import {getAvatarContext} from './context.svelte.js';
 
-  let {asChild, ...props}: AvatarImageProps = $props();
+  let {this: e, asChild, ...props}: AvatarImageProps = $props();
 
   let avatar = getAvatarContext();
 
@@ -18,5 +18,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <img {...mergedProps} />
+  <img bind:this={e} {...mergedProps} />
 {/if}

package/dist/avatar/root.svelte

@@ -19,15 +19,15 @@
   import {setAvatarContext} from './context.svelte.js';
   import {createAvatar} from './create-avatar.svelte.js';
 
-  let {asChild, children, ...props}: AvatarProps = $props();
+  let {this: e, asChild, children, ...props}: AvatarProps = $props();
 
-  let [avatarProps, otherProps] = $derived(
+  let [avatarProps, localProps] = $derived(
     createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
   );
 
   let avatar = createAvatar(reflect(() => avatarProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, avatar.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, avatar.getRootProps()));
 
   setAvatarContext(avatar);
 </script>
@@ -35,7 +35,7 @@
 {#if asChild}
   {@render asChild(mergedProps, avatar)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(avatar)}
   </div>
 {/if}

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

@@ -1,2 +1,2 @@
 import type { CreateCarouselReturn } from './create-carousel.svelte.js';
-export declare const getCarouselContext: () => CreateCarouselReturn, setCarouselContext: (context: CreateCarouselReturn | (() => CreateCarouselReturn)) => void;
+export declare const getCarouselContext: () => CreateCarouselReturn, setCarouselContext: (context: CreateCarouselReturn | (() => CreateCarouselReturn)) => CreateCarouselReturn;

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

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

package/dist/carousel/indicator-group.svelte

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

package/dist/carousel/indicator.svelte

@@ -11,23 +11,23 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselIndicatorProps = $props();
+  let {this: e, asChild, children, ...props}: CarouselIndicatorProps = $props();
 
   let carousel = getCarouselContext();
 
-  let [indicatorProps, otherProps] = $derived(
+  let [indicatorProps, localProps] = $derived(
     createSplitProps<IndicatorProps>(['index', 'readOnly'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, carousel.getIndicatorProps(indicatorProps)),
+    mergeProps(localProps, carousel.getIndicatorProps(indicatorProps)),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button type="button" {...mergedProps}>
+  <button bind:this={e} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/carousel/item-group.svelte

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

package/dist/carousel/item.svelte

@@ -11,24 +11,24 @@
   import {createSplitProps} from '@zag-js/utils';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselItemProps = $props();
+  let {this: e, asChild, children, ...props}: CarouselItemProps = $props();
 
   let carousel = getCarouselContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['index'])(props),
   );
 
   let itemState = $derived(carousel.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, carousel.getItemProps(itemProps)),
+    mergeProps(localProps, carousel.getItemProps(itemProps)),
   );
 </script>
 
 {#if asChild}
   {@render asChild(mergedProps, itemState)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(itemState)}
   </div>
 {/if}

package/dist/carousel/next-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselNextTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: CarouselNextTriggerProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -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/carousel/prev-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getCarouselContext} from './context.svelte.js';
 
-  let {asChild, children, ...props}: CarouselPrevTriggerProps = $props();
+  let {
+    this: e,
+    asChild,
+    children,
+    ...props
+  }: CarouselPrevTriggerProps = $props();
 
   let carousel = getCarouselContext();
 
@@ -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/carousel/root.svelte

@@ -19,9 +19,9 @@
   import {setCarouselContext} from './context.svelte.js';
   import {createCarousel} from './create-carousel.svelte.js';
 
-  let {asChild, children, ...props}: CarouselProps = $props();
+  let {this: e, asChild, children, ...props}: CarouselProps = $props();
 
-  let [carouselProps, otherProps] = $derived(
+  let [carouselProps, localProps] = $derived(
     createSplitProps<CreateCarouselProps>([
       'id',
       'ids',
@@ -37,7 +37,7 @@
 
   let carousel = createCarousel(reflect(() => carouselProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, carousel.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, carousel.getRootProps()));
 
   setCarouselContext(carousel);
 </script>
@@ -45,7 +45,7 @@
 {#if asChild}
   {@render asChild(mergedProps, carousel)}
 {:else}
-  <div {...mergedProps}>
+  <div bind:this={e} {...mergedProps}>
     {@render children?.(carousel)}
   </div>
 {/if}

package/dist/carousel/viewport.svelte

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

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

@@ -1,2 +1,2 @@
 import type { CreateCheckboxReturn } from './create-checkbox.svelte.js';
-export declare const getCheckboxContext: () => CreateCheckboxReturn, setCheckboxContext: (context: CreateCheckboxReturn | (() => CreateCheckboxReturn)) => void;
+export declare const getCheckboxContext: () => CreateCheckboxReturn, setCheckboxContext: (context: CreateCheckboxReturn | (() => CreateCheckboxReturn)) => CreateCheckboxReturn;

package/dist/checkbox/control.svelte

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

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

@@ -9,7 +9,7 @@ export function createCheckbox(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 createCheckbox(props) {
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(checkbox.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = checkbox.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -35,6 +35,5 @@ export function createCheckbox(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }