@payfit/unity-components 0.0.0-alpha.7 → 0.0.0-alpha.9

package/dist/esm/components/icon-button/CircularIconButton.mjs

@@ -1,33 +1,66 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Button as d } from "react-aria-components";
-import { tv as y } from "tailwind-variants";
-import b from "../../hooks/use-id.mjs";
-import { Icon as f } from "../icon/Icon.mjs";
-import { Spinner as m } from "../spinner/Spinner.mjs";
-import p from "../tooltip/Tooltip.mjs";
-const h = y({
-  base: "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled"
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { Button as m, Pressable as p } from "react-aria-components";
+import { tv as v } from "tailwind-variants";
+import h from "../../hooks/use-id.mjs";
+import { Icon as g } from "../icon/Icon.mjs";
+import { Spinner as x } from "../spinner/Spinner.mjs";
+import { Tooltip as w } from "../tooltip/Tooltip.mjs";
+const I = v({
+  base: "uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled",
+  variants: {
+    size: {
+      default: "uy-w-300 uy-h-300",
+      large: "uy-w-400 uy-h-400"
+    },
+    color: {
+      "content.neutral": "uy-text-content-neutral",
+      "content.neutral.low": "uy-text-content-neutral-low"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    color: "content.neutral"
+  }
 });
-function v(i) {
-  const s = b(), { onPress: n, icon: u, isLoading: t, title: o, isDisabled: l, ...a } = i, r = `icon-button-label-${s}`;
-  return /* @__PURE__ */ e(p, { title: o, children: /* @__PURE__ */ c(
-    d,
+function z(l) {
+  const i = h(), {
+    onPress: a,
+    icon: s,
+    color: u,
+    size: o,
+    isLoading: t,
+    title: r,
+    isDisabled: c,
+    asElement: d = "default",
+    ...y
+  } = l, n = `icon-button-label-${i}`, b = I({ color: u, size: o });
+  return /* @__PURE__ */ e(w, { title: r, children: /* @__PURE__ */ e(
+    d === "button" ? m : p,
     {
-      ...a,
-      className: h(),
-      onPress: n,
-      isDisabled: l || t,
-      "aria-labelledby": r,
+      "data-dd-privacy": "allow",
+      ...y,
+      onPress: a,
+      isDisabled: c || t,
+      "aria-labelledby": n,
       "aria-busy": t,
-      children: [
-        t ? /* @__PURE__ */ e(m, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(f, { src: u, color: "inherit", role: "presentation" }),
-        /* @__PURE__ */ e("span", { id: r, className: "uy-sr-only", children: o })
-      ]
+      className: b,
+      children: /* @__PURE__ */ f("div", { role: "button", children: [
+        t ? /* @__PURE__ */ e(x, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+          g,
+          {
+            src: s,
+            size: o === "large" ? 24 : 20,
+            color: "inherit",
+            role: "presentation"
+          }
+        ),
+        /* @__PURE__ */ e("span", { id: n, className: "uy-sr-only", children: r })
+      ] })
     }
   ) });
 }
-v.displayName = "CircularIconButton";
+z.displayName = "CircularIconButton";
 export {
-  v as CircularIconButton,
-  h as circularIconButton
+  z as CircularIconButton,
+  I as circularIconButton
 };

package/dist/esm/components/icon-button/IconButton.mjs

@@ -1,9 +1,9 @@
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { Button as p } from "react-aria-components";
-import b from "../../hooks/use-id.mjs";
-import { Icon as y } from "../icon/Icon.mjs";
+import { jsx as i, jsxs as p } from "react/jsx-runtime";
+import { Button as f } from "react-aria-components";
+import y from "../../hooks/use-id.mjs";
+import { Icon as b } from "../icon/Icon.mjs";
 import { Spinner as B } from "../spinner/Spinner.mjs";
-import h from "../tooltip/Tooltip.mjs";
+import { Tooltip as h } from "../tooltip/Tooltip.mjs";
 import { iconButtonPrimary as I, iconButtonSecondary as N, iconButtonGhost as x } from "./IconButton.variants.mjs";
 const j = ({
   variant: o,
@@ -27,27 +27,28 @@ const j = ({
   isLoading: t
 });
 function C(o) {
-  const n = b(), { button: t, icon: r } = j(o), { onClick: s, icon: m, isLoading: l, label: i, isDisabled: a, iconRole: u, ...d } = o, c = `icon-button-label-${n}`;
-  return /* @__PURE__ */ e(h, { title: i, children: /* @__PURE__ */ f(
-    p,
+  const n = y(), { button: t, icon: r } = j(o), { onClick: s, icon: a, isLoading: l, label: e, isDisabled: m, iconRole: u, ...d } = o, c = `icon-button-label-${n}`;
+  return /* @__PURE__ */ i(h, { title: e, children: /* @__PURE__ */ p(
+    f,
     {
+      "data-dd-privacy": "allow",
+      ...d,
       className: t({ class: o.className }),
       onPress: s,
-      isDisabled: a || l,
-      "aria-label": i,
-      ...d,
+      isDisabled: m || l,
+      "aria-label": e,
       children: [
-        l ? /* @__PURE__ */ e(B, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
-          y,
+        l ? /* @__PURE__ */ i(B, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ i(
+          b,
           {
             role: u,
-            src: m,
+            src: a,
             className: r(),
             "aria-labelledby": c,
             color: "inherit"
           }
         ),
-        /* @__PURE__ */ e("span", { id: c, className: "uy-sr-only", children: i })
+        /* @__PURE__ */ i("span", { id: c, className: "uy-sr-only", children: e })
       ]
     }
   ) });

package/dist/esm/components/icon-button/IconButton.variants.mjs

@@ -107,7 +107,7 @@ const t = e({
       }
     }
   ]
-}), a = e({
+}), o = e({
   extend: t,
   variants: {
     variant: {
@@ -124,7 +124,7 @@ const t = e({
       isDisabled: !1,
       isLoading: !1,
       class: {
-        button: "uy-border uy-border-border-primary hover:uy-border-border-primary-hover active:uy-border-border-primary-active data-[pressed]:uy-border-border-primary-pressed",
+        button: "uy-border uy-border-solid uy-border-border-primary hover:uy-border-border-primary-hover active:uy-border-border-primary-active data-[pressed]:uy-border-border-primary-pressed",
         icon: "uy-text-content-primary group-hover:uy-text-content-primary-hover active:uy-text-content-primary-active data-[pressed]:uy-text-content-primary-pressed focus-visible:uy-text-content-primary-focus"
       }
     },
@@ -133,7 +133,7 @@ const t = e({
       isLoading: !0,
       isDisabled: !1,
       class: {
-        button: "uy-border uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",
+        button: "uy-border uy-border-solid uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",
         icon: "uy-text-content-neutral-disabled"
       }
     },
@@ -142,7 +142,7 @@ const t = e({
       isLoading: !1,
       isDisabled: !0,
       class: {
-        button: "uy-border uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",
+        button: "uy-border uy-border-solid uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",
         icon: "uy-text-content-neutral-disabled"
       }
     },
@@ -151,7 +151,7 @@ const t = e({
       isDisabled: !1,
       isLoading: !1,
       class: {
-        button: "uy-border uy-border-border-inverted hover:uy-border-border-inverted-hover data-[pressed]:uy-border-border-inverted-pressed active:uy-border-border-inverted-active focus-visible:uy-border-border-inverted-focus",
+        button: "uy-border uy-border-solid uy-border-border-inverted hover:uy-border-border-inverted-hover data-[pressed]:uy-border-border-inverted-pressed active:uy-border-border-inverted-active focus-visible:uy-border-border-inverted-focus",
         icon: "uy-text-content-inverted group-hover:uy-text-content-inverted-hover data-[pressed]:uy-text-content-inverted-pressed active:uy-text-content-inverted-active focus-visible:uy-text-content-inverted-focus"
       }
     },
@@ -160,12 +160,12 @@ const t = e({
       isLoading: !1,
       isDisabled: !0,
       class: {
-        button: "uy-border uy-border-border-inverted-disabled focus-visible:uy-border-border-primary-focus",
+        button: "uy-border uy-border-solid uy-border-border-inverted-disabled focus-visible:uy-border-border-primary-focus",
         icon: "uy-text-content-inverted-disabled"
       }
     }
   ]
-}), o = e({
+}), a = e({
   extend: t,
   variants: {
     variant: {
@@ -236,7 +236,7 @@ const t = e({
   ]
 });
 export {
-  o as iconButtonGhost,
+  a as iconButtonGhost,
   n as iconButtonPrimary,
-  a as iconButtonSecondary
+  o as iconButtonSecondary
 };

package/dist/esm/components/input/Input.mjs

@@ -1,6 +1,6 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { Input as w } from "react-aria-components";
+import { forwardRef as v } from "react";
+import { Input as h } from "react-aria-components";
 import { useIntl as I } from "react-intl";
 import { tv as N } from "tailwind-variants";
 import { CircularIconButton as W } from "../icon-button/CircularIconButton.mjs";
@@ -8,12 +8,12 @@ import { Icon as M } from "../icon/Icon.mjs";
 import { Spinner as O } from "../spinner/Spinner.mjs";
 const S = N({
   slots: {
-    base: "uy-flex uy-h-500 uy-border uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",
-    prefix: "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-rounded-l-100 active:uy-border-border-form-active",
-    inputWrapper: "uy-flex uy-gap-50 uy-flex-grow uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100",
-    input: "uy-flex-grow uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest",
-    state: "uy-flex uy-gap-50 uy-items-center",
-    suffix: "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-rounded-r-100 active:uy-border-border-form-active"
+    base: "uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",
+    prefix: "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-border-solid uy-rounded-l-100 active:uy-border-border-form-active",
+    inputWrapper: "uy-flex uy-gap-50 uy-flex-grow uy-flex-nowrap uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100 uy-max-w-full uy-justify-between",
+    input: "uy-w-full uy-flex-1 uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-min-w-0 uy-max-w-full",
+    state: "uy-flex uy-gap-50 uy-items-center uy-shrink-0",
+    suffix: "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-border-solid uy-rounded-r-100 active:uy-border-border-form-active"
   },
   variants: {
     isInvalid: {
@@ -60,12 +60,12 @@ const S = N({
       }
     }
   ]
-}), j = h(
+}), j = v(
   ({
     type: s = "text",
     prefix: n,
-    suffix: f,
-    isInvalid: i,
+    suffix: i,
+    isInvalid: f,
     isLoading: e,
     isDisabled: o,
     isReadOnly: u,
@@ -77,19 +77,20 @@ const S = N({
       prefix: m,
       inputWrapper: c,
       input: p,
-      state: g,
-      suffix: x
+      state: x,
+      suffix: g
     } = S({
-      isInvalid: !!i,
+      isInvalid: !!f,
       isReadOnly: !!u,
       isDisabled: !!o
-    }), v = l.value && !e && !u && !o;
+    }), w = l.value && !e && !u && !o;
     return /* @__PURE__ */ d("div", { className: b(), children: [
       n ? /* @__PURE__ */ r("span", { className: m(), children: n }) : null,
       /* @__PURE__ */ d("div", { className: c(), children: [
         /* @__PURE__ */ r(
-          w,
+          h,
           {
+            "data-dd-privacy": "mask",
             ...l,
             ref: y,
             type: s,
@@ -99,19 +100,19 @@ const S = N({
             disabled: o
           }
         ),
-        /* @__PURE__ */ d("div", { className: g(), children: [
+        /* @__PURE__ */ d("div", { className: x(), children: [
           e && /* @__PURE__ */ r(
             O,
             {
               color: "inherit",
               size: "small",
               label: a.formatMessage({
-                id: "unity:component:form-field:form-input:spinner:label",
-                defaultMessage: "Loading"
+                id: "unity:component:common:loading:label",
+                defaultMessage: "Loading..."
               })
             }
           ),
-          i && /* @__PURE__ */ r(
+          f && /* @__PURE__ */ r(
             M,
             {
               src: "WarningCircleOutlined",
@@ -122,7 +123,7 @@ const S = N({
               })
             }
           ),
-          v && /* @__PURE__ */ r(
+          w && /* @__PURE__ */ r(
             W,
             {
               title: a.formatMessage({
@@ -138,7 +139,7 @@ const S = N({
           )
         ] })
       ] }),
-      f ? /* @__PURE__ */ r("span", { className: x(), children: f }) : null
+      i ? /* @__PURE__ */ r("span", { className: g(), children: i }) : null
     ] });
   }
 );

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

@@ -1,5 +1,5 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
+import { forwardRef as m } from "react";
 import { mergeProps as u } from "react-aria";
 import { useSlottedContext as b, InputContext as g, Label as f } from "react-aria-components";
 import { tv as N } from "tailwind-variants";
@@ -22,7 +22,7 @@ const h = N({
   defaultVariants: {
     variant: "strong"
   }
-}), q = c(
+}), q = m(
   ({ children: n, ...a }, l) => {
     const e = b(g), i = u(
       { isRequired: e == null ? void 0 : e["aria-required"] },
@@ -30,21 +30,22 @@ const h = N({
     ), {
       isRequired: r = !1,
       requiredVariant: s = "required",
-      ...p
-    } = i, { base: y, asterisk: d, optionalTag: m } = h();
+      ...d
+    } = i, { base: p, asterisk: y, optionalTag: c } = h();
     return /* @__PURE__ */ o(
       f,
       {
-        ...p,
+        "data-dd-privacy": "allow",
+        ...d,
         ref: l,
-        className: y({ className: a.className }),
+        className: p({ className: a.className }),
         children: [
           n,
-          s === "required" && r && /* @__PURE__ */ o("span", { className: d(), children: [
+          s === "required" && r && /* @__PURE__ */ o("span", { className: y(), children: [
             "*",
             /* @__PURE__ */ t("span", { className: "uy-sr-only", children: "required" })
           ] }),
-          s === "optional" && !r && /* @__PURE__ */ t("span", { className: m({ className: a.className }), children: "(optional)" })
+          s === "optional" && !r && /* @__PURE__ */ t("span", { className: c({ className: a.className }), children: "(optional)" })
         ]
       }
     );

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

@@ -37,7 +37,7 @@ export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
 /**
  * Links allow users to navigate to different pages or sections.
  */
-declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "style" | "className"> & {
+declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "className" | "style"> & {
     /**
      * The URL the link navigates to.
      */

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

@@ -1,38 +1,39 @@
 import { jsxs as f, jsx as k } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { IconSprite as g } from "@payfit/unity-icons";
-import { Link as v } from "react-aria-components";
-import { useRouter as x } from "../../providers/router/RouterProvider.mjs";
-import { link as w } from "./Link.variants.mjs";
+import { IconSprite as v } from "@payfit/unity-icons";
+import { Link as g } from "react-aria-components";
+import { useRouter as w } from "../../providers/router/RouterProvider.mjs";
+import { link as x } from "./Link.variants.mjs";
 import { isExternalUrl as L } from "./utils.mjs";
 const A = y(
   ({
     href: o,
-    children: s,
-    variant: m = "inline",
-    color: a = "primary",
+    children: a,
+    variant: s = "inline",
+    color: c = "primary",
     isDisabled: n = !1,
-    isCurrent: c = void 0,
+    isCurrent: m = void 0,
     isExternal: p,
     maxCharactersTruncation: t,
     ...r
-  }, u) => {
-    const l = x(), e = p ?? L(o), i = !e && l ? l.isActive(o.toString()) : c, d = w({
-      variant: m,
-      color: a,
+  }, d) => {
+    const l = w(), e = p ?? L(o), i = !e && l ? l.isActive(o.toString()) : m, u = x({
+      variant: s,
+      color: c,
       isDisabled: n,
       isTruncated: !!t
     });
     return /* @__PURE__ */ f(
-      v,
+      g,
       {
+        "data-dd-privacy": "allow",
         ...r,
         href: o,
-        ref: u,
+        ref: d,
         style: !!t ? {
           "--uy-link-max-w": `${t}ch`
         } : {},
-        className: d,
+        className: u,
         isDisabled: n,
         target: e ? "_blank" : r.target,
         rel: e && !r.rel ? "noopener noreferrer" : r.rel,
@@ -41,9 +42,9 @@ const A = y(
           "aria-current": i ? "page" : void 0
         },
         children: [
-          s,
+          a,
           e && /* @__PURE__ */ k(
-            g,
+            v,
             {
               src: "ArrowSquareOutOutlined",
               color: "currentColor",

package/dist/esm/components/menu/parts/MenuContent.mjs

@@ -1,5 +1,5 @@
 import { jsx as u } from "react/jsx-runtime";
-import { Popover as n, Menu as s } from "react-aria-components";
+import { Popover as n, Menu as a } from "react-aria-components";
 function y({
   children: r,
   placement: o,
@@ -10,8 +10,9 @@ function y({
     n,
     {
       placement: o,
-      className: "uy-flex uy-flex-col uy-justify-end uy-items-start uy-p-100 uy-rounded-100 uy-border uy-border-border-neutral uy-bg-surface-neutral uy-shadow-floating",
-      children: /* @__PURE__ */ u(s, { autoFocus: "first", className: `uy-min-w-[320px] ${t}`, children: r })
+      className: "uy-flex uy-flex-col uy-justify-end uy-items-start uy-p-100 uy-rounded-100 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-shadow-floating",
+      "data-dd-privacy": "allow",
+      children: /* @__PURE__ */ u(a, { autoFocus: "first", className: `uy-min-w-[320px] ${t}`, children: r })
     }
   );
 }

package/dist/esm/components/multi-select/MultiSelect.d.mts

@@ -0,0 +1,62 @@
+import { MultiSelectComponent, MultiSelectProps } from './Multiselect.types.mjs';
+declare const MultiSelectComponent: <TItem extends Record<string | number, unknown>, TItemKey extends keyof TItem, TKeyType extends TItem[TItemKey] & (string | number)>(props: MultiSelectProps<TItem, TItemKey, TKeyType>, ref: React.ForwardedRef<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The MultiSelect component allows users to select multiple items from a dropdown list.
+ * The component provides two different APIs:
+ * 1. Static API - For simple cases where options are defined as direct children and use primitive values as keys (strings or numbers)
+ * 2. Dynamic API - For data-driven cases where options are generated from a dynamic collection with typed objects
+ * @example
+ * ```tsx
+ * import { MultiSelect, MultiSelectOption, MultiSelectOptGroup } from '@payfit/unity-components'
+ *
+ * // Static API - Options defined as direct children
+ * <MultiSelect
+ *   placeholder="Select fruits..."
+ *   onChange={(selected) => console.log(selected)}
+ * >
+ *   <MultiSelectOptGroup label="Citrus" withSeparator>
+ *     <MultiSelectOption value="orange">Orange</MultiSelectOption>
+ *     <MultiSelectOption value="lemon">Lemon</MultiSelectOption>
+ *   </MultiSelectOptGroup>
+ *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ * </MultiSelect>
+ *
+ * // Dynamic API - Options generated from a collection with typed objects
+ * interface Fruit {
+ *   id: string;
+ *   name: string;
+ *   category: string;
+ * }
+ *
+ * const fruits: Set<Fruit> = new Set([
+ *   { id: 'apple-1', name: 'Apple', category: 'Core' },
+ *   { id: 'orange-1', name: 'Orange', category: 'Citrus' }
+ * ]);
+ *
+ * <MultiSelect
+ *   items={fruits}
+ *   placeholder="Select fruits..."
+ *   value={new Set(['apple-1'])}
+ *   getItemValue={item => item.id}
+ *   renderValue={(items) =>
+ *     Array.from(items)
+ *       .map(item => item.name)
+ *       .join(', ')
+ *   }
+ * >
+ *   {(item) => (
+ *     <MultiSelectOption value={item.id}>
+ *       {item.name}
+ *     </MultiSelectOption>
+ *   )}
+ * </MultiSelect>
+ * ```
+ * @component
+ * @template TItem - The type of items in the collection. When using the dynamic API, it must be a Record or an object. For the static API, it defaults to a string or number.
+ * @template TItemKey - The key name within TItem used as the selection value (must be a key of TItem). Applies only to the dynamic API.
+ * @template TKeyType - The type of the property at TItem[TItemKey] (must be string or number). Applies only to the dynamic API.
+ * @remarks
+ * [API & Docs](https://unity-components.payfit.io/?path=/docs/inputs-multiselect--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
+ */
+export declare const MultiSelect: MultiSelectComponent;
+export {};