@k8slens/lds 0.58.2 → 0.58.4

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

@@ -1 +1 @@
-import{__rest as e,__assign as a}from"../_virtual/_tslib.js";import r,{forwardRef as l}from"react";import t from"clsx";import{navigation as i}from"@k8slens/lds-icons";import o from"./LinkButton.module.css.js";var s=i.ArrowForwardIcon,m=l((function(l,i){var m,n=l.label,c=l.textTransform,f=l.className,p=l["aria-label"],d=l.size,u=void 0===d?"md":d,b=l.title,k=l.children,h=l.href,N=l.onClick,v=e(l,["label","textTransform","className","aria-label","size","title","children","href","onClick"]);return r.createElement("a",a({ref:i},v,{className:t(o.linkButton,f,(m={},m[o.uppercase]="uppercase"===c,m[o.capitalize]="capitalize"===c,m[o[u]]="md"!==u,m[o.disabled]=!h&&!N,m)),"aria-label":p||("string"==typeof n?n:""),title:b,href:h,onClick:N}),k||n,r.createElement(s,{className:o.arrow}))}));m.displayName="LinkButton";export{m as default};
+import{__rest as e,__assign as a}from"../_virtual/_tslib.js";import r,{forwardRef as l}from"react";import t from"clsx";import{navigation as i}from"@k8slens/lds-icons";import o from"./LinkButton.module.css.js";var s=i.ArrowForwardIcon,m=l(function(l,i){var m,n=l.label,c=l.textTransform,f=l.className,p=l["aria-label"],d=l.size,u=void 0===d?"md":d,b=l.title,k=l.children,h=l.href,N=l.onClick,v=e(l,["label","textTransform","className","aria-label","size","title","children","href","onClick"]);return r.createElement("a",a({ref:i},v,{className:t(o.linkButton,f,(m={},m[o.uppercase]="uppercase"===c,m[o.capitalize]="capitalize"===c,m[o[u]]="md"!==u,m[o.disabled]=!h&&!N,m)),"aria-label":p||("string"==typeof n?n:""),title:b,href:h,onClick:N}),k||n,r.createElement(s,{className:o.arrow}))});m.displayName="LinkButton";export{m as default};

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

@@ -1 +1 @@
-import{__rest as e,__assign as r}from"../_virtual/_tslib.js";import a,{forwardRef as s}from"react";import t from"clsx";import o from"./Lozenge.module.css.js";var i=s((function(s,i){var m,c=s.className,l=s.textTransform,p=s.type,n=void 0===p?"secondary":p,f=s.children,d=s.size,u=void 0===d?"sm":d,z=e(s,["className","textTransform","type","children","size"]);return a.createElement("span",r({ref:i},z,{className:t(o.lozenge,(m={},m[o[u]]="sm"!==u,m[o[n]]="secondary"!==n,m[o.uppercase]="uppercase"===l,m[o.capitalize]="capitalize"===l,m),c)}),f)}));export{i as default};
+import{__rest as e,__assign as r}from"../_virtual/_tslib.js";import a,{forwardRef as s}from"react";import t from"clsx";import o from"./Lozenge.module.css.js";var i=s(function(s,i){var m,c=s.className,l=s.textTransform,p=s.type,n=void 0===p?"secondary":p,f=s.children,d=s.size,u=void 0===d?"sm":d,z=e(s,["className","textTransform","type","children","size"]);return a.createElement("span",r({ref:i},z,{className:t(o.lozenge,(m={},m[o[u]]="sm"!==u,m[o[n]]="secondary"!==n,m[o.uppercase]="uppercase"===l,m[o.capitalize]="capitalize"===l,m),c)}),f)});export{i as default};

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

