@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { AriaBreadcrumbsProps as AriaAriaBreadcrumbsProps } from 'react-aria';
+import { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { BreadcrumbProps } from './parts/Breadcrumb.js';
+import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
+export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<BreadcrumbsProps>, 'onAction'> {
+    items?: never;
+    /**
+     * The breadcrumb list to render (static api)
+     */
+    children: ReactNode;
+    /**
+     * If the breadcrumbs should wrap or not
+     */
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+}
+export interface BreadcrumbsWithItemProps extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant> {
+    /**
+     * The list of items to render, when using the dynamic API.
+     */
+    items: BreadcrumbProps[];
+    /**
+     * The function renderer to render each part of the breadcrumbs (dynamic api)
+     */
+    children: (item: BreadcrumbProps) => ReactNode;
+    /**
+     * If the breadcrumbs should wrap or not
+     */
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+}
+declare const Breadcrumbs: import('react').ForwardRefExoticComponent<(BreadcrumbsProps | BreadcrumbsWithItemProps) & import('react').RefAttributes<HTMLOListElement>>;
+export { Breadcrumbs };

package/dist/esm/components/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as c, Fragment as m } from "react";
+import { Breadcrumbs as d } from "react-aria-components";
+import { useBreakpointListener as p } from "../../hooks/use-breakpoint-listener.js";
+import { BreadcrumbsProvider as u } from "./Breadcrumbs.context.js";
+import { breadcrumbsVariant as f } from "./Breadcrumbs.variant.js";
+const l = (o, r, t) => o ? r.length === 0 ? null : t(r.at(r.length === 1 ? 0 : -2)) : r.map((a) => /* @__PURE__ */ e(m, { children: t(a) }, `${a.label}${a.href}`)), k = c(({ items: o, children: r, wrap: t = "nowrap" }, a) => {
+  const { base: i } = f({ wrap: t }), n = p(), s = n === "xs" || n === "sm";
+  return /* @__PURE__ */ e(
+    u,
+    {
+      wrap: t,
+      isMobile: s,
+      isStaticApi: o === void 0,
+      children: /* @__PURE__ */ e(d, { "data-dd-privacy": "allow", ref: a, className: i(), children: o ? l(s, o, r) : r })
+    }
+  );
+});
+export {
+  k as Breadcrumbs
+};

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.d.ts

@@ -0,0 +1,73 @@
+export declare const breadcrumbsVariant: import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}>, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/esm/components/breadcrumbs/Breadcrumbs.variant.js

@@ -0,0 +1,20 @@
+import { tv as a } from "tailwind-variants";
+const t = a({
+  slots: {
+    base: "uy-flex uy-gap-50 uy-list-none uy-text-content-neutral-enabled uy-typography-action",
+    breadcrumb: "uy-flex uy-gap-50 sm:uy-leading-175 sm:uy-items-center"
+  },
+  variants: {
+    wrap: {
+      wrap: {
+        base: "uy-flex-wrap"
+      },
+      nowrap: {
+        base: ""
+      }
+    }
+  }
+});
+export {
+  t as breadcrumbsVariant
+};

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.d.ts

@@ -0,0 +1,9 @@
+import { BreadcrumbProps as AriaBreadcrumbProps } from 'react-aria-components';
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children'> {
+    /** The link of the breadcrumb */
+    href: string;
+    /** The text of the breadcrumb */
+    label: string;
+}
+declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLSpanElement | HTMLLIElement>>;
+export { Breadcrumb };

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.js

