@k8slens/lds 0.58.1 → 0.58.3

package/lib/es/ButtonBar/ButtonBar.d.ts

@@ -3,15 +3,32 @@ declare type ExtractIntrinsicElementProps<Element extends keyof JSX.IntrinsicEle
 declare type ExtractComponentProps<TComponentOrTProps> = TComponentOrTProps extends React.ComponentType<infer TProps> ? TProps : TComponentOrTProps;
 declare type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends keyof JSX.IntrinsicElements ? ExtractIntrinsicElementProps<TComponentOrTProps> : ExtractComponentProps<TComponentOrTProps>;
 export declare type Type = "default" | "centered" | "stacked" | "grid";
+/** Props for the ButtonBar component. */
 export declare type ButtonBarProps<ElementType extends JSX.IntrinsicElements | React.ElementType<any>> = Partial<Omit<ExtractProps<ElementType>, "children" | "as" | "type" | "gridSize">> & {
+    /**
+     * Element or component to render as the container.
+     * @default "div"
+     */
     as?: keyof JSX.IntrinsicElements | React.ElementType<any> | undefined;
+    /**
+     * Layout type for the button arrangement.
+     * @default "default"
+     */
     type?: Type;
+    /** Override the grid column count (only used when `type` is `"grid"`). */
     gridSize?: Number;
 };
 /**
  * A container for buttons. Set `type` prop to change the layout of the buttons.
  *
  * Usage: `import { ButtonBar } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <ButtonBar>
+ *   <Button label="Cancel" />
+ *   <Button label="Save" type="primary" />
+ * </ButtonBar>
+ * ```
  */
 declare function ButtonBar<ElementType extends JSX.IntrinsicElements | React.ElementType<any>>({ as: Component, type, gridSize, children, ...props }: PropsWithChildren<ButtonBarProps<ElementType>>): React.JSX.Element;
 export default ButtonBar;

package/lib/es/Checkbox/Checkbox.d.ts

@@ -1,7 +1,14 @@
 import React from "react";
