@dbcdk/react-components 0.0.207 → 0.0.208

package/dist/client.cjs

@@ -8,6 +8,7 @@ var NavBar = require('./components/nav-bar/NavBar');
 var Avatar = require('./components/avatar/Avatar');
 var Popover = require('./components/popover/Popover');
 var Menu = require('./components/menu/Menu');
+var Listbox = require('./components/listbox/Listbox');
 var Icon = require('./components/icon/Icon');
 var UserDisplay = require('./components/user-display/UserDisplay');
 var Tabs = require('./components/tabs/Tabs');
@@ -24,6 +25,7 @@ var useTheme = require('./hooks/useTheme');
 var usePersistentState = require('./hooks/usePersistentState');
 var useTreeViewSettings = require('./hooks/useTreeViewSettings');
 var Chip = require('./components/chip/Chip');
+var StatusText = require('./components/status-text/StatusText');
 var Panel = require('./components/panel/Panel');
 var Card = require('./components/card/Card');
 var PrintFriendlyCard = require('./components/print-friendly/PrintFriendlyCard');
@@ -136,6 +138,10 @@ Object.defineProperty(exports, "Menu", {
   enumerable: true,
   get: function () { return Menu.Menu; }
 });
+Object.defineProperty(exports, "Listbox", {
+  enumerable: true,
+  get: function () { return Listbox.Listbox; }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function () { return Icon.Icon; }
@@ -208,6 +214,10 @@ Object.defineProperty(exports, "Chip", {
   enumerable: true,
   get: function () { return Chip.Chip; }
 });
+Object.defineProperty(exports, "StatusText", {
+  enumerable: true,
+  get: function () { return StatusText.StatusText; }
+});
 Object.defineProperty(exports, "Panel", {
   enumerable: true,
   get: function () { return Panel.Panel; }

package/dist/client.d.ts

@@ -11,6 +11,8 @@ export { Popover } from './components/popover/Popover';
 export type { PopoverProps, PopoverHandle } from './components/popover/Popover';
 export { Menu } from './components/menu/Menu';
 export type { MenuProps, MenuLabelProps, MenuSeparatorProps, MenuHeaderProps, MenuDescriptionProps, MenuItemProps, MenuCheckItemProps, MenuRadioItemProps, MenuSwitchItemProps, } from './components/menu/Menu';
+export { Listbox } from './components/listbox/Listbox';
+export type { ListboxOption, ListboxProps } from './components/listbox/Listbox';
 export { Icon, SeverityIcon } from './components/icon/Icon';
 export { UserDisplay } from './components/user-display/UserDisplay';
 export { Tabs } from './components/tabs/Tabs';
@@ -40,6 +42,8 @@ export type { PersistentStateStorage, PersistentStateHydration, UsePersistentSta
 export { useTreeViewSettings, localStorageTreeViewSettingsStorage, } from './hooks/useTreeViewSettings';
 export type { TreeViewSettingsStorage, UseTreeViewSettingsOptions, UseTreeViewSettingsResult, } from './hooks/useTreeViewSettings';
 export { Chip } from './components/chip/Chip';
+export { StatusText } from './components/status-text/StatusText';
+export type { StatusTextProps } from './components/status-text/StatusText';
 export { Panel } from './components/panel/Panel';
 export { Card } from './components/card/Card';
 export type { CardProps } from './components/card/Card';

package/dist/client.js

@@ -6,6 +6,7 @@ export { NavBar } from './components/nav-bar/NavBar';
 export { Avatar } from './components/avatar/Avatar';
 export { Popover } from './components/popover/Popover';
 export { Menu } from './components/menu/Menu';
+export { Listbox } from './components/listbox/Listbox';
 export { Icon, SeverityIcon } from './components/icon/Icon';
 export { UserDisplay } from './components/user-display/UserDisplay';
 export { Tabs } from './components/tabs/Tabs';
@@ -22,6 +23,7 @@ export { useTheme } from './hooks/useTheme';
 export { usePersistentState } from './hooks/usePersistentState';
 export { localStorageTreeViewSettingsStorage, useTreeViewSettings } from './hooks/useTreeViewSettings';
 export { Chip } from './components/chip/Chip';
+export { StatusText } from './components/status-text/StatusText';
 export { Panel } from './components/panel/Panel';
 export { Card } from './components/card/Card';
 export { PrintFriendlyCard } from './components/print-friendly/PrintFriendlyCard';

package/dist/components/listbox/Listbox.cjs

@@ -0,0 +1,153 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useRovingFocus = require('../../hooks/useRovingFocus');
+var styles = require('./Listbox.module.css');
+var menuStyles = require('../menu/Menu.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+var menuStyles__default = /*#__PURE__*/_interopDefault(menuStyles);
+
+function Listbox({
+  options,
+  selectedValues,
+  selectionMode = "single",
+  autoFocusValue,
+  onOptionSelect,
+  onActiveChange,
+  renderAction,
+  actionLabel,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rootProps
+}) {
+  const rootRef = react.useRef(null);
+  const optionRefs = react.useRef(/* @__PURE__ */ new Map());
+  const [activeValue, setActiveValue] = react.useState(() => {
+    var _a, _b;
+    const activeOption = (_b = (_a = options.find((option) => option.value === autoFocusValue && !option.disabled)) != null ? _a : options.find((option) => selectedValues.includes(option.value) && !option.disabled)) != null ? _b : options.find((option) => !option.disabled);
+    return activeOption == null ? void 0 : activeOption.value;
+  });
+  react.useEffect(() => {
+    var _a;
+    if (autoFocusValue !== void 0) (_a = optionRefs.current.get(autoFocusValue)) == null ? void 0 : _a.focus();
+  }, [autoFocusValue]);
+  const handleNavigate = react.useCallback(
+    (item) => {
+      var _a;
+      const value = (_a = options.find(
+        (option) => String(option.value) === item.dataset.listboxValue
+      )) == null ? void 0 : _a.value;
+      if (value === void 0) return;
+      setActiveValue(value);
+      onActiveChange == null ? void 0 : onActiveChange(value);
+    },
+    [onActiveChange, options]
+  );
+  const handleKeyDown = useRovingFocus.useRovingFocus({
+    containerRef: rootRef,
+    itemSelector: '[role="option"]:not([aria-disabled="true"])',
+    loop: true,
+    resolveCurrentItem: (focused, items) => {
+      var _a;
+      const value = (_a = focused.closest("[data-listbox-value]")) == null ? void 0 : _a.dataset.listboxValue;
+      return items.find((item) => item.dataset.listboxValue === value);
+    },
+    onNavigate: handleNavigate
+  });
+  const rowCount = options.length;
+  const rowStyle = rowCount ? `repeat(${rowCount}, auto)` : "none";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rootProps,
+      ref: rootRef,
+      className: [styles__default.default.root, className].filter(Boolean).join(" "),
+      style: { ...style, gridTemplateRows: rowStyle },
+      onKeyDown: (event) => {
+        var _a;
+        handleKeyDown(event);
+        (_a = rootProps.onKeyDown) == null ? void 0 : _a.call(rootProps, event);
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.options,
+            role: "listbox",
+            "aria-label": ariaLabel,
+            "aria-multiselectable": selectionMode === "multiple" || void 0,
+            children: options.map((option) => {
+              const isSelected = selectedValues.includes(option.value);
+              const isActive = activeValue === option.value;
+              const value = String(option.value);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  ref: (element) => {
+                    if (element) optionRefs.current.set(option.value, element);
+                    else optionRefs.current.delete(option.value);
+                  },
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": option.disabled || void 0,
+                  tabIndex: !option.disabled && isActive ? 0 : -1,
+                  "data-listbox-value": value,
+                  className: [
+                    menuStyles__default.default.interactive,
+                    menuStyles__default.default.item,
+                    isSelected ? menuStyles__default.default.selected : "",
+                    isActive ? menuStyles__default.default.active : "",
+                    styles__default.default.option,
+                    option.status === "success" ? styles__default.default.optionSuccess : "",
+                    option.status === "info" ? styles__default.default.optionInfo : "",
+                    option.className
+                  ].filter(Boolean).join(" "),
+                  disabled: option.disabled,
+                  onFocus: () => setActiveValue(option.value),
+                  onClick: () => {
+                    setActiveValue(option.value);
+                    onOptionSelect(option.value);
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.optionContent, children: [
+                    option.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "aria-hidden": "true", children: option.icon }) : null,
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.text, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: option.label }),
+                      option.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.description, children: option.description }) : null
+                    ] })
+                  ] })
+                },
+                value
+              );
+            })
+          }
+        ),
+        renderAction ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.actions,
+            role: "group",
+            "aria-label": actionLabel != null ? actionLabel : `${ariaLabel} actions`,
+            children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: styles__default.default.actionRow,
+                "data-listbox-value": String(option.value),
+                children: renderAction(option, selectedValues.includes(option.value))
+              },
+              String(option.value)
+            ))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+exports.Listbox = Listbox;

