@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/meta-bar/MetaBar.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./MetaBar.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function MetaBar({ items, separator = "\u2022" }) {
+  const visibleItems = items.filter(
+    (item) => item.value !== null && item.value !== void 0 && item.value !== ""
+  );
+  if (visibleItems.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: item.muted === false ? styles__default.default.itemDefault : styles__default.default.itemMuted, children: [
+      item.label && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        item.label,
+        ":\xA0"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.value })
+    ] }),
+    index < visibleItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: styles__default.default.dot, children: separator })
+  ] }, index)) });
+}
+
+exports.MetaBar = MetaBar;

package/dist/components/meta-bar/MetaBar.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode, type JSX } from 'react';
+export interface MetaItem {
+    label?: ReactNode;
+    value: ReactNode;
+    muted?: boolean;
+}
+interface MetaBarProps {
+    items: MetaItem[];
+    separator?: ReactNode;
+}
+export declare function MetaBar({ items, separator }: MetaBarProps): JSX.Element | null;
+export {};

package/dist/components/meta-bar/MetaBar.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import styles from './MetaBar.module.css';
+
+function MetaBar({ items, separator = "\u2022" }) {
+  const visibleItems = items.filter(
+    (item) => item.value !== null && item.value !== void 0 && item.value !== ""
+  );
+  if (visibleItems.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: item.muted === false ? styles.itemDefault : styles.itemMuted, children: [
+      item.label && /* @__PURE__ */ jsxs("span", { children: [
+        item.label,
+        ":\xA0"
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: item.value })
+    ] }),
+    index < visibleItems.length - 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.dot, children: separator })
+  ] }, index)) });
+}
+
+export { MetaBar };

package/dist/components/meta-bar/MetaBar.module.css

@@ -0,0 +1,27 @@
+.meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+
+.itemMuted,
+.itemDefault {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  line-height: 1;
+}
+
+.itemMuted {
+  color: var(--color-fg-subtle);
+}
+
+.itemDefault {
+  color: var(--color-fg-default);
+}
+
+.dot {
+  opacity: 0.6;
+}

package/dist/components/metric-tile/MetricTile.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var client = require('../../client');
+var styles = require('./MetricTile.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function toSize(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
+function MetricTile({
+  severity,
+  label,
+  value,
+  tooltip,
+  size = "md",
+  minWidth,
+  maxWidth
+}) {
+  const style = minWidth != null || maxWidth != null ? {
+    ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
+    ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.tile, "data-severity": severity, "data-size": size, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: value })
+  ] }) });
+}
+
+exports.MetricTile = MetricTile;

package/dist/components/metric-tile/MetricTile.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+type MetricTileSize = 'sm' | 'md' | 'lg';
+type SizeValue = number | string;
+interface MetricTileProps {
+    severity: Severity;
+    label: string;
+    value: string | number;
+    tooltip?: ReactNode;
+    size?: MetricTileSize;
+    minWidth?: SizeValue;
+    maxWidth?: SizeValue;
+}
+export declare function MetricTile({ severity, label, value, tooltip, size, minWidth, maxWidth, }: MetricTileProps): JSX.Element;
+export {};

package/dist/components/metric-tile/MetricTile.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip } from '../../client';
+import styles from './MetricTile.module.css';
+
+function toSize(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
+function MetricTile({
+  severity,
+  label,
+  value,
+  tooltip,
+  size = "md",
+  minWidth,
+  maxWidth
+}) {
+  const style = minWidth != null || maxWidth != null ? {
+    ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
+    ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
+  } : void 0;
+  return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs("span", { className: styles.tile, "data-severity": severity, "data-size": size, style, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
+    /* @__PURE__ */ jsx("span", { className: styles.value, children: value })
+  ] }) });
+}
+
+export { MetricTile };

package/dist/components/metric-tile/MetricTile.module.css

