@dbcdk/react-components 0.0.167 → 0.0.169

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

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

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

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

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

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

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

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

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

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

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

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