ui-ingredients 0.0.44 → 0.0.45

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

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

package/dist/dialog/root.svelte

@@ -33,18 +33,12 @@
   );
 
   let dialog = createDialog(reflect(() => dialogProps));
-
-  let presence = createPresence({
-    get present() {
-      return dialog.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: dialog.open,
+    })),
+  );
 
   setDialogContext(dialog);
   setPresenceContext(presence);

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

@@ -9,7 +9,7 @@ export function createEditable(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
@@ -24,9 +24,9 @@ export function createEditable(props) {
         edit: props.defaultEdit ?? props.edit,
         getRootNode: environment?.getRootNode,
         'edit.controlled': props.edit != null,
-    })));
+    }));
     const [state, send] = useMachine(editable.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = editable.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -37,6 +37,5 @@ export function createEditable(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/editable/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: EditableProps = $props();
 
-  let [editableProps, otherProps] = $derived(
+  let [editableProps, localProps] = $derived(
     createSplitProps<CreateEditableProps>([
       'id',
       'ids',
@@ -54,7 +54,7 @@
 
   let editable = createEditable(reflect(() => editableProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, editable.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, editable.getRootProps()));
 
   setEditableContext(editable);
 </script>

package/dist/environment-provider/root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
   import type {Snippet} from 'svelte';
-  import {type Environment} from './context.svelte.js';
 
   export interface EnvironmentProviderProps {
     rootNode?:
@@ -20,21 +19,19 @@
 
   let elem: HTMLSpanElement | null = $state(null);
 
-  let getRootNode = $derived.by(() => {
+  function getRootNode() {
     if (rootNode) {
-      return typeof rootNode === 'function' ? rootNode : () => rootNode;
+      return typeof rootNode === 'function' ? rootNode() : rootNode;
     } else {
-      return () => elem?.ownerDocument ?? document;
+      return elem?.ownerDocument ?? document;
     }
-  });
+  }
 
-  let environment: Environment = $derived({
+  setEnvironmentContext({
     getRootNode,
     getDocument: () => getDocument(getRootNode()),
     getWindow: () => getWindow(getRootNode()),
   });
-
-  setEnvironmentContext(() => environment);
 </script>
 
 {@render children()}

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

@@ -1,4 +1,3 @@
-import type { HtmlProps } from '../types.js';
 interface ElementIds {
     root?: string;
     label?: string;
@@ -16,25 +15,5 @@ export interface CreateFieldProps {
 }
 export interface CreateFieldReturn extends ReturnType<typeof createField> {
 }
-export declare function createField(props: CreateFieldProps): {
-    readonly ids: {
-        root: string;
-        label: string;
-        control: string;
-        errorText: string;
-        helperText: string;
-    };
-    readonly disabled: boolean;
-    readonly required: boolean;
-    readonly readOnly: boolean;
-    readonly invalid: boolean;
-    readonly 'aria-describedby': string;
-    getRootProps: () => HtmlProps<"div">;
-    getLabelProps: () => HtmlProps<"label">;
-    getErrorTextProps: () => HtmlProps<"div">;
-    getHelperTextProps: () => HtmlProps<"div">;
-    getInputProps: () => HtmlProps<"input">;
-    getSelectProps: () => HtmlProps<"select">;
-    getTextareaProps: () => HtmlProps<"textarea">;
-};
+export declare function createField(props: CreateFieldProps): any;
 export {};

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

@@ -1,5 +1,6 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { ariaAttr, dataAttr, getDocument, getWindow } from '@zag-js/dom-query';
+import { reflect } from '@zag-js/svelte';
 import { uid } from 'uid';
 import { parts } from './anatomy.js';
 export function createField(props) {
@@ -136,25 +137,13 @@ export function createField(props) {
             'data-readonly': dataAttr(readOnly),
         };
     }
-    return {
-        get ids() {
-            return ids;
-        },
-        get disabled() {
-            return disabled;
-        },
-        get required() {
-            return required;
-        },
-        get readOnly() {
-            return readOnly;
-        },
-        get invalid() {
-            return invalid;
-        },
-        get 'aria-describedby'() {
-            return ariaDescribedby;
-        },
+    return reflect(() => ({
+        ids,
+        disabled,
+        required,
+        readOnly,
+        invalid,
+        'aria-describedby': ariaDescribedby,
         getRootProps,
         getLabelProps,
         getErrorTextProps,
@@ -162,5 +151,5 @@ export function createField(props) {
         getInputProps,
         getSelectProps,
         getTextareaProps,
-    };
+    }));
 }

package/dist/field/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: FieldProps = $props();
 
-  let [fieldProps, otherProps] = $derived(
+  let [fieldProps, localProps] = $derived(
     createSplitProps<CreateFieldProps>([
       'id',
       'ids',
@@ -34,7 +34,7 @@
 
   let field = createField(reflect(() => fieldProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, field.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, field.getRootProps()));
 
   setFieldContext(field);
 </script>

package/dist/file-upload/create-file-upload.svelte.js

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

package/dist/file-upload/item.svelte

@@ -18,12 +18,12 @@
 
   let fileUpload = getFileUploadContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['file'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, fileUpload.getItemProps(itemProps)),
+    mergeProps(localProps, fileUpload.getItemProps(itemProps)),
   );
 
   setFileUploadItemPropsContext(() => itemProps);

package/dist/file-upload/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: FileUploadProps = $props();
 
-  let [fileUploadProps, otherProps] = $derived(
+  let [fileUploadProps, localProps] = $derived(
     createSplitProps<CreateFileUploadProps>([
       'id',
       'ids',
@@ -47,7 +47,7 @@
 
   let fileUpload = createFileUpload(reflect(() => fileUploadProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, fileUpload.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, fileUpload.getRootProps()));
 
   setFileUploadContext(fileUpload);
 </script>

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/resize-trigger.svelte

@@ -15,13 +15,13 @@
 
   let floatingPanel = getFloatingPanelContext();
 
-  let [resizeTriggerProps, otherProps] = $derived(
+  let [resizeTriggerProps, localProps] = $derived(
     createSplitProps<ResizeTriggerProps>([])(props),
   );
 
   let mergedProps = $derived(
     mergeProps(
-      otherProps,
+      localProps,
       floatingPanel.getResizeTriggerProps(resizeTriggerProps),
     ),
   );

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/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 {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 {...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/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/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/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/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/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/item.svelte

@@ -15,7 +15,7 @@
 
   let menu = getMenuContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>([
       'value',
       'valueText',
@@ -26,7 +26,7 @@
 
   let itemState = $derived(menu.getItemState(itemProps));
   let mergedProps = $derived(
-    mergeProps(otherProps, menu.getItemProps(itemProps)),
+    mergeProps(localProps, menu.getItemProps(itemProps)),
   );
 </script>
 

package/dist/menu/option-item.svelte

@@ -21,7 +21,7 @@
 
   let menu = getMenuContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<OptionItemProps>([
       'type',
       'value',
@@ -36,7 +36,7 @@
   let itemState = $derived(menu.getOptionItemState(itemProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, menu.getOptionItemProps(itemProps)),
+    mergeProps(localProps, menu.getOptionItemProps(itemProps)),
   );
 
   setMenuOptionItemPropsContext(() => itemProps);

package/dist/menu/root.svelte

@@ -48,18 +48,12 @@
   );
 
   let menu = createMenu(reflect(() => menuProps));
-
-  let presence = createPresence({
-    get present() {
-      return menu.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: menu.open,
+    })),
+  );
 
   setMenuContext(menu);
   setPresenceContext(presence);

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

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

package/dist/number-input/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: NumberInputProps = $props();
 
-  let [numberInputProps, otherProps] = $derived(
+  let [numberInputProps, localProps] = $derived(
     createSplitProps<CreateNumberInputProps>([
       'id',
       'ids',
@@ -54,7 +54,7 @@
   let numberInput = createNumberInput(reflect(() => numberInputProps));
 
   let mergedProps = $derived(
-    mergeProps(otherProps, numberInput.getRootProps()),
+    mergeProps(localProps, numberInput.getRootProps()),
   );
 
   setNumberInputContext(numberInput);

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

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