+/** Props for the Checkbox component. */
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "value" | "disabled"> {
+    /** Whether the checkbox is checked. */
     value: boolean;
+    /** Change handler receiving the new value and the original event. */
     onChange(value: boolean, evt: React.ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Whether the checkbox is disabled.
+     * @default false
+     */
     disabled?: boolean;
 }
 /**

package/lib/es/ConfirmDialog/ConfirmDialog.d.ts

@@ -1,15 +1,31 @@
 import React, { type ReactNode } from "react";
 import { type ButtonProps } from "../Button/Button";
 declare type AllowedButtonProps = Pick<ButtonProps, "type" | "size" | "discreet" | "icon" | "iconPosition" | "textTransform">;
+/** Props for the ConfirmDialog component. */
 export declare type ConfirmDialogProps = {
+    /** Title displayed in the confirm dialog header. */
     title: string;
+    /** Optional message body rendered below the title. */
     message?: string | ReactNode;
+    /**
+     * Label for the confirm button.
+     * @default "Ok"
+     */
     confirmText?: string;
+    /**
+     * Label for the cancel button.
+     * @default "Cancel"
+     */
     cancelLabel?: string;
+    /** Additional Button props forwarded to the confirm button. */
     confirmButtonProps?: Partial<AllowedButtonProps>;
+    /** Additional Button props forwarded to the cancel button. */
     cancelButtonProps?: Partial<AllowedButtonProps>;
+    /** Called when the dialog is dismissed (overlay click or escape key). */
     handleClose: () => void;
+    /** Called when the user clicks the confirm button. */
     handleConfirm: () => void;
+    /** Called when the user clicks the cancel button. */
     handleCancel: () => void;
 };
 /**

package/lib/es/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,40 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
+import ContextMenuItem from "./ContextMenuItem";
+export type { ContextMenuItemProps } from "./ContextMenuItem";
+/** Props for the ContextMenu component. */
+export interface ContextMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Menu items rendered inside the dropdown. */
+    children: ReactNode;
+    /**
+     * Icon component for the trigger button.
+     * @default ContextMenuIcon
+     */
+    icon?: Icon;
+    /**
+     * Horizontal alignment of the dropdown relative to the trigger.
+     * @default "right"
+     */
+    position?: "left" | "right";
+    /**
+     * Whether the context menu is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * A dropdown context menu triggered by an icon button.
+ *
+ * Usage: `import { ContextMenu } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenu.Item onClick={handleEdit}>Edit</ContextMenu.Item>
+ *   <ContextMenu.Item onClick={handleDelete} disabled>Delete</ContextMenu.Item>
+ * </ContextMenu>
+ * ```
+ */
+declare const ContextMenu: (({ children, icon: Icn, position, disabled, className, ...props }: ContextMenuProps) => React.JSX.Element) & {
+    Item: typeof ContextMenuItem;
+};
+export default ContextMenu;

package/lib/es/ContextMenu/ContextMenu.js

@@ -0,0 +1 @@
+import{__rest as e,__assign as t}from"../_virtual/_tslib.js";import r from"react";import o from"clsx";import{Menu as a,MenuButton as i,MenuItems as l}from"@headlessui/react";import{navigation as n}from"@k8slens/lds-icons";import s from"./ContextMenuItem.js";import m from"./ContextMenu.module.css.js";var c=n.ContextMenuIcon,d=Object.assign((function(n){var s,d=n.children,u=n.icon,f=n.position,p=void 0===f?"right":f,b=n.disabled,x=void 0!==b&&b,v=n.className,E=e(n,["children","icon","position","disabled","className"]),N=u||c;return r.createElement("div",t({},E,{className:o(m.contextMenu,v)}),r.createElement(a,null,r.createElement(i,{className:m.trigger,disabled:x,"aria-label":E["aria-label"]||"Context menu"},r.createElement(N,null)),r.createElement(l,{transition:!0,className:o(m.dropdown,(s={},s[m.left]="left"===p,s))},d)))}),{Item:s});export{d as default};

package/lib/es/ContextMenu/ContextMenu.module.css.js

@@ -0,0 +1 @@
+var e={contextMenu:"lds-context-menu",trigger:"lds-context-menu--trigger",dropdown:"lds-context-menu--dropdown",left:"lds-context-menu--left",item:"lds-context-menu--item",itemIcon:"lds-context-menu--item-icon",itemLabel:"lds-context-menu--item-label"};export{e as default};

package/lib/es/ContextMenu/ContextMenuItem.d.ts

@@ -0,0 +1,30 @@
+import React, { ReactNode } from "react";
+import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
+/** Props for the ContextMenu.Item sub-component. */
+export interface ContextMenuItemProps {
+    /** Content displayed inside the menu item. */
+    children: ReactNode;
+    /** Optional icon rendered before the content. */
+    icon?: Icon;
+    /** Click handler. */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Optional class name. */
+    className?: string;
+}
+/**
+ * A single item inside a ContextMenu dropdown. Renders a button with an optional icon.
+ *
+ * Usage: `import ContextMenu from "@k8slens/lds/ContextMenu"`
+ *
+ * ```tsx
+ * <ContextMenu.Item icon={EditIcon} onClick={handleEdit}>
+ *   Edit
+ * </ContextMenu.Item>
+ * ```
+ */
+export default function ContextMenuItem({ children, icon: Icn, onClick, disabled, className, }: ContextMenuItemProps): React.JSX.Element;

package/lib/es/ContextMenu/ContextMenuItem.js

@@ -0,0 +1 @@
+import e from"react";import t from"clsx";import{MenuItem as a}from"@headlessui/react";import m from"./ContextMenu.module.css.js";function l(l){var o=l.children,r=l.icon,s=l.onClick,c=l.disabled,i=void 0!==c&&c,n=l.className;return e.createElement(a,{disabled:i},e.createElement("button",{className:t(m.item,n),onClick:s,disabled:i,type:"button"},r&&e.createElement(r,{className:m.itemIcon}),e.createElement("span",{className:m.itemLabel},o)))}export{l as default};

package/lib/es/DrawerTransition/DrawerTransition.d.ts

@@ -1,10 +1,30 @@
 import React, { PropsWithChildren } from "react";
+/** Props for the DrawerTransition component. */
 export interface DrawerTransitionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether the drawer is open. */
     open: boolean;
+    /**
+     * Transition duration in milliseconds.
+     * @default 250
+     */
     duration?: number;
+    /** Callback fired after the enter transition completes. */
     afterEnter?: () => void;
+    /** Callback fired after the exit transition completes. */
     afterExit?: () => void;
+    /** Changes in dependencies trigger re-calculation of the drawer dimensions. */
     deps?: object;
 }
