@payfit/unity-components 2.0.0 → 2.2.0

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",
@@ -10,7 +10,20 @@ const e = a({
     },
     variant: {
       circle: "uy:rounded-circle",
-      square: ""
+      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/AvatarFallback.js

@@ -1,12 +1,12 @@
 import { jsx as a } from "react/jsx-runtime";
-import * as p from "react";
-import { uyTv as t, uyMerge as f } from "@payfit/unity-themes";
-import * as l from "@radix-ui/react-avatar";
-import { useAvatarContext as b } from "../Avatar.context.js";
-import { avatarBase as n } from "../Avatar.variants.js";
-import { getInitials as v } from "../utils.js";
-const h = t({
-  extend: n,
+import * as m from "react";
+import { uyTv as n, uyMerge as b } from "@payfit/unity-themes";
+import * as e from "@radix-ui/react-avatar";
+import { useAvatarContext as f } from "../Avatar.context.js";
+import { avatarBase as s } from "../Avatar.variants.js";
+import { getInitials as h } from "../utils.js";
+const v = n({
+  extend: s,
   slots: {
     base: "uy:absolute uy:overflow-hidden",
     background: "",
@@ -28,9 +28,9 @@ const h = t({
       }
     }
   }
-}), w = t({
-  extend: n,
-  base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-low",
+}), w = n({
+  extend: s,
+  base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-lowest",
   variants: {
     size: {
       xs: "uy:typography-body-small-strong",
@@ -40,47 +40,46 @@ const h = t({
       xl: "uy:typography-h2"
     }
   }
-}), x = p.forwardRef(({ variant: u, color: s, children: i, ...r }, y) => {
-  const c = b(), { size: e, variant: o } = c;
+}), x = m.forwardRef(({ variant: u, color: i, children: y, ...r }, o) => {
+  const c = f(), { size: t, variant: l } = c;
   if (u === "placeholder") {
-    const { base: d, background: g, foreground: m } = h({
-      color: s,
-      size: e,
-      variant: o
+    const { base: d, background: g, foreground: p } = v({
+      color: i,
+      size: t,
+      variant: l
     });
-    return /* @__PURE__ */ a(
+    return /* @__PURE__ */ a(e.Fallback, { ref: o, role: "presentation", ...r, children: /* @__PURE__ */ a(
       "svg",
       {
         role: "img",
         "aria-hidden": !0,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 16 16",
-        className: f(d(), g()),
-        ...r,
+        className: b(d(), g()),
         children: /* @__PURE__ */ a(
           "path",
           {
-            className: m(),
+            className: p(),
             fillRule: "evenodd",
             d: "M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",
             clipRule: "evenodd"
           }
         )
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ a(
-    l.Fallback,
+    e.Fallback,
     {
-      ref: y,
+      ref: o,
       role: "presentation",
-      className: w({ size: e, variant: o }),
+      className: w({ size: t, variant: l }),
       ...r,
-      children: v(i)
+      children: h(y)
     }
   );
 });
-x.displayName = l.Fallback.displayName;
+x.displayName = e.Fallback.displayName;
 export {
   x as AvatarFallback
 };

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/badge/Badge.js

@@ -9,7 +9,7 @@ const g = y({
       success: "uy:bg-surface-success-low uy:text-content-success-high",
       warning: "uy:bg-surface-warning-low uy:text-content-warning-high",
       danger: "uy:bg-surface-danger-low uy:text-content-danger-high",
-      neutral: "uy:bg-surface-neutral-low uy:text-content-neutral",
+      neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral",
       promo: "uy:bg-surface-promo-low uy:text-content-promo-high",
       attention: "uy:bg-surface-danger uy:text-content-inverted",
       numeric: "uy:bg-surface-info-low uy:text-content-info-high",

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.js

@@ -2,7 +2,7 @@ import { uyTv as a } from "@payfit/unity-themes";
 const r = a({
   slots: {
     base: "uy:flex uy:gap-50 uy:list-none uy:text-content-neutral-enabled uy:typography-action",
-    breadcrumb: "uy:flex uy:gap-50 uy:sm:leading-[1.75] uy:sm:items-center"
+    breadcrumb: "uy:flex uy:gap-50 uy:sm:leading-[1.75] uy:items-center"
   },
   variants: {
     wrap: {