@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,85 @@
+export declare const avatarBase: import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, unknown, unknown, undefined>>;

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

@@ -0,0 +1,46 @@
+import { tv as a } from "tailwind-variants";
+const e = a({
+  variants: {
+    size: {
+      xs: "uy-size-200",
+      sm: "uy-size-300",
+      md: "uy-size-400",
+      lg: "uy-size-500",
+      xl: "uy-size-1000"
+    },
+    variant: {
+      circle: "uy-rounded-circle",
+      square: ""
+    }
+  },
+  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"
+    }
+  ]
+});
+export {
+  e as avatarBase
+};

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

@@ -0,0 +1,170 @@
+import { VariantProps } from 'tailwind-variants';
+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;
+        };
+        sunglow: {
+            background: string;
+            foreground: string;
+        };
+        peach: {
+            background: string;
+            foreground: string;
+        };
+    };
+}, {
+    base: string;
+    background: string;
+    foreground: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    color: {
+        blue: {
+            background: string;
+            foreground: string;
+        };
+        sunglow: {
+            background: string;
+            foreground: string;
+        };
+        peach: {
+            background: string;
+            foreground: string;
+        };
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, 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`, `peach`, `sunglow`. 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,87 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as p from "react";
+import * as t from "@radix-ui/react-avatar";
+import { twMerge as f } from "tailwind-merge";
+import { tv as l } from "tailwind-variants";
+import { useAvatarContext as b } from "../Avatar.context.js";
+import { avatarBase as n } from "../Avatar.variants.js";
+import { getInitials as v } from "../utils.js";
+const h = l({
+  extend: n,
+  slots: {
+    base: "uy-absolute uy-overflow-hidden",
+    background: "",
+    foreground: ""
+  },
+  variants: {
+    color: {
+      blue: {
+        background: "uy-bg-blue-L7",
+        foreground: "uy-fill-blue-L5"
+      },
+      sunglow: {
+        background: "uy-bg-sunglow-L3",
+        foreground: "uy-fill-sunglow-L2"
+      },
+      peach: {
+        background: "uy-bg-peach-L3",
+        foreground: "uy-fill-peach-L2"
+      }
+    }
+  }
+}), w = l({
+  extend: n,
+  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"
+    }
+  }
+}), x = p.forwardRef(({ variant: s, color: u, children: i, ...r }, y) => {
+  const c = b(), { size: e, variant: o } = c;
+  if (s === "placeholder") {
+    const { base: d, background: g, foreground: m } = h({
+      color: u,
+      size: e,
+      variant: o
+    });
+    return /* @__PURE__ */ a(
+      "svg",
+      {
+        role: "img",
+        "aria-hidden": !0,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 16 16",
+        className: f(d(), g()),
+        ...r,
+        children: /* @__PURE__ */ a(
+          "path",
+          {
+            className: m(),
+            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__ */ a(
+    t.Fallback,
+    {
+      ref: y,
+      role: "presentation",
+      className: w({ size: e, variant: o }),
+      ...r,
+      children: v(i)
+    }
+  );
+});
+x.displayName = t.Fallback.displayName;
+export {
+  x as AvatarFallback
+};

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 * as a from "@radix-ui/react-avatar";
+import { twMerge as p } from "tailwind-merge";
+import { tv as f } from "tailwind-variants";
+import { useAvatarContext as u } from "../Avatar.context.js";
+import { avatarBase as c } from "../Avatar.variants.js";
+const l = f({
+  extend: c,
+  base: "uy-aspect-square uy-w-full uy-h-full uy-object-cover uy-bg-surface-neutral-lowest"
+}), v = n.forwardRef(({ className: r, ...t }, e) => {
+  const { variant: o, size: s } = u(), m = p(
+    l({ variant: o, size: s }),
+    r
+  );
+  return /* @__PURE__ */ i(a.Image, { ref: e, className: m, ...t });
+});
+v.displayName = a.Image.displayName;
+export {
+  v as AvatarImage
+};

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

@@ -0,0 +1,48 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+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 * as l from "@radix-ui/react-avatar";
+import { tv as c } from "tailwind-variants";
+import { useAvatarContext as y, AvatarProvider as p } from "../Avatar.context.js";
+import { avatarBase as v } from "../Avatar.variants.js";
+const z = c({
+  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(
+      l.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,94 @@
+import { AriaRole, PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const badge: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: string;
+        numeric: string;
+        contextual: 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", {
+    twMerge: false;
+}, {
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: string;
+        numeric: string;
+        contextual: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: string;
+        numeric: string;
+        contextual: 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", {
+    twMerge: false;
+}, 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;
+    /**
+     * 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;
+    /**
+     * Accessible label for the badge
+     */
+    'aria-label'?: string;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { Badge };

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

@@ -0,0 +1,61 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { Slot as y } from "@radix-ui/react-slot";
+import { twMerge as d } from "tailwind-merge";
+import { tv as i } from "tailwind-variants";
+const g = i(
+  {
+    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",
+    variants: {
+      variant: {
+        success: "uy-bg-surface-success-low uy-text-content-neutral",
+        warning: "uy-bg-surface-warning-low uy-text-content-neutral",
+        danger: "uy-bg-surface-danger-low uy-text-content-neutral",
+        neutral: "uy-bg-surface-neutral-lowest uy-text-content-neutral",
+        promo: "uy-bg-surface-promo-low uy-text-content-neutral",
+        attention: "uy-bg-surface-danger uy-text-content-inverted",
+        numeric: "uy-bg-surface-primary-low uy-text-blue-L10",
+        contextual: "uy-bg-surface-neutral uy-border uy-border-solid uy-border-border-neutral uy-text-content-neutral"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  },
+  { twMerge: !1 }
+), m = {
+  success: "status",
+  warning: "alert",
+  danger: "alert",
+  neutral: "status",
+  promo: "status",
+  attention: "alert",
+  contextual: "status",
+  numeric: "status"
+}, p = c(
+  ({
+    className: e,
+    variant: t = "neutral",
+    role: r,
+    asChild: a = !1,
+    children: n,
+    ...u
+  }, o) => {
+    const s = r ?? m[t] ?? "status";
+    return /* @__PURE__ */ l(
+      a ? y : "span",
+      {
+        "data-dd-privacy": "allow",
+        ref: o,
+        className: d(g({ variant: t }), e),
+        role: s,
+        ...u,
+        children: n
+      }
+    );
+  }
+);
+p.displayName = "Badge";
+export {
+  p as Badge
+};