+/**
+ * An animated drawer that expands and collapses content with a height transition.
+ *
+ * Usage: `import { DrawerTransition } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <DrawerTransition open={isOpen}>
+ *   <p>Collapsible content here</p>
+ * </DrawerTransition>
+ * ```
+ */
 declare const DrawerTransition: React.FC<PropsWithChildren<DrawerTransitionProps>>;
 export default DrawerTransition;

package/lib/es/Input/Input.d.ts

@@ -1,15 +1,23 @@
 import React, { HTMLInputTypeAttribute } from "react";
 import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
 export declare type InputType = Exclude<HTMLInputTypeAttribute, "button" | "checkbox" | "radio" | "number">;
+/** Props for the Input component. */
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Icon component displayed on the right side of the input. */
     icon?: Icon;
+    /** HTML input type (excludes button, checkbox, radio, number). */
     type?: InputType;
+    /** Props forwarded to the wrapping `div` element. */
     wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 /**
  * A simple input component. Set `icon` prop to show an icon on the right side of the input.
  *
  * Usage: `import { Input } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Input placeholder="Enter text" onChange={handleChange} />
+ * ```
  */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/lib/es/LinkButton/LinkButton.d.ts

@@ -1,9 +1,16 @@
 import React, { type AnchorHTMLAttributes } from "react";
 export declare type Size = "sm" | "md";
 export declare type TextTransform = "uppercase" | "capitalize";
