@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.d.ts

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from 'react-aria-components';
+import { RawLinkProps } from '../../link/RawLink.js';
+export interface FormContextualLinkProps extends RawLinkProps {
+    /**
+     * The href of the contextual link
+     */
+    href: string;
+    onPress?: never;
+}
+export interface FormContextualLinkActionProps extends ButtonProps {
+    /**
+     * A function to open a contextual panel
+     */
+    onPress: () => void;
+    href?: never;
+}
+export type TanstackRawFormContextualLinkProps = PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps>;
+/**
+ * `TanstackRawFormContextualLink` renders a contextual action associated with the
+ * current TanStack form field. It can render either:
+ * - an anchor (`RawLink`) when `href` is provided; or
+ * - a button (from `react-aria-components`) when `onPress` is provided.
+ */
+declare const TanstackRawFormContextualLink: import('react').ForwardRefExoticComponent<TanstackRawFormContextualLinkProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { TanstackRawFormContextualLink };

package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.js

@@ -0,0 +1,45 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { Button as s } from "react-aria-components";
+import { RawLink as m } from "../../link/RawLink.js";
+import { useFieldA11yContext as c } from "../TanstackFormField.context.js";
+const u = e((t, a) => {
+  const { children: o, href: n, onPress: d, ...i } = t, r = c();
+  return n ? (
+    // @ts-expect-error - it's okay in this case
+    /* @__PURE__ */ l(
+      m,
+      {
+        id: r.contextualLinkId || t.id,
+        size: "small",
+        color: "secondary",
+        variant: "standalone",
+        "data-unity-slot": "form-field-contextual-link",
+        href: n,
+        ref: a,
+        "data-dd-privacy": "allow",
+        ...i,
+        children: o
+      }
+    )
+  ) : (
+    // @ts-expect-error - it's okay in this case
+    /* @__PURE__ */ l(
+      s,
+      {
+        id: r.contextualLinkId || t.id,
+        onPress: d,
+        "data-unity-slot": "contextual-link",
+        className: "uy:typography-body-small uy:w-fit",
+        ref: a,
+        "data-dd-privacy": "allow",
+        ...i,
+        children: o
+      }
+    )
+  );
+});
+u.displayName = "TanstackRawFormContextualLink";
+export {
+  u as TanstackRawFormContextualLink
+};

package/dist/esm/components/icon-button/CircularIconButton.d.ts