package/dist/components/listbox/Listbox.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ListboxOption<T extends string | number = string> = {
+    value: T;
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    status?: 'info' | 'success';
+    disabled?: boolean;
+};
+export type ListboxProps<T extends string | number = string> = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect' | 'aria-label'> & {
+    'aria-label': string;
+    actionLabel?: string;
+    options: readonly ListboxOption<T>[];
+    selectedValues: readonly T[];
+    selectionMode?: 'single' | 'multiple';
+    autoFocusValue?: T;
+    onOptionSelect: (value: T) => void;
+    onActiveChange?: (value: T) => void;
+    renderAction?: (option: ListboxOption<T>, selected: boolean) => ReactNode;
+};
+export declare function Listbox<T extends string | number = string>({ options, selectedValues, selectionMode, autoFocusValue, onOptionSelect, onActiveChange, renderAction, actionLabel, className, style, 'aria-label': ariaLabel, ...rootProps }: Readonly<ListboxProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/listbox/Listbox.js

@@ -0,0 +1,146 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRovingFocus } from '../../hooks/useRovingFocus';
+import styles from './Listbox.module.css';
+import menuStyles from '../menu/Menu.module.css';
+
+function Listbox({
+  options,
+  selectedValues,
+  selectionMode = "single",
+  autoFocusValue,
+  onOptionSelect,
+  onActiveChange,
+  renderAction,
+  actionLabel,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rootProps
+}) {
+  const rootRef = useRef(null);
+  const optionRefs = useRef(/* @__PURE__ */ new Map());
+  const [activeValue, setActiveValue] = useState(() => {
+    var _a, _b;
+    const activeOption = (_b = (_a = options.find((option) => option.value === autoFocusValue && !option.disabled)) != null ? _a : options.find((option) => selectedValues.includes(option.value) && !option.disabled)) != null ? _b : options.find((option) => !option.disabled);
+    return activeOption == null ? void 0 : activeOption.value;
+  });
+  useEffect(() => {
+    var _a;
+    if (autoFocusValue !== void 0) (_a = optionRefs.current.get(autoFocusValue)) == null ? void 0 : _a.focus();
+  }, [autoFocusValue]);
+  const handleNavigate = useCallback(
+    (item) => {
+      var _a;
+      const value = (_a = options.find(
+        (option) => String(option.value) === item.dataset.listboxValue
+      )) == null ? void 0 : _a.value;
+      if (value === void 0) return;
+      setActiveValue(value);
+      onActiveChange == null ? void 0 : onActiveChange(value);
+    },
+    [onActiveChange, options]
+  );
+  const handleKeyDown = useRovingFocus({
+    containerRef: rootRef,
+    itemSelector: '[role="option"]:not([aria-disabled="true"])',
+    loop: true,
+    resolveCurrentItem: (focused, items) => {
+      var _a;
+      const value = (_a = focused.closest("[data-listbox-value]")) == null ? void 0 : _a.dataset.listboxValue;
+      return items.find((item) => item.dataset.listboxValue === value);
+    },
+    onNavigate: handleNavigate
+  });
+  const rowCount = options.length;
+  const rowStyle = rowCount ? `repeat(${rowCount}, auto)` : "none";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rootProps,
+      ref: rootRef,
+      className: [styles.root, className].filter(Boolean).join(" "),
+      style: { ...style, gridTemplateRows: rowStyle },
+      onKeyDown: (event) => {
+        var _a;
+        handleKeyDown(event);
+        (_a = rootProps.onKeyDown) == null ? void 0 : _a.call(rootProps, event);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.options,
+            role: "listbox",
+            "aria-label": ariaLabel,
+            "aria-multiselectable": selectionMode === "multiple" || void 0,
+            children: options.map((option) => {
+              const isSelected = selectedValues.includes(option.value);
+              const isActive = activeValue === option.value;
+              const value = String(option.value);
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: (element) => {
+                    if (element) optionRefs.current.set(option.value, element);
+                    else optionRefs.current.delete(option.value);
+                  },
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": option.disabled || void 0,
+                  tabIndex: !option.disabled && isActive ? 0 : -1,
+                  "data-listbox-value": value,
+                  className: [
+                    menuStyles.interactive,
+                    menuStyles.item,
+                    isSelected ? menuStyles.selected : "",
+                    isActive ? menuStyles.active : "",
+                    styles.option,
+                    option.status === "success" ? styles.optionSuccess : "",
+                    option.status === "info" ? styles.optionInfo : "",
+                    option.className
+                  ].filter(Boolean).join(" "),
+                  disabled: option.disabled,
+                  onFocus: () => setActiveValue(option.value),
+                  onClick: () => {
+                    setActiveValue(option.value);
+                    onOptionSelect(option.value);
+                  },
+                  children: /* @__PURE__ */ jsxs("span", { className: styles.optionContent, children: [
+                    option.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: option.icon }) : null,
+                    /* @__PURE__ */ jsxs("span", { className: styles.text, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles.label, children: option.label }),
+                      option.description ? /* @__PURE__ */ jsx("span", { className: styles.description, children: option.description }) : null
+                    ] })
+                  ] })
+                },
+                value
+              );
+            })
+          }
+        ),
+        renderAction ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.actions,
+            role: "group",
+            "aria-label": actionLabel != null ? actionLabel : `${ariaLabel} actions`,
+            children: options.map((option) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles.actionRow,
+                "data-listbox-value": String(option.value),
+                children: renderAction(option, selectedValues.includes(option.value))
+              },
+              String(option.value)
+            ))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { Listbox };

