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

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

@@ -9,7 +9,7 @@ interface AnchorProps {
  * 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): JSX.Element;
+    ({ children, position, offset, }: AnchorProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Anchor };

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

@@ -14,9 +14,14 @@ export type AppLayoutProps = PropsWithChildren<{
      * @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, }: AppLayoutProps): JSX.Element;
+export declare function AppLayout({ children, menu: MenuElement, header: HeaderElement, footer: FooterElement, withoutContentPadding, }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;

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

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

@@ -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/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/AppMenu.context.d.ts

@@ -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/AppMenu.context.js

@@ -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/AppMenuFooter.d.ts

@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode } from 'react';
+import { AvatarPairProps } from '../../avatar/parts/AvatarPair.js';
+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/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.d.ts

@@ -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/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.d.ts

@@ -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/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.context.d.ts

@@ -6,6 +6,6 @@ type AvatarContextValue = {
 export declare const AvatarContext: import('react').Context<AvatarContextValue>;
 export declare function AvatarProvider({ variant, size, hasPair, children, }: AvatarContextValue & {
     children: React.ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function useAvatarContext(): AvatarContextValue;
 export {};

package/dist/cjs/components/avatar/parts/AvatarFallback.d.ts

@@ -149,7 +149,7 @@ type AvatarFallbackInitialsProps = AvatarFallbackBaseProps & {
     /** The fallback's variant. It can be one of: `initials`, `placeholder` */
     variant: 'initials';
     /** The initials to display as fallback content. Only available when variant is set to `initials` */
-    children: React.ReactNode;
+    children: string | null | undefined;
     color?: never;
 };
 type AvatarFallbackPlaceholderProps = AvatarFallbackBaseProps & {

package/dist/cjs/components/avatar/parts/AvatarFallback.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("react"),m=require("@radix-ui/react-avatar"),h=require("tailwind-merge"),s=require("tailwind-variants"),w=require("../Avatar.context.js"),u=require("../Avatar.variants.js");function i(e){if(e&&typeof e=="object"&&"default"in e)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const x=i(v),c=i(m),j=s.tv({extend:u.avatarBase,slots:{base:"uy-absolute uy-overflow-hidden",background:"",foreground:""},variants:{color:{blue:{background:"uy-bg-blue-L7",foreground:"uy-fill-blue-L5"},sunglow:{background:"uy-bg-sunglow-L3",foreground:"uy-fill-sunglow-L2"},peach:{background:"uy-bg-peach-L3",foreground:"uy-fill-peach-L2"}}}}),k=s.tv({extend:u.avatarBase,base:"uy-absolute uy-flex uy-h-full uy-w-full uy-items-center uy-justify-center uy-text-content-neutral uy-bg-surface-neutral-lowest",variants:{size:{xs:"uy-typography-body-small-strong",sm:"uy-typography-body-small-strong",md:"uy-typography-body-small-strong",lg:"uy-typography-body-strong",xl:"uy-typography-h2"}}}),y=x.forwardRef(({variant:e,color:a,children:t,...r},d)=>{const g=w.useAvatarContext(),{size:o,variant:l}=g;if(e==="placeholder"){const{base:b,background:f,foreground:p}=j({color:a,size:o,variant:l});return n.jsx("svg",{role:"img","aria-hidden":!0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",className:h.twMerge(b(),f()),...r,children:n.jsx("path",{className:p(),fillRule:"evenodd",d:"M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",clipRule:"evenodd"})})}return n.jsx(c.Fallback,{ref:d,role:"presentation",className:k({size:o,variant:l}),...r,children:t})});y.displayName=c.Fallback.displayName;exports.AvatarFallback=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("react"),m=require("@radix-ui/react-avatar"),h=require("tailwind-merge"),s=require("tailwind-variants"),w=require("../Avatar.context.js"),u=require("../Avatar.variants.js"),x=require("../utils.js");function i(e){if(e&&typeof e=="object"&&"default"in e)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const j=i(v),c=i(m),k=s.tv({extend:u.avatarBase,slots:{base:"uy-absolute uy-overflow-hidden",background:"",foreground:""},variants:{color:{blue:{background:"uy-bg-blue-L7",foreground:"uy-fill-blue-L5"},sunglow:{background:"uy-bg-sunglow-L3",foreground:"uy-fill-sunglow-L2"},peach:{background:"uy-bg-peach-L3",foreground:"uy-fill-peach-L2"}}}}),q=s.tv({extend:u.avatarBase,base:"uy-absolute uy-flex uy-h-full uy-w-full uy-items-center uy-justify-center uy-text-content-neutral uy-bg-surface-neutral-lowest",variants:{size:{xs:"uy-typography-body-small-strong",sm:"uy-typography-body-small-strong",md:"uy-typography-body-small-strong",lg:"uy-typography-body-strong",xl:"uy-typography-h2"}}}),y=j.forwardRef(({variant:e,color:a,children:t,...r},d)=>{const g=w.useAvatarContext(),{size:o,variant:l}=g;if(e==="placeholder"){const{base:b,background:f,foreground:p}=k({color:a,size:o,variant:l});return n.jsx("svg",{role:"img","aria-hidden":!0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",className:h.twMerge(b(),f()),...r,children:n.jsx("path",{className:p(),fillRule:"evenodd",d:"M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",clipRule:"evenodd"})})}return n.jsx(c.Fallback,{ref:d,role:"presentation",className:q({size:o,variant:l}),...r,children:x.getInitials(t)})});y.displayName=c.Fallback.displayName;exports.AvatarFallback=y;

package/dist/cjs/components/avatar/parts/AvatarPair.d.ts

@@ -1,6 +1,26 @@
+import { PropsWithChildren } from 'react';
 import { VariantProps } from 'tailwind-variants';
 import { avatarBase } from '../Avatar.variants.js';
 import * as React from 'react';
+export type AvatarPairProps = PropsWithChildren<{
+    /** Variant of the avatar pair. they match the variants of the Avatar component */
+    variant: NonNullable<VariantProps<typeof avatarBase>['variant']>;
+    /**
+     * Set to true to visually hide the avatar pair
+     * @default false
+     */
+    isHidden?: boolean;
+    /** 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 `AvatarPair` component displays a paired, smaller avatar in the bottom-right corner of the containing avatar.
  */

package/dist/cjs/components/avatar/utils.d.ts

@@ -0,0 +1 @@
+export declare const getInitials: (value: string | null | undefined) => string;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=t=>t?t.length<=2?t:t.replace(/[^a-z0-9 ]+/gi,"").split(" ").map(e=>e.charAt(0).toUpperCase()).filter((e,r,n)=>r===0||n.length>0&&r===n.length-1).join(""):"";exports.getInitials=i;

package/dist/cjs/components/breadcrumbs/Breadcrumbs.context.d.ts

@@ -7,6 +7,6 @@ interface BreadcrumbsContextValue {
     isStaticApi: boolean;
 }
 export declare const BreadcrumbsContext: import('react').Context<BreadcrumbsContextValue>;
-export declare function BreadcrumbsProvider({ children, wrap, isMobile, isStaticApi, }: PropsWithChildren<BreadcrumbsContextValue>): JSX.Element;
+export declare function BreadcrumbsProvider({ children, wrap, isMobile, isStaticApi, }: PropsWithChildren<BreadcrumbsContextValue>): import("react/jsx-runtime").JSX.Element;
 export declare function useBreadcrumbsContext(): BreadcrumbsContextValue;
 export {};

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

@@ -1,4 +1,5 @@
 import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from './Button.variants.js';
 type UnityButtonProps = AriaButtonProps & ButtonBase & {
@@ -37,5 +38,5 @@ export type ButtonProps = (UnityButtonProps & {
 /**
  * Buttons allow users to take actions, and make choices, with a single tap.
  */
-declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const Button: import('react').ForwardRefExoticComponent<PropsWithChildren<ButtonProps> & import('react').RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/cjs/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,225 @@
+import { ReactNode } from 'react';
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+export declare const checkbox: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    asterisk: string;
+    optionalTag: string;
+    descriptionsContainer: string;
+    helperText: string;
+    feedbackText: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}>, {
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    asterisk: string;
+    optionalTag: string;
+    descriptionsContainer: string;
+    helperText: string;
+    feedbackText: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    asterisk: string;
+    optionalTag: string;
+    descriptionsContainer: string;
+    helperText: string;
+    feedbackText: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className'> {
+    /**
+     * The content to display as the checkbox label.
+     * This is required for accessibility.
+     */
+    children: ReactNode;
+    /**
+     * Additional text displayed below the checkbox to provide context or guidance.
+     * Can contain rich content like links or formatted text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message displayed when the checkbox is in an invalid state.
+     * Only shown when `isInvalid` is true.
+     */
+    feedbackText?: ReactNode;
+    /**
+     * Controls how the required state is displayed.
+     * - 'required': Shows an asterisk (*) when isRequired is true
+     * - 'optional': Shows "(optional)" text when isRequired is false
+     * @default 'required'
+     */
+    requiredVariant?: 'required' | 'optional';
+    /**
+     * Whether the checkbox is disabled.
+     * When true, the checkbox cannot be interacted with and appears dimmed.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the checkbox is in a read-only state.
+     * When true, the checkbox cannot be modified but maintains normal appearance and can be focused.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the checkbox is in an invalid state.
+     * Use this for form validation feedback.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the checkbox is required.
+     * This affects form validation and the display of required/optional indicators.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Whether the checkbox is selected (controlled).
+     * Use this with `onChange` for controlled checkbox state.
+     */
+    isSelected?: boolean;
+    /**
+     * The default selected state (uncontrolled).
+     * Use this when you don't need to control the checkbox state.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * Useful for parent checkboxes in a tree structure.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Handler called when the checkbox's selected state changes.
+     * @param isSelected The new selected state
+     */
+    onChange?: (isSelected: boolean) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * The name of the checkbox when used in a form.
+     */
+    name?: string;
+    /**
+     * The value of the checkbox when used in a form.
+     */
+    value?: string;
+}
+/**
+ * The `Checkbox` component is an accessible form control that allows users to select multiple options from a set.
+ * It follows WAI-ARIA checkbox patterns and is built on top of React Aria Components.
+ * @param {CheckboxProps} props - The props for the `Checkbox` component
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@payfit/unity-components'
+ *
+ * <Checkbox>Accept terms and conditions</Checkbox>
+ * ```
+ * @see {@link CheckboxProps} for all available props
+ */
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { Checkbox };

package/dist/cjs/components/checkbox/Checkbox.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),D=require("react-aria"),I=require("react-aria-components"),O=require("tailwind-variants"),u=require("../text/Text.js"),$=require("./parts/CheckboxIndicator.js"),y=O.tv({slots:{base:"uy-group uy-inline-flex uy-flex-col uy-gap-50 uy-py-[1px]",wrapper:"uy-inline-flex uy-items-center uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25",asterisk:"uy-text-content-danger",optionalTag:"uy-typography-body",descriptionsContainer:"uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",helperText:"uy-typography-body-small uy-text-content-neutral-low",feedbackText:"uy-typography-body-small-strong uy-text-content-form-invalid"},variants:{isDisabled:{true:{base:"!uy-text-content-form-disabled"}},isInvalid:{true:{}},isReadOnly:{true:{base:"uy-cursor-not-allowed"}}},defaultVariants:{isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isDisabled:!1,isReadOnly:!1,className:{wrapper:"uy-cursor-pointer"}},{isDisabled:!0,isReadOnly:!1,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!1,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!0,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}}]}),b=t.forwardRef(({children:p,helperText:s,feedbackText:i,...l},x)=>{const a=D.useId(),{isDisabled:m,isReadOnly:f,isInvalid:n,isRequired:r,requiredVariant:o="required"}=l,{base:g,wrapper:h,asterisk:v,optionalTag:j,descriptionsContainer:N,helperText:w,feedbackText:q}=y({isDisabled:m,isReadOnly:f,isInvalid:n}),d=[l["aria-labelledby"],`${a}-label`].filter(Boolean),c=[l["aria-describedby"],typeof s=="string"?`${a}-helper-text`:void 0,typeof i=="string"?`${a}-feedback-text`:void 0].filter(Boolean),k=d.length>0?d.join(" "):void 0,R=c.length>0?c.join(" "):void 0;return e.jsxs("div",{className:g(),children:[e.jsx(I.Checkbox,{...l,ref:x,className:h(),"aria-labelledby":k,"aria-describedby":R,children:C=>e.jsxs(e.Fragment,{children:[e.jsx($.CheckboxIndicator,{...C,className:"uy-mr-[6px]"}),e.jsx("span",{id:`${a}-label`,className:"uy-leading-100",children:p}),o==="required"&&r&&e.jsxs("span",{className:v(),children:["*",e.jsx("span",{className:"uy-sr-only",children:"required"})]}),o==="optional"&&!r&&e.jsx("span",{className:j(),children:"(optional)"})]})}),(s||i)&&e.jsxs("div",{className:N(),children:[typeof s=="string"?e.jsx(u.Text,{variant:"bodySmall",color:"content.neutral.low",id:`${a}-helper-text`,children:s}):t.isValidElement(s)&&t.cloneElement(s,{"data-id":`${a}-helper-text`,className:w()}),n&&(typeof i=="string"?e.jsx(u.Text,{variant:"bodySmallStrong",color:"content.form.invalid",id:`${a}-feedback-text`,children:i}):t.isValidElement(i)&&t.cloneElement(i,{"data-id":`${a}-feedback-text`,className:q()}))]})]})});b.displayName="Checkbox";exports.Checkbox=b;exports.checkbox=y;

package/dist/cjs/components/checkbox/parts/CheckboxIndicator.d.ts

@@ -0,0 +1,13 @@
+export interface CheckboxIndicatorProps {
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    className?: string;
+}
+declare function CheckboxIndicator({ isSelected, isDisabled, isIndeterminate, isInvalid, isReadOnly, className, }: CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CheckboxIndicator {
+    var displayName: string;
+}
+export { CheckboxIndicator };

package/dist/cjs/components/checkbox/parts/CheckboxIndicator.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("tailwind-variants"),c=n.tv({slots:{base:["uy-flex uy-items-center uy-justify-center uy-rounded-50 uy-w-200 uy-h-200 uy-text-content-inverted uy-border uy-transition-all uy-duration-100"],checkmark:["uy-w-[16px] uy-fill-none uy-stroke-[2px] uy-stroke-content-inverted uy-transition-all uy-duration-500"]},variants:{isSelected:{true:{base:"uy-border-border-form-active uy-bg-surface-form-active"}},isDisabled:{true:""},isReadOnly:{true:""},isInvalid:{true:""}},defaultVariants:{isSelected:!1,isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isSelected:!1,isDisabled:!1,isInvalid:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled"}},{isSelected:!1,isDisabled:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isDisabled:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-border-form-disabled"}},{isSelected:!1,isInvalid:!0,className:{base:"uy-border-border-form-error uy-bg-surface-form-enabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isInvalid:!0,className:{base:"!uy-border-border-danger !uy-bg-surface-danger",checkmark:"uy-text-content-inverted"}},{isSelected:!1,isReadOnly:!0,className:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isReadOnly:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-border-form-read-only"}}]});function a({isSelected:r,isDisabled:s,isIndeterminate:t,isInvalid:d,isReadOnly:i,className:o}){const{base:l,checkmark:u}=c({isSelected:r,isDisabled:s,isInvalid:d,isReadOnly:i});return e.jsx("div",{className:l({className:o}),children:e.jsx("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 16 16","aria-hidden":"true",className:u(),style:{strokeDashoffset:r?44:66},children:t?e.jsx("rect",{x:"3",y:"7",width:"10",height:"2",rx:"0.5",stroke:"none",fill:"currentColor"}):e.jsx("polyline",{points:"3.5,8 6.5,11 12.5,5",stroke:"currentColor",strokeDasharray:"22",strokeLinecap:"butt",strokeLinejoin:"bevel"})})})}a.displayName="CheckboxIndicator";exports.CheckboxIndicator=a;

package/dist/cjs/components/checkbox-field/CheckboxField.d.ts

@@ -0,0 +1,74 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.js';
+import { LabelProps } from '../label/Label.js';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the checkbox. */
+    children: ReactNode;
+    /** Helper text to display below the checkbox. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the checkbox. */
+    contextualLink?: ReactNode;
+    /** The default selected value of the checkbox. */
+    defaultSelected?: boolean;
+    /** Whether the checkbox is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox is loading. */
+    isLoading?: boolean;
+}
+export type CheckboxFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
+type CheckboxFieldComponent = (<TSchema extends Schema>(props: CheckboxFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLLabelElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `CheckboxField` component enhances the base Checkbox with form integration capabilities,
+ * making it easy to handle boolean values in forms with proper validation and feedback.
+ *
+ * It provides form validation, helper text, and error feedback while maintaining the same
+ * API as the base Checkbox component. The component automatically integrates with Unity's
+ * form context and handles value updates through the form's state management.
+ * @param {CheckboxFieldProps} props - Props for the CheckboxField component
+ * @see {@link CheckboxFieldProps} for all available props
+ * @example
+ * ```tsx
+ * import { useUnityForm, CheckboxField } from '@payfit/unity-components'
+ * import * as z from 'zod'
+ *
+ * function Example() {
+ *   const schema = z.object({
+ *     acceptTerms: z.boolean().refine(Boolean, {
+ *       message: 'You must accept the terms',
+ *     }),
+ *   })
+ *
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <CheckboxField<typeof schema>
+ *         name="acceptTerms"
+ *         helperText="Please read our terms carefully"
+ *       >
+ *         Accept terms and conditions
+ *       </CheckboxField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](/?path=/docs/forms-checkboxfield--docs) • [Demo](/?path=/story/forms-checkboxfield--primary)
+ * @note The schema type parameter is needed to ensure type safety with the form's
+ schema.
+ * If you omit it, the `name` prop will not be type-safe.
+ */
+declare const CheckboxField: CheckboxFieldComponent;
+export { CheckboxField };

package/dist/cjs/components/checkbox-field/CheckboxField.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),q=require("react-hook-form"),y=require("../checkbox/Checkbox.js"),j=require("../form-field/FormField.js"),p=require("../form-field/parts/FormControl.js"),T=require("../form-field/parts/FormFeedbackText.js");function g({name:o,children:r,defaultSelected:c,helperText:n,contextualLink:i,isRequired:s,isInvalid:l,isLoading:u,isDisabled:x,isReadOnly:d,requiredVariant:F,...a},m){const{control:b,watch:k}=q.useFormContext(),h=k(o),C={isRequired:s,isInvalid:l,isLoading:u,isDisabled:x,isReadOnly:d};return e.jsxs(j.FormField,{control:b,name:o,className:"uy-flex uy-flex-col uy-gap-100",...C,children:[e.jsx(p.FormControl,{children:e.jsx(y.Checkbox,{ref:m,defaultSelected:c,isSelected:h,requiredVariant:F,helperText:n,feedbackText:e.jsx(T.FormFeedbackText,{}),...a,children:r})}),i]})}const t=f.forwardRef(function(r,c){return g(r,c)});t.displayName="CheckboxField";exports.CheckboxField=t;

package/dist/cjs/components/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const checkboxGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface CheckboxGroupProps extends VariantProps<typeof checkboxGroup>, Omit<AriaCheckboxGroupProps, 'className' | 'class'> {
+    /** The label for the checkbox group. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the checkbox group. */
+    feedbackText?: ReactNode;
+    /** The default selected values of the checkbox group. */
+    defaultValue?: string[];
+    /** The current selected values of the checkbox group (controlled). */
+    value?: string[];
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox group is required. */
+    isRequired?: boolean;
+    /** Whether the checkbox group is loading. */
+    isLoading?: boolean;
+    /** The variant of the required indicator. */
+    requiredVariant?: 'required' | 'optional';
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: AriaCheckboxGroupProps['onFocus'];
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: AriaCheckboxGroupProps['onBlur'];
+    /**
+     * Handler that is called when the element's focus status changes.
+     * @param isFocused
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * The `CheckboxGroup` component is an accessible group of related checkboxes.
+ * It provides a way to select multiple options from a list of choices.
+ * @param {CheckboxGroupProps} props - The props for the `CheckboxGroup` component
+ * @example
+ * ```tsx
+ * import { CheckboxGroup, Checkbox } from '@payfit/unity-components'
+ *
+ * <CheckboxGroup
+ *   label="Notification preferences"
+ *   helperText="Choose how you want to receive notifications"
+ * >
+ *   <Checkbox value="email">Email notifications</Checkbox>
+ *   <Checkbox value="sms">SMS notifications</Checkbox>
+ *   <Checkbox value="push">Push notifications</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ * @see {@link CheckboxProps} for all available props
+ */
+declare const CheckboxGroup: import('react').ForwardRefExoticComponent<CheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CheckboxGroup };

package/dist/cjs/components/checkbox-group/CheckboxGroup.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),g=require("react-aria-components"),j=require("tailwind-variants"),f=require("../label/Label.js"),l=require("../text/Text.js"),a=j.tv({base:"uy-flex uy-flex-col uy-gap-50"}),i=r.forwardRef(({label:t,helperText:n,feedbackText:e,isDisabled:u,isReadOnly:x,isInvalid:s,isRequired:c,isLoading:y,children:m,requiredVariant:p,...d},b)=>{const h={isDisabled:u,isReadOnly:x,isInvalid:s,isRequired:c,isLoading:y};return o.jsxs(g.CheckboxGroup,{...h,...d,ref:b,className:a(),children:[t&&o.jsx(f.Label,{isRequired:c,requiredVariant:p,children:t}),n&&o.jsx(l.Text,{variant:"bodySmall",color:"content.neutral.low",slot:"description",children:n}),o.jsx("div",{className:"uy-mt-100 uy-flex uy-flex-col uy-gap-150 uy-py-25",children:m}),s&&(typeof e=="string"?o.jsx(l.Text,{variant:"bodySmallStrong",color:"content.form.invalid",slot:"errorMessage",children:e}):r.isValidElement(e)&&r.cloneElement(e,{slot:"errorMessage"}))]})});i.displayName="CheckboxGroup";exports.CheckboxGroup=i;exports.checkboxGroup=a;