@payfit/unity-components 2.46.16 → 2.46.17

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

@@ -1,82 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as b from "react";
-import { uyTv as y, uyMerge as h } from "@payfit/unity-themes";
-import * as l from "@radix-ui/react-avatar";
-import { useAvatarContext as f } from "../Avatar.context.js";
-import { avatarBase as i } from "../Avatar.variants.js";
-import { getInitials as v } from "../utils.js";
-const w = y({
-  slots: {
-    base: "uy:absolute uy:overflow-hidden",
-    background: "",
-    foreground: ""
-  },
-  variants: {
-    color: {
-      blue: {
-        background: "uy:theme-legacy:bg-blue-l4 uy:theme-rebrand:bg-blue-l3",
-        foreground: "uy:theme-legacy:fill-blue-l3 uy:theme-rebrand:fill-blue-l4"
-      },
-      yellow: {
-        background: "uy:theme-legacy:bg-yellow-l4 uy:theme-rebrand:bg-yellow-l3",
-        foreground: "uy:theme-legacy:fill-yellow-l3 uy:theme-rebrand:fill-yellow-l4"
-      },
-      purple: {
-        background: "uy:theme-legacy:bg-purple-l4 uy:theme-rebrand:bg-purple-l3",
-        foreground: "uy:theme-legacy:fill-purple-l3 uy:theme-rebrand:fill-purple-l4"
-      }
-    }
-  }
-}), x = y({
-  extend: i,
-  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",
-      sm: "uy:typography-body-small-strong",
-      md: "uy:typography-body-small-strong",
-      lg: "uy:typography-body-strong",
-      xl: "uy:typography-h2"
-    }
-  }
-}), k = b.forwardRef(({ variant: c, color: g, children: m, ...a }, r) => {
-  const d = f(), { size: o, variant: t } = d;
-  if (c === "placeholder") {
-    const p = i({ size: o, variant: t }), { base: n, background: u, foreground: s } = w({
-      color: g
-    });
-    return console.log("BASE", n()), console.log("FG", s()), console.log("BG", u()), /* @__PURE__ */ e(l.Fallback, { ref: r, role: "presentation", ...a, children: /* @__PURE__ */ e(
-      "svg",
-      {
-        role: "img",
-        "aria-hidden": !0,
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 16 16",
-        className: h(p, n(), u()),
-        children: /* @__PURE__ */ e(
-          "path",
-          {
-            className: s(),
-            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__ */ e(
-    l.Fallback,
-    {
-      ref: r,
-      role: "presentation",
-      className: x({ size: o, variant: t }),
-      ...a,
-      children: v(m)
-    }
-  );
-});
-k.displayName = l.Fallback.displayName;
-export {
-  k as AvatarFallback
-};

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

@@ -1,31 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

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