@payfit/unity-components 2.46.15 → 2.46.17

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

@@ -1,57 +0,0 @@
-import { UnityIcon } from '@payfit/unity-icons';
-import { PropsWithChildren } from 'react';
-import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
-import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from './Button.variants.js';
-type UnityButtonProps = AriaButtonProps & ButtonBase & {
-    /**
-     * The button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost'.
-     * @default 'primary'
-     */
-    variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
-    /**
-     * 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 loading state of the button.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * The button's prefix icon. It has to be one of the icons from the Unity Icons package.
-     */
-    prefixIcon?: UnityIcon;
-    /**
-     * The button's suffix icon. It has to be one of the icons from the Unity Icons package.
-     * @default undefined
-     */
-    suffixIcon?: UnityIcon;
-    /**
-     * The length of the label in characters before truncation applies. Truncation won't happen by default unless you specify this prop
-     * @default undefined
-     */
-    truncateLabelLength?: number;
-};
-type UnionButtonProps = (UnityButtonProps & {
-    variant: 'primary';
-} & ButtonFilled) | (UnityButtonProps & {
-    variant: 'secondary';
-} & ButtonOutlined) | (UnityButtonProps & {
-    variant: 'ghost';
-} & ButtonGhost) | (UnityButtonProps & {
-    variant: 'outlined';
-} & ButtonOutlined);
-export type ButtonProps = PropsWithChildren<Omit<UnionButtonProps, 'style'>>;
-/**
- * Buttons allow users to take actions, and make choices, with a single tap.
- */
-declare const Button: import('react').ForwardRefExoticComponent<Omit<UnionButtonProps, "style"> & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLButtonElement>>;
-export { Button };

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

