@ark-ui/react 5.9.1 → 5.10.0

package/dist/components/collection.d.cts

@@ -1,6 +1,6 @@
 import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
-export type { CollectionItem, ListCollection, SelectionMode } from '@zag-js/collection';
 export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';
 export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
 export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
+export type { CollectionItem, ListCollection, SelectionMode, CollectionOptions, TreeCollectionOptions, GridCollectionOptions, } from '@zag-js/collection';

package/dist/components/collection.d.ts

@@ -1,6 +1,6 @@
 import { CollectionItem, CollectionOptions, FilePathTreeNode, ListCollection, TreeCollection, TreeCollectionOptions, TreeNode } from '@zag-js/collection';
-export type { CollectionItem, ListCollection, SelectionMode } from '@zag-js/collection';
 export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
 export type { TreeCollection, TreeNode } from '@zag-js/collection';
 export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
 export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
+export type { CollectionItem, ListCollection, SelectionMode, CollectionOptions, TreeCollectionOptions, GridCollectionOptions, } from '@zag-js/collection';

package/dist/components/field/use-field.cjs

@@ -5,12 +5,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const domQuery = require('@zag-js/dom-query');
 const react = require('react');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useSafeLayoutEffect = require('../../utils/use-safe-layout-effect.cjs');
 const useFieldsetContext = require('../fieldset/use-fieldset-context.cjs');
 const field_anatomy = require('./field.anatomy.cjs');
 
 const useField = (props = {}) => {
   const fieldset = useFieldsetContext.useFieldsetContext();
+  const env = useEnvironmentContext.useEnvironmentContext();
   const { ids, disabled = Boolean(fieldset?.disabled), invalid = false, readOnly = false, required = false } = props;
   const [hasErrorText, setHasErrorText] = react.useState(false);
   const [hasHelperText, setHasHelperText] = react.useState(false);
@@ -23,17 +25,17 @@ const useField = (props = {}) => {
   useSafeLayoutEffect.useSafeLayoutEffect(() => {
     const rootNode = rootRef.current;
     if (!rootNode) return;
-    const win = domQuery.getWindow(rootNode);
-    const doc = win.document;
     const checkTextElements = () => {
-      setHasErrorText(!!doc.getElementById(errorTextId));
-      setHasHelperText(!!doc.getElementById(helperTextId));
+      const docOrShadowRoot = env.getRootNode();
+      setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
+      setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
     };
     checkTextElements();
+    const win = env.getWindow();
     const observer = new win.MutationObserver(checkTextElements);
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
-  }, [errorTextId, helperTextId]);
+  }, [env, errorTextId, helperTextId]);
   const labelIds = react.useMemo(() => {
     const ids2 = [];
     if (hasErrorText && invalid) ids2.push(errorTextId);

package/dist/components/field/use-field.js

@@ -1,12 +1,14 @@
 'use client';
-import { getWindow, dataAttr, ariaAttr } from '@zag-js/dom-query';
+import { dataAttr, ariaAttr } from '@zag-js/dom-query';
 import { useState, useId, useRef, useMemo } from 'react';
+import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
 import { useFieldsetContext } from '../fieldset/use-fieldset-context.js';
 import { parts } from './field.anatomy.js';
 
 const useField = (props = {}) => {
   const fieldset = useFieldsetContext();
+  const env = useEnvironmentContext();
   const { ids, disabled = Boolean(fieldset?.disabled), invalid = false, readOnly = false, required = false } = props;
   const [hasErrorText, setHasErrorText] = useState(false);
   const [hasHelperText, setHasHelperText] = useState(false);
@@ -19,17 +21,17 @@ const useField = (props = {}) => {
   useSafeLayoutEffect(() => {
     const rootNode = rootRef.current;
     if (!rootNode) return;
-    const win = getWindow(rootNode);
-    const doc = win.document;
     const checkTextElements = () => {
-      setHasErrorText(!!doc.getElementById(errorTextId));
-      setHasHelperText(!!doc.getElementById(helperTextId));
+      const docOrShadowRoot = env.getRootNode();
+      setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
+      setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
     };
     checkTextElements();
+    const win = env.getWindow();
     const observer = new win.MutationObserver(checkTextElements);
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
-  }, [errorTextId, helperTextId]);
+  }, [env, errorTextId, helperTextId]);
   const labelIds = useMemo(() => {
     const ids2 = [];
     if (hasErrorText && invalid) ids2.push(errorTextId);

package/dist/components/fieldset/index.cjs

@@ -9,6 +9,7 @@ const fieldsetLegend = require('./fieldset-legend.cjs');
 const fieldsetRoot = require('./fieldset-root.cjs');
 const fieldsetRootProvider = require('./fieldset-root-provider.cjs');
 const fieldset_anatomy = require('./fieldset.anatomy.cjs');
+const useFieldset = require('./use-fieldset.cjs');
 const useFieldsetContext = require('./use-fieldset-context.cjs');
 const fieldset = require('./fieldset.cjs');
 
@@ -21,5 +22,6 @@ exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
 exports.FieldsetRoot = fieldsetRoot.FieldsetRoot;
 exports.FieldsetRootProvider = fieldsetRootProvider.FieldsetRootProvider;
 exports.fieldsetAnatomy = fieldset_anatomy.fieldsetAnatomy;
+exports.useFieldset = useFieldset.useFieldset;
 exports.useFieldsetContext = useFieldsetContext.useFieldsetContext;
 exports.Fieldset = fieldset;

package/dist/components/fieldset/index.d.cts

@@ -5,5 +5,6 @@ export { FieldsetLegend, type FieldsetLegendBaseProps, type FieldsetLegendProps
 export { FieldsetRoot, type FieldsetRootBaseProps, type FieldsetRootProps } from './fieldset-root';
 export { FieldsetRootProvider, type FieldsetRootProviderBaseProps, type FieldsetRootProviderProps, } from './fieldset-root-provider';
 export { fieldsetAnatomy } from './fieldset.anatomy';
+export { useFieldset, type UseFieldsetProps, type UseFieldsetReturn } from './use-fieldset';
 export { useFieldsetContext, type UseFieldsetContext } from './use-fieldset-context';
 export * as Fieldset from './fieldset';

package/dist/components/fieldset/index.d.ts

@@ -5,5 +5,6 @@ export { FieldsetLegend, type FieldsetLegendBaseProps, type FieldsetLegendProps
 export { FieldsetRoot, type FieldsetRootBaseProps, type FieldsetRootProps } from './fieldset-root';
 export { FieldsetRootProvider, type FieldsetRootProviderBaseProps, type FieldsetRootProviderProps, } from './fieldset-root-provider';
 export { fieldsetAnatomy } from './fieldset.anatomy';
+export { useFieldset, type UseFieldsetProps, type UseFieldsetReturn } from './use-fieldset';
 export { useFieldsetContext, type UseFieldsetContext } from './use-fieldset-context';
 export * as Fieldset from './fieldset';

package/dist/components/fieldset/index.js

@@ -5,6 +5,7 @@ export { FieldsetLegend } from './fieldset-legend.js';
 export { FieldsetRoot } from './fieldset-root.js';
 export { FieldsetRootProvider } from './fieldset-root-provider.js';
 export { fieldsetAnatomy } from './fieldset.anatomy.js';
+export { useFieldset } from './use-fieldset.js';
 export { useFieldsetContext } from './use-fieldset-context.js';
 import * as fieldset from './fieldset.js';
 export { fieldset as Fieldset };

package/dist/components/fieldset/use-fieldset.cjs

@@ -5,11 +5,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const domQuery = require('@zag-js/dom-query');
 const react = require('react');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useSafeLayoutEffect = require('../../utils/use-safe-layout-effect.cjs');
 const fieldset_anatomy = require('./fieldset.anatomy.cjs');
 
 const useFieldset = (props = {}) => {
   const { disabled = false, invalid = false } = props;
+  const env = useEnvironmentContext.useEnvironmentContext();
   const hasErrorText = react.useRef(false);
   const hasHelperText = react.useRef(false);
   const id = props.id ?? react.useId();
@@ -19,17 +21,17 @@ const useFieldset = (props = {}) => {
   useSafeLayoutEffect.useSafeLayoutEffect(() => {
     const rootNode = rootRef.current;
     if (!rootNode) return;
-    const win = domQuery.getWindow(rootNode);
-    const doc = win.document;
     const checkTextElements = () => {
-      hasErrorText.current = !!doc.getElementById(errorTextId);
-      hasHelperText.current = !!doc.getElementById(helperTextId);
+      const docOrShadowRoot = env.getRootNode();
+      hasErrorText.current = !!docOrShadowRoot.getElementById(errorTextId);
+      hasHelperText.current = !!docOrShadowRoot.getElementById(helperTextId);
     };
     checkTextElements();
+    const win = env.getWindow();
     const observer = new win.MutationObserver(checkTextElements);
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
-  }, [errorTextId, helperTextId]);
+  }, [env, errorTextId, helperTextId]);
   const labelIds = react.useMemo(() => {
     const ids = [];
     if (hasErrorText.current && invalid) ids.push(errorTextId);
@@ -41,8 +43,8 @@ const useFieldset = (props = {}) => {
       ...fieldset_anatomy.parts.root.attrs,
       ref: rootRef,
       disabled,
-      "data-disabled": disabled ? "true" : void 0,
-      "data-invalid": invalid ? "true" : void 0,
+      "data-disabled": domQuery.dataAttr(disabled),
+      "data-invalid": domQuery.dataAttr(invalid),
       "aria-describedby": labelIds
     }),
     [disabled, invalid, labelIds]
@@ -50,8 +52,8 @@ const useFieldset = (props = {}) => {
   const getLegendProps = react.useMemo(
     () => () => ({
       ...fieldset_anatomy.parts.legend.attrs,
-      "data-disabled": disabled ? "true" : void 0,
-      "data-invalid": invalid ? "true" : void 0
+      "data-disabled": domQuery.dataAttr(disabled),
+      "data-invalid": domQuery.dataAttr(invalid)
     }),
     [disabled, invalid]
   );

package/dist/components/fieldset/use-fieldset.js

@@ -1,11 +1,13 @@
 'use client';
-import { getWindow } from '@zag-js/dom-query';
+import { dataAttr } from '@zag-js/dom-query';
 import { useRef, useId, useMemo } from 'react';
+import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect.js';
 import { parts } from './fieldset.anatomy.js';
 
 const useFieldset = (props = {}) => {
   const { disabled = false, invalid = false } = props;
+  const env = useEnvironmentContext();
   const hasErrorText = useRef(false);
   const hasHelperText = useRef(false);
   const id = props.id ?? useId();
@@ -15,17 +17,17 @@ const useFieldset = (props = {}) => {
   useSafeLayoutEffect(() => {
     const rootNode = rootRef.current;
     if (!rootNode) return;
-    const win = getWindow(rootNode);
-    const doc = win.document;
     const checkTextElements = () => {
-      hasErrorText.current = !!doc.getElementById(errorTextId);
-      hasHelperText.current = !!doc.getElementById(helperTextId);
+      const docOrShadowRoot = env.getRootNode();
+      hasErrorText.current = !!docOrShadowRoot.getElementById(errorTextId);
+      hasHelperText.current = !!docOrShadowRoot.getElementById(helperTextId);
     };
     checkTextElements();
+    const win = env.getWindow();
     const observer = new win.MutationObserver(checkTextElements);
     observer.observe(rootNode, { childList: true, subtree: true });
     return () => observer.disconnect();
-  }, [errorTextId, helperTextId]);
+  }, [env, errorTextId, helperTextId]);
   const labelIds = useMemo(() => {
     const ids = [];
     if (hasErrorText.current && invalid) ids.push(errorTextId);
@@ -37,8 +39,8 @@ const useFieldset = (props = {}) => {
       ...parts.root.attrs,
       ref: rootRef,
       disabled,
-      "data-disabled": disabled ? "true" : void 0,
-      "data-invalid": invalid ? "true" : void 0,
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid),
       "aria-describedby": labelIds
     }),
     [disabled, invalid, labelIds]
@@ -46,8 +48,8 @@ const useFieldset = (props = {}) => {
   const getLegendProps = useMemo(
     () => () => ({
       ...parts.legend.attrs,
-      "data-disabled": disabled ? "true" : void 0,
-      "data-invalid": invalid ? "true" : void 0
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid)
     }),
     [disabled, invalid]
   );

package/dist/components/index.cjs

@@ -222,6 +222,7 @@ const fieldsetLegend = require('./fieldset/fieldset-legend.cjs');
 const fieldsetRoot = require('./fieldset/fieldset-root.cjs');
 const fieldsetRootProvider = require('./fieldset/fieldset-root-provider.cjs');
 const fieldset_anatomy = require('./fieldset/fieldset.anatomy.cjs');
+const useFieldset = require('./fieldset/use-fieldset.cjs');
 const useFieldsetContext = require('./fieldset/use-fieldset-context.cjs');
 const fieldset = require('./fieldset/fieldset.cjs');
 const fileUploadClearTrigger = require('./file-upload/file-upload-clear-trigger.cjs');
@@ -341,6 +342,17 @@ const paginationRootProvider = require('./pagination/pagination-root-provider.cj
 const usePagination = require('./pagination/use-pagination.cjs');
 const usePaginationContext = require('./pagination/use-pagination-context.cjs');
 const pagination$1 = require('./pagination/pagination.cjs');
+const passwordInputContext = require('./password-input/password-input-context.cjs');
+const passwordInputControl = require('./password-input/password-input-control.cjs');
+const passwordInputIndicator = require('./password-input/password-input-indicator.cjs');
+const passwordInputInput = require('./password-input/password-input-input.cjs');
+const passwordInputLabel = require('./password-input/password-input-label.cjs');
+const passwordInputRoot = require('./password-input/password-input-root.cjs');
+const passwordInputRootProvider = require('./password-input/password-input-root-provider.cjs');
+const passwordInputVisibilityTrigger = require('./password-input/password-input-visibility-trigger.cjs');
+const usePasswordInput = require('./password-input/use-password-input.cjs');
+const usePasswordInputContext = require('./password-input/use-password-input-context.cjs');
+const passwordInput$1 = require('./password-input/password-input.cjs');
 const pinInputContext = require('./pin-input/pin-input-context.cjs');
 const pinInputControl = require('./pin-input/pin-input-control.cjs');
 const pinInputHiddenInput = require('./pin-input/pin-input-hidden-input.cjs');
@@ -669,6 +681,7 @@ const listbox = require('@zag-js/listbox');
 const menu = require('@zag-js/menu');
 const numberInput = require('@zag-js/number-input');
 const pagination = require('@zag-js/pagination');
+const passwordInput = require('@zag-js/password-input');
 const pinInput = require('@zag-js/pin-input');
 const popover = require('@zag-js/popover');
 const progress = require('@zag-js/progress');
@@ -921,6 +934,7 @@ exports.FieldsetLegend = fieldsetLegend.FieldsetLegend;
 exports.FieldsetRoot = fieldsetRoot.FieldsetRoot;
 exports.FieldsetRootProvider = fieldsetRootProvider.FieldsetRootProvider;
 exports.fieldsetAnatomy = fieldset_anatomy.fieldsetAnatomy;
+exports.useFieldset = useFieldset.useFieldset;
 exports.useFieldsetContext = useFieldsetContext.useFieldsetContext;
 exports.Fieldset = fieldset;
 exports.FileUploadClearTrigger = fileUploadClearTrigger.FileUploadClearTrigger;
@@ -1040,6 +1054,17 @@ exports.PaginationRootProvider = paginationRootProvider.PaginationRootProvider;
 exports.usePagination = usePagination.usePagination;
 exports.usePaginationContext = usePaginationContext.usePaginationContext;
 exports.Pagination = pagination$1;
+exports.PasswordInputContext = passwordInputContext.PasswordInputContext;
+exports.PasswordInputControl = passwordInputControl.PasswordInputControl;
+exports.PasswordInputIndicator = passwordInputIndicator.PasswordInputIndicator;
+exports.PasswordInputInput = passwordInputInput.PasswordInputInput;
+exports.PasswordInputLabel = passwordInputLabel.PasswordInputLabel;
+exports.PasswordInputRoot = passwordInputRoot.PasswordInputRoot;
+exports.PasswordInputRootProvider = passwordInputRootProvider.PasswordInputRootProvider;
+exports.PasswordInputVisibilityTrigger = passwordInputVisibilityTrigger.PasswordInputVisibilityTrigger;
+exports.usePasswordInput = usePasswordInput.usePasswordInput;
+exports.usePasswordInputContext = usePasswordInputContext.usePasswordInputContext;
+exports.PasswordInput = passwordInput$1;
 exports.PinInputContext = pinInputContext.PinInputContext;
 exports.PinInputControl = pinInputControl.PinInputControl;
 exports.PinInputHiddenInput = pinInputHiddenInput.PinInputHiddenInput;
@@ -1420,6 +1445,10 @@ Object.defineProperty(exports, "paginationAnatomy", {
 	enumerable: true,
 	get: () => pagination.anatomy
 });
+Object.defineProperty(exports, "passwordInputAnatomy", {
+	enumerable: true,
+	get: () => passwordInput.anatomy
+});
 Object.defineProperty(exports, "pinInputAnatomy", {
 	enumerable: true,
 	get: () => pinInput.anatomy

package/dist/components/index.d.cts

@@ -26,6 +26,7 @@ export * from './listbox';
 export * from './menu';
 export * from './number-input';
 export * from './pagination';
+export * from './password-input';
 export * from './pin-input';
 export * from './popover';
 export * from './portal';

package/dist/components/index.d.ts

@@ -26,6 +26,7 @@ export * from './listbox';
 export * from './menu';
 export * from './number-input';
 export * from './pagination';
+export * from './password-input';
 export * from './pin-input';
 export * from './popover';
 export * from './portal';

package/dist/components/index.js

@@ -231,6 +231,7 @@ export { FieldsetLegend } from './fieldset/fieldset-legend.js';
 export { FieldsetRoot } from './fieldset/fieldset-root.js';
 export { FieldsetRootProvider } from './fieldset/fieldset-root-provider.js';
 export { fieldsetAnatomy } from './fieldset/fieldset.anatomy.js';
+export { useFieldset } from './fieldset/use-fieldset.js';
 export { useFieldsetContext } from './fieldset/use-fieldset-context.js';
 import * as fieldset from './fieldset/fieldset.js';
 export { fieldset as Fieldset };
@@ -359,6 +360,18 @@ export { usePagination } from './pagination/use-pagination.js';
 export { usePaginationContext } from './pagination/use-pagination-context.js';
 import * as pagination from './pagination/pagination.js';
 export { pagination as Pagination };
+export { PasswordInputContext } from './password-input/password-input-context.js';
+export { PasswordInputControl } from './password-input/password-input-control.js';
+export { PasswordInputIndicator } from './password-input/password-input-indicator.js';
+export { PasswordInputInput } from './password-input/password-input-input.js';
+export { PasswordInputLabel } from './password-input/password-input-label.js';
+export { PasswordInputRoot } from './password-input/password-input-root.js';
+export { PasswordInputRootProvider } from './password-input/password-input-root-provider.js';
+export { PasswordInputVisibilityTrigger } from './password-input/password-input-visibility-trigger.js';
+export { usePasswordInput } from './password-input/use-password-input.js';
+export { usePasswordInputContext } from './password-input/use-password-input-context.js';
+import * as passwordInput from './password-input/password-input.js';
+export { passwordInput as PasswordInput };
 export { PinInputContext } from './pin-input/pin-input-context.js';
 export { PinInputControl } from './pin-input/pin-input-control.js';
 export { PinInputHiddenInput } from './pin-input/pin-input-hidden-input.js';
@@ -710,6 +723,7 @@ export { anatomy as listboxAnatomy } from '@zag-js/listbox';
 export { anatomy as menuAnatomy } from '@zag-js/menu';
 export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
 export { anatomy as paginationAnatomy } from '@zag-js/pagination';
+export { anatomy as passwordInputAnatomy } from '@zag-js/password-input';
 export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
 export { anatomy as popoverAnatomy } from '@zag-js/popover';
 export { anatomy as progressAnatomy } from '@zag-js/progress';

package/dist/components/password-input/index.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const passwordInputContext = require('./password-input-context.cjs');
+const passwordInputControl = require('./password-input-control.cjs');
+const passwordInputIndicator = require('./password-input-indicator.cjs');
+const passwordInputInput = require('./password-input-input.cjs');
+const passwordInputLabel = require('./password-input-label.cjs');
+const passwordInputRoot = require('./password-input-root.cjs');
+const passwordInputRootProvider = require('./password-input-root-provider.cjs');
+const passwordInputVisibilityTrigger = require('./password-input-visibility-trigger.cjs');
+const usePasswordInput = require('./use-password-input.cjs');
+const usePasswordInputContext = require('./use-password-input-context.cjs');
+const passwordInput$1 = require('./password-input.cjs');
+const passwordInput = require('@zag-js/password-input');
+
+
+
+exports.PasswordInputContext = passwordInputContext.PasswordInputContext;
+exports.PasswordInputControl = passwordInputControl.PasswordInputControl;
+exports.PasswordInputIndicator = passwordInputIndicator.PasswordInputIndicator;
+exports.PasswordInputInput = passwordInputInput.PasswordInputInput;
+exports.PasswordInputLabel = passwordInputLabel.PasswordInputLabel;
+exports.PasswordInputRoot = passwordInputRoot.PasswordInputRoot;
+exports.PasswordInputRootProvider = passwordInputRootProvider.PasswordInputRootProvider;
+exports.PasswordInputVisibilityTrigger = passwordInputVisibilityTrigger.PasswordInputVisibilityTrigger;
+exports.usePasswordInput = usePasswordInput.usePasswordInput;
+exports.usePasswordInputContext = usePasswordInputContext.usePasswordInputContext;
+exports.PasswordInput = passwordInput$1;
+Object.defineProperty(exports, "passwordInputAnatomy", {
+  enumerable: true,
+  get: () => passwordInput.anatomy
+});

package/dist/components/password-input/index.d.cts

@@ -0,0 +1,13 @@
+export type { VisibilityChangeDetails as PasswordInputVisibilityChangeDetails } from '@zag-js/password-input';
+export { PasswordInputContext, type PasswordInputContextProps } from './password-input-context';
+export { PasswordInputControl, type PasswordInputControlBaseProps, type PasswordInputControlProps, } from './password-input-control';
+export { PasswordInputIndicator, type PasswordInputIndicatorBaseProps, type PasswordInputIndicatorProps, } from './password-input-indicator';
+export { PasswordInputInput, type PasswordInputInputBaseProps, type PasswordInputInputProps, } from './password-input-input';
+export { PasswordInputLabel, type PasswordInputLabelBaseProps, type PasswordInputLabelProps, } from './password-input-label';
+export { PasswordInputRoot, type PasswordInputRootBaseProps, type PasswordInputRootProps } from './password-input-root';
+export { PasswordInputRootProvider, type PasswordInputRootProviderBaseProps, type PasswordInputRootProviderProps, } from './password-input-root-provider';
+export { PasswordInputVisibilityTrigger, type PasswordInputVisibilityTriggerBaseProps, type PasswordInputVisibilityTriggerProps, } from './password-input-visibility-trigger';
+export { passwordInputAnatomy } from './password-input.anatomy';
+export { usePasswordInput, type UsePasswordInputProps, type UsePasswordInputReturn } from './use-password-input';
+export { usePasswordInputContext, type UsePasswordInputContext } from './use-password-input-context';
+export * as PasswordInput from './password-input';

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

@@ -0,0 +1,13 @@
+export type { VisibilityChangeDetails as PasswordInputVisibilityChangeDetails } from '@zag-js/password-input';
+export { PasswordInputContext, type PasswordInputContextProps } from './password-input-context';
+export { PasswordInputControl, type PasswordInputControlBaseProps, type PasswordInputControlProps, } from './password-input-control';
+export { PasswordInputIndicator, type PasswordInputIndicatorBaseProps, type PasswordInputIndicatorProps, } from './password-input-indicator';
+export { PasswordInputInput, type PasswordInputInputBaseProps, type PasswordInputInputProps, } from './password-input-input';
+export { PasswordInputLabel, type PasswordInputLabelBaseProps, type PasswordInputLabelProps, } from './password-input-label';
+export { PasswordInputRoot, type PasswordInputRootBaseProps, type PasswordInputRootProps } from './password-input-root';
+export { PasswordInputRootProvider, type PasswordInputRootProviderBaseProps, type PasswordInputRootProviderProps, } from './password-input-root-provider';
+export { PasswordInputVisibilityTrigger, type PasswordInputVisibilityTriggerBaseProps, type PasswordInputVisibilityTriggerProps, } from './password-input-visibility-trigger';
+export { passwordInputAnatomy } from './password-input.anatomy';
+export { usePasswordInput, type UsePasswordInputProps, type UsePasswordInputReturn } from './use-password-input';
+export { usePasswordInputContext, type UsePasswordInputContext } from './use-password-input-context';
+export * as PasswordInput from './password-input';

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

@@ -0,0 +1,13 @@
+export { PasswordInputContext } from './password-input-context.js';
+export { PasswordInputControl } from './password-input-control.js';
+export { PasswordInputIndicator } from './password-input-indicator.js';
+export { PasswordInputInput } from './password-input-input.js';
+export { PasswordInputLabel } from './password-input-label.js';
+export { PasswordInputRoot } from './password-input-root.js';
+export { PasswordInputRootProvider } from './password-input-root-provider.js';
+export { PasswordInputVisibilityTrigger } from './password-input-visibility-trigger.js';
+export { usePasswordInput } from './use-password-input.js';
+export { usePasswordInputContext } from './use-password-input-context.js';
+import * as passwordInput from './password-input.js';
+export { passwordInput as PasswordInput };
+export { anatomy as passwordInputAnatomy } from '@zag-js/password-input';

package/dist/components/password-input/password-input-context.cjs

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const usePasswordInputContext = require('./use-password-input-context.cjs');
+
+const PasswordInputContext = (props) => {
+  return props.children(usePasswordInputContext.usePasswordInputContext());
+};
+
+exports.PasswordInputContext = PasswordInputContext;

package/dist/components/password-input/password-input-context.d.cts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { UsePasswordInputReturn } from './use-password-input';
+export interface PasswordInputContextProps {
+    children: (context: UsePasswordInputReturn) => ReactNode;
+}
+export declare const PasswordInputContext: (props: PasswordInputContextProps) => ReactNode;

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { UsePasswordInputReturn } from './use-password-input';
+export interface PasswordInputContextProps {
+    children: (context: UsePasswordInputReturn) => ReactNode;
+}
+export declare const PasswordInputContext: (props: PasswordInputContextProps) => ReactNode;

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

@@ -0,0 +1,8 @@
+'use client';
+import { usePasswordInputContext } from './use-password-input-context.js';
+
+const PasswordInputContext = (props) => {
+  return props.children(usePasswordInputContext());
+};
+
+export { PasswordInputContext };

package/dist/components/password-input/password-input-control.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const usePasswordInputContext = require('./use-password-input-context.cjs');
+
+const PasswordInputControl = react.forwardRef((props, ref) => {
+  const passwordInput = usePasswordInputContext.usePasswordInputContext();
+  const mergedProps = react$1.mergeProps(passwordInput.getControlProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+PasswordInputControl.displayName = "PasswordInputControl";
+
+exports.PasswordInputControl = PasswordInputControl;

package/dist/components/password-input/password-input-control.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface PasswordInputControlBaseProps extends PolymorphicProps {
+}
+export interface PasswordInputControlProps extends HTMLProps<'div'>, PasswordInputControlBaseProps {
+}
+export declare const PasswordInputControl: ForwardRefExoticComponent<PasswordInputControlProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface PasswordInputControlBaseProps extends PolymorphicProps {
+}
+export interface PasswordInputControlProps extends HTMLProps<'div'>, PasswordInputControlBaseProps {
+}
+export declare const PasswordInputControl: ForwardRefExoticComponent<PasswordInputControlProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { usePasswordInputContext } from './use-password-input-context.js';
+
+const PasswordInputControl = forwardRef((props, ref) => {
+  const passwordInput = usePasswordInputContext();
+  const mergedProps = mergeProps(passwordInput.getControlProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+PasswordInputControl.displayName = "PasswordInputControl";
+
+export { PasswordInputControl };

package/dist/components/password-input/password-input-indicator.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const usePasswordInputContext = require('./use-password-input-context.cjs');
+
+const PasswordInputIndicator = react.forwardRef((props, ref) => {
+  const passwordInput = usePasswordInputContext.usePasswordInputContext();
+  const mergedProps = react$1.mergeProps(passwordInput.getIndicatorProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: passwordInput.visible ? props.children : props.fallback });
+});
+PasswordInputIndicator.displayName = "PasswordInputIndicator";
+
+exports.PasswordInputIndicator = PasswordInputIndicator;

package/dist/components/password-input/password-input-indicator.d.cts

@@ -0,0 +1,11 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface PasswordInputIndicatorBaseProps extends PolymorphicProps {
+    /**
+     * The fallback content to display when the password is not visible.
+     */
+    fallback?: React.ReactNode;
+}
+export interface PasswordInputIndicatorProps extends HTMLProps<'span'>, PasswordInputIndicatorBaseProps {
+}
+export declare const PasswordInputIndicator: ForwardRefExoticComponent<PasswordInputIndicatorProps & RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,11 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface PasswordInputIndicatorBaseProps extends PolymorphicProps {
+    /**
+     * The fallback content to display when the password is not visible.
+     */
+    fallback?: React.ReactNode;
+}
+export interface PasswordInputIndicatorProps extends HTMLProps<'span'>, PasswordInputIndicatorBaseProps {
+}
+export declare const PasswordInputIndicator: ForwardRefExoticComponent<PasswordInputIndicatorProps & RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { usePasswordInputContext } from './use-password-input-context.js';
+
+const PasswordInputIndicator = forwardRef((props, ref) => {
+  const passwordInput = usePasswordInputContext();
+  const mergedProps = mergeProps(passwordInput.getIndicatorProps(), props);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: passwordInput.visible ? props.children : props.fallback });
+});
+PasswordInputIndicator.displayName = "PasswordInputIndicator";
+
+export { PasswordInputIndicator };