@dbcdk/react-components 0.0.103 → 0.0.104

package/dist/client.js

@@ -0,0 +1,84 @@
+'use client';
+export * from './components/stack/Stack';
+export * from './components/button/Button';
+export * from './components/button-select/ButtonSelect';
+export * from './components/nav-bar/NavBar';
+export * from './components/avatar/Avatar';
+export * from './components/popover/Popover';
+export * from './components/menu/Menu';
+export * from './components/icon/Icon';
+export * from './components/user-display/UserDisplay';
+export * from './components/tabs/Tabs';
+export * from './components/headline/Headline';
+export * from './components/headline/CollapsibleHeadline';
+export * from './components/page-layout/PageLayout';
+export * from './components/page-layout/components/footer/Footer';
+export * from './components/forms/input/Input';
+export * from './components/search-box/SearchBox';
+export * from './hooks/useTheme';
+export * from './components/chip/Chip';
+export * from './components/panel/Panel';
+export * from './components/card/Card';
+export * from './components/card-container/CardContainer';
+export * from './components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+export * from './components/skeleton-loader/SkeletonLoader';
+export * from './components/page/Page';
+export * from './components/breadcrumbs/Breadcrumbs';
+export * from './components/circle/Circle';
+export * from './components/forms/checkbox/Checkbox';
+export * from './components/table/Table';
+export * from './constants/chart-colors';
+export * from './constants/chart-colors.types';
+export * from './constants/severity.types';
+export * from './components/forms/text-area/Textarea';
+export * from './components/app-header/AppHeader';
+export * from './components/sidebar/Sidebar';
+export * from './utils/arrays/nested-filtering';
+export * from './components/forms/multi-select/MultiSelect';
+export * from './hooks/useViewportFill';
+export * from './utils/date/formatDate';
+export * from './components/filter-field/FilterField';
+export * from './components/forms/select/Select';
+export * from './components/split-button/SplitButton';
+export * from './components/segmented-progress-bar/SegmentedProgressBar';
+export * from './components/datetime-picker/DateTimePicker';
+export * from './components/overlay/modal/provider/ModalProvider';
+export * from './components/overlay/modal/Modal';
+export * from './components/toast/provider/ToastProvider';
+export * from './components/toast/Toast';
+export * from './components/attribute-chip/AttributeChip';
+export * from './components/split-pane/SplitPane';
+export * from './components/pagination/Pagination';
+export * from './components/meta-bar/MetaBar';
+export * from './components/code-block/CodeBlock';
+export * from './components/json-viewer/JsonViewer';
+export * from './hooks/useTimeDuration';
+export * from './hooks/useSorting';
+export * from './hooks/usePagination';
+export * from './hooks/useTableData';
+export * from './hooks/useTableSelection';
+export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
+export * from './components/forms/checkbox-group/CheckboxGroup';
+export * from './components/overlay/side-panel/SidePanel';
+export * from './components/overlay/side-panel/useSidePanel';
+export * from './components/overlay/fade-overlay/FadeOverlay';
+export * from './components/forms/input-container/InputContainer';
+export * from './components/hyperlink/Hyperlink';
+export * from './components/overlay/tooltip/Tooltip';
+export * from './components/overlay/tooltip/TooltipProvider';
+export * from './components/overlay/tooltip/useTooltipTrigger';
+export * from './components/forms/radio-buttons/RadioButton';
+export * from './components/forms/radio-buttons/RadioButtonGroup';
+export * from './components/interval-select/IntervalSelect';
+export * from './components/accordion/Accordion';
+export * from './components/state-page/StatePage';
+export * from './components/sticky-footer-layout/StickyFooterLayout';
+export * from './components/forms/typeahead/Typeahead';
+export * from './hooks/useDeviceSize';
+export * from './components/theme-button/ThemeButton';
+export * from './components/copy-button/CopyButton';
+export * from './components/divider/Divider';
+export * from './components/grid/Grid';
+export * from './components/alert/Alert';
+export * from './components/inline-status/InlineStatus';
+export * from './components/media-card/MediaCard';

package/dist/components/accordion/Accordion.cjs

