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

package/dist/cjs/components/label/Label.d.cts

@@ -1,17 +0,0 @@
-import { LabelProps as AriaLabelProps } from 'react-aria-components';
-export interface LabelProps extends AriaLabelProps {
-    /**
-     * Whether the field is required.
-     */
-    isRequired?: boolean;
-    /**
-     * The variant of the required label.
-     */
-    requiredVariant?: 'required' | 'optional';
-}
-/**
- * FormLabel is a component that displays a label for a form field.
- * It is used to provide context for the form field.
- */
-declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-export { Label };

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),g=require("react"),f=require("@payfit/unity-icons"),w=require("react-aria-components"),x=require("../../providers/router/RouterProvider.cjs"),L=require("./Link.variants.cjs"),R=require("./utils.cjs"),l=g.forwardRef(({href:t,children:a,variant:u="inline",color:d="primary",isDisabled:o=!1,isExact:y=!1,isCurrent:p=void 0,isExternal:v,maxCharactersTruncation:n,...e},k)=>{const s=x.useRouter(),r=v??R.isExternalUrl(t),i=!r&&s?s.isActive(t.toString(),y):p,m=L.link({variant:u,color:d,isDisabled:o,isTruncated:!!n}),q=!!n;return c.jsxs(w.Link,{"data-dd-privacy":"allow",...e,href:t,ref:k,style:q?{"--uy-link-max-w":`${n}ch`}:{},className:m,isDisabled:o,target:r?"_blank":e.target,rel:r&&!e.rel?"noopener noreferrer":e.rel,...i!==void 0&&{"data-current":i,"aria-current":i?"page":void 0},children:[a,r&&c.jsx(f.IconSprite,{src:"ArrowSquareOutOutlined",color:"currentColor",width:"1em",height:"1em",role:"presentation",className:"uy-self-center uy-inline"})]})});l.displayName="Link";exports.Link=l;

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

@@ -1,83 +0,0 @@
-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.d.cts

@@ -1,120 +0,0 @@
-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/menu/Menu.d.cts

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,9 +0,0 @@
-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.d.cts

@@ -1,15 +0,0 @@
-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.d.cts

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

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

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,62 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,109 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,16 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,69 +0,0 @@
-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 };

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),r=require("@ariakit/react"),p=require("tailwind-variants"),v=require("../../../hooks/use-id.cjs"),m=require("../../checkbox/parts/CheckboxIndicator.cjs"),h=require("../Multiselect.context.cjs"),S=p.tv({slots:{base:["uy-flex uy-flex-col uy-transition","uy-w-full uy-px-150 uy-py-100","uy-rounded-50 uy-cursor-pointer","hover:uy-bg-surface-neutral-hover","active:uy-bg-surface-neutral-pressed","focus-visible:uy-outline focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2","data-[active-item=true]:uy-outline data-[active-item=true]:uy-outline-2 data-[active-item=true]:uy-outline-utility-focus-ring data-[active-item=true]:uy-outline-offset-2"],label:"uy-inline-flex uy-items-center uy-gap-100 uy-text-content-neutral uy-typography-body",helperText:"uy-inline-block uy-typography-body uy-text-content-neutral-low uy-pl-300"},variants:{isDisabled:{true:{base:"!uy-cursor-not-allowed",label:"uy-text-content-neutral-disabled"},false:{base:""}}}});function g({isDisabled:u}){return e.jsx(r.SelectItemCheck,{render:t=>e.jsx(m.CheckboxIndicator,{isSelected:"children"in t&&!!t.children,isDisabled:u,"data-dd-privacy":"hidden"})})}function a({value:u,children:t,isDisabled:n,helperText:o,autoFocus:s=!1,...c},y){const i=v(),d=l.useContext(h.MultiSelectContext),{base:b,label:f,helperText:x}=S({isDisabled:n});return l.createElement(r.SelectItem,{"data-dd-privacy":"mask",...c,ref:y,id:i,key:i,value:String(u),disabled:n,className:b(),autoFocus:s,focusOnHover:!1,"aria-describedby":o?`${i}-helper-text`:void 0,render:d.isSearchable?e.jsx(r.ComboboxItem,{}):void 0},e.jsxs("div",{className:f(),children:[e.jsx(g,{isDisabled:n}),t]}),o&&e.jsx("span",{id:`${i}-helper-text`,className:x(),children:o}))}a.displayName="MultiSelectOption";const C=l.forwardRef(a);exports.MultiSelectOption=C;