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

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

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

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

@@ -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/cjs/components/alert/Alert.js

@@ -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.js"),p=require("../icon/Icon.js"),x=f.tv({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"}}),m={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}=x({variant:e}),y=m[e],b={role:e==="danger"?"alert":"status","aria-live":e==="danger"?"assertive":"polite","aria-atomic":!0,"aria-relevant":"additions removals"};return r.jsxs("div",{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/parts/AlertActions.d.ts

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

@@ -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.js"),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/AlertTitle.js

@@ -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.js"),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/app-layout/AppLayout.js

@@ -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"),b=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"],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 g({children:a,menu:s,header:t,footer:u,withoutContentPadding:l=!1}){const r=m.useRef(null),{height:o=0}=v.useResizeObserver({ref:r,box:"border-box"}),{body:n,header:y,menu:i,layoutWrapper:c,contentWrapper:d,content:p,footer:f}=b({withoutContentPadding:l}),h={"--uy-app-layout-menu-height":`calc(100dvh - ${o}px)`,"--uy-app-layout-header-sticky-offset":`${o}px`};return e.jsxs("div",{className:n(),style:h,children:[t&&e.jsx("div",{ref:r,className:y(),role:"alert","aria-live":"assertive",children:t}),e.jsxs("div",{className:c(),children:[e.jsx("div",{className:i(),children:s}),e.jsxs("div",{className:d(),children:[e.jsx("div",{className:p(),children:a}),u&&e.jsx("footer",{className:f(),children:u})]})]})]})}exports.AppLayout=g;

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

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

@@ -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.js"),j=require("../../avatar/Avatar.js"),M=require("../../avatar/parts/AvatarFallback.js"),q=require("../../avatar/parts/AvatarImage.js"),N=require("../../badge/Badge.js"),x=require("../../icon/Icon.js"),w=require("../../menu/Menu.js"),A=require("../../menu/parts/MenuContent.js"),P=require("../../menu/parts/MenuHeader.js"),I=require("../../menu/parts/MenuTrigger.js"),F=require("./AppMenu.context.js"),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:i,title:u,uploadAvatarCallback:a,uploadAvatarLabel:l,uploadAvatarDescription:s})=>{const[r,o]=f.useState(!0),c=b.useIntl(),n=()=>{i&&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:n,onHoverEnd:n,onFocus:n,onBlur:n,onPress:()=>{a==null||a()},children:[e.jsx(v,{avatar:t,avatarPair:i,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:i,avatarPair:u,badgeLabel:a,description:l,menuTriggerDescription:s,title:r,uploadAvatarCallback:o,uploadAvatarLabel:c,uploadAvatarDescription:n})=>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:i,avatarPair:u,title:r,uploadAvatarLabel:c,uploadAvatarDescription:n,uploadAvatarCallback:o}):e.jsx(v,{avatar:i,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",children:r}),e.jsx("span",{className:"uy-typography-body-small uy-text-content-neutral-low",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(N.Badge,{className:"uy-capitalize",variant:"neutral",children:a}):e.jsx(x.Icon,{src:"CaretUpDownOutlined",alt:"open",size:20,color:"inherit"})})]}),V=({avatar:t,avatarPair:i,badgeLabel:u,children:a,computeSlot:l,description:s,title:r,menuTriggerDescription:o,uploadAvatarCallback:c,uploadAvatarLabel:n,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(w.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:i,badgeLabel:u,description:s,menuTriggerDescription:o,title:r,uploadAvatarCallback:c,uploadAvatarLabel:n,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:i,badgeLabel:u,description:s,menuTriggerDescription:o,title:r,uploadAvatarCallback:c,uploadAvatarLabel:n,uploadAvatarDescription:y})}),a]})]})]})};exports.AppMenuFooter=V;

package/dist/cjs/components/app-menu/parts/AppMenuHeader.js

@@ -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.js"),p=require("../../payfit-brand/PayFitBrand.js"),y=require("../../payfit-brand/PayFitPreprod.js"),m=require("./AppMenu.context.js"),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/AppMenuNavContent.js

@@ -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.js"),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/avatar/Avatar.d.ts

@@ -0,0 +1,206 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
+    size: {
+        xs: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        sm: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        md: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        lg: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        xl: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+    variant: {
+        circle: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        square: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+}, undefined, "uy-inline-block uy-relative uy-shrink-0", import('tailwind-variants/dist/config').TVConfig<{} | {
+    size: {
+        xs: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        sm: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        md: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        lg: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        xl: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+    variant: {
+        circle: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        square: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export type AvatarProps = PropsWithChildren<{
+    /** Additional class names to apply to the avatar */
+    className?: string;
+    /** The avatar's variant. One of: circle or square */
+    variant?: VariantProps<typeof avatarRoot>['variant'];
+    /** Size of the avatar. One of: xs, sm, md, lg, xl */
+    size?: VariantProps<typeof avatarRoot>['size'];
+    /** Accessible label for the avatar */
+    'aria-label': string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+}>;
+/**
+ * The Avatar component displays visual or text content for representing people or entities.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<{
+    /** Additional class names to apply to the avatar */
+    className?: string;
+    /** The avatar's variant. One of: circle or square */
+    variant?: VariantProps<typeof avatarRoot>["variant"];
+    /** Size of the avatar. One of: xs, sm, md, lg, xl */
+    size?: VariantProps<typeof avatarRoot>["size"];
+    /** Accessible label for the avatar */
+    'aria-label': string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar };

package/dist/cjs/components/avatar/Avatar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("react"),v=require("@radix-ui/react-avatar"),m=require("tailwind-merge"),f=require("tailwind-variants"),p=require("./Avatar.context.js"),b=require("./Avatar.variants.js");function n(e){if(e&&typeof e=="object"&&"default"in e)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const y=n(d),o=n(v),g=f.tv({extend:b.avatarBase,base:"uy-inline-block uy-relative uy-shrink-0",defaultVariants:{size:"md",variant:"circle"}}),c=y.forwardRef(({size:e="md",variant:t="circle",className:a,...r},s)=>{const l=g({variant:t,size:e}),u=m.twMerge(l,a);return i.jsx(p.AvatarProvider,{variant:t,size:e,hasPair:!1,children:i.jsx(o.Root,{ref:s,role:"img",className:u,...r})})});c.displayName=o.Root.displayName;exports.Avatar=c;

package/dist/cjs/components/avatar/Avatar.variants.d.ts

@@ -0,0 +1,85 @@
+export declare const avatarBase: import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, unknown, unknown, undefined>>;