ui-ingredients 1.7.0 → 1.9.0

package/dist/environment-provider/environment-provider.svelte

@@ -1,41 +1,41 @@
-<script lang="ts" module>
-  import type {Snippet} from 'svelte';
-
-  export interface EnvironmentProviderProps {
-    rootNode?:
-      | ShadowRoot
-      | Document
-      | Node
-      | (() => ShadowRoot | Document | Node);
-    children: Snippet;
-  }
-</script>
-
-<script lang="ts">
-  import {getDocument, getWindow} from '@zag-js/dom-query';
-  import {setEnvironmentContext} from './enviroment-provider-context.svelte.js';
-
-  let {rootNode, children}: EnvironmentProviderProps = $props();
-
-  let elem: HTMLSpanElement | null = $state(null);
-
-  function getRootNode() {
-    if (rootNode) {
-      return typeof rootNode === 'function' ? rootNode() : rootNode;
-    } else {
-      return elem?.ownerDocument ?? document;
-    }
-  }
-
-  setEnvironmentContext({
-    getRootNode,
-    getDocument: () => getDocument(getRootNode()),
-    getWindow: () => getWindow(getRootNode()),
-  });
-</script>
-
-{@render children()}
-
-{#if !rootNode}
-  <span bind:this={elem} hidden></span>
-{/if}
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+
+  export interface EnvironmentProviderProps {
+    rootNode?:
+      | ShadowRoot
+      | Document
+      | Node
+      | (() => ShadowRoot | Document | Node);
+    children: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import {getDocument, getWindow} from '@zag-js/dom-query';
+  import {setEnvironmentContext} from './environment-provider-context.svelte.js';
+
+  let {rootNode, children}: EnvironmentProviderProps = $props();
+
+  let elem: HTMLSpanElement | null = $state(null);
+
+  function getRootNode() {
+    if (rootNode) {
+      return typeof rootNode === 'function' ? rootNode() : rootNode;
+    } else {
+      return elem?.ownerDocument ?? document;
+    }
+  }
+
+  setEnvironmentContext({
+    getRootNode,
+    getDocument: () => getDocument(getRootNode()),
+    getWindow: () => getWindow(getRootNode()),
+  });
+</script>
+
+{@render children()}
+
+{#if !rootNode}
+  <span bind:this={elem} hidden></span>
+{/if}

package/dist/environment-provider/index.d.ts

@@ -1,2 +1,2 @@
-export { getEnvironmentContext, setEnvironmentContext, type Environment, } from './enviroment-provider-context.svelte.js';
+export { getEnvironmentContext, setEnvironmentContext, type Environment, } from './environment-provider-context.svelte.js';
 export { default as EnvironmentProvider, type EnvironmentProviderProps, } from './environment-provider.svelte';

package/dist/environment-provider/index.js

@@ -1,2 +1,2 @@
-export { getEnvironmentContext, setEnvironmentContext, } from './enviroment-provider-context.svelte.js';
+export { getEnvironmentContext, setEnvironmentContext, } from './environment-provider-context.svelte.js';
 export { default as EnvironmentProvider, } from './environment-provider.svelte';

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

@@ -1,7 +1,7 @@
 import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 import { ariaAttr, dataAttr, getDocument, getWindow } from '@zag-js/dom-query';
 import { reflect } 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 { parts } from './field-anatomy.js';
 export function createField(props) {
     const locale = getLocaleContext();

package/dist/field/field-error-text.svelte

@@ -1,49 +1,49 @@
-<script lang="ts" module>
-  import type {Action} from 'svelte/action';
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface FieldErrorTextProps
-    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 {getFieldContext} from './field-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: FieldErrorTextProps = $props();
-
-  let field = getFieldContext();
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      present: field?.invalid ?? true,
-      ...presenceStrategyProps,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(
-      field?.getErrorTextProps() ?? {},
-      presence.getPresenceProps(),
-      props,
-    ),
-  );
-</script>
-
-{#if presence.mounted}
-  {#if asChild}
-    {@render asChild(presence.setReference, mergedProps)}
-  {:else}
-    <div use:presence.setReference bind:this={ref} {...mergedProps}>
-      {@render children?.()}
-    </div>
-  {/if}
-{/if}
+<script lang="ts" module>
+  import type {Action} from 'svelte/action';
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FieldErrorTextProps
+    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 {getFieldContext} from './field-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: FieldErrorTextProps = $props();
+
+  let field = getFieldContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      present: field?.invalid ?? true,
+      ...presenceStrategyProps,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      field?.getErrorTextProps() ?? {},
+      presence.getPresenceProps(),
+      props,
+    ),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div use:presence.setReference bind:this={ref} {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

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

@@ -1,6 +1,6 @@
 import * as fileUpload from '@zag-js/file-upload';
 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 createFileUpload(props) {

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

@@ -1,6 +1,6 @@
 import * as floatingPanel from '@zag-js/floating-panel';
 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 createFloatingPanel(props) {
     const locale = getLocaleContext();

package/dist/focus-trap/focus-trap.svelte

@@ -37,7 +37,7 @@
 
 <script lang="ts">
   import {browser} from '$app/environment';
-  import {getEnvironmentContext} from '../environment-provider/enviroment-provider-context.svelte.js';
+  import {getEnvironmentContext} from '../environment-provider/environment-provider-context.svelte.js';
   import type {Action, ActionReturn} from 'svelte/action';
   import {createSplitProps} from '../create-split-props.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';

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

@@ -1,6 +1,6 @@
 import * as hoverCard from '@zag-js/hover-card';
 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 createHoverCard(props) {
     const locale = getLocaleContext();

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export * from './locale-provider/index.js';
 export * from './menu/index.js';
 export * from './number-input/index.js';
 export * from './pagination/index.js';
+export * from './password-input/index.js';
 export * from './pin-input/index.js';
 export * from './popover/index.js';
 export * from './portal/index.js';
@@ -52,8 +53,9 @@ export * from './tooltip/index.js';
 export * from './tour/index.js';
 export * from './tree-view/index.js';
 export * from './create-context.svelte.js';
+export * from './create-filter.svelte.js';
 export * from './create-split-props.js';
 export * from './merge-props.js';
-export * from '@zag-js/anatomy';
-export { reflect } from '@zag-js/svelte';
+export { createAnatomy, type Anatomy, type AnatomyInstance, type AnatomyPart, type AnatomyPartName, } from '@zag-js/anatomy';
+export { normalizeProps, portal, reflect, useMachine, type PropTypes, } from '@zag-js/svelte';
 export type { HtmlIngredientProps } from './types.js';

package/dist/index.js

@@ -26,6 +26,7 @@ export * from './locale-provider/index.js';
 export * from './menu/index.js';
 export * from './number-input/index.js';
 export * from './pagination/index.js';
+export * from './password-input/index.js';
 export * from './pin-input/index.js';
 export * from './popover/index.js';
 export * from './portal/index.js';
@@ -52,7 +53,8 @@ export * from './tooltip/index.js';
 export * from './tour/index.js';
 export * from './tree-view/index.js';
 export * from './create-context.svelte.js';
+export * from './create-filter.svelte.js';
 export * from './create-split-props.js';
 export * from './merge-props.js';
-export * from '@zag-js/anatomy';
-export { reflect } from '@zag-js/svelte';
+export { createAnatomy, } from '@zag-js/anatomy';
+export { normalizeProps, portal, reflect, useMachine, } from '@zag-js/svelte';

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

@@ -1,6 +1,6 @@
 import * as listbox from '@zag-js/listbox';
 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 createListbox(props) {
     const locale = getLocaleContext();

package/dist/locale-provider/locale-provider.svelte

@@ -1,22 +1,22 @@
-<script lang="ts" module>
-  import type {Snippet} from 'svelte';
-
-  export interface LocaleProviderProps {
-    locale: string;
-    children: Snippet;
-  }
-</script>
-
-<script lang="ts">
-  import {isRTL} from '@zag-js/i18n-utils';
-  import {setLocaleContext} from './locale-provider-context.svelte.js';
-
-  let {children, ...props}: LocaleProviderProps = $props();
-
-  setLocaleContext(() => ({
-    dir: isRTL(props.locale) ? 'rtl' : 'ltr',
-    locale: props.locale,
-  }));
-</script>
-
-{@render children()}
+<script lang="ts" module>
+  import type {Snippet} from 'svelte';
+
+  export interface LocaleProviderProps {
+    locale: string;
+    children: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import {isRTL} from '@zag-js/i18n-utils';
+  import {setLocaleContext} from './locale-provider-context.svelte.js';
+
+  let {children, ...props}: LocaleProviderProps = $props();
+
+  setLocaleContext(() => ({
+    dir: isRTL(props.locale) ? 'rtl' : 'ltr',
+    locale: props.locale,
+  }));
+</script>
+
+{@render children()}

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

@@ -1,6 +1,6 @@
 import * as menu from '@zag-js/menu';
 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 createMenu(props) {
     const locale = getLocaleContext();

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

@@ -1,6 +1,6 @@
 import * as numberInput from '@zag-js/number-input';
 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 createNumberInput(props) {

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

@@ -1,6 +1,6 @@
 import * as pagination from '@zag-js/pagination';
 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 createPagination(props) {
     const locale = getLocaleContext();

package/dist/password-input/create-password-input.svelte.d.ts

@@ -0,0 +1,6 @@
+import * as passwordInput from '@zag-js/password-input';
+export interface CreatePasswordInputProps extends Omit<passwordInput.Props, 'dir' | 'getRootNode'> {
+}
+export interface CreatePasswordInputReturn extends passwordInput.Api {
+}
+export declare function createPasswordInputContext(props: CreatePasswordInputProps): CreatePasswordInputReturn;

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

@@ -0,0 +1,35 @@
+import * as passwordInput from '@zag-js/password-input';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+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 createPasswordInputContext(props) {
+    const field = getFieldContext();
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const service = useMachine(passwordInput.machine, () => ({
+        dir: locale?.dir,
+        ids: {
+            label: field?.ids.label,
+            input: field?.ids.control,
+        },
+        invalid: field?.invalid,
+        required: field?.required,
+        disabled: field?.disabled,
+        readOnly: field?.readOnly,
+        getRootNode: environment?.getRootNode,
+        ...props,
+    }));
+    return reflect(() => {
+        const api = passwordInput.connect(service, normalizeProps);
+        return {
+            ...api,
+            getInputProps() {
+                return {
+                    'aria-describedby': field?.['aria-describedby'],
+                    ...api.getInputProps(),
+                };
+            },
+        };
+    });
+}

package/dist/password-input/index.d.ts

@@ -0,0 +1,10 @@
+export * as PasswordInput from './password-input.js';
+export type { PasswordInputControlProps } from './password-input-control.svelte';
+export type { PasswordInputIndicatorProps } from './password-input-indicator.svelte';
+export type { PasswordInputInputProps } from './password-input-input.svelte';
+export type { PasswordInputLabelProps } from './password-input-label.svelte';
+export type { PasswordInputProps } from './password-input-root.svelte';
+export type { PasswordInputVisibilityTriggerProps } from './password-input-visibility-trigger.svelte';
+export { createPasswordInputContext, type CreatePasswordInputProps, type CreatePasswordInputReturn, } from './create-password-input.svelte.js';
+export { anatomy as passwordInputAnatomy } from './password-input-anatomy.js';
+export { getPasswordInputContext, setPasswordInputContext, } from './password-input-context.svelte.js';

package/dist/password-input/index.js

@@ -0,0 +1,4 @@
+export * as PasswordInput from './password-input.js';
+export { createPasswordInputContext, } from './create-password-input.svelte.js';
+export { anatomy as passwordInputAnatomy } from './password-input-anatomy.js';
+export { getPasswordInputContext, setPasswordInputContext, } from './password-input-context.svelte.js';

package/dist/password-input/password-input-anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy } from '@zag-js/password-input';

package/dist/password-input/password-input-anatomy.js

@@ -0,0 +1 @@
+export { anatomy } from '@zag-js/password-input';

package/dist/password-input/password-input-context.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { CreatePasswordInputReturn } from './create-password-input.svelte.js';
+export declare const getPasswordInputContext: () => CreatePasswordInputReturn, setPasswordInputContext: (context: CreatePasswordInputReturn | (() => CreatePasswordInputReturn)) => void;

package/dist/password-input/password-input-context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '../create-context.svelte.js';
+export const [getPasswordInputContext, setPasswordInputContext] = createContext('PasswordInput');

package/dist/password-input/password-input-control.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface PasswordInputControlProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPasswordInputContext} from './password-input-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PasswordInputControlProps = $props();
+
+  let passwordInput = getPasswordInputContext();
+  let mergedProps = $derived(
+    mergeProps(passwordInput.getControlProps(), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/password-input/password-input-control.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface PasswordInputControlProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+declare const PasswordInputControl: import("svelte").Component<PasswordInputControlProps, {}, "ref">;
+type PasswordInputControl = ReturnType<typeof PasswordInputControl>;
+export default PasswordInputControl;

package/dist/password-input/password-input-indicator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface PasswordInputIndicatorProps
+    extends HtmlIngredientProps<'span', HTMLSpanElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPasswordInputContext} from './password-input-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PasswordInputIndicatorProps = $props();
+
+  let passwordInput = getPasswordInputContext();
+  let mergedProps = $derived(
+    mergeProps(passwordInput.getIndicatorProps(), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/password-input/password-input-indicator.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface PasswordInputIndicatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
+}
+declare const PasswordInputIndicator: import("svelte").Component<PasswordInputIndicatorProps, {}, "ref">;
+type PasswordInputIndicator = ReturnType<typeof PasswordInputIndicator>;
+export default PasswordInputIndicator;

package/dist/password-input/password-input-input.svelte

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface PasswordInputInputProps
+    extends HtmlIngredientProps<'input', HTMLInputElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPasswordInputContext} from './password-input-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    ...props
+  }: PasswordInputInputProps = $props();
+
+  let passwordInput = getPasswordInputContext();
+  let mergedProps = $derived(mergeProps(passwordInput.getInputProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <input bind:this={ref} {...mergedProps} />
+{/if}

package/dist/password-input/password-input-input.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface PasswordInputInputProps extends HtmlIngredientProps<'input', HTMLInputElement> {
+}
+declare const PasswordInputInput: import("svelte").Component<PasswordInputInputProps, {}, "ref">;
+type PasswordInputInput = ReturnType<typeof PasswordInputInput>;
+export default PasswordInputInput;

package/dist/password-input/password-input-label.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface PasswordInputLabelProps
+    extends HtmlIngredientProps<'label', HTMLLabelElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPasswordInputContext} from './password-input-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PasswordInputLabelProps = $props();
+
+  let passwordInput = getPasswordInputContext();
+  let mergedProps = $derived(mergeProps(passwordInput.getLabelProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <label bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </label>
+{/if}

package/dist/password-input/password-input-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface PasswordInputLabelProps extends HtmlIngredientProps<'label', HTMLLabelElement> {
+}
+declare const PasswordInputLabel: import("svelte").Component<PasswordInputLabelProps, {}, "ref">;
+type PasswordInputLabel = ReturnType<typeof PasswordInputLabel>;
+export default PasswordInputLabel;