@payfit/unity-components 2.46.13 → 2.46.14

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/common/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/avatar/parts/AvatarImage.d.ts

@@ -0,0 +1,8 @@
+import { AvatarImageProps as RadixAvatarImageProps } from '@radix-ui/react-avatar';
+import * as React from 'react';
+type AvatarImageProps = Omit<RadixAvatarImageProps, 'style' | 'width' | 'height' | 'slot' | 'asChild'>;
+/**
+ * The AvatarImage component displays an image for the avatar.
+ */
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+export { AvatarImage };

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

@@ -0,0 +1,21 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as n from "react";
+import { uyTv as u } from "@payfit/unity-themes";
+import * as a from "@radix-ui/react-avatar";
+import { useAvatarContext as p } from "../Avatar.context.js";
+import { avatarBase as c } from "../Avatar.variants.js";
+const f = u({
+  extend: c,
+  base: "uy:aspect-square uy:w-full uy:h-full uy:object-cover uy:bg-surface-neutral-lowest"
+}), l = n.forwardRef(({ className: r, ...e }, t) => {
+  const { variant: s, size: o } = p(), m = f({
+    variant: s,
+    size: o,
+    className: r
+  });
+  return /* @__PURE__ */ i(a.Image, { ref: t, className: m, ...e });
+});
+l.displayName = a.Image.displayName;
+export {
+  l as AvatarImage
+};

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

