@payfit/unity-components 0.0.0-alpha.12 → 0.0.0-alpha.13

package/dist/esm/components/table/parts/TableCell.js

@@ -1,10 +1,10 @@
-import { jsx as x } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
+import { jsx as h } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
 import { tv as g } from "tailwind-variants";
 import { useTableContext as v } from "../Table.context.js";
 const C = g({
   base: [
-    "uy-px-200 uy-py-150 uy-w-max uy-text-content-neutral uy-typography-body",
+    "uy-px-200 uy-py-150 uy-text-content-neutral uy-typography-body",
     "focus-visible:uy-outline-2 focus-visible:-uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"
   ],
   variants: {
@@ -14,7 +14,7 @@ const C = g({
       right: "uy-text-right"
     }
   }
-}), T = h(
+}), T = x(
   ({
     children: i,
     colIndex: a = 0,
@@ -29,7 +29,7 @@ const C = g({
     const { keyboardNavigation: c } = v(), { isCellFocused: f, handleCellKeyDown: b, handleCellFocus: d } = c, m = f(o, a), p = (e) => {
       e.key !== "Tab" && (b(e), t == null || t(e));
     };
-    return /* @__PURE__ */ x(
+    return /* @__PURE__ */ h(
       r ? "th" : "td",
       {
         ref: y,

package/dist/esm/components/tabs/parts/NavigationButton.js

@@ -11,14 +11,14 @@ const s = n({
   variants: {
     direction: {
       left: {
-        base: "uy-top-0 uy-left-0 uy-z-10 uy-bg-gradient-to-r uy-from-surface-inverted/0 uy-from-surface-inverted/100 uy-pl-50 uy-pr-200"
+        base: "uy-top-0 uy-left-0 uy-z-10 uy-bg-gradient-to-r uy-from-surface-inverted/100 uy-to-surface-inverted/0 uy-pl-50 uy-pr-200"
       },
       right: {
-        base: "uy-right-0 uy-top-0 uy-z-10 uy-bg-gradient-to-l uy-from-surface-inverted/100 uy-from-surface-inverted/0 uy-pl-200 uy-pr-50"
+        base: "uy-right-0 uy-top-0 uy-z-10 uy-bg-gradient-to-l uy-from-surface-inverted/100 uy-to-surface-inverted/0 uy-pl-200 uy-pr-50"
       }
     }
   }
-}), m = ({ direction: t, onPress: u }) => {
+}), v = ({ direction: t, onPress: u }) => {
   const { base: o, button: r, icon: l } = s({ direction: t });
   return /* @__PURE__ */ e("div", { className: o(), children: /* @__PURE__ */ e(
     i,
@@ -39,5 +39,5 @@ const s = n({
   ) });
 };
 export {
-  m as NavigationButton
+  v as NavigationButton
 };

package/dist/esm/components/tabs/parts/TabList.js

@@ -1,47 +1,56 @@
-import { jsxs as N, jsx as c } from "react/jsx-runtime";
-import { forwardRef as T, useRef as w, useState as h } from "react";
-import { TabList as m } from "react-aria-components";
-import { useTabsContext as A } from "../Tabs.context.js";
-import { tabsVariant as B } from "../Tabs.variant.js";
-import { NavigationButton as L } from "./NavigationButton.js";
-const C = T(
-  ({ children: f }, b) => {
-    const r = w(null), [g, y] = h(!1), [p, v] = h(!0), { variant: S, scrollable: u } = A(), { tabList: d } = B({ variant: S, scrollable: u }), R = (t) => {
-      const { scrollLeft: o, scrollWidth: s, clientWidth: e } = t.currentTarget;
-      y(o > 0), v(o + e < s);
-    }, W = () => {
-      var e;
-      const t = (e = r.current) == null ? void 0 : e.querySelectorAll("div[role=tab]");
+import { jsxs as w, jsx as c } from "react/jsx-runtime";
+import { forwardRef as A, useRef as C, useState as L, useCallback as B } from "react";
+import { TabList as y } from "react-aria-components";
+import { useResizeObserver as j } from "usehooks-ts";
+import { useTabsContext as q } from "../Tabs.context.js";
+import { tabsVariant as z } from "../Tabs.variant.js";
+import { NavigationButton as p } from "./NavigationButton.js";
+const P = A(
+  ({ children: f }, u) => {
+    const r = C(null), [g, S] = L(!1), [v, R] = L(!1), { variant: W, scrollable: b } = q(), { tabList: d } = z({ variant: W, scrollable: b }), m = B(() => {
+      if (!r.current) return;
+      const { scrollLeft: t, scrollWidth: s, clientWidth: e } = r.current;
+      S(t > 0), R(t + e < s);
+    }, []);
+    j({
+      ref: r,
+      onResize: m
+    });
+    const x = (t) => {
+      m();
+    }, N = () => {
+      var l;
+      const t = (l = r.current) == null ? void 0 : l.querySelectorAll("[role=tab]");
       if (!r.current || !t) return 0;
-      const { scrollLeft: o } = r.current, s = Array.from(t);
-      for (let l = s.length - 1; l >= 0; l--) {
-        const n = s[l];
-        if (n.offsetLeft < o)
+      const { scrollLeft: s } = r.current, e = Array.from(t);
+      for (let o = e.length - 1; o >= 0; o--) {
+        const n = e[o];
+        if (n.offsetLeft < s)
           return -n.offsetWidth;
       }
       return 0;
-    }, x = () => {
+    }, T = () => {
       var n;
-      const t = (n = r.current) == null ? void 0 : n.querySelectorAll("div[role=tab]");
+      const t = (n = r.current) == null ? void 0 : n.querySelectorAll("[role=tab]");
       if (!r.current || !t) return 0;
-      const { scrollLeft: o, clientWidth: s } = r.current, e = Array.from(t), l = o + s;
-      for (let a = 0; a < e.length - 1; a++) {
-        const i = e[a];
-        if (i.offsetLeft + i.offsetWidth > l)
+      const { scrollLeft: s, clientWidth: e } = r.current, l = Array.from(t), o = s + e;
+      for (let a = 0; a < l.length - 1; a++) {
+        const i = l[a], h = i.offsetLeft + i.offsetWidth;
+        if (h > o || h < o)
           return i.offsetWidth;
       }
       return 0;
     };
-    return u ? /* @__PURE__ */ N("div", { className: "uy-relative", children: [
+    return b ? /* @__PURE__ */ w("div", { className: "uy-relative", children: [
       g && /* @__PURE__ */ c(
-        L,
+        p,
         {
           direction: "left",
           onPress: () => {
             var t;
             (t = r.current) == null || t.scrollBy({
               behavior: "smooth",
-              left: W()
+              left: N()
             });
           }
         }
@@ -52,27 +61,27 @@ const C = T(
           ref: r,
           "data-testid": "scrollable-tab-list",
           className: "uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled",
-          onScroll: R,
-          children: /* @__PURE__ */ c(m, { ref: b, className: d(), children: f })
+          onScroll: x,
+          children: /* @__PURE__ */ c(y, { ref: u, className: d(), children: f })
         }
       ),
-      p && /* @__PURE__ */ c(
-        L,
+      v && /* @__PURE__ */ c(
+        p,
         {
           direction: "right",
           onPress: () => {
             var t;
             (t = r.current) == null || t.scrollBy({
               behavior: "smooth",
-              left: x()
+              left: T()
             });
           }
         }
       )
-    ] }) : /* @__PURE__ */ c(m, { ref: b, className: d(), children: f });
+    ] }) : /* @__PURE__ */ c(y, { ref: u, className: d(), children: f });
   }
 );
-C.displayName = "TabList";
+P.displayName = "TabList";
 export {
-  C as TabList
+  P as TabList
 };

package/dist/esm/components/text/Text.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
 import { VariantProps } from 'tailwind-variants';
 import { text } from './Text.variants.js';
-type ValidTextElements = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
+export type ValidTextElements = 'p' | 'span' | 'div' | 'abbr' | 'dfn' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
 export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
     /**
      * The HTML element to render the text as. Defaults to a recommended element based on the variant.

package/dist/esm/components/text/Text.js

@@ -19,27 +19,28 @@ const y = {
   bodyLargeStrong: "strong",
   action: "span",
   actionLarge: "span",
-  actionSmall: "span"
+  actionSmall: "span",
+  actionInfo: "span"
 }, g = c(
   ({
     children: e,
     variant: o,
-    color: s,
+    color: n,
     isTruncated: a,
     lineClamp: t,
-    asElement: n,
+    asElement: s,
     className: r,
     ...l
   }, i) => {
     const m = h({
       variant: o,
-      color: s,
+      color: n,
       isTruncated: a,
       isLineClamped: t !== void 0,
       className: r
     }), p = y[o ?? "inherit"];
     return /* @__PURE__ */ d(
-      n ?? p,
+      s ?? p,
       {
         "data-dd-privacy": "mask",
         ...l,

package/dist/esm/components/text/Text.variants.d.ts

@@ -18,6 +18,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -114,6 +115,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -210,6 +212,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -306,6 +309,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -402,6 +406,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -498,6 +503,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -594,6 +600,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;

package/dist/esm/components/text/Text.variants.js

@@ -20,7 +20,8 @@ const n = t({
       bodyLargeStrong: "uy-typography-body-large-strong",
       action: "uy-typography-action",
       actionLarge: "uy-typography-body-large",
-      actionSmall: "uy-typography-body-small"
+      actionSmall: "uy-typography-body-small",
+      actionInfo: "uy-typography-action uy-underline uy-decoration-dotted uy-decoration-[10%] uy-underline-offset-[25%]"
     },
     color: {
       inherit: "uy-text-inherit",

package/dist/esm/components/tooltip/Tooltip.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from 'react';
-interface TooltipProps {
+export interface TooltipProps {
+    /** The content displayed in the tooltip. */
     title: string;
+    /** The trigger element that displays the tooltip. */
     children: ReactElement;
 }
-declare function Tooltip({ title, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-export { Tooltip };
+export declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/esm/components/tooltip/Tooltip.js

@@ -1,21 +1,22 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { TooltipTrigger as r, Tooltip as y, Button as u } from "react-aria-components";
-import { Button as a } from "../button/Button.js";
-const i = (t) => t.type === a || t.type === u;
-function d({ title: t, children: o }) {
-  return /* @__PURE__ */ l(r, { delay: 500, closeDelay: 1500, children: [
-    o,
+import { forwardRef as y } from "react";
+import { TooltipTrigger as a, Tooltip as p, Button as u } from "react-aria-components";
+import { Button as i } from "../button/Button.js";
+const s = (o) => o.type === i || o.type === u, f = y(
+  ({ title: o, children: t }, r) => /* @__PURE__ */ l(a, { delay: 500, closeDelay: 1500, children: [
+    t,
     /* @__PURE__ */ e(
-      y,
+      p,
       {
+        ref: r,
         "data-dd-privacy": "allow",
-        offset: i(o) ? 4 : 8,
+        offset: s(t) ? 4 : 8,
         className: "uy-inline-flex uy-rounded-50 uy-pl-100 uy-pr-100 uy-pt-50 uy-pb-50 uy-bg-grayscale-L12 uy-max-w-[300px]",
-        children: /* @__PURE__ */ e("p", { className: "uy-typography-body-small uy-text-content-inverted uy-overflow-hidden uy-text-ellipsis uy-line-clamp-3", children: t })
+        children: /* @__PURE__ */ e("p", { className: "uy-typography-body-small uy-text-content-inverted uy-overflow-hidden uy-text-ellipsis uy-line-clamp-3", children: o })
       }
     )
-  ] });
-}
+  ] })
+);
 export {
-  d as Tooltip
+  f as Tooltip
 };

package/dist/esm/index.d.ts

@@ -60,6 +60,7 @@ export * from './components/grid/Grid.variants.js';
 export * from './components/grid/GridItem.js';
 export * from './components/icon/Icon.js';
 export * from './components/icon-button/IconButton.js';
+export * from './components/definition-tooltip/DefinitionTooltip.js';
 export * from './components/input/Input.js';
 export * from './components/label/Label.js';
 export * from './components/link/Link.js';
@@ -83,6 +84,8 @@ export * from './components/pagination/Pagination.js';
 export * from './components/payfit-brand/PayFitBrand.js';
 export * from './components/payfit-brand/PayFitPreprod.js';
 export * from './components/pill/Pill.js';
+export * from './components/number-field/NumberField.js';
+export * from './components/number-input/NumberInput.js';
 export * from './components/popover/Popover.js';
 export * from './components/progress-bar/ProgressBar.js';
 export * from './components/radio-button-group/RadioButtonGroup.js';
@@ -140,3 +143,5 @@ export * from './components/toggle-switch/ToggleSwitch.js';
 export * from './components/toggle-switch-group/ToggleSwitchGroup.js';
 export * from './components/toggle-switch-field/ToggleSwitchField.js';
 export * from './components/toggle-switch-group-field/ToggleSwitchGroupField.js';
+export * from './components/selectable-button-group-field/SelectableButtonGroupField.js';
+export * from './components/date-calendar/DateCalendar.js';