@k8slens/lds 0.56.0 → 0.57.2

package/README.md

@@ -1,51 +1,55 @@
-# Lens Design System – Core React Component Library
+# @k8slens/lds
 
-## Documentation
-Browse the documentation at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/core).
+Core React component library for the Lens Design System.
+
+## Installation
 
-## What is included?
+```bash
+npm install @k8slens/lds @k8slens/lds-tokens
+```
 
-### ES Modules
-- `./lib/es/index.js` - Main ES module
-- `./lib/es/index.electron.js` - Main ES module for Electron
-- `./lib/es/ComponentName/ComponentName.js` - Individual ES modules
+## Setup
 
-### CommonJS modules
-- `./lib/cjs/index.js` - Main CommonJS module
-- `./lib/cjs/ComponentName/ComponentName.js` - Individual CommonJS modules
+Import required styles in your app entry point:
 
-### AMD package
-- `./lib/web/[version-number]/index.css` - Static CSS for web
-- `./lib/web/[version-number]/index.js` - AMD package for RequireJS. Requires external `react` import.
+```tsx
+// Fonts (required)
+import "@k8slens/lds-tokens/lib/electron/font-face.css";
 
-## Usage with React apps
-- run `npm i -s @k8slens/lds @k8slens/lds-tokens`
-- import `@k8slens/lds-tokens/lib/web/font-imports.css` in your React app to include fonts
-- import `@k8slens/lds/index.css` in your React app to include general styles
-- import `@k8slens/lds/typography.css` in your React app (after index.css) to include base typographic styles
-- Use in a component:
+// Tokens (required)
+import "@k8slens/lds-tokens/lib/web/tokens.core.css";
+import "@k8slens/lds-tokens/lib/web/tokens.dark.css"; // or tokens.light.css
 
-```js
-import { Button } from "@k8slens/lds";
+// Component styles (required)
+import "@k8slens/lds/lib/es/index.css";
 
-export const Component = () => (
-  <Button label="My Button" />
-);
+// Optional: Base typography styles
+import "@k8slens/lds/lib/es/typography.css";
 ```
 
-## Usage with Electron React apps
-- run `npm i -s @k8slens/lds @k8slens/lds-tokens`
-- import `@k8slens/lds-tokens/lib/electron/fonts.css` in your React Electron app to include fonts
-- import `@k8slens/lds/index.css` in your React Electron app to include general styles
-- Use in a component:
+## Usage
 
-```js
-import { Button } from "@k8slens/lds";
+```tsx
+import { Button, Input, Modal, Select } from "@k8slens/lds";
 
-export const Component = () => (
-  <Button label="My Button" />
-);
+export const MyComponent = () => <Button label="Click me" type="primary" />;
 ```
 
-## Usage on web
-TBD
+## Documentation
+
+Browse components and examples at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/core).
+
+## AI Assistance
+
+This package includes an `llms.txt` file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., `CLAUDE.md`):
+
+```markdown
+Read node_modules/@k8slens/lds/llms.txt for component API reference.
+Read node_modules/@k8slens/lds-tokens/llms.txt for design tokens reference.
+
+Always use LDS components and tokens instead of custom implementations:
+- Use Button, Input, Modal, Select etc. from @k8slens/lds
+- Use CSS variables from @k8slens/lds-tokens for colors, spacing, radius
+- Never hardcode values that exist as tokens
+Search llms.txt files before creating custom components or styles.
+```

