@dbcdk/react-components 0.0.96 → 0.0.97

package/dist/components/table/tanstackTable.utils.js

@@ -1,175 +0,0 @@
-import { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX } from './table.utils';
-export function getColumnId(def, index) {
-    const d = def;
-    if (d.id != null && String(d.id).length > 0)
-        return String(d.id);
-    if (d.accessorKey != null && String(d.accessorKey).length > 0)
-        return String(d.accessorKey);
-    return `col_${index}`;
-}
-export function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
-    if (!(visibleColumnIds === null || visibleColumnIds === void 0 ? void 0 : visibleColumnIds.length))
-        return {};
-    const visible = new Set(visibleColumnIds);
-    const next = {};
-    defs.forEach((def, index) => {
-        const id = getColumnId(def, index);
-        next[id] = visible.has(id);
-    });
-    return next;
-}
-export function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
-    return defs.map((def, index) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const id = getColumnId(def, index);
-        const accessorKey = def.accessorKey;
-        const accessorFn = def.accessorFn;
-        const cell = def.cell;
-        const meta = ((_a = def.meta) !== null && _a !== void 0 ? _a : {});
-        let render;
-        if (typeof cell === 'function') {
-            render = (row) => cell({
-                row: { original: row },
-                getValue: () => accessorKey != null
-                    ? row[accessorKey]
-                    : accessorFn
-                        ? accessorFn(row)
-                        : undefined,
-            });
-        }
-        else if (accessorFn) {
-            render = (row) => accessorFn(row);
-        }
-        else if (accessorKey != null) {
-            render = (row) => row[accessorKey];
-        }
-        else {
-            render = () => null;
-        }
-        const isVisible = (_b = columnVisibility[id]) !== null && _b !== void 0 ? _b : true;
-        return {
-            id,
-            header: def.header,
-            accessor: accessorKey,
-            sortable: (_c = def.enableSorting) !== null && _c !== void 0 ? _c : !!accessorKey,
-            render,
-            hidden: !isVisible,
-            width: (_d = resolvedLayout[id]) === null || _d === void 0 ? void 0 : _d.width,
-            align: meta.align,
-            verticalAlign: meta.verticalAlign,
-            emptyPlaceholder: (_e = meta.emptyPlaceholder) !== null && _e !== void 0 ? _e : '-',
-            allowWrap: (_f = meta.allowWrap) !== null && _f !== void 0 ? _f : false,
-            severity: meta.severity,
-            divider: meta.divider,
-            allowOverflow: (_g = meta.allowOverflow) !== null && _g !== void 0 ? _g : false,
-        };
-    });
-}
-export function sortingEqual(a, b) {
-    const A = a === null || a === void 0 ? void 0 : a[0];
-    const B = b === null || b === void 0 ? void 0 : b[0];
-    if (!A && !B)
-        return true;
-    if (!A || !B)
-        return false;
-    return A.id === B.id && A.desc === B.desc;
-}
-export function getSortPropsFromSorting(sorting) {
-    const s = sorting === null || sorting === void 0 ? void 0 : sorting[0];
-    return {
-        sortById: s === null || s === void 0 ? void 0 : s.id,
-        sortDirection: s ? (s.desc ? 'desc' : 'asc') : null,
-    };
-}
-function clamp(value, min, max) {
-    const lowerBounded = Math.max(min, value);
-    if (max == null || !Number.isFinite(max))
-        return lowerBounded;
-    return Math.min(lowerBounded, max);
-}
-function toIntegerTrackWidths(tracks, targetWidth) {
-    const floored = tracks.map(track => ({
-        id: track.id,
-        width: Math.floor(track.width),
-        fraction: track.width - Math.floor(track.width),
-    }));
-    const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
-    let remainder = Math.max(0, targetWidth - baseTotal);
-    floored
-        .slice()
-        .sort((a, b) => b.fraction - a.fraction)
-        .forEach(track => {
-        if (remainder <= 0)
-            return;
-        track.width += 1;
-        remainder -= 1;
-    });
-    return Object.fromEntries(floored.map(track => [track.id, track.width]));
-}
-export function buildDistributedColumnWidths(args) {
-    const { table, hasSelection, defaultMinPx, columnSizing, availableWidth } = args;
-    const leaf = table.getVisibleLeafColumns();
-    const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
-    const tracks = leaf.map((c) => {
-        var _a, _b, _c, _d;
-        const def = c.columnDef;
-        const meta = ((_a = def.meta) !== null && _a !== void 0 ? _a : {});
-        const min = Math.max(1, Number((_b = def.minSize) !== null && _b !== void 0 ? _b : defaultMinPx));
-        const max = def.maxSize != null ? Math.max(min, Number(def.maxSize)) : undefined;
-        const resizedPxRaw = columnSizing[c.id];
-        const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : undefined;
-        if (resizedPx != null) {
-            return {
-                id: c.id,
-                width: resizedPx,
-                weight: 0,
-                max: resizedPx,
-                fixed: true,
-            };
-        }
-        const rawWeight = Number((_d = (_c = meta.weight) !== null && _c !== void 0 ? _c : def.size) !== null && _d !== void 0 ? _d : DEFAULT_COLUMN_PX);
-        const weight = Number.isFinite(rawWeight) && rawWeight > 0 ? rawWeight : DEFAULT_COLUMN_PX;
-        return {
-            id: c.id,
-            width: min,
-            weight,
-            max,
-            fixed: false,
-        };
-    });
-    const fixedWidth = selectionWidth + tracks.reduce((sum, track) => sum + track.width, 0);
-    let remaining = Math.max(0, availableWidth - fixedWidth);
-    let active = tracks.filter(track => !track.fixed && (track.max == null || track.width < track.max));
-    while (remaining > 0.5 && active.length > 0) {
-        const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
-        if (totalWeight <= 0)
-            break;
-        let consumed = 0;
-        const nextActive = [];
-        for (const track of active) {
-            const share = (remaining * track.weight) / totalWeight;
-            const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
-            const growth = Math.min(share, maxGrow);
-            track.width += growth;
-            consumed += growth;
-            if (track.max == null || track.width < track.max - 0.5) {
-                nextActive.push(track);
-            }
-        }
-        if (consumed <= 0.5)
-            break;
-        remaining -= consumed;
-        active = nextActive;
-    }
-    const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-    const targetTrackWidth = floatTrackTotal <= availableWidth - selectionWidth
-        ? Math.floor(floatTrackTotal)
-        : Math.ceil(floatTrackTotal);
-    const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
-    const totalWidth = selectionWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
-    return {
-        selectionWidth: hasSelection ? SELECTION_COLUMN_PX : undefined,
-        widths,
-        totalWidth,
-    };
-}

