@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/pill/Pill.js

@@ -0,0 +1,58 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { uyTv as o } from "@payfit/unity-themes";
+const y = o({
+  base: "uy:min-w-200 uy:h-200 uy:max-w-400 uy:inline-flex uy:items-center uy:justify-center uy:text-center uy:typography-body-small-strong",
+  variants: {
+    variant: {
+      critical: "uy:bg-surface-danger uy:text-content-inverted",
+      info: [
+        //legacy
+        "uy:theme-legacy:bg-surface-primary uy:theme-legacy:text-content-inverted",
+        //rebrand
+        "uy:theme-rebrand:bg-surface-info uy:theme-rebrand:text-content-info-high"
+      ],
+      neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral"
+    },
+    shape: {
+      circle: "uy:rounded-circle",
+      pill: "uy:rounded-pill uy:px-50"
+    },
+    isVisible: {
+      true: "uy:visible",
+      false: "uy:invisible"
+    }
+  },
+  defaultVariants: {
+    variant: "critical",
+    shape: "pill",
+    isVisible: !0
+  }
+}), p = (e, r) => {
+  const t = 10 ** r - 1;
+  return e > t ? `${t}+` : e.toString();
+}, m = c(
+  ({ variant: e = "critical", isVisible: r = !0, maxDigits: t = 2, value: i, ...l }, n) => {
+    const a = p(Math.abs(i), t), u = y({
+      variant: e,
+      isVisible: r,
+      shape: a.length === 1 ? "circle" : "pill"
+    });
+    return /* @__PURE__ */ s(
+      "span",
+      {
+        "data-dd-privacy": "allow",
+        ...l,
+        ref: n,
+        role: "status",
+        className: u,
+        "aria-atomic": "true",
+        children: a
+      }
+    );
+  }
+);
+m.displayName = "Pill";
+export {
+  m as Pill
+};

package/dist/esm/components/pill/figma/Pill.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/components/popover/Popover.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import { PopoverProps as AriaPopoverProps } from 'react-aria-components/Popover';
+import { DialogTrigger } from 'react-aria-components/Dialog';
+interface PopoverBaseProps extends Omit<AriaPopoverProps, 'className' | 'style'> {
+    /**
+     * The content to be displayed inside the popover.
+     */
+    children: ReactNode;
+    /**
+     * Title text to be displayed in the header and used as the Popover's label.
+     */
+    title: string;
+}
+interface PopoverPropsWithVisibleTitle extends PopoverBaseProps {
+    /**
+     * If true, the title will not be shown on the screen but will still be accessible to screen readers
+     * @default false
+     */
+    isTitleSrOnly?: false;
+    /**
+     * Whether the popover can be dismissed with a close button.
+     * If true, a close button will be added to the popover header.
+     * @default false
+     */
+    displayCloseButton?: boolean;
+}
+interface PopoverPropsWithHiddenTitle extends PopoverBaseProps {
+    /**
+     * If true, the title will not be shown on the screen but will still be accessible to screen readers
+     * @default false
+     */
+    isTitleSrOnly: true;
+    /**
+     * Whether the popover can be dismissed with a close button.
+     * If true, a close button will be added to the popover header.
+     * @default false
+     */
+    displayCloseButton?: false;
+}
+type PopoverProps = PopoverPropsWithVisibleTitle | PopoverPropsWithHiddenTitle;
+/**
+ * The `Popover` component renders a floating container that appears when a user interacts with a trigger element.
+ * Use it to display additional information or actions without navigating away from the current context.
+ * @example
+ * ```tsx
+ * import { Popover, PopoverTrigger, Button } from '@payfit/unity-components'
+ *
+ * <PopoverTrigger>
+ *   <Button>Open Popover</Button>
+ *   <Popover>
+ *     <p>Popover content goes here</p>
+ *   </Popover>
+ * </PopoverTrigger>
+ * ```
+ */
+declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Popover, DialogTrigger as PopoverTrigger };

package/dist/esm/components/popover/Popover.js