package/lib/cjs/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from "react";
+import React, { type HTMLAttributes } from "react";
 import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
 export interface AvatarProps extends Pick<HTMLAttributes<HTMLDivElement>, "aria-hidden" | "aria-label"> {
     /**
@@ -19,7 +19,12 @@ export interface AvatarProps extends Pick<HTMLAttributes<HTMLDivElement>, "aria-
     size?: "sm" | "md" | "xl";
 }
 /**
- * Avatar component to display user's profile picture or initials.
- * If no image is provided, initials will be displayed with a random background color.
+ * Displays user's profile picture or initials with random background color.
+ *
+ * Usage: `import { Avatar } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Avatar name="John Doe" image="avatar.jpg" />
+ * ```
  */
-export default function Avatar({ name, className, image: AvatarImage, size, ...props }: AvatarProps): JSX.Element;
+export default function Avatar({ name, className, image: AvatarImage, size, ...props }: AvatarProps): React.JSX.Element;

package/lib/cjs/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import React, { HTMLAttributes } from "react";
 export interface BadgeProps extends Pick<HTMLAttributes<HTMLSpanElement>, "id" | "className" | "title" | "aria-label" | "aria-hidden" | "role"> {
     /**
      * If no title has not been provided, the badge will be hidden from screen readers.
@@ -14,4 +14,13 @@ export interface BadgeProps extends Pick<HTMLAttributes<HTMLSpanElement>, "id" |
      */
     size?: "sm" | "md" | "lg";
 }
-export default function Badge({ className, type, size, title, ...props }: BadgeProps): JSX.Element;
+/**
+ * A small status indicator dot. Use `type` prop for semantic colors.
+ *
+ * Usage: `import { Badge } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Badge type="success" title="Active" />
+ * ```
+ */
+export default function Badge({ className, type, size, title, ...props }: BadgeProps): React.JSX.Element;

package/lib/cjs/ButtonBar/ButtonBar.d.ts

@@ -13,5 +13,5 @@ export declare type ButtonBarProps<ElementType extends JSX.IntrinsicElements | R
  *
  * Usage: `import { ButtonBar } from "@k8slens/lds"`
  */
-declare function ButtonBar<ElementType extends JSX.IntrinsicElements | React.ElementType<any>>({ as: Component, type, gridSize, children, ...props }: PropsWithChildren<ButtonBarProps<ElementType>>): JSX.Element;
+declare function ButtonBar<ElementType extends JSX.IntrinsicElements | React.ElementType<any>>({ as: Component, type, gridSize, children, ...props }: PropsWithChildren<ButtonBarProps<ElementType>>): React.JSX.Element;
 export default ButtonBar;

package/lib/cjs/Checkbox/Checkbox.d.ts

@@ -4,4 +4,13 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     onChange(value: boolean, evt: React.ChangeEvent<HTMLInputElement>): void;
     disabled?: boolean;
 }
-export default function Checkbox({ disabled, value, onChange, className, ...inputProps }: CheckboxProps): JSX.Element;
+/**
+ * A styled checkbox input with checkmark icon.
+ *
+ * Usage: `import { Checkbox } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Checkbox value={checked} onChange={setChecked} />
+ * ```
+ */
+export default function Checkbox({ disabled, value, onChange, className, ...inputProps }: CheckboxProps): React.JSX.Element;

package/lib/cjs/ConfirmDialog/ConfirmDialog.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import React, { type ReactNode } from "react";
 import { type ButtonProps } from "../Button/Button";
 declare type AllowedButtonProps = Pick<ButtonProps, "type" | "size" | "discreet" | "icon" | "iconPosition" | "textTransform">;
 export declare type ConfirmDialogProps = {
@@ -13,12 +13,24 @@ export declare type ConfirmDialogProps = {
     handleCancel: () => void;
 };
 /**
- * ConfirmDialog is a modal dialog that asks the user to confirm an action.
+ * A modal dialog that asks the user to confirm an action. Use with `useConfirmDialog` hook.
+ *
+ * Usage: `import { useConfirmDialog } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * const { ConfirmDialog, confirm } = useConfirmDialog();
+ * return (
+ *   <>
+ *     <Button onClick={() => confirm("Delete?", "This cannot be undone.")} />
+ *     {ConfirmDialog}
+ *   </>
+ * );
+ * ```
  */
-declare const ConfirmDialog: ({ title, message, confirmText, cancelLabel, confirmButtonProps, cancelButtonProps, handleClose, handleConfirm, handleCancel, }: ConfirmDialogProps) => JSX.Element;
+declare const ConfirmDialog: ({ title, message, confirmText, cancelLabel, confirmButtonProps, cancelButtonProps, handleClose, handleConfirm, handleCancel, }: ConfirmDialogProps) => React.JSX.Element;
 declare type ConfirmDialogConfig = Omit<ConfirmDialogProps, "title" | "message" | "handleClose" | "handleConfirm" | "handleCancel">;
 export declare const useConfirmDialog: () => {
-    ConfirmDialog: JSX.Element | null;
+    ConfirmDialog: React.JSX.Element | null;
     confirm: (title: string, message?: string | ReactNode, props?: ConfirmDialogConfig) => Promise<unknown>;
 };
 export default ConfirmDialog;

package/lib/cjs/LinkButton/LinkButton.d.ts

@@ -14,6 +14,15 @@ export interface LinkButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEle
      */
     onClick?: AnchorHTMLAttributes<HTMLAnchorElement>["onClick"];
 }
+/**
+ * A text link with arrow icon for navigation actions.
+ *
+ * Usage: `import { LinkButton } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <LinkButton label="Learn more" href="/docs" />
+ * ```
+ */
 declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLAnchorElement>>;

package/lib/cjs/Lozenge/Lozenge.d.ts

@@ -15,5 +15,14 @@ export interface LozengeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "typ
      */
     size?: "sm" | "md" | "lg";
 }
+/**
+ * A pill-shaped label for status or category display.
+ *
+ * Usage: `import { Lozenge } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Lozenge type="success">Active</Lozenge>
+ * ```
+ */
 declare const Lozenge: React.ForwardRefExoticComponent<LozengeProps & React.RefAttributes<HTMLSpanElement>>;
 export default Lozenge;

