@payfit/unity-components 0.0.0-alpha.11

package/README.md

@@ -0,0 +1,3 @@
+# Unity components
+
+The Unity component library exports the complete set of reusable components defined in PayFit's new Unity Design system.

package/dist/cjs/components/actionable/Actionable.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("react"),l=require("react-aria-components"),c=require("tailwind-merge"),u=require("tailwind-variants"),d=u.tv({base:"group",variants:{isUnstyled:{true:"",false:"disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled"}},defaultVariants:{isUnstyled:!1}}),e=o.forwardRef(({children:t,className:a,isUnstyled:r=!1,...s},n)=>i.jsx(l.Button,{ref:n,className:c.twMerge(d({isUnstyled:r}),a),...s,children:t}));e.displayName="Actionable";exports.Actionable=e;

package/dist/cjs/components/actionable/Actionable.d.cts

@@ -0,0 +1,12 @@
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+export interface ActionableProps extends AriaButtonProps {
+    /** Additional class names to apply to the actionable */
+    className?: string;
+    /** set to true to remove the Actionable's base styles */
+    isUnstyled?: boolean;
+}
+/**
+ * The Actionable primitive is a component that helps you build interactive surfaces of any kind.
+ */
+declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { Actionable };

package/dist/cjs/components/alert/Alert.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("react"),f=require("tailwind-variants"),w=require("../icon-button/CircularIconButton.cjs"),p=require("../icon/Icon.cjs"),m=f.tv({slots:{base:"uy-p-200 uy-flex uy-gap-200 uy-border uy-border-solid 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"}},s=g.forwardRef(({children:o,variant:e,isDismissable:n,onDismiss:t,dismissButtonLabel:a,...c},i)=>{const{base:l,content:u,icon:d}=m({variant:e}),y=x[e],b={role:e==="danger"?"alert":"status","aria-live":e==="danger"?"assertive":"polite","aria-atomic":!0,"aria-relevant":"additions removals"};return r.jsxs("div",{"data-dd-privacy":"mask",ref:i,className:l(),...b,...c,children:[r.jsx("div",{className:d(),children:r.jsx(p.Icon,{size:24,...y,alt:`${e} alert`})}),r.jsx("section",{className:u(),children:o}),n&&r.jsx(w.CircularIconButton,{title:a,icon:"CloseOutlined",onPress:t})]})});s.displayName="Alert";exports.Alert=s;

package/dist/cjs/components/alert/Alert.d.cts

@@ -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.js').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.js').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/cjs/components/alert/parts/AlertActions.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),s=require("tailwind-variants"),a=s.tv({base:"uy-flex uy-gap-100",variants:{direction:{row:"uy-flex-row",column:"uy-flex-col"}},defaultVariants:{direction:"column"}}),e=i.forwardRef(({children:t,direction:r="column"},o)=>n.jsx("footer",{ref:o,className:a({direction:r}),children:t}));e.displayName="AlertActions";exports.AlertActions=e;

package/dist/cjs/components/alert/parts/AlertActions.d.cts

@@ -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.js').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.js').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/cjs/components/alert/parts/AlertContent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react"),s=require("../../text/Text.cjs"),e=i.forwardRef(({children:t,...r},n)=>o.jsx(s.Text,{variant:"body",ref:n,...r,children:t}));e.displayName="AlertContent";exports.AlertContent=e;

package/dist/cjs/components/alert/parts/AlertContent.d.cts

@@ -0,0 +1,17 @@
+import { TextProps } from '../../text/Text.cjs';
+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/cjs/components/alert/parts/AlertTitle.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),n=require("../../text/Text.cjs"),t=a.forwardRef(({children:r,asElement:i="h3",...l},s)=>e.jsx("header",{children:e.jsx(n.Text,{variant:"h4",asElement:i,ref:s,className:"uy-pt-50",...l,children:r})}));t.displayName="AlertTitle";exports.AlertTitle=t;

package/dist/cjs/components/alert/parts/AlertTitle.d.cts

@@ -0,0 +1,17 @@
+import { TextProps } from '../../text/Text.cjs';
+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/cjs/components/anchor/Anchor.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),h=require("tailwind-variants"),f=h.tv({slots:{root:"uy-relative uy-inline-block uy-leading-[0]",main:"uy-relative uy-leading-[0]",anchor:"uy-absolute uy-leading-[0] uy-scale-100"},variants:{position:{"top-left":{anchor:"uy-origin-top-left -uy-translate-x-1/2 -uy-translate-y-1/2 -uy-top-[var(--anchor-offset-y)] -uy-left-[var(--anchor-offset-x)]"},"top-right":{anchor:"uy-origin-top-right uy-translate-x-1/2 -uy-translate-y-1/2 -uy-top-[var(--anchor-offset-y)] -uy-right-[var(--anchor-offset-x)]"},"bottom-right":{anchor:"uy-origin-bottom-right uy-translate-x-1/2 uy-translate-y-1/2 -uy-bottom-[var(--anchor-offset-x)] -uy-right-[var(--anchor-offset-y)]"},"bottom-left":{anchor:"uy-origin-bottom-left -uy-translate-x-1/2 uy-translate-y-1/2 -uy-bottom-[var(--anchor-offset-x)] -uy-left-[var(--anchor-offset-y)]"}}}}),n=({children:s,position:i="top-right",offset:t=0})=>{const[e,a]=s;if(!e||!a)throw new Error("Badge component requires exactly 2 children");const c=o.useMemo(()=>Array.isArray(t)?{"--anchor-offset-x":`${t[0]}px`,"--anchor-offset-y":`${t[1]}px`}:{"--anchor-offset-x":`${t}px`,"--anchor-offset-y":`${t}px`},[t]),{root:l,main:y,anchor:u}=f({position:i});return r.jsxs("div",{className:l(),style:c,children:[r.jsx("div",{className:y(),children:o.cloneElement(e)}),r.jsx("div",{className:u(),children:o.cloneElement(a)})]})};n.displayName="Anchor";exports.Anchor=n;

package/dist/cjs/components/anchor/Anchor.d.cts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+export type AnchorPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+interface AnchorProps {
+    children: [ReactElement, ReactElement];
+    position?: AnchorPosition;
+    offset?: number | [number, number];
+}
+/**
+ * The Anchor component is a primitive used to anchor a small component to a larger one in any of the large component's corners.
+ */
+declare const Anchor: {
+    ({ children, position, offset, }: AnchorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Anchor };

package/dist/cjs/components/app-layout/AppLayout.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),x=require("tailwind-variants"),v=require("usehooks-ts"),g=x.tv({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","md:[&:has([data-unity-page])]:uy-pl-0"],content:["uy-flex-1","md:[&:has([data-unity-page])]:uy-pr-0 md:[&:has([data-unity-page])]:uy-pt-0"],footer:["uy-hidden","md:uy-block"]},variants:{withoutContentPadding:{false:{content:["md:uy-pr-300","md:uy-pt-250","&:has()"],contentWrapper:["md:uy-pl-100"]},true:{content:[],contentWrapper:[]}}}});function b({children:o,menu:s,header:t,footer:a,withoutContentPadding:y=!1}){const u=m.useRef(null),{height:r=0}=v.useResizeObserver({ref:u,box:"border-box"}),{body:n,header:l,menu:i,layoutWrapper:d,contentWrapper:c,content:p,footer:h}=g({withoutContentPadding:y}),f={"--uy-app-layout-menu-height":`calc(100dvh - ${r}px)`,"--uy-app-layout-header-sticky-offset":`${r}px`};return e.jsxs("div",{className:n(),style:f,children:[t&&e.jsx("div",{ref:u,className:l(),role:"alert","aria-live":"assertive",children:t}),e.jsxs("div",{className:d(),children:[e.jsx("div",{className:i(),children:s}),e.jsxs("div",{className:c(),children:[e.jsx("div",{className:p(),children:o}),a&&e.jsx("footer",{className:h(),children:a})]})]})]})}exports.AppLayout=b;

package/dist/cjs/components/app-layout/AppLayout.d.cts

@@ -0,0 +1,27 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type AppLayoutProps = PropsWithChildren<{
+    /**
+     * The header component to be displayed at the top of the layout
+     * @default undefined
+     */
+    header?: ReactNode;
+    /**
+     * The menu component to be displayed on the side of the layout
+     */
+    menu: ReactNode;
+    /**
+     * The footer component to be displayed at the bottom of the layout
+     * @default undefined
+     */
+    footer?: ReactNode;
+    /**
+     * Removes the padding top and right for the content
+     * @default: false
+     */
+    withoutContentPadding?: boolean;
+}>;
+/**
+ * The `AppLayout` component creates a responsive base structure with a fixed menu sidebar.
+ * Use this when you need a complex layout with a persistent navigation menu.
+ */
+export declare function AppLayout({ children, menu: MenuElement, header: HeaderElement, footer: FooterElement, withoutContentPadding, }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/app-menu/AppMenu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./parts/AppMenu.context.cjs"),u=({children:p})=>e.jsx(t.AppMenuContextProvider,{children:e.jsx("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})});u.displayName="AppMenu";exports.AppMenu=u;