@@ -0,0 +1,42 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as p } from "@payfit/unity-themes";
+import { Dialog as m, DialogTrigger as g } from "react-aria-components/Dialog";
+import { DialogTrigger as B } from "react-aria-components/Dialog";
+import { Popover as c } from "react-aria-components/Popover";
+import { PopoverHeader as f } from "./parts/PopoverHeader.js";
+const x = p({
+  slots: {
+    base: [
+      "uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-200 uy:p-200 uy:shadow-300 uy:min-w-[320px] uy:max-w-[800px] uy:overflow-auto",
+      "uy:transition-all uy:duration-200 uy:linear uy:data-[entering]:opacity-100 uy:data-[exiting]:opacity-0",
+      'uy:data-[entering]:data-[placement="bottom"]:-translate-y-100 uy:data-[entering]:data-[placement="bottom"]:translate-x-0 uy:data-[exiting]:data-[placement="bottom"]:translate-y-0',
+      'uy:data-[entering]:data-[placement="top"]:translate-y-100 uy:data-[entering]:data-[placement="top"]:translate-x-0 uy:data-[exiting]:data-[placement="top"]:translate-y-0',
+      'uy:data-[entering]:data-[placement="left"]:translate-x-100 uy:data-[entering]:data-[placement="left"]:translate-y-0 uy:data-[exiting]:data-[placement="bottom"]:translate-x-0',
+      'uy:data-[entering]:data-[placement="right"]:-translate-x-100 uy:data-[entering]:data-[placement="right"]:translate-y-0 uy:data-[exiting]:data-[placement="right"]:translate-y-0'
+    ],
+    dialog: [
+      "uy:flex uy:flex-col uy:rounded-100",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring"
+    ]
+  }
+}), b = y((a, e) => {
+  const { children: o, title: r, isTitleSrOnly: i, displayCloseButton: n, ...l } = a, { base: u, dialog: s } = x();
+  return /* @__PURE__ */ t(c, { ref: e, className: u(), offset: 8, ...l, children: /* @__PURE__ */ d(m, { className: s(), role: "dialog", children: [
+    /* @__PURE__ */ t(
+      f,
+      {
+        title: r,
+        isTitleSrOnly: i,
+        displayCloseButton: n
+      }
+    ),
+    o
+  ] }) });
+});
+b.displayName = "Popover";
+g.displayName = "PopoverTrigger";
+export {
+  b as Popover,
+  B as PopoverTrigger
+};

package/dist/esm/components/popover/parts/PopoverHeader.d.ts

@@ -0,0 +1,20 @@
+import { HeadingProps } from 'react-aria-components/Heading';
+export interface PopoverHeaderProps extends Omit<HeadingProps, 'className' | 'style' | 'children'> {
+    /**
+     * Title text to be displayed in the header and used as the Popover's label.
+     */
+    title: string;
+    /**
+     * If true, the title will not be shown on the screen but will still be accessible to screen readers
+     * @default false
+     */
+    isTitleSrOnly?: boolean;
+    /**
+     * Whether the popover can be dismissed with a close button.
+     * If true, a close button will be added to the header.
+     * @default false
+     */
+    displayCloseButton?: boolean;
+}
+declare const PopoverHeader: import('react').ForwardRefExoticComponent<PopoverHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { PopoverHeader };

package/dist/esm/components/popover/parts/PopoverHeader.js

@@ -0,0 +1,60 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u, useContext as y } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import { OverlayTriggerStateContext as p } from "react-aria-components/Dialog";
+import { Heading as f } from "react-aria-components/Heading";
+import { useIntl as g } from "react-intl";
+import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
+const v = d({
+  slots: {
+    base: "uy:flex uy:justify-between",
+    heading: "uy:content-center",
+    iconButton: "uy:ml-200"
+  },
+  variants: {
+    isTitleSrOnly: {
+      true: {
+        heading: "uy:sr-only"
+      },
+      false: {
+        base: "uy:mb-200",
+        heading: "uy:typography-h4 uy:min-h-400 uy:align-center"
+      }
+    }
+  }
+}), x = u(
+  ({ title: o, isTitleSrOnly: t, displayCloseButton: n }, r) => {
+    const s = y(p), a = g(), { base: l, heading: i, iconButton: c } = v({ isTitleSrOnly: t });
+    return /* @__PURE__ */ m("div", { className: l(), children: [
+      /* @__PURE__ */ e(
+        f,
+        {
+          ref: r,
+          slot: "title",
+          className: i(),
+          "data-dd-privacy": "allow",
+          level: 4,
+          children: o
+        }
+      ),
+      n && /* @__PURE__ */ e(
+        h,
+        {
+          className: c(),
+          title: a.formatMessage({
+            id: "unity:component:common:close:label",
+            defaultMessage: "Close"
+          }),
+          color: "content.neutral.low",
+          icon: "CloseOutlined",
+          onPress: () => s?.close(),
+          size: "large"
+        }
+      )
+    ] });
+  }
+);
+x.displayName = "PopoverTitle";
+export {
+  x as PopoverHeader
+};

