@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.6

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

@@ -0,0 +1,86 @@
+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.mjs";
+import { avatarBase as n } from "../Avatar.variants.mjs";
+const v = 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"
+      }
+    }
+  }
+}), h = 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"
+    }
+  }
+}), w = 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 } = v({
+      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: h({ size: e, variant: o }),
+      ...r,
+      children: i
+    }
+  );
+});
+w.displayName = t.Fallback.displayName;
+export {
+  w as AvatarFallback
+};

package/dist/esm/components/avatar/parts/AvatarImage.mjs

@@ -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.mjs";
+import { avatarBase as c } from "../Avatar.variants.mjs";
+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.mts

@@ -0,0 +1,28 @@
+import { VariantProps } from 'tailwind-variants';
+import { avatarBase } from '../Avatar.variants.mjs';
+import * as React from 'react';
+/**
+ * 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.mjs

@@ -0,0 +1,47 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as c from "react";
+import * as l from "@radix-ui/react-avatar";
+import { tv as d } from "tailwind-variants";
+import { useAvatarContext as p, AvatarProvider as v } from "../Avatar.context.mjs";
+import { avatarBase as y } from "../Avatar.variants.mjs";
+const z = d({
+  extend: y,
+  base: "uy-absolute uy-overflow-hidden uy-leading-[0] uy-border 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 = c.forwardRef(
+  ({ variant: r, isHidden: a, children: i, ...o }, n) => {
+    const { size: f } = p(), e = f === "xl", t = e ? "sm" : "xs", m = e ? 0 : 4, u = z({ variant: r, size: t, isHidden: a });
+    return /* @__PURE__ */ s(v, { 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/badge/Badge.d.mts

@@ -0,0 +1,67 @@
+import { AriaRole } 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;
+        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;
+        contextual: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: 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>>;
+/**
+ * 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.mjs

@@ -0,0 +1,58 @@
+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 g } from "tailwind-merge";
+import { tv as d } from "tailwind-variants";
+const f = d(
+  {
+    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",
+        contextual: "uy-bg-surface-neutral uy-border uy-border-border-neutral uy-text-content-neutral"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  },
+  { twMerge: !1 }
+), i = {
+  success: "status",
+  warning: "alert",
+  danger: "alert",
+  neutral: "status",
+  promo: "status",
+  attention: "alert",
+  contextual: "status"
+}, p = c(
+  ({
+    className: e,
+    variant: t = "neutral",
+    role: r,
+    asChild: a = !1,
+    children: n,
+    ...u
+  }, o) => {
+    const s = r ?? i[t] ?? "status";
+    return /* @__PURE__ */ l(
+      a ? y : "span",
+      {
+        ref: o,
+        className: g(f({ variant: t }), e),
+        role: s,
+        ...u,
+        children: n
+      }
+    );
+  }
+);
+p.displayName = "Badge";
+export {
+  p as Badge
+};

package/dist/esm/components/breadcrumbs/Breadcrumbs.context.d.mts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { breadcrumbsVariant } from './Breadcrumbs.variant.mjs';
+interface BreadcrumbsContextValue {
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+    isMobile: boolean;
+    isStaticApi: boolean;
+}
+export declare const BreadcrumbsContext: import('react').Context<BreadcrumbsContextValue>;
+export declare function BreadcrumbsProvider({ children, wrap, isMobile, isStaticApi, }: PropsWithChildren<BreadcrumbsContextValue>): JSX.Element;
+export declare function useBreadcrumbsContext(): BreadcrumbsContextValue;
+export {};

package/dist/esm/components/breadcrumbs/Breadcrumbs.d.mts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { AriaBreadcrumbsProps as AriaAriaBreadcrumbsProps } from 'react-aria';
+import { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { BreadcrumbProps } from './parts/Breadcrumb.mjs';
+import { breadcrumbsVariant } from './Breadcrumbs.variant.mjs';
+export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<BreadcrumbsProps>, 'onAction'> {
+    items?: never;
+    /**
+     * The breadcrumb list to render (static api)
+     */
+    children: ReactNode;
+    /**
+     * If the breadcrumbs should wrap or not
+     */
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+}
+export interface BreadcrumbsWithItemProps extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant> {
+    /**
+     * The list of items to render, when using the dynamic API.
+     */
+    items: BreadcrumbProps[];
+    /**
+     * The function renderer to render each part of the breadcrumbs (dynamic api)
+     */
+    children: (item: BreadcrumbProps) => ReactNode;
+    /**
+     * If the breadcrumbs should wrap or not
+     */
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+}
+declare const Breadcrumbs: import('react').ForwardRefExoticComponent<(BreadcrumbsProps | BreadcrumbsWithItemProps) & import('react').RefAttributes<HTMLOListElement>>;
+export { Breadcrumbs };

package/dist/esm/components/breadcrumbs/Breadcrumbs.mjs

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as c, Fragment as m } from "react";
+import { Breadcrumbs as p } from "react-aria-components";
+import { useBreakpointListener as u } from "../../hooks/use-breakpoint-listener.mjs";
+import { BreadcrumbsProvider as f } from "./Breadcrumbs.context.mjs";
+import { breadcrumbsVariant as d } from "./Breadcrumbs.variant.mjs";
+const b = (o, r, t) => o ? r.length === 0 ? null : t(r.at(r.length === 1 ? 0 : -2)) : r.map((e) => /* @__PURE__ */ n(m, { children: t(e) }, `${e.label}${e.href}`)), v = c(({ items: o, children: r, wrap: t = "nowrap" }, e) => {
+  const { base: i } = d({ wrap: t }), a = u(), s = a === "xs" || a === "sm";
+  return /* @__PURE__ */ n(
+    f,
+    {
+      wrap: t,
+      isMobile: s,
+      isStaticApi: o === void 0,
+      children: /* @__PURE__ */ n(p, { ref: e, className: i(), children: o ? b(s, o, r) : r })
+    }
+  );
+});
+export {
+  v as Breadcrumbs
+};

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.d.mts

