@k8slens/lds 0.58.1 → 0.58.3

package/lib/cjs/ProgressBar/ProgressBar.js

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

package/lib/cjs/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/cjs/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/cjs/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;

package/lib/cjs/Select/Select.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+/** Default shape for select options. */
 export declare type DefaultOption = {
     id: string;
     label: string;
@@ -8,17 +9,28 @@ declare type ItemState = {
     selected?: boolean;
     disabled?: boolean;
 };
+/** A labelled group of options within a Select dropdown. */
 export declare type Group<T> = {
     id: string;
     label: string;
     options: Array<T>;
 };
+/** Base props shared by single and multi Select variants. */
 interface BaseProps<T> {
+    /** HTML `id` for the select button. */
     id?: string;
+    /** Accessible label for the select element. */
     "aria-label"?: string;
+    /** List of selectable options or option groups. */
     options: Array<T | Group<T>>;
+    /**
+     * Placeholder text shown when no value is selected.
+     * @default ""
+     */
     placeholder?: string;
+    /** HTML `name` attribute passed to the underlying Listbox. */
     name?: string;
+    /** Additional class name for the select wrapper. */
     className?: string;
     /** `className` to be passed (and merged with default className) to `<Listbox.Options />` */
     dropdownClassName?: string;
@@ -29,9 +41,11 @@ interface BaseProps<T> {
         disabled?: boolean;
         invalid?: boolean;
     }) => string);
+    /** Whether the select element is disabled. */
     disabled?: boolean;
+    /** Whether the select element is in an invalid state. */
     invalid?: boolean;
-    /** tooltip of the select element */
+    /** Tooltip of the select element. */
     title?: string;
     /**
      * Function to render the content of the select element.
@@ -43,43 +57,63 @@ interface BaseProps<T> {
     renderContent?(d: T | undefined | null, state: ItemState, placeholder?: string): ReactNode;
     /**
      * Loading state of the select element.
+     * @default false
      */
     loading?: boolean;
     /**
-     * Define which way the dropdown should open
+     * Define which way the dropdown should open.
      *
      * @default "auto"
      */
     openingDirection?: "above" | "below" | "auto";
     /**
-     * Maximum height of the dropdown in pixels
+     * Maximum height of the dropdown in pixels.
      */
     maxHeight?: number;
     /**
-     * Size of the select element
+     * Size of the select element.
      *
      * @default "md"
      */
     size?: "md" | "lg";
 }
+/** Props for a single-value Select. */
 interface SingleSelectionProps<T> extends BaseProps<T> {
+    /** Currently selected value. */
     value: T | undefined | null;
+    /** Called when the selected value changes. */
     onChange(d: T): void;
+    /** Must be `false` or omitted for single selection. */
     multiple?: false;
 }
+/** Props for a multi-value Select. */
 interface MultiSelectionProps<T> extends BaseProps<T> {
+    /** Currently selected values. */
     value: T[] | undefined | null;
+    /** Called when the selected values change. */
     onChange(d: T[]): void;
+    /** Must be `true` for multi selection. */
     multiple: true;
+    /** Additional class name for multi-option pills. */
     multiOptionClassName?: string;
 }
+/** Props for the Select component. */
 export declare type SelectProps<T> = (SingleSelectionProps<T> | MultiSelectionProps<T>) & {
+    /** Ref forwarded to the select button element. */
     buttonRef?: React.MutableRefObject<HTMLButtonElement | null>;
 };
 /**
- * A simple select component.
+ * A dropdown select with single and multi-value modes, grouped options, custom renderers, and keyboard navigation.
  *
  * Usage: `import { Select } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Select
+ *   options={[{ id: "1", label: "Option 1" }]}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
  */
 export default function Select<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, placeholder, name, invalid, disabled, className, dropdownClassName, itemClassName, renderContent, loading, title, openingDirection, maxHeight, multiple, size, ...selectProps }: SelectProps<T>): React.JSX.Element;
 export {};

package/lib/cjs/SideNav/SideNav.d.ts

@@ -4,16 +4,22 @@ import React, { HTMLProps } from "react";
  */
 export declare type ChildKey = "__isChildOfSideNav";
 export declare const CHILD_KEY: ChildKey;