package/dist/esm/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,92 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components/ProgressBar';
+declare const progressBar: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: {
+            meter: string;
+        };
+        primary: {
+            meter: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+            meter: string;
+        };
+        large: {
+            base: string;
+            meter: string;
+        };
+    };
+    isFull: {
+        true: {};
+    };
+}, {
+    base: string;
+    meter: string;
+}, undefined, {
+    variant: {
+        success: {
+            meter: string;
+        };
+        primary: {
+            meter: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+            meter: string;
+        };
+        large: {
+            base: string;
+            meter: string;
+        };
+    };
+    isFull: {
+        true: {};
+    };
+}, {
+    base: string;
+    meter: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: {
+            meter: string;
+        };
+        primary: {
+            meter: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+            meter: string;
+        };
+        large: {
+            base: string;
+            meter: string;
+        };
+    };
+    isFull: {
+        true: {};
+    };
+}, {
+    base: string;
+    meter: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface ProgressBarProps extends AriaProgressBarProps {
+    /** the range of the value*/
+    range?: [min: number, max: number];
+    /** the value of the progression */
+    value: number;
+    /** the visual variant of the progress bar fill */
+    variant?: VariantProps<typeof progressBar>['variant'];
+    /** the size of the progress bar */
+    size?: VariantProps<typeof progressBar>['size'];
+    /** an aria-label for the accessibility */
+    'aria-label': string;
+}
+declare const ProgressBar: import('react').ForwardRefExoticComponent<ProgressBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ProgressBar };

package/dist/esm/components/progress-bar/ProgressBar.js

@@ -0,0 +1,76 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { ProgressBar as g } from "react-aria-components/ProgressBar";
+const b = f({
+  slots: {
+    base: "uy:relative uy:bg-surface-neutral-disabled uy:w-full",
+    meter: "uy:absolute uy:inset-y-0 uy:left-0"
+  },
+  variants: {
+    variant: {
+      success: {
+        meter: "uy:bg-surface-success"
+      },
+      primary: {
+        meter: "uy:bg-surface-primary"
+      }
+    },
+    size: {
+      small: {
+        base: "uy:h-75 uy:rounded-75",
+        meter: "uy:rounded-l-75"
+      },
+      large: {
+        base: "uy:h-150 uy:rounded-150",
+        meter: "uy:rounded-l-150"
+      }
+    },
+    isFull: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      size: "small",
+      isFull: !0,
+      class: { meter: "uy:rounded-r-75" }
+    },
+    {
+      size: "large",
+      isFull: !0,
+      class: { meter: "uy:rounded-r-150" }
+    }
+  ],
+  defaultVariants: {
+    variant: "success",
+    size: "large",
+    isFull: !1
+  }
+}), p = y(
+  ({
+    value: r,
+    range: a = [0, 100],
+    variant: l = "success",
+    size: u = "large",
+    ...t
+  }, i) => {
+    const [o, s] = a, m = r >= s, { base: d, meter: c } = b({ isFull: m, variant: l, size: u });
+    return /* @__PURE__ */ e(
+      g,
+      {
+        ref: i,
+        value: r,
+        minValue: o,
+        maxValue: s,
+        "aria-label": t["aria-label"],
+        "data-dd-privacy": "allow",
+        children: ({ percentage: n }) => /* @__PURE__ */ e("div", { className: d(), children: /* @__PURE__ */ e("div", { className: c(), style: { width: `${n}%` } }) })
+      }
+    );
+  }
+);
+p.displayName = "ProgressBar";
+export {
+  p as ProgressBar
+};

package/dist/esm/components/promo-dialog/PromoDialog.d.ts