@@ -0,0 +1,73 @@
+export declare const breadcrumbsVariant: import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}>, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.mjs

@@ -0,0 +1,24 @@
+import { jsxs as c, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { Breadcrumb as m } from "react-aria-components";
+import { Icon as s } from "../../icon/Icon.mjs";
+import { Link as u } from "../../link/Link.mjs";
+import B from "../../tooltip/Tooltip.mjs";
+import { useBreadcrumbsContext as C } from "../Breadcrumbs.context.mjs";
+import { breadcrumbsVariant as L } from "../Breadcrumbs.variant.mjs";
+const g = 25, d = ({ children: t, href: e }) => t.length > g ? /* @__PURE__ */ r(B, { title: t, children: /* @__PURE__ */ r(u, { href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), A = x((t, e, ...o) => {
+  const { wrap: l, isMobile: f, isStaticApi: p } = C(), { breadcrumb: n } = L({ wrap: l });
+  if (!t)
+    return null;
+  const { href: i, label: a } = t;
+  return f && !p ? /* @__PURE__ */ c(m, { ref: e, ...o, className: n(), children: [
+    /* @__PURE__ */ r(s, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
+    /* @__PURE__ */ r(d, { href: i, children: a })
+  ] }) : /* @__PURE__ */ r(m, { ref: e, ...o, className: n(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy-text-nowrap", children: a }) : /* @__PURE__ */ c(h, { children: [
+    /* @__PURE__ */ r(d, { href: i, children: a }),
+    /* @__PURE__ */ r(s, { src: "CaretRightOutlined", "aria-hidden": "true" })
+  ] }) });
+});
+export {
+  A as Breadcrumb
+};

package/dist/esm/components/button/Button.d.mts

@@ -0,0 +1,41 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from './Button.variants.mjs';
+type UnityButtonProps = AriaButtonProps & ButtonBase & {
+    /**
+     * The button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost'.
+     * @default 'primary'
+     */
+    variant: 'primary' | 'secondary' | 'ghost';
+    /**
+     * The button size. It can be full size or default size (min-content).
+     * @default 'default'
+     */
+    size?: ButtonBase['size'];
+    /**
+     * The button's color. It can be one of the following: 'primary', 'inverted'.
+     * @default 'primary'
+     */
+    color?: ButtonFilled['color'] | ButtonOutlined['color'] | ButtonGhost['color'];
+    /**
+     * The button's prefix icon. It has to be one of the icons from the Unity Icons package.
+     */
+    prefixIcon?: UnityIcon;
+    /**
+     * The loading state of the button.
+     * @default false
+     */
+    isLoading?: boolean;
+};
+export type ButtonProps = (UnityButtonProps & {
+    variant: 'primary';
+} & ButtonFilled) | (UnityButtonProps & {
+    variant: 'secondary';
+} & ButtonOutlined) | (UnityButtonProps & {
+    variant: 'ghost';
+} & ButtonGhost);
+/**
+ * Buttons allow users to take actions, and make choices, with a single tap.
+ */
+declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/esm/components/button/Button.mjs

@@ -0,0 +1,74 @@
+import { jsx as s, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as h, useMemo as b } from "react";
+import { Button as x } from "react-aria-components";
+import { twMerge as a } from "tailwind-merge";
+import { Icon as B } from "../icon/Icon.mjs";
+import { Spinner as v } from "../spinner/Spinner.mjs";
+import { buttonGhost as w, buttonOutlined as N, buttonFilled as j } from "./Button.variants.mjs";
+const M = h(
+  ({
+    variant: m,
+    children: c,
+    color: e = "primary",
+    size: i = "default",
+    isDisabled: n = !1,
+    isLoading: t = !1,
+    prefixIcon: l = void 0,
+    ...u
+  }, p) => {
+    const f = b(() => {
+      const o = { size: i, isDisabled: n, isLoading: t };
+      switch (m) {
+        case "primary": {
+          const r = {
+            ...o,
+            color: e
+          };
+          return a(j(r));
+        }
+        case "secondary": {
+          const r = {
+            ...o,
+            color: e
+          };
+          return a(N(r));
+        }
+        case "ghost": {
+          const r = {
+            ...o,
+            color: e
+          };
+          return a(w(r));
+        }
+      }
+    }, [m, e, i, n, t]), d = {
+      ...t && { "data-loading": t }
+    };
+    return /* @__PURE__ */ s(
+      x,
+      {
+        ...u,
+        ref: p,
+        isDisabled: n || t,
+        className: f,
+        ...d,
+        children: t ? /* @__PURE__ */ s(v, { size: "small", color: "inherit", label: "Loading..." }) : /* @__PURE__ */ y("span", { className: "uy-inline-flex uy-gap-50 uy-leading-175 uy-items-center", children: [
+          l && /* @__PURE__ */ s(
+            B,
+            {
+              src: l,
+              size: 20,
+              color: "inherit",
+              role: "presentation"
+            }
+          ),
+          c
+        ] })
+      }
+    );
+  }
+);
+M.displayName = "Button";
+export {
+  M as Button
+};