ui-ingredients 1.6.0 → 1.8.0

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/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';

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';

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/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/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/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) {

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/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';

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';

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/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;