+/** Props for the SideNav component. */
 export declare type SideNavProps = Omit<HTMLProps<HTMLDivElement>, "className"> & {
+    /** Optional class name. */
     className?: string;
 };
 /**
- * Side navigation
+ * Side navigation container. Use `SideNavGroup` with `SideNavItem` as direct children.
  *
- * For content use for example `SideNavGroup` with `SideNavItem` as direct children.
+ * Usage: `import { SideNav } from "@k8slens/lds"`
  *
  * ```tsx
- * import { SideNav } from @k8slens/lds
+ * <SideNav>
+ *   <SideNavGroup label="Settings">
+ *     <SideNavItem active>General</SideNavItem>
+ *   </SideNavGroup>
+ * </SideNav>
  * ```
  */
 declare const SideNav: React.FC<SideNavProps>;

package/lib/cjs/SideNav/SideNavGroup.d.ts

@@ -5,17 +5,20 @@ import type { ExtractProps } from "../types/ExtractProps.d";
  */
 export declare type ChildKey = "__isChildOfSideNavGroup";
 export declare const CHILD_KEY: ChildKey;
+/** Props for the SideNavGroup component. */
 export interface SideNavGroupProps<Component extends React.ElementType | keyof JSX.IntrinsicElements = "nav"> {
     /**
-     * Component to be used instead of nav
+     * Component to be used instead of nav.
+     * @default "nav"
      */
     component?: Component;
-    /**
-     * Props for the component passed as `component` prop
-     */
+    /** Props forwarded to the component passed as `component` prop. */
     componentProps?: Omit<ExtractProps<Component>, "id" | "className" | "children" | "aria-labelledby" | "aria-label">;
+    /** HTML `id` attribute. */
     id?: string;
+    /** Optional class name. */
     className?: string;
+    /** Child elements, should be `SideNavItem` components. */
     children?: React.ReactNode;
 }
 export interface SideNavGroupPropsWithLabel<Component extends React.ElementType | keyof JSX.IntrinsicElements = "nav"> extends SideNavGroupProps<Component> {
@@ -27,8 +30,13 @@ export interface SideNavGroupPropsWithoutLabel<Component extends React.ElementTy
 /**
  * Side navigation group, use as a direct child of `SideNav`.
  *
+ * Usage: `import { SideNavGroup } from "@k8slens/lds"`
+ *
  * ```tsx
- * import { SideNavGroup } from @k8slens/lds
+ * <SideNavGroup label="Settings">
+ *   <SideNavItem href="/general">General</SideNavItem>
+ *   <SideNavItem href="/security">Security</SideNavItem>
+ * </SideNavGroup>
  * ```
  */
 declare function SideNavGroup<C extends keyof JSX.IntrinsicElements | React.ElementType = "nav">({ component, componentProps, id, className, children, ...props }: SideNavGroupPropsWithLabel<C> | SideNavGroupPropsWithoutLabel<C>): React.JSX.Element;

package/lib/cjs/SideNav/SideNavItem.d.ts

@@ -1,30 +1,47 @@
 import React from "react";
 import type { ExtractProps } from "../types/ExtractProps.d";
 export declare type Type = "default" | "danger";
+/** Props for the SideNavItem component. */
 export interface SideNavItemProps<Component extends React.ElementType | keyof JSX.IntrinsicElements = "a"> {
     /**
-     * Component to be used instead of anchor, for example `Link` when used with [react-router](https://reactrouter.com/en/main/components/link)
+     * Component to be used instead of anchor, for example `Link` when used with [react-router](https://reactrouter.com/en/main/components/link).
+     * @default "a"
      */
     component?: Component;
+    /** Props forwarded to the component passed as `component` prop. */
+    componentProps?: Omit<ExtractProps<Component>, "children" | "className" | "aria-disabled">;
     /**
-     * Props for the component passed as `component` prop
+     * Whether the item is disabled.
+     * @default false
      */
-    componentProps?: Omit<ExtractProps<Component>, "children" | "className" | "aria-disabled">;
     disabled?: boolean;
+    /**
+     * Whether the item is currently active (sets `aria-current="page"`).
+     * @default false
+     */
     active?: boolean;
+    /** Child content. */
     children?: React.ReactNode;
+    /** Optional class name. */
     className?: string;
+    /**
+     * Visual style type.
+     * @default "default"
+     */
     type?: Type;
     /**
-     * If true, renders a visual indication of an external link
+     * If true, renders a visual indication of an external link.
+     * @default false
      */
     externalLink?: boolean;
 }
 /**
  * Side navigation item, use as a direct child of `SideNavGroup`.
  *
+ * Usage: `import { SideNavItem } from "@k8slens/lds"`
+ *
  * ```tsx
- * import { SideNavItem } from @k8slens/lds
+ * <SideNavItem active href="/settings">Settings</SideNavItem>
  * ```
  */
 declare function SideNavItem<C extends keyof JSX.IntrinsicElements | React.ElementType = "a">({ component, componentProps, active, disabled, className, children, type, externalLink, ...props }: SideNavItemProps<C>): React.JSX.Element;

package/lib/cjs/Switch/Switch.d.ts

@@ -1,6 +1,8 @@
 import type { ChangeEvent, HTMLProps } from "react";
 import React from "react";
+/** Props for the Switch component. */
 export interface SwitchProps extends Omit<HTMLProps<HTMLInputElement>, "onChange"> {
+    /** Change handler receiving the new checked state and the original event. */
     onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 }
 /**

package/lib/cjs/Tooltip/Tooltip.d.ts

@@ -1,25 +1,37 @@
 import React, { type HTMLAttributes, type ReactElement } from "react";
 import { type Placement } from "@popperjs/core";
+/** Props for the Tooltip component. */
 export interface TooltipProps {
     /**
-     * Popper placement. Defaults to `auto`
+     * Popper placement of the tooltip popup.
+     * @default "auto"
      */
     placement?: Placement;
     /**
-     * Which element to listen for mutations on. Defaults to document.body
+     * Which element to listen for DOM mutations on to reposition the tooltip.
+     * @default document.body
      */
     mutationsListenerElement?: HTMLElement;
     /**
-     * Wrapper element type, div or span, defaults to span
+     * Wrapper element type used around the children.
+     * @default "span"
      */
     wrapper?: "span" | "div";
+    /** Additional class name for the tooltip popup element. */
     popupClassName?: string;
+    /** Content displayed inside the tooltip popup. */
     text?: ReactElement | string;
+    /**
+     * Whether the tooltip is always visible (ignores hover/focus).
+     * @default false
+     */
     alwaysVisible?: boolean;
 }
+/** Props when the Tooltip wrapper is a `<span>` element (default). */
 export interface SpanTooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "aria-describedby">, TooltipProps {
     wrapper?: "span";
 }
+/** Props when the Tooltip wrapper is a `<div>` element. */
 export interface DivTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "aria-describedby">, TooltipProps {
     wrapper: "div";
 }

package/lib/cjs/UserMenu/UserMenu.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 import { type MenuItemGroup } from "./default-items";
 import type { MenuItem } from "./UserMenuItem";
+/** Base props shared by default and custom UserMenu variants. */
 export interface BaseUserMenuProps {
     /**
      * Optional header to display in the User Menu.
@@ -23,21 +24,26 @@ export interface BaseUserMenuProps {
      */
     className?: string;
     /**
-     * Origin of the menu item hrefs. Defaults to https://app.k8slens.dev
+     * Origin of the menu item hrefs.
+     * @default "https://app.k8slens.dev"
      */
     origin?: string;
+    /** Ref forwarded to the menu trigger button. */
     buttonRef?: React.MutableRefObject<HTMLButtonElement | null>;
     /**
-     * Loading state of the User Menu. Defaults to false.
+     * Loading state of the User Menu.
+     * @default false
      */
     loading?: boolean;
 }
+/** Props for UserMenu when using built-in default menu items. */
 export interface DefaultUserMenuProps extends BaseUserMenuProps {
     /**
      * Callback to call when the user clicks the Logout button. Required if using the default items.
      */
     onLogoutClick: MenuItem["onClick"];
 }
+/** Props for UserMenu when providing custom menu items. */
 export interface CustomUserMenuProps extends BaseUserMenuProps {
     /**
      * Data to display in the User Menu
@@ -48,6 +54,7 @@ export interface CustomUserMenuProps extends BaseUserMenuProps {
      */
     onLogoutClick?: MenuItem["onClick"];
 }
+/** Props for the UserMenu component (discriminated union of default and custom variants). */
 export declare type UserMenuProps = DefaultUserMenuProps | CustomUserMenuProps;
 /**
  * Displays user info with dropdown menu for account actions. Uses default menu items if `items` prop is not provided.

package/lib/cjs/UserMenu/UserMenuDropdown.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode, RefObject } from "react";
 import { MenuItemGroup } from "./default-items";
+/** Props for the UserMenuDropdown component. */
 export interface UserMenuDropdownProps {
     /**
      * Optional header to display in the User Menu.
@@ -10,27 +11,30 @@ export interface UserMenuDropdownProps {
      */
     footer?: ReactNode;
     /**
-     * Is the User Menu open
+     * Whether the User Menu dropdown is open.
      */
     open: boolean;
     /**
-     * Data to display in the User Menu
+     * Menu item groups to display in the dropdown.
      */
     groups: Array<MenuItemGroup>;
     /**
-     * Optional class name to apply to the User Menu button
+     * Optional class name to apply to the dropdown wrapper.
      */
     className?: string;
     /**
-     * Origin of the menu item hrefs. Defaults to https://app.k8slens.dev
+     * Origin of the menu item hrefs.
+     * @default "https://app.k8slens.dev"
      */
     origin?: string;
     /**
-     * Ref to the button that opens the dropdown
+     * Ref to the button that opens the dropdown, used for Popper positioning.
      */
     buttonRef?: RefObject<HTMLButtonElement>;
 }
 /**
- * UserMenuDropdown is a component that displays a dropdown menu of links. Uses Popper.js for positioning.
+ * Dropdown panel for the UserMenu that displays grouped menu items. Uses Popper.js for positioning.
+ *
+ * Usage: `import { UserMenuDropdown } from "@k8slens/lds"`
  */
 export default function UserMenuDropdown({ header, footer, origin, className, groups, open, buttonRef, }: UserMenuDropdownProps): React.JSX.Element;

package/lib/cjs/UserMenu/UserMenuItem.d.ts

@@ -1,22 +1,43 @@
 import React from "react";
 import type { MouseEvent } from "react";
 import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
+/** Data shape for a single menu item in UserMenu. */
 export declare type MenuItem = {
+    /** Unique key for the menu item, used for identification (e.g. "logout"). */
     key?: string;
+    /**
+     * Visual style of the menu item.
+     * @default "default"
+     */
     type?: "default" | "danger";
+    /** Icon component rendered before the title. */
     icon?: Icon;
+    /** Display text of the menu item. */
     title: string;
+    /** Whether the menu item is disabled. */
     disabled?: boolean;
+    /** Whether the link opens in a new tab. */
     external?: boolean;
+    /** URL or path the menu item links to. */
     href?: string;
+    /** Click handler for the menu item. */
     onClick?: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
 };
+/** Props for the UserMenuItem component. */
 export interface UserMenuItemProps extends MenuItem {
+    /** Base URL prepended to relative `href` values. */
     origin?: string;
+    /** Whether the menu item is visually selected. */
     selected?: boolean;
     /**
-     * Optional class name to apply to the avatar
+     * Optional class name to apply to the menu item.
      */
     className?: string;
 }
+/**
+ * Individual menu item rendered within a UserMenuDropdown. Renders as a link, button, or disabled span
+ * depending on `href`, `onClick`, and `disabled` props.
+ *
+ * Usage: `import { UserMenuItem } from "@k8slens/lds"`
+ */
 export default function UserMenuItem({ type, title, icon: Icon, disabled, external, onClick, selected, href: path, origin, className: cls, }: UserMenuItemProps): React.JSX.Element;

package/lib/cjs/components.d.ts

@@ -4,6 +4,7 @@ export { default as Button } from "./Button/Button";
 export { default as ButtonBar } from "./ButtonBar/ButtonBar";
 export { default as Checkbox } from "./Checkbox/Checkbox";
 export { default as ConfirmDialog, useConfirmDialog } from "./ConfirmDialog/ConfirmDialog";
+export { default as ContextMenu } from "./ContextMenu/ContextMenu";
 export { default as DrawerTransition } from "./DrawerTransition/DrawerTransition";
 export { default as Input } from "./Input/Input";
 export { default as LinkButton } from "./LinkButton/LinkButton";