+/** Props for the LinkButton component. */
 export interface LinkButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "label"> {
+    /** Text label displayed in the link button. */
     label: string;
+    /**
+     * Size of the link button.
+     * @default "md"
+     */
     size?: Size;
+    /** Text transformation applied to the label. */
     textTransform?: TextTransform;
     /**
      * Leave `href` and `onClick` undefined to disable the button

package/lib/es/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,17 +1,23 @@
 import React from "react";
 import { type Props as IconProps } from "@k8slens/lds-icons/lib/es/Icon/Icon.d";
+/** Props for the LoadingIndicator component. */
 export interface LoadingIndicatorProps {
     /**
-     *`IconProps.size`, see [SVGIcon](/?path=/docs/icon-svgicon--default) for details.
+     * `IconProps.size`, see [SVGIcon](/?path=/docs/icon-svgicon--default) for details.
      * @default "md"
      */
     size?: IconProps["size"];
+    /** Optional class name. */
     className?: string;
 }
 /**
- * A loading indicator component.
+ * Animated spinner for loading states. Wraps a SpinnerIcon with configurable size.
  *
  * Usage: `import { LoadingIndicator } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <LoadingIndicator size="md" />
+ * ```
  */
 declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
 export default LoadingIndicator;

package/lib/es/Lozenge/Lozenge.d.ts

@@ -1,9 +1,10 @@
 import React, { HTMLAttributes } from "react";
 export declare type TextTransform = "uppercase" | "capitalize";
+/** Props for the Lozenge component. */
 export interface LozengeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "type" | "size" | "textTransform"> {
     /**
      * Defines the color of the lozenge.
-     * @default secondary
+     * @default "secondary"
      */
     type?: "primary" | "secondary" | "success" | "error" | "warning";
     /**
@@ -11,7 +12,8 @@ export interface LozengeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "typ
      */
     textTransform?: TextTransform;
     /**
-     * @default sm
+     * Size of the lozenge.
+     * @default "sm"
      */
     size?: "sm" | "md" | "lg";
 }

package/lib/es/Modal/Modal.d.ts

@@ -1,16 +1,36 @@
 import React, { PropsWithChildren, ReactNode } from "react";
 import { PanelProps } from "../Panel/Panel";
 import { ButtonBarProps } from "../ButtonBar/ButtonBar";
+/** Props for the Modal component. */
 export interface ModalProps<Component extends keyof JSX.IntrinsicElements | React.ElementType> {
+    /** Title displayed in the modal header. */
     title: string;
+    /** Optional subtitle displayed below the title. */
     subTitle?: string;
+    /** Whether the modal is currently open. */
     isOpen: boolean;
+    /** Called when the modal is dismissed (overlay click or escape key). */
     onClose: () => void;
+    /**
+     * Size of the modal.
+     * @default "md"
+     */
     size: "sm" | "md" | "lg" | "xl";
+    /** Element type or component used as the content wrapper (passed to Panel). */
     contentComponent?: PanelProps<Component>["wrapperComponent"];
+    /** Props forwarded to the content wrapper component. */
     contentProps?: PanelProps<Component>["wrapperProps"];
+    /**
+     * Props forwarded to the footer ButtonBar component.
+     * @default {}
+     */
     buttonBarProps?: Omit<ButtonBarProps<"footer">, "as">;
+    /**
+     * Additional class name for the modal Panel.
+     * @default ""
+     */
     className?: string;
+    /** Content rendered in the modal footer, wrapped by ButtonBar. */
     footer?: ReactNode;
 }
 /**
@@ -24,6 +44,12 @@ export interface ModalProps<Component extends keyof JSX.IntrinsicElements | Reac
  * To pass props to `ButtonBar` use the `buttonBarProps` prop.
  *
  * Usage: `import { Modal } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Modal isOpen={open} onClose={close} title="Confirm" size="sm">
+ *   <p>Are you sure?</p>
+ * </Modal>
+ * ```
  */
 declare function Modal<Component extends keyof JSX.IntrinsicElements | React.ElementType>({ children, isOpen, onClose, title, subTitle, size, contentComponent, contentProps: _contentProps, buttonBarProps, className, footer, }: PropsWithChildren<ModalProps<Component>>): React.JSX.Element | null;
 export default Modal;

package/lib/es/Notification/Notification.d.ts

@@ -1,22 +1,38 @@
 import React, { ReactNode } from "react";
 export declare type Type = "flash" | "closable" | "inline" | "default";
 export declare type AlertLevel = "info" | "success" | "error" | "warning";
+/** Props for the Notification component. */
 export interface NotificationProps {
+    /** The notification body content. */
     message: string | ReactNode;
+    /** Optional bold heading rendered above the message. */
     title?: string;
+    /**
+     * Behavior type of the notification.
+     * @default "default"
+     */
     type?: Type;
+    /**
+     * Visual severity level of the notification.
+     * @default "info"
+     */
     level?: AlertLevel;
+    /** @deprecated Use `type` prop instead. */
     inline?: false;
+    /** @deprecated Use `type` prop instead. */
     flash?: false;
     /**
-     * Hide after `flashDuration` milliseconds, if type is set to "flash"
+     * Hide after `flashDuration` milliseconds, if type is set to "flash".
+     * @default 5000
      */
     flashDuration?: number;
     /**
-     * Can be set closable if not inline
+     * Can be set closable if not inline.
      */
     closable?: boolean;
+    /** Called after the notification finishes its exit transition. */
     onClose?(): void;
+    /** Additional class name for the notification wrapper. */
     className?: string;
 }
 /**

package/lib/es/NumberBadge/NumberBadge.d.ts

@@ -4,7 +4,7 @@ export declare const formatNumber: (n: number) => string;
 interface BaseNumberBadgeProps extends Omit<LozengeProps, "role" | "children" | "title" | "textTransform" | "size"> {
     value: number | null | undefined;
     /**
-     * If no title has not been provided, the badge will be hidden from screen readers.
+     * If no title is provided, the badge will be hidden from screen readers.
      */
     title?: string;
     /**

package/lib/es/Panel/Panel.d.ts

@@ -1,17 +1,45 @@
 import React, { Fragment, ReactNode } from "react";
 import type { ExtractProps } from "../types/ExtractProps.d";
+/** Props for the Panel component. */
 export interface PanelProps<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType = typeof Fragment, HeaderComponent extends keyof JSX.IntrinsicElements | React.ElementType = "header", ContentComponent extends keyof JSX.IntrinsicElements | React.ElementType = "div", FooterComponent extends keyof JSX.IntrinsicElements | React.ElementType = "footer"> {
+    /** Content rendered in the header section. */
     header?: ReactNode;
+    /** Content rendered in the footer section. */
     footer?: ReactNode;
+    /** Optional class name applied to header, content, and footer elements. */
     className?: string;
+    /**
+     * Component used to wrap the entire panel.
+     * @default Fragment
+     */
     wrapperComponent?: WrapperComponent;
+    /** Props forwarded to the wrapper component. */
     wrapperProps?: ExtractProps<WrapperComponent>;
+    /**
+     * Component used for the header section.
+     * @default "header"
+     */
     headerComponent?: HeaderComponent;
+    /** Props forwarded to the header component. */
     headerProps?: ExtractProps<HeaderComponent>;
+    /**
+     * Component used for the content section.
+     * @default "div"
+     */
     contentComponent?: ContentComponent | undefined;
+    /** Props forwarded to the content component. */
     contentProps?: ExtractProps<ContentComponent>;
+    /**
+     * Component used for the footer section.
+     * @default "footer"
+     */
     footerComponent?: FooterComponent;
+    /** Props forwarded to the footer component. */
     footerProps?: ExtractProps<FooterComponent>;
+    /**
+     * Whether to show a loading indicator overlay.
+     * @default false
+     */
     loading?: boolean;
 }
 /**

package/lib/es/ProfileBlock/ProfileBlock.d.ts

@@ -6,10 +6,18 @@ declare type Item = {
     avatar?: AvatarProps["image"];
     avatarTitle: string;
 };
+/** Props for the ProfileBlock component. */
 export declare type ProfileBlockProps = HTMLProps<HTMLDivElement> & {
+    /**
+     * Whether to show a loading indicator instead of text content.
+     * @default false
+     */
     loading?: boolean;
+    /** User data to display (title, subtitle, avatar). */
     item: Item;
+    /** Custom formatter for the title text. */
     formatTitle?: (item: Item) => string | ReactElement;
+    /** Custom formatter for the subtitle text. */
     formatSubtitle?: (item: Item) => string | ReactElement;
 };
 /**

package/lib/es/ProgressBar/ProgressBar.d.ts

@@ -1,8 +1,19 @@
 import React from "react";
+/** Props for the ProgressBar component. */
 export interface ProgressBarProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
+    /** Current progress value. */
     value: number;
+    /**
+     * Maximum value for the progress bar.
+     * @default 1
+     */
     max?: number;
+    /**
+     * Color of the progress bar.
+     * @default "default"
+     */
     type?: "default" | "ok" | "caution" | "danger";
+    /** Accessible title text. Falls back to percentage display if not provided. */
     title?: string;
 }
 /**

package/lib/es/ProgressBar/ProgressBar.js

@@ -1 +1 @@
-import{__rest as a,__assign as t}from"../_virtual/_tslib.js";import e from"react";import r from"./ProgressBar.module.css.js";import s from"clsx";function l(l){var m,o=l.value,i=l.type,u=void 0===i?"default":i,c=l.max,p=void 0===c?1:c,f=l.title,v=l.className,d=a(l,["value","type","max","title","className"]),n=isNaN(o)?0:Math.max(0,o),x=isNaN(p)||p<=0?1:p,N=Math.min(100,Math.round(n/x*100)),g=f||"".concat(N,"%");return e.createElement("progress",t({},d,{className:s(r.progressBar,v,(m={},m[r[u]]="default"!==u,m)),value:n,max:x,"aria-valuetext":g,title:f}),g)}export{l as default};
+import{__rest as a,__assign as t}from"../_virtual/_tslib.js";import e from"react";import r from"clsx";import s from"./ProgressBar.module.css.js";function l(l){var m,o=l.value,i=l.type,u=void 0===i?"default":i,c=l.max,p=void 0===c?1:c,f=l.title,v=l.className,d=a(l,["value","type","max","title","className"]),n=isNaN(o)?0:Math.max(0,o),x=isNaN(p)||p<=0?1:p,N=Math.min(100,Math.round(n/x*100)),g=f||"".concat(N,"%");return e.createElement("progress",t({},d,{className:r(s.progressBar,v,(m={},m[s[u]]="default"!==u,m)),value:n,max:x,"aria-valuetext":g,title:f}),g)}export{l as default};

package/lib/es/RadioCard/RadioCard.d.ts

@@ -10,16 +10,33 @@ declare type ItemState = {
     selected?: boolean;
     disabled?: boolean;
 };
+/** Props for the RadioCard component. */
 export interface RadioCardProps<T> {
+    /** HTML `id` attribute for the radio group. */
     id?: string;
+    /** Accessible label for the radio group. */
     "aria-label"?: string;
+    /** Array of options to render as radio cards. */
     options: Array<T>;
+    /** Currently selected option. */
     value: T | undefined;
+    /** Change handler receiving the selected option. */
     onChange(d: T): void;
+    /** Name attribute for the radio group. */
     name: string;
+    /** Optional class name for the radio group container. */
     className?: string;
+    /** Optional class name applied to each radio card item. */
     itemClassName?: string;
+    /**
+     * Whether the entire radio group is disabled.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Whether the radio group is in an invalid state.
+     * @default false
+     */
     invalid?: boolean;
     /**
      * Function to render the content of card item.
@@ -30,9 +47,18 @@ export interface RadioCardProps<T> {
     renderItem?(d: T | undefined, state: ItemState): ReactNode;
 }
 /**
- * A styled radio button component.
+ * A card-based radio group for visual option selection. Renders each option as a styled card with a radio indicator.
  *
  * Usage: `import { RadioCard } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <RadioCard
+ *   name="plan"
+ *   options={[{ id: "1", label: "Free" }, { id: "2", label: "Pro" }]}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
  */
 export default function RadioCard<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, name, invalid, disabled, itemClassName, className, renderItem, ...radioGroupProps }: RadioCardProps<T>): React.JSX.Element;
 export {};

