@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/pagination/parts/PaginationEllipsis.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ButtonProps } from 'react-aria-components/Button';
+declare const paginationEllipsis: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface PaginationEllipsisProps extends VariantProps<typeof paginationEllipsis>, Omit<ButtonProps, 'value' | 'children' | 'className' | 'style' | 'slot'> {
+    /**
+     * The id of the ellipsis element
+     */
+    id?: string;
+    /**
+     * Whether the ellipsis is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * The range of pages represented by this ellipsis [start, end]
+     * When end is Infinity, it indicates an unknown page count
+     */
+    value: [number, number];
+}
+/**
+ * The PaginationEllipsis component renders an ellipsis indicator for pagination.
+ * This component is used to indicate that there are more pages between the visible range.
+ * @example
+ * ```tsx
+ * import { PaginationEllipsis } from '@payfit/unity-components'
+ *
+ * <PaginationEllipsis value={[5, 10]} />
+ * ```
+ */
+declare const PaginationEllipsis: import('react').ForwardRefExoticComponent<PaginationEllipsisProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { PaginationEllipsis };

package/dist/esm/components/pagination/parts/PaginationEllipsis.js

@@ -0,0 +1,34 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { uyTv as y } from "@payfit/unity-themes";
+import { Button as c } from "react-aria-components/Button";
+import { useIntl as p, FormattedMessage as f } from "react-intl";
+const m = y({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:cursor-default",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
+  ]
+}), d = r(({ value: n, ...s }, o) => {
+  const t = p(), [u, e] = n, l = e === 1 / 0 ? t.formatMessage({
+    id: "unity:component:common:unknown",
+    defaultMessage: "unknown"
+  }) : e;
+  return /* @__PURE__ */ a(c, { ref: o, className: m(), ...s, children: [
+    /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "…" }),
+    /* @__PURE__ */ i("span", { className: "uy:sr-only", children: /* @__PURE__ */ i(
+      f,
+      {
+        id: "unity:component:pagination:ellipsis:label",
+        defaultMessage: "More pages",
+        values: {
+          start: u,
+          end: l
+        }
+      }
+    ) })
+  ] });
+});
+d.displayName = "PaginationEllipsis";
+export {
+  d as PaginationEllipsis
+};

package/dist/esm/components/pagination/parts/PaginationItem.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface PaginationItemProps extends ComponentPropsWithoutRef<'li'> {
+    children: ReactNode;
+    /**
+     * The position of this item in the set (for aria-posinset)
+     * If not provided, will be calculated from context
+     */
+    pageNumber?: number;
+    /**
+     * The total number of pages (for aria-setsize)
+     * If not provided, will be calculated from context
+     */
+    pageCount?: number;
+}
+/**
+ * The PaginationItem component provides a list item wrapper for individual pagination controls.
+ * This component renders as a li element and should contain pagination links or buttons.
+ * It automatically gets pageCount from context and calculates aria attributes.
+ * @param props.children - The children to render.
+ * @param props.pageNumber - The position of this item in the set (for aria-posinset).
+ * @param props.pageCount - The total number of pages (for aria-setsize).
+ * @example
+ * ```tsx
+ * import { PaginationItem, RawPaginationLink } from '@payfit/unity-components'
+ *
+ * function MyPaginationItem() {
+ *   return (
+ *     <PaginationItem pageNumber={1}>
+ *       <RawPaginationLink href="/page/1" isActive>
+ *         1
+ *       </RawPaginationLink>
+ *     </PaginationItem>
+ *   )
+ * }
+ * ```
+ */
+declare const PaginationItem: import('react').ForwardRefExoticComponent<PaginationItemProps & import('react').RefAttributes<HTMLLIElement>>;
+export { PaginationItem };

