@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,18 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Tab as b } from "react-aria-components";
+import { useTabsContext as p } from "../Tabs.context.js";
+import { tabsVariant as c } from "../Tabs.variant.js";
+const f = l(
+  ({ children: a, suffix: r, ...o }, t) => {
+    const { variant: s, scrollable: m } = p(), { tab: n } = c({ variant: s, scrollable: m });
+    return /* @__PURE__ */ e(b, { ref: t, ...o, className: n(), children: [
+      a,
+      r ? /* @__PURE__ */ i("span", { children: r }) : null
+    ] });
+  }
+);
+f.displayName = "Tab";
+export {
+  f as Tab
+};

package/dist/esm/components/tabs/parts/TabList.d.ts

@@ -0,0 +1,4 @@
+declare const TabList: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { TabList };

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

@@ -0,0 +1,78 @@
+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]");
+      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)
+          return -n.offsetWidth;
+      }
+      return 0;
+    }, x = () => {
+      var n;
+      const t = (n = r.current) == null ? void 0 : n.querySelectorAll("div[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)
+          return i.offsetWidth;
+      }
+      return 0;
+    };
+    return u ? /* @__PURE__ */ N("div", { className: "uy-relative", children: [
+      g && /* @__PURE__ */ c(
+        L,
+        {
+          direction: "left",
+          onPress: () => {
+            var t;
+            (t = r.current) == null || t.scrollBy({
+              behavior: "smooth",
+              left: W()
+            });
+          }
+        }
+      ),
+      /* @__PURE__ */ c(
+        "div",
+        {
+          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 })
+        }
+      ),
+      p && /* @__PURE__ */ c(
+        L,
+        {
+          direction: "right",
+          onPress: () => {
+            var t;
+            (t = r.current) == null || t.scrollBy({
+              behavior: "smooth",
+              left: x()
+            });
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ c(m, { ref: b, className: d(), children: f });
+  }
+);
+C.displayName = "TabList";
+export {
+  C as TabList
+};

package/dist/esm/components/tabs/parts/TabPanel.d.ts

@@ -0,0 +1,4 @@
+import { TabPanelProps as AriaTabPanelProps } from 'react-aria-components';
+export type TabPanelProps = Omit<AriaTabPanelProps, 'classname' | 'style'>;
+declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TabPanel };

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

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { TabPanel as n } from "react-aria-components";
+const t = m(
+  ({ children: a, ...r }, o) => /* @__PURE__ */ e(n, { ref: o, ...r, children: a })
+);
+t.displayName = "TabPanel";
+export {
+  t as TabPanel
+};

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

@@ -0,0 +1,84 @@
+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 TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The HTML element to render the text as. Defaults to a recommended element based on the variant.
+     * @default 'span'
+     */
+    asElement?: ValidTextElements;
+    /**
+     * The language of the text content See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
+     */
+    lang?: HTMLSpanElement['lang'];
+    /**
+     * The typography variant to use.
+     * @default 'inherit'
+     */
+    variant?: VariantProps<typeof text>['variant'];
+    /**
+     * The text's color. This can be any token under the `content` colors namespace.
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof text>['color'];
+    /**
+     * Whether the text should be truncated to one line and have an ellipsis.
+     * @default false
+     */
+    isTruncated?: boolean;
+    /**
+     * The number of lines to clamp the text to.
+     * @default undefined
+     */
+    lineClamp?: number;
+    /**
+     * Additional class names to apply to the text.
+     * @default undefined
+     */
+    className?: string;
+}>;
+/**
+ * The `Text` component is used to render text with different variants and colors.
+ */
+declare const Text: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * The HTML element to render the text as. Defaults to a recommended element based on the variant.
+     * @default 'span'
+     */
+    asElement?: ValidTextElements;
+    /**
+     * The language of the text content See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang
+     */
+    lang?: HTMLSpanElement["lang"];
+    /**
+     * The typography variant to use.
+     * @default 'inherit'
+     */
+    variant?: VariantProps<typeof text>["variant"];
+    /**
+     * The text's color. This can be any token under the `content` colors namespace.
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof text>["color"];
+    /**
+     * Whether the text should be truncated to one line and have an ellipsis.
+     * @default false
+     */
+    isTruncated?: boolean;
+    /**
+     * The number of lines to clamp the text to.
+     * @default undefined
+     */
+    lineClamp?: number;
+    /**
+     * Additional class names to apply to the text.
+     * @default undefined
+     */
+    className?: string;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { Text };

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

@@ -0,0 +1,57 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { text as h } from "./Text.variants.js";
+const y = {
+  inherit: "span",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  overline: "h6",
+  subtitle: "h5",
+  displayTitle: "h1",
+  displayBody: "p",
+  body: "p",
+  bodyStrong: "strong",
+  bodySmall: "small",
+  bodySmallStrong: "strong",
+  bodyLarge: "p",
+  bodyLargeStrong: "strong",
+  action: "span",
+  actionLarge: "span",
+  actionSmall: "span"
+}, g = c(
+  ({
+    children: e,
+    variant: o,
+    color: s,
+    isTruncated: a,
+    lineClamp: t,
+    asElement: n,
+    className: r,
+    ...l
+  }, i) => {
+    const m = h({
+      variant: o,
+      color: s,
+      isTruncated: a,
+      isLineClamped: t !== void 0,
+      className: r
+    }), p = y[o ?? "inherit"];
+    return /* @__PURE__ */ d(
+      n ?? p,
+      {
+        "data-dd-privacy": "mask",
+        ...l,
+        ref: i,
+        className: m,
+        style: { "--uy-text-line-clamp": t },
+        children: e
+      }
+    );
+  }
+);
+g.displayName = "Text";
+export {
+  g as Text
+};