@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,28 +0,0 @@
-'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

@@ -1,12 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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

@@ -1,33 +0,0 @@
-'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

@@ -1,15 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,103 +0,0 @@
-.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

@@ -1,107 +0,0 @@
-'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

@@ -1,44 +0,0 @@
-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

@@ -1,101 +0,0 @@
-'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 };