package/lib/es/Select/MultiOption.d.ts

@@ -1,9 +1,19 @@
 import React, { type ReactNode } from "react";
-declare const MultiOption: React.ForwardRefExoticComponent<{
+/** Props for the MultiOption component. */
+interface MultiOptionProps {
+    /** Display text of the option, used for the accessible label. */
     label: string;
-    className?: string | undefined;
+    /** Optional class name for the multi-option pill. */
+    className?: string;
+    /** Content rendered inside the option pill. */
     children: ReactNode;
+    /** Called when the remove button is clicked or activated via keyboard. */
     onRemove: (e: React.MouseEvent | React.KeyboardEvent) => void;
-    onArrowNavigate?: ((direction: "next" | "prev") => void) | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
+    /** Called on arrow key press for keyboard navigation between pills. */
+    onArrowNavigate?: (direction: "next" | "prev") => void;
+}
+/**
+ * Removable pill for selected values in a multi-select. Supports keyboard navigation and accessible removal.
+ */
+declare const MultiOption: React.ForwardRefExoticComponent<MultiOptionProps & React.RefAttributes<HTMLSpanElement>>;
 export default MultiOption;

package/lib/es/Select/Option.d.ts

@@ -1,7 +1,13 @@
 import React from "react";
 import { type DefaultOption, type SelectProps } from "./Select";
+/** Props for the Option component. */
 export declare type OptionProps<T> = Pick<SelectProps<T>, "size" | "itemClassName" | "placeholder"> & NonNullable<Pick<SelectProps<T>, "renderContent">> & {
+    /** Currently selected values, used to determine selection state. */
     currentValues?: T[] | null;
+    /** The option data to render. */
     option: T;
 };
+/**
+ * Individual option item rendered within a Select dropdown. Handles active, selected, and custom render states.
+ */
 export default function Option<T extends DefaultOption>({ option, currentValues, size, itemClassName, renderContent, placeholder, }: OptionProps<T>): React.JSX.Element;