@@ -1 +1 @@
-import{__assign as e}from"../_virtual/_tslib.js";import o,{useMemo as t}from"react";import r from"clsx";import{Dialog as a,DialogTitle as n}from"@headlessui/react";import s from"../Panel/Panel.js";import l from"../ButtonBar/ButtonBar.js";import m from"./Modal.module.css.js";function p(p){var i=p.children,c=p.isOpen,d=p.onClose,u=p.title,f=p.subTitle,h=p.size,v=void 0===h?"md":h,C=p.contentComponent,N=p.contentProps,P=p.buttonBarProps,B=void 0===P?{}:P,E=p.className,b=void 0===E?"":E,j=p.footer,w=t((function(){return e(e({},N||{}),{className:r(m.modalContent,(null==N?void 0:N.className)||"")})}),[N]);return c?o.createElement(a,{open:c,onClose:d,className:r(m.modal,m[v])},o.createElement(s,{wrapperComponent:C||"div",wrapperProps:w,className:b,headerComponent:n,headerProps:{as:"header"},header:o.createElement(o.Fragment,null,o.createElement("h3",{className:"lds-h2"},u),f?o.createElement("p",{className:m.subTitle},f):null),footer:j,footerComponent:l,footerProps:e(e({},B),{as:"footer"})},i)):null}export{p as default};
+import{__assign as e}from"../_virtual/_tslib.js";import o,{useMemo as t}from"react";import r from"clsx";import{Dialog as a,DialogTitle as n}from"@headlessui/react";import s from"../Panel/Panel.js";import l from"../ButtonBar/ButtonBar.js";import m from"./Modal.module.css.js";function p(p){var i=p.children,c=p.isOpen,d=p.onClose,u=p.title,f=p.subTitle,h=p.size,v=void 0===h?"md":h,C=p.contentComponent,N=p.contentProps,P=p.buttonBarProps,B=void 0===P?{}:P,E=p.className,b=void 0===E?"":E,j=p.footer,w=t(function(){return e(e({},N||{}),{className:r(m.modalContent,(null==N?void 0:N.className)||"")})},[N]);return c?o.createElement(a,{open:c,onClose:d,className:r(m.modal,m[v])},o.createElement(s,{wrapperComponent:C||"div",wrapperProps:w,className:b,headerComponent:n,headerProps:{as:"header"},header:o.createElement(o.Fragment,null,o.createElement("h3",{className:"lds-h2"},u),f?o.createElement("p",{className:m.subTitle},f):null),footer:j,footerComponent:l,footerProps:e(e({},B),{as:"footer"})},i)):null}export{p as default};

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