@@ -0,0 +1,103 @@
+.tile {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  min-width: 64px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-radius: var(--border-radius-md);
+  font-family: var(--font-family);
+  cursor: default;
+}
+
+.tile[data-size='sm'] {
+  gap: 1px;
+  padding: 6px var(--spacing-sm);
+  min-width: 56px;
+  border-radius: var(--border-radius-sm);
+}
+
+.tile[data-size='lg'] {
+  gap: var(--spacing-2xs);
+  padding: var(--spacing-md) var(--spacing-lg);
+  min-width: 96px;
+  border-radius: var(--border-radius-lg);
+}
+
+.tile[data-severity='success'] {
+  background-color: var(--color-status-success-bg-soft);
+  color: var(--color-status-success-fg-soft);
+}
+
+.tile[data-severity='error'] {
+  background-color: var(--color-status-error-bg-soft);
+  color: var(--color-status-error-fg-soft);
+}
+
+.tile[data-severity='warning'] {
+  background-color: var(--color-status-warning-bg-soft);
+  color: var(--color-status-warning-fg-soft);
+}
+
+.tile[data-severity='info'] {
+  background-color: var(--color-status-info-bg-soft);
+  color: var(--color-status-info-fg-soft);
+}
+
+.tile[data-severity='neutral'] {
+  background-color: var(--color-bg-toolbar);
+  color: var(--color-fg-default);
+}
+
+.tile[data-severity='brand'] {
+  background-color: var(--color-brand);
+  color: var(--color-fg-on-brand);
+}
+
+.tile[data-severity='accent'] {
+  background-color: var(--color-accent-bg-soft);
+  color: var(--color-accent-fg-soft);
+}
+
+.label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold, 600);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  line-height: 1;
+  opacity: 0.85;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.value {
+  font-size: var(--font-size-md);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tile[data-size='sm'] .label {
+  font-size: var(--font-size-xs);
+  letter-spacing: normal;
+}
+
+.tile[data-size='sm'] .value {
+  font-size: var(--font-size-xs);
+}
+
+.tile[data-size='lg'] .label {
+  font-size: var(--font-size-sm);
+}
+
+.tile[data-size='lg'] .value {
+  font-size: var(--font-size-xl);
+}

package/dist/components/nav-bar/NavBar.cjs

@@ -0,0 +1,107 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./NavBar.module.css');
+var logo = require('../../assets/logo');
+var useDeviceSize = require('../../hooks/useDeviceSize');
+var AppHeader = require('../app-header/AppHeader');
+var Headline = require('../headline/Headline');
+var Popover = require('../popover/Popover');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function NavBar({
+  logo: logo$1,
+  items = [],
+  productName,
+  productNameComponent: ProductNameComponent,
+  addition,
+  activeLink,
+  size
+}) {
+  const [mobileOpen, setMobileOpen] = react.useState(false);
+  const deviceSize = useDeviceSize.useDeviceSize();
+  const isMobile = deviceSize === "mobile";
+  const navRef = react.useRef(null);
+  const navLinks = items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
+    const { component: Component, label, icon, href, active, external } = item;
+    const isActive = activeLink ? href === activeLink : Boolean(active);
+    const linkClass = [styles__default.default.link, isActive ? styles__default.default.active : ""].filter(Boolean).join(" ");
+    const commonProps = {
+      className: linkClass,
+      href,
+      ...isActive ? { "aria-current": "page" } : {},
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {}
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles__default.default.navItem, role: "listitem", children: Component ? /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...commonProps, children: [
+      icon,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("a", { ...commonProps, children: [
+      icon,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
+    ] }) }, id);
+  });
+  const productNameContent = productName ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.productNameLabel, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.productNameSquare }),
+      /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, children: productName })
+    ] })
+  ] }) : null;
+  const productNameNode = (() => {
+    if (!productName || !productNameContent) return null;
+    if (ProductNameComponent) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ProductNameComponent, { className: styles__default.default.productName, children: productNameContent });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.productName, children: productNameContent });
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsx(AppHeader.AppHeader, { size, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      ref: navRef,
+      className: styles__default.default.container,
+      "aria-label": productName ? `${productName} navigation` : "Main navigation",
+      children: [
+        (logo$1 || productName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.logoRow, children: [
+          logo$1,
+          productNameNode
+        ] }),
+        (navLinks == null ? void 0 : navLinks.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.navContent, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles__default.default.navItems, role: "list", children: navLinks }) }),
+        addition && !isMobile && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.addition, children: addition }),
+        isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+          Popover.Popover,
+          {
+            open: mobileOpen,
+            onOpenChange: setMobileOpen,
+            matchTriggerWidth: true,
+            fullWidth: false,
+            autoFocusContent: true,
+            anchorRef: navRef,
+            trigger: (toggle, _icon, open) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: styles__default.default.burgerButton,
+                "aria-label": open ? "Close navigation menu" : "Open navigation menu",
+                "aria-expanded": open,
+                onClick: toggle,
+                children: open ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { size: 20 })
+              }
+            ),
+            children: (close) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.mobileMenu, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles__default.default.mobileNavItems, role: "list", onClick: close, children: navLinks }),
+              addition && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.mobileAddition, children: addition })
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+exports.NavBar = NavBar;

package/dist/components/nav-bar/NavBar.d.ts

