ui-ingredients 1.7.0 → 1.9.0

package/dist/accordion/accordion-item-content.svelte

@@ -1,57 +1,57 @@
-<script lang="ts" module>
-  import type {Action} from 'svelte/action';
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AccordionItemContentProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {reflect} from '@zag-js/svelte';
-  import {getCollapsibleContext} from '../collapsible/collapsible-context.svelte.js';
-  import {mergeProps} from '../merge-props.js';
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {
-    getAccordionContext,
-    getAccordionItemPropsContext,
-  } from './accordion-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AccordionItemContentProps = $props();
-
-  let accordion = getAccordionContext();
-  let itemProps = getAccordionItemPropsContext();
-  let itemsState = $derived(accordion.getItemState(itemProps));
-  let collapsible = getCollapsibleContext();
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: itemsState.expanded,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(
-      collapsible.getContentProps(),
-      accordion.getItemContentProps(itemProps),
-      presence.getPresenceProps(),
-      props,
-    ),
-  );
-</script>
-
-{#if presence.mounted}
-  {#if asChild}
-    {@render asChild(presence.setReference, mergedProps)}
-  {:else}
-    <div bind:this={ref} use:presence.setReference {...mergedProps}>
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts" module>
+  import type {Action} from 'svelte/action';
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AccordionItemContentProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {reflect} from '@zag-js/svelte';
+  import {getCollapsibleContext} from '../collapsible/collapsible-context.svelte.js';
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {
+    getAccordionContext,
+    getAccordionItemPropsContext,
+  } from './accordion-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AccordionItemContentProps = $props();
+
+  let accordion = getAccordionContext();
+  let itemProps = getAccordionItemPropsContext();
+  let itemsState = $derived(accordion.getItemState(itemProps));
+  let collapsible = getCollapsibleContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: itemsState.expanded,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      collapsible.getContentProps(),
+      accordion.getItemContentProps(itemProps),
+      presence.getPresenceProps(),
+      props,
+    ),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

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

@@ -1,6 +1,6 @@
 import * as accordion from '@zag-js/accordion';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createAccordion(props) {
     const locale = getLocaleContext();

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

@@ -1,5 +1,5 @@
 import { getDocument, getWindow } from '@zag-js/dom-query';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 import { parts } from './alert-anatomy.js';
 export function createAlert(props) {

package/dist/alert-dialog/alert-dialog-backdrop.svelte

@@ -1,49 +1,49 @@
-<script lang="ts" module>
-  import type {Action} from 'svelte/action';
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface AlertDialogBackdropProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {reflect} from '@zag-js/svelte';
-  import {mergeProps} from '../merge-props.js';
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: AlertDialogBackdropProps = $props();
-
-  let alertDialog = getAlertDialogContext();
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: alertDialog.open,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(
-      alertDialog.getBackdropProps(),
-      presence.getPresenceProps(),
-      props,
-    ),
-  );
-</script>
-
-{#if presence.mounted}
-  {#if asChild}
-    {@render asChild(presence.setReference, mergedProps)}
-  {:else}
-    <div bind:this={ref} use:presence.setReference {...mergedProps}>
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts" module>
+  import type {Action} from 'svelte/action';
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface AlertDialogBackdropProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {reflect} from '@zag-js/svelte';
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {getAlertDialogContext} from './alert-dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: AlertDialogBackdropProps = $props();
+
+  let alertDialog = getAlertDialogContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: alertDialog.open,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      alertDialog.getBackdropProps(),
+      presence.getPresenceProps(),
+      props,
+    ),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

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

@@ -1,6 +1,6 @@
 import * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 import { mergeProps } from '../merge-props.js';
 import { parts } from './alert-dialog-anatomy.js';

package/dist/anatomy.d.ts

@@ -22,6 +22,7 @@ export { anatomy as listboxAnatomy } from './listbox/listbox-anatomy.js';
 export { anatomy as menuAnatomy } from './menu/menu-anatomy.js';
 export { anatomy as numberInputAnatomy } from './number-input/number-input-anatomy.js';
 export { anatomy as paginationAnatomy } from './pagination/pagination-anatomy.js';
+export { anatomy as passwordInputAnatomy } from './password-input/password-input-anatomy.js';
 export { anatomy as pinInputAnatomy } from './pin-input/pin-input-anatomy.js';
 export { anatomy as popoverAnatomy } from './popover/popover-anatomy.js';
 export { anatomy as progressAnatomy } from './progress/progress-anatomy.js';
@@ -45,4 +46,4 @@ export { anatomy as toggleAnatomy } from './toggle/toggle-anatomy.js';
 export { anatomy as tooltipAnatomy } from './tooltip/tooltip-anatomy.js';
 export { anatomy as tourAnatomy } from './tour/tour-anatomy.js';
 export { anatomy as treeViewAnatomy } from './tree-view/tree-view-anatomy.js';
-export * from '@zag-js/anatomy';
+export { createAnatomy, type Anatomy, type AnatomyInstance, type AnatomyPart, type AnatomyPartName, } from '@zag-js/anatomy';

package/dist/anatomy.js

@@ -22,6 +22,7 @@ export { anatomy as listboxAnatomy } from './listbox/listbox-anatomy.js';
 export { anatomy as menuAnatomy } from './menu/menu-anatomy.js';
 export { anatomy as numberInputAnatomy } from './number-input/number-input-anatomy.js';
 export { anatomy as paginationAnatomy } from './pagination/pagination-anatomy.js';
+export { anatomy as passwordInputAnatomy } from './password-input/password-input-anatomy.js';
 export { anatomy as pinInputAnatomy } from './pin-input/pin-input-anatomy.js';
 export { anatomy as popoverAnatomy } from './popover/popover-anatomy.js';
 export { anatomy as progressAnatomy } from './progress/progress-anatomy.js';
@@ -45,4 +46,4 @@ export { anatomy as toggleAnatomy } from './toggle/toggle-anatomy.js';
 export { anatomy as tooltipAnatomy } from './tooltip/tooltip-anatomy.js';
 export { anatomy as tourAnatomy } from './tour/tour-anatomy.js';
 export { anatomy as treeViewAnatomy } from './tree-view/tree-view-anatomy.js';
-export * from '@zag-js/anatomy';
+export { createAnatomy, } from '@zag-js/anatomy';

package/dist/angle-slider/create-angle-slider.svelte.js

@@ -1,6 +1,6 @@
 import * as angleSlider from '@zag-js/angle-slider';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createAngleSlider(props) {
     const locale = getLocaleContext();

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

@@ -1,6 +1,6 @@
 import * as avatar from '@zag-js/avatar';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createAvatar(props) {
     const locale = getLocaleContext();

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

@@ -1,6 +1,6 @@
 import * as carousel from '@zag-js/carousel';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createCarousel(props) {
     const locale = getLocaleContext();

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

@@ -1,6 +1,6 @@
 import * as checkbox from '@zag-js/checkbox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createCheckbox(props) {

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

@@ -1,6 +1,6 @@
 import * as clipboard from '@zag-js/clipboard';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 export function createClipboard(props) {
     const environment = getEnvironmentContext();
     const service = useMachine(clipboard.machine, () => ({

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

@@ -1,6 +1,6 @@
 import * as collapsible from '@zag-js/collapsible';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createCollapsible(props) {
     const locale = getLocaleContext();

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

@@ -1,6 +1,6 @@
 import * as colorPicker from '@zag-js/color-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 import { parts } from './color-picker-anatomy.js';
 export function createColorPicker(props) {

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

@@ -1,6 +1,6 @@
 import * as combobox from '@zag-js/combobox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createCombobox(props) {

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

@@ -0,0 +1,4 @@
+import { type FilterOptions } from '@zag-js/i18n-utils';
+export interface CreateFilterProps extends FilterOptions {
+}
+export declare function createFilter(props?: CreateFilterProps): import("@zag-js/i18n-utils").FilterReturn;

package/dist/create-filter.svelte.js

@@ -0,0 +1,10 @@
+import { createFilter as zagCreateFilter, } from '@zag-js/i18n-utils';
+import { getLocaleContext } from './locale-provider/locale-provider-context.svelte.js';
+export function createFilter(props = {}) {
+    const locale = getLocaleContext();
+    const options = $derived({
+        ...props,
+        locale: props.locale ?? locale?.locale,
+    });
+    return zagCreateFilter(options);
+}

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

@@ -1,6 +1,6 @@
 import * as datePicker from '@zag-js/date-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createDatePicker(props) {
     const locale = getLocaleContext();

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

@@ -1,6 +1,6 @@
 import * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createDialog(props) {
     const locale = getLocaleContext();

package/dist/dialog/dialog-backdrop.svelte

@@ -1,45 +1,45 @@
-<script lang="ts" module>
-  import type {Action} from 'svelte/action';
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface DialogBackdropProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {reflect} from '@zag-js/svelte';
-  import {mergeProps} from '../merge-props.js';
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {getDialogContext} from './dialog-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DialogBackdropProps = $props();
-
-  let dialog = getDialogContext();
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: dialog.open,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(dialog.getBackdropProps(), presence.getPresenceProps(), props),
-  );
-</script>
-
-{#if presence.mounted}
-  {#if asChild}
-    {@render asChild(presence.setReference, mergedProps)}
-  {:else}
-    <div bind:this={ref} use:presence.setReference {...mergedProps}>
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts" module>
+  import type {Action} from 'svelte/action';
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DialogBackdropProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {reflect} from '@zag-js/svelte';
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {getDialogContext} from './dialog-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DialogBackdropProps = $props();
+
+  let dialog = getDialogContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: dialog.open,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(dialog.getBackdropProps(), presence.getPresenceProps(), props),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

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

@@ -1,6 +1,6 @@
 import * as dialog from '@zag-js/dialog';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 import { parts } from './drawer-anatomy.js';
 export function createDrawer(props) {

package/dist/drawer/drawer-backdrop.svelte

@@ -1,45 +1,45 @@
-<script lang="ts" module>
-  import type {Action} from 'svelte/action';
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface DrawerBackdropProps
-    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
-</script>
-
-<script lang="ts">
-  import {reflect} from '@zag-js/svelte';
-  import {mergeProps} from '../merge-props.js';
-  import {createPresence} from '../presence/create-presence.svelte.js';
-  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
-  import {getDrawerContext} from './drawer-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: DrawerBackdropProps = $props();
-
-  let drawer = getDrawerContext();
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: drawer.open,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(drawer.getBackdropProps(), presence.getPresenceProps(), props),
-  );
-</script>
-
-{#if presence.mounted}
-  {#if asChild}
-    {@render asChild(presence.setReference, mergedProps)}
-  {:else}
-    <div bind:this={ref} use:presence.setReference {...mergedProps}>
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts" module>
+  import type {Action} from 'svelte/action';
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerBackdropProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {reflect} from '@zag-js/svelte';
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerBackdropProps = $props();
+
+  let drawer = getDrawerContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: drawer.open,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(drawer.getBackdropProps(), presence.getPresenceProps(), props),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

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

@@ -1,6 +1,6 @@
 import * as editable from '@zag-js/editable';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createEditable(props) {