@payfit/unity-components 2.1.4 → 2.2.1

package/dist/esm/components/avatar/Avatar.context.d.ts

@@ -2,9 +2,10 @@ type AvatarContextValue = {
     variant: 'circle' | 'square';
     size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     hasPair: boolean;
+    color?: 'teal' | 'plum' | 'purple' | 'orange' | 'neutral' | 'warning' | 'success' | 'info' | 'danger' | 'promo' | 'primary';
 };
 export declare const AvatarContext: import('react').Context<AvatarContextValue>;
-export declare function AvatarProvider({ variant, size, hasPair, children, }: AvatarContextValue & {
+export declare function AvatarProvider({ variant, size, hasPair, color, children, }: AvatarContextValue & {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useAvatarContext(): AvatarContextValue;

package/dist/esm/components/avatar/Avatar.context.js

@@ -1,26 +1,28 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as i, useContext as s } from "react";
-const r = i({
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as s, useContext as v } from "react";
+const r = s({
   variant: "circle",
   size: "md",
-  hasPair: !1
+  hasPair: !1,
+  color: void 0
 });
-function c({
+function x({
   variant: t,
   size: e,
   hasPair: o,
-  children: a
+  color: a,
+  children: n
 }) {
-  return /* @__PURE__ */ n(r.Provider, { value: { variant: t, size: e, hasPair: o }, children: a });
+  return /* @__PURE__ */ i(r.Provider, { value: { variant: t, size: e, hasPair: o, color: a }, children: n });
 }
-function x() {
-  const t = s(r);
+function d() {
+  const t = v(r);
   if (!t)
     throw new Error("useAvatarContext must be used within an AvatarProvider");
   return t;
 }
 export {
   r as AvatarContext,
-  c as AvatarProvider,
-  x as useAvatarContext
+  x as AvatarProvider,
+  d as useAvatarContext
 };

package/dist/esm/components/avatar/Avatar.d.ts

@@ -27,6 +27,41 @@ declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
             base?: import('tailwind-merge').ClassNameValue;
         };
     };
+    color: {
+        teal: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        plum: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        purple: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        orange: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        neutral: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        warning: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        success: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        info: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        danger: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        promo: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        primary: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
 }, undefined, "uy:inline-block uy:relative uy:shrink-0", {
     size: {
         xs: string;
@@ -39,6 +74,19 @@ declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
         xs: string;
@@ -51,6 +99,19 @@ declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, undefined, {
     size: {
         xs: string;
@@ -63,6 +124,19 @@ declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
         xs: string;
@@ -75,6 +149,19 @@ declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, undefined, unknown, unknown, undefined>>>;
 export type AvatarProps = PropsWithChildren<{
     /** Additional class names to apply to the avatar */
@@ -83,6 +170,8 @@ export type AvatarProps = PropsWithChildren<{
     variant?: VariantProps<typeof avatarRoot>['variant'];
     /** Size of the avatar. One of: xs, sm, md, lg, xl */
     size?: VariantProps<typeof avatarRoot>['size'];
+    /** Color variant for icon avatars. One of: teal, plum, purple, orange, neutral, warning, success, info, danger, promo, primary */
+    color?: VariantProps<typeof avatarRoot>['color'];
     /** Accessible label for the avatar */
     'aria-label': string;
     /** ID of the element that labels the avatar */
@@ -96,6 +185,41 @@ export type AvatarProps = PropsWithChildren<{
 }>;
 /**
  * The Avatar component displays visual or text content for representing people or entities.
+ * It supports images, initials, placeholders, and icons with customizable colors and sizes.
+ * @param {AvatarProps} props - Props for the Avatar component
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarImage, AvatarFallback, AvatarIcon } from '@payfit/unity-components'
+ *
+ * // Avatar with image and fallback
+ * function Example() {
+ *   return (
+ *     <Avatar size="lg" variant="circle" aria-label="John Doe">
+ *       <AvatarImage src="/images/avatar.jpg" alt="John Doe" />
+ *       <AvatarFallback variant="initials">JD</AvatarFallback>
+ *     </Avatar>
+ *   )
+ * }
+ *
+ * // Avatar with icon and color
+ * function IconExample() {
+ *   return (
+ *     <Avatar size="lg" color="teal" variant="circle" aria-label="Vacation">
+ *       <AvatarIcon src="PalmFilled" alt="Palm tree" />
+ *     </Avatar>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use the `circle` variant for representing people
+ * - Use the `square` variant for representing companies or organizations
+ * - The `color` prop applies background and text color variants for icon avatars
+ * - Always provide an `aria-label` or `aria-labelledby` for accessibility
+ * @see {@link AvatarProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/avatar GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=19-3741 Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/69c10a-avatar Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-avatar unity-components.payfit.io}
  */
 declare const Avatar: React.ForwardRefExoticComponent<{
     /** Additional class names to apply to the avatar */
@@ -104,6 +228,8 @@ declare const Avatar: React.ForwardRefExoticComponent<{
     variant?: VariantProps<typeof avatarRoot>["variant"];
     /** Size of the avatar. One of: xs, sm, md, lg, xl */
     size?: VariantProps<typeof avatarRoot>["size"];
+    /** Color variant for icon avatars. One of: teal, plum, purple, orange, neutral, warning, success, info, danger, promo, primary */
+    color?: VariantProps<typeof avatarRoot>["color"];
     /** Accessible label for the avatar */
     'aria-label': string;
     /** ID of the element that labels the avatar */

package/dist/esm/components/avatar/Avatar.js

@@ -1,32 +1,46 @@
 import { jsx as o } from "react/jsx-runtime";
-import * as l from "react";
-import { uyTv as c } from "@payfit/unity-themes";
-import * as t from "@radix-ui/react-avatar";
-import { AvatarProvider as d } from "./Avatar.context.js";
-import { avatarBase as f } from "./Avatar.variants.js";
-const n = c({
-  extend: f,
+import * as c from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import * as e from "@radix-ui/react-avatar";
+import { AvatarProvider as f } from "./Avatar.context.js";
+import { avatarBase as n } from "./Avatar.variants.js";
+const p = d({
+  extend: n,
   base: "uy:inline-block uy:relative uy:shrink-0",
   defaultVariants: {
     size: "md",
     variant: "circle"
   }
-}), p = l.forwardRef(
-  ({ size: a = "md", variant: r = "circle", className: e, ...i }, m) => {
-    const s = n({ variant: r, size: a, className: e });
-    return /* @__PURE__ */ o(d, { variant: r, size: a, hasPair: !1, children: /* @__PURE__ */ o(
-      t.Root,
+}), v = c.forwardRef(
+  ({ size: a = "md", variant: r = "circle", color: t, className: i, ...m }, s) => {
+    const l = p({
+      variant: r,
+      size: a,
+      color: t,
+      className: i
+    });
+    return /* @__PURE__ */ o(
+      f,
       {
-        ref: m,
-        role: "img",
-        className: s,
-        "data-dd-privacy": "allow",
-        ...i
+        variant: r,
+        size: a,
+        hasPair: !1,
+        color: t,
+        children: /* @__PURE__ */ o(
+          e.Root,
+          {
+            ref: s,
+            role: "img",
+            className: l,
+            "data-dd-privacy": "allow",
+            ...m
+          }
+        )
       }
-    ) });
+    );
   }
 );
-p.displayName = t.Root.displayName;
+v.displayName = e.Root.displayName;
 export {
-  p as Avatar
+  v as Avatar
 };

package/dist/esm/components/avatar/Avatar.variants.d.ts

@@ -10,6 +10,19 @@ export declare const avatarBase: import('tailwind-variants').TVReturnType<{
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, undefined, {
     size: {
         xs: string;
@@ -22,6 +35,19 @@ export declare const avatarBase: import('tailwind-variants').TVReturnType<{
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
         xs: string;
@@ -34,4 +60,17 @@ export declare const avatarBase: import('tailwind-variants').TVReturnType<{
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, undefined, unknown, unknown, undefined>>;

package/dist/esm/components/avatar/Avatar.variants.js

@@ -1,5 +1,5 @@
-import { uyTv as a } from "@payfit/unity-themes";
-const e = a({
+import { uyTv as e } from "@payfit/unity-themes";
+const t = e({
   variants: {
     size: {
       xs: "uy:size-200",
@@ -11,6 +11,19 @@ const e = a({
     variant: {
       circle: "uy:rounded-circle",
       square: "uy:aspect-square"
+    },
+    color: {
+      teal: "uy:bg-surface-decorative-teal-lowest uy:text-content-decorative-teal-high",
+      plum: "uy:bg-surface-decorative-plum-lowest uy:text-content-decorative-plum",
+      purple: "uy:bg-surface-decorative-purple-lowest uy:text-content-decorative-purple",
+      orange: "uy:bg-surface-decorative-orange-lowest uy:text-content-decorative-orange",
+      neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral",
+      warning: "uy:bg-surface-warning-low uy:text-content-warning-high",
+      success: "uy:bg-surface-success-low uy:text-content-success-high",
+      info: "uy:bg-surface-info-low uy:text-content-info-high",
+      danger: "uy:bg-surface-danger-low uy:text-content-danger-high",
+      promo: "uy:bg-surface-promo-low uy:text-content-promo-high",
+      primary: "uy:bg-surface-primary-lowest uy:text-content-primary-high"
     }
   },
   compoundVariants: [
@@ -39,8 +52,13 @@ const e = a({
       variant: "square",
       className: "uy:rounded-200"
     }
-  ]
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "circle",
+    color: "neutral"
+  }
 });
 export {
-  e as avatarBase
+  t as avatarBase
 };

package/dist/esm/components/avatar/parts/AvatarFallback.d.ts

@@ -32,6 +32,19 @@ declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
         xs: string;
@@ -44,6 +57,19 @@ declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, undefined, {
     size: {
         xs: string;
@@ -56,6 +82,19 @@ declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
         xs: string;
@@ -68,6 +107,19 @@ declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
         circle: string;
         square: string;
     };
+    color: {
+        teal: string;
+        plum: string;
+        purple: string;
+        orange: string;
+        neutral: string;
+        warning: string;
+        success: string;
+        info: string;
+        danger: string;
+        promo: string;
+        primary: string;
+    };
 }, undefined, undefined, unknown, unknown, undefined>>>;
 type AvatarFallbackBaseProps = Pick<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, 'delayMs'>;
 type AvatarFallbackInitialsProps = AvatarFallbackBaseProps & {

package/dist/esm/components/avatar/parts/AvatarIcon.d.ts

@@ -0,0 +1,31 @@
+import { IconProps } from '@payfit/unity-icons';
+import * as React from 'react';
+export type AvatarIconProps = Omit<IconProps, 'size' | 'color'>;
+/**
+ * The AvatarIcon component displays an icon within an Avatar component, using the Unity icon system.
+ * It automatically sizes the icon based on the parent Avatar's size and inherits the text color from the Avatar's color variant.
+ * @param {AvatarIconProps} props - Props for the AvatarIcon component
+ * @example
+ * ```tsx
+ * import { Avatar, AvatarIcon } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Avatar size="lg" color="teal" variant="circle" aria-label="Vacation">
+ *       <AvatarIcon src="PalmFilled" alt="Palm tree" />
+ *     </Avatar>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be used as a child of an Avatar component
+ * - Icons automatically scale: 20px for small to large avatars, 24px for extra-large avatars
+ * - The icon color is inherited from the parent Avatar's text color
+ * @see {@link AvatarIconProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/avatar/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=19-3741 Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/69c10a-avatar Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-avatar-avataricon unity-components.payfit.io}
+ */
+declare const AvatarIcon: React.ForwardRefExoticComponent<AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
+export { AvatarIcon };

package/dist/esm/components/avatar/parts/AvatarIcon.js

@@ -0,0 +1,40 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as c from "react";
+import { IconSprite as p } from "@payfit/unity-icons";
+import * as a from "@payfit/unity-themes/tokens/spacings.json";
+import { useAvatarContext as u } from "../Avatar.context.js";
+const r = (e) => parseInt(e.replace("px", "").trim(), 10), m = {
+  xl: r(a.spacing[500].$value),
+  lg: r(a.spacing[300].$value),
+  md: r(a.spacing[250].$value),
+  sm: r(a.spacing[200].$value),
+  xs: r(a.spacing[150].$value),
+  default: r(a.spacing[250].$value)
+}, f = c.forwardRef(
+  ({ src: e, alt: o = "", className: s }, l) => {
+    const { size: n } = u(), t = m[n];
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        "data-dd-privacy": "allow",
+        ref: l,
+        role: "img",
+        className: `uy:flex uy:items-center uy:justify-center uy:w-full uy:h-full ${s || ""}`,
+        "aria-label": o,
+        children: /* @__PURE__ */ i(
+          p,
+          {
+            src: e,
+            width: t,
+            height: t,
+            fill: "currentColor"
+          }
+        )
+      }
+    );
+  }
+);
+f.displayName = "AvatarIcon";
+export {
+  f as AvatarIcon
+};

package/dist/esm/components/button/Button.js

@@ -11,37 +11,37 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
     children: n,
     color: o = "primary",
     size: c = "default",
-    isDisabled: a = !1,
+    isDisabled: s = !1,
     isLoading: t = !1,
     prefixIcon: u = void 0,
     ...i
   }, p) => {
     const f = x(() => {
-      const s = { size: c, isDisabled: a, isLoading: t };
+      const a = { size: c, isDisabled: s, isLoading: t };
       switch (e) {
         case "primary": {
           const r = {
-            ...s,
+            ...a,
             color: o
           };
           return l(j(r));
         }
         case "secondary": {
           const r = {
-            ...s,
+            ...a,
             color: o
           };
           return l(N(r));
         }
         case "ghost": {
           const r = {
-            ...s,
+            ...a,
             color: o
           };
           return l(w(r));
         }
       }
-    }, [e, o, c, a, t]), d = {
+    }, [e, o, c, s, t]), d = {
       ...t && { "data-loading": t }
     };
     return /* @__PURE__ */ m(
@@ -50,7 +50,8 @@ const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit",
         "data-dd-privacy": "allow",
         ...i,
         ref: p,
-        isDisabled: a || t,
+        isDisabled: s || t,
+        isPending: t,
         className: f,
         ...d,
         children: /* @__PURE__ */ y("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [