@dbcdk/react-components 0.0.101 → 0.0.102

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

@@ -11,10 +11,12 @@ export interface AccordionItem {
 }
 type Size = 'sm' | 'md' | 'lg';
 type Mode = 'single' | 'multiple';
+type Variant = 'default' | 'outlined';
 export interface AccordionProps {
     items: AccordionItem[];
     mode?: Mode;
     size?: Size;
+    variant?: Variant;
     /** Uncontrolled defaults */
     defaultOpenIndex?: number | null;
     defaultOpenIndexes?: number[] | 'all';
@@ -25,5 +27,5 @@ export interface AccordionProps {
     onOpenIndexChange?: (index: number | null) => void;
     onOpenIndexesChange?: (indexes: number[]) => void;
 }
-export declare function Accordion({ items, mode, size, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }: AccordionProps): JSX.Element;
+export declare function Accordion({ items, mode, size, variant, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }: AccordionProps): JSX.Element;
 export {};

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

@@ -7,5 +7,7 @@ export type AccordionRowProps = {
     isOpen: boolean;
     onToggle: (index: number) => void;
     shouldAnimate?: boolean;
+    headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
+    variant?: 'default' | 'outlined';
 };
-export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, }: AccordionRowProps): JSX.Element;
+export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, headlineSize, variant, }: AccordionRowProps): JSX.Element;

package/dist/components/card/Card.d.ts

@@ -4,12 +4,14 @@ import { CardMeta, CardMetaRow } from './components/CardMeta';
 type CardVariant = 'default' | 'subtle';
 type CardSize = 'sm' | 'md' | 'lg';
 type CardImagePlacement = 'left' | 'right' | 'top';
