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

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

@@ -1 +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;
+"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-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"}}),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/avatar/parts/AvatarPair.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),y=require("react"),m=require("@radix-ui/react-avatar"),p=require("tailwind-variants"),o=require("../Avatar.context.js"),b=require("../Avatar.variants.js");function c(e){if(e&&typeof e=="object"&&"default"in e)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const P=c(y),g=c(m),x=p.tv({extend:b.avatarBase,base:"uy-absolute uy-overflow-hidden uy-leading-[0] uy-border uy-border-content-inverted -uy-bottom-[var(--pair-offset)] -uy-right-[var(--pair-offset)] uy-transition-transform uy-origin-center",variants:{size:{xs:"uy-size-200",sm:"uy-size-300"},isHidden:{true:"uy-scale-0",false:"uy-scale-100"}},defaultVariants:{size:"sm",variant:"circle",isHidden:!1}}),u=P.forwardRef(({variant:e,isHidden:t,children:r,...a},l)=>{const{size:f}=o.useAvatarContext(),i=f==="xl",s=i?"sm":"xs",d=i?0:4,v=x({variant:e,size:s,isHidden:t});return n.jsx(o.AvatarProvider,{variant:e,size:s,hasPair:!0,children:n.jsx(g.Root,{ref:l,role:"img",className:v,"aria-hidden":t,style:{"--pair-offset":`${d}px`},...a,children:r})})});u.displayName="AvatarPair";exports.AvatarPair=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),y=require("react"),m=require("@radix-ui/react-avatar"),p=require("tailwind-variants"),o=require("../Avatar.context.js"),b=require("../Avatar.variants.js");function c(e){if(e&&typeof e=="object"&&"default"in e)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const P=c(y),g=c(m),x=p.tv({extend:b.avatarBase,base:"uy-absolute uy-overflow-hidden uy-leading-[0] uy-border uy-border-solid uy-border-content-inverted -uy-bottom-[var(--pair-offset)] -uy-right-[var(--pair-offset)] uy-transition-transform uy-origin-center",variants:{size:{xs:"uy-size-200",sm:"uy-size-300"},isHidden:{true:"uy-scale-0",false:"uy-scale-100"}},defaultVariants:{size:"sm",variant:"circle",isHidden:!1}}),u=P.forwardRef(({variant:e,isHidden:t,children:r,...a},l)=>{const{size:d}=o.useAvatarContext(),i=d==="xl",s=i?"sm":"xs",f=i?0:4,v=x({variant:e,size:s,isHidden:t});return n.jsx(o.AvatarProvider,{variant:e,size:s,hasPair:!0,children:n.jsx(g.Root,{ref:l,role:"img",className:v,"aria-hidden":t,style:{"--pair-offset":`${f}px`},...a,children:r})})});u.displayName="AvatarPair";exports.AvatarPair=u;

package/dist/cjs/components/badge/Badge.d.ts

@@ -8,6 +8,7 @@ declare const badge: import('tailwind-variants').TVReturnType<{
         neutral: string;
         promo: string;
         attention: string;
+        numeric: string;
         contextual: string;
     };
 }, undefined, "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center", {
@@ -20,6 +21,7 @@ declare const badge: import('tailwind-variants').TVReturnType<{
         neutral: string;
         promo: string;
         attention: string;
+        numeric: string;
         contextual: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
@@ -30,6 +32,7 @@ declare const badge: import('tailwind-variants').TVReturnType<{
         neutral: string;
         promo: string;
         attention: string;
+        numeric: string;
         contextual: string;
     };
 }, undefined, "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center", {

package/dist/cjs/components/badge/Badge.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),i=require("react"),g=require("@radix-ui/react-slot"),d=require("tailwind-merge"),b=require("tailwind-variants"),w=b.tv({base:"uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center",variants:{variant:{success:"uy-bg-surface-success-low uy-text-content-neutral",warning:"uy-bg-surface-warning-low uy-text-content-neutral",danger:"uy-bg-surface-danger-low uy-text-content-neutral",neutral:"uy-bg-surface-neutral-lowest uy-text-content-neutral",promo:"uy-bg-surface-promo-low uy-text-content-neutral",attention:"uy-bg-surface-danger uy-text-content-inverted",contextual:"uy-bg-surface-neutral uy-border uy-border-border-neutral uy-text-content-neutral"}},defaultVariants:{variant:"neutral"}},{twMerge:!1}),f={success:"status",warning:"alert",danger:"alert",neutral:"status",promo:"status",attention:"alert",contextual:"status"},t=i.forwardRef(({className:a,variant:e="neutral",role:n,asChild:r=!1,children:u,...s},o)=>{const l=n??f[e]??"status",c=r?g.Slot:"span";return y.jsx(c,{ref:o,className:d.twMerge(w({variant:e}),a),role:l,...s,children:u})});t.displayName="Badge";exports.Badge=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),i=require("react"),g=require("@radix-ui/react-slot"),d=require("tailwind-merge"),b=require("tailwind-variants"),w=b.tv({base:"uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center",variants:{variant:{success:"uy-bg-surface-success-low uy-text-content-neutral",warning:"uy-bg-surface-warning-low uy-text-content-neutral",danger:"uy-bg-surface-danger-low uy-text-content-neutral",neutral:"uy-bg-surface-neutral-lowest uy-text-content-neutral",promo:"uy-bg-surface-promo-low uy-text-content-neutral",attention:"uy-bg-surface-danger uy-text-content-inverted",numeric:"uy-bg-surface-primary-low uy-text-blue-L10",contextual:"uy-bg-surface-neutral uy-border uy-border-solid uy-border-border-neutral uy-text-content-neutral"}},defaultVariants:{variant:"neutral"}},{twMerge:!1}),f={success:"status",warning:"alert",danger:"alert",neutral:"status",promo:"status",attention:"alert",contextual:"status",numeric:"status"},t=i.forwardRef(({className:r,variant:e="neutral",role:a,asChild:n=!1,children:u,...s},o)=>{const l=a??f[e]??"status",c=n?g.Slot:"span";return y.jsx(c,{ref:o,className:d.twMerge(w({variant:e}),r),role:l,...s,children:u})});t.displayName="Badge";exports.Badge=t;

package/dist/cjs/components/breadcrumbs/parts/Breadcrumb.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),j=require("react"),i=require("react-aria-components"),o=require("../../icon/Icon.js"),u=require("../../link/Link.js"),h=require("../../tooltip/Tooltip.js"),q=require("../Breadcrumbs.context.js"),B=require("../Breadcrumbs.variant.js"),C=25,d=({children:e,href:t})=>e.length>C?r.jsx(h,{title:e,children:r.jsx(u.Link,{href:t,color:"secondary",maxCharactersTruncation:25,children:e})}):r.jsx(u.Link,{href:t,color:"secondary",maxCharactersTruncation:25,children:e}),L=j.forwardRef((e,t,...c)=>{const{wrap:l,isMobile:m,isStaticApi:x}=q.useBreadcrumbsContext(),{breadcrumb:s}=B.breadcrumbsVariant({wrap:l});if(!e)return null;const{href:a,label:n}=e;return m&&!x?r.jsxs(i.Breadcrumb,{ref:t,...c,className:s(),children:[r.jsx(o.Icon,{src:"CaretLeftOutlined","aria-hidden":"true"}),r.jsx(d,{href:a,children:n})]}):r.jsx(i.Breadcrumb,{ref:t,...c,className:s(),children:({isCurrent:b})=>b?r.jsx("span",{className:"uy-text-nowrap",children:n}):r.jsxs(r.Fragment,{children:[r.jsx(d,{href:a,children:n}),r.jsx(o.Icon,{src:"CaretRightOutlined","aria-hidden":"true"})]})})});exports.Breadcrumb=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),j=require("react"),i=require("react-aria-components"),o=require("../../icon/Icon.js"),u=require("../../link/Link.js"),h=require("../../tooltip/Tooltip.js"),q=require("../Breadcrumbs.context.js"),B=require("../Breadcrumbs.variant.js"),g=25,d=({children:e,href:t})=>e.length>g?r.jsx(h,{title:e,children:r.jsx(u.Link,{href:t,color:"secondary",maxCharactersTruncation:25,children:e})}):r.jsx(u.Link,{href:t,color:"secondary",maxCharactersTruncation:25,children:e}),C=j.forwardRef((e,t)=>{const{wrap:l,isMobile:m,isStaticApi:x}=q.useBreadcrumbsContext(),{breadcrumb:s}=B.breadcrumbsVariant({wrap:l});if(!e)return null;const{href:a,label:n,...c}=e;return m&&!x?r.jsxs(i.Breadcrumb,{ref:t,...c,className:s(),children:[r.jsx(o.Icon,{src:"CaretLeftOutlined","aria-hidden":"true"}),r.jsx(d,{href:a,children:n})]}):r.jsx(i.Breadcrumb,{ref:t,...c,className:s(),children:({isCurrent:b})=>b?r.jsx("span",{className:"uy-text-nowrap",children:n}):r.jsxs(r.Fragment,{children:[r.jsx(d,{href:a,children:n}),r.jsx(o.Icon,{src:"CaretRightOutlined","aria-hidden":"true"})]})})});exports.Breadcrumb=C;

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

