@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/autocomplete/parts/AutocompletePanel.js

@@ -0,0 +1,48 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { uyTv as y } from "@payfit/unity-themes";
+import { ListBox as m } from "react-aria-components/ListBox";
+import { Popover as c } from "react-aria-components/Popover";
+import { FormattedMessage as d } from "react-intl";
+import { Icon as p } from "../../icon/Icon.js";
+import { Text as t } from "../../text/Text.js";
+const f = y({
+  slots: {
+    base: "uy:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:max-h-[312px] uy:shadow-300",
+    list: "uy:overflow-y-auto uy:max-h-[296px] uy:p-100"
+  }
+}), g = () => /* @__PURE__ */ i("div", { className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-[312px]", children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      variant: "body",
+      className: "uy:w-500 uy:h-500 uy:bg-surface-neutral-lowest uy:flex uy:items-center uy:justify-center uy:rounded-75",
+      children: /* @__PURE__ */ e(p, { size: 24, src: "MagnifyingGlassOutlined" })
+    }
+  ),
+  /* @__PURE__ */ e(t, { variant: "bodyLarge", children: /* @__PURE__ */ e(
+    d,
+    {
+      id: "unity:component:autocomplete:panel:empty:label",
+      defaultMessage: "No results found"
+    }
+  ) })
+] }), h = (r) => {
+  const { children: o, panelWidth: s, searchRef: u, ...a } = r, { base: l, list: n } = f();
+  return /* @__PURE__ */ e(
+    c,
+    {
+      ...a,
+      className: l(),
+      offset: 1,
+      triggerRef: u,
+      isNonModal: !0,
+      style: { "--trigger-width": s },
+      children: /* @__PURE__ */ e(m, { className: n(), renderEmptyState: g, children: o })
+    }
+  );
+};
+h.displayName = "AutocompletePanel";
+export {
+  h as AutocompletePanel,
+  f as autocompletePanel
+};

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

@@ -0,0 +1,12 @@
+type AvatarContextValue = {
+    variant: 'circle' | 'square';
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    hasPair: boolean;
+    color?: 'teal' | 'plum' | 'purple' | 'orange' | 'neutral' | 'warning' | 'success' | 'info' | 'danger' | 'promo' | 'primary';
+};
+export declare const AvatarContext: import('react').Context<AvatarContextValue>;
+export declare function AvatarProvider({ variant, size, hasPair, color, children, }: AvatarContextValue & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useAvatarContext(): AvatarContextValue;
+export {};

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

@@ -0,0 +1,28 @@
+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,
+  color: void 0
+});
+function x({
+  variant: t,
+  size: e,
+  hasPair: o,
+  color: a,
+  children: n
+}) {
+  return /* @__PURE__ */ i(r.Provider, { value: { variant: t, size: e, hasPair: o, color: a }, children: n });
+}
+function d() {
+  const t = v(r);
+  if (!t)
+    throw new Error("useAvatarContext must be used within an AvatarProvider");
+  return t;
+}
+export {
+  r as AvatarContext,
+  x as AvatarProvider,
+  d as useAvatarContext
+};

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

@@ -0,0 +1,246 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+import * as React from 'react';
+declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
+    size: {
+        xs: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        sm: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        md: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        lg: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        xl: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+    variant: {
+        circle: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        square: import('tailwind-merge').ClassNameValue | {
+            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;
+        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, {
+    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>>>;
+export type AvatarProps = PropsWithChildren<{
+    /** Additional class names to apply to the avatar */
+    className?: string;
+    /** The avatar's variant. One of: circle or square */
+    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 */
+    '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 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 */
+    className?: string;
+    /** The avatar's variant. One of: circle or square */
+    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 */
+    '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 { Avatar };

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

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

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

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

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

@@ -0,0 +1,82 @@
+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
+};