@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.6

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

@@ -0,0 +1,56 @@
+import { jsxs as L, jsx as o } from "react/jsx-runtime";
+import { forwardRef as S, useRef as x, useState as i } from "react";
+import { TabList as n } from "react-aria-components";
+import { useTabsContext as N } from "../Tabs.context.mjs";
+import { tabsVariant as T } from "../Tabs.variant.mjs";
+import { NavigationButton as f } from "./NavigationButton.mjs";
+const m = 20, g = S(
+  ({ children: e }, s) => {
+    const r = x(null), [b, d] = i(!1), [u, p] = i(!0), { variant: h, scrollable: l } = N(), { tabList: a } = T({ variant: h, scrollable: l });
+    return l ? /* @__PURE__ */ L("div", { className: "uy-relative", children: [
+      b && /* @__PURE__ */ o(
+        f,
+        {
+          direction: "left",
+          onPress: () => {
+            var t;
+            (t = r.current) == null || t.scrollBy({
+              behavior: "smooth",
+              left: -m
+            });
+          }
+        }
+      ),
+      /* @__PURE__ */ o(
+        "div",
+        {
+          ref: r,
+          "data-testid": "scrollable-tab-list",
+          className: "uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-b-border-form-enabled",
+          onScroll: (t) => {
+            const { scrollLeft: c, scrollWidth: v, clientWidth: y } = t.currentTarget;
+            d(c > 0), p(c + y < v);
+          },
+          children: /* @__PURE__ */ o(n, { ref: s, className: a(), children: e })
+        }
+      ),
+      u && /* @__PURE__ */ o(
+        f,
+        {
+          direction: "right",
+          onPress: () => {
+            var t;
+            (t = r.current) == null || t.scrollBy({
+              behavior: "smooth",
+              left: m
+            });
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ o(n, { ref: s, className: a(), children: e });
+  }
+);
+g.displayName = "TabList";
+export {
+  g as TabList
+};

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

@@ -0,0 +1,84 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { text } from './Text.variants.mjs';
+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<HTMLDivElement>>;
+export { Text };

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

@@ -0,0 +1,56 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { text as h } from "./Text.variants.mjs";
+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: n,
+    isTruncated: s,
+    lineClamp: t,
+    asElement: a,
+    className: l,
+    ...r
+  }, i) => {
+    const m = h({
+      variant: o,
+      color: n,
+      isTruncated: s,
+      isLineClamped: t !== void 0,
+      className: l
+    }), p = y[o ?? "inherit"];
+    return /* @__PURE__ */ d(
+      a ?? p,
+      {
+        ...r,
+        ref: i,
+        className: m,
+        style: { "--uy-text-line-clamp": t },
+        children: e
+      }
+    );
+  }
+);
+g.displayName = "Text";
+export {
+  g as Text
+};