@@ -1 +1 @@
-import e,{useState as t,useRef as r,useCallback as n}from"react";import l from"clsx";import{navigation as o,base as a}from"@k8slens/lds-icons";import i from"../DrawerTransition/DrawerTransition.js";import s from"./Notification.module.css.js";var c=o.CloseIcon,m=a.SuccessIcon,f=a.WarningIcon,u=a.InfoIcon,p=function(o){var a=o.level,p=void 0===a?"info":a,E=o.type,d=void 0===E?"default":E,v=o.title,x=o.message,h=o.flashDuration,I=void 0===h?5e3:h,b=o.onClose,g=o.className,w=t(!0),z=w[0],C=w[1],N=r(null),k="flash"===d?300:200,y=n((function(){"flash"===d&&setTimeout((function(){try{C(!1)}catch(e){}}),I)}),[d,I]);return e.createElement(i,{open:z,role:"alert",className:l(g,s.wrapper,s[p],s[d]),afterEnter:y,afterExit:b,duration:k},e.createElement("div",{ref:N,className:s.alert},"success"===p&&e.createElement(m,{size:"xl"}),"info"===p&&e.createElement(u,{size:"xl"}),("error"===p||"warning"===p)&&e.createElement(f,{size:"xl"}),e.createElement("div",null,v&&e.createElement("h5",null,v),e.createElement("p",null,x)),"closable"===d&&e.createElement("button",{type:"button",onClick:function(){return C(!1)},"aria-label":"Close"},e.createElement(c,{size:"lg",color:"on-dark"}))))};export{p as default};
+import e,{useState as t,useRef as r,useCallback as n}from"react";import l from"clsx";import{navigation as o,base as a}from"@k8slens/lds-icons";import i from"../DrawerTransition/DrawerTransition.js";import s from"./Notification.module.css.js";var c=o.CloseIcon,m=a.SuccessIcon,f=a.WarningIcon,u=a.InfoIcon,p=function(o){var a=o.level,p=void 0===a?"info":a,E=o.type,d=void 0===E?"default":E,v=o.title,x=o.message,h=o.flashDuration,I=void 0===h?5e3:h,b=o.onClose,g=o.className,w=t(!0),z=w[0],C=w[1],N=r(null),k="flash"===d?300:200,y=n(function(){"flash"===d&&setTimeout(function(){try{C(!1)}catch(e){}},I)},[d,I]);return e.createElement(i,{open:z,role:"alert",className:l(g,s.wrapper,s[p],s[d]),afterEnter:y,afterExit:b,duration:k},e.createElement("div",{ref:N,className:s.alert},"success"===p&&e.createElement(m,{size:"xl"}),"info"===p&&e.createElement(u,{size:"xl"}),("error"===p||"warning"===p)&&e.createElement(f,{size:"xl"}),e.createElement("div",null,v&&e.createElement("h5",null,v),e.createElement("p",null,x)),"closable"===d&&e.createElement("button",{type:"button",onClick:function(){return C(!1)},"aria-label":"Close"},e.createElement(c,{size:"lg",color:"on-dark"}))))};export{p as default};

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

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

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

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

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

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

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;

package/lib/es/Select/Option.js

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

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

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

package/lib/es/Select/SelectDropdown.js

