@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/phone-number/PhoneNumberInput.js

@@ -0,0 +1,329 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { forwardRef as J, useState as K, useRef as Q, useImperativeHandle as X } from "react";
+import { uyTv as Y } from "@payfit/unity-themes";
+import { useFilter as Z, Autocomplete as _ } from "react-aria-components/Autocomplete";
+import { Button as ee } from "react-aria-components/Button";
+import { Group as re } from "react-aria-components/Group";
+import { Input as te } from "react-aria-components/Input";
+import { ListBox as ae } from "react-aria-components/ListBox";
+import { Popover as oe } from "react-aria-components/Popover";
+import { Select as ue } from "react-aria-components/Select";
+import { Virtualizer as de, ListLayout as ne } from "react-aria-components/Virtualizer";
+import { defaultCountries as f, usePhoneInput as ie, FlagImage as le, parseCountry as se } from "react-international-phone";
+import { useIntl as ye } from "react-intl";
+import { CircularIconButton as ce } from "../icon-button/CircularIconButton.js";
+import { Icon as m } from "../icon/Icon.js";
+import { SearchInput as fe } from "../select/parts/SearchInput.js";
+import { PhoneNumberItem as me } from "./parts/PhoneNumberItem.js";
+import be from "./unknownFlag.svg.js";
+const pe = Y({
+  slots: {
+    base: [
+      "uy:group",
+      // common
+      "uy:flex uy:w-full uy:border uy:border-border-form-enabled uy:bg-surface-form-enabled uy:border-solid uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
+      // common hover
+      'uy:data-[active="true"]:data-[hovered="true"]:border-border-form-hover uy:data-[active="true"]:data-[hovered="true"]:bg-surface-form-hover uy:data-[active="true"]:data-[hovered="true"]:text-content-form-hover',
+      // common pressed
+      'uy:data-[active="true"]:data-[pressed="true"]:border-border-form-pressed uy:data-[active="true"]:data-[pressed="true"]:bg-surface-form-pressed uy:data-[active="true"]:data-[pressed="true"]:text-content-form-pressed',
+      // common active
+      'uy:data-[active="true"]:border-border-form-active',
+      // common focus-visible
+      'uy:data-[focus-visible="true"]:outline-none uy:data-[focus-visible="true"]:ring-2 uy:data-[focus-visible="true"]:ring-utility-focus-ring uy:data-[focus-visible="true"]:ring-offset-2',
+      // common invalid
+      'uy:data-[invalid="true"]:border-border-form-error uy:data-[invalid="true"]:bg-surface-form-error uy:data-[invalid="true"]:text-content-form-danger-enabled',
+      // common disabled
+      'uy:data-[disabled="true"]:border-border-form-disabled uy:data-[disabled="true"]:bg-surface-form-disabled uy:data-[disabled="true"]:text-content-form-disabled uy:data-[disabled="true"]:cursor-not-allowed',
+      //mobile
+      "uy:h-5.5 uy:rounded-100",
+      // desktop
+      "uy:sm:h-500 uy:sm:rounded-75 "
+    ],
+    prefix: [
+      // common
+      "uy:border-r uy:border-solid uy:border-border-form-enabled uy:text-content-form-enabled uy:flex-grow-0 uy:pl-150 uy:pr-100   uy:group-data-[active=true]:border-border-form-active  uy:cursor-pointer",
+      // common invalid
+      'uy:group-data-[invalid="true"]:border-border-form-error',
+      // common disabled
+      'uy:group-data-[disabled="true"]:border-border-form-disabled uy:group-data-[disabled="true"]:text-content-form-disabled uy:data-[disabled="true"]:cursor-not-allowed',
+      //mobile
+      "uy:py-125",
+      // desktop
+      "uy:sm:py-100"
+    ],
+    inputWrapper: [
+      // common
+      "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:px-150 uy:max-w-full uy:justify-between",
+      // common invalid
+      'uy:group-data-[invalid="true"]:bg-surface-form-error',
+      // common disabled
+      'uy:group-data-[disabled="true"]:bg-surface-form-disabled uy:data-[disabled="true"]:cursor-not-allowed',
+      // mobile
+      "uy:py-125 uy:rounded-100",
+      // desktop
+      "uy:sm:py-100 uy:sm:rounded-75"
+    ],
+    input: [
+      // common
+      "uy:text-content-form-enabled uy:bg-surface-form-enabled 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 uy:min-h-300",
+      // common invalid
+      'uy:group-data-[invalid="true"]:bg-surface-form-error uy:group-data-[invalid="true"]:text-content-danger-enabled',
+      // common disabled
+      'uy:group-data-[disabled="true"]:bg-surface-form-disabled uy:group-data-[disabled="true"]:text-content-form-disabled uy:data-[disabled="true"]:cursor-not-allowed'
+    ],
+    state: [
+      // common
+      "uy:flex uy:gap-50 uy:items-center uy:shrink-0"
+    ],
+    selectIcon: [
+      //common
+      ""
+    ],
+    selectButton: [
+      //common
+      "uy:cursor-pointer uy:flex uy:gap-50 uy:items-center uy:outline-none",
+      // common disabled
+      'uy:data-[disabled="true"]:cursor-not-allowed'
+    ],
+    selectPopover: [
+      //common
+      "uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral-enabled uy:shadow-300",
+      // mobile
+      "uy:rounded-100",
+      // desktop
+      "uy:sm:rounded-75"
+    ],
+    selectListbox: [
+      //common
+      "uy:overflow-y-auto uy:overflow-x-hidden uy:max-h-[296px]"
+    ]
+  }
+}), ge = J(
+  (b, p) => {
+    const n = ye(), {
+      onChange: g,
+      value: i,
+      defaultCountry: h = "unknown",
+      onClearButtonPress: v,
+      isInvalid: o = !1,
+      isDisabled: u = !1,
+      prefix: x = "+",
+      "aria-label": s,
+      defaultMask: w,
+      charAfterDialCode: C,
+      historySaveDebounceMS: I,
+      disableCountryGuess: N,
+      forceDialCode: P,
+      disableDialCodeAndPrefix: k,
+      disableFormatting: S,
+      searchInputAriaLabel: M,
+      ...B
+    } = b, [D, L] = K(!1), { contains: O } = Z({ sensitivity: "base" }), d = Q(null);
+    X(p, () => d.current, [d]);
+    const R = [["", "unknown", "", ""], ...f], {
+      inputRef: y,
+      inputValue: c,
+      handlePhoneValueChange: j,
+      country: t,
+      setCountry: A,
+      phone: F
+    } = ie({
+      prefix: x,
+      defaultCountry: h,
+      value: i,
+      countries: R,
+      disableDialCodePrefill: !0,
+      defaultMask: w,
+      charAfterDialCode: C,
+      historySaveDebounceMS: I,
+      disableCountryGuess: N,
+      forceDialCode: P,
+      disableDialCodeAndPrefix: k,
+      disableFormatting: S,
+      onChange: (r) => {
+        g?.(t.iso2 === "unknown" ? "" : r.phone);
+      }
+    }), {
+      base: W,
+      prefix: $,
+      inputWrapper: V,
+      input: z,
+      selectPopover: G,
+      selectListbox: T,
+      selectIcon: U,
+      selectButton: E,
+      state: H
+    } = pe(), q = c.replace(F, "").trim() !== "" && !u;
+    return /* @__PURE__ */ e("div", { ref: d, children: /* @__PURE__ */ a(
+      re,
+      {
+        className: W(),
+        "aria-label": `${s}${i ? `, ${i}` : ""}`,
+        "aria-invalid": o,
+        "data-invalid": o,
+        "data-disabled": u,
+        "aria-disabled": u,
+        children: [
+          /* @__PURE__ */ a(
+            ue,
+            {
+              onOpenChange: (r) => {
+                L(r), r || setTimeout(() => {
+                  y.current?.focus();
+                }, 0);
+              },
+              isDisabled: u,
+              value: t.iso2,
+              onChange: (r) => {
+                A(r);
+              },
+              className: $(),
+              isInvalid: o,
+              children: [
+                /* @__PURE__ */ a(
+                  ee,
+                  {
+                    "data-dd-privacy": "mask",
+                    className: E(),
+                    "aria-label": n.formatMessage(
+                      {
+                        id: "unity:component:phone-number:country-selector:label",
+                        defaultMessage: "Select country code, {country} {dialCode}"
+                      },
+                      {
+                        country: t.name,
+                        dialCode: t.dialCode
+                      }
+                    ),
+                    children: [
+                      t.iso2 !== "unknown" ? /* @__PURE__ */ e(
+                        le,
+                        {
+                          iso2: t.iso2,
+                          alt: t.name,
+                          size: 24,
+                          "aria-hidden": "true",
+                          "data-dd-privacy": "mask"
+                        }
+                      ) : /* @__PURE__ */ e(
+                        "img",
+                        {
+                          "aria-hidden": "true",
+                          src: be,
+                          alt: "",
+                          "data-dd-privacy": "mask",
+                          className: "react-international-phone-flag-emoji",
+                          width: 24,
+                          height: 24
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        m,
+                        {
+                          className: U(),
+                          "aria-hidden": "true",
+                          src: D ? "CaretUpOutlined" : "CaretDownOutlined"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  oe,
+                  {
+                    style: {
+                      "--trigger-width": `${d.current?.offsetWidth}px`
+                    },
+                    triggerRef: d,
+                    offset: 1,
+                    containerPadding: 8,
+                    className: G(),
+                    children: /* @__PURE__ */ a(_, { filter: O, children: [
+                      /* @__PURE__ */ e(fe, { "aria-label": M }),
+                      /* @__PURE__ */ e(
+                        de,
+                        {
+                          layout: ne,
+                          layoutOptions: {
+                            padding: 8
+                          },
+                          children: /* @__PURE__ */ e(
+                            ae,
+                            {
+                              className: T(),
+                              items: f,
+                              children: (r) => {
+                                const l = se(r);
+                                return /* @__PURE__ */ e(
+                                  me,
+                                  {
+                                    country: l,
+                                    id: l.iso2
+                                  },
+                                  l.iso2
+                                );
+                              }
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: V(), children: [
+            /* @__PURE__ */ e(
+              te,
+              {
+                ref: y,
+                ...B,
+                className: z(),
+                type: "tel",
+                onChange: j,
+                value: c,
+                "data-dd-privacy": "mask",
+                "aria-invalid": o,
+                disabled: u,
+                "aria-label": s
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: H(), children: [
+              o && /* @__PURE__ */ e(
+                m,
+                {
+                  src: "WarningCircleOutlined",
+                  color: "content.form.invalid",
+                  role: "img",
+                  "aria-label": n.formatMessage({
+                    id: "unity:component:form-field:form-input:error:alt",
+                    defaultMessage: "Error"
+                  })
+                }
+              ),
+              q && /* @__PURE__ */ e(
+                ce,
+                {
+                  title: n.formatMessage({
+                    id: "unity:component:common:clear:title",
+                    defaultMessage: "Clear"
+                  }),
+                  color: "content.neutral.low",
+                  icon: "CloseOutlined",
+                  onPress: () => {
+                    v?.();
+                  }
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+ge.displayName = "PhoneNumberInput";
+export {
+  ge as PhoneNumberInput
+};

package/dist/esm/components/phone-number/TanstackPhoneNumberInput.d.ts

@@ -0,0 +1,64 @@
+import { PhoneNumberInputProps } from './PhoneNumberInput.js';
+export type TanstackPhoneNumberInputProps = Omit<PhoneNumberInputProps, 'value' | 'isInvalid'>;
+/**
+ * The `TanstackPhoneNumberInput` component renders a phone number input field
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Displays a phone number input with integrated country selector and automatic formatting.
+ * - The field value and invalid state are derived from the TanStack form context.
+ * - Supports searchable country dropdown and full keyboard navigation.
+ *
+ * Accessibility:
+ * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
+ *   `aria-details` using identifiers from the `a11y` context.
+ *
+ * Key props:
+ * - `defaultCountry?: CountryIso2` — default country code (ISO 3166-1 alpha-2).
+ * - `placeholder?: string` — placeholder text displayed when the field is empty.
+ * - `prefix?: string` — prefix character for phone numbers (default: '+').
+ * - `onChange?: (phone: string) => void` — callback when phone number changes.
+ * - `onClearButtonPress?: () => void` — callback when clear button is pressed.
+ * - Inherits all props from `PhoneNumberInputProps` except `value` and `isInvalid`.
+ * @example
+ * ```tsx
+ * import { TanstackPhoneNumberInput } from '@/components/phone-number/TanstackPhoneNumberInput'
+ * import { useTanstackUnityForm } from '@/hooks/use-tanstack-form'
+ * import * as z from 'zod'
+ *
+ * function Example() {
+ *   const schema = z.object({
+ *     phoneNumber: z.e164({ message: 'Invalid phone number' }),
+ *   })
+ *
+ *   const form = useTanstackUnityForm({
+ *     validators: {
+ *       onBlur: schema,
+ *     },
+ *   })
+ *
+ *   return (
+ *     <form.AppForm>
+ *       <form.Form>
+ *         <form.AppField name="phoneNumber">
+ *           {field => (
+ *             <field.PhoneNumberInput
+ *               aria-label="Phone number"
+ *               defaultCountry="fr"
+ *               placeholder="+33 6 12 34 56 78"
+ *             />
+ *           )}
+ *         </form.AppField>
+ *       </form.Form>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks Migration from `PhoneNumberInput` (non‑TanStack):
+ * - Do not pass `value` or `isInvalid` props: these are derived from the TanStack form context.
+ * - Use `<form.AppField name="…">` to provide the field context.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-field-components-phonenumber--docs
+ */
+declare const TanstackPhoneNumberInput: import('react').ForwardRefExoticComponent<TanstackPhoneNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { TanstackPhoneNumberInput };

package/dist/esm/components/phone-number/TanstackPhoneNumberInput.js

@@ -0,0 +1,33 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as b } from "../form-field/TanstackFormField.context.js";
+import { PhoneNumberInput as h } from "./PhoneNumberInput.js";
+const C = c(({ onChange: r, onBlur: n, onClearButtonPress: i, isDisabled: l, ...s }, d) => {
+  const e = f(), t = b(), m = e.state.meta.isTouched && !e.state.meta.isValid, o = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u(
+    h,
+    {
+      ref: d,
+      ...s,
+      value: e.state.value ?? "",
+      onChange: (a) => {
+        e.handleChange(a), r?.(a);
+      },
+      onBlur: (a) => {
+        e.handleBlur(), n?.(a);
+      },
+      onClearButtonPress: () => {
+        e.setValue(""), i?.();
+      },
+      isDisabled: l,
+      isInvalid: m,
+      "aria-labelledby": t.labelId,
+      "aria-describedby": o.length > 0 ? o : void 0,
+      "aria-details": t.contextualLinkId
+    }
+  );
+});
+export {
+  C as TanstackPhoneNumberInput
+};

package/dist/esm/components/phone-number/parts/PhoneNumberItem.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ListBoxItemProps } from 'react-aria-components/ListBox';
+import { ParsedCountry } from 'react-international-phone';
+export declare const phoneNumberItem: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            name?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            name?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    name: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            name?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    name: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    name: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface PhoneNumberItemProps extends VariantProps<typeof phoneNumberItem>, ListBoxItemProps {
+    country: ParsedCountry;
+}
+declare const PhoneNumberItem: {
+    ({ country, isDisabled }: PhoneNumberItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PhoneNumberItem };

package/dist/esm/components/phone-number/parts/PhoneNumberItem.js

@@ -0,0 +1,68 @@
+import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
+import { uyTv as n } from "@payfit/unity-themes";
+import { ListBoxItem as m } from "react-aria-components/ListBox";
+import { FlagImage as c } from "react-international-phone";
+import { useIntl as y } from "react-intl";
+import { Icon as p } from "../../icon/Icon.js";
+import { Text as r } from "../../text/Text.js";
+const b = n({
+  slots: {
+    base: [
+      //common
+      "uy:flex uy:py-100 uy:px-150 uy:typography-body uy:cursor-pointer  uy:rounded-50",
+      // mobile
+      "uy:gap-125",
+      // desktop
+      "uy:sm:gap-100",
+      //  hover
+      'uy:data-[hovered="true"]:bg-surface-neutral-hover',
+      //  pressed
+      'uy:data-[pressed="true"]:bg-surface-neutral-pressed',
+      //  selected
+      'uy:data-[selected="true"]:bg-surface-neutral-active',
+      //  focus-visible
+      'uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-solid uy:data-[focus-visible="true"]:outline-utility-focus-ring',
+      //  disabled
+      'uy:data-[disabled="true"]:text-content-neutral-disabled uy:data-[disabled="true"]:bg-surface-neutral-disabled uy:data-[disabled="true"]:cursor-not-allowed'
+    ],
+    name: [
+      //common
+      "uy:grow"
+    ]
+  }
+}), f = ({ country: e, isDisabled: u }) => {
+  const { base: s, name: o } = b(), i = y();
+  return /* @__PURE__ */ t(
+    m,
+    {
+      id: e.iso2,
+      textValue: `${e.name} ${e.dialCode}`,
+      className: s(),
+      "data-dd-privacy": "mask",
+      isDisabled: u,
+      children: ({ isSelected: d }) => /* @__PURE__ */ a(l, { children: [
+        /* @__PURE__ */ t(c, { iso2: e.iso2, alt: "", size: 24 }),
+        /* @__PURE__ */ t(r, { className: o(), children: e.name }),
+        /* @__PURE__ */ a(r, { children: [
+          "+",
+          e.dialCode
+        ] }),
+        d && /* @__PURE__ */ t(
+          p,
+          {
+            src: "CheckOutlined",
+            alt: i.formatMessage({
+              id: "unity:component:phone-number:selected:label",
+              defaultMessage: "Selected"
+            })
+          }
+        )
+      ] })
+    }
+  );
+};
+f.displayName = "PhoneNumberItem";
+export {
+  f as PhoneNumberItem,
+  b as phoneNumberItem
+};

package/dist/esm/components/phone-number/unknownFlag.svg.js

@@ -0,0 +1,4 @@
+const e = "data:image/svg+xml,%3csvg%20width='21'%20height='15'%20viewBox='0%200%2021%2015'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='21'%20height='15'%20fill='%23CBD3DC'/%3e%3c/svg%3e";
+export {
+  e as default
+};

package/dist/esm/components/phone-number-field/TanstackPhoneNumberField.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { TanstackPhoneNumberInputProps } from '../phone-number/TanstackPhoneNumberInput.js';
+interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The label for the text field. */
+    label: string;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the select field. */
+    contextualLink?: ReactNode;
+}
+export interface PhoneNumberFieldProps extends FieldProps, TanstackPhoneNumberInputProps {
+}
+declare const TanstackPhoneNumberField: import('react').ForwardRefExoticComponent<PhoneNumberFieldProps & import('react').RefAttributes<unknown>>;
+export { TanstackPhoneNumberField };

package/dist/esm/components/phone-number-field/TanstackPhoneNumberField.js

@@ -0,0 +1,32 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { TanstackFormFeedbackText as s } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as p } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as d } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as l } from "../form-field/TanstackFormField.js";
+import { TanstackPhoneNumberInput as f } from "../phone-number/TanstackPhoneNumberInput.js";
+const F = ({
+  label: m,
+  isRequired: e,
+  requiredVariant: t,
+  helperText: o,
+  contextualLink: a,
+  ...n
+}) => /* @__PURE__ */ i(l, { children: [
+  /* @__PURE__ */ r(
+    d,
+    {
+      requiredVariant: t,
+      isRequired: e,
+      children: m
+    }
+  ),
+  o && /* @__PURE__ */ r(p, { children: o }),
+  /* @__PURE__ */ r(f, { ...n }),
+  /* @__PURE__ */ r(s, {}),
+  a
+] }), k = c(F);
+k.displayName = "TanstackPhoneNumberField";
+export {
+  k as TanstackPhoneNumberField
+};

package/dist/esm/components/pill/Pill.d.ts

@@ -0,0 +1,87 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { AriaAttributes } from 'react';
+declare const pill: import('tailwind-variants').TVReturnType<{
+    variant: {
+        critical: string;
+        info: string[];
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong", {
+    variant: {
+        critical: string;
+        info: string[];
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        critical: string;
+        info: string[];
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong", unknown, unknown, undefined>>;
+export type PillProps = Partial<Pick<HTMLDivElement, 'id'>> & Required<Pick<AriaAttributes, 'aria-label'>> & Pick<AriaAttributes, 'aria-details' | 'aria-describedby' | 'aria-live'> & {
+    /** The value to be displayed inside the Pill */
+    value: number;
+    /**
+     * The variant of the Pill, determining its color scheme
+     * @default 'critical'
+     */
+    variant?: VariantProps<typeof pill>['variant'];
+    /**
+     * Determines if the Pill is visible or not
+     * @default true
+     */
+    isVisible?: VariantProps<typeof pill>['isVisible'];
+    /**
+     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
+     * @default 2
+     */
+    maxDigits?: number;
+};
+/**
+ * The Pill component displays a count of notifications or other numerical values.
+ */
+declare const Pill: import('react').ForwardRefExoticComponent<Partial<Pick<HTMLDivElement, "id">> & Required<Pick<AriaAttributes, "aria-label">> & Pick<AriaAttributes, "aria-describedby" | "aria-details" | "aria-live"> & {
+    /** The value to be displayed inside the Pill */
+    value: number;
+    /**
+     * The variant of the Pill, determining its color scheme
+     * @default 'critical'
+     */
+    variant?: VariantProps<typeof pill>["variant"];
+    /**
+     * Determines if the Pill is visible or not
+     * @default true
+     */
+    isVisible?: VariantProps<typeof pill>["isVisible"];
+    /**
+     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
+     * @default 2
+     */
+    maxDigits?: number;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { Pill };