package/lib/cjs/Modal/Modal.d.ts

@@ -25,5 +25,5 @@ export interface ModalProps<Component extends keyof JSX.IntrinsicElements | Reac
  *
  * Usage: `import { Modal } from "@k8slens/lds"`
  */
-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>>): JSX.Element | null;
+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/cjs/Modal/Modal.js

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

package/lib/cjs/Notification/Notification.d.ts

@@ -19,5 +19,14 @@ export interface NotificationProps {
     onClose?(): void;
     className?: string;
 }
+/**
+ * Alert banner for user feedback. Set `type` to control behavior: `flash` auto-dismisses, `closable` shows close button.
+ *
+ * Usage: `import { Notification } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Notification level="success" message="Saved successfully" />
+ * ```
+ */
 declare const Notification: React.FC<NotificationProps>;
 export default Notification;

package/lib/cjs/NumberBadge/NumberBadge.d.ts

@@ -1,4 +1,4 @@
-import { AriaRole } from "react";
+import React, { AriaRole } from "react";
 import { LozengeProps } from "../Lozenge/Lozenge";
 export declare const formatNumber: (n: number) => string;
 interface BaseNumberBadgeProps extends Omit<LozengeProps, "role" | "children" | "title" | "textTransform" | "size"> {
@@ -31,5 +31,14 @@ interface Props extends BaseNumberBadgeProps {
     role: Exclude<AriaRole, "status">;
 }
 export declare type NumberBadgeProps = StatusNumberBadgeProps | Props;
-export default function NumberBadge({ className, value, showZero, displayPlusSign, title, ...props }: NumberBadgeProps): JSX.Element | null;
+/**
+ * A numeric badge that formats large numbers (1500 → "1.5k"). Returns null if value is 0 unless `showZero` is set.
+ *
+ * Usage: `import { NumberBadge } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <NumberBadge value={42} title="Items" />
+ * ```
+ */
+export default function NumberBadge({ className, value, showZero, displayPlusSign, title, ...props }: NumberBadgeProps): React.JSX.Element | null;
 export {};

package/lib/cjs/Panel/Panel.d.ts

@@ -25,5 +25,5 @@ export interface PanelProps<WrapperComponent extends keyof JSX.IntrinsicElements
  *
  * Usage: `import { Panel } from "@k8slens/lds"`
  */
-declare function Panel<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType | typeof Fragment = 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">({ header, footer, className, wrapperComponent, wrapperProps: _wrapperProps, headerComponent, headerProps: _headerProps, contentComponent, contentProps: _contentProps, footerComponent, footerProps: _footerProps, loading, children, }: React.PropsWithChildren<PanelProps<WrapperComponent, HeaderComponent, ContentComponent, FooterComponent>>): JSX.Element;
+declare function Panel<WrapperComponent extends keyof JSX.IntrinsicElements | React.ElementType | typeof Fragment = 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">({ header, footer, className, wrapperComponent, wrapperProps: _wrapperProps, headerComponent, headerProps: _headerProps, contentComponent, contentProps: _contentProps, footerComponent, footerProps: _footerProps, loading, children, }: React.PropsWithChildren<PanelProps<WrapperComponent, HeaderComponent, ContentComponent, FooterComponent>>): React.JSX.Element;
 export default Panel;

package/lib/cjs/ProfileBlock/ProfileBlock.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactElement } from "react";
+import React, { HTMLProps, ReactElement } from "react";
 import { type AvatarProps } from "../Avatar/Avatar";
 declare type Item = {
     title: string;
@@ -12,5 +12,14 @@ export declare type ProfileBlockProps = HTMLProps<HTMLDivElement> & {
     formatTitle?: (item: Item) => string | ReactElement;
     formatSubtitle?: (item: Item) => string | ReactElement;
 };
-declare const ProfileBlock: ({ className, loading, item, formatTitle, formatSubtitle, ...props }: ProfileBlockProps) => JSX.Element;
+/**
+ * Displays user info with avatar, title, and subtitle. Supports loading state.
+ *
+ * Usage: `import { ProfileBlock } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <ProfileBlock item={{ title: "@user", subtitle: "Name", avatarTitle: "Name" }} />
+ * ```
+ */
+declare const ProfileBlock: ({ className, loading, item, formatTitle, formatSubtitle, ...props }: ProfileBlockProps) => React.JSX.Element;
 export default ProfileBlock;

package/lib/cjs/ProgressBar/ProgressBar.d.ts

@@ -5,4 +5,13 @@ export interface ProgressBarProps extends React.ProgressHTMLAttributes<HTMLProgr
     type?: "default" | "ok" | "caution" | "danger";
     title?: string;
 }