@@ -7,9 +7,9 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         large: string;
     };
     color: {
-        'content.neutral': string;
-        'content.neutral.low': string;
-        'content.neutral.lowest': string;
+        'content.neutral': string[];
+        'content.neutral.low': string[];
+        'content.neutral.lowest': string[];
     };
 }, undefined, string[], {
     size: {
@@ -17,9 +17,9 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         large: string;
     };
     color: {
-        'content.neutral': string;
-        'content.neutral.low': string;
-        'content.neutral.lowest': string;
+        'content.neutral': string[];
+        'content.neutral.low': string[];
+        'content.neutral.lowest': string[];
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
@@ -27,9 +27,9 @@ export declare const circularIconButton: import('tailwind-variants').TVReturnTyp
         large: string;
     };
     color: {
-        'content.neutral': string;
-        'content.neutral.low': string;
-        'content.neutral.lowest': string;
+        'content.neutral': string[];
+        'content.neutral.low': string[];
+        'content.neutral.lowest': string[];
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export interface CircularIconButtonProps extends Omit<AriaButtonProps, 'className'>, VariantProps<typeof circularIconButton> {

package/dist/esm/components/icon-button/CircularIconButton.js

@@ -1,17 +1,15 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { uyTv as w } from "@payfit/unity-themes";
+import { uyTv as h } from "@payfit/unity-themes";
 import { Button as x, Pressable as z } from "react-aria-components";
 import I from "../../hooks/use-id.js";
 import { Icon as d } from "../icon/Icon.js";
 import { Spinner as y } from "../spinner/Spinner.js";
 import { Tooltip as b } from "../tooltip/Tooltip.js";
-const N = w({
+const N = h({
   base: [
     "uy:rounded-circle uy:cursor-pointer uy:flex uy:items-center uy:justify-center uy:transition-colors",
-    "uy:active:bg-surface-neutral-active",
-    "uy:data-[pressed]:bg-surface-neutral-pressed",
+    'uy:disabled:cursor-not-allowed uy:disabled:text-content-neutral-disabled uy:disabled:data-[hovered="true"]:bg-transparent',
     "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
-    "uy:data-[disabled]:cursor-not-allowed uy:data-[disabled]:text-content-neutral-disabled",
     "uy:aria-busy:text-content-neutral-disabled uy:aria-busy:cursor-progress"
   ],
   variants: {
@@ -20,9 +18,28 @@ const N = w({
       large: "uy:w-400 uy:h-400"
     },
     color: {
-      "content.neutral": "uy:text-content-neutral",
-      "content.neutral.low": "uy:text-content-neutral-low",
-      "content.neutral.lowest": "uy:text-content-neutral-lowest"
+      "content.neutral": [
+        "uy:text-content-neutral-low",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover',
+        "uy:active:bg-surface-neutral-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-active"
+      ],
+      "content.neutral.low": [
+        "uy:text-content-neutral-low",
+        'uy:data-[hovered="true"]:bg-surface-neutral-low-hover',
+        "uy:active:bg-surface-neutral-low-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-low-active",
+        "uy:focus-visible:bg-surface-neutral-low-focus",
+        "uy:disabled:bg-surface-neutral-low-disabled"
+      ],
+      "content.neutral.lowest": [
+        "uy:text-content-neutral-low",
+        'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover',
+        "uy:active:bg-surface-neutral-lowest-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-lowest-active",
+        "uy:focus-visible:bg-surface-neutral-lowest-focus",
+        "uy:disabled:bg-surface-neutral-lowest-disabled"
+      ]
     }
   },
   defaultVariants: {
@@ -30,63 +47,63 @@ const N = w({
     color: "content.neutral.low"
   }
 });
-function B(m) {
-  const f = I(), {
-    onPress: i,
-    icon: n,
-    color: p,
-    size: r,
+function B(f) {
+  const v = I(), {
+    onPress: o,
+    icon: u,
+    color: m,
+    size: l,
     isLoading: t,
     title: a,
-    isDisabled: o,
-    asElement: h = "default",
+    isDisabled: s,
+    asElement: p = "default",
     className: g,
-    "aria-labelledby": v,
-    ...s
-  } = m, l = `icon-button-label-${f}`, u = N({ class: g, color: p, size: r });
-  return h === "button" ? /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ c(
+    "aria-labelledby": w,
+    ...i
+  } = f, r = `icon-button-label-${v}`, n = N({ class: g, color: m, size: l });
+  return p === "button" ? /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ c(
     x,
     {
       "data-dd-privacy": "allow",
-      ...s,
-      onPress: i,
-      isDisabled: o || t,
-      "aria-labelledby": v ?? l,
+      ...i,
+      onPress: o,
+      isDisabled: s || t,
+      "aria-labelledby": w ?? r,
       "aria-busy": t,
-      className: u,
+      className: n,
       children: [
         t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
           d,
           {
-            src: n,
-            size: r === "large" ? 24 : 20,
+            src: u,
+            size: l === "large" ? 24 : 20,
             color: "inherit",
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: l, className: "uy:sr-only", children: a })
+        /* @__PURE__ */ e("span", { id: r, className: "uy:sr-only", children: a })
       ]
     }
   ) }) : /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ e(
     z,
     {
       "data-dd-privacy": "allow",
-      ...s,
-      onPress: i,
-      isDisabled: o || t,
-      "aria-labelledby": l,
+      ...i,
+      onPress: o,
+      isDisabled: s || t,
+      "aria-labelledby": r,
       "aria-busy": t,
-      children: /* @__PURE__ */ c("div", { role: "button", "aria-disabled": o, className: u, children: [
+      children: /* @__PURE__ */ c("div", { role: "button", className: n, children: [
         t ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
           d,
           {
-            src: n,
-            size: r === "large" ? 24 : 20,
+            src: u,
+            size: l === "large" ? 24 : 20,
             color: "inherit",
             role: "presentation"
           }
         ),
-        /* @__PURE__ */ e("span", { id: l, className: "uy:sr-only", children: a })
+        /* @__PURE__ */ e("span", { id: r, className: "uy:sr-only", children: a })
       ] })
     }
   ) });

package/dist/esm/components/icon-button/IconButton.variants.d.ts

@@ -195,6 +195,7 @@ export declare const iconButtonGhost: import('tailwind-variants').TVReturnType<{
     };
     color: {
         neutral: string;
+        'neutral.lowest': string;
         primary: string;
         danger: string;
         warning: string;

package/dist/esm/components/icon-button/IconButton.variants.js

@@ -3,8 +3,9 @@ const t = e({
   slots: {
     button: [
       "uy:group",
-      "uy:w-500 uy:min-w-500 uy:h-500 uy:min-h-500 uy:flex uy:justify-center uy:items-center uy:rounded-75 uy:cursor-pointer",
-      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+      "uy:w-5.5 uy:min-w-5.5 uy:h-5.5 uy:sm:w-500 uy:sm:min-w-500 uy:sm:h-500 uy:min-h-500 uy:flex uy:justify-center uy:items-center uy:rounded-100 uy:sm:rounded-75 uy:cursor-pointer",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
+      "uy:transition-colors"
     ],
     icon: "uy:w-250 uy:h-250"
   },
@@ -31,7 +32,7 @@ const t = e({
     isDisabled: !1,
     isLoading: !1
   }
-}), n = e({
+}), a = e({
   extend: t,
   variants: {
     variant: {
@@ -53,14 +54,14 @@ const t = e({
       class: {
         button: [
           "uy:bg-surface-primary-enabled",
-          "uy:hover:bg-surface-primary-hover",
+          'uy:data-[hovered="true"]:bg-surface-primary-hover',
           "uy:active:bg-surface-primary-active",
           "uy:focus-visible:bg-surface-primary-focus",
           "uy:data-[pressed]:bg-surface-primary-pressed"
         ],
         icon: [
           "uy:text-content-inverted-enabled",
-          "uy:group-hover:text-content-inverted-hover",
+          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
           "uy:active:text-content-inverted-active",
           "uy:focus-visible:text-content-inverted-focus",
           "uy:data-[pressed]:text-content-inverted-pressed"
@@ -75,14 +76,14 @@ const t = e({
       class: {
         button: [
           "uy:bg-surface-danger-enabled",
-          "uy:hover:bg-surface-danger-hover",
+          'uy:data-[hovered="true"]:bg-surface-danger-hover',
           "uy:active:bg-surface-danger-active",
           "uy:focus:bg-surface-danger-focus",
           "uy:data-[pressed]:bg-surface-danger-pressed"
         ],
         icon: [
           "uy:text-content-inverted-enabled",
-          "uy:group-hover:text-content-inverted-hover",
+          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
           "uy:active:text-content-inverted-active",
           "uy:focus:text-content-inverted-focus",
           "uy:data-[pressed]:text-content-inverted-pressed"
@@ -97,14 +98,14 @@ const t = e({
       class: {
         button: [
           "uy:bg-surface-warning-enabled",
-          "uy:hover:bg-surface-warning-hover",
+          'uy:data-[hovered="true"]:bg-surface-warning-hover',
           "uy:active:bg-surface-warning-pressed",
           "uy:focus-visible:bg-surface-warning-focus",
           "uy:data-[pressed]:bg-surface-warning-pressed"
         ],
         icon: [
           "uy:text-content-neutral-enabled",
-          "uy:group-hover:text-content-neutral-hover",
+          'uy:group-data-[hovered="true"]:text-content-neutral-hover',
           "uy:active:text-content-neutral-pressed",
           "uy:focus-visible:text-content-neutral-focus",
           "uy:data-[pressed]:text-content-neutral-pressed"
@@ -119,14 +120,14 @@ const t = e({
       class: {
         button: [
           "uy:bg-surface-neutral-enabled",
-          "uy:hover:bg-surface-neutral-hover",
+          'uy:data-[hovered="true"]:bg-surface-neutral-hover',
           "uy:active:bg-surface-neutral-pressed",
           "uy:focus-visible:bg-surface-neutral-focus",
           "uy:data-[pressed]:bg-surface-neutral-pressed"
         ],
         icon: [
           "uy:text-content-neutral-enabled",
-          "uy:group-hover:text-content-neutral-hover",
+          'uy:group-data-[hovered="true"]:text-content-neutral-hover',
           "uy:active:text-content-neutral-pressed",
           "uy:focus-visible:text-content-neutral-focus",
           "uy:data-[pressed]:text-content-neutral-pressed"
@@ -154,7 +155,7 @@ const t = e({
       }
     }
   ]
-}), a = e({
+}), n = e({
   extend: t,
   variants: {
     variant: {
@@ -173,13 +174,13 @@ const t = e({
       class: {
         button: [
           "uy:border uy:border-solid uy:border-border-neutral-high-enabled",
-          "uy:hover:border-border-neutral-high-hover",
+          'uy:data-[hovered="true"]:border-border-neutral-high-hover',
           "uy:active:border-border-neutral-high-active",
           "uy:data-[pressed]:border-border-neutral-high-pressed"
         ],
         icon: [
           "uy:text-content-neutral-low-enabled",
-          "uy:group-hover:text-content-low-neutral-hover",
+          'uy:group-data-[hovered="true"]:text-content-low-neutral-hover',
           "uy:active:text-content-neutral-low-active",
           "uy:data-[pressed]:text-content-neutral-low-pressed",
           "uy:focus-visible:text-content-neutral-low-focus"
@@ -217,14 +218,14 @@ const t = e({
       class: {
         button: [
           "uy:border uy:border-solid uy:border-border-inverted",
-          "uy:hover:border-border-inverted-hover",
+          'uy:data-[hovered="true"]:border-border-inverted-hover',
           "uy:data-[pressed]:border-border-inverted-pressed",
           "uy:active:border-border-inverted-active",
           "uy:focus-visible:border-border-inverted-focus uy:focus-visible:outline-utility-inverted-focus-ring"
         ],
         icon: [
           "uy:text-content-inverted",
-          "uy:group-hover:text-content-inverted-hover",
+          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
           "uy:data-[pressed]:text-content-inverted-pressed",
           "uy:active:text-content-inverted-active",
           "uy:focus-visible:text-content-inverted-focus"
@@ -252,6 +253,7 @@ const t = e({
     },
     color: {
       neutral: "",
+      "neutral.lowest": "",
       primary: "",
       danger: "",
       warning: "",
@@ -266,7 +268,7 @@ const t = e({
       class: {
         button: [
           "uy:bg-transparent",
-          "uy:hover:bg-surface-inverted-hover",
+          'uy:data-[hovered="true"]:bg-surface-inverted-hover',
           "uy:active:bg-surface-inverted-active",
           "uy:data-[pressed=true]:bg-surface-inverted-pressed",
           "uy:focus-visible:outline-utility-inverted-focus-ring",
@@ -274,7 +276,7 @@ const t = e({
         ],
         icon: [
           "uy:text-content-inverted",
-          "uy:group-hover:text-content-inverted-hover",
+          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
           "uy:data-[pressed]:text-content-inverted-pressed",
           "uy:active:text-content-inverted-active",
           "uy:focus-visible:text-content-inverted-focus"
@@ -287,9 +289,23 @@ const t = e({
       isLoading: !1,
       class: {
         button: [
-          "uy:hover:bg-surface-neutral-hover",
+          'uy:data-[hovered="true"]:bg-surface-neutral-hover',
           "uy:data-[pressed]:bg-surface-neutral-pressed",
-          "uy:active:bg-surface-neutral-active"
+          "uy:active:bg-surface-neutral-active",
+          "uy:data-[pressed=true]:bg-surface-neutral-pressed"
+        ],
+        icon: ["uy:text-content-neutral-low"]
+      }
+    },
+    {
+      color: "neutral.lowest",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover',
+          "uy:active:bg-surface-neutral-lowest-active",
+          "uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed"
         ],
         icon: ["uy:text-content-neutral-low"]
       }
@@ -301,13 +317,13 @@ const t = e({
       class: {
         button: [
           "uy:text-content-primary-enabled",
-          "uy:hover:bg-surface-primary-lowest-hover",
+          'uy:data-[hovered="true"]:bg-surface-primary-lowest-hover',
           "uy:data-[pressed]:bg-surface-primary-lowest-pressed",
           "uy:active:bg-surface-primary-lowest-active"
         ],
         icon: [
           "uy:text-content-primary",
-          "uy:group-hover:text-content-primary",
+          'uy:group-data-[hovered="true"]:text-content-primary',
           "uy:data-[pressed]:text-content-primary",
           "uy:focus-visible:text-content-primary",
           "uy:active:text-content-primary"
@@ -320,13 +336,13 @@ const t = e({
       isLoading: !1,
       class: {
         button: [
-          "uy:hover:bg-surface-danger-lowest-hover",
+          'uy:data-[hovered="true"]:bg-surface-danger-lowest-hover',
           "uy:data-[pressed]:bg-surface-danger-lowest-pressed",
           "uy:active:bg-surface-danger-lowest-active"
         ],
         icon: [
           "uy:text-content-danger",
-          "uy:group-hover:text-content-danger",
+          'uy:group-data-[hovered="true"]:text-content-danger',
           "uy:data-[pressed]:text-content-danger",
           "uy:focus-visible:text-content-danger",
           "uy:active:text-content-danger"
@@ -339,13 +355,13 @@ const t = e({
       isLoading: !1,
       class: {
         button: [
-          "uy:hover:bg-surface-warning-lowest-hover",
+          'uy:data-[hovered="true"]:bg-surface-warning-lowest-hover',
           "uy:data-[pressed]:bg-surface-warning-lowest-pressed",
           "uy:active:bg-surface-warning-lowest-active"
         ],
         icon: [
           "uy:text-content-warning-high",
-          "uy:group-hover:text-content-warning-high",
+          'uy:group-data-[hovered="true"]:text-content-warning-high',
           "uy:data-[pressed]:text-content-warning-high",
           "uy:focus-visible:text-content-warning-high",
           "uy:active:text-content-warning-high"
@@ -374,6 +390,6 @@ const t = e({
 });
 export {
   s as iconButtonGhost,
-  n as iconButtonPrimary,
-  a as iconButtonSecondary
+  a as iconButtonPrimary,
+  n as iconButtonSecondary
 };

package/dist/esm/components/input/Input.js

@@ -1,4 +1,4 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import { forwardRef as v } from "react";
 import { uyTv as h } from "@payfit/unity-themes";
 import { Input as I } from "react-aria-components";
@@ -8,12 +8,12 @@ import { Icon as M } from "../icon/Icon.js";
 import { Spinner as C } from "../spinner/Spinner.js";
 const O = h({
   slots: {
-    base: "uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
-    prefix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-75 uy:active:border-border-form-active",
-    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:max-w-full uy:justify-between",
+    base: "uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
+    prefix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75 uy:active:border-border-form-active",
+    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between",
     input: "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full",
     state: "uy:flex uy:gap-50 uy:items-center uy:shrink-0",
-    suffix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75 uy:active:border-border-form-active"
+    suffix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:active:border-border-form-active"
   },
   variants: {
     isInvalid: {
@@ -62,17 +62,17 @@ const O = h({
   ]
 }), S = v(
   ({
-    type: s = "text",
-    prefix: d,
+    type: i = "text",
+    prefix: s,
     suffix: l,
-    isInvalid: i,
-    isLoading: r,
-    isDisabled: o,
-    isReadOnly: u,
-    onClearButtonPress: f,
-    ...t
-  }, y) => {
-    const a = N(), {
+    isInvalid: r,
+    isLoading: o,
+    isDisabled: u,
+    isReadOnly: t,
+    onClearButtonPress: y,
+    ...a
+  }, f) => {
+    const n = N(), {
       base: b,
       prefix: m,
       inputWrapper: c,
@@ -80,44 +80,45 @@ const O = h({
       state: x,
       suffix: g
     } = O({
-      isInvalid: !!i,
-      isReadOnly: !!u,
-      isDisabled: !!o
-    }), w = t.value && !r && !u && !o;
-    return delete t.isRequired, /* @__PURE__ */ n("div", { className: b(), children: [
-      d ? /* @__PURE__ */ e("span", { className: m(), children: d }) : null,
-      /* @__PURE__ */ n("div", { className: c(), children: [
+      isInvalid: !!r,
+      isReadOnly: !!t,
+      isDisabled: !!u
+    }), w = a.value && !o && !t && !u;
+    return delete a.isRequired, /* @__PURE__ */ d("div", { className: b(), children: [
+      s ? /* @__PURE__ */ e("span", { className: m(), children: s }) : null,
+      /* @__PURE__ */ d("div", { className: c(), children: [
         /* @__PURE__ */ e(
           I,
           {
             "data-dd-privacy": "mask",
-            ...t,
-            ref: y,
-            type: s,
+            ...a,
+            ref: f,
+            type: i,
             className: p(),
-            "aria-busy": r,
-            readOnly: u,
-            disabled: o
+            "aria-busy": o,
+            "aria-invalid": r,
+            readOnly: t,
+            disabled: u
           }
         ),
-        /* @__PURE__ */ n("div", { className: x(), children: [
-          r && /* @__PURE__ */ e(
+        /* @__PURE__ */ d("div", { className: x(), children: [
+          o && /* @__PURE__ */ e(
             C,
             {
               color: "inherit",
               size: "small",
-              label: a.formatMessage({
+              label: n.formatMessage({
                 id: "unity:component:common:loading:label",
                 defaultMessage: "Loading..."
               })
             }
           ),
-          i && /* @__PURE__ */ e(
+          r && /* @__PURE__ */ e(
             M,
             {
               src: "WarningCircleOutlined",
               color: "content.form.invalid",
-              alt: a.formatMessage({
+              alt: n.formatMessage({
                 id: "unity:component:form-field:form-input:error:alt",
                 defaultMessage: "Error"
               })
@@ -126,14 +127,14 @@ const O = h({
           w && /* @__PURE__ */ e(
             W,
             {
-              title: a.formatMessage({
+              title: n.formatMessage({
                 id: "unity:component:common:clear:title",
                 defaultMessage: "Clear"
               }),
               color: "content.neutral.low",
               icon: "CloseOutlined",
               onPress: () => {
-                f?.();
+                y?.();
               }
             }
           )

package/dist/esm/components/input/TanstackInput.d.ts

@@ -0,0 +1,22 @@
+import { InputProps } from './Input.js';
+export type TanstackInputProps = Omit<InputProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackInput` is a controlled input wired to the TanStack Form field context.
+ * It is based on the Unity `Input` component.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ name: string }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="name">
+ *         {() => <TanstackInput placeholder="Your name" />}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackInput: import('react').ForwardRefExoticComponent<TanstackInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { TanstackInput };