@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/forms/typeahead/Typeahead.module.css

@@ -0,0 +1,38 @@
+.countAdornment {
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-right: var(--spacing-xxs);
+}
+
+.chipRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.chevronButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.selectedValues {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.inputWithoutStartPadding {
+  padding-inline-start: 0;
+}
+
+.typeaheadInput {
+  cursor: pointer;
+}

package/dist/components/grid/Grid.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Grid.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const GAP_TOKEN = {
+  none: "0",
+  xs: "var(--spacing-xs)",
+  sm: "var(--spacing-sm)",
+  md: "var(--spacing-md)",
+  lg: "var(--spacing-lg)",
+  xl: "var(--spacing-xl)"
+};
+function Grid({
+  children,
+  gap = "md",
+  equalHeight = false,
+  maxWidth,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: [styles__default.default.grid, equalHeight && styles__default.default.equalHeight, className].filter(Boolean).join(" "),
+      style: {
+        gap: GAP_TOKEN[gap],
+        ...(maxWidth == null ? void 0 : maxWidth.base) != null ? { "--max-width-base": maxWidth.base } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.md) != null ? { "--max-width-md": maxWidth.md } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.lg) != null ? { "--max-width-lg": maxWidth.lg } : {},
+        ...style
+      },
+      children
+    }
+  );
+}
+function GridItem({ children, base = 12, md, lg, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: [styles__default.default.item, className].filter(Boolean).join(" "),
+      style: {
+        "--span-base": base,
+        ...md != null ? { "--span-md": md } : {},
+        ...lg != null ? { "--span-lg": lg } : {},
+        ...style
+      },
+      children
+    }
+  );
+}
+
+exports.Grid = Grid;
+exports.GridItem = GridItem;

package/dist/components/grid/Grid.d.ts

@@ -0,0 +1,29 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface GridMaxWidth {
+    base?: string;
+    md?: string;
+    lg?: string;
+}
+export interface GridProps {
+    children?: ReactNode;
+    gap?: GridGap;
+    /** Stretch direct children so cards/items in the same row get equal height */
+    equalHeight?: boolean;
+    maxWidth?: GridMaxWidth;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Grid({ children, gap, equalHeight, maxWidth, className, style, }: GridProps): import("react/jsx-runtime").JSX.Element;
+export interface GridItemProps {
+    children?: ReactNode;
+    /** Default span: <768px */
+    base?: number;
+    /** Medium span: ≥768px */
+    md?: number;
+    /** Large span: ≥1200px */
+    lg?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function GridItem({ children, base, md, lg, className, style }: GridItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/grid/Grid.js

@@ -0,0 +1,51 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './Grid.module.css';
+
+const GAP_TOKEN = {
+  none: "0",
+  xs: "var(--spacing-xs)",
+  sm: "var(--spacing-sm)",
+  md: "var(--spacing-md)",
+  lg: "var(--spacing-lg)",
+  xl: "var(--spacing-xl)"
+};
+function Grid({
+  children,
+  gap = "md",
+  equalHeight = false,
+  maxWidth,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [styles.grid, equalHeight && styles.equalHeight, className].filter(Boolean).join(" "),
+      style: {
+        gap: GAP_TOKEN[gap],
+        ...(maxWidth == null ? void 0 : maxWidth.base) != null ? { "--max-width-base": maxWidth.base } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.md) != null ? { "--max-width-md": maxWidth.md } : {},
+        ...(maxWidth == null ? void 0 : maxWidth.lg) != null ? { "--max-width-lg": maxWidth.lg } : {},
+        ...style
+      },
+      children
+    }
+  );
+}
+function GridItem({ children, base = 12, md, lg, className, style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [styles.item, className].filter(Boolean).join(" "),
+      style: {
+        "--span-base": base,
+        ...md != null ? { "--span-md": md } : {},
+        ...lg != null ? { "--span-lg": lg } : {},
+        ...style
+      },
+      children
+    }
+  );
+}
+
+export { Grid, GridItem };

package/dist/components/grid/Grid.module.css

@@ -0,0 +1,44 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  align-items: start;
+  max-width: var(--max-width-base);
+}
+
+.equalHeight {
+  align-items: stretch;
+}
+
+.item {
+  grid-column: span var(--span-base, 12);
+  min-inline-size: 0;
+}
+
+.equalHeight .item {
+  display: flex;
+}
+
+.equalHeight .item > * {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+@media (min-width: 768px) {
+  .grid {
+    max-width: var(--max-width-md, var(--max-width-base));
+  }
+
+  .item {
+    grid-column: span var(--span-md, var(--span-base, 12));
+  }
+}
+
+@media (min-width: 1200px) {
+  .grid {
+    max-width: var(--max-width-lg, var(--max-width-md, var(--max-width-base)));
+  }
+
+  .item {
+    grid-column: span var(--span-lg, var(--span-md, var(--span-base, 12)));
+  }
+}

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -0,0 +1,84 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var usePersistentState = require('../../hooks/usePersistentState');
+var Headline = require('./Headline');
+var styles = require('./Headline.module.css');
+var Button = require('../button/Button');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function CollapsibleHeadline({
+  header,
+  expanded,
+  onToggle,
+  controls,
+  addition,
+  storageKey,
+  defaultExpanded = true,
+  children,
+  size = 2,
+  variant = "muted",
+  weight = 400,
+  ...headlineProps
+}) {
+  const generatedId = react.useId();
+  const panelId = controls != null ? controls : generatedId;
+  const isControlled = expanded !== void 0;
+  const { value: internalExpanded, setValue: setInternalExpanded } = usePersistentState.usePersistentState({
+    initialValue: defaultExpanded,
+    storageKey,
+    isControlled,
+    validate: (stored) => typeof stored === "boolean"
+  });
+  const isExpanded = isControlled ? expanded : internalExpanded;
+  const handleToggle = () => {
+    const next = !isExpanded;
+    if (!isControlled) {
+      setInternalExpanded(next);
+    }
+    onToggle == null ? void 0 : onToggle();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.collapsibleRoot, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Headline.Headline,
+      {
+        ...headlineProps,
+        variant,
+        weight,
+        size,
+        addition,
+        children: [
+          header,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              shape: "round",
+              type: "button",
+              variant: "inline",
+              style: { padding: "var(--spacing-2xs)" },
+              "aria-expanded": isExpanded,
+              "aria-controls": panelId,
+              onClick: handleToggle,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.ChevronDown,
+                {
+                  "aria-hidden": true,
+                  className: [styles__default.default.toggleChevron, isExpanded ? styles__default.default.toggleChevronExpanded : ""].filter(Boolean).join(" ")
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { id: panelId, className: styles__default.default.collapsiblePanel, children })
+  ] });
+}
+
+exports.CollapsibleHeadline = CollapsibleHeadline;

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

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from 'react';
+import type { HeadlineProps } from './Headline';
+export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition' | 'children'> {
+    /** The headline text — always visible. */
+    header: React.ReactNode;
+    /** Controlled expanded state. When omitted, the component manages its own state. */
+    expanded?: boolean;
+    /** Called when the toggle is clicked. */
+    onToggle?: () => void;
+    /** id of the panel element, used for aria-controls. Generated automatically if omitted. */
+    controls?: string;
+    /** Extra content rendered between the headline text and the toggle button. */
+    addition?: React.ReactNode;
+    /**
+     * When set in uncontrolled mode, the component persists its expanded
+     * state to localStorage under this key.
+     */
+    storageKey?: string;
+    /**
+     * Initial expanded state when uncontrolled and no persisted storageKey
+     * value exists yet. Defaults to true.
+     */
+    defaultExpanded?: boolean;
+}
+export declare function CollapsibleHeadline({ header, expanded, onToggle, controls, addition, storageKey, defaultExpanded, children, size, variant, weight, ...headlineProps }: PropsWithChildren<CollapsibleHeadlineProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/headline/CollapsibleHeadline.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronDown } from 'lucide-react';
+import { useId } from 'react';
+import { usePersistentState } from '../../hooks/usePersistentState';
+import { Headline } from './Headline';
+import styles from './Headline.module.css';
+import { Button } from '../button/Button';
+
+function CollapsibleHeadline({
+  header,
+  expanded,
+  onToggle,
+  controls,
+  addition,
+  storageKey,
+  defaultExpanded = true,
+  children,
+  size = 2,
+  variant = "muted",
+  weight = 400,
+  ...headlineProps
+}) {
+  const generatedId = useId();
+  const panelId = controls != null ? controls : generatedId;
+  const isControlled = expanded !== void 0;
+  const { value: internalExpanded, setValue: setInternalExpanded } = usePersistentState({
+    initialValue: defaultExpanded,
+    storageKey,
+    isControlled,
+    validate: (stored) => typeof stored === "boolean"
+  });
+  const isExpanded = isControlled ? expanded : internalExpanded;
+  const handleToggle = () => {
+    const next = !isExpanded;
+    if (!isControlled) {
+      setInternalExpanded(next);
+    }
+    onToggle == null ? void 0 : onToggle();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.collapsibleRoot, children: [
+    /* @__PURE__ */ jsxs(
+      Headline,
+      {
+        ...headlineProps,
+        variant,
+        weight,
+        size,
+        addition,
+        children: [
+          header,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              shape: "round",
+              type: "button",
+              variant: "inline",
+              style: { padding: "var(--spacing-2xs)" },
+              "aria-expanded": isExpanded,
+              "aria-controls": panelId,
+              onClick: handleToggle,
+              children: /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  "aria-hidden": true,
+                  className: [styles.toggleChevron, isExpanded ? styles.toggleChevronExpanded : ""].filter(Boolean).join(" ")
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("div", { id: panelId, className: styles.collapsiblePanel, children })
+  ] });
+}
+
+export { CollapsibleHeadline };

package/dist/components/headline/Headline.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Headline.module.css');
+var severity = require('../../constants/severity');
+var Icon = require('../icon/Icon');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Headline({
+  size = 2,
+  marker,
+  disableMargin,
+  children,
+  severity: severity$1,
+  weight = 600,
+  subheader,
+  addition,
+  icon,
+  tone,
+  variant,
+  allowWrap = true,
+  id
+}) {
+  const Tag = `h${size}`;
+  const containerClassName = [styles__default.default.headlineContainer, tone ? styles__default.default[`tone-${tone}`] : ""].filter(Boolean).join(" ");
+  const headlineClassName = [
+    styles__default.default.headline,
+    disableMargin ? styles__default.default.noMargin : "",
+    marker ? styles__default.default.marker : "",
+    variant === "muted" ? styles__default.default["variant-muted"] : ""
+  ].filter(Boolean).join(" ");
+  const textClassName = [styles__default.default.text, allowWrap ? styles__default.default.wrap : styles__default.default.truncate].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headlineBlock, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headlineRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Tag,
+        {
+          id,
+          style: {
+            "--font-weight": weight,
+            "--marker-color": severity$1 ? severity.SeverityBgColor[severity$1] : void 0
+          },
+          className: headlineClassName,
+          children: [
+            icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: icon ? void 0 : severity$1 }) }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClassName, children })
+          ]
+        }
+      ),
+      addition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.addition, children: addition }) : null
+    ] }),
+    subheader ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.subheader, children: subheader }) : null
+  ] }) });
+}
+
+exports.Headline = Headline;

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

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+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;
+    severity?: Severity;
+    weight?: 400 | 500 | 600 | 700;
+    subheader?: React.ReactNode;
+    addition?: React.ReactNode;
+    icon?: React.ReactNode;
+    allowWrap?: boolean;
+    tone?: HeadlineTone;
+    variant?: HeadlineVariant;
+}
+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/headline/Headline.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './Headline.module.css';
+import { SeverityBgColor } from '../../constants/severity';
+import { Icon } from '../icon/Icon';
+
+function Headline({
+  size = 2,
+  marker,
+  disableMargin,
+  children,
+  severity,
+  weight = 600,
+  subheader,
+  addition,
+  icon,
+  tone,
+  variant,
+  allowWrap = true,
+  id
+}) {
+  const Tag = `h${size}`;
+  const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : ""].filter(Boolean).join(" ");
+  const headlineClassName = [
+    styles.headline,
+    disableMargin ? styles.noMargin : "",
+    marker ? styles.marker : "",
+    variant === "muted" ? styles["variant-muted"] : ""
+  ].filter(Boolean).join(" ");
+  const textClassName = [styles.text, allowWrap ? styles.wrap : styles.truncate].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxs("div", { className: styles.headlineBlock, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.headlineRow, children: [
+      /* @__PURE__ */ jsxs(
+        Tag,
+        {
+          id,
+          style: {
+            "--font-weight": weight,
+            "--marker-color": severity ? SeverityBgColor[severity] : void 0
+          },
+          className: headlineClassName,
+          children: [
+            icon || severity && !marker ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { customIcon: icon, severity: icon ? void 0 : severity }) }) : null,
+            /* @__PURE__ */ jsx("span", { className: textClassName, children })
+          ]
+        }
+      ),
+      addition ? /* @__PURE__ */ jsx("div", { className: styles.addition, children: addition }) : null
+    ] }),
+    subheader ? /* @__PURE__ */ jsx("div", { className: styles.subheader, children: subheader }) : null
+  ] }) });
+}
+
+export { Headline };