@@ -0,0 +1,44 @@
+import type { ElementType, ReactNode, JSX } from 'react';
+import { type AppHeaderSize } from '../app-header/AppHeader';
+export type NavBarItem = NavBarLinkItem | NavBarExpandableItem | NavBarGroupItem;
+type NavBarBase = {
+    label: string;
+    icon?: ReactNode;
+    iconWidth?: string | number;
+    enabled?: boolean;
+    tags?: string[];
+    truncateLabel?: boolean;
+};
+/** Simple clickable item */
+export type NavBarLinkItem = NavBarBase & {
+    type?: 'item';
+    href: string;
+    component?: ElementType<any>;
+    active?: boolean;
+    external?: boolean;
+};
+/** Clickable + expandable item (has href AND children) */
+export type NavBarExpandableItem = NavBarBase & {
+    type: 'expandable';
+    href: string;
+    component?: ElementType<any>;
+    active?: boolean;
+    external?: boolean;
+    children: NavBarItem[];
+};
+/** Non-clickable group header */
+export type NavBarGroupItem = NavBarBase & {
+    type: 'group';
+    children: NavBarItem[];
+};
+export interface NavBarProps {
+    logo?: ReactNode;
+    items?: NavBarLinkItem[];
+    productName?: string;
+    productNameComponent?: ElementType<any>;
+    addition?: ReactNode;
+    activeLink?: string;
+    size?: AppHeaderSize;
+}
+export declare function NavBar({ logo, items, productName, productNameComponent: ProductNameComponent, addition, activeLink, size, }: NavBarProps): JSX.Element;
+export {};

package/dist/components/nav-bar/NavBar.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { X, Menu } from 'lucide-react';
+import { useState, useRef } from 'react';
+import styles from './NavBar.module.css';
+import { Logo } from '../../assets/logo';
+import { useDeviceSize } from '../../hooks/useDeviceSize';
+import { AppHeader } from '../app-header/AppHeader';
+import { Headline } from '../headline/Headline';
+import { Popover } from '../popover/Popover';
+
+function NavBar({
+  logo,
+  items = [],
+  productName,
+  productNameComponent: ProductNameComponent,
+  addition,
+  activeLink,
+  size
+}) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const deviceSize = useDeviceSize();
+  const isMobile = deviceSize === "mobile";
+  const navRef = useRef(null);
+  const navLinks = items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
+    const { component: Component, label, icon, href, active, external } = item;
+    const isActive = activeLink ? href === activeLink : Boolean(active);
+    const linkClass = [styles.link, isActive ? styles.active : ""].filter(Boolean).join(" ");
+    const commonProps = {
+      className: linkClass,
+      href,
+      ...isActive ? { "aria-current": "page" } : {},
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {}
+    };
+    return /* @__PURE__ */ jsx("li", { className: styles.navItem, role: "listitem", children: Component ? /* @__PURE__ */ jsxs(Component, { ...commonProps, children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+    ] }) : /* @__PURE__ */ jsxs("a", { ...commonProps, children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
+    ] }) }, id);
+  });
+  const productNameContent = productName ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Logo, {}),
+    /* @__PURE__ */ jsxs("span", { className: styles.productNameLabel, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.productNameSquare }),
+      /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
+    ] })
+  ] }) : null;
+  const productNameNode = (() => {
+    if (!productName || !productNameContent) return null;
+    if (ProductNameComponent) {
+      return /* @__PURE__ */ jsx(ProductNameComponent, { className: styles.productName, children: productNameContent });
+    }
+    return /* @__PURE__ */ jsx("span", { className: styles.productName, children: productNameContent });
+  })();
+  return /* @__PURE__ */ jsx(AppHeader, { size, children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: navRef,
+      className: styles.container,
+      "aria-label": productName ? `${productName} navigation` : "Main navigation",
+      children: [
+        (logo || productName) && /* @__PURE__ */ jsxs("div", { className: styles.logoRow, children: [
+          logo,
+          productNameNode
+        ] }),
+        (navLinks == null ? void 0 : navLinks.length) > 0 && /* @__PURE__ */ jsx("div", { className: styles.navContent, children: /* @__PURE__ */ jsx("ul", { className: styles.navItems, role: "list", children: navLinks }) }),
+        addition && !isMobile && /* @__PURE__ */ jsx("div", { className: styles.addition, children: addition }),
+        isMobile && /* @__PURE__ */ jsx(
+          Popover,
+          {
+            open: mobileOpen,
+            onOpenChange: setMobileOpen,
+            matchTriggerWidth: true,
+            fullWidth: false,
+            autoFocusContent: true,
+            anchorRef: navRef,
+            trigger: (toggle, _icon, open) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles.burgerButton,
+                "aria-label": open ? "Close navigation menu" : "Open navigation menu",
+                "aria-expanded": open,
+                onClick: toggle,
+                children: open ? /* @__PURE__ */ jsx(X, { size: 20 }) : /* @__PURE__ */ jsx(Menu, { size: 20 })
+              }
+            ),
+            children: (close) => /* @__PURE__ */ jsxs("div", { className: styles.mobileMenu, children: [
+              /* @__PURE__ */ jsx("ul", { className: styles.mobileNavItems, role: "list", onClick: close, children: navLinks }),
+              addition && /* @__PURE__ */ jsx("div", { className: styles.mobileAddition, children: addition })
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { NavBar };