@stackone/malachite 0.47.1 → 0.48.0

package/COMPONENTS.md

@@ -41,7 +41,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Radio`** — Single radio control with hover state; parent manages the group. Pass `presentational` to render a visual-only, non-focusable indicator for use inside a clickable row/card. _Key props:_ `checked`, `onChange`, `disabled`, `size`, `presentational`.
 - **`Toggle`** — On/off switch.
 - **`Dropdown`** — Single-select dropdown. _Key props:_ `DropdownItem[]`, `DropdownSize`.
-- **`MultiSelect`** — Multi-select dropdown. _Key props:_ `MultiSelectOption[]`, `MultiSelectSize`.
+- **`MultiSelect`** — Multi-select dropdown with chips, inline search, keyboard navigation, and per-option descriptions. Supports controlled (`value`) and uncontrolled (`defaultValue`) modes. _Key props:_ `MultiSelectOption[]`, `MultiSelectSize`, `chips`, `chipsRemovable`, `chipsMax`, `inlineSearch`, `defaultValue`, `name`, `description`, `tooltip`, `required`, `formControl`. _Base props:_ `options`, `value`, `onChange` (optional), `placeholder`, `searchable`, `size`, `width`, `disabled`, `error`, `loading`, `label`. _Option props:_ `disabled` (locked/non-removable), `badge` (right-aligned ReactNode in dropdown only), `description`, `descriptionMode` (`icon` | `subtitle` | `hover`), `descriptionIcon`, `descriptionMaxLines`.
 
 ## Buttons & actions
 
@@ -54,12 +54,12 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Alert`** — Inline alert/callout (info, success, warning, error).
 - **`StatusBadge`** — Large status indicator (e.g. success checkmark) for terminal/confirmation screens. _Key props:_ `type`.
 - **`StatBadge`** — Pill showing a numeric value with a label (e.g. "3 accounts selected"). _Key props:_ `count`, `label`.
-- **`Tag`** — Small status/label tag. Types: success, error, warning, default. _Key props:_ `value`, `type`, `paddingSize`, `textTransform`, `WidthSize`.
+- **`Tag`** — Small status/label tag. Types: success, error, warning, default, primary, secondary, emphasis. _Key props:_ `value`, `type`, `paddingSize`, `textTransform`, `WidthSize`, `onRemove` (renders × close icon), `bordered`, `shadow`, `icon`, `iconPosition`.
 - **`NumberTag`** — Compact numeric badge/counter.
 - **`Progress`** — Progress bar.
 - **`Spinner`** — Loading spinner.
 - **`Skeleton`** — Loading placeholders. Includes `Skeleton.Avatar` and `Skeleton.Input`.
-- **`Tooltip`** — Hover/focus tooltip; also works on disabled controls (see CLAUDE.md).
+- **`Tooltip`** — Hover/focus tooltip; also works on disabled controls (see CLAUDE.md). _Key props:_ `text`, `delay`, `placement`, `maxWidth`, `wrapChildren`, `isShrinkable`, `fill`.
 - **`TruncatedTooltip`** — Shows a tooltip only when its text is truncated.
 - **`Confetti`** — Celebratory confetti burst for success moments. _Key props:_ `pieces`.
 

package/dist/index.d.ts

@@ -977,16 +977,13 @@ declare interface MarkdownProps {
 
 export declare const MultiSelect: default_2.FC<MultiSelectProps>;
 
-export declare interface MultiSelectOption {
-    value: string;
-    label: default_2.ReactNode;
-    searchText?: string;
-}
-
-export declare interface MultiSelectProps {
+declare interface MultiSelectBaseProps {
     options: MultiSelectOption[];
-    value: string[];
-    onChange: (next: string[]) => void;
+    /** Controlled value. When provided, component is fully controlled. */
+    value?: string[];
+    /** Initial value for uncontrolled usage (like Dropdown's defaultValue). */
+    defaultValue?: string[];
+    onChange?: (next: string[]) => void;
     placeholder?: string;
     renderTrigger?: (selected: MultiSelectOption[]) => default_2.ReactNode;
     searchable?: boolean;
@@ -997,10 +994,48 @@ export declare interface MultiSelectProps {
     error?: boolean;
     loading?: boolean;
     label?: string;
+    description?: string;
+    tooltip?: string;
+    hint?: string;
+    required?: boolean;
+    /** Show selected values as chips instead of "N selected" text */
+    chips?: boolean;
+    /** Show × button on each chip to remove it (only when chips=true) */
+    chipsRemovable?: boolean;
+    /** Max visible chips. 'auto' = show all chips. Number = hard limit with "+N" badge */
+    chipsMax?: number | 'auto';
+    /** Search input inside the trigger field instead of external search bar */
+    inlineSearch?: boolean;
     className?: string;
     style?: default_2.CSSProperties;
 }
 
+export declare interface MultiSelectOption {
+    value: string;
+    label: default_2.ReactNode;
+    searchText?: string;
+    /** Prevent toggling or removing this option — used for mandatory/locked selections */
+    disabled?: boolean;
+    /** Right-aligned badge shown in the dropdown only (not in chips) */
+    badge?: default_2.ReactNode;
+    /** Description text for this option */
+    description?: string;
+    /** How description renders — 'icon': info icon with tooltip, 'subtitle': text below label, 'hover': tooltip on label. Default: 'icon' */
+    descriptionMode?: 'icon' | 'subtitle' | 'hover';
+    /** Custom icon for 'icon' mode. Default: built-in ⓘ */
+    descriptionIcon?: default_2.ReactNode;
+    /** Truncate subtitle after N lines. Only applies to 'subtitle' mode */
+    descriptionMaxLines?: number;
+}
+
+export declare type MultiSelectProps = (MultiSelectBaseProps & {
+    formControl: Control<FieldValues, unknown>;
+    name: string;
+}) | (MultiSelectBaseProps & {
+    formControl?: undefined;
+    name?: string;
+});
+
 export declare type MultiSelectSize = 'small' | 'medium';
 
 export declare const NumberTag: default_2.FC<NumberTagProps>;
@@ -1542,6 +1577,7 @@ export declare interface TagProps {
     iconColor?: TextColor;
     pointerType?: 'pointer' | 'default';
     onClick?: () => void;
+    onRemove?: (e: default_2.MouseEvent) => void;
     className?: string;
 }
 
@@ -1649,6 +1685,8 @@ declare interface TooltipProps {
     placement?: 'top' | 'bottom' | 'left' | 'right';
     isShrinkable?: boolean;
     fill?: boolean;
+    /** Max width of tooltip. Default: 320px */
+    maxWidth?: number | string;
 }
 
 /**