@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/grid/GridItem.js

@@ -0,0 +1,43 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import { gridItem as g } from "./Grid.variants.js";
+const j = I(
+  ({
+    asElement: r = "div",
+    area: e,
+    children: t,
+    className: o,
+    colSpan: s,
+    colStart: m,
+    colEnd: i,
+    justify: a,
+    align: l,
+    ...c
+  }, d) => {
+    const f = Object.fromEntries(
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      [["gridArea", e]].filter(([u, p]) => !!p)
+    ), n = g({
+      colSpan: s,
+      colStart: m,
+      colEnd: i,
+      justify: a,
+      align: l,
+      className: o
+    });
+    return /* @__PURE__ */ y(
+      r,
+      {
+        ref: d,
+        className: n,
+        style: f,
+        ...c,
+        children: t
+      }
+    );
+  }
+);
+j.displayName = "GridItem";
+export {
+  j as GridItem
+};

package/dist/esm/components/icon/Icon.d.ts

@@ -0,0 +1,262 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { VariantProps } from '@payfit/unity-themes';
+import { HTMLAttributes } from 'react';
+declare const icon: import('tailwind-variants').TVReturnType<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, undefined, undefined, {
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;
+export type IconProps = VariantProps<typeof icon> & Pick<HTMLAttributes<HTMLSpanElement>, 'className' | 'role' | 'aria-labelledby' | 'aria-hidden'> & {
+    /** The icon to render from the Unity icon set */
+    src: UnityIcon;
+    /**
+     * Alternative text for the icon, used for accessibility
+     * @default ''
+     */
+    alt?: string;
+    /**
+     * The icon's color. Use one of the allowed tokens or the `inherit` value for using the parent's foreground color
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof icon>['color'];
+    /**
+     * The icon's size.
+     * @default 20
+     */
+    size?: VariantProps<typeof icon>['size'];
+};
+/**
+ * The `Icon` component displays an icon from the Unity icon set.
+ */
+export declare function Icon({ alt, color, size, src, role, display, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,117 @@
+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",
+      24: "uy:w-300 uy:h-300"
+    },
+    color: {
+      "content.primary": "uy:text-content-primary",
+      "content.primary.enabled": "uy:text-content-primary-enabled",
+      "content.primary.hover": "uy:text-content-primary-hover",
+      "content.primary.pressed": "uy:text-content-primary-pressed",
+      "content.primary.focus": "uy:text-content-primary-focus",
+      "content.primary.active": "uy:text-content-primary-active",
+      "content.primary.disabled": "uy:text-content-primary-disabled",
+      "content.neutral": "uy:text-content-neutral",
+      "content.neutral.enabled": "uy:text-content-neutral-enabled",
+      "content.neutral.hover": "uy:text-content-neutral-hover",
+      "content.neutral.pressed": "uy:text-content-neutral-pressed",
+      "content.neutral.focus": "uy:text-content-neutral-focus",
+      "content.neutral.active": "uy:text-content-neutral-active",
+      "content.neutral.disabled": "uy:text-content-neutral-disabled",
+      "content.neutral.low": "uy:text-content-neutral-low",
+      "content.neutral.lowest": "uy:text-content-neutral-lowest",
+      "content.neutral.lowest.enabled": "uy:text-content-neutral-lowest-enabled",
+      "content.neutral.lowest.hover": "uy:text-content-neutral-lowest-hover",
+      "content.neutral.lowest.pressed": "uy:text-content-neutral-lowest-pressed",
+      "content.neutral.lowest.focus": "uy:text-content-neutral-lowest-focus",
+      "content.neutral.lowest.active": "uy:text-content-neutral-lowest-active",
+      "content.neutral.lowest.disabled": "uy:text-content-neutral-lowest-disabled",
+      "content.danger": "uy:text-content-danger",
+      "content.danger.enabled": "uy:text-content-danger-enabled",
+      "content.danger.hover": "uy:text-content-danger-hover",
+      "content.danger.pressed": "uy:text-content-danger-pressed",
+      "content.danger.focus": "uy:text-content-danger-focus",
+      "content.danger.active": "uy:text-content-danger-active",
+      "content.danger.disabled": "uy:text-content-danger-disabled",
+      "content.warning": "uy:text-content-warning",
+      "content.warning.enabled": "uy:text-content-warning-enabled",
+      "content.warning.hover": "uy:text-content-warning-hover",
+      "content.warning.pressed": "uy:text-content-warning-pressed",
+      "content.warning.focus": "uy:text-content-warning-focus",
+      "content.warning.active": "uy:text-content-warning-active",
+      "content.warning.disabled": "uy:text-content-warning-disabled",
+      "content.success": "uy:text-content-success",
+      "content.success.enabled": "uy:text-content-success-enabled",
+      "content.success.hover": "uy:text-content-success-hover",
+      "content.success.pressed": "uy:text-content-success-pressed",
+      "content.success.focus": "uy:text-content-success-focus",
+      "content.success.active": "uy:text-content-success-active",
+      "content.success.disabled": "uy:text-content-success-disabled",
+      "content.info": "uy:text-content-info",
+      "content.info.enabled": "uy:text-content-info-enabled",
+      "content.info.hover": "uy:text-content-info-hover",
+      "content.info.pressed": "uy:text-content-info-pressed",
+      "content.info.focus": "uy:text-content-info-focus",
+      "content.info.active": "uy:text-content-info-active",
+      "content.info.disabled": "uy:text-content-info-disabled",
+      "content.promo": "uy:text-content-promo",
+      "content.form.enabled": "uy:text-content-form",
+      "content.form.hover": "uy:text-content-form-hover",
+      "content.form.pressed": "uy:text-content-form-pressed",
+      "content.form.focus": "uy:text-content-form-focus",
+      "content.form.active": "uy:text-content-form-active",
+      "content.form.disabled": "uy:text-content-form-disabled",
+      "content.form.read-only": "uy:text-content-form-read-only",
+      "content.form.invalid": "uy:text-content-form-invalid",
+      "content.inverted": "uy:text-content-inverted",
+      "content.inverted.enabled": "uy:text-content-inverted-enabled",
+      "content.inverted.hover": "uy:text-content-inverted-hover",
+      "content.inverted.pressed": "uy:text-content-inverted-pressed",
+      "content.inverted.focus": "uy:text-content-inverted-focus",
+      "content.inverted.active": "uy:text-content-inverted-active",
+      "content.inverted.disabled": "uy:text-content-inverted-disabled",
+      inherit: "uy:text-inherit"
+    },
+    display: {
+      block: "uy:block",
+      inline: "uy:inline-block"
+    }
+  },
+  defaultVariants: {
+    size: 20,
+    color: "inherit",
+    display: "block"
+  }
+});
+function b({
+  alt: r,
+  color: t,
+  size: e,
+  src: a,
+  role: s = "img",
+  display: n = "block",
+  ...o
+}) {
+  const u = i(
+    () => y({ size: e, color: t, display: n }),
+    [e, t, n]
+  );
+  return /* @__PURE__ */ c(
+    "span",
+    {
+      "data-dd-privacy": "allow",
+      ...o,
+      role: s,
+      "aria-label": o["aria-labelledby"] ? void 0 : r,
+      children: /* @__PURE__ */ c(d, { className: u, src: a })
+    }
+  );
+}
+export {
+  b as Icon
+};

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

