ui-ingredients 1.7.0 → 1.9.0

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

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
+  import type {
+    CreatePasswordInputProps,
+    CreatePasswordInputReturn,
+  } from './create-password-input.svelte.js';
+
+  export interface PasswordInputProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, CreatePasswordInputReturn>,
+      Optional<CreatePasswordInputProps, 'id'>
+    > {}
+</script>
+
+<script lang="ts">
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '../create-split-props.js';
+  import {mergeProps} from '../merge-props.js';
+  import {createPasswordInputContext} from './create-password-input.svelte.js';
+  import {setPasswordInputContext} from './password-input-context.svelte.js';
+
+  let {
+    id,
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: PasswordInputProps = $props();
+
+  let uid = $props.id();
+
+  let [createPasswordInputProps, localProps] = $derived(
+    createSplitProps<Omit<CreatePasswordInputProps, 'id'>>([
+      'autoComplete',
+      'defaultVisible',
+      'disabled',
+      'ids',
+      'ignorePasswordManagers',
+      'invalid',
+      'name',
+      'onVisibilityChange',
+      'readOnly',
+      'required',
+      'translations',
+      'visible',
+    ])(props),
+  );
+
+  let PasswordInput = createPasswordInputContext(
+    reflect(() => ({...createPasswordInputProps, id: id ?? uid})),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(PasswordInput.getRootProps(), localProps),
+  );
+
+  setPasswordInputContext(PasswordInput);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, PasswordInput)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.(PasswordInput)}
+  </div>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
+import type { CreatePasswordInputProps, CreatePasswordInputReturn } from './create-password-input.svelte.js';
+export interface PasswordInputProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreatePasswordInputReturn>, Optional<CreatePasswordInputProps, 'id'>> {
+}
+declare const PasswordInputRoot: import("svelte").Component<PasswordInputProps, {}, "ref">;
+type PasswordInputRoot = ReturnType<typeof PasswordInputRoot>;
+export default PasswordInputRoot;

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

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface PasswordInputVisibilityTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</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
+  }: PasswordInputVisibilityTriggerProps = $props();
+
+  let passwordInput = getPasswordInputContext();
+  let mergedProps = $derived(
+    mergeProps(passwordInput.getVisibilityTriggerProps(), props),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

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

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

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

@@ -0,0 +1,6 @@
+export { default as Control } from './password-input-control.svelte';
+export { default as Indicator } from './password-input-indicator.svelte';
+export { default as Input } from './password-input-input.svelte';
+export { default as Label } from './password-input-label.svelte';
+export { default as Root } from './password-input-root.svelte';
+export { default as VisibilityTrigger } from './password-input-visibility-trigger.svelte';

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

@@ -0,0 +1,6 @@
+export { default as Control } from './password-input-control.svelte';
+export { default as Indicator } from './password-input-indicator.svelte';
+export { default as Input } from './password-input-input.svelte';
+export { default as Label } from './password-input-label.svelte';
+export { default as Root } from './password-input-root.svelte';
+export { default as VisibilityTrigger } from './password-input-visibility-trigger.svelte';

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

@@ -1,6 +1,6 @@
 import * as pinInput from '@zag-js/pin-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 createPinInputContext(props) {

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

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

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

@@ -1,7 +1,11 @@
 import * as presence from '@zag-js/presence';
 import { normalizeProps, useMachine } from '@zag-js/svelte';
 export function createPresence(props) {
-    const service = useMachine(presence.machine, props);
+    const service = useMachine(presence.machine, () => ({
+        present: props.present,
+        immediate: props.immediate,
+        onExitComplete: props.onExitComplete,
+    }));
     const api = $derived(presence.connect(service, normalizeProps));
     function getPresenceProps() {
         return {
@@ -10,19 +14,15 @@ export function createPresence(props) {
         };
     }
     let wasPresent = $state(false);
-    $effect(() => {
-        if (!api.present)
-            return;
-        if (wasPresent)
-            return;
-        wasPresent = true;
+    $effect.pre(() => {
+        if (api.present) {
+            wasPresent = true;
+        }
     });
     const unmounted = $derived.by(() => {
-        if (api.present)
-            return false;
-        if (!wasPresent && props.lazyMount)
+        if (!api.present && !wasPresent && props.lazyMount)
             return true;
-        if (wasPresent && !props.keepMounted)
+        if (!props.keepMounted && !api.present && wasPresent)
             return true;
         return false;
     });

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

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

package/dist/qr-code/create-qr-code.svelte.js

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

package/dist/radio-group/create-radio-group.svelte.js

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

package/dist/rating-group/create-rating-group.svelte.js

@@ -1,6 +1,6 @@
 import * as ratingGroup from '@zag-js/rating-group';
 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 createRatingGroup(props) {

package/dist/segment-group/create-segment-group.svelte.js

@@ -1,6 +1,6 @@
 import * as segmentGroup from '@zag-js/radio-group';
 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 './segment-group-anatomy.js';
 export function createSegmentGroup(props) {

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

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

package/dist/signature-pad/create-signature-pad.svelte.js

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

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

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

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

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

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

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

package/dist/steps/steps-completed-content.svelte

@@ -1,50 +1,50 @@
-<script lang="ts" module>
-  import type {Action} from 'svelte/action';
-  import type {HtmlIngredientProps} from '../types.js';
-
-  export interface StepsCompletedContentProps
-    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 {getStepsContext} from './steps-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    asChild,
-    children,
-    ...props
-  }: StepsCompletedContentProps = $props();
-
-  let steps = getStepsContext();
-  let index = $derived(steps.count);
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: steps.value === index,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(
-      steps.getContentProps({index}),
-      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 StepsCompletedContentProps
+    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 {getStepsContext} from './steps-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: StepsCompletedContentProps = $props();
+
+  let steps = getStepsContext();
+  let index = $derived(steps.count);
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: steps.value === index,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      steps.getContentProps({index}),
+      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/steps/steps-content.svelte

@@ -1,54 +1,54 @@
-<script lang="ts" module>
-  import type {ItemProps} from '@zag-js/steps';
-  import type {Action} from 'svelte/action';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
-
-  export interface StepsContentProps
-    extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, never, Action>,
-      ItemProps
-    > {}
-</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 {getStepsContext} from './steps-context.svelte.js';
-
-  let {
-    ref = $bindable(null),
-    index,
-    asChild,
-    children,
-    ...props
-  }: StepsContentProps = $props();
-
-  let steps = getStepsContext();
-  let presenceStrategyProps = getPresenceStrategyPropsContext();
-  let presence = createPresence(
-    reflect(() => ({
-      ...presenceStrategyProps,
-      present: steps.value === index,
-    })),
-  );
-
-  let mergedProps = $derived(
-    mergeProps(
-      steps.getContentProps({index}),
-      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 {ItemProps} from '@zag-js/steps';
+  import type {Action} from 'svelte/action';
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+
+  export interface StepsContentProps
+    extends Assign<
+      HtmlIngredientProps<'div', HTMLDivElement, never, Action>,
+      ItemProps
+    > {}
+</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 {getStepsContext} from './steps-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    index,
+    asChild,
+    children,
+    ...props
+  }: StepsContentProps = $props();
+
+  let steps = getStepsContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: steps.value === index,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      steps.getContentProps({index}),
+      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/switch/create-switch.svelte.js

@@ -1,6 +1,6 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as switch_ from '@zag-js/switch';
-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 createSwitch(props) {

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

@@ -1,6 +1,6 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tabs from '@zag-js/tabs';
-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 createTabs(props) {
     const locale = getLocaleContext();

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

@@ -1,6 +1,6 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tagsInput from '@zag-js/tags-input';
-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 createTagsInput(props) {

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

@@ -1,6 +1,6 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as timePicker from '@zag-js/time-picker';
-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 createTimePicker(props) {
     const locale = getLocaleContext();

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

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

package/dist/toast/toaster.svelte

@@ -10,7 +10,7 @@
   import {normalizeProps, portal, reflect, useMachine} from '@zag-js/svelte';
   import * as toast from '@zag-js/toast';
   import type {Snippet} from '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 {getPortalProviderPropsContext} from '../portal/portal-context.svelte.js';
   import ToastProvider from './toast-provider.svelte';

package/dist/toggle-group/create-toggle-group.svelte.js

@@ -1,6 +1,6 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as toggleGroup from '@zag-js/toggle-group';
-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 createToggleGroup(props) {
     const locale = getLocaleContext();

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

@@ -1,6 +1,6 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tooltip from '@zag-js/tooltip';
-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 createTooltip(props) {
     const locale = getLocaleContext();

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

@@ -1,6 +1,6 @@
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 import * as tour from '@zag-js/tour';
-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 './tour-anatomy.js';
 export function createTour(props) {