@@ -1 +1 @@
-import t,{useCallback as e,useEffect as n}from"react";import{Transition as r}from"@headlessui/react";import{SpacingMd as o}from"../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js";import{convertRemToPixels as a,getScrollableContainer as i}from"../helpers.js";var u=a(o)||0;function c(o){var a=o.buttonRef,c=o.listRef,l=o.openingDirection,d=void 0===l?"auto":l,s=o.maxHeight,m=o.children,v=o.grouped,p=e((function(){var t;if((null==c?void 0:c.current)&&a.current&&null===c.current.getAttribute("data-placement")){var e=i(a.current),n=window.getComputedStyle(e),r=parseFloat(n.paddingTop),o=parseFloat(n.paddingBottom),l=a.current.getBoundingClientRect().height||0,m=a.current.getBoundingClientRect().width||0,v=(e.getBoundingClientRect().height||0)-r-o,p=e.getBoundingClientRect().top||0,g=(a.current.getBoundingClientRect().top||0)-p||p,f=g,b=v-g-l,h=(null===(t=c.current)||void 0===t?void 0:t.getBoundingClientRect().height)||0;if("auto"===d?"above"===(!(b>=h)&&f>1.5*b?"above":"below"):"above"===d){var y=f-u;c.current.setAttribute("data-placement","top"),c.current.style.top="auto",c.current.style.bottom="".concat(l,"px"),c.current.style.maxHeight="".concat(void 0!==s?Math.min(s,y):y,"px")}else{var x=b-u;c.current.setAttribute("data-placement","bottom"),c.current.style.bottom="auto",c.current.style.top="".concat(l,"px"),c.current.style.maxHeight="".concat(void 0!==s?Math.min(s,x):x,"px")}c.current.style.maxWidth="".concat(m,"px")}}),[a,c,d,s]);n((function(){var t,e=c.current;if(e){var n=new MutationObserver((function(){var t;null===(t=null==c?void 0:c.current)||void 0===t||t.removeAttribute("data-placement"),p()}));return n.observe(e,{childList:!0,subtree:null!=v&&v}),null===(t=null==c?void 0:c.current)||void 0===t||t.removeAttribute("data-placement"),p(),function(){n.disconnect()}}}),[v,c,null==c?void 0:c.current,p]);return t.createElement(r,{beforeEnter:function(){p()},afterLeave:function(){var t;null===(t=null==c?void 0:c.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"},m)}export{c as default};
+import t,{useCallback as e,useEffect as n}from"react";import{Transition as r}from"@headlessui/react";import{SpacingMd as o}from"../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js";import{convertRemToPixels as a,getScrollableContainer as i}from"../helpers.js";var u=a(o)||0;function c(o){var a=o.buttonRef,c=o.listRef,l=o.openingDirection,d=void 0===l?"auto":l,s=o.maxHeight,m=o.children,v=o.grouped,p=e(function(){var t;if((null==c?void 0:c.current)&&a.current&&null===c.current.getAttribute("data-placement")){var e=i(a.current),n=window.getComputedStyle(e),r=parseFloat(n.paddingTop),o=parseFloat(n.paddingBottom),l=a.current.getBoundingClientRect().height||0,m=a.current.getBoundingClientRect().width||0,v=(e.getBoundingClientRect().height||0)-r-o,p=e.getBoundingClientRect().top||0,g=(a.current.getBoundingClientRect().top||0)-p||p,f=g,b=v-g-l,h=(null===(t=c.current)||void 0===t?void 0:t.getBoundingClientRect().height)||0;if("auto"===d?"above"===(!(b>=h)&&f>1.5*b?"above":"below"):"above"===d){var y=f-u;c.current.setAttribute("data-placement","top"),c.current.style.top="auto",c.current.style.bottom="".concat(l,"px"),c.current.style.maxHeight="".concat(void 0!==s?Math.min(s,y):y,"px")}else{var x=b-u;c.current.setAttribute("data-placement","bottom"),c.current.style.bottom="auto",c.current.style.top="".concat(l,"px"),c.current.style.maxHeight="".concat(void 0!==s?Math.min(s,x):x,"px")}c.current.style.maxWidth="".concat(m,"px")}},[a,c,d,s]);n(function(){var t,e=c.current;if(e){var n=new MutationObserver(function(){var t;null===(t=null==c?void 0:c.current)||void 0===t||t.removeAttribute("data-placement"),p()});return n.observe(e,{childList:!0,subtree:null!=v&&v}),null===(t=null==c?void 0:c.current)||void 0===t||t.removeAttribute("data-placement"),p(),function(){n.disconnect()}}},[v,c,null==c?void 0:c.current,p]);return t.createElement(r,{beforeEnter:function(){p()},afterLeave:function(){var t;null===(t=null==c?void 0:c.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"},m)}export{c as default};

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

@@ -1 +1 @@
-import e,{useMemo as r,isValidElement as a,cloneElement as i}from"react";import t from"clsx";import s from"./SideNav.module.css.js";var d="__isChildOfSideNav",m=function(m){var n=m.className,o=m.children,l=r((function(){return"development"===process.env.NODE_ENV?e.Children.map(o,(function(e){var r;return a(e)&&"SideNavGroup"===e.type.displayName?i(e,((r={})[d]=!0,r)):e})):o}),[o]);return e.createElement("div",{className:t(s.sideNav,n)},l)};m.displayName="SideNav";export{d as CHILD_KEY,m as default};
+import e,{useMemo as r,isValidElement as a,cloneElement as i}from"react";import t from"clsx";import s from"./SideNav.module.css.js";var d="__isChildOfSideNav",m=function(m){var n=m.className,o=m.children,l=r(function(){return"development"===process.env.NODE_ENV?e.Children.map(o,function(e){var r;return a(e)&&"SideNavGroup"===e.type.displayName?i(e,((r={})[d]=!0,r)):e}):o},[o]);return e.createElement("div",{className:t(s.sideNav,n)},l)};m.displayName="SideNav";export{d as CHILD_KEY,m as default};