@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/label/Label.js

@@ -1,10 +1,10 @@
 import { jsxs as r, jsx as n } from "react/jsx-runtime";
 import { forwardRef as u } from "react";
-import { mergeProps as b } from "react-aria";
-import { useSlottedContext as f, InputContext as g, Label as N } from "react-aria-components";
-import { useIntl as h } from "react-intl";
-import { tv as q } from "tailwind-variants";
-const x = q({
+import { uyTv as b } from "@payfit/unity-themes";
+import { mergeProps as f } from "react-aria";
+import { useSlottedContext as g, InputContext as N, Label as h } from "react-aria-components";
+import { useIntl as q } from "react-intl";
+const x = b({
   slots: {
     base: "uy:typography-body-strong uy:text-content-form-enabled uy:flex uy:gap-25",
     asterisk: "uy:text-content-danger",
@@ -25,31 +25,31 @@ const x = q({
   }
 }), v = u(
   ({ children: l, ...a }, i) => {
-    const t = h(), e = f(g), d = b(
+    const s = q(), e = g(N), d = f(
       { isRequired: e == null ? void 0 : e["aria-required"] },
       a
     ), {
-      isRequired: s = !1,
+      isRequired: t = !1,
       requiredVariant: o = "required",
       ...p
-    } = d, { base: m, asterisk: y, optionalTag: c } = x();
+    } = d, { base: y, asterisk: m, optionalTag: c } = x();
     return /* @__PURE__ */ r(
-      N,
+      h,
       {
         "data-dd-privacy": "allow",
         ...p,
         ref: i,
-        className: m({ className: a.className }),
+        className: y({ className: a.className }),
         children: [
           l,
-          o === "required" && s && /* @__PURE__ */ r("span", { className: y(), children: [
+          o === "required" && t && /* @__PURE__ */ r("span", { className: m(), children: [
             "*",
-            /* @__PURE__ */ n("span", { className: "uy:sr-only", children: t.formatMessage({
+            /* @__PURE__ */ n("span", { className: "uy:sr-only", children: s.formatMessage({
               id: "unity:component:label:required",
               defaultMessage: "required"
             }) })
           ] }),
-          o === "optional" && !s && /* @__PURE__ */ n("span", { className: c({ className: a.className }), children: t.formatMessage({
+          o === "optional" && !t && /* @__PURE__ */ n("span", { className: c({ className: a.className }), children: s.formatMessage({
             id: "unity:component:label:optional",
             defaultMessage: "(optional)"
           }) })

package/dist/esm/components/link/Link.d.ts

@@ -1,7 +1,7 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { HTMLAttributes } from 'react';
 import { LinkProps as AriaLinkProps } from 'react-aria-components';
 import { NavLinkProps as NavRouterLinkProps } from 'react-router-dom';
-import { VariantProps } from 'tailwind-variants';
 import { link } from './Link.variants.js';
 export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
     /**
@@ -12,6 +12,11 @@ export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
      * The link id
      */
     id?: HTMLAttributes<HTMLLinkElement>['id'];
+    /**
+     * The link's size.
+     * @default 'inherit'
+     */
+    size?: VariantProps<typeof link>['size'];
     /**
      * The link's display variant. Links can be inline with text or standalone (block).
      * @default 'inline'
@@ -51,6 +56,11 @@ declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps
      * The link id
      */
     id?: HTMLAttributes<HTMLLinkElement>["id"];
+    /**
+     * The link's size.
+     * @default 'inherit'
+     */
+    size?: VariantProps<typeof link>["size"];
     /**
      * The link's display variant. Links can be inline with text or standalone (block).
      * @default 'inline'

package/dist/esm/components/link/Link.js

@@ -1,58 +1,60 @@
-import { jsxs as k, jsx as y } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { IconSprite as g } from "@payfit/unity-icons";
-import { Link as w } from "react-aria-components";
-import { useRouter as x } from "../../providers/router/RouterProvider.js";
-import { link as L } from "./Link.variants.js";
-import { isExternalUrl as A } from "./utils.js";
-const E = v(
+import { jsxs as g, jsx as w } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { IconSprite as y } from "@payfit/unity-icons";
+import { Link as L } from "react-aria-components";
+import { useRouter as A } from "../../providers/router/RouterProvider.js";
+import { link as E } from "./Link.variants.js";
+import { isExternalUrl as N } from "./utils.js";
+const S = x(
   ({
     href: o,
-    children: a,
+    children: l,
     variant: s = "inline",
     color: c = "primary",
     isDisabled: n = !1,
     isExact: m = !1,
     isCurrent: p = void 0,
     isExternal: d,
-    maxCharactersTruncation: t,
+    maxCharactersTruncation: i,
+    size: u = "inherit",
     ...r
-  }, u) => {
-    const l = x(), e = d ?? A(o), i = !e && l ? l.isActive(o.toString(), m) : p, f = L({
+  }, f) => {
+    const a = A(), e = d ?? N(o), t = !e && a ? a.isActive(o.toString(), m) : p, { base: k, icon: v } = E({
       variant: s,
       color: c,
       isDisabled: n,
-      isTruncated: !!t
+      size: u,
+      isTruncated: !!i
     });
-    return /* @__PURE__ */ k(
-      w,
+    return /* @__PURE__ */ g(
+      L,
       {
         "data-dd-privacy": "allow",
         ...r,
         href: o,
-        ref: u,
-        style: !!t ? {
-          "--uy-link-max-w": `${t}ch`
+        ref: f,
+        style: !!i ? {
+          "--uy-link-max-w": `${i}ch`
         } : {},
-        className: f,
+        className: k(),
         isDisabled: n,
         target: e ? "_blank" : r.target,
         rel: e && !r.rel ? "noopener noreferrer" : r.rel,
-        ...i !== void 0 && {
-          "data-current": i,
-          "aria-current": i ? "page" : void 0
+        ...t !== void 0 && {
+          "data-current": t,
+          "aria-current": t ? "page" : void 0
         },
         children: [
-          a,
-          e && /* @__PURE__ */ y(
-            g,
+          l,
+          e && /* @__PURE__ */ w(
+            y,
             {
               src: "ArrowSquareOutOutlined",
               color: "currentColor",
-              width: "1em",
-              height: "1em",
+              width: "1.45em",
+              height: "1.45em",
               role: "presentation",
-              className: "uy:self-center uy:inline"
+              className: v()
             }
           )
         ]
@@ -60,7 +62,7 @@ const E = v(
     );
   }
 );
-E.displayName = "Link";
+S.displayName = "Link";
 export {
-  E as Link
+  S as Link
 };

package/dist/esm/components/link/Link.variants.d.ts

@@ -1,55 +1,166 @@
 export declare const link: import('tailwind-variants').TVReturnType<{
     variant: {
-        inline: string;
-        standalone: string;
+        inline: {
+            base: string;
+            icon: string;
+        };
+        standalone: {
+            base: string;
+            icon: string;
+        };
+    };
+    size: {
+        default: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        small: {
+            base: string;
+        };
+        inherit: {
+            base: string;
+        };
     };
     color: {
-        primary: string;
-        secondary: string;
-        inherit: string;
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        inherit: {
+            base: string;
+        };
     };
     isDisabled: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     isTruncated: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
-}, undefined, "uy:rounded-50 uy:underline uy:transition-colors uy:disabled:text-content-neutral-disabled uy:focus-visible:outline-none uy:focus-visible:text-content-neutral-focus uy:focus-visible:ring-2 uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring", {
+}, {
+    base: string[];
+    icon: string[];
+}, undefined, {
     variant: {
-        inline: string;
-        standalone: string;
+        inline: {
+            base: string;
+            icon: string;
+        };
+        standalone: {
+            base: string;
+            icon: string;
+        };
+    };
+    size: {
+        default: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        small: {
+            base: string;
+        };
+        inherit: {
+            base: string;
+        };
     };
     color: {
-        primary: string;
-        secondary: string;
-        inherit: string;
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        inherit: {
+            base: string;
+        };
     };
     isDisabled: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     isTruncated: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
-}, undefined, import('tailwind-variants').TVReturnType<{
+}, {
+    base: string[];
+    icon: string[];
+}, import('tailwind-variants').TVReturnType<{
     variant: {
-        inline: string;
-        standalone: string;
+        inline: {
+            base: string;
+            icon: string;
+        };
+        standalone: {
+            base: string;
+            icon: string;
+        };
+    };
+    size: {
+        default: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+        small: {
+            base: string;
+        };
+        inherit: {
+            base: string;
+        };
     };
     color: {
-        primary: string;
-        secondary: string;
-        inherit: string;
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        inherit: {
+            base: string;
+        };
     };
     isDisabled: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
     isTruncated: {
-        true: string;
-        false: string;
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
     };
-}, undefined, "uy:rounded-50 uy:underline uy:transition-colors uy:disabled:text-content-neutral-disabled uy:focus-visible:outline-none uy:focus-visible:text-content-neutral-focus uy:focus-visible:ring-2 uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring", unknown, unknown, undefined>>;
+}, {
+    base: string[];
+    icon: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/esm/components/link/Link.variants.js

@@ -1,46 +1,74 @@
-import { tv as t } from "tailwind-variants";
-const a = t({
-  base: "uy:rounded-50 uy:underline uy:transition-colors uy:disabled:text-content-neutral-disabled uy:focus-visible:outline-none uy:focus-visible:text-content-neutral-focus uy:focus-visible:ring-2 uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring",
+import { uyTv as e } from "@payfit/unity-themes";
+const a = e({
+  slots: {
+    base: [
+      "uy:rounded-50 uy:underline uy:transition-colors uy:underline-offset-3",
+      "uy:disabled:text-content-neutral-disabled",
+      "uy:focus-visible:outline-none uy:focus-visible:text-content-neutral-focus uy:focus-visible:ring-2 uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring"
+    ],
+    icon: ["uy:inline uy:ml-25"]
+  },
   variants: {
     variant: {
-      inline: "uy:inline uy:text-(length:inherit) uy:font-medium uy:leading-inherit",
-      standalone: "uy:flex uy:typography-action uy:gap-x-25 uy:items-end"
+      inline: {
+        base: "uy:inline uy:text-(length:inherit) uy:font-medium uy:leading-inherit",
+        icon: "uy:align-top"
+      },
+      standalone: {
+        base: "uy:flex uy:gap-x-25 uy:items-end",
+        icon: "uy:self-center"
+      }
+    },
+    size: {
+      default: { base: "uy:typography-action" },
+      large: { base: "uy:typography-action-large" },
+      small: { base: "uy:typography-action-small" },
+      inherit: { base: "uy:text-inherit" }
     },
     color: {
-      primary: "uy:text-content-primary-enabled uy:hover:text-content-primary-hover uy:active:text-content-primary-active uy:data-[pressed]:text-content-primary-active uy:data-[current]:text-content-primary-active uy:aria-[current]:text-content-primary-active",
-      secondary: "uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover uy:active:text-content-neutral-active uy:data-[pressed]:text-content-neutral-pressed uy:data-[current]:text-content-neutral-active uy:aria-[current]:text-content-neutral-active",
-      inherit: "uy:text-(color:inherit)"
+      primary: {
+        base: "uy:text-content-primary-enabled uy:hover:text-content-primary-hover uy:active:text-content-primary-active uy:data-[pressed]:text-content-primary-active uy:data-[current]:text-content-primary-active uy:aria-[current]:text-content-primary-active"
+      },
+      secondary: {
+        base: "uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover uy:active:text-content-neutral-active uy:data-[pressed]:text-content-neutral-pressed uy:data-[current]:text-content-neutral-active uy:aria-[current]:text-content-neutral-active"
+      },
+      inherit: { base: "uy:text-(color:inherit)" }
     },
     isDisabled: {
-      true: "uy:data-[disabled]:cursor-not-allowed",
-      false: "uy:enabled:cursor-pointer"
+      true: { base: "uy:data-[disabled]:cursor-not-allowed" },
+      false: { base: "uy:enabled:cursor-pointer" }
     },
     isTruncated: {
-      true: "uy:truncate uy:max-w-[var(--uy-link-max-w)]",
-      false: ""
+      true: { base: "uy:truncate uy:max-w-[var(--uy-link-max-w)]" },
+      false: { base: "" }
     }
   },
   compoundVariants: [
     {
       color: "primary",
       isDisabled: !0,
-      class: "uy:data-[disabled]:text-content-primary-disabled"
+      class: { base: "uy:data-[disabled]:text-content-primary-disabled" }
     },
     {
       color: "secondary",
       isDisabled: !0,
-      class: "uy:data-[disabled]:text-content-neutral-lowest-disabled"
+      class: {
+        base: "uy:data-[disabled]:text-content-neutral-lowest-disabled"
+      }
     },
     {
       color: "inherit",
       isDisabled: !0,
-      class: "uy:data-[disabled]:text-content-neutral-lowest-disabled"
+      class: {
+        base: "uy:data-[disabled]:text-content-neutral-lowest-disabled"
+      }
     }
   ],
   defaultVariants: {
     variant: "inline",
     color: "primary",
-    isDisabled: !1
+    isDisabled: !1,
+    size: "inherit"
   }
 });
 export {

package/dist/esm/components/menu/parts/MenuItem.js

@@ -1,27 +1,27 @@
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { MenuItem as y } from "react-aria-components";
-import { twMerge as i } from "tailwind-merge";
+import { uyMerge as y } from "@payfit/unity-themes";
+import { MenuItem as i } from "react-aria-components";
 function l({
   prefix: e,
-  children: t,
-  href: u,
+  children: u,
+  href: t,
   onAction: r,
   className: n,
   ...a
 }) {
   return /* @__PURE__ */ s(
-    y,
+    i,
     {
-      href: u,
+      href: t,
       onAction: r,
-      className: i(
+      className: y(
         "uy:cursor-pointer uy:flex uy:p-100 uy:items-start uy:gap-100 uy:rounded-25 uy:typography-body uy:text-content-neutral uy:hover:bg-surface-neutral-hover uy:data-[pressed]:bg-surface-neutral-pressed uy:focus-visible:outline-utility-focus-ring uy:active:bg-surface-neutral-active",
         n
       ),
       ...a,
       children: [
         /* @__PURE__ */ o("div", { className: "uy:text-content-neutral-low", children: e || null }),
-        t
+        u
       ]
     }
   );

package/dist/esm/components/multi-select/parts/MultiSelectButton.js

@@ -1,15 +1,15 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { memo as j, forwardRef as E, useContext as k, useMemo as A } from "react";
 import { useSelectContext as D, useStoreState as K, Select as $ } from "@ariakit/react";
-import { useId as L } from "react-aria";
-import { useIntl as R } from "react-intl";
-import { tv as U } from "tailwind-variants";
-import { Badge as W } from "../../badge/Badge.js";
-import { CircularIconButton as q } from "../../icon-button/CircularIconButton.js";
+import { uyTv as L } from "@payfit/unity-themes";
+import { useId as R } from "react-aria";
+import { useIntl as T } from "react-intl";
+import { Badge as U } from "../../badge/Badge.js";
+import { CircularIconButton as W } from "../../icon-button/CircularIconButton.js";
 import { Icon as p } from "../../icon/Icon.js";
-import { Spinner as F } from "../../spinner/Spinner.js";
-import { MultiSelectContext as G } from "../Multiselect.context.js";
-const H = U({
+import { Spinner as q } from "../../spinner/Spinner.js";
+import { MultiSelectContext as F } from "../Multiselect.context.js";
+const G = L({
   slots: {
     base: "uy:h-500 uy:flex uy:items-center uy:justify-between uy:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
     inputValue: "uy:flex-1 uy:typography-body uy:text-content-form-enabled uy:text-left uy:line-clamp-1",
@@ -61,7 +61,7 @@ const H = U({
     }
   ]
 });
-function J({
+function H({
   isDisabled: r,
   isReadOnly: t,
   isLoading: d,
@@ -72,7 +72,7 @@ function J({
   onClearButtonPress: i,
   ...w
 }, h) {
-  const f = L(), s = R(), S = D(), M = K(S, "open"), y = k(G), a = y.maxVisibleItems ?? 0, l = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(g), { base: v, inputValue: I, state: C, suffix: V } = H({
+  const f = R(), s = T(), S = D(), M = K(S, "open"), y = k(F), a = y.maxVisibleItems ?? 0, l = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(g), { base: v, inputValue: I, state: C, suffix: V } = G({
     isDisabled: !!r,
     isReadOnly: !!t,
     isInvalid: !!n,
@@ -100,7 +100,7 @@ function J({
         /* @__PURE__ */ e("span", { id: `${f}-select-button-label`, className: I(), children: l.size > 0 ? B : u }),
         /* @__PURE__ */ c("div", { className: C(), children: [
           d && /* @__PURE__ */ e(
-            F,
+            q,
             {
               color: "inherit",
               size: "small",
@@ -121,12 +121,12 @@ function J({
               })
             }
           ),
-          b > 0 && /* @__PURE__ */ c(W, { variant: "numeric", children: [
+          b > 0 && /* @__PURE__ */ c(U, { variant: "numeric", children: [
             "+",
             b
           ] }),
           N && /* @__PURE__ */ e(
-            q,
+            W,
             {
               title: s.formatMessage({
                 id: "unity:component:common:clear:title",
@@ -153,7 +153,7 @@ function J({
     }
   );
 }
-const x = j(E(J));
+const x = j(E(H));
 x.displayName = "MultiselectButton";
 const ne = x;
 export {

package/dist/esm/components/multi-select/parts/MultiSelectOptGroup.js

@@ -1,7 +1,7 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { useContext as h } from "react";
 import { ComboboxGroup as x, ComboboxGroupLabel as C, SelectGroup as G, SelectGroupLabel as S } from "@ariakit/react";
-import { tv as N } from "tailwind-variants";
+import { uyTv as N } from "@payfit/unity-themes";
 import { MultiSelectContext as g } from "../Multiselect.context.js";
 const M = N({
   slots: {
@@ -14,15 +14,15 @@ function O(e) {
   return "items" in e && Array.isArray(e.items) && typeof e.children == "function";
 }
 function j(e) {
-  const i = h(g), { base: c, label: r, separator: o } = M(), { label: n, withSeparator: a, className: m, ...y } = e, d = (b, p) => b.map((f) => p(f)), l = O(e) ? d(e.items, e.children) : e.children, s = {
+  const i = h(g), { base: c, label: r, separator: o } = M(), { label: n, withSeparator: a, className: m, ...y } = e, d = (b, p) => b.map((f) => p(f)), l = O(e) ? d(e.items, e.children) : e.children, u = {
     className: c({ className: m }),
     ...y
   };
-  return i.isSearchable ? /* @__PURE__ */ u(x, { ...s, children: [
+  return i.isSearchable ? /* @__PURE__ */ s(x, { ...u, children: [
     /* @__PURE__ */ t(C, { className: r(), children: n }),
     l,
     a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })
-  ] }) : /* @__PURE__ */ u(G, { ...s, children: [
+  ] }) : /* @__PURE__ */ s(G, { ...u, children: [
     /* @__PURE__ */ t(S, { className: r(), children: n }),
     l,
     a && /* @__PURE__ */ t("hr", { className: o(), "aria-hidden": !0, role: "presentation" })

package/dist/esm/components/multi-select/parts/MultiSelectOption.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { forwardRef as p, useContext as b, createElement as v } from "react";
 import { SelectItem as x, ComboboxItem as h, SelectItemCheck as S } from "@ariakit/react";
-import { tv as g } from "tailwind-variants";
+import { uyTv as g } from "@payfit/unity-themes";
 import C from "../../../hooks/use-id.js";
 import { CheckboxIndicator as k } from "../../checkbox/parts/CheckboxIndicator.js";
 import { MultiSelectContext as I } from "../Multiselect.context.js";
@@ -81,7 +81,7 @@ function r({
   );
 }
 r.displayName = "MultiSelectOption";
-const R = p(r);
+const H = p(r);
 export {
-  R as MultiSelectOption
+  H as MultiSelectOption
 };

package/dist/esm/components/multi-select/parts/MultiSelectPopover.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as r, Fragment as m } from "react/jsx-runtime";
 import { memo as b, useContext as f } from "react";
 import { SelectPopover as h, Combobox as v, ComboboxList as x } from "@ariakit/react";
-import { tv as i } from "tailwind-variants";
+import { uyTv as i } from "@payfit/unity-themes";
 import { Icon as g } from "../../icon/Icon.js";
 import { MultiSelectContext as w } from "../Multiselect.context.js";
 const S = i({