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

package/dist/esm/components/alert/Alert.d.mts

@@ -0,0 +1,155 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const alert: import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}>, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type BaseAlertProps = PropsWithChildren<{
+    /**
+     * The alert's variant, which determines its visual style.
+     */
+    variant: NonNullable<VariantProps<typeof alert>['variant']>;
+}>;
+type DismissableConfig = {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable?: false;
+    onDismiss?: never;
+    dismissButtonLabel?: never;
+} | {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable: true;
+    /**
+     * Callback function to handle the alert's dismissal behavior.
+     */
+    onDismiss: () => void;
+    /**
+     * Label for the close button.
+     */
+    dismissButtonLabel: string;
+};
+export type AlertProps = BaseAlertProps & DismissableConfig;
+/**
+ * Alerts display brief messages for the user without interrupting their use of the app. They can provide feedback, confirmations, warnings, or errors.
+ */
+declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Alert };

package/dist/esm/components/alert/Alert.mjs

@@ -0,0 +1,68 @@
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { tv as g } from "tailwind-variants";
+import { CircularIconButton as m } from "../icon-button/CircularIconButton.mjs";
+import { Icon as p } from "../icon/Icon.mjs";
+const w = g({
+  slots: {
+    base: "uy-p-200 uy-flex uy-gap-200 uy-border uy-rounded-100",
+    content: "uy-flex uy-flex-col uy-flex-1 uy-gap-200 uy-pt-50 uy-pb-100",
+    icon: "uy-mt-50"
+  },
+  variants: {
+    variant: {
+      info: {
+        base: "uy-bg-surface-info-lowest uy-border-border-info-lowest"
+      },
+      warning: {
+        base: "uy-bg-surface-warning-lowest uy-border-border-warning-lowest"
+      },
+      success: {
+        base: "uy-bg-surface-success-lowest uy-border-border-success-lowest"
+      },
+      danger: {
+        base: "uy-bg-surface-danger-lowest uy-border-border-danger-lowest"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+}), x = {
+  info: { src: "InfoFilled", color: "content.info" },
+  warning: { src: "WarningFilled", color: "content.warning" },
+  success: { src: "CheckCircleFilled", color: "content.success" },
+  danger: { src: "WarningCircleFilled", color: "content.danger" }
+}, v = b(
+  ({
+    children: o,
+    variant: e,
+    isDismissable: s,
+    onDismiss: n,
+    dismissButtonLabel: t,
+    ...a
+  }, c) => {
+    const { base: l, content: i, icon: u } = w({ variant: e }), d = x[e], f = {
+      role: e === "danger" ? "alert" : "status",
+      "aria-live": e === "danger" ? "assertive" : "polite",
+      "aria-atomic": !0,
+      "aria-relevant": "additions removals"
+    };
+    return /* @__PURE__ */ y("div", { ref: c, className: l(), ...f, ...a, children: [
+      /* @__PURE__ */ r("div", { className: u(), children: /* @__PURE__ */ r(p, { size: 24, ...d, alt: `${e} alert` }) }),
+      /* @__PURE__ */ r("section", { className: i(), children: o }),
+      s && /* @__PURE__ */ r(
+        m,
+        {
+          title: t,
+          icon: "CloseOutlined",
+          onPress: n
+        }
+      )
+    ] });
+  }
+);
+v.displayName = "Alert";
+export {
+  v as Alert
+};

package/dist/esm/components/alert/parts/AlertActions.d.mts

@@ -0,0 +1,55 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const alertActions: import('tailwind-variants').TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config').TVConfig<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}>, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config').TVConfig<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type AlertActionsProps = PropsWithChildren<{
+    /**
+     * The direction in which to lay out the child actions.
+     * @default 'column'
+     */
+    direction?: VariantProps<typeof alertActions>['direction'];
+}>;
+declare const AlertActions: import('react').ForwardRefExoticComponent<{
+    /**
+     * The direction in which to lay out the child actions.
+     * @default 'column'
+     */
+    direction?: VariantProps<typeof alertActions>["direction"];
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertActions };

package/dist/esm/components/alert/parts/AlertContent.d.mts

@@ -0,0 +1,17 @@
+import { TextProps } from '../../text/Text.mjs';
+type ContentElements = 'div' | 'p' | 'span';
+export type AlertContentProps = Omit<TextProps, 'variant' | 'color' | 'className'> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'p'
+     */
+    asElement?: ContentElements;
+};
+declare const AlertContent: import('react').ForwardRefExoticComponent<Omit<TextProps, "className" | "color" | "variant"> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'p'
+     */
+    asElement?: ContentElements;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertContent };

package/dist/esm/components/alert/parts/AlertContent.mjs

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

package/dist/esm/components/alert/parts/AlertTitle.d.mts