package/dist/components/listbox/Listbox.module.css

@@ -0,0 +1,97 @@
+.root {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: var(--spacing-xxs);
+}
+
+.options,
+.actions {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: 1 / -1;
+}
+
+.options {
+  grid-column: 1;
+  min-width: 0;
+}
+
+.actions {
+  grid-column: 2;
+}
+
+.option {
+  align-items: center;
+  min-width: 0;
+}
+
+.optionContent {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  width: 100%;
+  min-width: 0;
+}
+
+.icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-fg-muted);
+}
+
+.icon svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  margin: 0;
+}
+
+.text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.label,
+.description {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.description {
+  color: var(--color-fg-muted);
+  font-size: var(--font-size-sm);
+}
+
+.option.optionSuccess[aria-selected='true'],
+.option.optionSuccess.active {
+  background: var(--color-status-success-bg);
+  color: var(--color-status-success-fg);
+  box-shadow: inset 0 0 0 1px var(--color-status-success-border);
+}
+
+.option.optionSuccess .icon,
+.option.optionSuccess .description {
+  color: var(--color-status-success-fg);
+}
+
+.option.optionInfo[aria-selected='true'],
+.option.optionInfo.active {
+  background: var(--color-status-info-bg);
+  color: var(--color-status-info-fg);
+  box-shadow: inset 0 0 0 1px var(--color-status-info-border);
+}
+
+.option.optionInfo .icon,
+.option.optionInfo .description {
+  color: var(--color-status-info-fg);
+}
+
+.actionRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline-start: var(--spacing-xxs);
+}

