@ark-ui/react 5.9.2 → 5.10.0

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

@@ -342,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');
@@ -670,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');
@@ -1042,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;
@@ -1422,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

@@ -360,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';
@@ -711,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 };

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

@@ -0,0 +1,21 @@
+'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 useFieldContext = require('../field/use-field-context.cjs');
+const usePasswordInputContext = require('./use-password-input-context.cjs');
+
+const PasswordInputInput = react.forwardRef((props, ref) => {
+  const passwordInput = usePasswordInputContext.usePasswordInputContext();
+  const mergedProps = react$1.mergeProps(passwordInput.getInputProps(), props);
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
+PasswordInputInput.displayName = "PasswordInputInput";
+
+exports.PasswordInputInput = PasswordInputInput;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface PasswordInputInputBaseProps extends PolymorphicProps {
+}
+export interface PasswordInputInputProps extends HTMLProps<'input'>, PasswordInputInputBaseProps {
+}
+export declare const PasswordInputInput: ForwardRefExoticComponent<PasswordInputInputProps & RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface PasswordInputInputBaseProps extends PolymorphicProps {
+}
+export interface PasswordInputInputProps extends HTMLProps<'input'>, PasswordInputInputBaseProps {
+}
+export declare const PasswordInputInput: ForwardRefExoticComponent<PasswordInputInputProps & RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
+import { usePasswordInputContext } from './use-password-input-context.js';
+
+const PasswordInputInput = forwardRef((props, ref) => {
+  const passwordInput = usePasswordInputContext();
+  const mergedProps = mergeProps(passwordInput.getInputProps(), props);
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+});
+PasswordInputInput.displayName = "PasswordInputInput";
+
+export { PasswordInputInput };

package/dist/components/password-input/password-input-label.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 PasswordInputLabel = react.forwardRef((props, ref) => {
+  const passwordInput = usePasswordInputContext.usePasswordInputContext();
+  const mergedProps = react$1.mergeProps(passwordInput.getLabelProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
+PasswordInputLabel.displayName = "PasswordInputLabel";
+
+exports.PasswordInputLabel = PasswordInputLabel;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface PasswordInputLabelBaseProps extends PolymorphicProps {
+}
+export interface PasswordInputLabelProps extends HTMLProps<'label'>, PasswordInputLabelBaseProps {
+}
+export declare const PasswordInputLabel: ForwardRefExoticComponent<PasswordInputLabelProps & RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface PasswordInputLabelBaseProps extends PolymorphicProps {
+}
+export interface PasswordInputLabelProps extends HTMLProps<'label'>, PasswordInputLabelBaseProps {
+}
+export declare const PasswordInputLabel: ForwardRefExoticComponent<PasswordInputLabelProps & RefAttributes<HTMLLabelElement>>;