@@ -0,0 +1,17 @@
+import { TextProps } from '../../text/Text.mjs';
+type TitleElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type AlertTitleProps = Omit<TextProps, 'variant' | 'color' | 'className'> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'h3'
+     */
+    asElement?: TitleElements;
+};
+declare const AlertTitle: import('react').ForwardRefExoticComponent<Omit<TextProps, "className" | "color" | "variant"> & {
+    /**
+     * The underlying HTML element to render the title as.
+     * @default 'h3'
+     */
+    asElement?: TitleElements;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertTitle };

package/dist/esm/components/alert/parts/AlertTitle.mjs

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { Text as m } from "../../text/Text.mjs";
+const l = i(
+  ({ children: e, asElement: t = "h3", ...o }, a) => /* @__PURE__ */ r("header", { children: /* @__PURE__ */ r(
+    m,
+    {
+      variant: "h4",
+      asElement: t,
+      ref: a,
+      className: "uy-pt-50",
+      ...o,
+      children: e
+    }
+  ) })
+);
+l.displayName = "AlertTitle";
+export {
+  l as AlertTitle
+};

package/dist/esm/components/app-layout/AppLayout.mjs

@@ -0,0 +1,70 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useRef as v } from "react";
+import { tv as x } from "tailwind-variants";
+import { useResizeObserver as w } from "usehooks-ts";
+const b = x({
+  slots: {
+    body: "uy-h-screen uy-relative uy-overflow-hidden",
+    header: "uy-fixed uy-top-0 uy-left-0 uy-right-0 uy-z-30",
+    layoutWrapper: [
+      "uy-flex uy-flex-col uy-w-full uy-mt-[--uy-app-layout-header-sticky-offset] uy-h-[--uy-app-layout-menu-height]",
+      "md:uy-flex-row"
+    ],
+    menu: ["uy-w-full", "md:uy-max-w-app-menu"],
+    contentWrapper: [
+      "uy-flex uy-flex-col",
+      "uy-flex-grow uy-overflow-y-auto uy-relative"
+    ],
+    content: ["uy-flex-1"],
+    footer: ["uy-hidden", "md:uy-block"]
+  },
+  variants: {
+    withoutContentPadding: {
+      false: {
+        content: ["md:uy-pr-300", "md:uy-pt-250"],
+        contentWrapper: ["md:uy-pl-100"]
+      },
+      true: {
+        content: [],
+        contentWrapper: []
+      }
+    }
+  }
+});
+function R({
+  children: l,
+  menu: y,
+  header: o,
+  footer: r,
+  withoutContentPadding: n = !1
+}) {
+  const u = v(null), { height: a = 0 } = w({
+    ref: u,
+    box: "border-box"
+  }), { body: s, header: p, menu: i, layoutWrapper: c, contentWrapper: d, content: f, footer: h } = b({ withoutContentPadding: n }), m = {
+    "--uy-app-layout-menu-height": `calc(100dvh - ${a}px)`,
+    "--uy-app-layout-header-sticky-offset": `${a}px`
+  };
+  return /* @__PURE__ */ t("div", { className: s(), style: m, children: [
+    o && /* @__PURE__ */ e(
+      "div",
+      {
+        ref: u,
+        className: p(),
+        role: "alert",
+        "aria-live": "assertive",
+        children: o
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: c(), children: [
+      /* @__PURE__ */ e("div", { className: i(), children: y }),
+      /* @__PURE__ */ t("div", { className: d(), children: [
+        /* @__PURE__ */ e("div", { className: f(), children: l }),
+        r && /* @__PURE__ */ e("footer", { className: h(), children: r })
+      ] })
+    ] })
+  ] });
+}
+export {
+  R as AppLayout
+};

package/dist/esm/components/app-menu/AppMenu.mjs

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import { AppMenuContextProvider as u } from "./parts/AppMenu.context.mjs";
+const a = ({ children: p }) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
+  "div",
+  {
+    className: "uy-relative uy-z-[1] uy-flex uy-flex-col uy-p-150 uy-gap-y-300 md:uy-max-w-app-menu md:uy-h-full",
+    "data-dd-privacy": "allow",
+    children: p
+  }
+) });
+a.displayName = "AppMenu";
+export {
+  a as AppMenu
+};

package/dist/esm/components/app-menu/parts/AppMenuFooter.d.mts

