@dbcdk/react-components 0.0.95 → 0.0.97

package/dist/components/__stories__/story-components/Flex.module.css

@@ -1,317 +0,0 @@
-.container {
-  margin-inline: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  padding: 1.5rem;
-  color: var(--color-text);
-}
-
-.header {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.intro {
-  display: grid;
-  gap: 1rem;
-}
-
-.section {
-  display: grid;
-  gap: 1rem;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 1rem;
-}
-
-.card {
-  display: grid;
-  gap: 1rem;
-  padding: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-xs);
-}
-
-.cardHeader {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.classNameRow {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  flex-wrap: wrap;
-}
-
-.cardDescription,
-.paragraph {
-  margin: 0;
-  color: var(--color-text-secondary, #374151);
-}
-
-.h2 {
-  margin: 0;
-  margin-top: 0.75rem;
-  font-size: 1rem;
-  font-weight: 500;
-  color: #27272a;
-}
-
-.h2:first-child {
-  margin-top: 0;
-}
-
-.example {
-  margin-top: 0.25rem;
-}
-
-.list {
-  margin: 0.25rem 0 0 1rem;
-  display: grid;
-  gap: 0.5rem;
-}
-
-.code {
-  border-radius: var(--border-radius-default);
-  background: var(--color-bg-default);
-  padding: 0 var(--spacing-xs);
-  line-height: 1.5;
-  font-size: 12px;
-  font-family: var(--font-family-mono, monospace);
-  color: var(--color-text-secondary);
-  box-shadow: var(--shadow-xs);
-}
-
-.demoSurface {
-  min-height: 88px;
-  width: 100%;
-  padding: 0.75rem;
-  border-radius: 0.75rem;
-  border: 1px dashed var(--color-border-strong, var(--color-border));
-  background:
-    linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent),
-    repeating-linear-gradient(
-      90deg,
-      var(--color-bg-default) 0,
-      var(--color-bg-default) 24px,
-      transparent 24px,
-      transparent 48px
-    ),
-    var(--color-background);
-  background-size:
-    auto,
-    auto 100%,
-    auto;
-}
-
-.tallSurface {
-  min-height: 140px;
-}
-
-.centerSurface {
-  min-height: 120px;
-  padding: 0.75rem;
-  border-radius: 0.75rem;
-  border: 1px dashed var(--color-border-strong, var(--color-border));
-  background:
-    radial-gradient(circle at center, var(--color-bg-info) 0, transparent 70%),
-    repeating-linear-gradient(
-      90deg,
-      var(--color-bg-default) 0,
-      var(--color-bg-default) 24px,
-      transparent 24px,
-      transparent 48px
-    ),
-    var(--color-background);
-}
-
-.inlineRow {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.inlineSurface {
-  padding: 0.5rem;
-  border-radius: 0.75rem;
-  border: 1px dashed var(--color-border-strong, var(--color-border));
-  background:
-    repeating-linear-gradient(
-      90deg,
-      var(--color-bg-default) 0,
-      var(--color-bg-default) 24px,
-      transparent 24px,
-      transparent 48px
-    ),
-    var(--color-background);
-}
-
-.inlineLabel {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-secondary, #374151);
-}
-
-.demoBox,
-.fixedBox,
-.flexBehaviorBox {
-  min-width: 2.75rem;
-  min-height: 2.75rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.625rem;
-  background: var(--color-status-info-bg, var(--color-bg-selected));
-  color: var(--color-fg-default);
-  border: 1px solid var(--color-status-info-border, var(--color-border-selected));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  position: relative;
-  z-index: 1;
-}
-
-.tallBox {
-  min-height: 3.75rem;
-}
-
-.fixedBox {
-  width: 4.5rem;
-  flex: none;
-  background: var(--color-status-warning-bg, var(--opac-bg-default));
-  border-color: var(--color-status-warning-border, var(--color-border-default));
-}
-
-.flexBehaviorBox {
-  width: 4.5rem;
-  min-width: 0;
-  background: var(--color-bg-selected, var(--opac-bg-default));
-  border-color: var(--color-border-selected, var(--color-border-default));
-}
-
-.fixedBehaviorBox {
-  width: 4rem;
-  flex: none;
-  min-height: 2.75rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.625rem;
-  background: var(--color-status-warning-bg, var(--opac-bg-default));
-  color: var(--color-fg-default);
-  border: 1px solid var(--color-status-warning-border, var(--color-border-default));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  position: relative;
-  z-index: 1;
-}
-
-.growSurface {
-  max-width: 320px;
-}
-
-.shrinkSurface {
-  max-width: 208px;
-}
-
-.growSideBox {
-  width: 3rem;
-  flex: none;
-  min-height: 2.75rem;
-  padding: 0.5rem;
-  border-radius: 0.625rem;
-  background: var(--color-status-warning-bg, var(--opac-bg-default));
-  color: var(--color-fg-default);
-  border: 1px solid var(--color-status-warning-border, var(--color-border-default));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  position: relative;
-  z-index: 1;
-}
-
-.growMainBox {
-  width: 4rem;
-  min-width: 4rem;
-}
-
-.shrinkBox {
-  width: 8rem;
-  min-width: 0;
-  min-height: 2.75rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.625rem;
-  background: var(--color-bg-selected, var(--opac-bg-default));
-  color: var(--color-fg-default);
-  border: 1px solid var(--color-border-selected, var(--color-border-default));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  position: relative;
-  z-index: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.wrapSurface {
-  max-width: 220px;
-}
-
-.wideBox {
-  min-width: 5rem;
-  min-height: 2.75rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.625rem;
-  background: var(--color-status-info-bg, var(--color-bg-selected));
-  color: var(--color-fg-default);
-  border: 1px solid var(--color-status-info-border, var(--color-border-selected));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  position: relative;
-  z-index: 1;
-}
-
-.shortBox,
-.midBox {
-  min-width: 2.75rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.625rem;
-  background: var(--color-status-info-bg, var(--color-bg-selected));
-  color: var(--color-fg-default);
-  border: 1px solid var(--color-status-info-border, var(--color-border-selected));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  position: relative;
-  z-index: 1;
-}
-
-.shortBox {
-  min-height: 2.25rem;
-}
-
-.midBox {
-  min-height: 3.25rem;
-}
-
-@media (max-width: 640px) {
-  .container {
-    padding: 1rem;
-  }
-
-  .card {
-    padding: 0.875rem;
-  }
-}

package/dist/components/__stories__/story-components/Spacing.d.ts

@@ -1,6 +0,0 @@
-import type { JSX } from 'react';
-type SpacingMode = 'padding' | 'margin' | 'both';
-export declare function Spacing({ mode }: {
-    mode?: SpacingMode;
-}): JSX.Element;
-export {};

package/dist/components/__stories__/story-components/Spacing.js

@@ -1,76 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CopyButton } from '../../../components/copy-button/CopyButton';
-import { Headline } from '../../../components/headline/Headline';
-import styles from './Spacing.module.css';
-const SIZES = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'];
-const AXES = ['all', 'block', 'inline', 'top', 'bottom', 'start', 'end'];
-// Theme spacing values (px) to show in headers
-const SIZE_PX = {
-    xxs: '4px',
-    xs: '8px',
-    sm: '12px',
-    md: '16px',
-    lg: '24px',
-    xl: '32px',
-    '2xl': '48px',
-};
-// map axis -> class fragment for each kind
-const CLASS_PARTS = {
-    padding: {
-        all: 'p',
-        block: 'py',
-        inline: 'px',
-        top: 'pt',
-        bottom: 'pb',
-        start: 'ps',
-        end: 'pe',
-    },
-    margin: {
-        all: 'm',
-        block: 'my',
-        inline: 'mx',
-        top: 'mt',
-        bottom: 'mb',
-        start: 'ms',
-        end: 'me',
-    },
-};
-// Single-side helpers only go up to xl
-const HAS_SINGLE_SIDE_FOR = (size) => size !== '2xl';
-function makeClass(kind, axis, size) {
-    if ((axis === 'top' || axis === 'bottom' || axis === 'start' || axis === 'end') &&
-        !HAS_SINGLE_SIDE_FOR(size)) {
-        return null;
-    }
-    const part = CLASS_PARTS[kind][axis];
-    return `dbc-${part}-${size}`;
-}
-function Code({ children }) {
-    return _jsx("code", { className: styles.code, children: children });
-}
-const ContentBlock = ({ helperClass }) => (_jsxs("div", { className: `${styles.contentBlock} dbc-flex dbc-gap-xxs dbc-justify-center ${helperClass} dbc-items-center`, children: [helperClass, " ", _jsx(CopyButton, { text: helperClass, variant: "inline", size: "sm" })] }));
-function PaddingPreview({ cls }) {
-    return (_jsx("div", { className: `${styles.paddingPreview} ${cls}`, children: _jsx(ContentBlock, { helperClass: cls }) }));
-}
-function MarginPreview({ cls }) {
-    return (_jsx("div", { className: styles.marginCanvas, children: _jsx("div", { className: `${styles.marginBlock} ${cls}`, children: _jsx(ContentBlock, { helperClass: cls }) }) }));
-}
-function Cell({ kind, axis, size }) {
-    const cls = makeClass(kind, axis, size);
-    if (!cls)
-        return _jsx("div", { className: styles.unavailable, children: "\u2014" });
-    return (_jsx("div", { className: styles.cellInner, children: _jsx("div", { className: styles.cellPreview, children: kind === 'padding' ? _jsx(PaddingPreview, { cls: cls }) : _jsx(MarginPreview, { cls: cls }) }) }));
-}
-function Grid({ kind, title, severity }) {
-    return (_jsxs("section", { className: styles.section, children: [_jsx(Headline, { marker: true, severity: severity, disableMargin: true, size: 2, children: title }), _jsx("div", { className: styles.tableContainer, children: _jsxs("table", { className: styles.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: styles.axisCol, children: "Akse" }), SIZES.map(size => (_jsxs("th", { className: styles.sizeHead, children: [size, " ", _jsxs("span", { className: styles.sizePx, children: ["(", SIZE_PX[size], ")"] })] }, size)))] }) }), _jsx("tbody", { children: AXES.map(axis => (_jsxs("tr", { children: [_jsx("th", { className: styles.axisHead, children: axis }), SIZES.map(size => (_jsx("td", { className: styles.cell, children: _jsx(Cell, { kind: kind, axis: axis, size: size }) }, size)))] }, axis))) })] }) })] }));
-}
-export function Spacing({ mode = 'both' }) {
-    return (_jsxs("div", { className: styles.container, style: {
-            ['--pad-indicator']: 'var(--color-bg-info)',
-            ['--pad-border']: 'var(--color-info)',
-            ['--margin-indicator']: 'var(--color-bg-warning)',
-            ['--margin-border']: 'var(--color-warning)',
-            ['--dot-pad']: 'var(--color-bg-selected)',
-            ['--dot-mar']: 'var(--opac-bg-default)',
-        }, children: [_jsx("header", { className: styles.header, children: _jsx(Headline, { disableMargin: true, children: "Spacing-hj\u00E6lpere" }) }), _jsxs("section", { className: styles.intro, children: [_jsx("h2", { className: styles.h2, children: "Navngivningskonvention" }), _jsxs("p", { className: styles.paragraph, children: ["Spacing-hj\u00E6lpere f\u00F8lger et enkelt m\u00F8nster med ", _jsx("strong", { children: "prefix\u2013akse\u2013st\u00F8rrelse" }), ":"] }), _jsx("div", { className: styles.example, children: _jsx(Code, { children: "dbc-[prefix][axis?]-[size]" }) }), _jsxs("ul", { className: styles.list, children: [_jsxs("li", { children: [_jsx("strong", { children: "Prefix" }), ": ", _jsx(Code, { children: "p" }), " for ", _jsx("em", { children: "padding" }), ", ", _jsx(Code, { children: "m" }), " for", ' ', _jsx("em", { children: "margin" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Akse" }), " (valgfri): ", _jsx(Code, { children: "x" }), " = inline (venstre + h\u00F8jre),", ' ', _jsx(Code, { children: "y" }), " = blok (top + bund), eller enkeltsider ", _jsx(Code, { children: "t" }), " / ", _jsx(Code, { children: "b" }), " /", ' ', _jsx(Code, { children: "s" }), " / ", _jsx(Code, { children: "e" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "St\u00F8rrelse" }), ": \u00E9n af ", _jsx(Code, { children: "xxs" }), ", ", _jsx(Code, { children: "xs" }), ", ", _jsx(Code, { children: "sm" }), ",", ' ', _jsx(Code, { children: "md" }), ", ", _jsx(Code, { children: "lg" }), ", ", _jsx(Code, { children: "xl" }), ", ", _jsx(Code, { children: "2xl" }), "."] })] }), _jsxs("p", { className: styles.paragraph, children: ["Eksempel: ", _jsx(Code, { children: "dbc-px-md" }), " giver medium horizontal padding, mens", ' ', _jsx(Code, { children: "dbc-mt-lg" }), " giver stor top-margin."] })] }), (mode === 'both' || mode === 'padding') && (_jsx(Grid, { kind: "padding", title: "Padding", severity: "info" })), (mode === 'both' || mode === 'margin') && (_jsx(Grid, { kind: "margin", title: "Margin", severity: "warning" }))] }));
-}

package/dist/components/__stories__/story-components/Spacing.module.css

@@ -1,154 +0,0 @@
-/* Layout */
-.container {
-  margin-inline: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  padding: 1.5rem;
-  color: var(--color-text);
-}
-
-/* Intro copy */
-.intro {
-  display: grid;
-  gap: 0.5rem;
-}
-.paragraph {
-  color: var(--color-text-secondary, #374151);
-}
-.example {
-  margin-top: 0.25rem;
-}
-.list {
-  margin: 0.5rem 0 0 1rem;
-  display: grid;
-  gap: 0.25rem;
-}
-
-.section {
-  display: grid;
-  gap: 1rem;
-}
-.h2 {
-  font-size: 1rem;
-  font-weight: 500;
-  color: #27272a;
-}
-
-.tableContainer {
-  overflow: auto;
-  border-radius: 0.75rem;
-  border: 1px solid var(--color-border);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-xs);
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  overflow: auto;
-  font-size: var(--font-size-sm);
-}
-
-.axisCol {
-  width: 90px;
-  text-align: left;
-  padding: 0.625rem 0.75rem;
-  color: var(--color-text-muted);
-  font-weight: 500;
-  background: var(--color-background);
-}
-
-.axisHead {
-  text-align: left;
-  padding: 0.625rem 0.75rem;
-  color: var(--color-text-secondary, #374151);
-  font-weight: 500;
-  background: var(--opac-bg-light, rgba(0, 0, 0, 0.025));
-  position: sticky;
-  left: 0;
-  z-index: 1;
-}
-.sizeHead {
-  text-align: center;
-  padding: 0.5rem 0.5rem;
-  font-weight: 600;
-  color: var(--color-text, #1a1a1a);
-  white-space: nowrap;
-  background: var(--color-surface, #fff);
-  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
-}
-.sizePx {
-  font-weight: 400;
-  color: var(--color-text-muted, #5f6368);
-  margin-left: 0.25rem;
-}
-
-.table tbody tr:nth-child(odd) {
-  background: var(--bg-color);
-}
-.table tbody tr:nth-child(even) {
-  background: var(--opac-bg-default);
-}
-
-.cell {
-  vertical-align: middle;
-  padding: var(--spacing-xs);
-}
-
-.cellInner {
-  display: grid;
-  gap: var(--spacing-xxs);
-  align-items: center;
-  justify-items: center;
-}
-
-.cellPreview {
-  width: min(200px, 100%);
-}
-
-.code {
-  border-radius: var(--border-radius-default);
-  background: var(--color-bg-default);
-  padding: 0 var(--spacing-xs);
-  line-height: 1.5;
-  font-size: 12px;
-  font-family: var(--font-family-mono, monospace);
-  color: var(--color-text-secondary);
-  box-shadow: var(--shadow-xs);
-}
-
-.contentBlock {
-  border-radius: var(--border-radius-md, 0.375rem);
-  background: var(--color-background);
-  text-align: center;
-  font-size: var(--font-size-xs);
-  color: var(--color-text-secondary);
-  box-shadow: var(--shadow-xs);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.paddingPreview {
-  width: 100%;
-  border-radius: var(--border-radius-md, 0.375rem);
-  background: var(--pad-indicator, var(--color-bg-selected));
-  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
-  outline: 1px solid var(--pad-border, var(--color-border-selected));
-}
-
-.marginCanvas {
-  width: 100%;
-  position: relative;
-  display: inline-block;
-  border-radius: var(--border-radius-md, 0.375rem);
-  background: var(--margin-indicator, var(--opac-bg-default));
-  outline: 1px solid var(--margin-border, var(--color-border));
-}
-
-.marginBlock {
-  border-radius: var(--border-radius-md, 0.375rem);
-  background: var(--color-background, #fff);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
-}

package/dist/components/accordion/Accordion.js

@@ -1,70 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
-import styles from './Accordion.module.css';
-import { AccordionRow } from './components/AccordionRow';
-function uniqSorted(nums) {
-    return Array.from(new Set(nums)).sort((a, b) => a - b);
-}
-function normalizeMultiple(indexes) {
-    return uniqSorted((indexes !== null && indexes !== void 0 ? indexes : []).filter(n => Number.isFinite(n)));
-}
-export function Accordion({ items, mode = 'single', size = 'md', defaultOpenIndex = null, defaultOpenIndexes = [], openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }) {
-    const uid = useId();
-    const isControlled = mode === 'single' ? openIndex !== undefined : openIndexes !== undefined;
-    // Disable animation on initial render (for default open state).
-    const hasMountedRef = useRef(false);
-    useEffect(() => {
-        hasMountedRef.current = true;
-    }, []);
-    const [internalSingle, setInternalSingle] = useState(mode === 'single' ? defaultOpenIndex : null);
-    const [internalMultiple, setInternalMultiple] = useState(() => {
-        if (mode !== 'multiple')
-            return [];
-        if (defaultOpenIndexes === 'all')
-            return items.map((_, i) => i);
-        return normalizeMultiple(defaultOpenIndexes);
-    });
-    const currentOpenIndexes = useMemo(() => {
-        if (mode === 'single') {
-            const current = isControlled ? (openIndex !== null && openIndex !== void 0 ? openIndex : null) : internalSingle;
-            return current === null ? [] : [current];
-        }
-        return isControlled ? normalizeMultiple(openIndexes) : internalMultiple;
-    }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple]);
-    const openSet = useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
-    function commit(nextIndexes) {
-        if (mode === 'single') {
-            const next = nextIndexes.length ? nextIndexes[0] : null;
-            if (isControlled)
-                onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
-            else {
-                setInternalSingle(next);
-                onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
-            }
-            return;
-        }
-        const normalized = uniqSorted(nextIndexes);
-        if (isControlled)
-            onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
-        else {
-            setInternalMultiple(normalized);
-            onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
-        }
-    }
-    function toggle(index) {
-        const item = items[index];
-        if (!item || item.disabled)
-            return;
-        const isOpen = openSet.has(index);
-        if (mode === 'single') {
-            commit(isOpen ? [] : [index]);
-            return;
-        }
-        if (isOpen)
-            commit(currentOpenIndexes.filter(i => i !== index));
-        else
-            commit([...currentOpenIndexes, index]);
-    }
-    return (_jsx("div", { className: `${styles.container} ${styles[size]}`, children: items.map((item, i) => (_jsx(AccordionRow, { uid: uid, index: i, item: item, isOpen: openSet.has(i), onToggle: toggle, shouldAnimate: hasMountedRef.current }, i))) }));
-}

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

@@ -1,28 +0,0 @@
-.container {
-  border-radius: var(--border-radius-default);
-  background-color: var(--color-bg-surface);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  gap: var(--spacing-xs);
-}
-
-/* Size variables (consumed by AccordionRow) */
-.sm {
-  --acc-trigger-py: var(--spacing-xs);
-  --acc-trigger-px: var(--spacing-sm);
-  --acc-content-py: var(--spacing-sm);
-}
-
-.md {
-  --acc-trigger-py: var(--spacing-sm);
-  --acc-trigger-px: var(--spacing-md);
-  --acc-content-py: var(--spacing-md);
-}
-
-.lg {
-  --acc-trigger-py: var(--spacing-md);
-  --acc-trigger-px: var(--spacing-md);
-  --acc-content-py: var(--spacing-md);
-}