@@ -1 +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;
+"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-border-solid 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 s({isSelected:r,isDisabled:a,isIndeterminate:t,isInvalid:d,isReadOnly:i,className:o}){const{base:l,checkmark:u}=c({isSelected:r,isDisabled:a,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"})})})}s.displayName="CheckboxIndicator";exports.CheckboxIndicator=s;

package/dist/cjs/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { DisclosureProps } from 'react-aria-components';
+export interface CollapsibleProps extends Omit<DisclosureProps, 'isDisabled' | 'defaultExpanded' | 'className'> {
+    /**
+     * The content of the collapsible component.
+     * Typically includes a CollapsibleTitle and CollapsibleContent.
+     */
+    children: ReactNode;
+    /**
+     * Controls whether the collapsible is expanded by default.
+     * @default false
+     */
+    isExpanded?: boolean;
+}
+/**
+ * @description
+ * The Collapsible component provides an expandable/collapsible container that can show or hide content.
+ * It's typically used to organize information in a space-efficient way, allowing users to focus on relevant content.
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTitle>Section Title</CollapsibleTitle>
+ *   <CollapsibleContent>
+ *     Content that can be shown or hidden
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ * @component
+ * @see {@link CollapsibleTitle} - The clickable title component that toggles the expanded state
+ * @see {@link CollapsibleContent} - The content component that is shown/hidden based on the expanded state
+ */
+declare const Collapsible: import('react').ForwardRefExoticComponent<CollapsibleProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Collapsible };

package/dist/cjs/components/collapsible/parts/CollapsibleContent.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/**
+ * @description
+ * The CollapsibleContent component renders the content that is shown or hidden
+ * when the parent Collapsible component is expanded or collapsed.
+ */
+export interface CollapsibleContentProps {
+    /**
+     * The content to be shown or hidden.
+     */
+    children: ReactNode;
+}
+/**
+ * The content component for a Collapsible.
+ *
+ * This component renders a DisclosurePanel that shows or hides its content
+ * based on the expanded state of the parent Collapsible component.
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTitle>Section Title</CollapsibleTitle>
+ *   <CollapsibleContent>
+ *     This content will be shown or hidden based on the expanded state.
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ * @component
+ * @see {@link Collapsible} - The parent component
+ * @see {@link CollapsibleTitle} - The title component that toggles the expanded state
+ * @param {CollapsibleContentProps} props - The component props
+ * @param {ReactNode} props.children - The content to be shown or hidden
+ * @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element
+ * @returns {JSX.Element} The rendered CollapsibleContent component
+ */
+declare const CollapsibleContent: import('react').ForwardRefExoticComponent<CollapsibleContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CollapsibleContent };

package/dist/cjs/components/collapsible/parts/CollapsibleTitle.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+/**
+ * @description
+ * The CollapsibleTitle component renders the clickable header of a Collapsible component.
+ * It displays a title with an icon that rotates based on the expanded state.
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTitle>Section Title</CollapsibleTitle>
+ *   <CollapsibleContent>Content</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ * @component
+ * @see {@link Collapsible} - The parent component
+ * @see {@link CollapsibleContent} - The content component that is shown/hidden
+ */
+interface CollapsibleTitleProps {
+    /**
+     * The content of the collapsible title.
+     */
+    children: ReactNode;
+    /**
+     * Optional content to display after the title.
+     */
+    suffix?: ReactNode;
+}
+/**
+ * The title component for a Collapsible.
+ *
+ * This component renders a heading with a button that toggles the expanded state of the parent Collapsible.
+ * It displays an icon that rotates based on the expanded state to indicate the current state.
+ * @param {CollapsibleTitleProps} props - The component props
+ * @param {ReactNode} props.children - The content of the title
+ * @param {ReactNode} [props.suffix] - Optional content to display after the title
+ * @param {React.Ref<HTMLDivElement>} ref - A ref to the underlying HTML div element
+ * @returns {JSX.Element} The rendered CollapsibleTitle component
+ */
+declare const CollapsibleTitle: import('react').ForwardRefExoticComponent<CollapsibleTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CollapsibleTitle };

package/dist/cjs/components/date-picker/DatePicker.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),I=require("react"),s=require("react-aria-components"),N=require("react-intl"),m=require("tailwind-variants"),P=require("../icon/Icon.js"),W=require("./parts/DateCalendar.js"),R=require("./parts/DateInput.js"),U=m.tv({slots:{base:["uy-group uy-flex uy-h-500 uy-border uy-rounded-100","active:uy-border-border-form-active data-[focus-visible]:uy-border-border-form-active"],inputWrapper:["uy-flex uy-grow uy-rounded-75 uy-outline-none","focus-within:uy-outline-2 focus-within:uy-outline-utility-focus-ring focus-within:uy-outline-offset-2","group-[:has(button:focus)]:data-[focus-within]:uy-outline-none group-[:has(button:focus)]:data-[focus-within]:uy-outline-offset-0 group-[:has(button:focus)]:data-[focus-within]:uy-outline-transparent"],suffix:["uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-rounded-r-100","hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-pressed active:uy-border-border-form-active data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-border-border-form-active","focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[3px]"]},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",suffix:"uy-bg-surface-form-error uy-border-border-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",suffix:"uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"}}]}),M=m.tv({base:"uy-overflow-auto uy-shadow-floating uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-75",variants:{isEntering:{true:"uy-animate-in uy-fade-in data-[placement-bottom]:uy-slide-in-from-top-1 data-[placement-top]:uy-slide-in-from-bottom-1 uy-duration-200 uy-ease-out"},isExiting:{true:"uy-animate-out uy-fade-out data-[placement-bottom]:uy-slide-out-to-top-1 data-[placement-top]:uy-slide-out-to-bottom-1 uy-duration-150 uy-ease-in"}}}),p=I.forwardRef(({value:f,defaultValue:b,isInvalid:c,isLoading:v,isDisabled:t,isReadOnly:u,onClearButtonPress:d,onBlur:o,onFocus:i,onChange:n,onOpenChange:l,id:x,...e},O)=>{const g=N.useIntl(),{base:h,inputWrapper:D,suffix:w}=U({isInvalid:!!c,isReadOnly:!!u,isDisabled:!!t}),y=r=>{n==null||n(r??void 0)},j=r=>{l==null||l(r),r?i==null||i():o==null||o()},k=r=>e.isDateUnavailable?e.isDateUnavailable(r):!1,V=()=>{d==null||d()};return a.jsxs(s.DatePicker,{...e,className:h(),value:f,defaultValue:b,minValue:e.minValue,maxValue:e.maxValue,isReadOnly:!!u,isDisabled:!!t,onChange:y,onFocus:i,onBlur:o,onOpenChange:j,isDateUnavailable:k,children:[a.jsxs(s.Group,{className:D(),id:x,children:[a.jsx(R.DateInput,{isLoading:v,isDisabled:t,isReadOnly:u,isInvalid:c,onClearButtonPress:V}),a.jsx(s.Button,{className:w(),isDisabled:u||t,children:a.jsx(P.Icon,{src:"CalendarBlankOutlined",color:"inherit",alt:g.formatMessage({id:"unity:component:form-field:date-picker:calendar-button",defaultMessage:"Open Calendar"})})})]}),a.jsx(s.Popover,{className:({isEntering:r,isExiting:q})=>M({isEntering:r,isExiting:q}),children:a.jsx(W.DateCalendar,{value:f,defaultValue:b,minValue:e.minValue,maxValue:e.maxValue,onChange:y,firstDayOfWeek:e.firstDayOfWeek})})]})});p.displayName="DatePicker";exports.DatePicker=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),I=require("react"),s=require("react-aria-components"),N=require("react-intl"),m=require("tailwind-variants"),P=require("../icon/Icon.js"),W=require("./parts/DateCalendar.js"),R=require("./parts/DateInput.js"),U=m.tv({slots:{base:["uy-group uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100","active:uy-border-border-form-active data-[focus-visible]:uy-border-border-form-active"],inputWrapper:["uy-flex uy-grow uy-rounded-75 uy-outline-none","focus-within:uy-outline-2 focus-within:uy-outline-utility-focus-ring focus-within:uy-outline-offset-2","group-[:has(button:focus)]:data-[focus-within]:uy-outline-none group-[:has(button:focus)]:data-[focus-within]:uy-outline-offset-0 group-[:has(button:focus)]:data-[focus-within]:uy-outline-transparent"],suffix:["uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-rounded-r-100","hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-pressed active:uy-border-border-form-active data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-border-border-form-active","focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[3px]"]},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",suffix:"uy-bg-surface-form-error uy-border-border-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",suffix:"uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"}}]}),M=m.tv({base:"uy-overflow-auto uy-shadow-floating uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-75",variants:{isEntering:{true:"uy-animate-in uy-fade-in data-[placement-bottom]:uy-slide-in-from-top-1 data-[placement-top]:uy-slide-in-from-bottom-1 uy-duration-200 uy-ease-out"},isExiting:{true:"uy-animate-out uy-fade-out data-[placement-bottom]:uy-slide-out-to-top-1 data-[placement-top]:uy-slide-out-to-bottom-1 uy-duration-150 uy-ease-in"}}}),p=I.forwardRef(({value:f,defaultValue:b,isInvalid:y,isLoading:v,isDisabled:t,isReadOnly:u,onClearButtonPress:d,onBlur:o,onFocus:i,onChange:n,onOpenChange:l,id:x,...e},O)=>{const g=N.useIntl(),{base:h,inputWrapper:D,suffix:w}=U({isInvalid:!!y,isReadOnly:!!u,isDisabled:!!t}),c=r=>{n==null||n(r??void 0)},j=r=>{l==null||l(r),r?i==null||i():o==null||o()},k=r=>e.isDateUnavailable?e.isDateUnavailable(r):!1,V=()=>{d==null||d()};return a.jsxs(s.DatePicker,{...e,className:h(),value:f,defaultValue:b,minValue:e.minValue,maxValue:e.maxValue,isReadOnly:!!u,isDisabled:!!t,onChange:c,onFocus:i,onBlur:o,onOpenChange:j,isDateUnavailable:k,children:[a.jsxs(s.Group,{className:D(),id:x,children:[a.jsx(R.DateInput,{isLoading:v,isDisabled:t,isReadOnly:u,isInvalid:y,onClearButtonPress:V}),a.jsx(s.Button,{className:w(),isDisabled:u||t,children:a.jsx(P.Icon,{src:"CalendarBlankOutlined",color:"inherit",alt:g.formatMessage({id:"unity:component:form-field:date-picker:calendar-button",defaultMessage:"Open Calendar"})})})]}),a.jsx(s.Popover,{className:({isEntering:r,isExiting:q})=>M({isEntering:r,isExiting:q}),children:a.jsx(W.DateCalendar,{value:f,defaultValue:b,minValue:e.minValue,maxValue:e.maxValue,onChange:c,firstDayOfWeek:e.firstDayOfWeek})})]})});p.displayName="DatePicker";exports.DatePicker=p;

package/dist/cjs/components/date-picker/parts/DateInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),s=require("react-aria-components"),I=require("react-intl"),c=require("tailwind-variants"),v=require("../../icon-button/CircularIconButton.js"),j=require("../../icon/Icon.js"),h=require("../../spinner/Spinner.js"),q=c.tv({base:"uy-group uy-box-content uy-rounded-25 uy-px-25 uy-text-end uy-tabular-nums uy-outline-none uy-typography-body focus:uy-bg-surface-form-active focus:uy-rounded-25 focus:uy-text-content-inverted data-[disabled]:uy-text-content-form-disabled",variants:{isPlaceholder:{true:"uy-text-content-neutral-lowest",false:"uy-text-content-form-enabled"},isLiteral:{true:"uy-text-content-form-enabled",false:""}}}),d=c.tv({slots:{base:"uy-flex uy-gap-50 uy-flex-grow uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100",input:"uy-flex uy-gap-25 uy-w-fit uy-grow",state:"uy-flex uy-gap-50 uy-items-center"},variants:{isInvalid:{true:{base:"uy-bg-surface-form-error",state:"uy-text-content-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled"}},isDisabled:{true:{base:"uy-bg-surface-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",state:"uy-text-content-neutral-disabled"}}]});function y({isLoading:u,isInvalid:o,isReadOnly:l,isDisabled:i,onClearButtonPress:a}){const r=I.useIntl(),t=g.useContext(s.DatePickerStateContext),{dateValue:f}=t,{base:m,input:b,state:p}=d({isInvalid:!!o,isReadOnly:!!l,isDisabled:!!i}),x=f&&!u&&!l&&!i;return e.jsxs("div",{className:m(),children:[e.jsx(s.DateInput,{className:b(),children:n=>e.jsx(s.DateSegment,{segment:n,className:q({isPlaceholder:n.isPlaceholder,isLiteral:n.type==="literal"})})}),e.jsxs("div",{className:p(),children:[u&&e.jsx(h.Spinner,{color:"inherit",size:"small",label:r.formatMessage({id:"unity:component:form-field:form-input:spinner:label",defaultMessage:"Loading"})}),o&&e.jsx(j.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:r.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),x&&e.jsx(v.CircularIconButton,{slot:null,title:r.formatMessage({id:"unity:component:form-field:form-input:clear:title",defaultMessage:"Clear"}),icon:"CloseOutlined",onPress:()=>{t==null||t.setValue(null),a==null||a()}})]})]})}y.displayName="DateInput";exports.DateInput=y;exports.dateInput=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),s=require("react-aria-components"),I=require("react-intl"),c=require("tailwind-variants"),v=require("../../icon-button/CircularIconButton.js"),j=require("../../icon/Icon.js"),h=require("../../spinner/Spinner.js"),q=c.tv({base:"uy-group uy-box-content uy-rounded-25 uy-px-25 uy-text-end uy-tabular-nums uy-outline-none uy-typography-body focus:uy-bg-surface-form-active focus:uy-rounded-25 focus:uy-text-content-inverted data-[disabled]:uy-text-content-form-disabled",variants:{isPlaceholder:{true:"uy-text-content-neutral-lowest",false:"uy-text-content-form-enabled"},isLiteral:{true:"uy-text-content-form-enabled",false:""}}}),d=c.tv({slots:{base:"uy-flex uy-gap-50 uy-flex-grow uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100",input:"uy-flex uy-gap-25 uy-w-fit uy-grow",state:"uy-flex uy-gap-50 uy-items-center"},variants:{isInvalid:{true:{base:"uy-bg-surface-form-error",state:"uy-text-content-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled"}},isDisabled:{true:{base:"uy-bg-surface-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",state:"uy-text-content-neutral-disabled"}}]});function y({isLoading:u,isInvalid:o,isReadOnly:l,isDisabled:i,onClearButtonPress:a}){const n=I.useIntl(),t=g.useContext(s.DatePickerStateContext),{dateValue:f}=t,{base:m,input:b,state:p}=d({isInvalid:!!o,isReadOnly:!!l,isDisabled:!!i}),x=f&&!u&&!l&&!i;return e.jsxs("div",{className:m(),children:[e.jsx(s.DateInput,{className:b(),children:r=>e.jsx(s.DateSegment,{segment:r,className:q({isPlaceholder:r.isPlaceholder,isLiteral:r.type==="literal"})})}),e.jsxs("div",{className:p(),children:[u&&e.jsx(h.Spinner,{color:"inherit",size:"small",label:n.formatMessage({id:"unity:component:common:loading:label",defaultMessage:"Loading..."})}),o&&e.jsx(j.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:n.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),x&&e.jsx(v.CircularIconButton,{slot:null,title:n.formatMessage({id:"unity:component:form-field:form-input:clear:title",defaultMessage:"Clear"}),icon:"CloseOutlined",onPress:()=>{t==null||t.setValue(null),a==null||a()}})]})]})}y.displayName="DateInput";exports.DateInput=y;exports.dateInput=d;