package/dist/components/tabs/Tabs.js

@@ -1,125 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, isValidElement, useCallback, useEffect, useId, useMemo, useState, } from 'react';
-import styles from './Tabs.module.css';
-import { Chip } from '../chip/Chip';
-import { Headline } from '../headline/Headline';
-const TabsItem = (_props) => {
-    // This never renders directly; parent consumes it.
-    return _jsx(_Fragment, {});
-};
-TabsItem.__TABS_SLOT__ = 'Item';
-function getFirstEnabledId(items) {
-    var _a;
-    return (_a = items.find(t => !t.hidden && !t.disabled)) === null || _a === void 0 ? void 0 : _a.id;
-}
-function normalizeFromChildren(children) {
-    const items = [];
-    Children.forEach(children, child => {
-        if (!isValidElement(child))
-            return;
-        const t = child.type;
-        if ((t === null || t === void 0 ? void 0 : t.__TABS_SLOT__) !== 'Item')
-            return;
-        const props = child.props;
-        items.push({
-            id: props.id,
-            header: props.header,
-            headerIcon: props.headerIcon,
-            disabled: props.disabled,
-            hidden: props.hidden,
-            badge: props.badge,
-            content: props.children,
-        });
-    });
-    return items;
-}
-export function Tabs({ header, subheader, variant, panelStyle = false, tabs, value, defaultValue, onValueChange, addition, disableTopPadding, children, }) {
-    const uid = useId();
-    // Data API wins if provided; otherwise parse <Tabs.Item>
-    const sourceTabs = useMemo(() => {
-        if (tabs && tabs.length)
-            return tabs;
-        return normalizeFromChildren(children);
-    }, [tabs, children]);
-    const visibleTabs = useMemo(() => sourceTabs.filter(t => !t.hidden), [sourceTabs]);
-    const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = useState(() => {
-        return defaultValue !== null && defaultValue !== void 0 ? defaultValue : getFirstEnabledId(visibleTabs);
-    });
-    const currentValue = isControlled ? value : internalValue;
-    const activeIndex = useMemo(() => {
-        if (!visibleTabs.length)
-            return -1;
-        const idx = visibleTabs.findIndex(t => t.id === currentValue);
-        return idx >= 0 ? idx : 0;
-    }, [visibleTabs, currentValue]);
-    const activeTab = activeIndex >= 0 ? visibleTabs[activeIndex] : undefined;
-    const setValue = useCallback((nextId) => {
-        const idx = visibleTabs.findIndex(t => t.id === nextId);
-        const tab = idx >= 0 ? visibleTabs[idx] : undefined;
-        if (!tab || tab.disabled)
-            return;
-        if (!isControlled)
-            setInternalValue(nextId);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextId, tab, idx);
-    }, [visibleTabs, isControlled, onValueChange]);
-    // If current tab disappears (hidden/removed) or becomes disabled, recover to first enabled.
-    useEffect(() => {
-        if (!visibleTabs.length)
-            return;
-        const current = currentValue;
-        const stillValid = visibleTabs.some(t => t.id === current && !t.disabled);
-        if (stillValid)
-            return;
-        const next = getFirstEnabledId(visibleTabs);
-        if (next === undefined)
-            return;
-        setValue(next);
-        // setValue already calls onValueChange; fine.
-        // For controlled usage, parent should update `value` accordingly.
-        // If parent doesn't, it will remain "stuck" by design.
-    }, [visibleTabs, currentValue, setValue]);
-    // Keyboard: roving tabindex + select-on-arrow
-    const onKeyDownTab = useCallback((e, index) => {
-        var _a;
-        const enabled = visibleTabs.filter(t => !t.disabled);
-        if (!enabled.length)
-            return;
-        // Map current index -> enabled index
-        const currentId = (_a = visibleTabs[index]) === null || _a === void 0 ? void 0 : _a.id;
-        const currentEnabledIndex = enabled.findIndex(t => t.id === currentId);
-        const focusAndSelect = (enabledIndex) => {
-            const nextTab = enabled[enabledIndex];
-            if (!nextTab)
-                return;
-            const btn = document.getElementById(`${uid}-tab-${String(nextTab.id)}`);
-            btn === null || btn === void 0 ? void 0 : btn.focus();
-            setValue(nextTab.id);
-        };
-        if (e.key === 'ArrowRight') {
-            e.preventDefault();
-            focusAndSelect((currentEnabledIndex + 1) % enabled.length);
-        }
-        else if (e.key === 'ArrowLeft') {
-            e.preventDefault();
-            focusAndSelect((currentEnabledIndex - 1 + enabled.length) % enabled.length);
-        }
-        else if (e.key === 'Home') {
-            e.preventDefault();
-            focusAndSelect(0);
-        }
-        else if (e.key === 'End') {
-            e.preventDefault();
-            focusAndSelect(enabled.length - 1);
-        }
-    }, [uid, visibleTabs, setValue]);
-    return (_jsxs("div", { className: styles.root, children: [header ? (_jsx("div", { className: [styles.headerContainer, disableTopPadding ? styles.disableTopPadding : '']
-                    .filter(Boolean)
-                    .join(' '), children: _jsx(Headline, { disableMargin: true, size: 2, subheader: subheader, addition: addition, children: header }) })) : null, _jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ''}`, children: [_jsx("div", { className: styles.tabList, role: "tablist", "aria-label": header !== null && header !== void 0 ? header : 'Tabs', children: visibleTabs.map((tab, index) => {
-                            const selected = index === activeIndex;
-                            const tabDomId = `${uid}-tab-${String(tab.id)}`;
-                            const panelDomId = `${uid}-panel-${String(tab.id)}`;
-                            return (_jsx("div", { className: `${styles.tab} ${selected ? styles.active : ''}`, children: _jsxs("button", { id: tabDomId, type: "button", className: styles.tabButton, role: "tab", "aria-selected": selected, "aria-controls": panelDomId, tabIndex: selected ? 0 : -1, disabled: tab.disabled, onClick: () => setValue(tab.id), onKeyDown: e => onKeyDownTab(e, index), children: [tab.headerIcon ? _jsx("span", { className: styles.icon, children: tab.headerIcon }) : null, _jsx("span", { className: styles.label, children: tab.header }), tab.badge ? (_jsx("span", { className: styles.badge, children: _jsx(Chip, { size: "sm", children: tab.badge.toLocaleString('da-DK') }) })) : null] }) }, tab.id));
-                        }) }), _jsx("div", { id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : undefined, role: "tabpanel", "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : undefined, className: styles.tabContent, children: activeTab === null || activeTab === void 0 ? void 0 : activeTab.content })] })] }));
-}
-Tabs.Item = TabsItem;

package/dist/components/tabs/Tabs.module.css

@@ -1,233 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  overflow: auto;
-}
-
-.headerContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-block: var(--spacing-lg);
-  gap: var(--spacing-md);
-}
-
-.headerContainer.disableTopPadding {
-  padding-block-start: 0;
-}
-
-/* Outer wrapper for tablist + content */
-.tabs {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  overflow: hidden;
-  min-height: 0;
-}
-
-/* Tablist */
-.tabList {
-  display: flex;
-  flex-wrap: wrap;
-  min-width: 0;
-}
-
-/* Individual tab wrapper */
-.tab {
-  display: flex;
-  flex-direction: column;
-  border-radius: 0;
-  border-block-end: 2px solid var(--color-border-default);
-}
-
-.active {
-  border-block-end-color: var(--color-brand);
-}
-
-/* Button */
-.tabButton {
-  font-size: var(--font-size-sm);
-  color: inherit;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xs);
-
-  white-space: nowrap;
-
-  background: none;
-  border: 0;
-  border-radius: 0;
-
-  padding-block: var(--spacing-sm);
-  padding-inline: var(--spacing-md);
-
-  cursor: pointer;
-
-  transition:
-    color var(--transition-fast) var(--ease-standard),
-    background-color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard);
-}
-
-.tabButton:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.tabButton:disabled {
-  cursor: not-allowed;
-  color: var(--color-disabled-fg);
-}
-
-/* Icon + label */
-.icon {
-  display: inline-flex;
-  align-items: center;
-  color: inherit;
-}
-
-.icon svg {
-  inline-size: var(--icon-size-md);
-  block-size: var(--icon-size-md);
-}
-
-.label {
-  display: inline-block;
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-}
-
-/* Content panel */
-.tabContent {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-}
-
-/* =========================
-   Filled variant
-   ========================= */
-
-.filled {
-  gap: 0;
-}
-
-.filled .tabList {
-  border-start-start-radius: var(--border-radius-default);
-  border-start-end-radius: var(--border-radius-default);
-  inline-size: fit-content;
-}
-
-.filled .tab {
-  border: var(--border-width-thin) solid transparent;
-  border-block-end: 0;
-  color: var(--color-fg-muted);
-  z-index: 3;
-  border-start-start-radius: var(--border-radius-default);
-  border-start-end-radius: var(--border-radius-default);
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard);
-}
-
-.filled .tab:not(.active):hover {
-  color: var(--color-brand);
-}
-
-.filled .tab.active {
-  background: var(--opac-bg-brand);
-  color: var(--color-brand);
-  border-color: var(--opac-bg-dark);
-}
-
-.filled .tabContent {
-  border: var(--border-width-thin) solid var(--opac-bg-dark);
-  background: var(--color-bg-surface);
-  padding: var(--spacing-lg);
-}
-
-/* =========================
-   Outlined variant
-   ========================= */
-
-.outlined {
-  gap: var(--spacing-md);
-}
-
-.outlined .tab {
-  color: var(--color-fg-muted);
-  border-block-end: 2px solid var(--color-border-default);
-  transition: color var(--transition-fast) var(--ease-standard);
-}
-
-.outlined .tab:not(.active):hover {
-  color: var(--color-brand);
-}
-
-.outlined .tab.active {
-  color: var(--color-brand);
-  border-block-end-color: var(--color-brand);
-}
-
-.outlined .tabContent {
-  background: transparent;
-  padding: 0;
-}
-
-/* =========================
-   Panel style modifier
-   ========================= */
-
-.panelStyle .tabList {
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-block-end: 0;
-}
-
-/* When panelStyle is on, tabs look “embedded” (no bottom border indicators) */
-.panelStyle .tab {
-  border-block-end: 0;
-}
-
-/* In filled mode, keep the filled content panel visuals (already handled above).
-   In outlined mode with panelStyle, give the content a panel container too. */
-.panelStyle.outlined .tabContent {
-  border: var(--border-width-thin) solid var(--color-border-default);
-  background: var(--color-bg-surface);
-  padding: var(--spacing-lg);
-}
-
-@media (max-width: 767px) {
-  .headerContainer {
-    padding-block: var(--spacing-md);
-  }
-
-  .tabButton {
-    padding-block: var(--spacing-sm);
-    padding-inline: var(--spacing-xs);
-  }
-
-  .filled .tabList {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-    inline-size: 100%;
-  }
-
-  .filled .tabContent,
-  .panelStyle.outlined .tabContent {
-    padding-block: var(--spacing-md);
-    padding-inline: 0;
-    border: 0;
-    border-radius: 0;
-  }
-
-  .panelStyle .tabList {
-    border: 0;
-  }
-}

package/dist/components/theme-button/ThemeButton.js

@@ -1,23 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Monitor, Moon, Palette, Sun } from 'lucide-react';
-import { Button } from '../../components/button/Button';
-import { Menu } from '../../components/menu/Menu';
-import { Popover } from '../../components/popover/Popover';
-import { useTheme } from '../../hooks/useTheme';
-const THEME_OPTIONS = [
-    { value: 'system', label: 'System', icon: _jsx(Monitor, { size: 16 }) },
-    { value: 'light', label: 'Lyst', icon: _jsx(Sun, { size: 16 }) },
-    { value: 'dark', label: 'Mørkt', icon: _jsx(Moon, { size: 16 }) },
-];
-export function ThemeMenuSection() {
-    const { theme, switchTheme } = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsxs(Menu.Header, { children: [_jsx(Palette, {}), "Udseende"] }), THEME_OPTIONS.map(option => (_jsx(Menu.RadioItem, { name: "theme", value: option.value, checked: theme === option.value, label: option.label, onValueChange: value => switchTheme(value) }, option.value)))] }));
-}
-export function ThemeButton({ size, variant = 'outlined' }) {
-    const { theme, switchTheme } = useTheme();
-    return (_jsx(Popover, { matchTriggerWidth: false, minWidth: "140px", trigger: (handleClick, chevron) => (_jsxs(Button, { variant: variant, size: size, onClick: handleClick, "aria-label": "Skift tema", "aria-haspopup": "menu", children: [_jsx(Palette, {}), chevron] })), children: close => (_jsxs(Menu, { children: [_jsx(Menu.Header, { children: "Udseende" }), THEME_OPTIONS.map(option => (_jsx(Menu.Item, { active: theme === option.value, children: _jsxs("button", { onClick: () => {
-                            switchTheme(option.value);
-                            close();
-                        }, children: [option.icon, option.label] }) }, option.value)))] })) }));
-}

package/dist/components/toast/Toast.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { X } from 'lucide-react';
-import styles from './Toast.module.css';
-import { Button } from '../button/Button';
-import { Headline } from '../headline/Headline';
-export function Toast({ title, subheader, message, severity = 'info', action, onClose, }) {
-    const showHeader = Boolean(title);
-    const showMessage = Boolean(message);
-    const canClose = severity !== 'neutral';
-    const isDismissibleNeutral = severity === 'neutral' && Boolean(onClose);
-    const CloseButton = onClose && canClose ? (_jsx(Button, { type: "button", variant: "inline", shape: "round", className: styles.closeButton, "aria-label": "Dismiss notification", onClick: onClose, children: _jsx(X, { className: styles.closeIcon, "aria-hidden": "true" }) })) : null;
-    return (_jsxs("div", { className: `${styles.toast} ${styles[severity]} ${isDismissibleNeutral ? styles.dismissibleNeutral : ''}`, role: "status", onClick: isDismissibleNeutral ? onClose : undefined, onKeyDown: isDismissibleNeutral
-            ? e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    onClose === null || onClose === void 0 ? void 0 : onClose();
-                }
-            }
-            : undefined, tabIndex: isDismissibleNeutral ? 0 : undefined, "aria-label": isDismissibleNeutral ? 'Luk notifikation' : undefined, children: [_jsxs("div", { className: styles.content, children: [showHeader && (_jsxs("div", { className: styles.row, children: [_jsx(Headline, { size: 4, severity: severity, disableMargin: true, subheader: subheader, children: title }), CloseButton] })), showMessage && (_jsxs("div", { className: styles.row, children: [_jsx("div", { className: styles.message, children: message }), !showHeader && CloseButton] }))] }), action && (_jsx("div", { className: styles.actions, children: _jsx(Button, { type: "button", variant: "primary", onClick: action.onClick, children: action.label }) }))] }));
-}