package/dist/esm/components/pagination/parts/PaginationItem.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { usePaginationContext as p } from "../PaginationContext.js";
+const f = m(
+  ({ children: o, pageNumber: a, pageCount: i, ...e }, n) => {
+    const { pageCount: r } = p(), t = i ?? r;
+    return /* @__PURE__ */ s(
+      "li",
+      {
+        ...e,
+        ref: n,
+        "aria-setsize": t !== -1 ? t : void 0,
+        "aria-posinset": a,
+        children: o
+      }
+    );
+  }
+);
+f.displayName = "PaginationItem";
+export {
+  f as PaginationItem
+};

package/dist/esm/components/pagination/parts/RawPaginationLink.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { LinkProps } from 'react-aria-components/Link';
+export declare const paginationLink: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface PaginationLinkProps extends LinkProps, VariantProps<typeof paginationLink> {
+    value: number;
+    id?: string;
+    isDisabled?: boolean;
+    isCurrent?: boolean;
+}
+declare const RawPaginationLink: import('react').ForwardRefExoticComponent<PaginationLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationLink };

package/dist/esm/components/pagination/parts/RawPaginationLink.js

@@ -0,0 +1,60 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as w, useRef as h, useCallback as u } from "react";
+import { uyTv as v } from "@payfit/unity-themes";
+import { Link as x } from "react-aria-components/Link";
+import { useIntl as P } from "react-intl";
+import { usePaginationContext as k } from "../PaginationContext.js";
+const R = v({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:transition-colors",
+    "uy:enabled:text-content-neutral-enabled uy:enabled:bg-transparent uy:cursor-pointer",
+    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-surface-neutral-lowest-disabled uy:data-[disabled]:cursor-not-allowed",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-lowest-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-lowest-pressed uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-lowest-pressed",
+    "uy:aria-[current=page]:bg-surface-neutral-lowest-selected",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2",
+    "uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2"
+  ]
+}), C = w(
+  ({ isCurrent: r, isDisabled: l, value: t, onPress: c, ...a }, n) => {
+    const y = P(), { currentPage: s, onKeyDown: f, pageRefs: i, onPageChange: o } = k(), d = h(null), g = u(
+      (e) => {
+        d.current = e, e ? i.current.set(t, e) : i.current.delete(t), typeof n == "function" ? n(e) : n && (n.current = e);
+      },
+      [t, i, n]
+    ), b = r ?? s === t, p = u(() => {
+      if (!a.href) {
+        const e = t > s ? 1 : -1;
+        o(t, s, e);
+      }
+    }, [t, s, o, a.href]);
+    return /* @__PURE__ */ m(
+      x,
+      {
+        ...a,
+        ref: g,
+        className: R(),
+        isDisabled: l,
+        onPress: c ?? p,
+        "aria-current": b ? "page" : void 0,
+        "aria-label": y.formatMessage(
+          {
+            id: "unity:component:pagination:link:label",
+            defaultMessage: "Page {page}"
+          },
+          {
+            page: t
+          }
+        ),
+        onKeyDown: (e) => {
+          f(e);
+        }
+      }
+    );
+  }
+);
+C.displayName = "RawPaginationLink";
+export {
+  C as RawPaginationLink,
+  R as paginationLink
+};

package/dist/esm/components/pagination/parts/RawPaginationNext.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { LinkProps } from 'react-aria-components/Link';
+declare const paginationNavButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface RawPaginationNextProps extends Omit<LinkProps, 'children' | 'className' | 'style' | 'isDisabled' | 'aria-label' | 'title'>, VariantProps<typeof paginationNavButton> {
+    id?: string;
+    isDisabled?: boolean;
+    href?: string;
+}
+/**
+ * The RawPaginationNext component renders a "Next" link for pagination.
+ * This component is always a link for consistent integration with routing libraries.
+ * @example
+ * ```tsx
+ * import { RawPaginationNext } from '@payfit/unity-components'
+ *
+ * <RawPaginationNext href="/page/3" isDisabled={currentPage === pageCount}>
+ *   Next
+ * </RawPaginationNext>
+ * ```
+ */
+declare const RawPaginationNext: import('react').ForwardRefExoticComponent<RawPaginationNextProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationNext };

package/dist/esm/components/pagination/parts/RawPaginationNext.js

@@ -0,0 +1,70 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { Link as x } from "react-aria-components/Link";
+import { useIntl as v } from "react-intl";
+import { Icon as w } from "../../icon/Icon.js";
+import { Tooltip as h } from "../../tooltip/Tooltip.js";
+import { usePaginationContext as P } from "../PaginationContext.js";
+const N = b({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-circle uy:transition-colors",
+    "uy:text-content-neutral-lowest uy:enabled:bg-transparent uy:cursor-pointer",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-lowest-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-lowest-pressed",
+    "uy:data-[pressed=true]:text-content-neutral-pressed uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed",
+    "uy:data-[disabled=true]:text-content-neutral-disabled uy:data-[disabled=true]:bg-transparent uy:data-[disabled=true]:cursor-not-allowed",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
+  ]
+}), D = g(
+  ({ isDisabled: i, href: n, onPress: s, ...u }, l) => {
+    const a = v(), {
+      onKeyDown: c,
+      currentPage: e,
+      pageCount: r,
+      onPageChange: y
+    } = P(), t = a.formatMessage({
+      id: "unity:component:common:next",
+      defaultMessage: "Next"
+    }), d = a.formatMessage(
+      {
+        id: "unity:component:pagination:nav-button:description",
+        defaultMessage: "Go to next page"
+      },
+      {
+        variant: t
+      }
+    ), p = (m) => {
+      c(m);
+    }, f = () => {
+      !n && (r === -1 || e < r) && y(e + 1, e, 1);
+    };
+    return /* @__PURE__ */ o(h, { title: t, children: /* @__PURE__ */ o(
+      x,
+      {
+        ref: l,
+        href: n,
+        className: N(),
+        isDisabled: i,
+        onPress: s ?? f,
+        "aria-label": t,
+        "aria-description": d,
+        onKeyDown: p,
+        ...u,
+        children: /* @__PURE__ */ o(
+          w,
+          {
+            src: "CaretRightOutlined",
+            size: 20,
+            color: "inherit",
+            role: "presentation"
+          }
+        )
+      }
+    ) });
+  }
+);
+D.displayName = "RawPaginationNext";
+export {
+  D as RawPaginationNext
+};

package/dist/esm/components/pagination/parts/RawPaginationPrevious.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { LinkProps } from 'react-aria-components/Link';
+declare const paginationNavButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface RawPaginationPreviousProps extends Omit<LinkProps, 'children' | 'className' | 'style' | 'isDisabled' | 'aria-label' | 'title'>, VariantProps<typeof paginationNavButton> {
+    id?: string;
+    isDisabled?: boolean;
+    href?: string;
+}
+/**
+ * The RawPaginationPrevious component renders a "Next" link for pagination.
+ * This component is always a link for consistent integration with routing libraries.
+ * @example
+ * ```tsx
+ * import { RawPaginationPrevious } from '@payfit/unity-components'
+ *
+ * <RawPaginationPrevious href="/page/3" isDisabled={currentPage === pageCount}>
+ *   Next
+ * </RawPaginationPrevious>
+ * ```
+ */
+declare const RawPaginationPrevious: import('react').ForwardRefExoticComponent<RawPaginationPreviousProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationPrevious };

package/dist/esm/components/pagination/parts/RawPaginationPrevious.js