@@ -0,0 +1,103 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Accordion.module.css');
+var AccordionRow = require('./components/AccordionRow');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function uniqSorted(nums) {
+  return Array.from(new Set(nums)).sort((a, b) => a - b);
+}
+function normalizeMultiple(indexes) {
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => Number.isFinite(n)));
+}
+function Accordion({
+  items,
+  mode = "single",
+  size = "md",
+  variant = "default",
+  defaultOpenIndex = null,
+  defaultOpenIndexes = [],
+  openIndex,
+  openIndexes,
+  onOpenIndexChange,
+  onOpenIndexesChange
+}) {
+  const uid = react.useId();
+  const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
+  const [hasMounted, setHasMounted] = react.useState(false);
+  react.useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  const [internalSingle, setInternalSingle] = react.useState(
+    mode === "single" ? defaultOpenIndex : null
+  );
+  const [internalMultiple, setInternalMultiple] = react.useState(() => {
+    if (mode !== "multiple") return [];
+    if (defaultOpenIndexes === "all") return items.map((_, i) => i);
+    return normalizeMultiple(defaultOpenIndexes);
+  });
+  const currentOpenIndexes = react.useMemo(() => {
+    if (mode === "single") {
+      const current = isControlled ? openIndex != null ? openIndex : null : internalSingle;
+      return current === null ? [] : [current];
+    }
+    return isControlled ? normalizeMultiple(openIndexes) : internalMultiple;
+  }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple]);
+  const openSet = react.useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
+  function commit(nextIndexes) {
+    if (mode === "single") {
+      const next = nextIndexes.length ? nextIndexes[0] : null;
+      if (isControlled) onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
+      else {
+        setInternalSingle(next);
+        onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
+      }
+      return;
+    }
+    const normalized = uniqSorted(nextIndexes);
+    if (isControlled) onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    else {
+      setInternalMultiple(normalized);
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    }
+  }
+  function toggle(index) {
+    const item = items[index];
+    if (!item || item.disabled) return;
+    const isOpen = openSet.has(index);
+    if (mode === "single") {
+      commit(isOpen ? [] : [index]);
+      return;
+    }
+    if (isOpen) commit(currentOpenIndexes.filter((i) => i !== index));
+    else commit([...currentOpenIndexes, index]);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: [styles__default.default.container, styles__default.default[size], variant !== "default" ? styles__default.default[variant] : ""].filter(Boolean).join(" "),
+      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        AccordionRow.AccordionRow,
+        {
+          uid,
+          index: i,
+          item,
+          isOpen: openSet.has(i),
+          onToggle: toggle,
+          shouldAnimate: hasMounted,
+          headlineSize: size === "sm" ? 4 : 3,
+          variant
+        },
+        i
+      ))
+    }
+  );
+}
+
+exports.Accordion = Accordion;

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, useEffect, useMemo } from 'react';
+import styles from './Accordion.module.css';
+import { AccordionRow } from './components/AccordionRow';
+
+function uniqSorted(nums) {
+  return Array.from(new Set(nums)).sort((a, b) => a - b);
+}
+function normalizeMultiple(indexes) {
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => Number.isFinite(n)));
+}
+function Accordion({
+  items,
+  mode = "single",
+  size = "md",
+  variant = "default",
+  defaultOpenIndex = null,
+  defaultOpenIndexes = [],
+  openIndex,
+  openIndexes,
+  onOpenIndexChange,
+  onOpenIndexesChange
+}) {
+  const uid = useId();
+  const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  const [internalSingle, setInternalSingle] = useState(
+    mode === "single" ? defaultOpenIndex : null
+  );
+  const [internalMultiple, setInternalMultiple] = useState(() => {
+    if (mode !== "multiple") return [];
+    if (defaultOpenIndexes === "all") return items.map((_, i) => i);
+    return normalizeMultiple(defaultOpenIndexes);
+  });
+  const currentOpenIndexes = useMemo(() => {
+    if (mode === "single") {
+      const current = isControlled ? openIndex != null ? openIndex : null : internalSingle;
+      return current === null ? [] : [current];
+    }
+    return isControlled ? normalizeMultiple(openIndexes) : internalMultiple;
+  }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple]);
+  const openSet = useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
+  function commit(nextIndexes) {
+    if (mode === "single") {
+      const next = nextIndexes.length ? nextIndexes[0] : null;
+      if (isControlled) onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
+      else {
+        setInternalSingle(next);
+        onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
+      }
+      return;
+    }
+    const normalized = uniqSorted(nextIndexes);
+    if (isControlled) onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    else {
+      setInternalMultiple(normalized);
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    }
+  }
+  function toggle(index) {
+    const item = items[index];
+    if (!item || item.disabled) return;
+    const isOpen = openSet.has(index);
+    if (mode === "single") {
+      commit(isOpen ? [] : [index]);
+      return;
+    }
+    if (isOpen) commit(currentOpenIndexes.filter((i) => i !== index));
+    else commit([...currentOpenIndexes, index]);
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [styles.container, styles[size], variant !== "default" ? styles[variant] : ""].filter(Boolean).join(" "),
+      children: items.map((item, i) => /* @__PURE__ */ jsx(
+        AccordionRow,
+        {
+          uid,
+          index: i,
+          item,
+          isOpen: openSet.has(i),
+          onToggle: toggle,
+          shouldAnimate: hasMounted,
+          headlineSize: size === "sm" ? 4 : 3,
+          variant
+        },
+        i
+      ))
+    }
+  );
+}
+
+export { Accordion };

