@dbcdk/react-components 0.0.96 → 0.0.97

package/dist/components/accordion/components/AccordionRow.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown } from 'lucide-react';
-import { useLayoutEffect, useRef, useState } from 'react';
-import { Headline } from '../../../components/headline/Headline';
-import styles from './AccordionRow.module.css';
-function useCollapsibleHeight(isOpen, shouldAnimate) {
-    const innerRef = useRef(null);
-    const [height, setHeight] = useState('0px');
-    useLayoutEffect(() => {
-        var _a, _b;
-        const el = innerRef.current;
-        if (!el)
-            return;
-        const prefersReduced = typeof window !== 'undefined' &&
-            ((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)')) === null || _b === void 0 ? void 0 : _b.matches);
-        // No animation on first render when default-open is used:
-        // just set the final height.
-        if (!shouldAnimate || prefersReduced) {
-            setHeight(isOpen ? 'auto' : '0px');
-            return;
-        }
-        if (isOpen) {
-            // 0 -> scrollHeight
-            setHeight('0px');
-            requestAnimationFrame(() => {
-                setHeight(`${el.scrollHeight}px`);
-            });
-        }
-        else {
-            // lock -> 0 (important when currently 'auto')
-            setHeight(`${el.scrollHeight}px`);
-            requestAnimationFrame(() => {
-                setHeight('0px');
-            });
-        }
-    }, [isOpen, shouldAnimate]);
-    function onTransitionEnd(e) {
-        if (e.propertyName !== 'height')
-            return;
-        if (!innerRef.current)
-            return;
-        if (isOpen)
-            setHeight('auto');
-    }
-    return { innerRef, height, onTransitionEnd };
-}
-export function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate = true, }) {
-    const isDisabled = !!item.disabled;
-    const buttonId = `${uid}-acc-btn-${index}`;
-    const panelId = `${uid}-acc-panel-${index}`;
-    const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
-    return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsx("div", { children: _jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => onToggle(index), disabled: isDisabled, children: [_jsxs("span", { className: styles.title, children: [item.headerIcon ? _jsx("span", { className: styles.icon, children: item.headerIcon }) : null, _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, subheader: item.subheader, allowWrap: isOpen, children: item.header }), item.headerAddition] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, {}) })] }) }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`, style: { height }, onTransitionEnd: onTransitionEnd, children: _jsx("div", { ref: innerRef, className: styles.content, children: item.children }) })] }));
-}

package/dist/components/accordion/components/AccordionRow.module.css

@@ -1,90 +0,0 @@
-.trigger {
-  all: unset;
-  box-sizing: border-box;
-
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-sm);
-
-  cursor: pointer;
-  user-select: none;
-
-  padding: var(--acc-trigger-py) var(--acc-trigger-px);
-  background: var(--color-bg-contextual-subtle);
-
-  min-width: 0;
-}
-
-.trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.disabled .trigger {
-  cursor: not-allowed;
-  color: var(--color-disabled-fg);
-}
-
-.title {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  min-width: 0;
-  flex: 1 1 auto;
-  overflow: hidden;
-}
-
-.icon {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-}
-
-.icon svg {
-  height: var(--icon-size-sm);
-  width: var(--icon-size-sm);
-}
-
-.chevron {
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
-  flex: 0 0 auto;
-  transition: transform var(--transition-normal) var(--ease-standard);
-}
-
-.chevron svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.open .chevron {
-  transform: rotate(180deg);
-}
-
-.panel {
-  overflow: hidden;
-  height: 0px;
-}
-
-/* Default: animate only when class is present */
-.animate {
-  transition: height var(--transition-slow) var(--ease-decelerate);
-}
-
-/* No animation (initial render default-open) */
-.noAnimate {
-  transition: none;
-}
-
-.content {
-  padding: var(--acc-content-py) 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .panel {
-    transition: none;
-  }
-}

package/dist/components/alert/Alert.js

@@ -1,17 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './Alert.module.css';
-import { Icon } from '../icon/Icon';
-export function Alert({ children, title, severity = 'neutral', customIcon, disableIcon = false, fullWidth = false, maxWidth = '72ch', role = 'status', }) {
-    const hasLeading = Boolean(customIcon) || !disableIcon;
-    return (_jsxs("div", { className: [
-            styles.container,
-            styles[severity],
-            fullWidth ? styles.fullWidth : '',
-            hasLeading ? styles.hasLeading : '',
-        ]
-            .filter(Boolean)
-            .join(' '), style: {
-            '--alert-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
-        }, role: role, children: [hasLeading ? (_jsx("div", { className: styles.leading, children: customIcon !== null && customIcon !== void 0 ? customIcon : _jsx(Icon, { severity: severity }) })) : null, _jsxs("div", { className: styles.content, children: [title ? _jsx("div", { className: styles.title, children: title }) : null, _jsx("div", { className: styles.body, children: children })] })] }));
-}

package/dist/components/alert/Alert.module.css

@@ -1,98 +0,0 @@
-.container {
-  --alert-bg: var(--color-bg-toolbar);
-  --alert-fg: var(--color-fg-default);
-  --alert-border: var(--color-border-subtle);
-
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-sm);
-  inline-size: min(100%, var(--alert-max-width, 72ch));
-  max-inline-size: 100%;
-  padding: var(--spacing-sm) var(--spacing-md);
-  border: 1px solid var(--alert-border);
-  border-radius: var(--border-radius-default);
-  background: var(--alert-bg);
-  color: var(--alert-fg);
-  box-sizing: border-box;
-}
-
-.fullWidth {
-  inline-size: 100%;
-}
-
-.leading {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  padding-block-start: 2px;
-}
-
-.leading svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-  color: currentColor;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xs);
-  min-width: 0;
-  flex: 1 1 auto;
-}
-
-.title,
-.body {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  white-space: normal;
-}
-
-.title {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-tight);
-}
-
-.body {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-}
-
-.neutral {
-  --alert-bg: var(--color-bg-toolbar);
-  --alert-fg: var(--color-fg-default);
-  --alert-border: var(--color-border-subtle);
-}
-
-.success {
-  --alert-bg: var(--color-status-success-bg);
-  --alert-fg: var(--color-status-success-fg);
-  --alert-border: var(--color-status-success-border);
-}
-
-.warning {
-  --alert-bg: var(--color-status-warning-bg);
-  --alert-fg: var(--color-status-warning-fg);
-  --alert-border: var(--color-status-warning-border);
-}
-
-.error {
-  --alert-bg: var(--color-status-error-bg);
-  --alert-fg: var(--color-status-error-fg);
-  --alert-border: var(--color-status-error-border);
-}
-
-.info {
-  --alert-bg: var(--color-status-info-bg);
-  --alert-fg: var(--color-status-info-fg);
-  --alert-border: var(--color-status-info-border);
-}
-
-.brand {
-  --alert-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
-  --alert-fg: var(--color-brand);
-  --alert-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
-}

package/dist/components/app-header/AppHeader.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styles from './AppHeader.module.css';
-export function AppHeader({ children, size = 'md' }) {
-    return (_jsx("header", { className: styles.header, children: _jsx("div", { className: styles.container, "data-size": size, children: children }) }));
-}

package/dist/components/app-header/AppHeader.module.css

@@ -1,74 +0,0 @@
-.header {
-  inline-size: 100%;
-  background-color: var(--color-bg-surface);
-}
-
-.container {
-  /* layout */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-lg);
-
-  /* sizing */
-  inline-size: 100%;
-  min-block-size: 60px;
-  box-sizing: border-box;
-
-  /* chrome */
-  color: var(--color-fg-default);
-
-  /* density-aware vertical rhythm */
-  padding-block: calc(var(--control-padding-y) + var(--density));
-}
-
-.container[data-size='lg'] {
-  min-block-size: 80px;
-}
-
-/* Optional content wrapper */
-.inner {
-  inline-size: min(100%, var(--container-xl));
-  margin-inline: auto;
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-lg);
-}
-
-/* Slots */
-.start,
-.center,
-.end {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-.center {
-  margin-inline: auto;
-}
-
-/* Interactive elements inside the header share focus visuals */
-.container a:focus-visible,
-.container button:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-/* Elevated header */
-.elevated {
-  border-block-end: 0;
-  box-shadow: var(--shadow-sm);
-}
-
-/* Transparent header */
-.transparent {
-  background-color: transparent;
-  border-block-end: 0;
-}
-
-/* Condensed density option */
-:root[data-density='compact'] .container {
-  padding-inline: var(--spacing-md);
-}

package/dist/components/attribute-chip/AttributeChip.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './AttributeChip.module.css';
-export function AttributeChip({ label, value, size = 'md', loading, }) {
-    return (_jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [_jsx("span", { className: styles.label, children: label }), _jsx("span", { className: styles.value, children: loading ? '—' : value === null || value === void 0 ? void 0 : value.toString() })] }));
-}

package/dist/components/attribute-chip/AttributeChip.module.css

@@ -1,65 +0,0 @@
-.container {
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  border-radius: var(--border-radius-default);
-  border: 1px solid var(--color-border-subtle);
-  overflow: hidden;
-  font-family: var(--font-family);
-  font-weight: var(--font-weight-default);
-  line-height: var(--line-height-tight);
-}
-
-.label,
-.value {
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-  padding-inline: var(--spacing-sm);
-}
-
-.label {
-  background: var(--color-bg-contextual);
-}
-
-.value {
-  background: var(--color-bg-contextual-subtle);
-  color: var(--color-fg-default);
-  font-weight: var(--font-weight-medium);
-}
-
-/* Optional: separator between label and value */
-.value {
-  border-left: 1px solid var(--color-border-subtle);
-}
-
-/* Sizes */
-.sm {
-  height: var(--component-size-xs);
-  font-size: var(--font-size-xs);
-}
-
-.md {
-  height: var(--component-size-sm);
-  font-size: var(--font-size-sm);
-}
-
-.lg {
-  height: var(--component-size-md);
-  font-size: var(--font-size-md);
-}
-
-.sm .label,
-.sm .value {
-  padding-inline: var(--spacing-xs);
-}
-
-.md .label,
-.md .value {
-  padding-inline: var(--spacing-sm);
-}
-
-.lg .label,
-.lg .value {
-  padding-inline: var(--spacing-md);
-}

package/dist/components/avatar/Avatar.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import styles from './Avatar.module.css';
-import { SeverityBgColor, SeverityTextColor } from '../../constants/severity';
-import { sizes } from '../../constants/sizes';
-export function Avatar({ image, imgSrc, imgAlt, fullName, color = 'brand', button, size = 'md', className, fullWidth = false, photographerCredit, ...rest }) {
-    const text = (() => {
-        if (!fullName)
-            return '';
-        const parts = fullName.trim().split(/\s+/);
-        if (parts.length === 1) {
-            return parts[0].charAt(0).toUpperCase();
-        }
-        // Use first letter of first and last part only
-        return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-    })();
-    const styleVars = {
-        '--bg': SeverityBgColor[color],
-        '--text': SeverityTextColor[color],
-        '--size': fullWidth ? '100%' : sizes[size],
-    };
-    // Unique id per component instance so multiple avatars don't clash
-    const pathId = React.useId();
-    const renderImage = () => {
-        if (image) {
-            // If it's a valid React element, merge our className; otherwise render as-is
-            if (React.isValidElement(image)) {
-                const mergedClass = [image.props.className, styles.image].filter(Boolean).join(' ');
-                return React.cloneElement(image, { className: mergedClass });
-            }
-            return _jsx("span", { className: styles.imageSlot, children: image });
-        }
-        if (imgSrc) {
-            return _jsx("img", { className: styles.image, src: imgSrc, alt: imgAlt });
-        }
-        const avatarSizeClass = [styles.avatar];
-        if (size === 'xs')
-            avatarSizeClass.push(styles['size-xs']);
-        if (size === 'sm')
-            avatarSizeClass.push(styles['size-sm']);
-        return (_jsx("span", { className: avatarSizeClass.join(' '), "aria-hidden": "true", children: text }));
-    };
-    if (button) {
-        return (_jsx("button", { type: "button", ...rest, className: [styles.container, styles.button, className].filter(Boolean).join(' '), style: styleVars, children: renderImage() }));
-    }
-    // Non-button: wrapper to overlay circular credit SVG
-    return (_jsxs("div", { className: [styles.wrapper, className].filter(Boolean).join(' '), style: styleVars, children: [_jsx("div", { className: styles.container, children: renderImage() }), photographerCredit && (_jsxs("svg", { className: styles.creditText, viewBox: "0 0 100 100", "aria-hidden": "true", focusable: "false", children: [_jsx("defs", { children: _jsx("path", { id: pathId, d: "\n                M 50, 50\n                m -42, 0\n                a 42,42 0 1,1 84,0\n                a 42,42 0 1,1 -84,0\n              " }) }), _jsx("text", { children: _jsx("textPath", { xlinkHref: `#${pathId}`, startOffset: "50%", textAnchor: "middle", children: photographerCredit }) })] }))] }));
-}

