@dbcdk/react-components 0.0.101 → 0.0.103

package/dist/tanstack.css

@@ -168,12 +168,16 @@
 .Button_button2:disabled,
 .Button_button2[aria-disabled=true] {
   cursor: not-allowed;
-  pointer-events: none;
   background-color: var(--color-disabled-bg);
   border-color: transparent;
   color: var(--color-disabled-fg);
   opacity: 0.5;
 }
+.Button_button2:is(:disabled, [aria-disabled=true]):hover {
+  background-color: var(--color-disabled-bg);
+  border-color: transparent;
+  color: var(--color-disabled-fg);
+}
 .Button_link2 {
   text-decoration: none;
   font-size: var(--font-size-sm);
@@ -194,12 +198,6 @@
 .Button_icon2 {
   display: inline-flex;
 }
-.Button_button2.Button_xs2 {
-  height: var(--component-size-xs);
-  min-block-size: var(--component-size-xs);
-  padding-inline: var(--spacing-xs);
-  font-size: var(--font-size-xs);
-}
 .Button_button2.Button_sm2 {
   height: var(--component-size-sm);
   min-block-size: var(--component-size-sm);
@@ -314,6 +312,17 @@
 .Button_inline2.Button_active2:hover {
   color: var(--button-bg-primary-hover);
 }
+.Button_button2.Button_xs2 {
+  height: auto;
+  min-block-size: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+.Button_button2.Button_xs2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
 
 /* src/components/menu/Menu.module.css */
 .Menu_container2 {
@@ -625,7 +634,116 @@
 .InputContainer_inputContainer2[data-modified] label:not(.InputContainer_label2) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
   border-radius: var(--border-radius-default);
-  padding: 2px 6px;
+}
+
+/* src/components/inline-status/InlineStatus.module.css */
+.InlineStatus_container2 {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: var(--color-border-subtle);
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  max-inline-size: 100%;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  border: 1px solid var(--inline-status-border);
+  border-radius: var(--border-radius-default);
+  background: var(--inline-status-bg);
+  color: var(--inline-status-fg);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+}
+.InlineStatus_fullWidth2 {
+  display: flex;
+  inline-size: 100%;
+}
+.InlineStatus_leading2 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  block-size: 1lh;
+}
+.InlineStatus_leading2 svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+  color: currentColor;
+}
+.InlineStatus_body2 {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  white-space: normal;
+}
+.InlineStatus_sm2 {
+  font-size: var(--font-size-xs);
+}
+.InlineStatus_md2 {
+  font-size: var(--font-size-sm);
+}
+.InlineStatus_neutral2 {
+  --inline-status-bg: var(--color-bg-toolbar);
+  --inline-status-fg: var(--color-fg-default);
+  --inline-status-border: transparent;
+}
+.InlineStatus_success2 {
+  --inline-status-bg: var(--color-status-success-bg);
+  --inline-status-fg: var(--color-status-success-fg);
+  --inline-status-border: var(--color-status-success-border);
+}
+.InlineStatus_warning2 {
+  --inline-status-bg: var(--color-status-warning-bg);
+  --inline-status-fg: var(--color-status-warning-fg);
+  --inline-status-border: var(--color-status-warning-border);
+}
+.InlineStatus_error2 {
+  --inline-status-bg: var(--color-status-error-bg);
+  --inline-status-fg: var(--color-status-error-fg);
+  --inline-status-border: var(--color-status-error-border);
+}
+.InlineStatus_info2 {
+  --inline-status-bg: var(--color-status-info-bg);
+  --inline-status-fg: var(--color-status-info-fg);
+  --inline-status-border: var(--color-status-info-border);
+}
+.InlineStatus_brand2 {
+  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
+  --inline-status-fg: var(--color-brand);
+  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+}
+
+/* src/components/icon/Icon.module.css */
+.Icon_container2 {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
+}
+.Icon_icon2 {
+  display: flex;
+}
+.Icon_icon2 svg {
+  height: var(--icon-size-md);
+}
+.Icon_success2 {
+  color: var(--color-status-success);
+}
+.Icon_error2 {
+  color: var(--color-status-error);
+}
+.Icon_warning2 {
+  color: var(--color-status-warning);
+}
+.Icon_info2 {
+  color: var(--color-status-info);
+}
+.Icon_brand2 {
+  color: var(--color-fg-on-brand);
 }
 
 /* src/components/forms/radio-buttons/RadioButtons.module.css */
@@ -766,7 +884,7 @@
   padding: var(--spacing-xxs);
   z-index: var(--z-popover);
   overflow: auto;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), var(--shadow-sm);