@@ -0,0 +1,48 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+import { avatarBase } from '../Avatar.variants.js';
+import * as React from 'react';
+export type AvatarPairProps = PropsWithChildren<{
+    /** Variant of the avatar pair. they match the variants of the Avatar component */
+    variant: NonNullable<VariantProps<typeof avatarBase>['variant']>;
+    /**
+     * Set to true to visually hide the avatar pair
+     * @default false
+     */
+    isHidden?: boolean;
+    /** Accessible label for the avatar */
+    'aria-label'?: string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+}>;
+/**
+ * The `AvatarPair` component displays a paired, smaller avatar in the bottom-right corner of the containing avatar.
+ */
+declare const AvatarPair: React.ForwardRefExoticComponent<{
+    /** Variant of the avatar pair. they match the variants of the Avatar component */
+    variant: NonNullable<VariantProps<typeof avatarBase>["variant"]>;
+    /**
+     * Set to true to visually hide the avatar pair
+     * @default false
+     */
+    isHidden?: boolean;
+    /** Accessible label for the avatar */
+    'aria-label'?: string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export { AvatarPair };

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

@@ -0,0 +1,47 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as d from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import * as c from "@radix-ui/react-avatar";
+import { useAvatarContext as y, AvatarProvider as p } from "../Avatar.context.js";
+import { avatarBase as v } from "../Avatar.variants.js";
+const z = l({
+  extend: v,
+  base: "uy:absolute uy:overflow-hidden uy:leading-[0] uy:border uy:border-solid uy:border-content-inverted uy:-bottom-[var(--pair-offset)] uy:-right-[var(--pair-offset)] uy:transition-transform uy:origin-center",
+  variants: {
+    size: {
+      xs: "uy:size-200",
+      sm: "uy:size-300"
+    },
+    isHidden: {
+      true: "uy:scale-0",
+      false: "uy:scale-100"
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    variant: "circle",
+    isHidden: !1
+  }
+}), x = d.forwardRef(
+  ({ variant: r, isHidden: a, children: i, ...o }, n) => {
+    const { size: f } = y(), e = f === "xl", t = e ? "sm" : "xs", m = e ? 0 : 4, u = z({ variant: r, size: t, isHidden: a });
+    return /* @__PURE__ */ s(p, { variant: r, size: t, hasPair: !0, children: /* @__PURE__ */ s(
+      c.Root,
+      {
+        ref: n,
+        role: "img",
+        className: u,
+        "aria-hidden": a,
+        style: {
+          "--pair-offset": `${m}px`
+        },
+        ...o,
+        children: i
+      }
+    ) });
+  }
+);
+x.displayName = "AvatarPair";
+export {
+  x as AvatarPair
+};

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

@@ -0,0 +1 @@
+export declare const getInitials: (value: string | null | undefined) => string;

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

@@ -0,0 +1,4 @@
+const i = (t) => t ? t.length <= 2 ? t : t.replace(/[^a-z0-9 ]+/gi, "").split(" ").map((r) => r.charAt(0).toUpperCase()).filter((r, e, n) => e === 0 || n.length > 0 && e === n.length - 1).join("") : "";
+export {
+  i as getInitials
+};

package/dist/esm/components/badge/Badge.d.ts

@@ -0,0 +1,155 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { AriaRole, PropsWithChildren, ReactNode } from 'react';
+declare const badge: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+        promo: {
+            root: string[];
+        };
+        attention: {
+            root: string;
+        };
+        numeric: {
+            root: string;
+        };
+        contextual: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    prefix: string;
+}, undefined, {
+    variant: {
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+        promo: {
+            root: string[];
+        };
+        attention: {
+            root: string;
+        };
+        numeric: {
+            root: string;
+        };
+        contextual: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    prefix: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+        promo: {
+            root: string[];
+        };
+        attention: {
+            root: string;
+        };
+        numeric: {
+            root: string;
+        };
+        contextual: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    prefix: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BadgeProps = PropsWithChildren<{
+    /**
+     * To add classes to the badge
+     */
+    className?: string;
+    /**
+     * Defines the visual style of the badge
+     * @default 'neutral'
+     */
+    variant?: VariantProps<typeof badge>['variant'];
+    /**
+     * Explicit ARIA role for the badge. If not provided, will be determined by variant
+     */
+    role?: Extract<AriaRole, 'status' | 'alert'>;
+    /**
+     * Changes the root element to a different HTML element. The default element is a `<span>`.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Optional leading visual rendered before the badge content.
+     */
+    prefix?: ReactNode;
+    /**
+     * Accessible label for the badge
+     */
+    'aria-label'?: string;
+}>;
+/**
+ * The Badge component is a visual label or indicator used to convey status or highlight content.
+ */
+declare const Badge: import('react').ForwardRefExoticComponent<{
+    /**
+     * To add classes to the badge
+     */
+    className?: string;
+    /**
+     * Defines the visual style of the badge
+     * @default 'neutral'
+     */
+    variant?: VariantProps<typeof badge>["variant"];
+    /**
+     * Explicit ARIA role for the badge. If not provided, will be determined by variant
+     */
+    role?: Extract<AriaRole, "status" | "alert">;
+    /**
+     * Changes the root element to a different HTML element. The default element is a `<span>`.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Optional leading visual rendered before the badge content.
+     */
+    prefix?: ReactNode;
+    /**
+     * Accessible label for the badge
+     */
+    'aria-label'?: string;
+} & {
+    children?: ReactNode | undefined;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { Badge };

package/dist/esm/components/badge/Badge.js

@@ -0,0 +1,95 @@
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { forwardRef as p, cloneElement as f, isValidElement as m } from "react";
+import { uyTv as h } from "@payfit/unity-themes";
+import { Slot as x, Slottable as b } from "@radix-ui/react-slot";
+import { Icon as w } from "../icon/Icon.js";
+const v = h({
+  slots: {
+    root: [
+      'uy:inline-flex uy:items-center uy:gap-50 uy:has-data-[unity-component="BadgeDot"]:gap-0',
+      'uy:rounded-75 uy:px-75 uy:py-25 uy:has-data-[unity-component="BadgeDot"]:pl-25',
+      "uy:font-sans uy:typography-body uy:whitespace-nowrap uy:text-center"
+    ],
+    prefix: "uy:inline-flex uy:size-250 uy:shrink-0 uy:items-center uy:justify-center uy:text-inherit"
+  },
+  variants: {
+    variant: {
+      success: {
+        root: "uy:bg-surface-success-low uy:text-content-success-high"
+      },
+      warning: {
+        root: "uy:bg-surface-warning-low uy:text-content-warning-high"
+      },
+      danger: {
+        root: "uy:bg-surface-danger-low uy:text-content-danger-high"
+      },
+      neutral: {
+        root: "uy:bg-surface-neutral-lowest uy:text-content-neutral"
+      },
+      promo: {
+        root: [
+          "uy:theme-legacy:bg-surface-promo-low uy:theme-legacy:text-content-promo-high",
+          "uy:theme-rebrand:bg-surface-decorative-purple-low uy:theme-rebrand:text-content-decorative-purple-high"
+        ]
+      },
+      attention: {
+        root: "uy:bg-surface-danger uy:text-content-inverted"
+      },
+      numeric: {
+        root: "uy:bg-surface-info-low uy:text-content-info-high"
+      },
+      contextual: {
+        root: "uy:bg-surface-neutral uy:border uy:border-solid uy:border-border-neutral uy:text-content-neutral"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "neutral"
+  }
+}), B = {
+  success: "status",
+  warning: "alert",
+  danger: "alert",
+  neutral: "status",
+  promo: "status",
+  attention: "alert",
+  contextual: "status",
+  numeric: "status"
+};
+function j(t) {
+  return m(t) && t.type === w;
+}
+function D(t, e) {
+  return !j(t) || e === "contextual" ? t : f(t, { color: "inherit" });
+}
+const E = p(
+  ({
+    className: t,
+    variant: e = "neutral",
+    role: a,
+    asChild: u = !1,
+    prefix: s,
+    children: c,
+    ...i
+  }, l) => {
+    const y = a ?? B[e] ?? "status", d = u ? x : "span", r = D(s, e), n = v({ variant: e });
+    return /* @__PURE__ */ g(
+      d,
+      {
+        "data-dd-privacy": "allow",
+        ref: l,
+        className: n.root({ className: t }),
+        role: y,
+        ...i,
+        children: [
+          r ? /* @__PURE__ */ o("span", { className: n.prefix(), "data-unity-slot": "badge-prefix", children: r }) : null,
+          /* @__PURE__ */ o(b, { children: c })
+        ]
+      }
+    );
+  }
+);
+E.displayName = "Badge";
+export {
+  E as Badge
+};

package/dist/esm/components/badge/figma/Badge.figma.d.ts

@@ -0,0 +1,10 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+    metadata: {
+        nestable: boolean;
+    };
+};
+export default _default;

package/dist/esm/components/badge/parts/BadgeDot.d.ts

@@ -0,0 +1,202 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { HTMLAttributes } from 'react';
+declare const badgeDot: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: {
+            dot: string;
+        };
+        'primary.low': {
+            dot: string;
+        };
+        'neutral.lowest': {
+            dot: string;
+        };
+        'neutral.highest': {
+            dot: string;
+        };
+        danger: {
+            dot: string;
+        };
+        'danger.low': {
+            dot: string;
+        };
+        warning: {
+            dot: string;
+        };
+        'warning.low': {
+            dot: string;
+        };
+        success: {
+            dot: string;
+        };
+        'success.low': {
+            dot: string;
+        };
+        info: {
+            dot: string;
+        };
+        'info.low': {
+            dot: string;
+        };
+        'decorative-teal': {
+            dot: string;
+        };
+        'decorative-purple': {
+            dot: string;
+        };
+        'decorative-plum': {
+            dot: string;
+        };
+        'decorative-orange': {
+            dot: string;
+        };
+    };
+}, {
+    root: string;
+    dot: string;
+}, undefined, {
+    color: {
+        primary: {
+            dot: string;
+        };
+        'primary.low': {
+            dot: string;
+        };
+        'neutral.lowest': {
+            dot: string;
+        };
+        'neutral.highest': {
+            dot: string;
+        };
+        danger: {
+            dot: string;
+        };
+        'danger.low': {
+            dot: string;
+        };
+        warning: {
+            dot: string;
+        };
+        'warning.low': {
+            dot: string;
+        };
+        success: {
+            dot: string;
+        };
+        'success.low': {
+            dot: string;
+        };
+        info: {
+            dot: string;
+        };
+        'info.low': {
+            dot: string;
+        };
+        'decorative-teal': {
+            dot: string;
+        };
+        'decorative-purple': {
+            dot: string;
+        };
+        'decorative-plum': {
+            dot: string;
+        };
+        'decorative-orange': {
+            dot: string;
+        };
+    };
+}, {
+    root: string;
+    dot: string;
+}, import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: {
+            dot: string;
+        };
+        'primary.low': {
+            dot: string;
+        };
+        'neutral.lowest': {
+            dot: string;
+        };
+        'neutral.highest': {
+            dot: string;
+        };
+        danger: {
+            dot: string;
+        };
+        'danger.low': {
+            dot: string;
+        };
+        warning: {
+            dot: string;
+        };
+        'warning.low': {
+            dot: string;
+        };
+        success: {
+            dot: string;
+        };
+        'success.low': {
+            dot: string;
+        };
+        info: {
+            dot: string;
+        };
+        'info.low': {
+            dot: string;
+        };
+        'decorative-teal': {
+            dot: string;
+        };
+        'decorative-purple': {
+            dot: string;
+        };
+        'decorative-plum': {
+            dot: string;
+        };
+        'decorative-orange': {
+            dot: string;
+        };
+    };
+}, {
+    root: string;
+    dot: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface BadgeDotProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeDot> {
+    /**
+     * Token-backed surface color used for the visible dot marker.
+     *
+     * Use decorative colors for the Badge Cluster pattern. Semantic surface colors are available when the dot needs to align with a product-specific status or category.
+     * @default 'decorative-teal'
+     */
+    color?: VariantProps<typeof badgeDot>['color'];
+}
+/**
+ * The BadgeDot component renders a small decorative marker for the Badge prefix slot.
+ *
+ * BadgeDot is primarily used to build the Badge Cluster pattern, where a contextual Badge displays a leading colored dot before its label. It reserves the prefix-slot footprint and renders a centered circular marker, so consumers do not need to recreate Badge-specific spacing or geometry.
+ * @param {BadgeDotProps} props - The props for the BadgeDot component, including the token-backed `color` and optional root `className`.
+ * @example
+ * ```tsx
+ * import { Badge, BadgeDot } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Badge variant="contextual" prefix={<BadgeDot color="decorative-teal" />}>
+ *       Cluster
+ *     </Badge>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use BadgeDot inside `Badge`'s `prefix` prop for the supported Cluster composition.
+ * - BadgeDot is decorative and is hidden from assistive technologies with `aria-hidden="true"`.
+ * - Prefer decorative colors for Cluster markers unless a semantic status color is explicitly needed.
+ * @see {@link BadgeDotProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/badge/parts/BadgeDot.tsx GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=20376-46274&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/20d6f1-badge Payfit.design}
+ */
+declare const BadgeDot: import('react').ForwardRefExoticComponent<BadgeDotProps & import('react').RefAttributes<HTMLSpanElement>>;
+export { BadgeDot };