@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/form/TanstackForm.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `TanstackForm` is a form wrapper bound to the TanStack form context.
+ * It prevents the default browser submission, delegates to the TanStack form
+ * `handleSubmit`, and then invokes the provided `onSubmit` (if any).
+ *
+ * Behavior:
+ * - `onSubmit` handler: prevents default, calls `form.handleSubmit(event)`, then
+ *   forwards the event to the user-provided `onSubmit`.
+ * - Exposes a standard `<form>` element API via `ComponentProps<'form'>`.
+ *
+ * Usage:
+ * ```tsx
+ * function Example() {
+ *   const form = useTanstackUnityForm<{ name: string }>({ validators: {} })
+ *   return (
+ *     <TanstackForm>
+ *       <form.AppField name="name">{() => <TanstackInput />}</form.AppField>
+ *     </TanstackForm>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackForm: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import('react').RefAttributes<HTMLFormElement>>;
+export { TanstackForm };

package/dist/esm/components/form/TanstackForm.js

@@ -0,0 +1,29 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { useFormContext as f } from "../../hooks/tanstack-form-context.js";
+const u = c({
+  base: []
+}), d = p(
+  ({ children: t, onSubmit: r, className: a, ...m }, s) => {
+    const i = f();
+    return /* @__PURE__ */ n(
+      "form",
+      {
+        "data-dd-privacy": "mask",
+        onSubmit: (o) => {
+          o.preventDefault(), o.stopPropagation(), i.handleSubmit(o), r?.(o);
+        },
+        ...m,
+        ref: s,
+        noValidate: !0,
+        className: u({ className: a }),
+        children: t
+      }
+    );
+  }
+);
+d.displayName = "TanstackForm";
+export {
+  d as TanstackForm
+};

package/dist/esm/components/form-field/FormField.d.ts

@@ -54,6 +54,8 @@ export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues,
  * }
  * ```
  * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>;
 export { FormField };

package/dist/esm/components/form-field/FormField.js

@@ -5,15 +5,15 @@ import { useController as S } from "react-hook-form";
 import P from "../../hooks/use-id.js";
 import { createSchemaAdapter as g } from "../../utils/createSchemaAdapter.js";
 import { useUnityFormProvider as j } from "../form/Form.context.js";
