@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/client.d.ts

@@ -0,0 +1,89 @@
+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/environment-banner/EnvironmentBanner';
+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 './hooks/usePersistentState';
+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/forms/switch/Switch';
+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';
+export * from './components/lightbox/Lightbox';
+export * from './components/forms/file-upload/FileUpload';
+export * from './components/highlighted-text/HighlightedText';

package/dist/client.js

@@ -0,0 +1,90 @@
+'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/environment-banner/EnvironmentBanner';
+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 './hooks/usePersistentState';
+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/forms/switch/Switch';
+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';
+export * from './components/lightbox/Lightbox';
+export * from './components/forms/file-upload/FileUpload';
+export * from './components/highlighted-text/HighlightedText';

package/dist/components/accordion/Accordion.cjs

@@ -0,0 +1,127 @@
+'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, itemCount) {
+  if (indexes === "all") {
+    return Array.from({ length: itemCount }, (_, i) => i);
+  }
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => Number.isInteger(n) && n >= 0 && n < itemCount));
+}
+function Accordion({
+  items,
+  mode = "single",
+  size = "md",
+  variant = "default",
+  renderMode = "lazy",
+  defaultOpenIndex = null,
+  defaultOpenIndexes = [],
+  openIndex,
+  openIndexes,
+  onOpenIndexChange,
+  onOpenIndexesChange,
+  className,
+  ...rest
+}) {
+  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(() => {
+    if (mode !== "single") return null;
+    if (defaultOpenIndex !== null && Number.isInteger(defaultOpenIndex) && defaultOpenIndex >= 0 && defaultOpenIndex < items.length) {
+      return defaultOpenIndex;
+    }
+    return null;
+  });
+  const [internalMultiple, setInternalMultiple] = react.useState(() => {
+    if (mode !== "multiple") return [];
+    return normalizeMultiple(defaultOpenIndexes, items.length);
+  });
+  const currentOpenIndexes = react.useMemo(() => {
+    if (mode === "single") {
+      const current = isControlled ? openIndex != null ? openIndex : null : internalSingle;
+      return current !== null && Number.isInteger(current) && current >= 0 && current < items.length ? [current] : [];
+    }
+    return isControlled ? normalizeMultiple(openIndexes, items.length) : normalizeMultiple(internalMultiple, items.length);
+  }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple, items.length]);
+  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 = normalizeMultiple(nextIndexes, items.length);
+    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",
+    {
+      ...rest,
+      className: [
+        styles__default.default.container,
+        styles__default.default[size],
+        variant !== "default" ? styles__default.default[variant] : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: items.map((item, i) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          AccordionRow.AccordionRow,
+          {
+            uid,
+            index: i,
+            item,
+            isOpen: openSet.has(i),
+            onToggle: toggle,
+            shouldAnimate: hasMounted,
+            headlineSize: size === "sm" ? 4 : 3,
+            variant,
+            renderMode
+          },
+          (_a = item.id) != null ? _a : i
+        );
+      })
+    }
+  );
+}
+
+exports.Accordion = Accordion;

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface AccordionItem {
+    id?: string;
+    header: ReactNode;
+    subheader?: ReactNode;
+    headerAddition?: ReactNode;
+    headerActions?: ReactNode;
+    headerIcon?: ReactNode;
+    severity?: Severity;
+    children: ReactNode;
+    disabled?: boolean;
+}
+type Size = 'sm' | 'md' | 'lg';
+type Mode = 'single' | 'multiple';
+type Variant = 'default' | 'outlined';
+type OpenIndexes = number[] | 'all';
+type RenderMode = 'lazy' | 'eager';
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: AccordionItem[];
+    mode?: Mode;
+    size?: Size;
+    variant?: Variant;
+    renderMode?: RenderMode;
+    /** Uncontrolled defaults */
+    defaultOpenIndex?: number | null;
+    defaultOpenIndexes?: OpenIndexes;
+    /** Controlled state */
+    openIndex?: number | null;
+    openIndexes?: OpenIndexes;
+    /** Change callbacks */
+    onOpenIndexChange?: (index: number | null) => void;
+    onOpenIndexesChange?: (indexes: number[]) => void;
+}
+export declare function Accordion({ items, mode, size, variant, renderMode, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, className, ...rest }: AccordionProps): JSX.Element;
+export {};

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,121 @@
+'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, itemCount) {
+  if (indexes === "all") {
+    return Array.from({ length: itemCount }, (_, i) => i);
+  }
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => Number.isInteger(n) && n >= 0 && n < itemCount));
+}
+function Accordion({
+  items,
+  mode = "single",
+  size = "md",
+  variant = "default",
+  renderMode = "lazy",
+  defaultOpenIndex = null,
+  defaultOpenIndexes = [],
+  openIndex,
+  openIndexes,
+  onOpenIndexChange,
+  onOpenIndexesChange,
+  className,
+  ...rest
+}) {
+  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(() => {
+    if (mode !== "single") return null;
+    if (defaultOpenIndex !== null && Number.isInteger(defaultOpenIndex) && defaultOpenIndex >= 0 && defaultOpenIndex < items.length) {
+      return defaultOpenIndex;
+    }
+    return null;
+  });
+  const [internalMultiple, setInternalMultiple] = useState(() => {
+    if (mode !== "multiple") return [];
+    return normalizeMultiple(defaultOpenIndexes, items.length);
+  });
+  const currentOpenIndexes = useMemo(() => {
+    if (mode === "single") {
+      const current = isControlled ? openIndex != null ? openIndex : null : internalSingle;
+      return current !== null && Number.isInteger(current) && current >= 0 && current < items.length ? [current] : [];
+    }
+    return isControlled ? normalizeMultiple(openIndexes, items.length) : normalizeMultiple(internalMultiple, items.length);
+  }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple, items.length]);
+  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 = normalizeMultiple(nextIndexes, items.length);
+    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",
+    {
+      ...rest,
+      className: [
+        styles.container,
+        styles[size],
+        variant !== "default" ? styles[variant] : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: items.map((item, i) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          AccordionRow,
+          {
+            uid,
+            index: i,
+            item,
+            isOpen: openSet.has(i),
+            onToggle: toggle,
+            shouldAnimate: hasMounted,
+            headlineSize: size === "sm" ? 4 : 3,
+            variant,
+            renderMode
+          },
+          (_a = item.id) != null ? _a : 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,129 @@
+'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",
+  renderMode = "lazy"
+}) {
+  const isDisabled = !!item.disabled;
+  const headlineWeight = variant === "outlined" ? 400 : 500;
+  const buttonId = `${uid}-acc-btn-${index}`;
+  const panelId = `${uid}-acc-panel-${index}`;
+  const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
+  const [hasBeenOpened, setHasBeenOpened] = react.useState(isOpen);
+  const shouldRenderChildren = renderMode === "eager" || isOpen || hasBeenOpened;
+  function handleToggle() {
+    if (!isOpen) {
+      setHasBeenOpened(true);
+    }
+    onToggle(index);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: `${styles__default.default.item} ${isOpen ? styles__default.default.open : ""} ${isDisabled ? styles__default.default.disabled : ""}`,
+      "data-state": isOpen ? "open" : "closed",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              id: buttonId,
+              className: styles__default.default.trigger,
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              onClick: handleToggle,
+              disabled: isDisabled,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { 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: headlineWeight,
+                      severity: item.severity,
+                      subheader: item.subheader,
+                      allowWrap: isOpen,
+                      children: item.header
+                    }
+                  ),
+                  item.headerAddition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerAddition, children: item.headerAddition }) : null
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
+              ]
+            }
+          ),
+          item.headerActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerActions, onClick: (event) => event.stopPropagation(), children: item.headerActions }) : null
+        ] }),
+        /* @__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: shouldRenderChildren ? item.children : null })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.AccordionRow = AccordionRow;

package/dist/components/accordion/components/AccordionRow.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from 'react';
+import { AccordionItem } from '../Accordion';
+export type AccordionRowProps = {
+    uid: string;
+    index: number;
+    item: AccordionItem;
+    isOpen: boolean;
+    onToggle: (index: number) => void;
+    shouldAnimate?: boolean;
+    headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
+    variant?: 'default' | 'outlined';
+    renderMode?: 'lazy' | 'eager';
+};
+export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, headlineSize, variant, renderMode, }: AccordionRowProps): JSX.Element;