-export default function ProgressBar({ value, type, max, title, className, ...props }: ProgressBarProps): JSX.Element;
+/**
+ * A progress bar with semantic color types. Value can be 0-1 or use custom `max`.
+ *
+ * Usage: `import { ProgressBar } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <ProgressBar value={0.75} type="ok" />
+ * ```
+ */
+export default function ProgressBar({ value, type, max, title, className, ...props }: ProgressBarProps): React.JSX.Element;

package/lib/cjs/RadioCard/RadioCard.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export declare type DefaultOption = {
     id: string;
     label: string;
@@ -34,5 +34,5 @@ export interface RadioCardProps<T> {
  *
  * Usage: `import { RadioCard } from "@k8slens/lds"`
  */
-export default function RadioCard<T extends DefaultOption>({ id, "aria-label": ariaLabel, value, options, onChange, name, invalid, disabled, itemClassName, className, renderItem, ...radioGroupProps }: RadioCardProps<T>): JSX.Element;
+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 i=r(a),d=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 i.default.createElement("span",{className:n.content},i.default.createElement("span",{className:n.label},e.label),i.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 i.default.createElement(t.RadioGroup,e.__assign({},E,{id:l,by:"id",value:s,onChange:c,"aria-label":r,className:d.default(n.radioCard,v),name:m}),u.map((function(e){return i.default.createElement(t.RadioGroup.Option,{key:e.id,value:e,disabled:f||e.disabled,className:function(e){var a,l=e.checked;return d.default(n.item,b,((a={})[n.selected]=l,a[n.invalid]=o,a))}},(function(a){var l=a.checked;return i.default.createElement(i.default.Fragment,null,i.default.createElement("span",{className:n.dot},i.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/Option.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { type DefaultOption, type SelectProps } from "./Select";
 export declare type OptionProps<T> = Pick<SelectProps<T>, "size" | "itemClassName" | "placeholder"> & NonNullable<Pick<SelectProps<T>, "renderContent">> & {
     currentValues?: T[] | null;
     option: T;
 };
-export default function Option<T extends DefaultOption>({ option, currentValues, size, itemClassName, renderContent, placeholder, }: OptionProps<T>): JSX.Element;
+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.Listbox.Option,{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

@@ -81,5 +81,5 @@ export declare type SelectProps<T> = (SingleSelectionProps<T> | MultiSelectionPr
  *
  * Usage: `import { Select } from "@k8slens/lds"`
  */
-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>): JSX.Element;
+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,y=n.name,E=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,_=n.title,j=n.openingDirection,D=n.maxHeight,L=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!L||!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}))}),[L,g,v]),V=t.useMemo((function(){return L?Array.isArray(v)?v:[]:v}),[L,v]);return c.default.createElement(a.Listbox,{value:V,onChange:b,name:y,disabled:C,multiple:L},(function(e){var t,n,N,y=e.open;return c.default.createElement("div",{className:f.default(s.select,A,(t={},t[s.invalid]=E,t[s.locked]=H,t[s.disabled]=C||I,t[s.open]=y,t))},c.default.createElement(a.Listbox.Button,{id:l,ref:B.buttonRef?B.buttonRef:O,"aria-label":d,className:f.default(s.selectButton),title:_},c.default.createElement("span",{className:f.default(s.item,s.selectedItem,(n={},n[s.multiple]=L,n[s.disabled]=C||I,n[s.invalid]=E,n[s.placeholder]=!v,n[s.lg]="lg"===k,n),null!==(N="function"==typeof q?q({disabled:Boolean(C),invalid:Boolean(E)}):q)&&void 0!==N?N:"")},I?c.default.createElement(r,{className:s.loadingIndicator}):L&&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:E,disabled:C},h))}))):x(v,{invalid:E,disabled:C},h)),y&&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:j,maxHeight:D,grouped:g.some((function(e){return"options"in e}))},c.default.createElement(a.Listbox.Options,{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)))}))};
+"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.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, RefObject } from "react";
+import React, { PropsWithChildren, RefObject } from "react";
 export interface SelectDropdownProps {
     /**
      * Ref to the button that opens the dropdown
@@ -26,4 +26,4 @@ export interface SelectDropdownProps {
 /**
  * SelectDropdown is a component that displays a dropdown menu of links. Uses Popper.js for positioning.
  */
-export default function SelectDropdown({ buttonRef, listRef, openingDirection, maxHeight, children, grouped, }: PropsWithChildren<SelectDropdownProps>): JSX.Element;
+export default function SelectDropdown({ buttonRef, listRef, openingDirection, maxHeight, children, grouped, }: PropsWithChildren<SelectDropdownProps>): React.JSX.Element;

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,{as:t.Fragment,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/SideNavGroup.d.ts

@@ -31,7 +31,7 @@ export interface SideNavGroupPropsWithoutLabel<Component extends React.ElementTy
  * import { SideNavGroup } from @k8slens/lds
  * ```
  */
-declare function SideNavGroup<C extends keyof JSX.IntrinsicElements | React.ElementType = "nav">({ component, componentProps, id, className, children, ...props }: SideNavGroupPropsWithLabel<C> | SideNavGroupPropsWithoutLabel<C>): JSX.Element;
+declare function SideNavGroup<C extends keyof JSX.IntrinsicElements | React.ElementType = "nav">({ component, componentProps, id, className, children, ...props }: SideNavGroupPropsWithLabel<C> | SideNavGroupPropsWithoutLabel<C>): React.JSX.Element;
 declare namespace SideNavGroup {
     var displayName: string;
 }

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

@@ -27,7 +27,7 @@ export interface SideNavItemProps<Component extends React.ElementType | keyof JS
  * import { SideNavItem } from @k8slens/lds
  * ```
  */
-declare function SideNavItem<C extends keyof JSX.IntrinsicElements | React.ElementType = "a">({ component, componentProps, active, disabled, className, children, type, externalLink, ...props }: SideNavItemProps<C>): JSX.Element;
+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;
 declare namespace SideNavItem {
     var displayName: string;
 }

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

@@ -1,5 +1,15 @@
 import type { ChangeEvent, HTMLProps } from "react";
+import React from "react";
 export interface SwitchProps extends Omit<HTMLProps<HTMLInputElement>, "onChange"> {
     onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare function Switch({ className, children, disabled, onChange, ...props }: SwitchProps): JSX.Element;
+/**
+ * A toggle switch input with label support.
+ *
+ * Usage: `import { Switch } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Switch checked={enabled} onChange={setEnabled}>Enable feature</Switch>
+ * ```
+ */
+export declare function Switch({ className, children, disabled, onChange, ...props }: SwitchProps): React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactElement } from "react";
+import React, { type HTMLAttributes, type ReactElement } from "react";
 import { type Placement } from "@popperjs/core";
 export interface TooltipProps {
     /**
@@ -23,4 +23,13 @@ export interface SpanTooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>,
 export interface DivTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "aria-describedby">, TooltipProps {
     wrapper: "div";
 }
-export default function Tooltip({ id, wrapper: Wrapper, mutationsListenerElement: initialMutationsListenerElement, popupClassName, placement, alwaysVisible, text, children, ...props }: SpanTooltipProps | DivTooltipProps): JSX.Element;
+/**
+ * Shows contextual information on hover/focus. Wrap any element to add a tooltip.
+ *
+ * Usage: `import { Tooltip } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <Tooltip text="Helpful info"><span>Hover me</span></Tooltip>
+ * ```
+ */
+export default function Tooltip({ id, wrapper: Wrapper, mutationsListenerElement: initialMutationsListenerElement, popupClassName, placement, alwaysVisible, text, children, ...props }: SpanTooltipProps | DivTooltipProps): React.JSX.Element;

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

@@ -4,4 +4,4 @@ export declare const DefaultHeader: ({ licenseText, noLicenseText, onClick, disa
     noLicenseText?: string | undefined;
     onClick?: ((e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void) | undefined;
     disabled?: boolean | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -50,6 +50,12 @@ export interface CustomUserMenuProps extends BaseUserMenuProps {
 }
 export declare type UserMenuProps = DefaultUserMenuProps | CustomUserMenuProps;
 /**
- * UserMenu is a component that displays a user's information and a dropdown menu of links.
+ * Displays user info with dropdown menu for account actions. Uses default menu items if `items` prop is not provided.
+ *
+ * Usage: `import { UserMenu } from "@k8slens/lds"`
+ *
+ * ```tsx
+ * <UserMenu user={{ name: "John", username: "john" }} onLogoutClick={logout} />
+ * ```
  */
-export default function UserMenu({ user, header, footer, origin, className, onLogoutClick, loading, ...props }: UserMenuProps): JSX.Element;
+export default function UserMenu({ user, header, footer, origin, className, onLogoutClick, loading, ...props }: UserMenuProps): React.JSX.Element;

package/lib/cjs/UserMenu/UserMenu.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),n=require("@headlessui/react"),a=require("@k8slens/lds-icons"),o=require("../ProfileBlock/ProfileBlock.js"),u=require("./default-items.js"),l=require("./UserMenuDropdown.js"),i=require("./UserMenu.module.css.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(t),d=s(r),f=a.navigation.ArrowDownIcon,m=a.navigation.ArrowUpIcon;module.exports=function(r){var a=r.user,s=r.header,g=r.footer,p=r.origin,v=void 0===p?u.defaultOrigin:p,b=r.className,q=r.onLogoutClick,k=r.loading,_=e.__rest(r,["user","header","footer","origin","className","onLogoutClick","loading"]),E=t.useRef(null),M=_.buttonRef?_.buttonRef:E,N=t.useMemo((function(){return("items"in _?_.items:u.defaultItems).map((function(t){return{children:t.children.map((function(t){return"logout"===t.key?e.__assign(e.__assign({},t),{onClick:q}):t}))}}))}),[_,q]),h=t.useMemo((function(){return{avatar:a.avatar,avatarTitle:a.name,title:"@".concat(a.username),subtitle:a.name}}),[a]);return c.default.createElement(n.Menu,null,(function(e){var t,r=e.open;return c.default.createElement("div",{className:d.default(i.userMenu,b)},c.default.createElement(n.Menu.Button,{className:d.default(i.button,(t={},t[i.open]=r,t[i.disabled]=k,t)),ref:M,disabled:k},c.default.createElement(o,{item:h,loading:k,className:i.profileBlock}),r?c.default.createElement(m,{className:i.dropDownIcon}):c.default.createElement(f,{className:i.dropDownIcon})),c.default.createElement(l,{open:r,header:s,footer:g,origin:v,groups:N,buttonRef:M}))}))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),n=require("@headlessui/react"),a=require("@k8slens/lds-icons"),o=require("../ProfileBlock/ProfileBlock.js"),u=require("./default-items.js"),l=require("./UserMenuDropdown.js"),i=require("./UserMenu.module.css.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(t),d=s(r),f=a.navigation.ArrowDownIcon,m=a.navigation.ArrowUpIcon;module.exports=function(r){var a=r.user,s=r.header,g=r.footer,p=r.origin,v=void 0===p?u.defaultOrigin:p,b=r.className,q=r.onLogoutClick,k=r.loading,_=e.__rest(r,["user","header","footer","origin","className","onLogoutClick","loading"]),E=t.useRef(null),M=_.buttonRef?_.buttonRef:E,N=t.useMemo((function(){return("items"in _?_.items:u.defaultItems).map((function(t){return{children:t.children.map((function(t){return"logout"===t.key?e.__assign(e.__assign({},t),{onClick:q}):t}))}}))}),[_,q]),h=t.useMemo((function(){return{avatar:a.avatar,avatarTitle:a.name,title:"@".concat(a.username),subtitle:a.name}}),[a]);return c.default.createElement(n.Menu,null,(function(e){var t,r=e.open;return c.default.createElement("div",{className:d.default(i.userMenu,b)},c.default.createElement(n.MenuButton,{className:d.default(i.button,(t={},t[i.open]=r,t[i.disabled]=k,t)),ref:M,disabled:k},c.default.createElement(o,{item:h,loading:k,className:i.profileBlock}),r?c.default.createElement(m,{className:i.dropDownIcon}):c.default.createElement(f,{className:i.dropDownIcon})),c.default.createElement(l,{open:r,header:s,footer:g,origin:v,groups:N,buttonRef:M}))}))};

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

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from "react";
+import React, { ReactNode, RefObject } from "react";
 import { MenuItemGroup } from "./default-items";
 export interface UserMenuDropdownProps {
     /**
@@ -33,4 +33,4 @@ export interface UserMenuDropdownProps {
 /**
  * UserMenuDropdown is a component that displays a dropdown menu of links. Uses Popper.js for positioning.
  */
-export default function UserMenuDropdown({ header, footer, origin, className, groups, open, buttonRef, }: UserMenuDropdownProps): JSX.Element;
+export default function UserMenuDropdown({ header, footer, origin, className, groups, open, buttonRef, }: UserMenuDropdownProps): React.JSX.Element;

package/lib/cjs/UserMenu/UserMenuDropdown.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("@headlessui/react"),o=require("react-popper"),r=require("clsx"),i=require("../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js"),a=require("../helpers.js"),s=require("./UserMenuItem.js"),l=require("./UserMenuDropdown.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(t),p=u(r),d=a.convertRemToPixels(i.SpacingLg),m={name:"offset",options:{offset:function(e){var t=e.placement;return t.startsWith("top")||t.startsWith("bottom")?[0,-1]:[0,0]}}},f={name:"maxSize",enabled:!0,phase:"main",fn:function(t){var n=t.state;if(void 0!==d&&"undefined"!=typeof window&&"undefined"!=typeof document){var o=n.elements.reference.getBoundingClientRect(),r=document.documentElement,i=n.placement.endsWith("start")?Math.min(r.clientWidth,window.innerWidth)-o.left-d:o.right-d,a=n.placement.startsWith("bottom")?Math.min(r.clientHeight,window.innerHeight)-o.bottom-d:o.top-d;n.styles.popper=e.__assign(e.__assign({},n.styles.popper),{maxWidth:"".concat(i,"px"),maxHeight:"".concat(a,"px")})}}};module.exports=function(r){var a,u,d=r.header,v=r.footer,h=r.origin,g=r.className,y=r.groups,b=r.open,_=r.buttonRef,w=t.useRef(null),k=o.usePopper(null==_?void 0:_.current,null==w?void 0:w.current,{placement:"bottom-start",modifiers:[{name:"flip",options:{fallbackPlacements:["top-start","bottom-end","top-end"]}},{name:"preventOverflow",options:{boundary:"viewport"}},{name:"computeStyles",options:{adaptive:!0}},m,f]}),x=k.styles,q=k.attributes;return c.default.createElement(n.Transition,e.__assign({show:b,enter:"transition duration-[".concat(i.TransitionDurationDefault,"] ease-in-out"),enterFrom:"transform opacity-0",enterTo:"transform opacity-100",leave:"transition duration-[".concat(i.TransitionDurationDefault,"] ease-in-out"),leaveFrom:"transform opacity-100",leaveTo:"transform opacity-0",className:p.default(l.userMenuDropdown,g),ref:w,style:e.__assign(e.__assign({},x.popper),{minWidth:null===(u=null==_?void 0:_.current)||void 0===u?void 0:u.offsetWidth})},q.popper),c.default.createElement(n.Menu.Items,{className:p.default(l.content,(a={},a[l.open]=b,a))},d,y.map((function(e,t){var n,o=e.children;return c.default.createElement("div",{className:p.default(l.group,(n={},n[l.last]=t===y.length-1,n)),key:"group-".concat(t),role:"navigation"},o.map((function(e,t){return c.default.createElement(s,{key:"key"in e?e.key:"item-".concat(t),title:e.title,icon:e.icon,type:e.type,disabled:e.disabled,external:e.external,href:e.href,onClick:"onClick"in e?e.onClick:void 0,origin:h})})))})),v))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("@headlessui/react"),o=require("react-popper"),r=require("clsx"),i=require("../node_modules/@k8slens/lds-tokens/lib/web/tokens.base.js"),a=require("../helpers.js"),s=require("./UserMenuItem.js"),l=require("./UserMenuDropdown.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(t),p=u(r),d=a.convertRemToPixels(i.SpacingLg),m={name:"offset",options:{offset:function(e){var t=e.placement;return t.startsWith("top")||t.startsWith("bottom")?[0,-1]:[0,0]}}},f={name:"maxSize",enabled:!0,phase:"main",fn:function(t){var n=t.state;if(void 0!==d&&"undefined"!=typeof window&&"undefined"!=typeof document){var o=n.elements.reference.getBoundingClientRect(),r=document.documentElement,i=n.placement.endsWith("start")?Math.min(r.clientWidth,window.innerWidth)-o.left-d:o.right-d,a=n.placement.startsWith("bottom")?Math.min(r.clientHeight,window.innerHeight)-o.bottom-d:o.top-d;n.styles.popper=e.__assign(e.__assign({},n.styles.popper),{maxWidth:"".concat(i,"px"),maxHeight:"".concat(a,"px")})}}};module.exports=function(r){var a,u,d=r.header,v=r.footer,h=r.origin,g=r.className,y=r.groups,b=r.open,_=r.buttonRef,w=t.useRef(null),k=o.usePopper(null==_?void 0:_.current,null==w?void 0:w.current,{placement:"bottom-start",modifiers:[{name:"flip",options:{fallbackPlacements:["top-start","bottom-end","top-end"]}},{name:"preventOverflow",options:{boundary:"viewport"}},{name:"computeStyles",options:{adaptive:!0}},m,f]}),x=k.styles,q=k.attributes;return c.default.createElement(n.Transition,e.__assign({show:b,enter:"transition duration-[".concat(i.TransitionDurationDefault,"] ease-in-out"),enterFrom:"transform opacity-0",enterTo:"transform opacity-100",leave:"transition duration-[".concat(i.TransitionDurationDefault,"] ease-in-out"),leaveFrom:"transform opacity-100",leaveTo:"transform opacity-0",as:"div",className:p.default(l.userMenuDropdown,g),ref:w,style:e.__assign(e.__assign({},x.popper),{minWidth:null===(u=null==_?void 0:_.current)||void 0===u?void 0:u.offsetWidth})},q.popper),c.default.createElement(n.MenuItems,{className:p.default(l.content,(a={},a[l.open]=b,a))},d,y.map((function(e,t){var n,o=e.children;return c.default.createElement("div",{className:p.default(l.group,(n={},n[l.last]=t===y.length-1,n)),key:"group-".concat(t),role:"navigation"},o.map((function(e,t){return c.default.createElement(s,{key:"key"in e?e.key:"item-".concat(t),title:e.title,icon:e.icon,type:e.type,disabled:e.disabled,external:e.external,href:e.href,onClick:"onClick"in e?e.onClick:void 0,origin:h})})))})),v))};

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { MouseEvent } from "react";
 import { type Icon } from "@k8slens/lds-icons/lib/es/Icon/Icon";
 export declare type MenuItem = {
@@ -18,4 +19,4 @@ export interface UserMenuItemProps extends MenuItem {
      */
     className?: string;
 }
-export default function UserMenuItem({ type, title, icon: Icon, disabled, external, onClick, selected, href: path, origin, className: cls, }: UserMenuItemProps): JSX.Element;
+export default function UserMenuItem({ type, title, icon: Icon, disabled, external, onClick, selected, href: path, origin, className: cls, }: UserMenuItemProps): React.JSX.Element;

package/lib/cjs/UserMenu/UserMenuItem.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("@headlessui/react"),l=require("clsx"),a=require("./UserMenuItem.module.css.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=r(t),c=r(l),i=function(e,t){return new URL(e,t).pathname},o=function(e){var t=e.Icon,n=e.title;return u.default.createElement(u.default.Fragment,null,t?u.default.createElement(t,{className:a.icon,size:"sm"}):null,u.default.createElement("span",{className:a.title},n))};module.exports=function(l){var r=l.type,d=void 0===r?"default":r,s=l.title,f=l.icon,m=l.disabled,E=l.external,b=l.onClick,p=l.selected,v=l.href,w=l.origin,I=l.className,M=t.useMemo((function(){return E||!v?v:w?"".concat(w).concat((null==v?void 0:v.startsWith("/"))?v:"/".concat(v)):v}),[v,w,E]),h=t.useMemo((function(){return"boolean"==typeof p?p:!(!M||"undefined"==typeof window)&&i(window.location.href,"undefined"!=typeof window?window.location.origin:void 0)===i(M,M)}),[M,p]),N=t.useMemo((function(){var e;return c.default(a.userMenuItem,((e={})[a[d]]=d&&"default"!==d,e[a.disabled]=m,e[a.external]=E,e[a.selected]=h,e),I)}),[d,m,E,I,h]);return m||p||!M?m||p||!b?u.default.createElement(n.Menu.Item,{disabled:!0},u.default.createElement("span",{className:c.default(N,a.disabled)},u.default.createElement(o,{Icon:f,title:s}))):u.default.createElement(n.Menu.Item,null,u.default.createElement("button",{className:c.default(a.button,N),onClick:b},u.default.createElement(o,{Icon:f,title:s}))):u.default.createElement(n.Menu.Item,null,u.default.createElement("a",e.__assign({className:N,onClick:b,href:M},E?{target:"_blank"}:{},{rel:"noopener noreferrer"}),u.default.createElement(o,{Icon:f,title:s})))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),n=require("@headlessui/react"),l=require("clsx"),a=require("./UserMenuItem.module.css.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=r(t),c=r(l),i=function(e,t){return new URL(e,t).pathname},o=function(e){var t=e.Icon,n=e.title;return u.default.createElement(u.default.Fragment,null,t?u.default.createElement(t,{className:a.icon,size:"sm"}):null,u.default.createElement("span",{className:a.title},n))};module.exports=function(l){var r=l.type,d=void 0===r?"default":r,s=l.title,f=l.icon,m=l.disabled,E=l.external,b=l.onClick,p=l.selected,v=l.href,w=l.origin,I=l.className,M=t.useMemo((function(){return E||!v?v:w?"".concat(w).concat((null==v?void 0:v.startsWith("/"))?v:"/".concat(v)):v}),[v,w,E]),h=t.useMemo((function(){return"boolean"==typeof p?p:!(!M||"undefined"==typeof window)&&i(window.location.href,"undefined"!=typeof window?window.location.origin:void 0)===i(M,M)}),[M,p]),N=t.useMemo((function(){var e;return c.default(a.userMenuItem,((e={})[a[d]]=d&&"default"!==d,e[a.disabled]=m,e[a.external]=E,e[a.selected]=h,e),I)}),[d,m,E,I,h]);return m||p||!M?m||p||!b?u.default.createElement(n.MenuItem,{disabled:!0},u.default.createElement("span",{className:c.default(N,a.disabled)},u.default.createElement(o,{Icon:f,title:s}))):u.default.createElement(n.MenuItem,null,u.default.createElement("button",{className:c.default(a.button,N),onClick:b},u.default.createElement(o,{Icon:f,title:s}))):u.default.createElement(n.MenuItem,null,u.default.createElement("a",e.__assign({className:N,onClick:b,href:M},E?{target:"_blank"}:{},{rel:"noopener noreferrer"}),u.default.createElement(o,{Icon:f,title:s})))};