-import { FormFieldProvider as D } from "./FormField.context.js";
-import { FormContextualLink as E } from "./parts/FormContextualLink.js";
-import { FormHelperText as I } from "./parts/FormHelperText.js";
-import { isFieldRequired as N } from "./utils/isFieldRequired.js";
-const _ = L({
+import { FormFieldProvider as w } from "./FormField.context.js";
+import { FormHelperText as D } from "./parts/FormHelperText.js";
+import { RawFormContextualLink as E } from "./parts/RawFormContextualLink.js";
+import { isFieldRequired as I } from "./utils/isFieldRequired.js";
+const N = L({
   slots: {
     base: "uy:flex uy:flex-col uy:gap-100"
   }
-}), w = H(
+}), _ = H(
   ({
     children: o,
     control: f,
@@ -25,7 +25,7 @@ const _ = L({
     isDisabled: h
   }, y) => {
     const b = P(), { schema: t } = j(), { formState: i } = S({ name: r, control: f }), C = d(
-      () => N(g(t), r),
+      () => I(g(t), r),
       [t, r]
     ), { hasHelperText: R, hasContextualLink: T } = d(() => {
       let s = !1, m = !1;
@@ -33,7 +33,7 @@ const _ = L({
         n.Children.forEach(v, (a) => {
           if (!n.isValidElement(a)) return;
           const e = a;
-          e.type === I ? s = !0 : e.type === E && (m = !0), e.props && typeof e.props == "object" && "children" in e.props && l(e.props.children);
+          e.type === D ? s = !0 : e.type === E && (m = !0), e.props && typeof e.props == "object" && "children" in e.props && l(e.props.children);
         });
       };
       return l(o), { hasHelperText: s, hasContextualLink: m };
@@ -46,11 +46,11 @@ const _ = L({
       id: b,
       isRequired: F ?? C,
       isDisabled: h ?? (i.isSubmitting || i.disabled)
-    }, { base: q } = _();
-    return /* @__PURE__ */ p("div", { ref: y, className: q({ className: x }), children: /* @__PURE__ */ p(D, { ...k, children: o }) });
+    }, { base: q } = N();
+    return /* @__PURE__ */ p("div", { ref: y, className: q({ className: x }), children: /* @__PURE__ */ p(w, { ...k, children: o }) });
   }
 );
-w.displayName = "FormField";
+_.displayName = "FormField";
 export {
-  w as FormField
+  _ as FormField
 };

package/dist/esm/components/form-field/TanstackFormField.context.d.ts

@@ -0,0 +1,10 @@
+export type FieldA11yContextValue = {
+    fieldGroupId: string;
+    labelId: string;
+    inputId: string;
+    feedbackTextId: string;
+    helperTextId?: string;
+    contextualLinkId?: string;
+};
+export declare const FieldA11yContext: import('react').Context<FieldA11yContextValue>;
+export declare function useFieldA11yContext(): FieldA11yContextValue;

package/dist/esm/components/form-field/TanstackFormField.context.js

@@ -0,0 +1,14 @@
+import { useContext as e, createContext as t } from "react";
+const o = t({
+  fieldGroupId: "",
+  labelId: "",
+  inputId: "",
+  feedbackTextId: ""
+});
+function d() {
+  return e(o);
+}
+export {
+  o as FieldA11yContext,
+  d as useFieldA11yContext
+};

package/dist/esm/components/form-field/TanstackFormField.d.ts

@@ -0,0 +1,49 @@
+export interface FormFieldProps extends React.PropsWithChildren {
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the proper accessibility of the a form field's parts, such as the label and the helper text
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ * import { z } from 'zod'
+ *
+ * const loginSchema = z.object({
+ *   email: z.string().email('Invalid email address'),
+ *   password: z.string().min(8, 'Password must be at least 8 characters'),
+ * })
+ *
+ * const MyForm = () => {
+ *   const form = useTanstackUnityForm({
+ *     validators: {
+ *       onBlur: loginSchema,
+ *     },
+ *     defaultValues: {
+ *       email: '',
+ *       password: '',
+ *     },
+ *   })
+ *
+ *   const submitForm = (values: z.infer<typeof loginSchema>) => {
+ *     console.log(values)
+ *   }
+ *
+ *   return (
+ *     <form.Form>
+ *       <form.FormField>
+ *         <form.FormLabel>Email</form.FormLabel>
+ *         <form.FormHelperText>Enter your primary email address</form.FormHelperText>
+ *         <form.Input type="email"/>
+ *         <form.FormFeedbackText/>
+ *       </form.FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @note Use this component directly from the `useUnityForm` hook to have type-safety and proper state management.
+ */
+export declare function TanstackFormField({ children, className }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TanstackFormField {
+    var displayName: string;
+}

package/dist/esm/components/form-field/TanstackFormField.js

@@ -0,0 +1,46 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useId as I, useRef as k, useState as u, useLayoutEffect as _, useMemo as T } from "react";
+import { uyTv as F } from "@payfit/unity-themes";
+import { useFieldContext as $ } from "../../hooks/tanstack-form-context.js";
+import { FieldA11yContext as b } from "./TanstackFormField.context.js";
+const h = F({
+  base: ["uy:group/field", "uy:flex uy:flex-col uy:gap-100"]
+});
+function v({ children: l, className: c }) {
+  const m = I(), r = k(null), o = $(), n = o.form.formId || m, a = o.name.replace(/[^\w-]/g, "-"), [i, p] = u(!1), [s, x] = u(!1);
+  _(() => {
+    const e = r.current;
+    if (!e) return;
+    const t = e.querySelector(
+      '[data-unity-slot="form-field-helper-text"]'
+    ), y = e.querySelector(
+      '[data-unity-slot="form-field-contextual-link"]'
+    );
+    p(!!t), x(!!y);
+  }, [l]);
+  const d = T(() => {
+    const e = `form-${n}-field-${a}`, t = {
+      fieldGroupId: e,
+      labelId: `${e}__label`,
+      inputId: `${e}__input`,
+      feedbackTextId: `${e}__feedback-text`
+    };
+    return i && (t.helperTextId = `${e}__helper-text`), s && (t.contextualLinkId = `${e}__contextual-link`), t;
+  }, [n, a, i, s]);
+  return /* @__PURE__ */ f(b.Provider, { value: d, children: /* @__PURE__ */ f(
+    "div",
+    {
+      ref: r,
+      id: d.fieldGroupId,
+      role: "group",
+      className: h({ className: c }),
+      "data-unity-slot": "form-field",
+      "data-invalid": !o.state.meta.isValid,
+      children: l
+    }
+  ) });
+}
+v.displayName = "TanstackFormField";
+export {
+  v as TanstackFormField
+};

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

@@ -22,6 +22,8 @@ export type FormControlProps = React.ComponentProps<typeof Slot>;
  * ```
  * @remarks
  * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-formfield-formcontrol--docs)
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare function FormControl({ ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FormControl {

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

@@ -1,5 +1,7 @@
 /**
  * FormErrorText is a component that displays error text for a form field.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const FormFeedbackText: import('react').ForwardRefExoticComponent<{
     children?: import('react').ReactNode | undefined;

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

@@ -1,5 +1,7 @@
 /**
  * FormHelperText is a component that displays helper text for a form field.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const FormHelperText: import('react').ForwardRefExoticComponent<{
     children?: import('react').ReactNode | undefined;

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

@@ -3,6 +3,8 @@ export type FormLabelProps = Omit<LabelProps, 'isRequired'>;
 /**
  * FormLabel is a component that displays a label for a form field.
  * It is used to provide context for the form field.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const FormLabel: import('react').ForwardRefExoticComponent<FormLabelProps & import('react').RefAttributes<HTMLLabelElement>>;
 export { FormLabel };

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

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+interface FormContextualLinkProps {
+    /**
+     * The href of the contextual link
+     */
+    href: string;
+    onPress?: never;
+}
+interface FormContextualLinkActionProps {
+    /**
+     * A function to open a contextual panel
+     */
+    onPress: () => void;
+    href?: never;
+}
+/**
+ * FormContextualLink is a component that displays a contextual link for a form field.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
+ */
+declare const RawFormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { RawFormContextualLink };

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

@@ -0,0 +1,39 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { Button as m } from "react-aria-components";
+import { RawLink as s } from "../../link/RawLink.js";
+import { useFormField as u } from "../FormField.context.js";
+const c = d((l, o) => {
+  const { children: t, href: a, onPress: e, ...r } = l, { formContextualLinkId: n } = u();
+  return a ? /* @__PURE__ */ i(
+    s,
+    {
+      id: n,
+      size: "small",
+      color: "secondary",
+      variant: "standalone",
+      "data-unity-slot": "contextual-link",
+      href: a,
+      ref: o,
+      "data-dd-privacy": "allow",
+      ...r,
+      children: t
+    }
+  ) : /* @__PURE__ */ i(
+    m,
+    {
+      id: n,
+      onPress: e,
+      "data-unity-slot": "contextual-link",
+      className: "uy:typography-body-small uy:w-fit",
+      ref: o,
+      "data-dd-privacy": "allow",
+      ...r,
+      children: t
+    }
+  );
+});
+c.displayName = "RawFormContextualLink";
+export {
+  c as RawFormContextualLink
+};

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

@@ -0,0 +1,12 @@
+import { TextProps } from '../../text/Text.js';
+export type TanstackFormFeedbackTextProps = Omit<TextProps, 'variant' | 'color' | 'className'>;
+/**
+ * `TanstackFormFeedbackText` renders the first validation message for the
+ * current TanStack form field when the field is invalid
+ *
+ * Behavior:
+ * - Returns `null` when the field is valid or has no errors.
+ * - When invalid, renders the first error message.
+ */
+declare const TanstackFormFeedbackText: import('react').ForwardRefExoticComponent<TanstackFormFeedbackTextProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { TanstackFormFeedbackText };

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

@@ -0,0 +1,32 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { useStore as s } from "@tanstack/react-form";
+import { useFieldContext as c } from "../../../hooks/tanstack-form-context.js";
+import { Text as f } from "../../text/Text.js";
+import { useFieldA11yContext as u } from "../TanstackFormField.context.js";
+const x = l((r, t) => {
+  const a = c(), i = u(), { errors: o, invalid: d, isTouched: m } = s(a.store, (e) => ({
+    errors: e.meta.errors,
+    invalid: !e.meta.isValid,
+    isTouched: e.meta.isTouched
+  }));
+  return !m || !d || o.length === 0 ? null : /* @__PURE__ */ n(
+    f,
+    {
+      "data-dd-privacy": "allow",
+      ...r,
+      ref: t,
+      id: i.feedbackTextId || r.id,
+      role: "alert",
+      "data-unity-slot": "form-feedback-text",
+      variant: "bodySmallStrong",
+      color: "content.form.invalid",
+      asElement: "span",
+      children: o[0].message
+    }
+  );
+});
+x.displayName = "TanstackFormFeedbackText";
+export {
+  x as TanstackFormFeedbackText
+};

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

@@ -0,0 +1,11 @@
+import { TextProps } from '../../text/Text.js';
+export type TanstackFormHelperTextProps = Omit<TextProps, 'variant' | 'color' | 'className'>;
+/**
+ * `TanstackFormHelperText` displays non-blocking helper text for the current
+ * TanStack form field.
+ *
+ * Usage:
+ * - Place directly under an input/textarea within a `<form.AppField name="…">`.
+ */
+declare const TanstackFormHelperText: import('react').ForwardRefExoticComponent<TanstackFormHelperTextProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { TanstackFormHelperText };

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

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Text as m } from "../../text/Text.js";
+import { useFieldA11yContext as n } from "../TanstackFormField.context.js";
+const d = l(({ children: e, ...t }, r) => {
+  const o = n();
+  return /* @__PURE__ */ a(
+    m,
+    {
+      "data-dd-privacy": "allow",
+      ...t,
+      id: o.helperTextId || t.id,
+      "data-unity-slot": "form-field-helper-text",
+      variant: "bodySmall",
+      asElement: "span",
+      color: "content.neutral.low",
+      ref: r,
+      children: e
+    }
+  );
+});
+d.displayName = "TanstackFormHelperText";
+export {
+  d as TanstackFormHelperText
+};

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

@@ -0,0 +1,8 @@
+import { LabelProps } from '../../label/Label.js';
+export type FormLabelProps = LabelProps;
+/**
+ * `TanstackFormLabel` renders the label for the current TanStack form field.
+ * It is used to provide context for the form field.
+ */
+declare const TanstackFormLabel: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { TanstackFormLabel };

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

@@ -0,0 +1,26 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Label as n } from "../../label/Label.js";
+import { useFieldA11yContext as d } from "../TanstackFormField.context.js";
+const s = l(
+  ({ children: e, isRequired: o, ...r }, t) => {
+    const { requiredVariant: m } = r, a = d();
+    return /* @__PURE__ */ i(
+      n,
+      {
+        ref: t,
+        htmlFor: a.inputId,
+        id: a.labelId,
+        isRequired: o,
+        requiredVariant: m,
+        className: "uy:leading-[1]!",
+        ...r,
+        children: e
+      }
+    );
+  }
+);
+s.displayName = "Label";
+export {
+  s as TanstackFormLabel
+};

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/funnel-layout/parts/FunnelSidebar.d.ts

@@ -32,9 +32,9 @@ export interface FunnelSidebarProps extends PropsWithChildren<VariantProps<typeo
  *   return (
  *     <FunnelSidebar>
  *       <TaskMenu>
- *         <Task>
+ *         <RawTask>
  *           <TaskTitle>Task 1</TaskTitle>
- *         </Task>
+ *         </RawTask>
  *       </TaskMenu>
  *     </FunnelSidebar>
  *   )

package/dist/esm/components/icon/Icon.js

@@ -1,7 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconSprite as i } from "@payfit/unity-icons";
-import { uyTv as d } from "@payfit/unity-themes";
-const l = d({
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { IconSprite as d } from "@payfit/unity-icons";
+import { uyTv as l } from "@payfit/unity-themes";
+const y = l({
   variants: {
     size: {
       20: "uy:w-250 uy:h-250",
@@ -87,27 +88,30 @@ const l = d({
     display: "block"
   }
 });
-function f({
-  alt: n,
-  color: o,
-  size: c,
-  src: r,
-  role: a = "img",
-  display: s = "block",
-  ...t
+function b({
+  alt: r,
+  color: t,
+  size: e,
+  src: a,
+  role: s = "img",
+  display: n = "block",
+  ...o
 }) {
-  const u = l({ size: c, color: o, display: s });
-  return /* @__PURE__ */ e(
+  const u = i(
+    () => y({ size: e, color: t, display: n }),
+    [e, t, n]
+  );
+  return /* @__PURE__ */ c(
     "span",
     {
       "data-dd-privacy": "allow",
-      ...t,
-      role: a,
-      "aria-label": t["aria-labelledby"] ? void 0 : n,
-      children: /* @__PURE__ */ e(i, { className: u, src: r })
+      ...o,
+      role: s,
+      "aria-label": o["aria-labelledby"] ? void 0 : r,
+      children: /* @__PURE__ */ c(d, { className: u, src: a })
     }
   );
 }
 export {
-  f as Icon
+  b as Icon
 };

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