@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode } from 'react';
+import { AvatarPairProps } from '../../avatar/parts/AvatarPair.mjs';
+type CommonProps = {
+    avatar?: string;
+    avatarPair?: ReactElement<AvatarPairProps>;
+    title?: string;
+    description?: ReactNode;
+    badgeLabel?: string;
+    /**
+     * Use this to provide a custom context to the screen reader. Press this button to open the profile menu.
+     */
+    menuTriggerDescription?: string;
+    uploadAvatarCallback?: () => void;
+    /**
+     * Use this to provide a custom context to the screen reader. Default is "Press enter to change profile picture"
+     */
+    uploadAvatarDescription?: string;
+    /**
+     * Use this to provide a custom context to the screen reader. Default is Change profile picture
+     */
+    uploadAvatarLabel?: string;
+};
+export type AppMenuFooterProps = CommonProps & {
+    children?: ReactNode;
+    computeSlot?: ReactNode;
+};
+export type AppMenuFooterHeaderProps = CommonProps & {
+    asMenuHeader?: boolean;
+};
+export declare const AppMenuFooter: ({ avatar, avatarPair, badgeLabel, children, computeSlot, description, title, menuTriggerDescription, uploadAvatarCallback, uploadAvatarLabel, uploadAvatarDescription, }: AppMenuFooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/app-menu/parts/AppMenuFooter.mjs

@@ -0,0 +1,224 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { isValidElement as M, cloneElement as N, useState as w } from "react";
+import { FormattedMessage as p, useIntl as P } from "react-intl";
+import { twMerge as b } from "tailwind-merge";
+import { Actionable as g } from "../../actionable/Actionable.mjs";
+import { Avatar as V } from "../../avatar/Avatar.mjs";
+import { AvatarFallback as z } from "../../avatar/parts/AvatarFallback.mjs";
+import { AvatarImage as F } from "../../avatar/parts/AvatarImage.mjs";
+import { Badge as H } from "../../badge/Badge.mjs";
+import { Icon as h } from "../../icon/Icon.mjs";
+import { Menu as I } from "../../menu/Menu.mjs";
+import { MenuContent as j } from "../../menu/parts/MenuContent.mjs";
+import { MenuHeader as A } from "../../menu/parts/MenuHeader.mjs";
+import { MenuTrigger as E } from "../../menu/parts/MenuTrigger.mjs";
+import { useAppMenuContext as O } from "./AppMenu.context.mjs";
+const v = (i) => /* @__PURE__ */ u(
+  V,
+  {
+    "aria-label": `${i.title} avatar`,
+    size: "md",
+    variant: "square",
+    "aria-labelledby": "profile-button-label",
+    children: [
+      /* @__PURE__ */ e(F, { src: i.avatar, alt: i.title ?? "" }),
+      /* @__PURE__ */ e(z, { variant: "initials", delayMs: 100, children: i.title }),
+      i.avatarPair && M(i.avatarPair) && N(i.avatarPair, {
+        isHidden: !i.isPairAvatarVisible
+      })
+    ]
+  }
+), S = ({
+  avatar: i,
+  avatarPair: r,
+  title: a,
+  uploadAvatarCallback: l,
+  uploadAvatarLabel: c,
+  uploadAvatarDescription: n
+}) => {
+  const [o, s] = w(!0), y = P(), t = () => {
+    r && s((m) => !m);
+  }, d = b(
+    "uy-group uy-relative uy-leading-[0] uy-rounded-75 focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-utility-focus-ring focus-visible:uy-ring-offset-2"
+  );
+  return /* @__PURE__ */ u(
+    g,
+    {
+      "aria-describedby": "profile-picture-change-desc",
+      "aria-label": c || y.formatMessage({
+        id: "unity:component:app-menu:footer:profile-button:avatar:change",
+        defaultMessage: "Change profile picture"
+      }),
+      className: d,
+      onHoverStart: t,
+      onHoverEnd: t,
+      onFocus: t,
+      onBlur: t,
+      onPress: () => {
+        l == null || l();
+      },
+      children: [
+        /* @__PURE__ */ e(
+          v,
+          {
+            avatar: i,
+            avatarPair: r,
+            title: a,
+            isPairAvatarVisible: o
+          }
+        ),
+        /* @__PURE__ */ u("div", { className: "uy-flex uy-pointer-events-none uy-opacity-0 group-hover:uy-opacity-70 group-hover:uy-pointer-events-auto group-focus-visible:uy-opacity-70 group-focus-visible:uy-pointer-events-auto uy-bg-utility-backdrop uy-rounded-circle uy-absolute uy-top-0 uy-left-0 uy-w-full uy-h-full uy-transition-all uy-duration-200 uy-items-center uy-justify-center", children: [
+          /* @__PURE__ */ e(
+            h,
+            {
+              alt: "Camera",
+              color: "content.inverted",
+              size: 24,
+              src: "CameraOutlined"
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "uy-sr-only", id: "profile-picture-change-desc", children: n || /* @__PURE__ */ e(
+            p,
+            {
+              id: "unity:component:app-menu:footer:profile-button:avatar:change-description",
+              defaultMessage: "Press enter to change profile picture"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, f = ({
+  asMenuHeader: i = !1,
+  avatar: r,
+  avatarPair: a,
+  badgeLabel: l,
+  description: c,
+  menuTriggerDescription: n,
+  title: o,
+  uploadAvatarCallback: s,
+  uploadAvatarLabel: y,
+  uploadAvatarDescription: t
+}) => /* @__PURE__ */ u("div", { className: "uy-min-w-[240px] uy-w-full uy-flex uy-items-center", children: [
+  /* @__PURE__ */ e("div", { className: "uy-mr-150 uy-flex uy-items-center", children: s ? /* @__PURE__ */ e(
+    S,
+    {
+      avatar: r,
+      avatarPair: a,
+      title: o,
+      uploadAvatarLabel: y,
+      uploadAvatarDescription: t,
+      uploadAvatarCallback: s
+    }
+  ) : /* @__PURE__ */ e(
+    v,
+    {
+      avatar: r,
+      avatarPair: a,
+      title: o,
+      isPairAvatarVisible: !0
+    }
+  ) }),
+  /* @__PURE__ */ u("div", { className: "uy-flex uy-flex-col uy-text-left uy-leading-125 uy-min-w-[50%] uy-flex-grow", children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        id: "profile-button-label",
+        className: "uy-typography-body-strong uy-text-content-neutral uy-text-wrap",
+        children: o
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: "uy-typography-body-small uy-text-content-neutral-low", children: c }),
+    !i && /* @__PURE__ */ e("span", { id: "profile-button-description", className: "uy-sr-only", children: n || /* @__PURE__ */ e(
+      p,
+      {
+        id: "unity:component:app-menu:footer:profile-button:description",
+        defaultMessage: "Press this button to open the profile menu."
+      }
+    ) })
+  ] }),
+  /* @__PURE__ */ e("div", { className: "uy-p-100", children: i ? /* @__PURE__ */ e(H, { className: "uy-capitalize", variant: "neutral", children: l }) : /* @__PURE__ */ e(
+    h,
+    {
+      src: "CaretUpDownOutlined",
+      alt: "open",
+      size: 20,
+      color: "inherit"
+    }
+  ) })
+] }), T = ({
+  avatar: i,
+  avatarPair: r,
+  badgeLabel: a,
+  children: l,
+  computeSlot: c,
+  description: n,
+  title: o,
+  menuTriggerDescription: s,
+  uploadAvatarCallback: y,
+  uploadAvatarLabel: t,
+  uploadAvatarDescription: d
+}) => {
+  const { isMobileMenuOpen: m } = O(), x = b(
+    "uy-fixed uy-bottom-0 uy-left-0 uy-right-0 uy-z-10 uy-bg-canvas",
+    "uy-p-150",
+    "md:uy-static md:uy-mt-auto md:uy-p-0 md:uy-bg-[transparent]",
+    "data-[mobile-open=false]:uy-hidden md:data-[mobile-open=false]:uy-block data-[mobile-open=true]:uy-block"
+  );
+  return /* @__PURE__ */ u(
+    "aside",
+    {
+      className: x,
+      "data-mobile-open": m,
+      id: "app-menu-profile-button",
+      children: [
+        c,
+        /* @__PURE__ */ u(I, { children: [
+          /* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(
+            g,
+            {
+              className: "uy-rounded-75 uy-px-150 uy-py-100 uy-w-full enabled:hover:uy-bg-surface-neutral-hover enabled:active:uy-bg-surface-neutral-active enabled:data-[pressed]:uy-bg-surface-neutral-active enabled:focus-visible:uy-outline-none enabled:focus-visible:uy-ring-2 enabled:focus-visible:uy-ring-utility-focus-ring enabled:focus-visible:uy-ring-offset-2",
+              "aria-labelledby": "profile-button-label",
+              "aria-describedby": "profile-button-description",
+              children: /* @__PURE__ */ e(
+                f,
+                {
+                  avatar: i,
+                  avatarPair: r,
+                  badgeLabel: a,
+                  description: n,
+                  menuTriggerDescription: s,
+                  title: o,
+                  uploadAvatarCallback: y,
+                  uploadAvatarLabel: t,
+                  uploadAvatarDescription: d
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ u(j, { width: 312, placement: "top left", children: [
+            /* @__PURE__ */ e(A, { className: "uy-rounded-75", children: /* @__PURE__ */ e(
+              f,
+              {
+                asMenuHeader: !0,
+                avatar: i,
+                avatarPair: r,
+                badgeLabel: a,
+                description: n,
+                menuTriggerDescription: s,
+                title: o,
+                uploadAvatarCallback: y,
+                uploadAvatarLabel: t,
+                uploadAvatarDescription: d
+              }
+            ) }),
+            l
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  T as AppMenuFooter
+};