@@ -0,0 +1,67 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { uyTv as g } from "@payfit/unity-themes";
+import { Link as v } from "react-aria-components/Link";
+import { useIntl as b } from "react-intl";
+import { Icon as w } from "../../icon/Icon.js";
+import { Tooltip as h } from "../../tooltip/Tooltip.js";
+import { usePaginationContext as x } from "../PaginationContext.js";
+const P = g({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-circle uy:transition-colors",
+    "uy:text-content-neutral-lowest uy:enabled:bg-transparent uy:cursor-pointer",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-lowest-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-lowest-pressed",
+    "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-lowest-pressed",
+    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-transparent uy:data-[disabled]:cursor-not-allowed",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
+  ]
+}), D = m(({ isDisabled: a, href: n, onPress: s, ...i }, u) => {
+  const r = b(), {
+    onKeyDown: l,
+    currentPage: e,
+    onPageChange: c
+  } = x(), t = r.formatMessage({
+    id: "unity:component:common:previous",
+    defaultMessage: "Previous"
+  }), y = r.formatMessage(
+    {
+      id: "unity:component:pagination:nav-button:description",
+      defaultMessage: "Go to previous page"
+    },
+    {
+      variant: t
+    }
+  ), d = (f) => {
+    l(f);
+  }, p = () => {
+    !n && e > 1 && c(e - 1, e, -1);
+  };
+  return /* @__PURE__ */ o(h, { title: t, children: /* @__PURE__ */ o(
+    v,
+    {
+      ref: u,
+      href: n,
+      className: P(),
+      isDisabled: a,
+      onPress: s ?? p,
+      "aria-label": t,
+      "aria-description": y,
+      onKeyDown: d,
+      ...i,
+      children: /* @__PURE__ */ o(
+        w,
+        {
+          src: "CaretLeftOutlined",
+          size: 20,
+          color: "inherit",
+          role: "presentation"
+        }
+      )
+    }
+  ) });
+});
+D.displayName = "RawPaginationPrevious";
+export {
+  D as RawPaginationPrevious
+};

package/dist/esm/components/pagination/utils/pagination-window.d.ts

@@ -0,0 +1,8 @@
+export type PageItem = {
+    type: 'page';
+    value: number;
+} | {
+    type: 'ellipsis';
+    value: [number, number];
+};
+export declare function generatePaginationWithWindow(pageCount: number, currentPage: number, maxWindowSize: number): PageItem[];

package/dist/esm/components/pagination/utils/pagination-window.js

@@ -0,0 +1,42 @@
+function y(s, l) {
+  return Array.from({ length: l - s + 1 }, (p, t) => t + s).map(
+    (p) => ({
+      type: "page",
+      value: p
+    })
+  );
+}
+const n = 5;
+function d(s, l, p) {
+  const t = Math.max(
+    n,
+    p % 2 === 0 ? p + 1 : p
+  ), h = t - 2;
+  if (s === -1) {
+    const e = [];
+    e.push({ type: "page", value: 1 });
+    const o = h - 1, u = Math.floor(o / 2);
+    return l <= 3 + u ? (e.push(...y(2, t - 1)), e.push({ type: "ellipsis", value: [t, 1 / 0] })) : (e.push({ type: "ellipsis", value: [2, l - u] }), e.push(...y(l - u + 1, l + u)), e.push({
+      type: "ellipsis",
+      value: [l + u + 1, 1 / 0]
+    })), e;
+  }
+  if (s <= t)
+    return Array.from({ length: s }, (e, o) => ({
+      type: "page",
+      value: o + 1
+    }));
+  const i = [];
+  i.push({ type: "page", value: 1 });
+  const v = h - 2, f = Math.floor(v / 2);
+  return l <= 3 + f ? (i.push(...y(2, h)), i.push({ type: "ellipsis", value: [h + 1, s - 1] })) : l >= s - (2 + f) ? (i.push({
+    type: "ellipsis",
+    value: [2, s - (h - 1) - 1]
+  }), i.push(...y(s - (h - 1), s - 1))) : (i.push({ type: "ellipsis", value: [2, l - f - 1] }), i.push(...y(l - f, l + f)), i.push({
+    type: "ellipsis",
+    value: [l + f + 1, s - 1]
+  })), i.push({ type: "page", value: s }), i;
+}
+export {
+  d as generatePaginationWithWindow
+};

package/dist/esm/components/password-field/TanstackPasswordField.d.ts