package/dist/components/avatar/Avatar.module.css

@@ -1,91 +0,0 @@
-.container {
-  inline-size: var(--size);
-  block-size: var(--size);
-  max-inline-size: var(--component-size-xl);
-  aspect-ratio: 1 / 1;
-  border-radius: var(--border-radius-round);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: var(--font-weight-normal);
-  overflow: hidden;
-}
-
-.container.button {
-  cursor: pointer;
-  border: 0;
-  padding: 0;
-  background: transparent; /* important */
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    opacity var(--transition-fast) var(--ease-standard);
-}
-
-.container.button:hover .avatar {
-  background-color: color-mix(in srgb, var(--bg) 25%, var(--color-bg-surface));
-}
-
-.container.button:active {
-  opacity: 0.8;
-}
-
-.avatar {
-  inline-size: 80%;
-  block-size: 80%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-
-  /* moved here */
-  background-color: color-mix(in srgb, var(--bg) 20%, var(--color-bg-surface));
-  color: var(--bg);
-
-  font-size: var(--font-size-sm);
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.avatar.size-xs,
-.avatar.size-sm {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-normal);
-}
-
-.image {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-  display: block;
-  border-radius: 50%; /* important if image fills avatar */
-}
-
-.imageSlot {
-  display: contents;
-}
-
-.wrapper {
-  position: relative;
-  display: inline-block;
-  inline-size: var(--size);
-  block-size: var(--size);
-  max-inline-size: var(--component-size-xl);
-  aspect-ratio: 1 / 1;
-  color: var(--text);
-}
-
-.creditText {
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  pointer-events: none;
-  fill: currentColor;
-}
-
-.creditText text {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import styles from './Breadcrumbs.module.css';
-export function Breadcrumbs({ items, ...navProps }) {
-    return (_jsx("nav", { className: styles.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: _jsx("ul", { children: items.map((item, index) => (_jsxs(Fragment, { children: [_jsxs("li", { children: [item.icon && item.icon, item.onClick ? (_jsx("button", { onClick: item.onClick, children: item.label })) : (_jsx("span", { children: item.label }))] }), index < items.length - 1 && _jsx("span", { className: styles.separator, children: "/" })] }, `breadcrumbItem-${item.label}-${index}`))) }) }));
-}

package/dist/components/breadcrumbs/Breadcrumbs.module.css

@@ -1,80 +0,0 @@
-.breadcrumbs {
-  font-family: var(--font-family);
-}
-
-.breadcrumbs ul {
-  display: flex;
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-size: var(--font-size-sm);
-}
-
-.breadcrumbs li {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-  padding-block: calc(var(--spacing-xxs) + var(--density));
-  padding-inline: 0;
-  color: var(--color-fg-default);
-  border-radius: var(--border-radius-sm);
-  position: relative;
-  transition:
-    color var(--transition-fast) var(--ease-standard),
-    background-color var(--transition-fast) var(--ease-standard);
-}
-
-.breadcrumbs li:hover button {
-  color: var(--color-fg-default);
-  background-color: var(--color-bg-contextual);
-  cursor: pointer;
-}
-
-.breadcrumbs li[aria-current='page'],
-.breadcrumbs li:last-of-type {
-  color: var(--color-fg-default);
-  cursor: default;
-}
-
-.breadcrumbs li[aria-current='page'] button,
-.breadcrumbs li:last-of-type button {
-  background-color: var(--color-bg-contextual) !important;
-  font-weight: var(--font-weight-medium);
-}
-
-.separator {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--spacing-xs);
-  color: var(--color-fg-subtle);
-  font-size: var(--font-size-md);
-}
-
-.breadcrumbs li svg {
-  inline-size: var(--icon-size-sm);
-  block-size: var(--icon-size-sm);
-}
-
-.breadcrumbs a,
-.breadcrumbs button,
-.breadcrumbs [role='link'] {
-  all: unset;
-  color: inherit;
-  border-radius: var(--border-radius-default);
-  background-color: var(--color-bg-contextual-subtle);
-  padding: var(--spacing-xxs) var(--spacing-sm);
-}
-
-.breadcrumbs a:focus-visible,
-.breadcrumbs button:focus-visible,
-.breadcrumbs [role='link']:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.breadcrumbs [aria-disabled='true'],
-.breadcrumbs .is-disabled {
-  color: var(--color-disabled-fg);
-  pointer-events: none;
-}