@k8slens/lds 0.58.2 → 0.58.4

package/lib/cjs/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/cjs/Panel/Panel.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react"),n=require("clsx"),r=require("../node_modules/lodash/pick.js"),t=require("../LoadingIndicator/LoadingIndicator.js"),o=require("./Panel.module.css.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(a),i=s(n),u=function(e){return e===a.Fragment||e&&e.$$typeof&&"Symbol(react.fragment)"===e.$$typeof.toString()};module.exports=function(n){var s=n.header,d=n.footer,c=n.className,m=n.wrapperComponent,f=n.wrapperProps,_=n.headerComponent,g=n.headerProps,p=n.contentComponent,v=n.contentProps,y=n.footerComponent,N=n.footerProps,h=n.loading,q=n.children,j=m||a.Fragment,k=_||"header",E=p||"div",P=y||"footer",x=a.useMemo((function(){var e=f||{};return u(j)?r(e,"key"):e}),[f,j]),C=a.useMemo((function(){var a,n=g||{};return u(k)?r(n,"key"):e.__assign(e.__assign({},n),{className:i.default(o.panel,o.header,c,null==g?void 0:g.className,(a={},a[o.loading]=h,a))})}),[g,k,c,h]),M=a.useMemo((function(){var a,n=N||{};return u(P)?r(n,"key"):e.__assign(e.__assign({},n),{className:i.default(o.panel,o.footer,c,null==N?void 0:N.className,(a={},a[o.loading]=h,a))})}),[N,P,c,h]),$=a.useMemo((function(){var a,n=v||{};return u(E)?r(n,"key"):e.__assign(e.__assign({},n),{className:i.default(o.panel,o.content,c,null==v?void 0:v.className,(a={},a[o.loading]=h,a))})}),[v,E,c,h]);return l.default.createElement(j,e.__assign({},x),s&&l.default.createElement(k,e.__assign({},C),s),l.default.createElement(E,e.__assign({},$),q,h&&l.default.createElement(t,{size:"xxl",className:o.loadingIndicator})),d&&l.default.createElement(P,e.__assign({},M),d))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react"),n=require("clsx"),r=require("../node_modules/lodash/pick.js"),t=require("../LoadingIndicator/LoadingIndicator.js"),o=require("./Panel.module.css.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(a),i=s(n),u=function(e){return e===a.Fragment||e&&e.$$typeof&&"Symbol(react.fragment)"===e.$$typeof.toString()};module.exports=function(n){var s=n.header,d=n.footer,c=n.className,m=n.wrapperComponent,f=n.wrapperProps,_=n.headerComponent,g=n.headerProps,p=n.contentComponent,v=n.contentProps,y=n.footerComponent,N=n.footerProps,h=n.loading,q=n.children,j=m||a.Fragment,k=_||"header",E=p||"div",P=y||"footer",x=a.useMemo(function(){var e=f||{};return u(j)?r(e,"key"):e},[f,j]),C=a.useMemo(function(){var a,n=g||{};return u(k)?r(n,"key"):e.__assign(e.__assign({},n),{className:i.default(o.panel,o.header,c,null==g?void 0:g.className,(a={},a[o.loading]=h,a))})},[g,k,c,h]),M=a.useMemo(function(){var a,n=N||{};return u(P)?r(n,"key"):e.__assign(e.__assign({},n),{className:i.default(o.panel,o.footer,c,null==N?void 0:N.className,(a={},a[o.loading]=h,a))})},[N,P,c,h]),$=a.useMemo(function(){var a,n=v||{};return u(E)?r(n,"key"):e.__assign(e.__assign({},n),{className:i.default(o.panel,o.content,c,null==v?void 0:v.className,(a={},a[o.loading]=h,a))})},[v,E,c,h]);return l.default.createElement(j,e.__assign({},x),s&&l.default.createElement(k,e.__assign({},C),s),l.default.createElement(E,e.__assign({},$),q,h&&l.default.createElement(t,{size:"xxl",className:o.loadingIndicator})),d&&l.default.createElement(P,e.__assign({},M),d))};

package/lib/cjs/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/cjs/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/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/RadioCard/RadioCard.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react"),l=require("clsx"),t=require("@headlessui/react"),n=require("./RadioCard.module.css.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(a),i=r(l);module.exports=function(a){var l=a.id,r=a["aria-label"],s=a.value,u=a.options,c=a.onChange,m=a.name,o=a.invalid,f=a.disabled,b=a.itemClassName,v=a.className,p=a.renderItem,N=void 0===p?function(e){return d.default.createElement("span",{className:n.content},d.default.createElement("span",{className:n.label},e.label),d.default.createElement("span",{className:n.subtitle},e.subtitle))}:p,E=e.__rest(a,["id","aria-label","value","options","onChange","name","invalid","disabled","itemClassName","className","renderItem"]);return d.default.createElement(t.RadioGroup,e.__assign({},E,{id:l,by:"id",value:s,onChange:c,"aria-label":r,className:i.default(n.radioCard,v),name:m}),u.map((function(e){return d.default.createElement(t.Radio,{key:e.id,value:e,disabled:f||e.disabled,className:function(e){var a,l=e.checked;return i.default(n.item,b,((a={})[n.selected]=l,a[n.invalid]=o,a))}},(function(a){var l=a.checked;return d.default.createElement(d.default.Fragment,null,d.default.createElement("span",{className:n.dot},d.default.createElement("span",null)),N(e,{invalid:o,selected:l,disabled:f||e.disabled}))}))})))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react"),l=require("clsx"),t=require("@headlessui/react"),n=require("./RadioCard.module.css.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=r(a),i=r(l);module.exports=function(a){var l=a.id,r=a["aria-label"],s=a.value,u=a.options,c=a.onChange,m=a.name,o=a.invalid,f=a.disabled,b=a.itemClassName,v=a.className,p=a.renderItem,N=void 0===p?function(e){return d.default.createElement("span",{className:n.content},d.default.createElement("span",{className:n.label},e.label),d.default.createElement("span",{className:n.subtitle},e.subtitle))}:p,E=e.__rest(a,["id","aria-label","value","options","onChange","name","invalid","disabled","itemClassName","className","renderItem"]);return d.default.createElement(t.RadioGroup,e.__assign({},E,{id:l,by:"id",value:s,onChange:c,"aria-label":r,className:i.default(n.radioCard,v),name:m}),u.map(function(e){return d.default.createElement(t.Radio,{key:e.id,value:e,disabled:f||e.disabled,className:function(e){var a,l=e.checked;return i.default(n.item,b,((a={})[n.selected]=l,a[n.invalid]=o,a))}},function(a){var l=a.checked;return d.default.createElement(d.default.Fragment,null,d.default.createElement("span",{className:n.dot},d.default.createElement("span",null)),N(e,{invalid:o,selected:l,disabled:f||e.disabled}))})}))};

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/MultiOption.js

@@ -1 +1 @@
-"use strict";var e=require("react"),r=require("clsx"),t=require("@k8slens/lds-icons"),n=require("../Lozenge/Lozenge.js"),o=require("./Select.module.css.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(e),i=a(r),u=t.navigation.CloseIcon,c=e.forwardRef((function(e,r){var t=e.label,a=e.className,c=e.children,s=e.onRemove,f=e.onArrowNavigate;return l.default.createElement(n,{ref:r,size:"lg",type:"primary",className:i.default(o.multiOption,a),onClick:s,onKeyDown:function(e){" "!==e.key&&"Spacebar"!==e.key&&"Enter"!==e.key||(e.preventDefault(),s(e)),"ArrowRight"===e.key&&f&&(e.preventDefault(),f("next")),"ArrowLeft"===e.key&&f&&(e.preventDefault(),f("prev"))},role:"button",tabIndex:0,"aria-label":"Remove option ".concat(t)},c,l.default.createElement(u,{size:"sm",color:"on-dark",className:o.multiOptionRemove}))}));module.exports=c;
+"use strict";var e=require("react"),r=require("clsx"),t=require("@k8slens/lds-icons"),n=require("../Lozenge/Lozenge.js"),o=require("./Select.module.css.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(e),i=a(r),u=t.navigation.CloseIcon,c=e.forwardRef(function(e,r){var t=e.label,a=e.className,c=e.children,s=e.onRemove,f=e.onArrowNavigate;return l.default.createElement(n,{ref:r,size:"lg",type:"primary",className:i.default(o.multiOption,a),onClick:s,onKeyDown:function(e){" "!==e.key&&"Spacebar"!==e.key&&"Enter"!==e.key||(e.preventDefault(),s(e)),"ArrowRight"===e.key&&f&&(e.preventDefault(),f("next")),"ArrowLeft"===e.key&&f&&(e.preventDefault(),f("prev"))},role:"button",tabIndex:0,"aria-label":"Remove option ".concat(t)},c,l.default.createElement(u,{size:"sm",color:"on-dark",className:o.multiOptionRemove}))});module.exports=c;

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/Option.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("@headlessui/react"),i=require("clsx"),n=require("./Select.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=u(t),l=u(i);module.exports=function(t){var i=t.option,u=t.currentValues,c=t.size,a=t.itemClassName,o=t.renderContent,d=t.placeholder;return s.default.createElement(r.ListboxOption,{value:i,className:function(t){var r,s;return l.default(n.item,((r={})[n.active]=t.active,r[n.selected]=t.selected||(u||[]).some((function(e){return e.id===i.id})),r[n.lg]="lg"===c,r),null!==(s="function"==typeof a?a(e.__assign(e.__assign({},t),{selected:t.selected||(u||[]).some((function(e){return e.id===i.id}))})):a)&&void 0!==s?s:"")}},o?o(i,{selected:(u||[]).some((function(e){return e.id===i.id}))},d):null)};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("@headlessui/react"),i=require("clsx"),n=require("./Select.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=u(t),l=u(i);module.exports=function(t){var i=t.option,u=t.currentValues,c=t.size,a=t.itemClassName,o=t.renderContent,d=t.placeholder;return s.default.createElement(r.ListboxOption,{value:i,className:function(t){var r,s;return l.default(n.item,((r={})[n.active]=t.active,r[n.selected]=t.selected||(u||[]).some(function(e){return e.id===i.id}),r[n.lg]="lg"===c,r),null!==(s="function"==typeof a?a(e.__assign(e.__assign({},t),{selected:t.selected||(u||[]).some(function(e){return e.id===i.id})})):a)&&void 0!==s?s:"")}},o?o(i,{selected:(u||[]).some(function(e){return e.id===i.id})},d):null)};

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/Select/Select.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("clsx"),a=require("@headlessui/react"),l=require("@k8slens/lds-icons"),r=require("../LoadingIndicator/LoadingIndicator.js"),i=require("./SelectDropdown.js"),o=require("./Option.js"),u=require("./MultiOption.js"),s=require("./Select.module.css.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t),f=d(n),m=l.navigation.ArrowDownIcon,p=l.navigation.ArrowUpIcon;module.exports=function(n){var l=n.id,d=n["aria-label"],v=n.value,g=n.options,b=n.onChange,N=n.placeholder,h=void 0===N?"":N,E=n.name,y=n.invalid,C=n.disabled,A=n.className,R=n.dropdownClassName,q=n.itemClassName,w=n.renderContent,x=void 0===w?function(e,t,n){return e?e.label:n}:w,I=n.loading,L=n.title,_=n.openingDirection,j=n.maxHeight,D=n.multiple,k=n.size,B=e.__rest(n,["id","aria-label","value","options","onChange","placeholder","name","invalid","disabled","className","dropdownClassName","itemClassName","renderContent","loading","title","openingDirection","maxHeight","multiple","size"]),O=t.useRef(null),z=t.useRef(null),M=t.useRef([]),H=1===g.length;t.useEffect((function(){var e,t;(null===(e=B.buttonRef)||void 0===e?void 0:e.current)&&(O.current=null===(t=B.buttonRef)||void 0===t?void 0:t.current)}),[B.buttonRef]);var S=t.useMemo((function(){var t=function(e){return!D||!Array.isArray(v)||!v.some((function(t){return t.id===e.id}))};return g.map((function(n){if("options"in n){var a=n.options.filter((function(e){return t(e)}));return a.length>0?e.__assign(e.__assign({},n),{options:a}):null}return t(n)?n:null})).filter((function(e){return null!==e}))}),[D,g,v]),V=t.useMemo((function(){return D?Array.isArray(v)?v:[]:null===v?void 0:v}),[D,v]),P=function(e){var t,n,N,E=e.open;return c.default.createElement("div",{className:f.default(s.select,A,(t={},t[s.invalid]=y,t[s.locked]=H,t[s.disabled]=C||I,t[s.open]=E,t))},c.default.createElement(a.ListboxButton,{id:l,ref:B.buttonRef?B.buttonRef:O,"aria-label":d,className:f.default(s.selectButton),title:L},c.default.createElement("span",{className:f.default(s.item,s.selectedItem,(n={},n[s.multiple]=D,n[s.disabled]=C||I,n[s.invalid]=y,n[s.placeholder]=!v,n[s.lg]="lg"===k,n),null!==(N="function"==typeof q?q({disabled:Boolean(C),invalid:Boolean(y)}):q)&&void 0!==N?N:"")},I?c.default.createElement(r,{className:s.loadingIndicator}):D&&Array.isArray(v)?c.default.createElement("span",{className:s.multiOptionContainer},v.map((function(e,t){return c.default.createElement(u,{ref:function(e){return M.current[t]=e},label:e.label,className:"multiOptionClassName"in B?B.multiOptionClassName:void 0,onRemove:function(n){n.stopPropagation();var a=v.filter((function(t){return t.id!==e.id}));b(a),setTimeout((function(){var e,n,l=Math.min(t,a.length-1);a.length>0?null===(e=M.current[l])||void 0===e||e.focus():null===(n=O.current)||void 0===n||n.focus()}),0)},onArrowNavigate:function(e){var n,a="next"===e?t+1:t-1;null===(n=M.current[a])||void 0===n||n.focus()},key:e.id},x(e,{invalid:y,disabled:C},h))}))):x(v,{invalid:y,disabled:C},h)),E&&S.length>0?c.default.createElement(p,{className:s.dropDownIcon}):c.default.createElement(m,{className:s.dropDownIcon})),c.default.createElement(i,{listRef:z,buttonRef:O,openingDirection:_,maxHeight:j,grouped:g.some((function(e){return"options"in e}))},c.default.createElement(a.ListboxOptions,{ref:z,className:f.default(s.dropdown,R)},S.length>0?S.map((function(e){var t;if("options"in e){var n="".concat(e.id,"-label");return c.default.createElement("li",{key:e.id,className:s.group,role:"group","aria-labelledby":n},c.default.createElement("span",{id:n,className:f.default(s.groupLabel,(t={},t[s.lg]="lg"===k,t))},e.label),c.default.createElement("ul",{className:s.groupList},e.options.map((function(e){return c.default.createElement(o,{key:e.id,option:e,currentValues:Array.isArray(v)?v:[v].filter(Boolean),size:k,itemClassName:q,renderContent:x,placeholder:h})}))))}return c.default.createElement(o,{key:e.id,option:e,currentValues:Array.isArray(v)?v:[v].filter(Boolean),size:k,itemClassName:q,renderContent:x,placeholder:h})})):null)))};return D?c.default.createElement(a.Listbox,{value:V,onChange:b,name:E,disabled:C,multiple:!0},P):c.default.createElement(a.Listbox,{value:V,onChange:b,name:E,disabled:C,multiple:!1},P)};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("clsx"),a=require("@headlessui/react"),l=require("@k8slens/lds-icons"),r=require("../LoadingIndicator/LoadingIndicator.js"),i=require("./SelectDropdown.js"),o=require("./Option.js"),u=require("./MultiOption.js"),s=require("./Select.module.css.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(t),f=d(n),m=l.navigation.ArrowDownIcon,p=l.navigation.ArrowUpIcon;module.exports=function(n){var l=n.id,d=n["aria-label"],v=n.value,g=n.options,b=n.onChange,N=n.placeholder,h=void 0===N?"":N,E=n.name,y=n.invalid,C=n.disabled,A=n.className,R=n.dropdownClassName,q=n.itemClassName,w=n.renderContent,x=void 0===w?function(e,t,n){return e?e.label:n}:w,I=n.loading,L=n.title,_=n.openingDirection,j=n.maxHeight,D=n.multiple,k=n.size,B=e.__rest(n,["id","aria-label","value","options","onChange","placeholder","name","invalid","disabled","className","dropdownClassName","itemClassName","renderContent","loading","title","openingDirection","maxHeight","multiple","size"]),O=t.useRef(null),z=t.useRef(null),M=t.useRef([]),H=1===g.length;t.useEffect(function(){var e,t;(null===(e=B.buttonRef)||void 0===e?void 0:e.current)&&(O.current=null===(t=B.buttonRef)||void 0===t?void 0:t.current)},[B.buttonRef]);var S=t.useMemo(function(){var t=function(e){return!D||!Array.isArray(v)||!v.some(function(t){return t.id===e.id})};return g.map(function(n){if("options"in n){var a=n.options.filter(function(e){return t(e)});return a.length>0?e.__assign(e.__assign({},n),{options:a}):null}return t(n)?n:null}).filter(function(e){return null!==e})},[D,g,v]),V=t.useMemo(function(){return D?Array.isArray(v)?v:[]:null===v?void 0:v},[D,v]),P=function(e){var t,n,N,E=e.open;return c.default.createElement("div",{className:f.default(s.select,A,(t={},t[s.invalid]=y,t[s.locked]=H,t[s.disabled]=C||I,t[s.open]=E,t))},c.default.createElement(a.ListboxButton,{id:l,ref:B.buttonRef?B.buttonRef:O,"aria-label":d,className:f.default(s.selectButton),title:L},c.default.createElement("span",{className:f.default(s.item,s.selectedItem,(n={},n[s.multiple]=D,n[s.disabled]=C||I,n[s.invalid]=y,n[s.placeholder]=!v,n[s.lg]="lg"===k,n),null!==(N="function"==typeof q?q({disabled:Boolean(C),invalid:Boolean(y)}):q)&&void 0!==N?N:"")},I?c.default.createElement(r,{className:s.loadingIndicator}):D&&Array.isArray(v)?c.default.createElement("span",{className:s.multiOptionContainer},v.map(function(e,t){return c.default.createElement(u,{ref:function(e){return M.current[t]=e},label:e.label,className:"multiOptionClassName"in B?B.multiOptionClassName:void 0,onRemove:function(n){n.stopPropagation();var a=v.filter(function(t){return t.id!==e.id});b(a),setTimeout(function(){var e,n,l=Math.min(t,a.length-1);a.length>0?null===(e=M.current[l])||void 0===e||e.focus():null===(n=O.current)||void 0===n||n.focus()},0)},onArrowNavigate:function(e){var n,a="next"===e?t+1:t-1;null===(n=M.current[a])||void 0===n||n.focus()},key:e.id},x(e,{invalid:y,disabled:C},h))})):x(v,{invalid:y,disabled:C},h)),E&&S.length>0?c.default.createElement(p,{className:s.dropDownIcon}):c.default.createElement(m,{className:s.dropDownIcon})),c.default.createElement(i,{listRef:z,buttonRef:O,openingDirection:_,maxHeight:j,grouped:g.some(function(e){return"options"in e})},c.default.createElement(a.ListboxOptions,{ref:z,className:f.default(s.dropdown,R)},S.length>0?S.map(function(e){var t;if("options"in e){var n="".concat(e.id,"-label");return c.default.createElement("li",{key:e.id,className:s.group,role:"group","aria-labelledby":n},c.default.createElement("span",{id:n,className:f.default(s.groupLabel,(t={},t[s.lg]="lg"===k,t))},e.label),c.default.createElement("ul",{className:s.groupList},e.options.map(function(e){return c.default.createElement(o,{key:e.id,option:e,currentValues:Array.isArray(v)?v:[v].filter(Boolean),size:k,itemClassName:q,renderContent:x,placeholder:h})})))}return c.default.createElement(o,{key:e.id,option:e,currentValues:Array.isArray(v)?v:[v].filter(Boolean),size:k,itemClassName:q,renderContent:x,placeholder:h})}):null)))};return D?c.default.createElement(a.Listbox,{value:V,onChange:b,name:E,disabled:C,multiple:!0},P):c.default.createElement(a.Listbox,{value:V,onChange:b,name:E,disabled:C,multiple:!1},P)};

package/lib/cjs/Select/SelectDropdown.js

@@ -1 +1 @@
-"use strict";var t=require("react"),e=require("@headlessui/react"),n=require("../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js"),r=require("../helpers.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=o(t),i=r.convertRemToPixels(n.SpacingMd)||0;module.exports=function(n){var o=n.buttonRef,u=n.listRef,c=n.openingDirection,l=void 0===c?"auto":c,s=n.maxHeight,d=n.children,v=n.grouped,p=t.useCallback((function(){var t;if((null==u?void 0:u.current)&&o.current&&null===u.current.getAttribute("data-placement")){var e=r.getScrollableContainer(o.current),n=window.getComputedStyle(e),a=parseFloat(n.paddingTop),c=parseFloat(n.paddingBottom),d=o.current.getBoundingClientRect().height||0,v=o.current.getBoundingClientRect().width||0,p=(e.getBoundingClientRect().height||0)-a-c,m=e.getBoundingClientRect().top||0,g=(o.current.getBoundingClientRect().top||0)-m||m,f=g,b=p-g-d,h=(null===(t=u.current)||void 0===t?void 0:t.getBoundingClientRect().height)||0;if("auto"===l?"above"===(!(b>=h)&&f>1.5*b?"above":"below"):"above"===l){var y=f-i;u.current.setAttribute("data-placement","top"),u.current.style.top="auto",u.current.style.bottom="".concat(d,"px"),u.current.style.maxHeight="".concat(void 0!==s?Math.min(s,y):y,"px")}else{var x=b-i;u.current.setAttribute("data-placement","bottom"),u.current.style.bottom="auto",u.current.style.top="".concat(d,"px"),u.current.style.maxHeight="".concat(void 0!==s?Math.min(s,x):x,"px")}u.current.style.maxWidth="".concat(v,"px")}}),[o,u,l,s]);return t.useEffect((function(){var t,e=u.current;if(e){var n=new MutationObserver((function(){var t;null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement"),p()}));return n.observe(e,{childList:!0,subtree:null!=v&&v}),null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement"),p(),function(){n.disconnect()}}}),[v,u,null==u?void 0:u.current,p]),a.default.createElement(e.Transition,{beforeEnter:function(){p()},afterLeave:function(){var t;null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement")},enter:"transition duration-75 ease-in-out",enterFrom:"transform scale-95 opacity-0",enterTo:"transform scale-100 opacity-100",leave:"transition duration-100 ease-in-out",leaveFrom:"transform scale-100 opacity-100",leaveTo:"transform scale-95 opacity-0"},d)};
+"use strict";var t=require("react"),e=require("@headlessui/react"),n=require("../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js"),r=require("../helpers.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=o(t),i=r.convertRemToPixels(n.SpacingMd)||0;module.exports=function(n){var o=n.buttonRef,u=n.listRef,c=n.openingDirection,l=void 0===c?"auto":c,s=n.maxHeight,d=n.children,v=n.grouped,p=t.useCallback(function(){var t;if((null==u?void 0:u.current)&&o.current&&null===u.current.getAttribute("data-placement")){var e=r.getScrollableContainer(o.current),n=window.getComputedStyle(e),a=parseFloat(n.paddingTop),c=parseFloat(n.paddingBottom),d=o.current.getBoundingClientRect().height||0,v=o.current.getBoundingClientRect().width||0,p=(e.getBoundingClientRect().height||0)-a-c,m=e.getBoundingClientRect().top||0,g=(o.current.getBoundingClientRect().top||0)-m||m,f=g,b=p-g-d,h=(null===(t=u.current)||void 0===t?void 0:t.getBoundingClientRect().height)||0;if("auto"===l?"above"===(!(b>=h)&&f>1.5*b?"above":"below"):"above"===l){var y=f-i;u.current.setAttribute("data-placement","top"),u.current.style.top="auto",u.current.style.bottom="".concat(d,"px"),u.current.style.maxHeight="".concat(void 0!==s?Math.min(s,y):y,"px")}else{var x=b-i;u.current.setAttribute("data-placement","bottom"),u.current.style.bottom="auto",u.current.style.top="".concat(d,"px"),u.current.style.maxHeight="".concat(void 0!==s?Math.min(s,x):x,"px")}u.current.style.maxWidth="".concat(v,"px")}},[o,u,l,s]);return t.useEffect(function(){var t,e=u.current;if(e){var n=new MutationObserver(function(){var t;null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement"),p()});return n.observe(e,{childList:!0,subtree:null!=v&&v}),null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement"),p(),function(){n.disconnect()}}},[v,u,null==u?void 0:u.current,p]),a.default.createElement(e.Transition,{beforeEnter:function(){p()},afterLeave:function(){var t;null===(t=null==u?void 0:u.current)||void 0===t||t.removeAttribute("data-placement")},enter:"transition duration-75 ease-in-out",enterFrom:"transform scale-95 opacity-0",enterTo:"transform scale-100 opacity-100",leave:"transition duration-100 ease-in-out",leaveFrom:"transform scale-100 opacity-100",leaveTo:"transform scale-95 opacity-0"},d)};

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/SideNav.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("clsx"),t=require("./SideNav.module.css.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(e),l=a(r),u="__isChildOfSideNav",d=function(r){var a=r.className,d=r.children,n=e.useMemo((function(){return"development"===process.env.NODE_ENV?i.default.Children.map(d,(function(r){var t;return e.isValidElement(r)&&"SideNavGroup"===r.type.displayName?e.cloneElement(r,((t={})[u]=!0,t)):r})):d}),[d]);return i.default.createElement("div",{className:l.default(t.sideNav,a)},n)};d.displayName="SideNav",exports.CHILD_KEY=u,exports.default=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("clsx"),t=require("./SideNav.module.css.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(e),l=a(r),u="__isChildOfSideNav",d=function(r){var a=r.className,d=r.children,n=e.useMemo(function(){return"development"===process.env.NODE_ENV?i.default.Children.map(d,function(r){var t;return e.isValidElement(r)&&"SideNavGroup"===r.type.displayName?e.cloneElement(r,((t={})[u]=!0,t)):r}):d},[d]);return i.default.createElement("div",{className:l.default(t.sideNav,a)},n)};d.displayName="SideNav",exports.CHILD_KEY=u,exports.default=d;

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/SideNavGroup.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_tslib.js"),a=require("react"),l=require("clsx"),r=require("./SideNav.js"),i=require("./unique-id.js"),n=require("./SideNavGroup.module.css.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=t(a),o=t(l),s="__isChildOfSideNavGroup";function u(l){var t=l.component,u=l.componentProps,c=l.id,p=l.className,v=l.children,m=e.__rest(l,["component","componentProps","id","className","children"]),N=t||"nav",f="label"in m?m.label:void 0,_=a.useMemo((function(){return c?"".concat(c,"-label"):"lds-nav-group-label-".concat(i())}),[c]);r.CHILD_KEY in m&&!0===m[r.CHILD_KEY]||"development"!==process.env.NODE_ENV||console.warn("SideNavGroup should be a direct child of SideNav");var b=a.useMemo((function(){return"development"===process.env.NODE_ENV?d.default.Children.map(v,(function(e){var l;return a.isValidElement(e)&&"SideNavItem"===e.type.displayName?a.cloneElement(e,((l={})[s]=!0,l)):(a.isValidElement(e)&&"SideNavItem"!==e.type.displayName&&console.warn("SideNavGroup should only have SideNavItem as direct children"),e)})):v}),[v]);return d.default.createElement(N,e.__assign({},u,{id:c,className:o.default(n.sideNavGroup,p)},f?{"aria-labelledby":_}:{},"aria-label"in m?{"aria-label":m["aria-label"]}:{}),f&&d.default.createElement("span",{id:_,className:o.default("lds-h3",n.label)},f),b)}u.displayName="SideNavGroup",exports.CHILD_KEY=s,exports.default=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_tslib.js"),a=require("react"),l=require("clsx"),r=require("./SideNav.js"),i=require("./unique-id.js"),n=require("./SideNavGroup.module.css.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=t(a),o=t(l),s="__isChildOfSideNavGroup";function u(l){var t=l.component,u=l.componentProps,c=l.id,p=l.className,v=l.children,m=e.__rest(l,["component","componentProps","id","className","children"]),N=t||"nav",f="label"in m?m.label:void 0,_=a.useMemo(function(){return c?"".concat(c,"-label"):"lds-nav-group-label-".concat(i())},[c]);r.CHILD_KEY in m&&!0===m[r.CHILD_KEY]||"development"!==process.env.NODE_ENV||console.warn("SideNavGroup should be a direct child of SideNav");var b=a.useMemo(function(){return"development"===process.env.NODE_ENV?d.default.Children.map(v,function(e){var l;return a.isValidElement(e)&&"SideNavItem"===e.type.displayName?a.cloneElement(e,((l={})[s]=!0,l)):(a.isValidElement(e)&&"SideNavItem"!==e.type.displayName&&console.warn("SideNavGroup should only have SideNavItem as direct children"),e)}):v},[v]);return d.default.createElement(N,e.__assign({},u,{id:c,className:o.default(n.sideNavGroup,p)},f?{"aria-labelledby":_}:{},"aria-label"in m?{"aria-label":m["aria-label"]}:{}),f&&d.default.createElement("span",{id:_,className:o.default("lds-h3",n.label)},f),b)}u.displayName="SideNavGroup",exports.CHILD_KEY=s,exports.default=u;

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/SideNav/SideNavItem.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react"),t=require("clsx"),r=require("./SideNavItem.module.css.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(a),s=i(t);function l(t){var i,l=t.component,c=t.componentProps,d=t.active,u=t.disabled,o=t.className,m=t.children,p=t.type,v=void 0===p?"default":p,f=t.externalLink;e.__rest(t,["component","componentProps","active","disabled","className","children","type","externalLink"]);var N=l||"a",b=a.useMemo((function(){return c&&"aria-current"in c||!d?{}:{"aria-current":"page"}}),[d,c]);return n.default.createElement(N,e.__assign({},c,{className:s.default(r.sideNavItem,o,(i={},i[r.disabled]=u,i[r.active]=d,i[r.external]=f,i[r[v]]="default"!==v,i)),"aria-disabled":u},b),m)}l.displayName="SideNavItem",module.exports=l;
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react"),t=require("clsx"),r=require("./SideNavItem.module.css.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(a),s=i(t);function l(t){var i,l=t.component,c=t.componentProps,d=t.active,u=t.disabled,o=t.className,m=t.children,p=t.type,v=void 0===p?"default":p,f=t.externalLink;e.__rest(t,["component","componentProps","active","disabled","className","children","type","externalLink"]);var N=l||"a",b=a.useMemo(function(){return c&&"aria-current"in c||!d?{}:{"aria-current":"page"}},[d,c]);return n.default.createElement(N,e.__assign({},c,{className:s.default(r.sideNavItem,o,(i={},i[r.disabled]=u,i[r.active]=d,i[r.external]=f,i[r[v]]="default"!==v,i)),"aria-disabled":u},b),m)}l.displayName="SideNavItem",module.exports=l;

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/Table/Table.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_tslib.js"),a=require("react"),t=require("clsx"),r=require("@k8slens/lds-icons"),l=require("./Table.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(a),i=n(t),d=r.navigation.ArrowUpIcon,o=r.navigation.ArrowDownIcon,c=a.createContext({responsive:!0}),u=function(a){var t=a.visibility,r=void 0===t?"sr-only":t,n=a.className,d=a.children,o=e.__rest(a,["visibility","className","children"]);return s.default.createElement("caption",e.__assign({},o,{className:i.default(l.caption,n,{"lds-only-aria":"sr-only"===r}),hidden:"hidden"===r||void 0}),d)},v=function(a){var t=a.children,r=e.__rest(a,["children"]);return s.default.createElement("thead",e.__assign({},r),t)},f=function(a){var t=a.loading,r=void 0!==t&&t,l=a.children,n=e.__rest(a,["loading","children"]);return s.default.createElement("tbody",e.__assign({},n,{"aria-busy":r||void 0}),l)},m=function(a){var t,r=a.error,n=void 0!==r&&r,d=a.className,o=a.children,c=e.__rest(a,["error","className","children"]);return s.default.createElement("tr",e.__assign({},c,{className:i.default(l.row,d,(t={},t[l.rowError]=n,t))}),o)},_=function(a){var t,r,n,c=a.align,u=a.sortable,v=void 0!==u&&u,f=a.sorted,m=void 0!==f&&f,_=a.className,p=a.children,b=e.__rest(a,["align","sortable","sorted","className","children"]),h="center"===c?l.center:"end"===c?l.end:void 0;return s.default.createElement("th",e.__assign({},b,{scope:null!==(n=b.scope)&&void 0!==n?n:"col","aria-sort":"asc"===m?"ascending":"desc"===m?"descending":void 0,className:i.default(l.tableHeader,_,h,(t={},t[l.sortable]=v,t))}),s.default.createElement("span",null,p,v&&("asc"===m?s.default.createElement(d,{className:l.sortIcon}):s.default.createElement(o,{className:i.default(l.sortIcon,(r={},r[l.inactive]=!m,r))}))))},p={accent:l.textAccent,secondary:l.textSecondary,tertiary:l.textTertiary,quarternary:l.textQuarternary,default:l.textDefault},b=function(t){var r=t.primary,n=void 0!==r&&r,d=t.align,o=t.textStyle,u=t.responsiveHeader,v=t.className,f=t.children,m=e.__rest(t,["primary","align","textStyle","responsiveHeader","className","children"]),_=a.useContext(c).responsive,b=n?"th":"td",h="center"===d?l.center:"end"===d?l.end:void 0,y=o?p[o]:void 0;return s.default.createElement(b,e.__assign({},m,n?{scope:"row"}:{},{className:i.default(l.tableCell,v,h,y)}),_&&null!=u&&s.default.createElement("div",{"aria-hidden":!0,className:l.cellHeader},u),f)},h=function(a){var t=a.colSpan,r=a.children,n=e.__rest(a,["colSpan","children"]);return s.default.createElement("tr",e.__assign({},n),s.default.createElement("td",{colSpan:t},s.default.createElement("div",{className:l.noData},r)))},y=Object.assign((function(a){var t,r=a.responsive,n=void 0===r||r,d=a.bordered,o=void 0!==d&&d,u=a.className,v=a.children,f=e.__rest(a,["responsive","bordered","className","children"]);return s.default.createElement(c.Provider,{value:{responsive:n}},s.default.createElement("table",e.__assign({},f,{className:i.default(l.table,u,(t={},t[l.bordered]=o,t[l.responsive]=n,t))}),v))}),{Caption:u,Head:v,Body:f,Row:m,HeaderCell:_,Cell:b,StatusRow:h});exports.TableBody=f,exports.TableCaption=u,exports.TableCell=b,exports.TableHead=v,exports.TableHeaderCell=_,exports.TableRow=m,exports.TableStatusRow=h,exports.default=y;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_tslib.js"),a=require("react"),t=require("clsx"),r=require("@k8slens/lds-icons"),l=require("./Table.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(a),i=n(t),d=r.navigation.ArrowUpIcon,o=r.navigation.ArrowDownIcon,c=a.createContext({responsive:!0}),u=function(a){var t=a.visibility,r=void 0===t?"sr-only":t,n=a.className,d=a.children,o=e.__rest(a,["visibility","className","children"]);return s.default.createElement("caption",e.__assign({},o,{className:i.default(l.caption,n,{"lds-only-aria":"sr-only"===r}),hidden:"hidden"===r||void 0}),d)},v=function(a){var t=a.children,r=e.__rest(a,["children"]);return s.default.createElement("thead",e.__assign({},r),t)},f=function(a){var t=a.loading,r=void 0!==t&&t,l=a.children,n=e.__rest(a,["loading","children"]);return s.default.createElement("tbody",e.__assign({},n,{"aria-busy":r||void 0}),l)},m=function(a){var t,r=a.error,n=void 0!==r&&r,d=a.className,o=a.children,c=e.__rest(a,["error","className","children"]);return s.default.createElement("tr",e.__assign({},c,{className:i.default(l.row,d,(t={},t[l.rowError]=n,t))}),o)},_=function(a){var t,r,n,c=a.align,u=a.sortable,v=void 0!==u&&u,f=a.sorted,m=void 0!==f&&f,_=a.className,p=a.children,b=e.__rest(a,["align","sortable","sorted","className","children"]),h="center"===c?l.center:"end"===c?l.end:void 0;return s.default.createElement("th",e.__assign({},b,{scope:null!==(n=b.scope)&&void 0!==n?n:"col","aria-sort":"asc"===m?"ascending":"desc"===m?"descending":void 0,className:i.default(l.tableHeader,_,h,(t={},t[l.sortable]=v,t))}),s.default.createElement("span",null,p,v&&("asc"===m?s.default.createElement(d,{className:l.sortIcon}):s.default.createElement(o,{className:i.default(l.sortIcon,(r={},r[l.inactive]=!m,r))}))))},p={accent:l.textAccent,secondary:l.textSecondary,tertiary:l.textTertiary,quarternary:l.textQuarternary,default:l.textDefault},b=function(t){var r=t.primary,n=void 0!==r&&r,d=t.align,o=t.textStyle,u=t.responsiveHeader,v=t.className,f=t.children,m=e.__rest(t,["primary","align","textStyle","responsiveHeader","className","children"]),_=a.useContext(c).responsive,b=n?"th":"td",h="center"===d?l.center:"end"===d?l.end:void 0,y=o?p[o]:void 0;return s.default.createElement(b,e.__assign({},m,n?{scope:"row"}:{},{className:i.default(l.tableCell,v,h,y)}),_&&null!=u&&s.default.createElement("div",{"aria-hidden":!0,className:l.cellHeader},u),f)},h=function(a){var t=a.colSpan,r=a.children,n=e.__rest(a,["colSpan","children"]);return s.default.createElement("tr",e.__assign({},n),s.default.createElement("td",{colSpan:t},s.default.createElement("div",{className:l.noData},r)))},y=Object.assign(function(a){var t,r=a.responsive,n=void 0===r||r,d=a.bordered,o=void 0!==d&&d,u=a.className,v=a.children,f=e.__rest(a,["responsive","bordered","className","children"]);return s.default.createElement(c.Provider,{value:{responsive:n}},s.default.createElement("table",e.__assign({},f,{className:i.default(l.table,u,(t={},t[l.bordered]=o,t[l.responsive]=n,t))}),v))},{Caption:u,Head:v,Body:f,Row:m,HeaderCell:_,Cell:b,StatusRow:h});exports.TableBody=f,exports.TableCaption=u,exports.TableCell=b,exports.TableHead=v,exports.TableHeaderCell=_,exports.TableRow=m,exports.TableStatusRow=h,exports.default=y;

package/lib/cjs/Textarea/Textarea.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),a=require("clsx"),l=require("./Textarea.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(t),r=n(a),s=t.forwardRef((function(a,n){var s,c,i=a.icon,o=a.autoResize,f=void 0!==o&&o,g=a.wrapperProps,d=a.maxLength,p=a.className,h=a.onChange,m=a.value,v=a.defaultValue,x=e.__rest(a,["icon","autoResize","wrapperProps","maxLength","className","onChange","value","defaultValue"]),_=t.useRef(null),y=t.useState((function(){return"string"==typeof m?m.length:"string"==typeof v?v.length:0})),N=y[0],C=y[1],E=t.useCallback((function(e){_.current=e,"function"==typeof n?n(e):n&&(n.current=e)}),[n]),b=t.useCallback((function(){var e=_.current;e&&f&&(e.style.height="auto",e.style.height="".concat(e.scrollHeight,"px"))}),[f]);t.useEffect((function(){b()}),[m,b]),t.useEffect((function(){"string"==typeof m&&null!=d&&C(m.length)}),[m,d]);var w=t.useCallback((function(e){null!=d&&C(e.target.value.length),b(),null==h||h(e)}),[h,b,d]);return u.default.createElement("div",e.__assign({},g,{className:r.default(l.wrapper,null==g?void 0:g.className,(s={},s[l.withIcon]=i,s))}),u.default.createElement("textarea",e.__assign({ref:E},x,{value:m,defaultValue:v,maxLength:d,onChange:w,className:r.default(l.textarea,p,(c={},c[l.autoResize]=f,c))})),i&&u.default.createElement(i,{className:l.icon}),null!=d&&u.default.createElement("span",{className:l.counter,"aria-live":"polite"},N,"/",d))}));module.exports=s;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),a=require("clsx"),l=require("./Textarea.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(t),r=n(a),s=t.forwardRef(function(a,n){var s,c,i=a.icon,o=a.autoResize,f=void 0!==o&&o,g=a.wrapperProps,d=a.maxLength,p=a.className,h=a.onChange,m=a.value,v=a.defaultValue,x=e.__rest(a,["icon","autoResize","wrapperProps","maxLength","className","onChange","value","defaultValue"]),_=t.useRef(null),y=t.useState(function(){return"string"==typeof m?m.length:"string"==typeof v?v.length:0}),N=y[0],C=y[1],E=t.useCallback(function(e){_.current=e,"function"==typeof n?n(e):n&&(n.current=e)},[n]),b=t.useCallback(function(){var e=_.current;e&&f&&(e.style.height="auto",e.style.height="".concat(e.scrollHeight,"px"))},[f]);t.useEffect(function(){b()},[m,b]),t.useEffect(function(){"string"==typeof m&&null!=d&&C(m.length)},[m,d]);var w=t.useCallback(function(e){null!=d&&C(e.target.value.length),b(),null==h||h(e)},[h,b,d]);return u.default.createElement("div",e.__assign({},g,{className:r.default(l.wrapper,null==g?void 0:g.className,(s={},s[l.withIcon]=i,s))}),u.default.createElement("textarea",e.__assign({ref:E},x,{value:m,defaultValue:v,maxLength:d,onChange:w,className:r.default(l.textarea,p,(c={},c[l.autoResize]=f,c))})),i&&u.default.createElement(i,{className:l.icon}),null!=d&&u.default.createElement("span",{className:l.counter,"aria-live":"polite"},N,"/",d))});module.exports=s;

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";
 }