package/dist/cjs/components/fieldset/Fieldset.d.ts

@@ -0,0 +1,150 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const fieldset: import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}>, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fieldset>> {
+    /**
+     * The legend of the fieldset.
+     */
+    legend: string;
+    /**
+     * An optional description of the fieldset.
+     */
+    description?: string;
+    /**
+     * Whether to hide the legend of the fieldset.
+     */
+    isLegendHidden?: boolean;
+}
+/**
+ * The `Fieldset` component groups related form fields together with an accessible structure.
+ * It provides visual organization and semantic HTML for form sections, making forms more understandable and navigable.
+ * @param {FieldsetProps} props - The props for the `Fieldset` component
+ * @see {@link FieldsetProps} for all available props
+ * @example
+ * ```tsx
+ * import { Fieldset } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Fieldset
+ *       legend="Personal Information"
+ *       description="Please provide your contact details"
+ *       isLegendHidden={false}
+ *     >
+ *       <TextField name="firstName" label="First name" />
+ *       <TextField name="lastName" label="Last name" />
+ *     </Fieldset>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
+ */
+declare const Fieldset: import('react').ForwardRefExoticComponent<FieldsetProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+export { Fieldset };

package/dist/cjs/components/fieldset/Fieldset.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),b=require("react-aria"),x=require("tailwind-variants"),i=x.tv({slots:{base:"uy-p-0 uy-m-0 [&+&]:uy-mt-500 [&:last-of-type]:uy-mb-500",legend:"uy-typography-h3 uy-text-content-neutral",description:"uy-block uy-typography-body uy-mt-100 uy-text-content-neutral",fieldsContainer:"uy-flex uy-flex-col uy-gap-250"},variants:{isLegendHidden:{true:{legend:"uy-sr-only",description:"uy-sr-only",fieldsContainer:"uy-mt-0"},false:{legend:"uy-block",description:"uy-block",fieldsContainer:"uy-mt-300"}}},defaultVariants:{isLegendHidden:!1}}),n=m.forwardRef(({children:d,...l},r)=>{const s=b.useId(),{legend:a,description:t,isLegendHidden:o,...c}=l,{base:y,legend:u,description:f,fieldsContainer:p}=i({isLegendHidden:o}),g=t?`${s}-fieldset-description`:void 0;return e.jsxs("fieldset",{...c,ref:r,className:y(),"aria-describedby":g,children:[e.jsx("legend",{className:u(),children:a}),t&&e.jsx("span",{id:`${s}-fieldset-description`,"data-fieldset-slot":"description",className:f(),children:t}),e.jsx("div",{className:p(),children:d})]})});n.displayName="Fieldset";exports.Fieldset=n;exports.fieldset=i;