package/dist/components/menu/Menu.cjs

@@ -3,6 +3,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var useRovingFocus = require('../../hooks/useRovingFocus');
 var styles = require('./Menu.module.css');
 var Checkbox = require('../forms/checkbox/Checkbox');
 var RadioButton = require('../forms/radio-buttons/RadioButton');
@@ -31,34 +32,16 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-const INTERACTIVE_SELECTOR = 'a[href]:not([aria-disabled="true"]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
-function getMenuItems(el) {
-  return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
-}
 const MenuBase = React__namespace.forwardRef(
   ({ children, className, itemRole = "menuitem", gap, onKeyDown, ...props }, ref) => {
     const internalRef = React__namespace.useRef(null);
+    const handleRovingFocus = useRovingFocus.useRovingFocus({
+      containerRef: internalRef,
+      itemSelector: 'a[href]:not([aria-disabled="true"]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])',
+      loop: true
+    });
     const handleKeyDown = (e) => {
-      const ul = internalRef.current;
-      if (!ul) return;
-      const items = getMenuItems(ul);
-      if (items.length === 0) return;
-      const focused = document.activeElement;
-      const currentIndex = items.indexOf(focused);
-      let nextIndex = null;
-      if (e.key === "ArrowDown") {
-        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-      } else if (e.key === "ArrowUp") {
-        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-      } else if (e.key === "Home") {
-        nextIndex = 0;
-      } else if (e.key === "End") {
-        nextIndex = items.length - 1;
-      }
-      if (nextIndex !== null) {
-        e.preventDefault();
-        items[nextIndex].focus();
-      }
+      handleRovingFocus(e);
       onKeyDown == null ? void 0 : onKeyDown(e);
     };
     return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/menu/Menu.js

@@ -1,39 +1,22 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
+import { useRovingFocus } from '../../hooks/useRovingFocus';
 import styles from './Menu.module.css';
 import { Checkbox } from '../forms/checkbox/Checkbox';
 import { RadioButton } from '../forms/radio-buttons/RadioButton';
 import { Switch } from '../forms/switch/Switch';
 
-const INTERACTIVE_SELECTOR = 'a[href]:not([aria-disabled="true"]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
-function getMenuItems(el) {
-  return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
-}
 const MenuBase = React.forwardRef(
   ({ children, className, itemRole = "menuitem", gap, onKeyDown, ...props }, ref) => {
     const internalRef = React.useRef(null);
+    const handleRovingFocus = useRovingFocus({
+      containerRef: internalRef,
+      itemSelector: 'a[href]:not([aria-disabled="true"]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])',
+      loop: true
+    });
     const handleKeyDown = (e) => {
-      const ul = internalRef.current;
-      if (!ul) return;
-      const items = getMenuItems(ul);
-      if (items.length === 0) return;
-      const focused = document.activeElement;
-      const currentIndex = items.indexOf(focused);
-      let nextIndex = null;
-      if (e.key === "ArrowDown") {
-        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-      } else if (e.key === "ArrowUp") {
-        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-      } else if (e.key === "Home") {
-        nextIndex = 0;
-      } else if (e.key === "End") {
-        nextIndex = items.length - 1;
-      }
-      if (nextIndex !== null) {
-        e.preventDefault();
-        items[nextIndex].focus();
-      }
+      handleRovingFocus(e);
       onKeyDown == null ? void 0 : onKeyDown(e);
     };
     return /* @__PURE__ */ jsx(

package/dist/components/status-text/StatusText.cjs

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./StatusText.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function StatusText({
+  children,
+  severity = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...props,
+      className: [styles__default.default.statusText, styles__default.default[severity], className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+
+exports.StatusText = StatusText;

package/dist/components/status-text/StatusText.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface StatusTextProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    severity?: Severity;
+}
+export declare function StatusText({ children, severity, className, ...props }: Readonly<StatusTextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/status-text/StatusText.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import styles from './StatusText.module.css';
+
+function StatusText({
+  children,
+  severity = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: [styles.statusText, styles[severity], className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+
+export { StatusText };

package/dist/components/status-text/StatusText.module.css

@@ -0,0 +1,41 @@
+.statusText {
+  background: var(--status-text-bg);
+  color: var(--status-text-fg);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.neutral {
+  --status-text-bg: var(--color-bg-surface-subtle);
+  --status-text-fg: var(--color-fg-default);
+}
+
+.brand {
+  --status-text-bg: color-mix(in srgb, var(--color-brand) 12%, var(--color-bg-surface));
+  --status-text-fg: var(--color-brand);
+}
+
+.accent {
+  --status-text-bg: var(--color-accent-bg-soft);
+  --status-text-fg: var(--color-accent-fg-soft);
+}
+
+.success {
+  --status-text-bg: var(--color-status-success-bg);
+  --status-text-fg: var(--color-status-success-fg);
+}
+
+.error {
+  --status-text-bg: var(--color-status-error-bg);
+  --status-text-fg: var(--color-status-error-fg);
+}
+
+.info {
+  --status-text-bg: var(--color-status-info-bg);
+  --status-text-fg: var(--color-status-info-fg);
+}
+
+.warning {
+  --status-text-bg: var(--color-status-warning-bg);
+  --status-text-fg: var(--color-status-warning-fg);
+}

package/dist/hooks/useRovingFocus.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var react = require('react');
+
+function useRovingFocus({
+  containerRef,
+  itemSelector,
+  loop = false,
+  resolveCurrentItem,
+  onNavigate
+}) {
+  return react.useCallback(
+    (event) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const items = Array.from(container.querySelectorAll(itemSelector));
+      if (items.length === 0) return;
+      const focused = document.activeElement;
+      const currentItem = items.includes(focused) ? focused : resolveCurrentItem == null ? void 0 : resolveCurrentItem(focused, items);
+      const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+      let nextIndex = null;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex < 0 ? 0 : currentIndex + 1;
+        if (loop && nextIndex >= items.length) nextIndex = 0;
+        else if (nextIndex >= items.length) nextIndex = items.length - 1;
+      } else if (event.key === "ArrowUp") {
+        nextIndex = currentIndex < 0 ? items.length - 1 : currentIndex - 1;
+        if (loop && nextIndex < 0) nextIndex = items.length - 1;
+        else if (nextIndex < 0) nextIndex = 0;
+      } else if (event.key === "Home") {
+        nextIndex = 0;
+      } else if (event.key === "End") {
+        nextIndex = items.length - 1;
+      }
+      if (nextIndex === null) return;
+      event.preventDefault();
+      const nextItem = items[nextIndex];
+      nextItem.focus();
+      onNavigate == null ? void 0 : onNavigate(nextItem);
+    },
+    [containerRef, itemSelector, loop, onNavigate, resolveCurrentItem]
+  );
+}
+
+exports.useRovingFocus = useRovingFocus;

package/dist/hooks/useRovingFocus.d.ts

@@ -0,0 +1,10 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+type UseRovingFocusOptions<T extends HTMLElement> = {
+    containerRef: RefObject<T | null>;
+    itemSelector: string;
+    loop?: boolean;
+    resolveCurrentItem?: (focused: HTMLElement, items: HTMLElement[]) => HTMLElement | undefined;
+    onNavigate?: (item: HTMLElement) => void;
+};
+export declare function useRovingFocus<T extends HTMLElement>({ containerRef, itemSelector, loop, resolveCurrentItem, onNavigate, }: UseRovingFocusOptions<T>): (event: KeyboardEvent) => void;
+export {};

package/dist/hooks/useRovingFocus.js

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+
+function useRovingFocus({
+  containerRef,
+  itemSelector,
+  loop = false,
+  resolveCurrentItem,
+  onNavigate
+}) {
+  return useCallback(
+    (event) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const items = Array.from(container.querySelectorAll(itemSelector));
+      if (items.length === 0) return;
+      const focused = document.activeElement;
+      const currentItem = items.includes(focused) ? focused : resolveCurrentItem == null ? void 0 : resolveCurrentItem(focused, items);
+      const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+      let nextIndex = null;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex < 0 ? 0 : currentIndex + 1;
+        if (loop && nextIndex >= items.length) nextIndex = 0;
+        else if (nextIndex >= items.length) nextIndex = items.length - 1;
+      } else if (event.key === "ArrowUp") {
+        nextIndex = currentIndex < 0 ? items.length - 1 : currentIndex - 1;
+        if (loop && nextIndex < 0) nextIndex = items.length - 1;
+        else if (nextIndex < 0) nextIndex = 0;
+      } else if (event.key === "Home") {
+        nextIndex = 0;
+      } else if (event.key === "End") {
+        nextIndex = items.length - 1;
+      }
+      if (nextIndex === null) return;
+      event.preventDefault();
+      const nextItem = items[nextIndex];
+      nextItem.focus();
+      onNavigate == null ? void 0 : onNavigate(nextItem);
+    },
+    [containerRef, itemSelector, loop, onNavigate, resolveCurrentItem]
+  );
+}
+
+export { useRovingFocus };

package/dist/index.css

@@ -42,6 +42,7 @@
 @import './components/json-viewer/JsonViewer.module.css';
 @import './components/lightbox/Lightbox.module.css';
 @import './components/line-viewer/LineViewer.module.css';
+@import './components/listbox/Listbox.module.css';
 @import './components/media-card/MediaCard.module.css';
 @import './components/menu/Menu.module.css';
 @import './components/meta-bar/MetaBar.module.css';
@@ -71,6 +72,7 @@
 @import './components/split-pane/SplitPane.module.css';
 @import './components/stack/Stack.module.css';
 @import './components/state-page/StatePage.module.css';
+@import './components/status-text/StatusText.module.css';
 @import './components/table/Table.module.css';
 @import './components/table/components/column-resizer/ColumnResizer.module.css';
 @import './components/table/components/empty-state/EmptyState.module.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.207",
+  "version": "0.0.208",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",