@@ -0,0 +1,24 @@
+import { jsxs as c, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { Breadcrumb as m } from "react-aria-components";
+import { Icon as s } from "../../icon/Icon.js";
+import { Link as u } from "../../link/Link.js";
+import { Tooltip as g } from "../../tooltip/Tooltip.js";
+import { useBreadcrumbsContext as B } from "../Breadcrumbs.context.js";
+import { breadcrumbsVariant as C } from "../Breadcrumbs.variant.js";
+const L = 25, d = ({ children: t, href: e }) => t.length > L ? /* @__PURE__ */ r(g, { title: t, children: /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), R = x((t, e) => {
+  const { wrap: l, isMobile: f, isStaticApi: p } = B(), { breadcrumb: o } = C({ wrap: l });
+  if (!t)
+    return null;
+  const { href: n, label: a, ...i } = t;
+  return f && !p ? /* @__PURE__ */ c(m, { ref: e, ...i, className: o(), children: [
+    /* @__PURE__ */ r(s, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
+    /* @__PURE__ */ r(d, { href: n, children: a })
+  ] }) : /* @__PURE__ */ r(m, { ref: e, ...i, className: o(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy-text-nowrap", children: a }) : /* @__PURE__ */ c(h, { children: [
+    /* @__PURE__ */ r(d, { href: n, children: a }),
+    /* @__PURE__ */ r(s, { src: "CaretRightOutlined", "aria-hidden": "true" })
+  ] }) });
+});
+export {
+  R as Breadcrumb
+};

package/dist/esm/components/button/Button.d.ts

@@ -0,0 +1,42 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from './Button.variants.js';
+type UnityButtonProps = AriaButtonProps & ButtonBase & {
+    /**
+     * The button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost'.
+     * @default 'primary'
+     */
+    variant: 'primary' | 'secondary' | 'ghost';
+    /**
+     * The button size. It can be full size or default size (min-content).
+     * @default 'default'
+     */
+    size?: ButtonBase['size'];
+    /**
+     * The button's color. It can be one of the following: 'primary', 'inverted'.
+     * @default 'primary'
+     */
+    color?: ButtonFilled['color'] | ButtonOutlined['color'] | ButtonGhost['color'];
+    /**
+     * The button's prefix icon. It has to be one of the icons from the Unity Icons package.
+     */
+    prefixIcon?: UnityIcon;
+    /**
+     * The loading state of the button.
+     * @default false
+     */
+    isLoading?: boolean;
+};
+export type ButtonProps = (UnityButtonProps & {
+    variant: 'primary';
+} & ButtonFilled) | (UnityButtonProps & {
+    variant: 'secondary';
+} & ButtonOutlined) | (UnityButtonProps & {
+    variant: 'ghost';
+} & ButtonGhost);
+/**
+ * Buttons allow users to take actions, and make choices, with a single tap.
+ */
+declare const Button: import('react').ForwardRefExoticComponent<PropsWithChildren<ButtonProps> & import('react').RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/esm/components/button/Button.js

@@ -0,0 +1,75 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as h, useMemo as b } from "react";
+import { Button as v } from "react-aria-components";
+import { twMerge as s } from "tailwind-merge";
+import { Icon as w } from "../icon/Icon.js";
+import { Spinner as x } from "../spinner/Spinner.js";
+import { buttonGhost as B, buttonOutlined as N, buttonFilled as j } from "./Button.variants.js";
+const M = h(
+  ({
+    variant: m,
+    children: c,
+    color: e = "primary",
+    size: l = "default",
+    isDisabled: a = !1,
+    isLoading: t = !1,
+    prefixIcon: i = void 0,
+    ...u
+  }, p) => {
+    const f = b(() => {
+      const n = { size: l, isDisabled: a, isLoading: t };
+      switch (m) {
+        case "primary": {
+          const r = {
+            ...n,
+            color: e
+          };
+          return s(j(r));
+        }
+        case "secondary": {
+          const r = {
+            ...n,
+            color: e
+          };
+          return s(N(r));
+        }
+        case "ghost": {
+          const r = {
+            ...n,
+            color: e
+          };
+          return s(B(r));
+        }
+      }
+    }, [m, e, l, a, t]), d = {
+      ...t && { "data-loading": t }
+    };
+    return /* @__PURE__ */ o(
+      v,
+      {
+        "data-dd-privacy": "allow",
+        ...u,
+        ref: p,
+        isDisabled: a || t,
+        className: f,
+        ...d,
+        children: t ? /* @__PURE__ */ o(x, { size: "small", color: "inherit", label: "Loading..." }) : /* @__PURE__ */ y("span", { className: "uy-inline-flex uy-gap-50 uy-leading-175 uy-items-center", children: [
+          i && /* @__PURE__ */ o(
+            w,
+            {
+              src: i,
+              size: 20,
+              color: "inherit",
+              role: "presentation"
+            }
+          ),
+          c
+        ] })
+      }
+    );
+  }
+);
+M.displayName = "Button";
+export {
+  M as Button
+};