package/dist/cjs/components/fieldset/parts/FieldGroup.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The `FieldGroup` component arranges form fields in a responsive grid layout within a Fieldset.
+ * It optimizes space by displaying fields side-by-side on larger screens while stacking them on mobile devices.
+ * @param {PropsWithChildren<object>} props - The props for the `FieldGroup` component
+ * @example
+ * ```tsx
+ * import { Fieldset, FieldGroup } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Fieldset legend="Personal Information">
+ *       <FieldGroup>
+ *         <TextField name="firstName" label="First name" />
+ *         <TextField name="lastName" label="Last name" />
+ *       </FieldGroup>
+ *       <TextField name="email" label="Email" />
+ *     </Fieldset>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset-fieldgroup--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
+ */
+declare const FieldGroup: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { FieldGroup };

package/dist/cjs/components/fieldset/parts/FieldGroup.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("react"),e=d.forwardRef(({children:r,...u},o)=>i.jsx("div",{...u,ref:o,role:"group",className:"uy-grid uy-grid-cols-1 uy-gap-y-250 md:uy-grid-cols-2 md:uy-gap-x-200",children:r}));e.displayName="FieldGroup";exports.FieldGroup=e;

package/dist/cjs/components/form-field/parts/FormControl.d.ts

@@ -1,5 +1,28 @@
 import { Slot } from '@radix-ui/react-slot';
 export type FormControlProps = React.ComponentProps<typeof Slot>;
+/**
+ * FormControl is a wrapper component that connects input components to form state within a FormField.
+ * It handles accessibility concerns like proper ARIA attributes and focus states.
+ *
+ * This component is required when building custom form fields - it must wrap the actual input element
+ * to connect it properly to the form state.
+ * @example
+ * ```tsx
+ * import { FormControl, FormField, Input } from '@payfit/unity-components'
+ *
+ * function MyFormField() {
+ *   return (
+ *     <FormField name="email">
+ *       <FormControl>
+ *         <Input />
+ *       </FormControl>
+ *     </FormField>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-formfield-formcontrol--docs)
+ */
 declare function FormControl({ ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FormControl {
     var displayName: string;

package/dist/cjs/components/icon-button/CircularIconButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react-aria-components"),b=require("tailwind-variants"),f=require("../../hooks/use-id.js"),p=require("../icon/Icon.js"),x=require("../spinner/Spinner.js"),v=require("../tooltip/Tooltip.js"),i=b.tv({base:"uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled"});function s(o){const u=f(),{onPress:a,icon:c,isLoading:t,title:n,isDisabled:l,...d}=o,r=`icon-button-label-${u}`;return e.jsx(v,{title:n,children:e.jsxs(y.Button,{...d,className:i(),onPress:a,isDisabled:l||t,"aria-labelledby":r,"aria-busy":t,children:[t?e.jsx(x.Spinner,{size:"small",label:"Loading",color:"inherit"}):e.jsx(p.Icon,{src:c,color:"inherit",role:"presentation"}),e.jsx("span",{id:r,className:"uy-sr-only",children:n})]})})}s.displayName="CircularIconButton";exports.CircularIconButton=s;exports.circularIconButton=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react-aria-components"),b=require("tailwind-variants"),f=require("../../hooks/use-id.js"),x=require("../icon/Icon.js"),p=require("../spinner/Spinner.js"),v=require("../tooltip/Tooltip.js"),i=b.tv({base:"uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled"});function s(o){const u=f(),{onPress:l,icon:a,isLoading:t,title:r,isDisabled:c,...d}=o,n=`icon-button-label-${u}`;return e.jsx(v,{title:r,children:e.jsx(y.Pressable,{...d,onPress:l,isDisabled:c||t,"aria-labelledby":n,"aria-busy":t,children:e.jsxs("div",{className:i(),role:"button",children:[t?e.jsx(p.Spinner,{size:"small",label:"Loading",color:"inherit"}):e.jsx(x.Icon,{src:a,color:"inherit",role:"presentation"}),e.jsx("span",{id:n,className:"uy-sr-only",children:r})]})})})}s.displayName="CircularIconButton";exports.CircularIconButton=s;exports.circularIconButton=i;

package/dist/cjs/components/icon-button/IconButton.variants.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),t=e.tv({slots:{button:"uy-group uy-w-500 uy-h-500 uy-flex uy-justify-center uy-items-center uy-rounded-75 focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",icon:"uy-w-250 uy-h-250"},variants:{isDisabled:{true:{button:"uy-cursor-not-allowed"},false:{button:""}},isLoading:{true:{button:"uy-cursor-progress uy-text-content-neutral-disabled",icon:""},false:{button:""}},color:{inverted:{button:"focus-visible:uy-outline-utility-inverted-focus-ring"}}},defaultVariants:{isDisabled:!1,isLoading:!1}}),r=e.tv({extend:t,variants:{variant:{primary:""},color:{primary:"",danger:"",warning:"",inverted:""}},compoundVariants:[{variant:"primary",color:"primary",isDisabled:!1,isLoading:!1,class:{button:"uy-bg-surface-primary hover:uy-bg-surface-primary-hover active:uy-bg-surface-primary-active focus-visible:uy-bg-surface-primary-focus data-[pressed]:uy-bg-surface-primary-pressed",icon:"uy-text-content-inverted group-hover:uy-text-content-inverted-hover active:uy-text-content-inverted-active focus-visible:uy-text-content-inverted-focus data-[pressed]:uy-text-content-inverted-pressed"}},{variant:"primary",color:"danger",isDisabled:!1,isLoading:!1,class:{button:"uy-bg-content-danger hover:uy-bg-content-danger-hover active:uy-bg-content-danger-pressed focus:uy-bg-content-danger-focus data-[pressed]:uy-bg-content-danger-pressed",icon:"uy-text-content-inverted group-hover:uy-text-content-inverted-hover active:uy-text-content-inverted-pressed focus:uy-text-content-inverted-focus data-[pressed]:uy-text-content-inverted-pressed"}},{variant:"primary",color:"warning",isDisabled:!1,isLoading:!1,class:{button:"uy-bg-content-warning hover:uy-bg-content-warning-hover active:uy-bg-content-warning-pressed focus-visible:uy-bg-content-warning-focus data-[pressed]:uy-bg-content-warning-pressed]:",icon:"uy-text-content-inverted group-hover:uy-text-content-inverted-hover active:uy-text-content-inverted-pressed focus-visible:uy-text-content-inverted-focus data-[pressed]:uy-text-content-inverted-pressed"}},{variant:"primary",color:"inverted",isDisabled:!1,isLoading:!1,class:{button:"uy-bg-surface-inverted hover:uy-accent-surface-inverted-hover active:uy-accent-surface-inverted-pressed focus-visible:uy-accent-surface-inverted-focus data-[pressed]:uy-accent-surface-inverted-pressed",icon:"uy-text-content-neutral group-hover:uy-text-content-neutral-hover active:uy-text-content-neutral-pressed focus-visible:uy-text-content-neutral-focus data-[pressed]:uy-text-content-neutral-pressed"}},{variant:"primary",color:"primary",isDisabled:!0,isLoading:!1,class:{button:"uy-bg-surface-neutral-disabled",icon:"uy-text-content-neutral-disabled"}},{variant:"primary",color:["primary","danger","warning","inverted"],isLoading:!0,isDisabled:!1,class:{button:"uy-bg-surface-neutral-disabled",icon:"uy-text-content-neutral-disabled"}}]}),n=e.tv({extend:t,variants:{variant:{secondary:{button:"focus-visible:uy-outline-offset-4"}},color:{primary:"",inverted:""}},compoundVariants:[{color:"primary",isDisabled:!1,isLoading:!1,class:{button:"uy-border uy-border-border-primary hover:uy-border-border-primary-hover active:uy-border-border-primary-active data-[pressed]:uy-border-border-primary-pressed",icon:"uy-text-content-primary group-hover:uy-text-content-primary-hover active:uy-text-content-primary-active data-[pressed]:uy-text-content-primary-pressed focus-visible:uy-text-content-primary-focus"}},{color:"primary",isLoading:!0,isDisabled:!1,class:{button:"uy-border uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",icon:"uy-text-content-neutral-disabled"}},{color:"primary",isLoading:!1,isDisabled:!0,class:{button:"uy-border uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",icon:"uy-text-content-neutral-disabled"}},{color:"inverted",isDisabled:!1,isLoading:!1,class:{button:"uy-border uy-border-border-inverted hover:uy-border-border-inverted-hover data-[pressed]:uy-border-border-inverted-pressed active:uy-border-border-inverted-active focus-visible:uy-border-border-inverted-focus",icon:"uy-text-content-inverted group-hover:uy-text-content-inverted-hover data-[pressed]:uy-text-content-inverted-pressed active:uy-text-content-inverted-active focus-visible:uy-text-content-inverted-focus"}},{color:"inverted",isLoading:!1,isDisabled:!0,class:{button:"uy-border uy-border-border-inverted-disabled focus-visible:uy-border-border-primary-focus",icon:"uy-text-content-inverted-disabled"}}]}),a=e.tv({extend:t,variants:{variant:{ghost:""},color:{neutral:"",primary:"",danger:"",warning:""}},compoundVariants:[{color:"neutral",isDisabled:!1,isLoading:!1,class:{button:"hover:uy-bg-surface-neutral-hover data-[pressed]:uy-bg-surface-neutral-pressed active:uy-bg-surface-neutral-active",icon:"uy-text-content-neutral group-hover:uy-text-content-neutral-hover data-[pressed]:uy-text-content-neutral-pressed focus-visible:uy-text-content-neutral-focus active:uy-text-content-neutral-active"}},{color:"primary",isDisabled:!1,isLoading:!1,class:{button:"hover:uy-bg-surface-primary-lowest-hover data-[pressed]:uy-bg-surface-primary-lowest-pressed active:uy-bg-surface-primary-lowest-active",icon:"uy-text-content-primary group-hover:uy-text-content-primary data-[pressed]:uy-text-content-primary focus-visible:uy-text-content-primary active:uy-text-content-primary"}},{color:"danger",isDisabled:!1,isLoading:!1,class:{button:"hover:uy-bg-surface-danger-lowest-hover data-[pressed]:uy-bg-surface-danger-lowest-pressed active:uy-bg-surface-danger-lowest-active",icon:"uy-text-content-danger group-hover:uy-text-content-danger-hover data-[pressed]:uy-text-content-danger-pressed focus-visible:uy-text-content-danger-focus active:uy-text-content-danger-active"}},{color:"warning",isDisabled:!1,isLoading:!1,class:{button:"hover:uy-bg-surface-warning-lowest-hover data-[pressed]:uy-bg-surface-warning-lowest-pressed active:uy-bg-surface-warning-lowest-active",icon:"uy-text-content-warning group-hover:uy-text-content-warning-hover data-[pressed]:uy-text-content-warning-pressed focus-visible:uy-text-content-warning-focus active:uy-text-content-warning-active"}},{color:["primary","neutral","danger","warning"],isDisabled:!0,isLoading:!1,class:{button:"",icon:"uy-text-content-neutral-disabled"}},{color:["primary","neutral","danger","warning"],isDisabled:!1,isLoading:!0,class:{button:"",icon:"uy-text-content-neutral-disabled"}}]});exports.iconButtonGhost=a;exports.iconButtonPrimary=r;exports.iconButtonSecondary=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),t=e.tv({slots:{button:"uy-group uy-w-500 uy-h-500 uy-flex uy-justify-center uy-items-center uy-rounded-75 focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",icon:"uy-w-250 uy-h-250"},variants:{isDisabled:{true:{button:"uy-cursor-not-allowed"},false:{button:""}},isLoading:{true:{button:"uy-cursor-progress uy-text-content-neutral-disabled",icon:""},false:{button:""}},color:{inverted:{button:"focus-visible:uy-outline-utility-inverted-focus-ring"}}},defaultVariants:{isDisabled:!1,isLoading:!1}}),r=e.tv({extend:t,variants:{variant:{primary:""},color:{primary:"",danger:"",warning:"",inverted:""}},compoundVariants:[{variant:"primary",color:"primary",isDisabled:!1,isLoading:!1,class:{button:"uy-bg-surface-primary hover:uy-bg-surface-primary-hover active:uy-bg-surface-primary-active focus-visible:uy-bg-surface-primary-focus data-[pressed]:uy-bg-surface-primary-pressed",icon:"uy-text-content-inverted group-hover:uy-text-content-inverted-hover active:uy-text-content-inverted-active focus-visible:uy-text-content-inverted-focus data-[pressed]:uy-text-content-inverted-pressed"}},{variant:"primary",color:"danger",isDisabled:!1,isLoading:!1,class:{button:"uy-bg-content-danger hover:uy-bg-content-danger-hover active:uy-bg-content-danger-pressed focus:uy-bg-content-danger-focus data-[pressed]:uy-bg-content-danger-pressed",icon:"uy-text-content-inverted group-hover:uy-text-content-inverted-hover active:uy-text-content-inverted-pressed focus:uy-text-content-inverted-focus data-[pressed]:uy-text-content-inverted-pressed"}},{variant:"primary",color:"warning",isDisabled:!1,isLoading:!1,class:{button:"uy-bg-content-warning hover:uy-bg-content-warning-hover active:uy-bg-content-warning-pressed focus-visible:uy-bg-content-warning-focus data-[pressed]:uy-bg-content-warning-pressed]:",icon:"uy-text-content-inverted group-hover:uy-text-content-inverted-hover active:uy-text-content-inverted-pressed focus-visible:uy-text-content-inverted-focus data-[pressed]:uy-text-content-inverted-pressed"}},{variant:"primary",color:"inverted",isDisabled:!1,isLoading:!1,class:{button:"uy-bg-surface-inverted hover:uy-accent-surface-inverted-hover active:uy-accent-surface-inverted-pressed focus-visible:uy-accent-surface-inverted-focus data-[pressed]:uy-accent-surface-inverted-pressed",icon:"uy-text-content-neutral group-hover:uy-text-content-neutral-hover active:uy-text-content-neutral-pressed focus-visible:uy-text-content-neutral-focus data-[pressed]:uy-text-content-neutral-pressed"}},{variant:"primary",color:"primary",isDisabled:!0,isLoading:!1,class:{button:"uy-bg-surface-neutral-disabled",icon:"uy-text-content-neutral-disabled"}},{variant:"primary",color:["primary","danger","warning","inverted"],isLoading:!0,isDisabled:!1,class:{button:"uy-bg-surface-neutral-disabled",icon:"uy-text-content-neutral-disabled"}}]}),n=e.tv({extend:t,variants:{variant:{secondary:{button:"focus-visible:uy-outline-offset-4"}},color:{primary:"",inverted:""}},compoundVariants:[{color:"primary",isDisabled:!1,isLoading:!1,class:{button:"uy-border uy-border-solid uy-border-border-primary hover:uy-border-border-primary-hover active:uy-border-border-primary-active data-[pressed]:uy-border-border-primary-pressed",icon:"uy-text-content-primary group-hover:uy-text-content-primary-hover active:uy-text-content-primary-active data-[pressed]:uy-text-content-primary-pressed focus-visible:uy-text-content-primary-focus"}},{color:"primary",isLoading:!0,isDisabled:!1,class:{button:"uy-border uy-border-solid uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",icon:"uy-text-content-neutral-disabled"}},{color:"primary",isLoading:!1,isDisabled:!0,class:{button:"uy-border uy-border-solid uy-border-border-neutral-disabled focus-visible:uy-border-border-primary-focus",icon:"uy-text-content-neutral-disabled"}},{color:"inverted",isDisabled:!1,isLoading:!1,class:{button:"uy-border uy-border-solid uy-border-border-inverted hover:uy-border-border-inverted-hover data-[pressed]:uy-border-border-inverted-pressed active:uy-border-border-inverted-active focus-visible:uy-border-border-inverted-focus",icon:"uy-text-content-inverted group-hover:uy-text-content-inverted-hover data-[pressed]:uy-text-content-inverted-pressed active:uy-text-content-inverted-active focus-visible:uy-text-content-inverted-focus"}},{color:"inverted",isLoading:!1,isDisabled:!0,class:{button:"uy-border uy-border-solid uy-border-border-inverted-disabled focus-visible:uy-border-border-primary-focus",icon:"uy-text-content-inverted-disabled"}}]}),o=e.tv({extend:t,variants:{variant:{ghost:""},color:{neutral:"",primary:"",danger:"",warning:""}},compoundVariants:[{color:"neutral",isDisabled:!1,isLoading:!1,class:{button:"hover:uy-bg-surface-neutral-hover data-[pressed]:uy-bg-surface-neutral-pressed active:uy-bg-surface-neutral-active",icon:"uy-text-content-neutral group-hover:uy-text-content-neutral-hover data-[pressed]:uy-text-content-neutral-pressed focus-visible:uy-text-content-neutral-focus active:uy-text-content-neutral-active"}},{color:"primary",isDisabled:!1,isLoading:!1,class:{button:"hover:uy-bg-surface-primary-lowest-hover data-[pressed]:uy-bg-surface-primary-lowest-pressed active:uy-bg-surface-primary-lowest-active",icon:"uy-text-content-primary group-hover:uy-text-content-primary data-[pressed]:uy-text-content-primary focus-visible:uy-text-content-primary active:uy-text-content-primary"}},{color:"danger",isDisabled:!1,isLoading:!1,class:{button:"hover:uy-bg-surface-danger-lowest-hover data-[pressed]:uy-bg-surface-danger-lowest-pressed active:uy-bg-surface-danger-lowest-active",icon:"uy-text-content-danger group-hover:uy-text-content-danger-hover data-[pressed]:uy-text-content-danger-pressed focus-visible:uy-text-content-danger-focus active:uy-text-content-danger-active"}},{color:"warning",isDisabled:!1,isLoading:!1,class:{button:"hover:uy-bg-surface-warning-lowest-hover data-[pressed]:uy-bg-surface-warning-lowest-pressed active:uy-bg-surface-warning-lowest-active",icon:"uy-text-content-warning group-hover:uy-text-content-warning-hover data-[pressed]:uy-text-content-warning-pressed focus-visible:uy-text-content-warning-focus active:uy-text-content-warning-active"}},{color:["primary","neutral","danger","warning"],isDisabled:!0,isLoading:!1,class:{button:"",icon:"uy-text-content-neutral-disabled"}},{color:["primary","neutral","danger","warning"],isDisabled:!1,isLoading:!0,class:{button:"",icon:"uy-text-content-neutral-disabled"}}]});exports.iconButtonGhost=o;exports.iconButtonPrimary=r;exports.iconButtonSecondary=n;

package/dist/cjs/components/input/Input.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),w=require("react-aria-components"),I=require("react-intl"),j=require("tailwind-variants"),N=require("../icon-button/CircularIconButton.js"),q=require("../icon/Icon.js"),M=require("../spinner/Spinner.js"),S=j.tv({slots:{base:"uy-flex uy-h-500 uy-border uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",prefix:"uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-rounded-l-100 active:uy-border-border-form-active",inputWrapper:"uy-flex uy-gap-50 uy-flex-grow uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100",input:"uy-flex-grow uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest",state:"uy-flex uy-gap-50 uy-items-center",suffix:"uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-rounded-r-100 active:uy-border-border-form-active"},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",prefix:"uy-bg-surface-form-error uy-border-border-form-error",inputWrapper:"uy-bg-surface-form-error",input:"uy-bg-surface-form-error",state:"uy-text-content-form-error",suffix:"uy-bg-surface-form-error uy-border-border-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",prefix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-readonly",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-readonly",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-readonly"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",prefix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",prefix:"uy-bg-surface-neutral-low uy-border-border-form-enabled uy-text-content-form-enabled",inputWrapper:"uy-border-border-form-enabled uy-bg-surface-form-enabled",input:"uy-text-content-form-enabled uy-bg-surface-form-enabled",state:"uy-text-content-neutral-disabled",suffix:"uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"}}]}),l=h.forwardRef(({type:f="text",prefix:a,suffix:s,isInvalid:d,isLoading:r,isDisabled:u,isReadOnly:o,onClearButtonPress:t,...i},y)=>{const n=I.useIntl(),{base:b,prefix:c,inputWrapper:m,input:p,state:x,suffix:g}=S({isInvalid:!!d,isReadOnly:!!o,isDisabled:!!u}),v=i.value&&!r&&!o&&!u;return e.jsxs("div",{className:b(),children:[a?e.jsx("span",{className:c(),children:a}):null,e.jsxs("div",{className:m(),children:[e.jsx(w.Input,{...i,ref:y,type:f,className:p(),"aria-busy":r,readOnly:o,disabled:u}),e.jsxs("div",{className:x(),children:[r&&e.jsx(M.Spinner,{color:"inherit",size:"small",label:n.formatMessage({id:"unity:component:form-field:form-input:spinner:label",defaultMessage:"Loading"})}),d&&e.jsx(q.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:n.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),v&&e.jsx(N.CircularIconButton,{title:n.formatMessage({id:"unity:component:form-field:form-input:clear:title",defaultMessage:"Clear"}),className:"uy-text-content-neutral-enabled",icon:"CloseOutlined",onPress:()=>{t==null||t()}})]})]}),s?e.jsx("span",{className:g(),children:s}):null]})});l.displayName="Input";exports.Input=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("react"),h=require("react-aria-components"),j=require("react-intl"),I=require("tailwind-variants"),N=require("../icon-button/CircularIconButton.js"),q=require("../icon/Icon.js"),M=require("../spinner/Spinner.js"),S=I.tv({slots:{base:"uy-flex uy-h-500 uy-border uy-border-solid uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active",prefix:"uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-r uy-rounded-l-100 active:uy-border-border-form-active",inputWrapper:"uy-flex uy-gap-50 uy-flex-grow uy-flex-nowrap uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-100 uy-max-w-full uy-justify-between",input:"uy-w-full uy-max-w-full uy-flex-1 uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-min-w-0 uy-max-w-full",state:"uy-flex uy-gap-50 uy-items-center uy-shrink-0",suffix:"uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-rounded-r-100 active:uy-border-border-form-active"},variants:{isInvalid:{true:{base:"uy-border-border-form-error uy-bg-surface-form-error",prefix:"uy-bg-surface-form-error uy-border-border-form-error",inputWrapper:"uy-bg-surface-form-error",input:"uy-bg-surface-form-error",state:"uy-text-content-form-error",suffix:"uy-bg-surface-form-error uy-border-border-form-error"}},isReadOnly:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",prefix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-readonly",inputWrapper:"uy-border-border-form-disabled uy-bg-surface-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-readonly",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-readonly"}},isDisabled:{true:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",prefix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled",inputWrapper:"uy-bg-surface-form-disabled uy-text-content-form-disabled",input:"uy-bg-surface-form-disabled uy-text-content-form-disabled",suffix:"uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",prefix:"uy-bg-surface-neutral-low uy-border-border-form-enabled uy-text-content-form-enabled",inputWrapper:"uy-border-border-form-enabled uy-bg-surface-form-enabled",input:"uy-text-content-form-enabled uy-bg-surface-form-enabled",state:"uy-text-content-neutral-disabled",suffix:"uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"}}]}),l=v.forwardRef(({type:f="text",prefix:a,suffix:s,isInvalid:d,isLoading:r,isDisabled:u,isReadOnly:o,onClearButtonPress:t,...i},y)=>{const n=j.useIntl(),{base:b,prefix:c,inputWrapper:m,input:p,state:x,suffix:g}=S({isInvalid:!!d,isReadOnly:!!o,isDisabled:!!u}),w=i.value&&!r&&!o&&!u;return e.jsxs("div",{className:b(),children:[a?e.jsx("span",{className:c(),children:a}):null,e.jsxs("div",{className:m(),children:[e.jsx(h.Input,{...i,ref:y,type:f,className:p(),"aria-busy":r,readOnly:o,disabled:u}),e.jsxs("div",{className:x(),children:[r&&e.jsx(M.Spinner,{color:"inherit",size:"small",label:n.formatMessage({id:"unity:component:common:loading:label",defaultMessage:"Loading..."})}),d&&e.jsx(q.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:n.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),w&&e.jsx(N.CircularIconButton,{title:n.formatMessage({id:"unity:component:form-field:form-input:clear:title",defaultMessage:"Clear"}),className:"uy-text-content-neutral-enabled",icon:"CloseOutlined",onPress:()=>{t==null||t()}})]})]}),s?e.jsx("span",{className:g(),children:s}):null]})});l.displayName="Input";exports.Input=l;

package/dist/cjs/components/menu/parts/MenuContent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),t=require("react-aria-components");function n({children:r,placement:o,width:e}){const s=e?`uy-w-[${e}px]`:"";return u.jsx(t.Popover,{placement:o,className:"uy-flex uy-flex-col uy-justify-end uy-items-start uy-p-100 uy-rounded-100 uy-border uy-border-border-neutral uy-bg-surface-neutral uy-shadow-floating",children:u.jsx(t.Menu,{autoFocus:"first",className:`uy-min-w-[320px] ${s}`,children:r})})}n.displayName="MenuContent";exports.MenuContent=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),t=require("react-aria-components");function n({children:r,placement:o,width:e}){const s=e?`uy-w-[${e}px]`:"";return u.jsx(t.Popover,{placement:o,className:"uy-flex uy-flex-col uy-justify-end uy-items-start uy-p-100 uy-rounded-100 uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-shadow-floating",children:u.jsx(t.Menu,{autoFocus:"first",className:`uy-min-w-[320px] ${s}`,children:r})})}n.displayName="MenuContent";exports.MenuContent=n;

package/dist/cjs/components/multi-select/MultiSelect.d.ts

@@ -0,0 +1,62 @@
+import { MultiSelectComponent, MultiSelectProps } from './Multiselect.types.js';
+declare const MultiSelectComponent: <TItem extends Record<string | number, unknown>, TItemKey extends keyof TItem, TKeyType extends TItem[TItemKey] & (string | number)>(props: MultiSelectProps<TItem, TItemKey, TKeyType>, ref: React.ForwardedRef<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The MultiSelect component allows users to select multiple items from a dropdown list.
+ * The component provides two different APIs:
+ * 1. Static API - For simple cases where options are defined as direct children and use primitive values as keys (strings or numbers)
+ * 2. Dynamic API - For data-driven cases where options are generated from a dynamic collection with typed objects
+ * @example
+ * ```tsx
+ * import { MultiSelect, MultiSelectOption, MultiSelectOptGroup } from '@payfit/unity-components'
+ *
+ * // Static API - Options defined as direct children
+ * <MultiSelect
+ *   placeholder="Select fruits..."
+ *   onChange={(selected) => console.log(selected)}
+ * >
+ *   <MultiSelectOptGroup label="Citrus" withSeparator>
+ *     <MultiSelectOption value="orange">Orange</MultiSelectOption>
+ *     <MultiSelectOption value="lemon">Lemon</MultiSelectOption>
+ *   </MultiSelectOptGroup>
+ *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ * </MultiSelect>
+ *
+ * // Dynamic API - Options generated from a collection with typed objects
+ * interface Fruit {
+ *   id: string;
+ *   name: string;
+ *   category: string;
+ * }
+ *
+ * const fruits: Set<Fruit> = new Set([
+ *   { id: 'apple-1', name: 'Apple', category: 'Core' },
+ *   { id: 'orange-1', name: 'Orange', category: 'Citrus' }
+ * ]);
+ *
+ * <MultiSelect
+ *   items={fruits}
+ *   placeholder="Select fruits..."
+ *   value={new Set(['apple-1'])}
+ *   getItemValue={item => item.id}
+ *   renderValue={(items) =>
+ *     Array.from(items)
+ *       .map(item => item.name)
+ *       .join(', ')
+ *   }
+ * >
+ *   {(item) => (
+ *     <MultiSelectOption value={item.id}>
+ *       {item.name}
+ *     </MultiSelectOption>
+ *   )}
+ * </MultiSelect>
+ * ```
+ * @component
+ * @template TItem - The type of items in the collection. When using the dynamic API, it must be a Record or an object. For the static API, it defaults to a string or number.
+ * @template TItemKey - The key name within TItem used as the selection value (must be a key of TItem). Applies only to the dynamic API.
+ * @template TKeyType - The type of the property at TItem[TItemKey] (must be string or number). Applies only to the dynamic API.
+ * @remarks
+ * [API & Docs](https://unity-components.payfit.io/?path=/docs/inputs-multiselect--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
+ */
+export declare const MultiSelect: MultiSelectComponent;
+export {};

package/dist/cjs/components/multi-select/MultiSelect.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("react"),P=require("@ariakit/react"),fe=require("./hooks/use-combobox-filter.js"),Se=require("./hooks/use-multiselection-state.js"),Q=require("./Multiselect.context.js"),z=require("./parts/MultiSelectButton.js"),J=require("./parts/MultiSelectPopover.js");function U(t){return t instanceof Map}function me(t){return!Object.prototype.hasOwnProperty.call(t,"items")}function u(t){return String(t)}function y(t){return isNaN(Number(t))?t:Number(t)}function X(t){return Array.from(t,u)}function W(t){return new Set(X(t))}const Y=(t,V)=>{const s=me(t),j=e=>{if(Object.hasOwnProperty.call(e,"value"))return e.value;if(Object.prototype.hasOwnProperty.call(e,"id"))return e.id;if(typeof e=="string")return e;const n=Object.keys(e)[0];return e[n]},Z=s?e=>Array.from(e).map(String).join(", "):e=>Array.from(e).map(n=>j(n)).join(", "),S=t,K=t,a=c.useMemo(()=>s?void 0:S.items,[s,S.items]),r=s?void 0:S.getItemValue??j,$=t.renderValue??Z,{children:p}=s?K:S,ee=s?void 0:S.searchOptions,{children:A}=K,{children:be,value:b,defaultValue:f,onChange:v,onBlur:g,isDisabled:O,isInvalid:w,isLoading:R,isReadOnly:q,isSearchable:h,placeholder:D,onClearButtonPress:k,maxVisibleItems:I=7,...F}=t,m=c.useCallback(()=>s||!a?[]:U(a)?Array.from(a.values()).flat():Array.from(a),[a,s]),te=c.useCallback(()=>{if("value"in t)return b?W(b):new Set},[t,b]),re=c.useCallback(()=>f?W(f):new Set,[f]),ne=c.useCallback(e=>{if(!v)return;const n=new Set(Array.from(e).map(l=>y(l)));v(n)},[v]),{selectedKeys:d,selectKey:B,unselectKey:N}=Se.useMultiSelectionState({selectedKeys:te(),defaultSelectedKeys:re(),onSelectionChange:ne}),se=c.useCallback(e=>{B(u(e))},[B]),oe=c.useCallback(e=>{N(u(e))},[N]),{setSearchQuery:le,matchingItems:M}=fe.useComboboxFilter({items:m(),extractSearchableText:e=>s?[""]:[u((r==null?void 0:r(e))||"")],enabled:h,searchOptions:ee}),ce=()=>{if(s)return Array.from(d);const e=m();return Array.from(d).map(n=>{const l=e.find(o=>u((r==null?void 0:r(o))||"")===n);return l&&r?r(l):y(n)})},ue=()=>{if(s)return new Set(Array.from(d).map(l=>y(l)));const e=m(),n=new Set;return Array.from(d).forEach(l=>{const o=e.find(x=>u((r==null?void 0:r(x))||"")===l);o&&n.add(o)}),n},ae=()=>{if(f)return X(f)},C=c.useMemo(ce,[d,s,r,m]),T=c.useMemo(ue,[d,s,r,m]),L=c.useMemo(ae,[f]),G=e=>{const n=new Set(e),l=new Set(C.map(o=>u(o)));for(const o of n)l.has(o)||se(y(o));for(const o of l)n.has(o)||oe(y(o))},_=c.useCallback(()=>s?A:a?U(a)?Array.from(a.entries()).map(([e,n])=>{const l=n.filter(o=>M.some(x=>{const ie=(r==null?void 0:r(o))||"",de=(r==null?void 0:r(x))||"";return u(de)===u(ie)}));return p(e,l)}):M.map(e=>p(e)):null,[p,a,M,A,r,s]),E=c.useMemo(()=>_(),[_]),H=$;return h?i.jsx(P.ComboboxProvider,{resetValueOnHide:!0,setValue:le,children:i.jsx(P.SelectProvider,{value:C.map(e=>u(e)),defaultValue:L,setValue:G,focusLoop:!0,children:i.jsxs(Q.MultiSelectContext.Provider,{value:{isSearchable:h,maxVisibleItems:I,selectedKeys:d},children:[i.jsx(z.MultiSelectButton,{ref:V,placeholder:D,isDisabled:O,isReadOnly:q,isLoading:R,isInvalid:w,renderValue:H,selectedItems:T,onClearButtonPress:k,...F}),i.jsx(J.MultiSelectPopover,{onBlur:g,children:E})]})})}):i.jsx(P.SelectProvider,{value:C.map(e=>u(e)),defaultValue:L,setValue:G,focusLoop:!0,children:i.jsxs(Q.MultiSelectContext.Provider,{value:{isSearchable:h,maxVisibleItems:I,selectedKeys:d},children:[i.jsx(z.MultiSelectButton,{ref:V,placeholder:D,isDisabled:O,isReadOnly:q,isLoading:R,isInvalid:w,renderValue:H,selectedItems:T,onClearButtonPress:k,...F}),i.jsx(J.MultiSelectPopover,{onBlur:g,children:E})]})})};Y.displayName="MultiSelect";const ye=c.forwardRef(Y);exports.MultiSelect=ye;

package/dist/cjs/components/multi-select/Multiselect.context.d.ts

@@ -0,0 +1,7 @@
+interface MultiSelectContextType {
+    isSearchable?: boolean;
+    maxVisibleItems?: number;
+    selectedKeys?: Set<string>;
+}
+export declare const MultiSelectContext: import('react').Context<MultiSelectContextType>;
+export {};

package/dist/cjs/components/multi-select/Multiselect.context.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({isSearchable:!1,selectedKeys:new Set});exports.MultiSelectContext=t;