+  box-shadow: var(--shadow-md);
 }
 .Popover_content2[hidden] {
   display: none;

package/dist/tanstack.js

@@ -2,7 +2,7 @@ import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/rea
 import * as React8 from 'react';
 import { createContext, forwardRef, useId, useState, useRef, useEffect, useCallback, useImperativeHandle, useLayoutEffect, useContext, useMemo } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { LoaderCircle, ChevronUp, ChevronDown, Check, ListChevronsDownUp, Settings, ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, ArrowUp, ArrowDown } from 'lucide-react';
+import { LoaderCircle, ChevronUp, ChevronDown, Check, Building2, CircleAlert, Info, CircleX, CircleCheck, ListChevronsDownUp, Settings, ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, ArrowUp, ArrowDown } from 'lucide-react';
 import { createPortal } from 'react-dom';
 
 // src/components/table/components/column-resizer/ColumnResizer.module.css
@@ -150,7 +150,6 @@ var Button_default = {
   rounded: "Button_rounded2",
   link: "Button_link2",
   icon: "Button_icon2",
-  xs: "Button_xs2",
   sm: "Button_sm2",
   lg: "Button_lg2",
   fullWidth: "Button_fullWidth2",
@@ -161,7 +160,8 @@ var Button_default = {
   active: "Button_active2",
   success: "Button_success2",
   danger: "Button_danger2",
-  inline: "Button_inline2"
+  inline: "Button_inline2",
+  xs: "Button_xs2"
 };
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
@@ -321,6 +321,73 @@ var InputContainer_default = {
   messageRow: "InputContainer_messageRow2",
   inputContainer: "InputContainer_inputContainer2"
 };
+
+// src/components/inline-status/InlineStatus.module.css
+var InlineStatus_default = {
+  container: "InlineStatus_container2",
+  fullWidth: "InlineStatus_fullWidth2",
+  leading: "InlineStatus_leading2",
+  body: "InlineStatus_body2",
+  sm: "InlineStatus_sm2",
+  md: "InlineStatus_md2",
+  neutral: "InlineStatus_neutral2",
+  success: "InlineStatus_success2",
+  warning: "InlineStatus_warning2",
+  error: "InlineStatus_error2",
+  info: "InlineStatus_info2",
+  brand: "InlineStatus_brand2"
+};
+
+// src/components/icon/Icon.module.css
+var Icon_default = {
+  container: "Icon_container2",
+  icon: "Icon_icon2",
+  success: "Icon_success2",
+  error: "Icon_error2",
+  warning: "Icon_warning2",
+  info: "Icon_info2",
+  brand: "Icon_brand2"
+};
+var SeverityIcon = {
+  neutral: /* @__PURE__ */ jsx(CircleCheck, {}),
+  success: /* @__PURE__ */ jsx(CircleCheck, {}),
+  error: /* @__PURE__ */ jsx(CircleX, {}),
+  info: /* @__PURE__ */ jsx(Info, {}),
+  warning: /* @__PURE__ */ jsx(CircleAlert, {}),
+  brand: /* @__PURE__ */ jsx(Building2, {})
+};
+function Icon({ severity, label, customIcon }) {
+  return /* @__PURE__ */ jsxs("div", { className: `${Icon_default.container}`, children: [
+    /* @__PURE__ */ jsx("span", { className: `${Icon_default.icon} ${severity ? Icon_default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
+    label && /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+}
+function InlineStatus({
+  children,
+  severity = "neutral",
+  customIcon,
+  disableIcon = false,
+  fullWidth = false,
+  size = "sm"
+}) {
+  const hasLeading = Boolean(customIcon) || !disableIcon;
+  return /* @__PURE__ */ 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__ */ jsx("span", { className: InlineStatus_default.leading, children: customIcon != null ? customIcon : /* @__PURE__ */ jsx(Icon, { severity }) }) : null,
+        /* @__PURE__ */ jsx("span", { className: InlineStatus_default.body, children })
+      ]
+    }
+  );
+}
 function InputContainer({
   label,
   labelAction,
@@ -336,8 +403,6 @@ function InputContainer({
   labelWidth = "160px",
   modified = false
 }) {
-  const message = error != null ? error : helpText;
-  const messageClass = error ? InputContainer_default.errorText : InputContainer_default.helpText;
   const renderLabelRow = (label || labelAction) && /* @__PURE__ */ jsxs("div", { className: `${InputContainer_default.labelRow} dbc-flex dbc-items-center dbc-gap-md`, children: [
     label && /* @__PURE__ */ jsxs("label", { className: InputContainer_default.label, htmlFor, children: [
       label,
@@ -345,10 +410,10 @@ function InputContainer({
     ] }),
     labelAction && /* @__PURE__ */ jsx("div", { className: InputContainer_default.labelAction, children: labelAction })
   ] });
-  const renderMessageRow = (message || helpTextAddition) && /* @__PURE__ */ jsxs("div", { className: `${messageClass} ${InputContainer_default.messageRow}`, children: [
-    /* @__PURE__ */ jsx("span", { children: message }),
+  const renderMessageRow = (error || helpText || helpTextAddition) && /* @__PURE__ */ jsx("div", { className: `${error ? InputContainer_default.errorText : InputContainer_default.helpText} ${InputContainer_default.messageRow}`, children: error ? /* @__PURE__ */ jsx(InlineStatus, { severity: "error", disableIcon: true, children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { children: helpText }),
     helpTextAddition && /* @__PURE__ */ jsx("span", { className: InputContainer_default.helpTextAddition, children: helpTextAddition })
-  ] });
+  ] }) });
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -1637,7 +1702,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__ */ jsx(
             "td",
@@ -1657,7 +1722,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__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
+                  children: /* @__PURE__ */ jsx("div", { className: Table_default.cellValueEllipsis, children: cellValue })
                 }
               )
             },

package/package.json

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