@@ -0,0 +1,43 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { VariantProps } from '@payfit/unity-themes';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
+export declare const circularIconButton: import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string[];
+        'content.neutral.low': string[];
+        'content.neutral.lowest': string[];
+    };
+}, undefined, string[], {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string[];
+        'content.neutral.low': string[];
+        'content.neutral.lowest': string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        '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> {
+    icon: UnityIcon;
+    title: string;
+    asElement?: 'button' | 'default';
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+}
+export declare const CircularIconButton: import('react').ForwardRefExoticComponent<CircularIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,120 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as z } from "react";
+import { uyTv as I } from "@payfit/unity-themes";
+import { Button as N } from "react-aria-components/Button";
+import { Pressable as B } from "react-aria-components/Pressable";
+import L from "../../hooks/use-id.js";
+import { Icon as y } from "../icon/Icon.js";
+import { Spinner as b } from "../spinner/Spinner.js";
+import { Tooltip as f } from "../tooltip/Tooltip.js";
+const j = I({
+  base: [
+    "uy:rounded-circle uy:cursor-pointer uy:flex uy:items-center uy:justify-center uy:transition-colors",
+    '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:aria-busy:text-content-neutral-disabled uy:aria-busy:cursor-progress"
+  ],
+  variants: {
+    size: {
+      default: "uy:w-300 uy:h-300",
+      large: "uy:w-400 uy:h-400"
+    },
+    color: {
+      "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: {
+    size: "default",
+    color: "content.neutral.low"
+  }
+}), D = z((m, o) => {
+  const p = L(), {
+    type: v,
+    onPress: s,
+    icon: u,
+    color: g,
+    size: l,
+    isLoading: t,
+    title: a,
+    isDisabled: i,
+    asElement: w = "default",
+    className: h,
+    "aria-labelledby": x,
+    ...n
+  } = m, r = `icon-button-label-${p}`, c = j({ class: h, color: g, size: l });
+  return w === "button" ? /* @__PURE__ */ e(f, { title: a, children: /* @__PURE__ */ d(
+    N,
+    {
+      ref: o,
+      "data-dd-privacy": "allow",
+      ...n,
+      type: v,
+      onPress: s,
+      isDisabled: i || t,
+      "aria-labelledby": x ?? r,
+      "aria-busy": t,
+      className: c,
+      children: [
+        t ? /* @__PURE__ */ e(b, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+          y,
+          {
+            src: u,
+            size: l === "large" ? 24 : 20,
+            color: "inherit",
+            role: "presentation"
+          }
+        ),
+        /* @__PURE__ */ e("span", { id: r, className: "uy:sr-only", children: a })
+      ]
+    }
+  ) }) : /* @__PURE__ */ e(f, { title: a, children: /* @__PURE__ */ e(
+    B,
+    {
+      ref: o,
+      "data-dd-privacy": "allow",
+      ...n,
+      onPress: s,
+      isDisabled: i || t,
+      "aria-labelledby": r,
+      "aria-busy": t,
+      children: /* @__PURE__ */ d("div", { role: "button", className: c, children: [
+        t ? /* @__PURE__ */ e(b, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+          y,
+          {
+            src: u,
+            size: l === "large" ? 24 : 20,
+            color: "inherit",
+            role: "presentation"
+          }
+        ),
+        /* @__PURE__ */ e("span", { id: r, className: "uy:sr-only", children: a })
+      ] })
+    }
+  ) });
+});
+D.displayName = "CircularIconButton";
+export {
+  D as CircularIconButton,
+  j as circularIconButton
+};

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

@@ -0,0 +1,44 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { AriaRole, ButtonHTMLAttributes } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
+import { IconButtonBase, IconButtonFilled, IconButtonGhost, IconButtonOutlined } from './IconButton.variants.js';
+type IconButtonBaseProps = AriaButtonProps & IconButtonBase & {
+    /** Label used to describe the action of the button */
+    label: string;
+    /** The icon to display inside the button */
+    icon: UnityIcon;
+    /**
+     * Press handler. Fires for mouse, touch, and keyboard activation.
+     * Prefer this over `onClick` for consistency with `Button`.
+     */
+    onPress?: AriaButtonProps['onPress'];
+    /**
+     * The function to trigger when the button is clicked.
+     * Kept for backward compatibility — `onPress` takes precedence when both are provided.
+     */
+    onClick?: () => void;
+    /** Override the icon role */
+    iconRole?: AriaRole;
+    /** The button's appearance. */
+    variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
+    /** The button's color. */
+    color?: IconButtonFilled['color'] | IconButtonOutlined['color'] | IconButtonGhost['color'];
+    /** The loading state of the button. */
+    isLoading?: boolean;
+    /** The button type */
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    id?: ButtonHTMLAttributes<HTMLButtonElement>['id'];
+    className?: string;
+};
+type IconButtonUnionProps = (IconButtonBaseProps & {
+    variant: 'primary';
+} & IconButtonFilled) | (IconButtonBaseProps & {
+    variant: 'secondary';
+} & IconButtonOutlined) | (IconButtonBaseProps & {
+    variant: 'ghost';
+} & IconButtonGhost) | (IconButtonBaseProps & {
+    variant: 'outlined';
+} & IconButtonOutlined);
+export type IconButtonProps = Omit<IconButtonUnionProps, 'style'>;
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};