@@ -0,0 +1,113 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { PasswordInputProps } from './parts/PasswordInput.js';
+import { PasswordRule } from './types.js';
+export interface TanstackPasswordFieldProps extends Omit<PasswordInputProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>, Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** Label for the password field */
+    label: string;
+    /** Helper text below the label */
+    helperText?: ReactNode;
+    /** Title for the validation rules section (default: "Your password must have:") */
+    rulesTitle?: ReactNode;
+    /** Array of password rules to display - status is controlled by consumer */
+    rules?: PasswordRule[];
+    /** A contextual link to display below the text field. */
+    contextualLink?: ReactNode;
+    /** Callback function to be called when the clear button is pressed */
+    onClearButtonPress?: () => void;
+}
+/**
+ * The `TanstackPasswordField` component provides a complete password input solution with visibility toggle,
+ * validation rules display, and caps lock detection, fully integrated with TanStack Form.
+ *
+ * Use this component to collect password input with real-time validation feedback. The component displays
+ * a list of password requirements that update dynamically as users type, helping them create passwords
+ * that meet your security criteria.
+ *
+ * The component acts as a **presentation layer only**. Define all validation logic externally using
+ * TanStack Form validators, then pass the evaluated rule statuses to the component for display.
+ *
+ * **Key features:**
+ * - Password visibility toggle for showing/hiding entered text
+ * - Real-time validation rules display with checked/unchecked visual feedback
+ * - Caps Lock warning indicator to prevent accidental input mistakes
+ * - Full accessibility support with ARIA labels and keyboard navigation
+ * - Integration with TanStack Form for validation and state management
+ * - Contextual link support for "Forgot password?" or similar actions
+ *
+ * **Important props:**
+ * - `label` — Required text label for the field
+ * - `rules` — Array of password rules with their validation status (you control the logic)
+ * - `helperText` — Optional helper text displayed below the label
+ * - `rulesTitle` — Custom title for the rules section (defaults to "Your password must have:")
+ * - `showCapsLockWarning` — Enable/disable caps lock detection (default: true)
+ * - `autoComplete` — Browser autocomplete hint: 'current-password' or 'new-password'
+ * - `contextualLink` — Optional link element (e.g., "Forgot password?")
+ * @param {TanstackPasswordFieldProps} props - Component properties
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm, fieldRevalidateLogic } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * function PasswordForm() {
+ *   const ruleDefs = [
+ *     {
+ *       id: 'length',
+ *       label: 'At least 10 characters',
+ *       validate: (value: string) => value.length >= 10
+ *     }
+ *   ]
+ *
+ *   const form = useTanstackUnityForm({
+ *     defaultValues: { password: '' },
+ *     validationLogic: fieldRevalidateLogic({
+ *       whenPristine: 'blur',
+ *       whenDirty: 'change',
+ *       fields: ['password'],
+ *     })
+ *   })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.Form>
+ *         <form.AppField name="password">
+ *           {(field) => {
+ *             const rules = ruleDefs.map(rule => ({
+ *               id: rule.id,
+ *               label: rule.label,
+ *               status: rule.validate(field.state.value) ? 'checked' : 'unchecked'
+ *             }))
+ *
+ *             return (
+ *               <field.PasswordField
+ *                 label="Create Password"
+ *                 rules={rules}
+ *                 isRequired
+ *               />
+ *             )
+ *           }}
+ *         </form.AppField>
+ *       </form.Form>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Access the component via `<field.PasswordField>` within `<form.AppField name="...">` scope
+ * - Do not pass `name`, `value`, or `isInvalid` props — these are managed by TanStack Form context
+ * - The `rules` prop is purely presentational — compute rule statuses in your component and pass them in
+ * - For async validation (e.g., checking password breaches), use TanStack Form's `onDynamicAsync` validator
+ * - Use `autoComplete="current-password"` for login forms and `autoComplete="new-password"` for registration
+ * - **New to password fields?** See the step-by-step tutorial in the developer docs
+ * - **Want to understand the architecture?** Read the validation guide in the developer docs
+ * @see {@link TanstackPasswordFieldProps} for all available props
+ * @see {@link useTanstackUnityForm} for form setup and validation
+ * @see Tutorial: Adding Password Field with Validation in the developer docs
+ * @see Guide: Understanding Password Field Validation in the developer docs
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/password-field GitHub}
+ * @see Design specs in {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs at {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs at {@link https://unity-components.payfit.io/?path=/docs/forms-reference-passwordfield--docs unity-components.payfit.io}
+ */
+declare const TanstackPasswordField: import('react').ForwardRefExoticComponent<TanstackPasswordFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export { TanstackPasswordField };