@@ -0,0 +1,149 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const promoDialog: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            layoutWrapper?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            dismissIcon?: import('tailwind-merge').ClassNameValue;
+            contentColumn?: import('tailwind-merge').ClassNameValue;
+            scrollableContent?: import('tailwind-merge').ClassNameValue;
+            actionsWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            layoutWrapper?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            dismissIcon?: import('tailwind-merge').ClassNameValue;
+            contentColumn?: import('tailwind-merge').ClassNameValue;
+            scrollableContent?: import('tailwind-merge').ClassNameValue;
+            actionsWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+    dismissIcon: string[];
+    layoutWrapper: string[];
+    contentColumn: string[];
+    scrollableContent: string[];
+    actionsWrapper: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            layoutWrapper?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            dismissIcon?: import('tailwind-merge').ClassNameValue;
+            contentColumn?: import('tailwind-merge').ClassNameValue;
+            scrollableContent?: import('tailwind-merge').ClassNameValue;
+            actionsWrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+    dismissIcon: string[];
+    layoutWrapper: string[];
+    contentColumn: string[];
+    scrollableContent: string[];
+    actionsWrapper: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+    dismissIcon: string[];
+    layoutWrapper: string[];
+    contentColumn: string[];
+    scrollableContent: string[];
+    actionsWrapper: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface PromoDialogProps extends PropsWithChildren<VariantProps<typeof promoDialog>> {
+    /** aria-label has to be defined if the dialog does not have a visible label*/
+    'aria-label'?: string;
+    /** Controls the open state of the dialog. Use only in controlled mode (along with the `onOpenChange` callback) */
+    isOpen?: boolean;
+    /** it is used for controlled mode (need to be used with isOpen property) */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** if false it does not allow to close the modal when click outside, default: true*/
+    isDismissable?: boolean;
+}
+/**
+ * The PromoDialog component provides a specialized modal interface for promotional content,
+ * feature announcements, and important communications that benefit from visual emphasis.
+ *
+ * Use PromoDialog when you want to introduce new features, highlight important updates, or present
+ * promotional content with a compelling illustration. It features a hero section for illustrations
+ * and automatically adapts its layout between mobile (vertical stack) and desktop (horizontal split).
+ *
+ * The PromoDialog requires several parts working together:
+ * - `PromoDialogHero`: Contains the promotional illustration (required)
+ * - `PromoDialogTitle`: Displays the title of the dialog
+ * - `PromoDialogContent`: Contains the main content of the dialog (required)
+ * - `PromoDialogActions`: Contains action buttons for user interaction
+ * - `DialogButton`: Handles specific actions (close, confirm, or danger)
+ * @param props - The props for the PromoDialog component
+ * @param props.children - The dialog content including hero, title, content, and actions
+ * @param props.isOpen - Controls the open state in controlled mode
+ * @param props.onOpenChange - Callback fired when open state changes
+ * @param props.isDismissable - Whether the dialog can be dismissed by clicking outside or pressing Escape
+ * @see {@link PromoDialogProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   PromoDialog,
+ *   DialogTrigger,
+ *   PromoDialogHero,
+ *   PromoDialogTitle,
+ *   PromoDialogContent,
+ *   PromoDialogActions,
+ *   DialogButton
+ * } from '@payfit/unity-components'
+ * import { Illustration } from '@payfit/unity-illustrations'
+ *
+ * function FeatureAnnouncement() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Learn more</Button>
+ *       <PromoDialog>
+ *         <PromoDialogHero>
+ *           <Illustration src={ContractSignature} variant="picture" />
+ *         </PromoDialogHero>
+ *         <PromoDialogTitle>Introducing our new feature</PromoDialogTitle>
+ *         <PromoDialogContent>
+ *           Discover how this feature can help you...
+ *         </PromoDialogContent>
+ *         <PromoDialogActions>
+ *           <DialogButton variant="close">Maybe later</DialogButton>
+ *           <DialogButton variant="confirm">Get started</DialogButton>
+ *         </PromoDialogActions>
+ *       </PromoDialog>
+ *     </DialogTrigger>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Content scrolls when it overflows, with a sticky footer
+ * - Layout adapts automatically: vertical on mobile, horizontal split on desktop
+ * - Hero section is mandatory and displays on the left (desktop) or top (mobile)
+ * - Shadow appears on footer when content is scrollable
+ * - **Accessibility**: Either `PromoDialogTitle` or `aria-label` prop is required for screen readers
+ * - **Accessibility**: Dialog traps focus and can be closed with Escape key when dismissable
+ * - **Accessibility**: Close button is keyboard accessible with proper ARIA labels
+ * - **Accessibility**: Supports prefers-reduced-motion for users with motion sensitivities
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-promodialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
+ */
+declare function PromoDialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: PromoDialogProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PromoDialog {
+    var displayName: string;
+}
+export { PromoDialog };