package/dist/cjs/components/app-menu/AppMenu.d.cts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface AppMenuProps {
+    children: ReactNode;
+}
+declare const AppMenu: {
+    ({ children }: AppMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AppMenu };

package/dist/cjs/components/app-menu/parts/AppMenu.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("react"),t=e.createContext({isMobileMenuOpen:!1,toggleMobileMenu:()=>null});function M({children:n}){const[o,u]=e.useState(!1),s={toggleMobileMenu:()=>{u(i=>!i)},isMobileMenuOpen:o};return r.jsx(t.Provider,{value:s,children:n})}function l(){return e.useContext(t)}exports.AppMenuContext=t;exports.AppMenuContextProvider=M;exports.useAppMenuContext=l;

package/dist/cjs/components/app-menu/parts/AppMenu.context.d.cts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+type AppMenuContextValue = {
+    isMobileMenuOpen: boolean;
+    toggleMobileMenu: () => void;
+};
+export declare const AppMenuContext: import('react').Context<AppMenuContextValue>;
+export declare function AppMenuContextProvider({ children, }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+export declare function useAppMenuContext(): AppMenuContextValue;
+export {};

package/dist/cjs/components/app-menu/parts/AppMenuFooter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),b=require("react-intl"),m=require("tailwind-merge"),g=require("../../actionable/Actionable.cjs"),j=require("../../avatar/Avatar.cjs"),M=require("../../avatar/parts/AvatarFallback.cjs"),q=require("../../avatar/parts/AvatarImage.cjs"),w=require("../../badge/Badge.cjs"),x=require("../../icon/Icon.cjs"),N=require("../../menu/Menu.cjs"),A=require("../../menu/parts/MenuContent.cjs"),P=require("../../menu/parts/MenuHeader.cjs"),I=require("../../menu/parts/MenuTrigger.cjs"),F=require("./AppMenu.context.cjs"),v=t=>e.jsxs(j.Avatar,{"aria-label":`${t.title} avatar`,size:"md",variant:"square","aria-labelledby":"profile-button-label",children:[e.jsx(q.AvatarImage,{src:t.avatar,alt:t.title??""}),e.jsx(M.AvatarFallback,{variant:"initials",delayMs:100,children:t.title}),t.avatarPair&&f.isValidElement(t.avatarPair)&&f.cloneElement(t.avatarPair,{isHidden:!t.isPairAvatarVisible})]}),H=({avatar:t,avatarPair:n,title:u,uploadAvatarCallback:a,uploadAvatarLabel:l,uploadAvatarDescription:s})=>{const[r,o]=f.useState(!0),c=b.useIntl(),i=()=>{n&&o(d=>!d)},y=m.twMerge("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 e.jsxs(g.Actionable,{"aria-describedby":"profile-picture-change-desc","aria-label":l||c.formatMessage({id:"unity:component:app-menu:footer:profile-button:avatar:change",defaultMessage:"Change profile picture"}),className:y,onHoverStart:i,onHoverEnd:i,onFocus:i,onBlur:i,onPress:()=>{a==null||a()},children:[e.jsx(v,{avatar:t,avatarPair:n,title:u,isPairAvatarVisible:r}),e.jsxs("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:[e.jsx(x.Icon,{alt:"Camera",color:"content.inverted",size:24,src:"CameraOutlined"}),e.jsx("span",{className:"uy-sr-only",id:"profile-picture-change-desc",children:s||e.jsx(b.FormattedMessage,{id:"unity:component:app-menu:footer:profile-button:avatar:change-description",defaultMessage:"Press enter to change profile picture"})})]})]})},p=({asMenuHeader:t=!1,avatar:n,avatarPair:u,badgeLabel:a,description:l,menuTriggerDescription:s,title:r,uploadAvatarCallback:o,uploadAvatarLabel:c,uploadAvatarDescription:i})=>e.jsxs("div",{className:"uy-min-w-[240px] uy-w-full uy-flex uy-items-center",children:[e.jsx("div",{className:"uy-mr-150 uy-flex uy-items-center",children:o?e.jsx(H,{avatar:n,avatarPair:u,title:r,uploadAvatarLabel:c,uploadAvatarDescription:i,uploadAvatarCallback:o}):e.jsx(v,{avatar:n,avatarPair:u,title:r,isPairAvatarVisible:!0})}),e.jsxs("div",{className:"uy-flex uy-flex-col uy-text-left uy-leading-125 uy-min-w-[50%] uy-flex-grow",children:[e.jsx("span",{id:"profile-button-label",className:"uy-typography-body-strong uy-text-content-neutral uy-text-wrap","data-dd-privacy":"mask",children:r}),e.jsx("span",{className:"uy-typography-body-small uy-text-content-neutral-low","data-dd-privacy":"allow",children:l}),!t&&e.jsx("span",{id:"profile-button-description",className:"uy-sr-only",children:s||e.jsx(b.FormattedMessage,{id:"unity:component:app-menu:footer:profile-button:description",defaultMessage:"Press this button to open the profile menu."})})]}),e.jsx("div",{className:"uy-p-100",children:t?e.jsx(w.Badge,{className:"uy-capitalize",variant:"neutral",children:a}):e.jsx(x.Icon,{src:"CaretUpDownOutlined",alt:"open",size:20,color:"inherit"})})]}),V=({avatar:t,avatarPair:n,badgeLabel:u,children:a,computeSlot:l,description:s,title:r,menuTriggerDescription:o,uploadAvatarCallback:c,uploadAvatarLabel:i,uploadAvatarDescription:y})=>{const{isMobileMenuOpen:d}=F.useAppMenuContext(),h=m.twMerge("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 e.jsxs("aside",{className:h,"data-mobile-open":d,id:"app-menu-profile-button",children:[l,e.jsxs(N.Menu,{children:[e.jsx(I.MenuTrigger,{asChild:!0,children:e.jsx(g.Actionable,{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:e.jsx(p,{avatar:t,avatarPair:n,badgeLabel:u,description:s,menuTriggerDescription:o,title:r,uploadAvatarCallback:c,uploadAvatarLabel:i,uploadAvatarDescription:y})})}),e.jsxs(A.MenuContent,{width:312,placement:"top left",children:[e.jsx(P.MenuHeader,{className:"uy-rounded-75",children:e.jsx(p,{asMenuHeader:!0,avatar:t,avatarPair:n,badgeLabel:u,description:s,menuTriggerDescription:o,title:r,uploadAvatarCallback:c,uploadAvatarLabel:i,uploadAvatarDescription:y})}),a]})]})]})};exports.AppMenuFooter=V;

package/dist/cjs/components/app-menu/parts/AppMenuFooter.d.cts

@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode } from 'react';
+import { AvatarPairProps } from '../../avatar/parts/AvatarPair.cjs';
+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/cjs/components/app-menu/parts/AppMenuHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react-intl"),c=require("react-router-dom"),d=require("../../icon-button/IconButton.cjs"),p=require("../../payfit-brand/PayFitBrand.cjs"),y=require("../../payfit-brand/PayFitPreprod.cjs"),m=require("./AppMenu.context.cjs"),x=({environment:t,linkHref:r,linkLabel:o,notificationsComponent:u,searchComponent:i})=>{const{isMobileMenuOpen:n,toggleMobileMenu:a}=m.useAppMenuContext(),s=l.useIntl();return e.jsxs("header",{className:"uy-flex uy-flex-col uy-gap-y-200 uy-pl-25 uy-pr-25",children:[e.jsx("div",{className:"uy-block md:uy-hidden",children:e.jsx(d.IconButton,{variant:"ghost",color:"neutral",icon:n?"CloseOutlined":"ListOutlined",label:s.formatMessage({id:n?"unity:component:app-menu:header:menu-close":"unity:component:app-menu:header:menu-open",defaultMessage:n?"Close navigation":"Open navigation"}),onClick:a,"aria-expanded":n,"aria-controls":"app-menu-nav-container app-menu-profile-button"})}),e.jsxs("div",{className:"uy-hidden uy-justify-between uy-items-center md:uy-flex",children:[e.jsx(c.Link,{to:r,children:t==="production"?e.jsx(p.PayFitBrand,{label:o,width:104}):e.jsx(y.PayFitBrandPreprod,{label:o,env:t})}),u]}),e.jsx("div",{className:"uy-hidden md:uy-flex",children:i})]})};exports.AppMenuHeader=x;

package/dist/cjs/components/app-menu/parts/AppMenuHeader.d.cts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface AppMenuHeader {
+    environment: 'production' | 'working' | 'testing' | 'development' | 'local';
+    linkHref: string;
+    linkLabel: string;
+    notificationsComponent?: ReactNode;
+    searchComponent?: ReactNode;
+}
+export declare const AppMenuHeader: ({ environment, linkHref, linkLabel, notificationsComponent, searchComponent, }: AppMenuHeader) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/app-menu/parts/AppMenuNavContent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("tailwind-merge"),y=require("./AppMenu.context.cjs"),a=({children:e})=>{const{isMobileMenuOpen:u}=y.useAppMenuContext(),t=o.twMerge("uy-flex-col uy-overflow-y-auto uy-overflow-x-hidden uy-gap-y-100 uy-pl-200 uy-pr-200 uy-pb-200 uy-scroll-py-100 md:uy-flex","uy-bg-canvas md:uy-bg-[transparent]","uy-absolute uy-top-800 uy-left-0 uy-right-0 uy-z-10 uy-h-svh md:uy-static md:uy-w-auto md:uy-pl-50 md:uy-pr-50 md:uy-pb-50","data-[mobile-open=false]:uy-hidden md:data-[mobile-open=false]:uy-flex data-[mobile-open=true]:uy-flex");return n.jsx("div",{className:t,"data-mobile-open":u,id:"app-menu-nav-container",children:e})};exports.AppMenuNavContent=a;

package/dist/cjs/components/app-menu/parts/AppMenuNavContent.d.cts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export type AppMenuNavContentProps = {
+    children: ReactNode;
+};
+export declare const AppMenuNavContent: ({ children }: AppMenuNavContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/autocomplete/Autocomplete.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),R=require("react-aria"),y=require("react-aria-components"),N=require("react-intl"),B=require("tailwind-variants"),C=require("usehooks-ts"),b=require("../icon/Icon.cjs"),O=require("../spinner/Spinner.cjs"),k=require("../text/Text.cjs"),T=require("./parts/AutocompleteClearButton.cjs"),W=require("./parts/AutocompletePanel.cjs"),P=B.tv({slots:{base:["uy-group uy-w-full uy-flex uy-gap-100 uy-border uy-border-solid uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-border-border-form-enabled","enabled:uy-border-border-form-enabled enabled:uy-bg-surface-danger-enabled enabled:uy-border-border-form-enabled","focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-utility-focus-ring focus-visible:uy-ring-offset-2 focus-visible:uy-border-border-form-focus focus-visible:uy-bg-surface-form-focus","active:uy-border-border-form-active","data-[disabled=true]:uy-border-border-form-disabled data-[disabled=true]:uy-bg-surface-form-disabled","data-[invalid=true]:uy-border-border-form-error data-[invalid=true]:uy-bg-surface-form-error"],input:["uy-h-300 uy-typography-body uy-flex-grow uy-outline-none [&::-webkit-search-cancel-button]:uy-hidden","enabled:uy-text-content-form-enabled","hover:uy-text-content-form-hover","focus-visible:uy-text-content-form-focus","active:uy-text-content-form-active","group-data-[invalid=true]:uy-bg-surface-form-error"],clearButton:[],icon:["uy-self-center","group-data-[disabled=true]:uy-text-content-neutral-lowest-disabled"],invalidIcon:["uy-self-center uy-hidden","group-data-[invalid=true]:uy-block"],wrapperState:["uy-flex uy-items-center uy-gap-50"]},variants:{isReadOnly:{true:{base:"uy-bg-surface-form-disabled",icon:"uy-text-content-neutral-lowest-disabled",button:"uy-bg-surface-form-error uy-text-content-neutral-disabled",clearButton:"uy-hidden",input:"uy-bg-surface-form-disabled uy-text-content-form-read-only uy-placeholder-content-form-read-only uy-cursor-text"},false:{base:["uy-bg-surface-form-enabled","hover:uy-border-border-form-hover hover:uy-bg-surface-form-hover data-[disabled=true]:uy-cursor-not-allowed"],icon:"uy-text-content-neutral-lowest",input:"uy-bg-text-content-form-active uy-placeholder-content-neutral-lowest group-data-[disabled=true]:uy-cursor-not-allowed"}}}}),z=({intl:a,placeholder:r,isDisabled:o})=>o?"":r||a.formatMessage({id:"unity:component:autocomplete:placeholder",defaultMessage:"Search"}),D=(a,r)=>{const{placeholder:o,isDisabled:l,isInvalid:c,isReadOnly:n,items:m,children:p,loadingState:i,name:g,feedbackText:h,...x}=a,u=N.useIntl(),t=s.useRef(null),[v,j]=s.useState(null),d=R.useId(),w=s.useCallback(()=>{t.current&&j(`${t.current.offsetWidth}px`)},[t]);C.useResizeObserver({ref:t,onResize:w});const{base:q,input:I,icon:A,invalidIcon:S,wrapperState:M,clearButton:E}=P({isReadOnly:n});return e.jsxs("search",{ref:r,children:[e.jsxs(y.ComboBox,{className:q(),name:g,isInvalid:c,isDisabled:l||n,isReadOnly:n,ref:t,"aria-label":u.formatMessage({id:"unity:component:autocomplete:placeholder",defaultMessage:"Search"}),items:m,...x,children:[e.jsx(b.Icon,{src:"MagnifyingGlassOutlined",className:A(),"aria-hidden":"true"}),e.jsx(y.Input,{className:I(),"aria-describedby":d,placeholder:z({intl:u,placeholder:o,isDisabled:l})}),e.jsxs("div",{className:M(),children:[e.jsx(b.Icon,{className:S(),src:"WarningCircleOutlined",color:"content.form.invalid",alt:u.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),i&&i!=="error"&&i!=="idle"&&e.jsx("span",{className:"uy-px-50",children:e.jsx(O.Spinner,{label:u.formatMessage({id:"unity:component:common:loading:label",defaultMessage:"Loading..."}),color:"primary",size:"small","aria-hidden":"true"})}),e.jsx(T.AutocompleteClearButton,{isReadOnly:n,isDisabled:l})]}),e.jsx(W.AutocompletePanel,{panelWidth:v,searchRef:t,children:p})]}),c&&e.jsx(k.Text,{id:d,className:"uy-typography-body-small-strong uy-text-content-form-invalid",children:h})]})},f=s.forwardRef(function(r,o){return D(r,o)});f.displayName="Autocomplete";exports.Autocomplete=f;

package/dist/cjs/components/autocomplete/Autocomplete.d.cts

@@ -0,0 +1,156 @@
+import { LoadingState } from '@react-types/shared';
+import { ForwardedRef, ReactNode } from 'react';
+import { ComboBoxProps, ListBoxProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+declare const autocomplete: import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    clearButton: never[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}>, {
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    clearButton: never[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+}, import('tailwind-variants').TVReturnType<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    base: string[];
+    input: string[];
+    clearButton: never[];
+    icon: string[];
+    invalidIcon: string[];
+    wrapperState: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}, {
+    isReadOnly: {
+        true: {
+            base: string;
+            icon: string;
+            button: string;
+            clearButton: string;
+            input: string;
+        };
+        false: {
+            base: string[];
+            icon: string;
+            input: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface AutocompleteProps<T extends object> extends Omit<ComboBoxProps<T>, 'className' | 'style' | 'children' | 'onSelectionChange'>, VariantProps<typeof autocomplete> {
+    /** Custom placeholder text for the search input */
+    placeholder?: string;
+    /** In dynamic mode, contains the items to display in the search results */
+    items?: ListBoxProps<T>['items'];
+    /** In static mode, contains <AutocompleteItem /> components, in dynamic mode, contains a function to render items passed to the component */
+    children: ListBoxProps<T>['children'];
+    /** Whether the search is currently loading results */
+    loadingState?: LoadingState;
+    /** The name of the search field, used for form submission */
+    name: string;
+    /** Feedback text to display below the autocomplete field. */
+    feedbackText?: ReactNode;
+}
+type AutocompleteComponent = (<TItems extends object>(props: AutocompleteProps<TItems> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `Autocomplete` component is used to create a searchable input field with a dropdown list of results.
+ * It allows users to search through a collection of items and select one.
+ */
+declare const Autocomplete: AutocompleteComponent;
+export { Autocomplete };

package/dist/cjs/components/autocomplete/parts/AutocompleteClearButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),a=require("react"),c=require("react-aria-components"),s=require("react-intl"),i=require("tailwind-merge"),m=require("../../icon-button/CircularIconButton.cjs"),t=({className:n,isReadOnly:o,isDisabled:r})=>{const e=a.useContext(c.ComboBoxStateContext),u=s.useIntl();return!(e!=null&&e.inputValue)||o||r?null:l.jsx(m.CircularIconButton,{slot:null,title:u.formatMessage({id:"unity:component:common:clear:title",defaultMessage:"Clear"}),className:i.twMerge(n,"uy-text-content-neutral-enabled group-data-[empty=true]:uy-hidden"),icon:"CloseOutlined",onPress:()=>{e.setSelectedKey(null)}})};t.displayName="ClearButton";exports.AutocompleteClearButton=t;

package/dist/cjs/components/autocomplete/parts/AutocompleteClearButton.d.cts

@@ -0,0 +1,18 @@
+interface AutocompleteClearButtonProps {
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+}
+/**
+ * The `ClearButton` component is used within the `Autocomplete` component to provide a way to clear the current autocomplete input.
+ * It appears only when there is text in the autocomplete field and disappears when the field is empty.
+ * @example
+ * ```tsx
+ * <ClearButton intl={intl} />
+ * ```
+ */
+declare const AutocompleteClearButton: {
+    ({ className, isReadOnly, isDisabled, }: AutocompleteClearButtonProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { AutocompleteClearButton };

package/dist/cjs/components/autocomplete/parts/AutocompleteItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),c=require("react-aria-components"),d=require("tailwind-variants"),e=d.tv({base:["uy-flex uy-flex-col uy-typography-body uy-rounded-50 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-outline-none uy-bg-surface-neutral-enabled enabled:uy-text-content-neutral-enabled","enabled:uy-bg-surface-neutral-enabled enabled:uy-text-content-neutral-enabled","data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-text-content-neutral-pressed","data-[focus-visible]:uy-outline-offset-2 data-[focus-visible]:uy-outline-2 data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-bg-surface-neutral-focus data-[focus-visible]:uy-text-content-neutral-focus","data-[disabled]:uy-text-content-neutral-disabled"],variants:{isDisabled:{false:"hover:uy-bg-surface-neutral-hover",true:"uy-cursor-not-allowed"}}}),t=i.forwardRef(({children:u,isDisabled:a,textValue:s,...n},o)=>r.jsx(c.ListBoxItem,{...n,isDisabled:a,textValue:s,ref:o,className:({isDisabled:l})=>e({isDisabled:l}),children:u}));t.displayName="AutocompleteItem";exports.AutocompleteItem=t;exports.autocompleteItem=e;