package/dist/esm/components/password-field/TanstackPasswordField.js

@@ -0,0 +1,83 @@
+import { jsxs as I, jsx as e } from "react/jsx-runtime";
+import { forwardRef as B } from "react";
+import { useIntl as R } from "react-intl";
+import { useFieldContext as b } from "../../hooks/tanstack-form-context.js";
+import { TanstackFormFeedbackText as j } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as y } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as M } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as V } from "../form-field/TanstackFormField.js";
+import { PasswordFieldDetails as D } from "./parts/PasswordFieldDetails.js";
+import { PasswordInput as H } from "./parts/PasswordInput.js";
+function L({
+  label: r,
+  helperText: s,
+  rulesTitle: i,
+  rules: o,
+  contextualLink: l,
+  isRequired: n,
+  requiredVariant: m,
+  isLoading: d,
+  isDisabled: c,
+  isReadOnly: u,
+  showCapsLockWarning: f,
+  autoComplete: p,
+  onBlur: F,
+  onFocus: h,
+  onChange: T,
+  onClearButtonPress: k,
+  ...w
+}, g) {
+  const P = R(), t = b(), x = t.state.meta.isTouched && !t.state.meta.isValid, v = o && o.length > 0, C = P.formatMessage({
+    id: "unity:component:password-field:rules-title",
+    defaultMessage: "Your password must have:"
+  });
+  return /* @__PURE__ */ I(V, { children: [
+    /* @__PURE__ */ e(
+      M,
+      {
+        requiredVariant: m,
+        isRequired: n,
+        children: r
+      }
+    ),
+    s && /* @__PURE__ */ e(y, { children: s }),
+    /* @__PURE__ */ e(
+      H,
+      {
+        ...w,
+        ref: g,
+        value: t.state.value,
+        onChange: (a) => {
+          t.handleChange(a.target.value), T?.(a);
+        },
+        onBlur: (a) => {
+          t.handleBlur(), F?.(a);
+        },
+        onFocus: h,
+        isLoading: d,
+        isDisabled: c,
+        isReadOnly: u,
+        isInvalid: x,
+        showCapsLockWarning: f,
+        autoComplete: p,
+        onClearButtonPress: () => {
+          t.setValue(""), k?.();
+        }
+      }
+    ),
+    /* @__PURE__ */ e(j, {}),
+    v && /* @__PURE__ */ e(
+      D,
+      {
+        title: i ?? C,
+        rules: o
+      }
+    ),
+    l
+  ] });
+}
+const N = B(L);
+N.displayName = "TanstackPasswordField";
+export {
+  N as TanstackPasswordField
+};

package/dist/esm/components/password-field/hooks/use-caps-lock.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to detect when Caps Lock is enabled
+ * @returns boolean indicating if Caps Lock is currently enabled
+ */
+export declare function useCapsLock(): boolean;

package/dist/esm/components/password-field/hooks/use-caps-lock.js

@@ -0,0 +1,12 @@
+import { useState as s, useCallback as r, useEffect as i } from "react";
+function d() {
+  const [n, t] = s(!1), e = r((o) => {
+    t(o.getModifierState("CapsLock"));
+  }, []);
+  return i(() => (window.addEventListener("keydown", e), window.addEventListener("keyup", e), () => {
+    window.removeEventListener("keydown", e), window.removeEventListener("keyup", e);
+  }), [e]), n;
+}
+export {
+  d as useCapsLock
+};