+type CardElevation = 'none' | 'xs' | 'sm' | 'md';
 export interface CardProps {
     title?: string;
     subheader?: ReactNode;
     loading?: boolean;
     variant?: CardVariant;
     size?: CardSize;
+    elevation?: CardElevation;
     headerMarker?: boolean;
     headerIcon?: ReactNode;
     headerAddition?: ReactNode;

package/dist/components/headline/Headline.d.ts

@@ -3,6 +3,7 @@ import { Severity } from '../../constants/severity.types';
 type HeadlineTone = 'dark' | 'light';
 type HeadlineVariant = 'default' | 'muted';
 export interface HeadlineProps extends React.AriaAttributes {
+    id?: string;
     size?: 1 | 2 | 3 | 4 | 5 | 6;
     marker?: boolean;
     disableMargin?: boolean;
@@ -15,5 +16,5 @@ export interface HeadlineProps extends React.AriaAttributes {
     tone?: HeadlineTone;
     variant?: HeadlineVariant;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, variant, allowWrap, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, variant, allowWrap, id, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
 export {};

package/dist/components/inline-status/InlineStatus.d.ts

@@ -0,0 +1,11 @@
+import type { JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface InlineStatusProps {
+    children: ReactNode;
+    severity?: Severity;
+    customIcon?: ReactNode;
+    disableIcon?: boolean;
+    fullWidth?: boolean;
+    size?: 'sm' | 'md';
+}
+export declare function InlineStatus({ children, severity, customIcon, disableIcon, fullWidth, size, }: InlineStatusProps): JSX.Element;

package/dist/components/page/Page.d.ts

@@ -8,12 +8,14 @@ interface PageProps {
     headerIcon?: ReactNode;
     children?: ReactNode;
     headerAddition?: ReactNode;
+    /** @deprecated use contentBox instead */
     disableContentBox?: boolean;
+    contentBox?: boolean;
     disableTopPadding?: boolean;
     maxWidth?: 'sm' | 'md' | 'lg';
     breadcrumbs?: BreadcrumbItem[];
     containScrolling?: boolean;
     loading?: boolean;
 }
-export declare function Page({ header, subheader, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, disableTopPadding, maxWidth, containScrolling, children, loading, }: PageProps): ReactNode;
+export declare function Page({ header, subheader, severity, headerIcon, headerAddition, breadcrumbs, disableContentBox, contentBox, disableTopPadding, maxWidth, containScrolling, children, loading, }: PageProps): ReactNode;
 export {};

package/dist/components/segmented-progress-bar/SegmentedProgressBar.d.ts

@@ -8,13 +8,14 @@ export type Segment = {
     color?: string;
     label?: React.ReactNode;
 };
+export type ProgressBarSize = '2xs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 export interface SegmentedProgressBarProps {
     segments: Segment[];
     total?: number;
     showRemainder?: boolean;
     remainderSeverity?: Severity | ProgressSeverity;
     centerLabel?: React.ReactNode | ((filledPct: number) => React.ReactNode);
-    height?: number;
+    size?: ProgressBarSize;
     rounded?: boolean;
     trackColor?: string;
     tooltipPlacement?: TooltipPlacement;

package/dist/index.cjs

@@ -426,7 +426,6 @@ var Button_default = {
   rounded: "Button_rounded",
   link: "Button_link",
   icon: "Button_icon",
-  xs: "Button_xs",
   sm: "Button_sm",
   lg: "Button_lg",
   fullWidth: "Button_fullWidth",
@@ -437,7 +436,8 @@ var Button_default = {
   active: "Button_active",
   success: "Button_success",
   danger: "Button_danger",
-  inline: "Button_inline"
+  inline: "Button_inline",
+  xs: "Button_xs"
 };
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
@@ -804,7 +804,8 @@ function Headline({
   icon,
   tone,
   variant,
-  allowWrap = true
+  allowWrap = true,
+  id
 }) {
   const Tag = `h${size}`;
   const containerClassName = [Headline_default.headlineContainer, tone ? Headline_default[`tone-${tone}`] : ""].filter(Boolean).join(" ");
@@ -820,6 +821,7 @@ function Headline({
       /* @__PURE__ */ jsxRuntime.jsxs(
         Tag,
         {
+          id,
           style: {
             "--font-weight": weight,
             "--marker-color": severity ? SeverityBgColor[severity] : void 0
@@ -2531,7 +2533,7 @@ function Tabs({
       "div",
       {
         className: [Tabs_default.headerContainer, disableTopPadding ? Tabs_default.disableTopPadding : ""].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Headline, { disableMargin: true, size: 1, subheader, addition, children: header })
       }
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${Tabs_default.tabs} ${Tabs_default[variant]} ${panelStyle ? Tabs_default.panelStyle : ""}`, children: [
@@ -3449,6 +3451,10 @@ function Panel({
 var Card_default = {
   outerContainer: "Card_outerContainer",
   container: "Card_container",
+  elevationNone: "Card_elevationNone",
+  elevationXs: "Card_elevationXs",
+  elevationSm: "Card_elevationSm",
+  elevationMd: "Card_elevationMd",
   variantDefault: "Card_variantDefault",
   variantSubtle: "Card_variantSubtle",
   sm: "Card_sm",
@@ -3576,6 +3582,7 @@ function CardImpl({
   loading = false,
   variant = "default",
   size = "md",
+  elevation = "sm",
   headerMarker = true,
   headerIcon,
   headerAddition,
@@ -3592,6 +3599,7 @@ function CardImpl({
   width,
   headlineSize = 4
 }) {
+  var _a;
   const outerStyle = width ? {
     ["--width"]: `${width}%`,
     ["--gap-share"]: getGapShare(width)
@@ -3599,6 +3607,7 @@ function CardImpl({
   const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
   const innerPlacementClass = getInnerPlacementClass(imgPlacement, Card_default);
   const variantClass = getVariantClass(variant, Card_default);
+  const elevationClass = (_a = Card_default[`elevation${elevation.charAt(0).toUpperCase()}${elevation.slice(1)}`]) != null ? _a : Card_default.elevationSm;
   const hasHeader = !!title || !!headerMeta;
   const showSection = !loading && (showSectionDivider || !!sectionTitle);
   const showBody = !loading && !!children;
@@ -3636,7 +3645,7 @@ function CardImpl({
     ] })
   ] });
   const cardContent = link ? /* @__PURE__ */ jsxRuntime.jsx(Hyperlink, { children: link }) : inner;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${Card_default.outerContainer} ${Card_default[size]}`, style: outerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${Card_default.container} ${variantClass}`, children: cardContent }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${Card_default.outerContainer} ${Card_default[size]}`, style: outerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${Card_default.container} ${variantClass} ${elevationClass}`, children: cardContent }) });
 }
 var Card = Object.assign(CardImpl, {
   Meta: CardMeta,
@@ -3683,7 +3692,7 @@ var Page_default = {
   headerMain: "Page_headerMain",
   content: "Page_content",
   contentLoading: "Page_contentLoading",
-  disableContentBox: "Page_disableContentBox"
+  contentBox: "Page_contentBox"
 };
 
 // src/components/breadcrumbs/Breadcrumbs.module.css
@@ -3710,12 +3719,14 @@ function Page({
   headerAddition,
   breadcrumbs,
   disableContentBox,
+  contentBox = false,
   disableTopPadding = true,
   maxWidth,
   containScrolling = false,
   children,
   loading = false
 }) {
+  const showContentBox = contentBox && !disableContentBox;
   const maxWidthClass = maxWidth ? Page_default[`maxWidth${maxWidth.charAt(0).toUpperCase()}${maxWidth.slice(1)}`] : "";
   const hasHeadline = Boolean(header || subheader || headerAddition);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3729,7 +3740,7 @@ function Page({
             Headline,
             {
               disableMargin: true,
-              size: 2,
+              size: 1,
               severity,
               icon: headerIcon,
               subheader,
@@ -3741,7 +3752,7 @@ function Page({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: `${Page_default.content} ${loading ? Page_default.contentLoading : ""} ${disableContentBox ? Page_default.disableContentBox : ""}`,
+            className: `${Page_default.content} ${loading ? Page_default.contentLoading : ""} ${showContentBox ? Page_default.contentBox : ""}`,
             children: loading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) : children
           }
         )
@@ -4313,7 +4324,7 @@ function TableRow({
         columns.map((column) => {
           var _a2, _b, _c, _d;
           const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
-          const allowOverflow = column.allowOverflow;
+          column.allowOverflow;
           const cellValue = getCellDisplayValue(row, column);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "td",
@@ -4333,7 +4344,7 @@ function TableRow({
                   className: Table_default.cellContent,
                   "data-align": (_c = column.align) != null ? _c : "left",
                   "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
-                  children: allowWrap || allowOverflow ? cellValue : /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
                 }
               )
             },
@@ -7566,6 +7577,14 @@ var SegmentedProgressBar_default = {
   progressCenterLabel: "SegmentedProgressBar_progressCenterLabel",
   emptySegments: "SegmentedProgressBar_emptySegments"
 };
+var sizeTokenMap = {
+  "2xs": "var(--component-size-2xs)",
+  xxs: "var(--component-size-xxs)",
+  xs: "var(--component-size-xs)",
+  sm: "var(--component-size-sm)",
+  md: "var(--component-size-md)",
+  lg: "var(--component-size-lg)"
+};
 function SegmentWithTooltip({
   seg,
   index,
@@ -7605,9 +7624,9 @@ var SegmentedProgressBar = ({
   segments,
   total,
   showRemainder = true,
-  remainderSeverity = "neutral",
+  remainderSeverity = "missing",
   centerLabel,
-  height,
+  size = "sm",
   rounded = true,
   trackColor,
   tooltipPlacement = "top",
@@ -7645,7 +7664,8 @@ var SegmentedProgressBar = ({
           className: SegmentedProgressBar_default.progressBar,
           "data-rounded": rounded ? "true" : "false",
           style: {
-            height: height ? `${height}px` : "24px",
+            ["--progress-height"]: sizeTokenMap[size],
+            height: sizeTokenMap[size],
             background: trackColor != null ? trackColor : "var(--color-bg-surface-subtle)"
           },
           children: [
@@ -8526,7 +8546,7 @@ function Modal({
         tabIndex: -1,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_default.header, children: [
-            header && /* @__PURE__ */ jsxRuntime.jsx(Headline, { severity, size: 3, disableMargin: true, subheader, children: header }),
+            header && /* @__PURE__ */ jsxRuntime.jsx(Headline, { severity, size: 2, disableMargin: true, subheader, children: header }),
             /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
@@ -10689,7 +10709,7 @@ function SidePanel({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Headline,
                   {
-                    size: 3,
+                    size: 2,
                     disableMargin: true,
                     severity,
                     marker: showHeaderMarker,
@@ -11049,6 +11069,7 @@ function IntervalSelect({
 // src/components/accordion/Accordion.module.css
 var Accordion_default = {
   container: "Accordion_container",
+  outlined: "Accordion_outlined",
   sm: "Accordion_sm",
   md: "Accordion_md",
   lg: "Accordion_lg"
@@ -11065,7 +11086,8 @@ var AccordionRow_default = {
   panel: "AccordionRow_panel",
   animate: "AccordionRow_animate",
   noAnimate: "AccordionRow_noAnimate",
-  content: "AccordionRow_content"
+  content: "AccordionRow_content",
+  item: "AccordionRow_item"
 };
 function useCollapsibleHeight(isOpen, shouldAnimate) {
   const innerRef = React19.useRef(null);
@@ -11108,7 +11130,9 @@ function AccordionRow({
   item,
   isOpen,
   onToggle,
-  shouldAnimate = true
+  shouldAnimate = true,
+  headlineSize = 4,
+  variant = "default"
 }) {
   const isDisabled = !!item.disabled;
   const buttonId = `${uid}-acc-btn-${index}`;
@@ -11136,8 +11160,8 @@ function AccordionRow({
                   Headline,
                   {
                     disableMargin: true,
-                    size: 4,
-                    weight: 500,
+                    size: headlineSize,
+                    weight: variant === "outlined" ? 400 : 500,
                     severity: item.severity,
                     subheader: item.subheader,
                     allowWrap: isOpen,
@@ -11176,6 +11200,7 @@ function Accordion({
   items,
   mode = "single",
   size = "md",
+  variant = "default",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
   openIndex,
@@ -11185,9 +11210,9 @@ function Accordion({
 }) {
   const uid = React19.useId();
   const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
-  const hasMountedRef = React19.useRef(false);
+  const [hasMounted, setHasMounted] = React19.useState(false);
   React19.useEffect(() => {
-    hasMountedRef.current = true;
+    setHasMounted(true);
   }, []);
   const [internalSingle, setInternalSingle] = React19.useState(
     mode === "single" ? defaultOpenIndex : null
@@ -11233,18 +11258,26 @@ function Accordion({
     if (isOpen) commit(currentOpenIndexes.filter((i) => i !== index));
     else commit([...currentOpenIndexes, index]);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${Accordion_default.container} ${Accordion_default[size]}`, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    AccordionRow,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      uid,
-      index: i,
-      item,
-      isOpen: openSet.has(i),
-      onToggle: toggle,
-      shouldAnimate: hasMountedRef.current
-    },
-    i
-  )) });
+      className: [Accordion_default.container, Accordion_default[size], variant !== "default" ? Accordion_default[variant] : ""].filter(Boolean).join(" "),
+      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        AccordionRow,
+        {
+          uid,
+          index: i,
+          item,
+          isOpen: openSet.has(i),
+          onToggle: toggle,
+          shouldAnimate: hasMounted,
+          headlineSize: size === "sm" ? 4 : 3,
+          variant
+        },
+        i
+      ))
+    }
+  );
 }
 var EmptyIllustration = () => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
@@ -12745,6 +12778,48 @@ function Alert({
   );
 }
 
+// src/components/inline-status/InlineStatus.module.css
+var InlineStatus_default = {
+  container: "InlineStatus_container",
+  fullWidth: "InlineStatus_fullWidth",
+  leading: "InlineStatus_leading",
+  body: "InlineStatus_body",
+  sm: "InlineStatus_sm",
+  md: "InlineStatus_md",
+  neutral: "InlineStatus_neutral",
+  success: "InlineStatus_success",
+  warning: "InlineStatus_warning",
+  error: "InlineStatus_error",
+  info: "InlineStatus_info",
+  brand: "InlineStatus_brand"
+};
+function InlineStatus({
+  children,
+  severity = "neutral",
+  customIcon,
+  disableIcon = false,
+  fullWidth = false,
+  size = "sm"
+}) {
+  const hasLeading = Boolean(customIcon) || !disableIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [
+        InlineStatus_default.container,
+        InlineStatus_default[severity],
+        InlineStatus_default[size],
+        fullWidth ? InlineStatus_default.fullWidth : "",
+        hasLeading ? InlineStatus_default.hasLeading : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        hasLeading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: InlineStatus_default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon, { severity }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: InlineStatus_default.body, children })
+      ]
+    }
+  );
+}
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AppHeader = AppHeader;
@@ -12774,6 +12849,7 @@ exports.GridItem = GridItem;
 exports.Headline = Headline;
 exports.Hyperlink = Hyperlink;
 exports.Icon = Icon;
+exports.InlineStatus = InlineStatus;
 exports.Input = Input;
 exports.InputContainer = InputContainer;
 exports.IntervalSelect = IntervalSelect;