@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/link/Link.d.cts

@@ -0,0 +1,83 @@
+import { HTMLAttributes } from 'react';
+import { LinkProps as AriaLinkProps } from 'react-aria-components';
+import { NavLinkProps as NavRouterLinkProps } from 'react-router-dom';
+import { VariantProps } from 'tailwind-variants';
+import { link } from './Link.variants.cjs';
+export type LinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
+    /**
+     * The URL the link navigates to.
+     */
+    href: HTMLAnchorElement['href'] | NavRouterLinkProps['to'];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLLinkElement>['id'];
+    /**
+     * The link's display variant. Links can be inline with text or standalone (block).
+     * @default 'inline'
+     */
+    variant?: VariantProps<typeof link>['variant'];
+    /**
+     * The link's color.
+     * @default 'primary'
+     */
+    color?: VariantProps<typeof link>['color'];
+    /**
+     * Whether the link navigates to an external page. If true, the link will open in a new tab and display an indicator icon.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Whether the link marks the current section or page.
+     * @default false
+     */
+    isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, 'aria-current'> | undefined;
+    /**
+     * When true, the active state will only be applied if the location is matched exactly.
+     * @default false
+     */
+    isExact?: boolean;
+    maxCharactersTruncation?: number;
+};
+/**
+ * Links allow users to navigate to different pages or sections.
+ */
+declare const Link: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "className" | "style"> & {
+    /**
+     * The URL the link navigates to.
+     */
+    href: HTMLAnchorElement["href"] | NavRouterLinkProps["to"];
+    /**
+     * The link id
+     */
+    id?: HTMLAttributes<HTMLLinkElement>["id"];
+    /**
+     * The link's display variant. Links can be inline with text or standalone (block).
+     * @default 'inline'
+     */
+    variant?: VariantProps<typeof link>["variant"];
+    /**
+     * The link's color.
+     * @default 'primary'
+     */
+    color?: VariantProps<typeof link>["color"];
+    /**
+     * Whether the link navigates to an external page. If true, the link will open in a new tab and display an indicator icon.
+     * @default false
+     */
+    isExternal?: boolean;
+    /**
+     * Whether the link marks the current section or page.
+     * @default false
+     */
+    isCurrent?: Pick<HTMLAttributes<HTMLAnchorElement>, "aria-current"> | undefined;
+    /**
+     * When true, the active state will only be applied if the location is matched exactly.
+     * @default false
+     */
+    isExact?: boolean;
+    maxCharactersTruncation?: number;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLAnchorElement>>;
+export { Link };

package/dist/cjs/components/link/Link.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("tailwind-variants"),e=t.tv({base:"uy-rounded-50 uy-underline uy-transition-colors disabled:uy-text-content-neutral-disabled focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-offset-2 focus-visible:uy-ring-utility-focus-ring",variants:{variant:{inline:"uy-inline uy-text-inherit uy-font-medium uy-leading-inherit",standalone:"uy-flex uy-typography-action uy-gap-x-25 uy-items-end"},color:{primary:"uy-text-content-primary-enabled hover:uy-text-content-primary-hover active:uy-text-content-primary-active data-[pressed]:uy-text-content-primary-active data-[current]:uy-text-content-primary-active aria-[current]:uy-text-content-primary-active",secondary:"uy-text-content-neutral-enabled hover:uy-text-content-neutral-hover active:uy-text-content-neutral-active data-[pressed]:uy-text-content-neutral-active data-[current]:uy-text-content-neutral-active aria-[current]:uy-text-content-neutral-active"},isDisabled:{true:"data-[disabled]:uy-cursor-not-allowed",false:"enabled:uy-cursor-pointer"},isTruncated:{true:"uy-truncate uy-max-w-[var(--uy-link-max-w)]",false:""}},compoundVariants:[{color:"primary",isDisabled:!0,class:"data-[disabled]:uy-text-content-primary-disabled"},{color:"secondary",isDisabled:!0,class:"data-[disabled]:uy-text-content-neutral-lowest-disabled"}],defaultVariants:{variant:"inline",color:"primary",isDisabled:!1}});exports.link=e;

package/dist/cjs/components/link/Link.variants.d.cts

@@ -0,0 +1,120 @@
+export declare const link: import('tailwind-variants').TVReturnType<{
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-rounded-50 uy-underline uy-transition-colors disabled:uy-text-content-neutral-disabled focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-offset-2 focus-visible:uy-ring-utility-focus-ring", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}>, {
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-rounded-50 uy-underline uy-transition-colors disabled:uy-text-content-neutral-disabled focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-offset-2 focus-visible:uy-ring-utility-focus-ring", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        inline: string;
+        standalone: string;
+    };
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isTruncated: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;

package/dist/cjs/components/link/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function s(i){if(!i)return!1;const n=t=>t.startsWith("/")||t.startsWith("./")||t.startsWith("../")||t.startsWith("#"),r=t=>t.includes("://");try{const t=new URL(i,window.location.origin);return t.origin!==window.location.origin||r(t.pathname)?!0:!n(t.pathname)}catch{return!n(i)}}exports.isExternalUrl=s;

package/dist/cjs/components/link/utils.d.cts

@@ -0,0 +1 @@
+export declare function isExternalUrl(href?: string): boolean;

package/dist/cjs/components/menu/Menu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react-aria-components");function e({defaultOpen:n,children:r}){return t.jsx(u.MenuTrigger,{defaultOpen:n,children:r})}e.displayName="Menu";exports.Menu=e;

package/dist/cjs/components/menu/Menu.d.cts

@@ -0,0 +1,10 @@
+import { MenuTriggerProps } from 'react-aria-components';
+interface MenuProps {
+    defaultOpen?: MenuTriggerProps['defaultOpen'];
+    children?: MenuTriggerProps['children'];
+}
+export declare function Menu({ defaultOpen, children }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Menu {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),t=require("react-aria-components");function r({children:n,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","data-dd-privacy":"allow",children:u.jsx(t.Menu,{autoFocus:"first",className:`uy-min-w-[320px] ${s}`,children:n})})}r.displayName="MenuContent";exports.MenuContent=r;

package/dist/cjs/components/menu/parts/MenuContent.d.cts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { PopoverProps } from 'react-aria-components';
+interface MenuContent {
+    placement?: PopoverProps['placement'];
+    width?: number;
+}
+export declare function MenuContent({ children, placement, width, }: PropsWithChildren<MenuContent>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuContent {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/menu/parts/MenuHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react-aria-components"),u=require("./MenuSeparator.cjs");function n({children:t,className:a}){return e.jsxs(r.MenuSection,{children:[e.jsx(r.Header,{className:`uy-p-100 ${a}`,children:t}),e.jsx(u.MenuSeparator,{})]})}n.displayName="MenuHeader";exports.MenuHeader=n;

package/dist/cjs/components/menu/parts/MenuHeader.d.cts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface MenuHeaderProps {
+    className?: string;
+}
+export declare function MenuHeader({ children, className, }: PropsWithChildren<MenuHeaderProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuHeader {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/menu/parts/MenuItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("react-aria-components"),y=require("tailwind-merge");function t({prefix:e,children:u,href:r,onAction:n,className:s,...a}){return i.jsxs(o.MenuItem,{href:r,onAction:n,className:y.twMerge("uy-cursor-pointer uy-flex uy-p-100 uy-items-start uy-gap-100 uy-rounded-25 uy-typography-body uy-text-content-neutral hover:uy-bg-surface-neutral-hover data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-utility-focus-ring active:uy-bg-surface-neutral-active",s),...a,children:[e||null,u]})}t.displayName="MenuItem";exports.MenuItem=t;

package/dist/cjs/components/menu/parts/MenuItem.d.cts

@@ -0,0 +1,15 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { MenuItemProps as MenuItemAriaComponentProps } from 'react-aria-components';
+import { DataAttributes } from '../../../types/DataAttributes.cjs';
+interface MenuItemProps extends DataAttributes {
+    children?: MenuItemAriaComponentProps['children'];
+    href?: MenuItemAriaComponentProps['href'];
+    onAction?: MenuItemAriaComponentProps['onAction'];
+    prefix?: ReactNode;
+    className?: string;
+}
+export declare function MenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuItem {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/menu/parts/MenuSeparator.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react-aria-components");function e(){return r.jsx(t.Separator,{className:"uy-h-[1px] uy-bg-surface-neutral-lowest uy-w-full uy-mt-100 uy-mb-100"})}e.displayName="MenuSeparator";exports.MenuSeparator=e;

package/dist/cjs/components/menu/parts/MenuSeparator.d.cts

@@ -0,0 +1,4 @@
+export declare function MenuSeparator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuSeparator {
+    var displayName: string;
+}

package/dist/cjs/components/menu/parts/MenuTrigger.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("@radix-ui/react-slot"),s=require("react-aria-components");function e({children:r,asChild:t,className:n}){const o=t?u.Slot:s.Button;return i.jsx(o,{className:n,children:r})}e.displayName="MenuTrigger";exports.MenuTrigger=e;

package/dist/cjs/components/menu/parts/MenuTrigger.d.cts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+interface MenuTriggerProps {
+    className?: string;
+    asChild?: boolean;
+}
+export declare function MenuTrigger({ children, asChild, className, }: PropsWithChildren<MenuTriggerProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuTrigger {
+    var displayName: string;
+}
+export {};

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

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

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

@@ -0,0 +1,62 @@
+import { MultiSelectComponent, MultiSelectProps } from './Multiselect.types.cjs';
+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.context.cjs

@@ -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;

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

@@ -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.types.d.cts

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+import { UseComboboxFilterProps } from './hooks/use-combobox-filter.cjs';
+type Key = string | number;
+export interface MultiSelectBaseProps {
+    /** Default content when no value is selected */
+    placeholder?: string;
+    /** Whether the select is searchable and shows a search input on top of the options */
+    isSearchable?: boolean;
+    /** Whether the select is disabled */
+    isDisabled?: boolean;
+    /** Whether the select is invalid */
+    isInvalid?: boolean;
+    /** Whether the select is read only */
+    isReadOnly?: boolean;
+    /** Whether the select is in a loading state */
+    isLoading?: boolean;
+    /** Callback when the clear button is pressed */
+    onClearButtonPress?: () => void;
+    /** Maximum number of items to show in the select button before showing a counter badge */
+    maxVisibleItems?: number;
+    /** Callback when the select is focused */
+    onFocus?: () => void;
+    /** Callback when the select is blurred */
+    onBlur?: () => void;
+    /** The ID of the element that labels this select when no visible label is provided */
+    'aria-labelledby'?: string;
+    /** The ID of the element that labels this select when no visible label is provided */
+    'aria-label'?: string;
+}
+export interface FlatSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> extends MultiSelectBaseProps {
+    /** The items to display in the select */
+    items: Set<TItem>;
+    /** The currently selected values (controlled mode) */
+    value?: Set<TKeyType>;
+    /** The default selected values (uncontrolled mode) */
+    defaultValue?: Set<TKeyType>;
+    /** Callback when selection changes */
+    onChange?: (value: Set<TKeyType>) => void;
+    /** Function to get the value from an item, defaults to String(item) */
+    getItemValue?: (item: TItem) => TKeyType;
+    /** Function to render the selected value(s) in the button */
+    renderValue?: (value: Set<TItem>) => string;
+    /** Children must be a render function that returns Option components */
+    children: (item: TItem) => React.JSX.Element;
+}
+export interface GroupedSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> extends MultiSelectBaseProps {
+    /** The items to display in the select, grouped by category */
+    items: Map<string, TItem[]>;
+    /** The currently selected values (controlled mode) */
+    value?: Set<TKeyType>;
+    /** The default selected values (uncontrolled mode) */
+    defaultValue?: Set<TKeyType>;
+    /** Callback when selection changes */
+    onChange?: (value: Set<TKeyType>) => void;
+    /** Function to get the value from an item, defaults to String(item) */
+    getItemValue?: (item: TItem) => TKeyType;
+    /** Function to render the selected value(s) in the button */
+    renderValue?: (value: Set<TItem>) => string;
+    /** Children must be a render function that returns OptGroup components */
+    children: (groupKey: string, items: TItem[]) => React.JSX.Element;
+}
+export interface StaticItemsProps<TItem = Key> extends MultiSelectBaseProps {
+    /** The items to display in the select (for dynamic API) */
+    items?: never;
+    /** The currently selected values (controlled mode) */
+    value?: Set<TItem>;
+    /** The default selected values (uncontrolled mode) */
+    defaultValue?: Set<TItem>;
+    /** Callback when selection changes */
+    onChange?: (value: Set<TItem>) => void;
+    /** Function to render the selected value(s) in the button */
+    renderValue?: (value: Set<TItem>) => string;
+    /** Children must be Option components */
+    children: ReactNode;
+    getItemValue?: never;
+}
+export type DynamicMultiSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> = TItem extends unknown ? (Omit<FlatSelectProps<TItem, TItemKey, TKeyType>, 'items'> & {
+    items: Set<TItem>;
+    children: (item: TItem) => React.JSX.Element;
+    getItemValue?: (item: TItem) => TKeyType;
+    renderValue?: (value: Set<TItem>) => string;
+    isSearchable?: boolean;
+    searchOptions?: UseComboboxFilterProps<TItem>['searchOptions'];
+}) | (Omit<GroupedSelectProps<TItem, TItemKey, TKeyType>, 'items'> & {
+    items: Map<string, TItem[]>;
+    children: (groupKey: string, items: TItem[]) => React.JSX.Element;
+    getItemValue?: (item: TItem) => TKeyType;
+    renderValue?: (value: Set<TItem>) => string;
+    isSearchable?: boolean;
+    searchOptions?: UseComboboxFilterProps<TItem>['searchOptions'];
+}) : never;
+export type MultiSelectProps<TItem, // Item type
+TItemKey extends keyof TItem, // key name of the item
+TKeyType extends TItem[TItemKey] & Key> = TItem extends unknown ? DynamicMultiSelectProps<TItem, TItemKey, TKeyType> | StaticItemsProps : never;
+export type MultiSelectComponent = {
+    <TItem, // Item type
+    TItemKey extends keyof TItem, // key name of the item
+    TKeyType extends TItem[TItemKey] & Key>(props: MultiSelectProps<TItem, TItemKey, TKeyType> & {
+        ref?: React.ForwardedRef<HTMLButtonElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+};
+export {};

package/dist/cjs/components/multi-select/hooks/use-combobox-filter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),y=require("react-aria-components");function f({items:t=[],extractSearchableText:n=e=>[String(e)],enabled:o=!1,searchOptions:u={sensitivity:"base"}}){const[e,a]=s.useState(""),i=y.useFilter(u),c=i.contains.bind(i),l=r=>{s.startTransition(()=>{a(r)})},b=s.useMemo(()=>!o||e.length===0?t:t.filter(r=>n(r).some(h=>c(h,e))),[o,t,e,n,c]);return{searchQuery:e,setSearchQuery:l,matchingItems:b}}exports.useComboboxFilter=f;

package/dist/cjs/components/multi-select/hooks/use-combobox-filter.d.cts

@@ -0,0 +1,12 @@
+export interface UseComboboxFilterProps<T> {
+    items?: T[];
+    extractSearchableText?: (item: T) => string[];
+    enabled?: boolean;
+    searchOptions?: Intl.CollatorOptions;
+}
+export interface UseComboboxFilterReturn<T> {
+    searchQuery: string;
+    setSearchQuery: (value: string) => void;
+    matchingItems: T[];
+}
+export declare function useComboboxFilter<T>({ items, extractSearchableText, enabled, searchOptions, }: UseComboboxFilterProps<T>): UseComboboxFilterReturn<T>;

package/dist/cjs/components/multi-select/hooks/use-multiselection-state.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function f({selectedKeys:w,defaultSelectedKeys:l,onSelectionChange:t}){const[y,K]=c.useState(()=>l??new Set),u=w!==void 0,d=u?w:y;return{selectedKeys:d,isSelected:e=>d.has(e),selectKey:e=>{if(u&&t){const s=new Set(d);s.add(e),t(s)}else K(s=>{const r=new Set(s);return r.add(e),t==null||t(r),r})},unselectKey:e=>{if(u&&t){const s=new Set(d);s.delete(e),t(s)}else K(s=>{const r=new Set(s);return r.delete(e),t==null||t(r),r})},toggleKey:e=>{if(u&&t){const s=new Set(d);s.has(e)?s.delete(e):s.add(e),t(s)}else K(s=>{const r=new Set(s);return r.has(e)?r.delete(e):r.add(e),t==null||t(r),r})}}}exports.useMultiSelectionState=f;

package/dist/cjs/components/multi-select/hooks/use-multiselection-state.d.cts

@@ -0,0 +1,14 @@
+interface UseMultiSelectionStateProps<V extends string | number = string> {
+    selectedKeys?: Set<V>;
+    defaultSelectedKeys?: Set<V>;
+    onSelectionChange?: (keys: Set<V>) => void;
+}
+interface UseMultiSelectionStateReturn<V extends string | number = string> {
+    selectedKeys: Set<V>;
+    isSelected: (key: V) => boolean;
+    selectKey: (key: V) => void;
+    unselectKey: (key: V) => void;
+    toggleKey: (key: V) => void;
+}
+export declare function useMultiSelectionState<V extends string | number = string>({ selectedKeys: controlledKeys, defaultSelectedKeys, onSelectionChange, }: UseMultiSelectionStateProps<V>): UseMultiSelectionStateReturn<V>;
+export {};

package/dist/cjs/components/multi-select/parts/MultiSelectButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),d=require("@ariakit/react"),z=require("react-aria"),A=require("react-intl"),E=require("tailwind-variants"),R=require("../../badge/Badge.cjs"),k=require("../../icon-button/CircularIconButton.cjs"),p=require("../../icon/Icon.cjs"),D=require("../../spinner/Spinner.cjs"),K=require("../Multiselect.context.cjs"),$=E.tv({slots:{base:"uy-h-500 uy-flex uy-items-center uy-justify-between uy-py-100 uy-px-150 uy-w-full uy-border uy-border-solid uy-rounded-75 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:not([disabled]):uy-border-border-form-active !uy-pointer-events-auto",inputValue:"uy-flex-1 uy-typography-body uy-text-content-form-enabled uy-text-left uy-line-clamp-1",state:"uy-grow-0 uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-inline-flex uy-gap-50 uy-items-center uy-px-100",suffix:""},variants:{isDisabled:{true:{base:"uy-bg-surface-form-disabled uy-cursor-not-allowed uy-border-border-form-disabled uy-text-content-form-disabled",inputValue:"!uy-text-content-form-disabled",state:"uy-text-content-form-disabled",suffix:"uy-text-content-form-disabled"}},isReadOnly:{true:{base:"uy-bg-surface-form-disabled uy-cursor-not-allowed uy-border-border-form-disabled",inputValue:"uy-text-content-form-disabled",state:"uy-text-content-form-disabled",suffix:"uy-text-content-form-disabled"}},isInvalid:{true:{base:"uy-bg-surface-form-error uy-border-border-form-error",inputValue:"uy-text-content-form-error",state:"uy-text-content-form-error",suffix:"uy-text-content-form-error"}},isEmpty:{true:{inputValue:"uy-text-content-neutral-lowest"}}},compoundVariants:[{isInvalid:!1,isDisabled:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled",inputValue:"uy-text-content-form-enabled uy-bg-surface-form-enabled",state:"uy-text-content-neutral-disabled",suffix:"uy-border-border-form-enabled uy-text-content-form-enabled"}}]});function L({isDisabled:o,isReadOnly:t,isLoading:y,isInvalid:s,placeholder:u,selectedItems:S,renderValue:f,onClearButtonPress:i,...w},I){const m=z.useId(),a=A.useIntl(),M=d.useSelectContext(),h=d.useStoreState(M,"open"),b=r.useContext(K.MultiSelectContext),l=b.maxVisibleItems??0,c=b.selectedKeys??new Set,n=Array.from(S),{base:v,inputValue:j,state:q,suffix:C}=$({isDisabled:!!o,isReadOnly:!!t,isInvalid:!!s,isEmpty:c.size===0}),x=Math.max(n.length-l,0),V=c.size>0&&!o&&!t&&!y,B=r.useMemo(()=>{if(n.length===0)return u;const N=n.slice(0,l),O=new Set(N);return f(O)},[n,l,f,u]);return e.jsxs(d.Select,{...w,ref:I,className:v(),disabled:o||t,"aria-invalid":s,"aria-readonly":t,"aria-labelledby":`${m}-select-button-label`,"data-dd-privacy":"mask",children:[e.jsx("span",{id:`${m}-select-button-label`,className:j(),children:c.size>0?B:u}),e.jsxs("div",{className:q(),children:[y&&e.jsx(D.Spinner,{color:"inherit",size:"small",label:a.formatMessage({id:"unity:component:form-field:form-input:spinner:label",defaultMessage:"Loading"})}),s&&e.jsx(p.Icon,{src:"WarningCircleOutlined",color:"content.form.invalid",alt:a.formatMessage({id:"unity:component:form-field:form-input:error:alt",defaultMessage:"Error"})}),x>0&&e.jsxs(R.Badge,{variant:"numeric",children:["+",x]}),V&&e.jsx(k.CircularIconButton,{title:a.formatMessage({id:"unity:component:common:clear:title",defaultMessage:"Clear"}),className:"uy-text-content-neutral-enabled",icon:"CloseOutlined",onPress:()=>{i==null||i()}})]}),e.jsx(p.Icon,{color:"inherit",className:C(),src:h?"CaretUpOutlined":"CaretDownOutlined",role:"presentation"})]})}const g=r.memo(r.forwardRef(L));g.displayName="MultiselectButton";const T=g;exports.MultiSelectButton=T;

package/dist/cjs/components/multi-select/parts/MultiSelectButton.d.cts

@@ -0,0 +1,16 @@
+import { ForwardedRef, ReactElement } from 'react';
+export interface MultiSelectButtonProps<TItem> {
+    placeholder?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isLoading?: boolean;
+    isInvalid?: boolean;
+    /** The selected items to show in the button */
+    selectedItems: Set<TItem>;
+    /** Function to render the selected items */
+    renderValue: (values: Set<TItem>) => string;
+    onClearButtonPress?: () => void;
+}
+export declare const MultiSelectButton: <TItem>(props: MultiSelectButtonProps<TItem> & {
+    ref?: ForwardedRef<HTMLButtonElement>;
+}) => ReactElement;

package/dist/cjs/components/multi-select/parts/MultiSelectOptGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),r=require("@ariakit/react"),f=require("tailwind-variants"),G=require("../Multiselect.context.cjs"),j=f.tv({slots:{base:"uy-flex uy-flex-col uy-bg-surface-neutral",label:"uy-px-150 uy-py-100 uy-typography-body-strong uy-text-content-neutral",separator:"uy-my-100 uy-border-t uy-border-border-neutral uy-border-solid"}});function C(e){return"items"in e&&Array.isArray(e.items)&&typeof e.children=="function"}function c(e){const i=S.useContext(G.MultiSelectContext),{base:y,label:n,separator:o}=j(),{label:a,withSeparator:l,className:d,...b}=e,m=(p,x)=>p.map(h=>x(h)),s=C(e)?m(e.items,e.children):e.children,u={className:y({className:d}),...b};return i.isSearchable?t.jsxs(r.ComboboxGroup,{...u,children:[t.jsx(r.ComboboxGroupLabel,{className:n(),children:a}),s,l&&t.jsx("hr",{className:o(),"aria-hidden":!0,role:"presentation"})]}):t.jsxs(r.SelectGroup,{...u,children:[t.jsx(r.SelectGroupLabel,{className:n(),children:a}),s,l&&t.jsx("hr",{className:o(),"aria-hidden":!0,role:"presentation"})]})}c.displayName="MultiSelectOptGroup";exports.MultiSelectOptGroup=c;

package/dist/cjs/components/multi-select/parts/MultiSelectOptGroup.d.cts

@@ -0,0 +1,69 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+/**
+ * Base props for both static and dynamic MultiSelectOptGroup variants
+ */
+type BaseOptGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The label text displayed at the top of the group */
+    label: string;
+    /** Whether to show a separator line after the group */
+    withSeparator?: boolean;
+};
+/**
+ * Props for the dynamic API of MultiSelectOptGroup
+ * @template T - The type of items in the group
+ */
+export interface DynamicMultiSelectOptGroup<T> extends BaseOptGroupProps {
+    /** Array of items to render as options within the group */
+    items: T[];
+    /** Render function that converts each item into a MultiSelectOption */
+    children: (item: T) => React.JSX.Element;
+}
+/**
+ * Props for the static API of MultiSelectOptGroup
+ */
+export interface StaticMultiSelectOptGroup extends BaseOptGroupProps {
+    /** Not used in static API */
+    items?: never;
+    /** Static MultiSelectOption components to render within the group */
+    children: ReactNode;
+}
+/**
+ * Combined props type for MultiSelectOptGroup
+ * @template T - The type of items when using dynamic API
+ */
+export type MultiSelectOptGroupProps<T = unknown> = DynamicMultiSelectOptGroup<T> | StaticMultiSelectOptGroup;
+/**
+ * Groups related options within a `MultiSelect` component.
+ *
+ * This component provides two APIs for grouping options:
+ * 1. Static API - Directly nest MultiSelectOption components
+ * 2. Dynamic API - Provide an array of items and a render function for dynamic items
+ * @example
+ * ```tsx
+ * // Static API
+ * <MultiSelectOptGroup label="Fruits" withSeparator>
+ *   <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ *   <MultiSelectOption value="banana">Banana</MultiSelectOption>
+ * </MultiSelectOptGroup>
+ *
+ * // Dynamic API
+ * <MultiSelectOptGroup
+ *   label="Fruits"
+ *   items={fruits}
+ *   withSeparator
+ * >
+ *   {fruit => (
+ *     <MultiSelectOption value={fruit.id}>
+ *       {fruit.name}
+ *     </MultiSelectOption>
+ *   )}
+ * </MultiSelectOptGroup>
+ * ```
+ * @template T - The type of items when using the dynamic API
+ * @see {@link MultiSelectOption} for the child component API
+ */
+declare function MultiSelectOptGroup<T>(props: MultiSelectOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace MultiSelectOptGroup {
+    var displayName: string;
+}
+export { MultiSelectOptGroup };