package/dist/components/accordion/Accordion.module.css

@@ -0,0 +1,41 @@
+.container {
+  border-radius: var(--border-radius-default);
+  background-color: var(--color-bg-surface);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: var(--spacing-xs);
+}
+
+.outlined {
+  background-color: transparent;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--border-radius-md);
+  gap: 0;
+  --acc-trigger-bg: transparent;
+  --acc-content-px: var(--acc-trigger-px);
+  --acc-item-separator: 1px solid var(--color-border-subtle);
+}
+
+/* Size variables (consumed by AccordionRow) */
+.sm {
+  --acc-trigger-py: var(--spacing-xs);
+  --acc-trigger-px: var(--spacing-sm);
+  --acc-content-py: var(--spacing-sm);
+  --acc-font-size: var(--font-size-sm);
+}
+
+.md {
+  --acc-trigger-py: var(--spacing-sm);
+  --acc-trigger-px: var(--spacing-md);
+  --acc-content-py: var(--spacing-md);
+  --acc-font-size: var(--font-size-md);
+}
+
+.lg {
+  --acc-trigger-py: var(--spacing-md);
+  --acc-trigger-px: var(--spacing-md);
+  --acc-content-py: var(--spacing-md);
+  --acc-font-size: var(--font-size-md);
+}

