@payfit/unity-components 2.44.0 → 2.45.0

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

@@ -1,39 +1,96 @@
 import { VariantProps } from '@payfit/unity-themes';
-import { AriaRole, PropsWithChildren } from 'react';
+import { AriaRole, PropsWithChildren, ReactNode } from 'react';
 declare const badge: import('tailwind-variants').TVReturnType<{
     variant: {
-        success: string;
-        warning: string;
-        danger: string;
-        neutral: string;
-        promo: string[];
-        attention: string;
-        numeric: string;
-        contextual: string;
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+        promo: {
+            root: string[];
+        };
+        attention: {
+            root: string;
+        };
+        numeric: {
+            root: string;
+        };
+        contextual: {
+            root: string;
+        };
     };
-}, undefined, "uy:inline-block uy:rounded-75 uy:px-75 uy:py-25 uy:font-sans uy:typography-body uy:whitespace-nowrap uy:text-center", {
+}, {
+    root: string[];
+    prefix: string;
+}, undefined, {
     variant: {
-        success: string;
-        warning: string;
-        danger: string;
-        neutral: string;
-        promo: string[];
-        attention: string;
-        numeric: string;
-        contextual: string;
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+        promo: {
+            root: string[];
+        };
+        attention: {
+            root: string;
+        };
+        numeric: {
+            root: string;
+        };
+        contextual: {
+            root: string;
+        };
     };
-}, undefined, import('tailwind-variants').TVReturnType<{
+}, {
+    root: string[];
+    prefix: string;
+}, import('tailwind-variants').TVReturnType<{
     variant: {
-        success: string;
-        warning: string;
-        danger: string;
-        neutral: string;
-        promo: string[];
-        attention: string;
-        numeric: string;
-        contextual: string;
+        success: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        danger: {
+            root: string;
+        };
+        neutral: {
+            root: string;
+        };
+        promo: {
+            root: string[];
+        };
+        attention: {
+            root: string;
+        };
+        numeric: {
+            root: string;
+        };
+        contextual: {
+            root: string;
+        };
     };
-}, undefined, "uy:inline-block uy:rounded-75 uy:px-75 uy:py-25 uy:font-sans uy:typography-body uy:whitespace-nowrap uy:text-center", unknown, unknown, undefined>>;
+}, {
+    root: string[];
+    prefix: string;
+}, undefined, unknown, unknown, undefined>>;
 export type BadgeProps = PropsWithChildren<{
     /**
      * To add classes to the badge
@@ -53,6 +110,10 @@ export type BadgeProps = PropsWithChildren<{
      * @default false
      */
     asChild?: boolean;
+    /**
+     * Optional leading visual rendered before the badge content.
+     */
+    prefix?: ReactNode;
     /**
      * Accessible label for the badge
      */
@@ -80,11 +141,15 @@ declare const Badge: import('react').ForwardRefExoticComponent<{
      * @default false
      */
     asChild?: boolean;
+    /**
+     * Optional leading visual rendered before the badge content.
+     */
+    prefix?: ReactNode;
     /**
      * Accessible label for the badge
      */
     'aria-label'?: string;
 } & {
-    children?: import('react').ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & import('react').RefAttributes<HTMLSpanElement>>;
 export { Badge };

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

@@ -1,28 +1,52 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { uyTv as y } from "@payfit/unity-themes";
-import { Slot as i } from "@radix-ui/react-slot";
-const g = y({
-  base: "uy:inline-block uy:rounded-75 uy:px-75 uy:py-25 uy:font-sans uy:typography-body uy:whitespace-nowrap uy:text-center",
+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: "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-lowest uy:text-content-neutral",
-      promo: [
-        "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: "uy:bg-surface-danger uy:text-content-inverted",
-      numeric: "uy:bg-surface-info-low uy:text-content-info-high",
-      contextual: "uy:bg-surface-neutral uy:border uy:border-solid uy:border-border-neutral uy:text-content-neutral"
+      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"
   }
-}), d = {
+}), B = {
   success: "status",
   warning: "alert",
   danger: "alert",
@@ -31,30 +55,41 @@ const g = y({
   attention: "alert",
   contextual: "status",
   numeric: "status"
-}, p = l(
+};
+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: r,
-    asChild: a = !1,
-    children: n,
-    ...u
-  }, o) => {
-    const s = r ?? d[e] ?? "status";
-    return /* @__PURE__ */ c(
-      a ? i : "span",
+    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: o,
-        className: g({ variant: e, className: t }),
-        role: s,
-        ...u,
-        children: n
+        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 })
+        ]
       }
     );
   }
 );
-p.displayName = "Badge";
+E.displayName = "Badge";
 export {
-  p as Badge
+  E as Badge
 };

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 };

package/dist/esm/components/badge/parts/BadgeDot.js

@@ -0,0 +1,84 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+const n = c({
+  slots: {
+    root: "uy:inline-flex uy:shrink-0 uy:items-center uy:justify-center",
+    dot: "uy:size-125 uy:rounded-full"
+  },
+  variants: {
+    color: {
+      primary: {
+        dot: "uy:bg-surface-primary"
+      },
+      "primary.low": {
+        dot: "uy:bg-surface-primary-low"
+      },
+      "neutral.lowest": {
+        dot: "uy:bg-surface-neutral-low"
+      },
+      "neutral.highest": {
+        dot: "uy:bg-surface-neutral-highest"
+      },
+      danger: {
+        dot: "uy:bg-surface-danger"
+      },
+      "danger.low": {
+        dot: "uy:bg-surface-danger-low"
+      },
+      warning: {
+        dot: "uy:bg-surface-warning"
+      },
+      "warning.low": {
+        dot: "uy:bg-surface-warning-low"
+      },
+      success: {
+        dot: "uy:bg-surface-success"
+      },
+      "success.low": {
+        dot: "uy:bg-surface-success-low"
+      },
+      info: {
+        dot: "uy:bg-surface-info"
+      },
+      "info.low": {
+        dot: "uy:bg-surface-info-low"
+      },
+      "decorative-teal": {
+        dot: "uy:bg-surface-decorative-teal"
+      },
+      "decorative-purple": {
+        dot: "uy:bg-surface-decorative-purple"
+      },
+      "decorative-plum": {
+        dot: "uy:bg-surface-decorative-plum"
+      },
+      "decorative-orange": {
+        dot: "uy:bg-surface-decorative-orange"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "decorative-teal"
+  }
+}), i = d(
+  ({ color: r, className: o, ...a }, t) => {
+    const { root: u, dot: s } = n({ color: r });
+    return /* @__PURE__ */ e(
+      "span",
+      {
+        ...a,
+        "aria-hidden": "true",
+        className: u({ className: o }),
+        "data-dd-privacy": "allow",
+        "data-unity-component": "BadgeDot",
+        ref: t,
+        children: /* @__PURE__ */ e("span", { className: s() })
+      }
+    );
+  }
+);
+i.displayName = "BadgeDot";
+export {
+  i as BadgeDot
+};

package/dist/esm/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/avatar/parts/AvatarImage.js';
 export * from './components/avatar/parts/AvatarPair.js';
 export * from './components/avatar/utils.js';
 export * from './components/badge/Badge.js';
+export * from './components/badge/parts/BadgeDot.js';
 export * from './components/bottom-sheet/BottomSheet.js';
 export * from './components/bottom-sheet/parts/BottomSheetContent.js';
 export * from './components/bottom-sheet/parts/BottomSheetFooter.js';