@@ -1,107 +0,0 @@
-import { jsx as a, jsxs as B } from "react/jsx-runtime";
-import { forwardRef as N, useMemo as j } from "react";
-import { useUnityTheme as z, uyMerge as o } from "@payfit/unity-themes";
-import { Button as C } from "react-aria-components/Button";
-import { Icon as f } from "../icon/Icon.js";
-import { Spinner as M } from "../spinner/Spinner.js";
-import { buttonOutlined as y, buttonGhost as $, buttonFilled as d } from "./Button.variants.js";
-const A = (s, r) => s ? /* @__PURE__ */ a(M, { size: "small", color: "inherit", label: "Loading..." }) : r ? /* @__PURE__ */ a(
-  f,
-  {
-    src: r,
-    size: 20,
-    color: "inherit",
-    role: "presentation",
-    "data-unity-icon": "prefix"
-  }
-) : null, F = N(
-  ({
-    variant: s,
-    children: r,
-    color: e = "primary",
-    size: m = "default",
-    isDisabled: i = !1,
-    isLoading: t = !1,
-    prefixIcon: h,
-    suffixIcon: c,
-    truncateLabelLength: l,
-    ...b
-  }, w) => {
-    const { theme: p } = z(), x = j(() => {
-      const n = { size: m, isDisabled: i, isLoading: t };
-      switch (s) {
-        case "primary": {
-          const u = {
-            ...n,
-            color: e
-          };
-          return o(d(u));
-        }
-        case "secondary":
-          return p === "rebrand" ? o(
-            d({ ...n, color: e === "inverted" ? "inverted.low" : "neutral" })
-          ) : o(
-            y({
-              ...n,
-              color: e
-            })
-          );
-        case "ghost": {
-          const u = {
-            ...n,
-            color: e
-          };
-          return o($(u));
-        }
-        case "outlined":
-          return o(
-            y({
-              ...n,
-              color: e
-            })
-          );
-      }
-    }, [s, e, m, i, t, p]), v = {
-      ...t && { "data-loading": t }
-    };
-    return /* @__PURE__ */ a(
-      C,
-      {
-        "data-dd-privacy": "allow",
-        ...b,
-        ref: w,
-        isDisabled: i || t,
-        isPending: t,
-        className: x,
-        ...v,
-        children: /* @__PURE__ */ B("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
-          A(t, h),
-          l && l > 0 ? /* @__PURE__ */ a(
-            "span",
-            {
-              style: {
-                "--uy-button-label-truncation-length": `${l}ch`
-              },
-              className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
-              children: r
-            }
-          ) : r,
-          c && /* @__PURE__ */ a(
-            f,
-            {
-              src: c,
-              size: 20,
-              color: "inherit",
-              role: "presentation",
-              "data-unity-icon": "suffix"
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-F.displayName = "Button";
-export {
-  F as Button
-};

package/dist/esm/components/button/Button.variants.d.ts

@@ -1,251 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-declare const buttonBase: import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, string[], {
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-export declare const buttonFilled: import('tailwind-variants').TVReturnType<{
-    color: {
-        primary: string[];
-        warning: string[];
-        danger: string[];
-        neutral: string[];
-        inverted: string[];
-        'inverted.low': string[];
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-}, undefined, undefined, {
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, string[], {
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>>;
-export declare const buttonOutlined: import('tailwind-variants').TVReturnType<{
-    color: {
-        primary: string[];
-        inverted: string[];
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-    };
-}, undefined, "uy:border uy:border-solid uy:bg-transparent", {
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, string[], {
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>>;
-export declare const buttonGhost: import('tailwind-variants').TVReturnType<{
-    color: {
-        primary: string[];
-        warning: string[];
-        danger: string[];
-        neutral: string[];
-        'neutral.lowest': string[];
-        inverted: string[];
-    };
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-}, undefined, undefined, {
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, string[], {
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: string;
-        false: string;
-    };
-    isLoading: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        full: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>>;
-export type ButtonBase = VariantProps<typeof buttonBase>;
-export type ButtonFilled = VariantProps<typeof buttonFilled>;
-export type ButtonOutlined = VariantProps<typeof buttonOutlined>;
-export type ButtonGhost = VariantProps<typeof buttonGhost>;
-export {};

package/dist/esm/components/button/Button.variants.js

@@ -1,182 +0,0 @@
-import { uyTv as e } from "@payfit/unity-themes";
-const t = e({
-  base: [
-    "uy:group",
-    "uy:cursor-pointer uy:rounded-100 uy:sm:rounded-75 uy:py-125 uy:sm:py-100 uy:sm:h-500 uy:inline-flex uy:items-center uy:justify-center uy:whitespace-nowrap uy:typography-action uy:transition-colors",
-    'uy:has-data-[unity-icon="prefix"]:pl-100 uy:has-data-[unity-icon="prefix"]:pr-200',
-    'uy:has-data-[unity-icon="suffix"]:pl-200 uy:has-data-[unity-icon="suffix"]:pr-100',
-    'uy:px-200 uy:has-data-[unity-icon="prefix"]:has-data-[unity-icon="suffix"]:px-100',
-    'uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-solid uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-utility-focus-ring'
-  ],
-  variants: {
-    isDisabled: {
-      true: "uy:disabled:cursor-not-allowed",
-      false: ""
-    },
-    isLoading: {
-      true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled",
-      false: ""
-    },
-    size: {
-      default: "uy:w-auto uy:grow-0 uy:basis-auto",
-      full: "uy:grow-1 uy:w-full uy:basis-full"
-    }
-  },
-  defaultVariants: {
-    isDisabled: !1,
-    isLoading: !1,
-    size: "default"
-  }
-}), r = e({
-  extend: t,
-  variants: {
-    color: {
-      primary: [
-        "uy:theme-legacy:bg-surface-primary-enabled uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:text-content-inverted-enabled",
-        'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-highest-hover uy:data-[hovered="true"]:text-content-inverted-hover',
-        "uy:theme-legacy:active:bg-surface-primary-active uy:theme-rebrand:active:bg-surface-neutral-highest-active uy:active:text-content-inverted-hover",
-        "uy:theme-legacy:data-[pressed]:bg-surface-primary-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-highest-pressed uy:theme-legacy:data-[pressed]:text-content-inverted-pressed uy:theme-rebrand:data-[pressed]:text-content-neutral-pressed"
-      ],
-      warning: [
-        "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
-        'uy:data-[hovered="true"]:bg-surface-warning-hover uy:data-[hovered="true"]:text-content-neutral-hover',
-        "uy:active:bg-surface-warning-active uy:active:text-content-neutral-active",
-        "uy:data-[pressed]:bg-surface-warning-pressed uy:data-[pressed]:text-content-neutral-pressed"
-      ],
-      danger: [
-        "uy:bg-surface-danger-enabled uy:theme-legacy:text-content-inverted-enabled uy:theme-rebrand:text-content-inverted",
-        'uy:data-[hovered="true"]:bg-surface-danger-hover uy:theme-legacy:data-[hovered="true"]:text-content-inverted-hover',
-        "uy:active:bg-surface-danger-active uy:theme-legacy:active:text-content-inverted",
-        "uy:data-[pressed]:bg-surface-danger-pressed uy:theme-legacy:data-[pressed]:text-content-inverted"
-      ],
-      neutral: [
-        "uy:bg-surface-neutral-low-enabled uy:text-content-neutral-enabled",
-        'uy:data-[hovered="true"]:bg-surface-neutral-low-hover uy:data-[hovered="true"]:text-content-neutral-hover',
-        "uy:active:bg-surface-neutral-low-active uy:active:text-content-neutral-active",
-        "uy:data-[pressed]:bg-surface-neutral-low-pressed uy:data-[pressed]:text-content-neutral-pressed"
-      ],
-      inverted: [
-        "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled",
-        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
-        "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
-        "uy:data-[pressed]:bg-surface-neutral-active uy:data-[pressed]:text-content-neutral-pressed",
-        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:text-content-neutral-focus uy:data-[focus-visible]:bg-surface-neutral-focus"
-      ],
-      "inverted.low": [
-        "uy:bg-surface-inverted-low-enabled uy:text-content-inverted-enabled",
-        'uy:data-[hovered="true"]:bg-surface-inverted-low-hover uy:data-[hovered="true"]:text-content-inverted-hover',
-        "uy:active:bg-surface-inverted-low-active uy:active:text-content-inverted-active",
-        'uy:data-[pressed="true"]:bg-surface-inverted-low-pressed uy:data-[pressed="true"]:text-content-inverted-pressed',
-        'uy:data-[focus-visible="true"]:outline-utility-inverted-focus-ring uy:data-[focus-visible="true"]:text-content-inverted-focus uy:data-[focus-visible="true"]:bg-surface-inverted-low-focus'
-      ]
-    },
-    isDisabled: {
-      true: "uy:disabled:bg-surface-neutral-disabled uy:disabled:text-content-neutral-disabled",
-      false: ""
-    },
-    isLoading: {
-      true: "uy:data-[loading]:bg-surface-neutral-disabled uy:data-[loading]:text-content-neutral-disabled",
-      false: ""
-    }
-  }
-}), u = e({
-  extend: t,
-  base: "uy:border uy:border-solid uy:bg-transparent",
-  variants: {
-    color: {
-      primary: [
-        "uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled",
-        'uy:data-[hovered="true"]:text-content-neutral-hover uy:data-[hovered="true"]:border-border-neutral-high-hover',
-        'uy:theme-legacy:data-[pressed="true"]:text-content-neutral-high-pressed uy:theme-legacy:data-[pressed="true"]:border-border-neutral-high-pressed',
-        'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
-        'uy:data-[focus-visible="true"]:border-border-neutral-high-focus uy:data-[focus-visible="true"]:text-content-neutral-focus'
-      ],
-      inverted: [
-        "uy:text-content-inverted-enabled uy:border-border-inverted-enabled",
-        'uy:theme-legacy:data-[pressed="true"]:text-content-inverted-pressed uy:theme-legacy:data-[pressed="true"]:border-border-inverted-pressed',
-        'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
-        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring"
-      ]
-    },
-    isDisabled: {
-      true: "uy:disabled:text-content-neutral-disabled uy:disabled:border-border-neutral-disabled uy:data-[disabled]:border-border-neutral-disabled",
-      false: ""
-    },
-    isLoading: {
-      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:border-border-neutral-disabled"
-    }
-  }
-}), n = e({
-  extend: t,
-  variants: {
-    color: {
-      primary: [
-        "uy:bg-transparent uy:theme-legacy:text-content-primary-enabled uy:theme-rebrand:text-content-neutral-enabled",
-        'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-lowest-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-hover uy:theme-legacy:data-[hovered="true"]:text-content-primary-hover uy:theme-rebrand:data-[hovered="true"]:text-content-neutral-hover',
-        "uy:theme-legacy:active:bg-surface-primary-lowest-active uy:theme-rebrand:active:bg-surface-neutral-active uy:theme-legacy:active:text-content-primary-active uy:theme-rebrand:active:text-content-neutral-active",
-        "uy:theme-legacy:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:theme-rebrand:data-[pressed=true]:bg-surface-neutral-pressed uy:theme-legacy:data-[pressed=true]:text-content-primary-pressed uy:theme-rebrand:data-[pressed=true]:text-content-neutral-pressed",
-        "uy:data-[focus-visible]:bg-transparent uy:theme-rebrand:data-[focus-visible]:text-content-neutral-focus"
-      ],
-      warning: [
-        "uy:bg-transparent uy:text-content-warning-enabled",
-        'uy:data-[hovered="true"]:bg-surface-warning-lowest-hover uy:data-[hovered="true"]:text-content-warning-hover',
-        "uy:active:bg-surface-warning-lowest-active uy:active:text-content-warning-active",
-        "uy:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:data-[pressed=true]:text-content-warning-pressed",
-        "uy:data-[focus-visible]:bg-transparent"
-      ],
-      danger: [
-        "uy:bg-transparent uy:text-content-danger-enabled",
-        'uy:data-[hovered="true"]:bg-surface-danger-lowest-hover uy:data-[hovered="true"]:text-content-danger-hover',
-        "uy:active:bg-surface-danger-lowest-active uy:active:text-content-danger-active",
-        "uy:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:data-[pressed=true]:text-content-danger-pressed",
-        "uy:data-[focus-visible]:bg-transparent"
-      ],
-      neutral: [
-        "uy:bg-transparent uy:text-content-neutral-enabled",
-        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
-        "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
-        "uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
-        "uy:data-[focus-visible]:bg-transparent"
-      ],
-      "neutral.lowest": [
-        "uy:bg-transparent uy:text-content-neutral-enabled",
-        'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover uy:data-[hovered="true"]:text-content-neutral-hover',
-        "uy:active:bg-surface-neutral-lowest-active uy:active:text-content-neutral-active",
-        "uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
-        "uy:data-[focus-visible]:bg-transparent"
-      ],
-      inverted: [
-        "uy:bg-transparent uy:text-content-inverted-enabled",
-        'uy:data-[hovered="true"]:bg-surface-inverted-hover uy:data-[hovered="true"]:text-content-inverted-hover',
-        "uy:active:bg-surface-inverted-active uy:active:text-content-inverted-active",
-        "uy:data-[pressed=true]:bg-surface-inverted-pressed uy:data-[pressed=true]:text-content-inverted-pressed",
-        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:bg-transparent"
-      ]
-    },
-    isDisabled: {
-      true: "uy:disabled:text-content-neutral-disabled uy:disabled:bg-transparent",
-      false: ""
-    },
-    isLoading: {
-      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:bg-transparent",
-      false: ""
-    }
-  },
-  compoundVariants: [
-    {
-      isDisabled: !0,
-      color: "inverted",
-      className: ["uy:disabled:text-content-inverted-disabled"]
-    },
-    {
-      isLoading: !0,
-      color: "inverted",
-      className: ["uy:data-[loading]:text-content-inverted-disabled"]
-    }
-  ]
-});
-export {
-  r as buttonFilled,
-  n as buttonGhost,
-  u as buttonOutlined
-};

package/dist/esm/components/button/figma/Button.figma.d.ts

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

package/dist/esm/components/card/Card.context.d.ts

@@ -1,5 +0,0 @@
-export interface CardContextValue {
-    titleId: string;
-}
-export declare const CardContext: import('react').Context<CardContextValue | null>;
-export declare function useCardContext(): CardContextValue;

package/dist/esm/components/card/Card.context.js

@@ -1,14 +0,0 @@
-import { createContext as o, useContext as n } from "react";
-const e = o(null);
-function c() {
-  const t = n(e);
-  if (!t)
-    throw new Error(
-      "Card compound components must be used within a Card component"
-    );
-  return t;
-}
-export {
-  e as CardContext,
-  c as useCardContext
-};