@payfit/unity-components 2.46.11 → 2.46.13

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

@@ -1,46 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-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"
-  }
-}), 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,
-      {
-        variant: r,
-        size: a,
-        hasPair: !1,
-        color: t,
-        children: /* @__PURE__ */ o(
-          e.Root,
-          {
-            ref: s,
-            role: "img",
-            className: l,
-            "data-dd-privacy": "allow",
-            ...m
-          }
-        )
-      }
-    );
-  }
-);
-v.displayName = e.Root.displayName;
-export {
-  v as Avatar
-};

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

@@ -1,76 +0,0 @@
-export declare const avatarBase: import('tailwind-variants').TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        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;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        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;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        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,64 +0,0 @@
-import { uyTv as e } from "@payfit/unity-themes";
-const t = e({
-  variants: {
-    size: {
-      xs: "uy:size-200",
-      sm: "uy:size-300",
-      md: "uy:size-400",
-      lg: "uy:size-500",
-      xl: "uy:size-[56px]"
-    },
-    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: [
-    {
-      size: "xs",
-      variant: "square",
-      className: "uy:rounded-50"
-    },
-    {
-      size: "sm",
-      variant: "square",
-      className: "uy:rounded-50"
-    },
-    {
-      size: "md",
-      variant: "square",
-      className: "uy:rounded-75"
-    },
-    {
-      size: "lg",
-      variant: "square",
-      className: "uy:rounded-100"
-    },
-    {
-      size: "xl",
-      variant: "square",
-      className: "uy:rounded-200"
-    }
-  ],
-  defaultVariants: {
-    size: "md",
-    variant: "circle",
-    color: "neutral"
-  }
-});
-export {
-  t as avatarBase
-};

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

@@ -1,85 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
-    color: {
-        blue: {
-            background: string;
-            foreground: string;
-        };
-        yellow: {
-            background: string;
-            foreground: string;
-        };
-        purple: {
-            background: string;
-            foreground: string;
-        };
-    };
-}, {
-    base: string;
-    background: string;
-    foreground: string;
-}, undefined, {
-    color: {
-        blue: {
-            background: string;
-            foreground: string;
-        };
-        yellow: {
-            background: string;
-            foreground: string;
-        };
-        purple: {
-            background: string;
-            foreground: string;
-        };
-    };
-}, {
-    base: string;
-    background: string;
-    foreground: string;
-}, import('tailwind-variants').TVReturnType<{
-    color: {
-        blue: {
-            background: string;
-            foreground: string;
-        };
-        yellow: {
-            background: string;
-            foreground: string;
-        };
-        purple: {
-            background: string;
-            foreground: string;
-        };
-    };
-}, {
-    base: string;
-    background: string;
-    foreground: string;
-}, undefined, unknown, unknown, undefined>>;
-type AvatarFallbackBaseProps = Pick<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, 'delayMs'>;
-type AvatarFallbackInitialsProps = AvatarFallbackBaseProps & {
-    /** The fallback's variant. It can be one of: `initials`, `placeholder` */
-    variant: 'initials';
-    /** The initials to display as fallback content. Only available when variant is set to `initials` */
-    children: string | null | undefined;
-    color?: never;
-};
-type AvatarFallbackPlaceholderProps = AvatarFallbackBaseProps & {
-    /** The variant of the fallback, should be 'placeholder' */
-    variant: 'placeholder';
-    /**
-     * The color variant for the placeholder. Can be one of: `blue`, `purple`, `yellow`. Only available when variant is set to `placeholder`
-     * @default 'blue'
-     */
-    color?: VariantProps<typeof avatarPlaceholder>['color'];
-    children?: never;
-};
-type AvatarFallbackProps = AvatarFallbackInitialsProps | AvatarFallbackPlaceholderProps;
-/**
- * The AvatarFallback component displays a fallback content for an `Avatar` component when no image is provided or failed to load.
- */
-declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
-export { AvatarFallback };

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