package/dist/components/accordion/components/AccordionRow.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Headline = require('../../../components/headline/Headline');
+var styles = require('./AccordionRow.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function useCollapsibleHeight(isOpen, shouldAnimate) {
+  const innerRef = react.useRef(null);
+  const [height, setHeight] = react.useState("0px");
+  const prevIsOpenRef = react.useRef(isOpen);
+  react.useLayoutEffect(() => {
+    var _a, _b;
+    const el = innerRef.current;
+    if (!el) return;
+    const prevIsOpen = prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+    const isOpenChanged = prevIsOpen !== isOpen;
+    const prefersReduced = typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b.matches);
+    if (!shouldAnimate || prefersReduced || !isOpenChanged) {
+      setHeight(isOpen ? "auto" : "0px");
+      return;
+    }
+    if (isOpen) {
+      setHeight("0px");
+      requestAnimationFrame(() => {
+        setHeight(`${el.scrollHeight}px`);
+      });
+    } else {
+      setHeight(`${el.scrollHeight}px`);
+      requestAnimationFrame(() => {
+        setHeight("0px");
+      });
+    }
+  }, [isOpen, shouldAnimate]);
+  function onTransitionEnd(e) {
+    if (e.propertyName !== "height") return;
+    if (!innerRef.current) return;
+    if (isOpen) setHeight("auto");
+  }
+  return { innerRef, height, onTransitionEnd };
+}
+function AccordionRow({
+  uid,
+  index,
+  item,
+  isOpen,
+  onToggle,
+  shouldAnimate = true,
+  headlineSize = 4,
+  variant = "default"
+}) {
+  const isDisabled = !!item.disabled;
+  const buttonId = `${uid}-acc-btn-${index}`;
+  const panelId = `${uid}-acc-panel-${index}`;
+  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: `${styles__default.default.item} ${isOpen ? styles__default.default.open : ""} ${isDisabled ? styles__default.default.disabled : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            id: buttonId,
+            className: styles__default.default.trigger,
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
+            onClick: () => onToggle(index),
+            disabled: isDisabled,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.title, children: [
+                item.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: item.headerIcon }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Headline.Headline,
+                  {
+                    disableMargin: true,
+                    size: headlineSize,
+                    weight: variant === "outlined" ? 400 : 500,
+                    severity: item.severity,
+                    subheader: item.subheader,
+                    allowWrap: isOpen,
+                    children: item.header
+                  }
+                ),
+                item.headerAddition
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: panelId,
+            role: "region",
+            "aria-labelledby": buttonId,
+            className: `${styles__default.default.panel} ${shouldAnimate ? styles__default.default.animate : styles__default.default.noAnimate}`,
+            style: { height },
+            onTransitionEnd,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, className: styles__default.default.content, children: item.children })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.AccordionRow = AccordionRow;

package/dist/components/accordion/components/AccordionRow.js

@@ -0,0 +1,109 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronDown } from 'lucide-react';
+import { useRef, useState, useLayoutEffect } from 'react';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './AccordionRow.module.css';
+
+function useCollapsibleHeight(isOpen, shouldAnimate) {
+  const innerRef = useRef(null);
+  const [height, setHeight] = useState("0px");
+  const prevIsOpenRef = useRef(isOpen);
+  useLayoutEffect(() => {
+    var _a, _b;
+    const el = innerRef.current;
+    if (!el) return;
+    const prevIsOpen = prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+    const isOpenChanged = prevIsOpen !== isOpen;
+    const prefersReduced = typeof window !== "undefined" && ((_b = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)")) == null ? void 0 : _b.matches);
+    if (!shouldAnimate || prefersReduced || !isOpenChanged) {
+      setHeight(isOpen ? "auto" : "0px");
+      return;
+    }
+    if (isOpen) {
+      setHeight("0px");
+      requestAnimationFrame(() => {
+        setHeight(`${el.scrollHeight}px`);
+      });
+    } else {
+      setHeight(`${el.scrollHeight}px`);
+      requestAnimationFrame(() => {
+        setHeight("0px");
+      });
+    }
+  }, [isOpen, shouldAnimate]);
+  function onTransitionEnd(e) {
+    if (e.propertyName !== "height") return;
+    if (!innerRef.current) return;
+    if (isOpen) setHeight("auto");
+  }
+  return { innerRef, height, onTransitionEnd };
+}
+function AccordionRow({
+  uid,
+  index,
+  item,
+  isOpen,
+  onToggle,
+  shouldAnimate = true,
+  headlineSize = 4,
+  variant = "default"
+}) {
+  const isDisabled = !!item.disabled;
+  const buttonId = `${uid}-acc-btn-${index}`;
+  const panelId = `${uid}-acc-panel-${index}`;
+  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `${styles.item} ${isOpen ? styles.open : ""} ${isDisabled ? styles.disabled : ""}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: buttonId,
+            className: styles.trigger,
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
+            onClick: () => onToggle(index),
+            disabled: isDisabled,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: styles.title, children: [
+                item.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: item.headerIcon }) : null,
+                /* @__PURE__ */ jsx(
+                  Headline,
+                  {
+                    disableMargin: true,
+                    size: headlineSize,
+                    weight: variant === "outlined" ? 400 : 500,
+                    severity: item.severity,
+                    subheader: item.subheader,
+                    allowWrap: isOpen,
+                    children: item.header
+                  }
+                ),
+                item.headerAddition
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: styles.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            role: "region",
+            "aria-labelledby": buttonId,
+            className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`,
+            style: { height },
+            onTransitionEnd,
+            children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: styles.content, children: item.children })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { AccordionRow };

package/dist/components/accordion/components/AccordionRow.module.css

@@ -0,0 +1,99 @@
+.trigger {
+  all: unset;
+  box-sizing: border-box;
+
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+
+  cursor: pointer;
+  user-select: none;
+
+  font-size: var(--acc-font-size);
+  padding: var(--acc-trigger-py) var(--acc-trigger-px);
+  background: var(--acc-trigger-bg, var(--color-bg-contextual-subtle));
+
+  min-width: 0;
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.disabled .trigger {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+.icon svg {
+  height: var(--icon-size-sm);
+  width: var(--icon-size-sm);
+}
+
+.chevron {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  flex: 0 0 auto;
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.chevron svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.open .chevron {
+  transform: rotate(180deg);
+}
+
+.panel {
+  overflow: hidden;
+  height: 0px;
+}
+
+/* Default: animate only when class is present */
+.animate {
+  transition: height var(--transition-slow) var(--ease-decelerate);
+}
+
+/* No animation (initial render default-open) */
+.noAnimate {
+  transition: none;
+}
+
+.content {
+  padding: var(--acc-content-py) var(--acc-content-px, 0);
+}
+
+.item {
+  border-bottom: var(--acc-item-separator, none);
+}
+
+.item:last-child {
+  border-bottom: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel {
+    transition: none;
+  }
+}