@dbcdk/react-components 0.0.96 → 0.0.98

package/dist/themes/dbc.css

@@ -0,0 +1,3 @@
+@import '../styles/themes/dbc/base.css';
+@import '../styles/themes/dbc/colors.css';
+@import '../index.css';

package/dist/themes/forfatterweb.css

@@ -0,0 +1,2 @@
+@import '../styles/themes/forfatterweb/light.css';
+@import '../index.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.96",
+  "version": "0.0.98",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",
@@ -14,9 +14,9 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -24,9 +24,7 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
-    "./components/*": "./dist/components/*",
-    "./icons/*": "./dist/icons/*",
-    "./hooks/*": "./dist/hooks/*",
+    "./themes/*": "./dist/themes/*",
     "./styles/themes/*": "./dist/styles/themes/*",
     "./styles.css": "./dist/styles/styles.css",
     "./assets/*": "./dist/assets/*",
@@ -35,6 +33,7 @@
       "import": "./dist/tanstack.js",
       "require": "./dist/tanstack.cjs"
     },
+    "./index.css": "./dist/index.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -43,9 +42,11 @@
   ],
   "scripts": {
     "clean": "rimraf dist",
-    "build": "npm run clean && npm run build:code && npm run postbuild",
-    "build:code": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "dev": "tsc -p tsconfig.build.json --watch",
+    "build": "npm run clean && npm run build:js && npm run build:types && npm run rewrite:paths && npm run postbuild",
+    "build:js": "tsup --config tsup.config.ts",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "rewrite:paths": "tsc-alias -p tsconfig.build.json",
+    "dev": "tsup --config tsup.config.ts --watch",
     "test": "vitest run",
     "format": "prettier . --write",
     "format:fix": "prettier . --write",

package/dist/assets/logo.js

@@ -1,2 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Logo = () => (_jsxs("svg", { id: "bbbad536-f254-4715-8d5c-86b6d7022b08", "data-name": "Logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 154 70", children: [_jsx("path", { d: "M73.13,1.4a16,16,0,0,0-9.31.67,14.12,14.12,0,0,0-4.63,3,13.42,13.42,0,0,0-3,4.55,15.21,15.21,0,0,0-1.07,5.75,16,16,0,0,0,1.17,6.33,12.73,12.73,0,0,0,3.22,4.56A14,14,0,0,0,64.13,29a16.32,16.32,0,0,0,5.52.93A14.79,14.79,0,0,0,72,29.76a16.17,16.17,0,0,0,2.24-.53,14,14,0,0,0,2.17-.87A2.11,2.11,0,0,0,77.6,26.8,2.42,2.42,0,0,0,77,24.72a2.12,2.12,0,0,0-1.4-.85,2.89,2.89,0,0,0-1.68.28,7.28,7.28,0,0,1-2.1.73,11.59,11.59,0,0,1-2.19.2A11.22,11.22,0,0,1,66,24.5a7.87,7.87,0,0,1-3-1.8,8.49,8.49,0,0,1-2-3,11.83,11.83,0,0,1-.71-4.29A11.27,11.27,0,0,1,61,11.52a8.48,8.48,0,0,1,1.84-3,8.12,8.12,0,0,1,2.93-2A11.14,11.14,0,0,1,71.9,6.1a10.21,10.21,0,0,1,2,.69,3.1,3.1,0,0,0,1.68.32A1.83,1.83,0,0,0,77,6.3a2.47,2.47,0,0,0,.58-2.06,2.14,2.14,0,0,0-1.23-1.66,14.22,14.22,0,0,0-3.2-1.18", fill: "var(--color-brand)" }), _jsx("path", { d: "M51.82,20.92A9.6,9.6,0,0,1,51,25.29a6.71,6.71,0,0,1-2.29,2.63,8.77,8.77,0,0,1-3,1.27,15,15,0,0,1-3.12.35H32.43A2.43,2.43,0,0,1,30,27.07V3.67A2.43,2.43,0,0,1,32.43,1.2h10.2q3.88,0,5.79,1.82a7.12,7.12,0,0,1,1.9,5.39,6,6,0,0,1-.93,3.34,5.93,5.93,0,0,1-2.45,2.08,11,11,0,0,1,1.38.67,7.19,7.19,0,0,1,2.51,2.43A7.33,7.33,0,0,1,51.82,20.92Zm-6-2.64a3.17,3.17,0,0,0-1.74-1,10,10,0,0,0-1.86-.2h-7v7.81h7.29a4.25,4.25,0,0,0,3-1,3.84,3.84,0,0,0,1.09-3A3.88,3.88,0,0,0,45.83,18.28ZM44.19,6.77A3.25,3.25,0,0,0,41.9,6H35.22v6.31H42a3.18,3.18,0,0,0,2.11-.77,2.71,2.71,0,0,0,.93-2.22A3.26,3.26,0,0,0,44.19,6.77Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M3.47,1.2A2.43,2.43,0,0,0,1,3.67v23.4a2.43,2.43,0,0,0,2.47,2.47h9.67a11.16,11.16,0,0,0,6.62-1.91,11.93,11.93,0,0,0,4.11-5.12,17.57,17.57,0,0,0,1.42-7.14,18.88,18.88,0,0,0-.79-5.49,13.75,13.75,0,0,0-2.35-4.53,10.65,10.65,0,0,0-3.83-3,11.74,11.74,0,0,0-5.18-1.1ZM20,15.37a14.37,14.37,0,0,1-.75,4.72,7.58,7.58,0,0,1-2.37,3.48,6.44,6.44,0,0,1-4.17,1.31H6.06v-19h6.68a6.34,6.34,0,0,1,5.54,2.85,9.2,9.2,0,0,1,1.32,3A15.15,15.15,0,0,1,20,15.37Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M151.61,64.53a2.45,2.45,0,0,0-1.76-.67H139.29V42.73a2.32,2.32,0,0,0-.75-1.76,2.44,2.44,0,0,0-1.72-.71A2.55,2.55,0,0,0,135,41a2.34,2.34,0,0,0-.73,1.76v23.4a2.43,2.43,0,0,0,2.47,2.47h13.15a2.49,2.49,0,0,0,1.76-.67,2.2,2.2,0,0,0,.71-1.68A2.23,2.23,0,0,0,151.61,64.53Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M129.85,65.44,119.9,41.72a2.51,2.51,0,0,0-.91-1.2,2.42,2.42,0,0,0-1.36-.42,2.14,2.14,0,0,0-1.44.36,2.72,2.72,0,0,0-1,1.26l-10.08,24.2a2.73,2.73,0,0,0-.12.77,2.2,2.2,0,0,0,.53,1.5,2,2,0,0,0,1.62.61,2.09,2.09,0,0,0,1.27-.43,2.49,2.49,0,0,0,.87-1.19l2.1-4.94h12.07l2.1,4.9a2.9,2.9,0,0,0,.91,1.21,2.11,2.11,0,0,0,1.32.45,2.32,2.32,0,0,0,2.27-2.39A2.62,2.62,0,0,0,129.85,65.44Zm-16.48-7.85,4-9.48,4.06,9.48Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M107,40.91a2.52,2.52,0,0,0-1.76-.65h-18a2.55,2.55,0,0,0-1.76.63,2.15,2.15,0,0,0-.71,1.68,2.2,2.2,0,0,0,.71,1.7,2.52,2.52,0,0,0,1.76.65h6.35V66.13a2.39,2.39,0,0,0,.73,1.76,2.58,2.58,0,0,0,1.86.71,2.7,2.7,0,0,0,1.93-.71,2.34,2.34,0,0,0,.75-1.76V44.92h6.35a2.55,2.55,0,0,0,1.76-.63,2.15,2.15,0,0,0,.71-1.68A2.2,2.2,0,0,0,107,40.91Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M80.84,41a2.26,2.26,0,0,0-1.72-.71,3.74,3.74,0,0,0-1.74.36l-6.11,3.65A2.29,2.29,0,0,0,70,46.37a2.48,2.48,0,0,0,.68,1.68,2.2,2.2,0,0,0,1.74.79,2.52,2.52,0,0,0,1.3-.36L76.25,47V66.13A2.35,2.35,0,0,0,77,67.89a2.55,2.55,0,0,0,1.86.71,2.69,2.69,0,0,0,1.92-.71,2.34,2.34,0,0,0,.75-1.76V42.73A2.45,2.45,0,0,0,80.84,41Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M67.3,54a2.34,2.34,0,0,0-1.74-.71H58.92a2.44,2.44,0,0,0-1.76.69,2.51,2.51,0,0,0,0,3.48,2.44,2.44,0,0,0,1.76.69h3.81V63.4a11.67,11.67,0,0,1-2,.5,16.72,16.72,0,0,1-2.68.24,9.1,9.1,0,0,1-4.79-1.31,9.81,9.81,0,0,1-4.72-8.4,9.59,9.59,0,0,1,1.28-4.88A9.75,9.75,0,0,1,53.24,46,9,9,0,0,1,58,44.71a10.82,10.82,0,0,1,2.39.25,11.47,11.47,0,0,1,2.15.68,3.18,3.18,0,0,0,.67.25,3.05,3.05,0,0,0,.66.08,2.07,2.07,0,0,0,1.66-.77,2.63,2.63,0,0,0,.65-1.74,2.27,2.27,0,0,0-1.21-2,13.36,13.36,0,0,0-3.28-1.21,16.63,16.63,0,0,0-3.69-.4A14.45,14.45,0,0,0,52.29,41a14.63,14.63,0,0,0-4.7,3.14,14.82,14.82,0,0,0-3.18,4.63,14.53,14.53,0,0,0,0,11.33,14.89,14.89,0,0,0,7.88,7.78A14.62,14.62,0,0,0,58,69a15.78,15.78,0,0,0,4.64-.67,17.19,17.19,0,0,0,4.07-1.8,3.49,3.49,0,0,0,.87-.85A2.23,2.23,0,0,0,68,64.35V55.76A2.44,2.44,0,0,0,67.3,54Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M37.94,41a2.28,2.28,0,0,0-1.72-.71,3.69,3.69,0,0,0-1.74.36l-6.12,3.65a2.31,2.31,0,0,0-1.25,2.1,2.49,2.49,0,0,0,.69,1.68,2.2,2.2,0,0,0,1.74.79,2.46,2.46,0,0,0,1.29-.36L33.34,47V66.13a2.35,2.35,0,0,0,.73,1.76,2.58,2.58,0,0,0,1.86.71,2.7,2.7,0,0,0,1.93-.71,2.36,2.36,0,0,0,.74-1.76V42.73A2.48,2.48,0,0,0,37.94,41Z", fill: "var(--color-brand)" }), _jsx("path", { d: "M3.47,40.26A2.43,2.43,0,0,0,1,42.73v23.4A2.43,2.43,0,0,0,3.47,68.6h9.67a11.16,11.16,0,0,0,6.62-1.91,12,12,0,0,0,4.11-5.12,17.57,17.57,0,0,0,1.42-7.14,18.83,18.83,0,0,0-.79-5.49,13.75,13.75,0,0,0-2.35-4.53,10.78,10.78,0,0,0-3.83-3.06,11.74,11.74,0,0,0-5.18-1.09ZM20,54.43a14.27,14.27,0,0,1-.75,4.71,7.48,7.48,0,0,1-2.37,3.48,6.39,6.39,0,0,1-4.17,1.32H6.06v-19h6.68a6.65,6.65,0,0,1,3.28.76,6.65,6.65,0,0,1,2.26,2.09,9.24,9.24,0,0,1,1.32,3A15.29,15.29,0,0,1,20,54.43Z", fill: "var(--color-brand)" })] }));

package/dist/components/__stories__/_data/table.d.ts

@@ -1,15 +0,0 @@
-import type { JSX } from 'react';
-import { ColumnItem } from '../../../components/table/Table.types';
-type HarvestRunRow = {
-    runId: string;
-    source: string;
-    started: string;
-    status: 'Completed' | 'Running' | 'Failed';
-    updated: number;
-    warnings: number;
-    failed: number;
-};
-export declare const STORY_TABLE_DATA: () => HarvestRunRow[];
-export declare const STORY_TABLE_COLUMNS: ColumnItem<HarvestRunRow>[];
-export declare const SampleTable: () => JSX.Element;
-export {};

package/dist/components/__stories__/_data/table.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle } from '../../../components/circle/Circle';
-import { Table } from '../../../components/table/Table';
-const sources = ['onix.vendor-x', 'onix.vendor-y', 'cover.provider-z'];
-const statuses = ['Completed', 'Running', 'Failed'];
-function randomInt(min, max) {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-function randomDate(start, end) {
-    const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
-    return date;
-}
-function pad(n) {
-    return n < 10 ? '0' + n : n;
-}
-function formatDate(date) {
-    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:00`;
-}
-function generateRandomRow() {
-    const date = randomDate(new Date(2026, 0, 27, 3), new Date(2026, 0, 27, 23));
-    const source = sources[randomInt(0, sources.length - 1)];
-    const status = statuses[randomInt(0, statuses.length - 1)];
-    return {
-        runId: `harvest:${formatDate(date).replace(' ', 'T')}`,
-        source,
-        started: formatDate(date),
-        status,
-        updated: status === 'Failed' ? 0 : randomInt(800, 2000),
-        warnings: randomInt(0, 40),
-        failed: status === 'Failed' ? randomInt(1, 5) : randomInt(0, 2),
-    };
-}
-export const STORY_TABLE_DATA = () => Array.from({ length: randomInt(10, 25) }, _ => generateRandomRow());
-export const STORY_TABLE_COLUMNS = [
-    { id: 'runId', header: 'Kørsels-ID', accessor: 'runId', sortable: true },
-    { id: 'source', header: 'Kilde', accessor: 'source', sortable: true },
-    { id: 'started', header: 'Startet', accessor: 'started', sortable: true },
-    {
-        id: 'status',
-        header: 'Status',
-        accessor: 'status',
-        sortable: true,
-        render: (row) => (_jsxs("span", { className: "dbc-flex dbc-flex-row dbc-flex-wrap dbc-gap-xs", children: [row.status === 'Completed' && (_jsx(Circle, { size: "xs", severity: "success", children: "Fuldf\u00F8rt" })), row.status === 'Running' && (_jsx(Circle, { pulse: true, size: "xs", severity: "info", children: "K\u00F8rer" })), row.status === 'Failed' && (_jsx(Circle, { size: "xs", severity: "error", children: "Fejlet" }))] })),
-    },
-    {
-        id: 'updated',
-        header: 'Opdateret',
-        accessor: 'updated',
-        sortable: true,
-        align: 'right',
-    },
-    { id: 'warnings', header: 'Advarsler', accessor: 'warnings', sortable: true, align: 'right' },
-    { id: 'failed', header: 'Fejlet', accessor: 'failed', sortable: true, align: 'right' },
-];
-export const SampleTable = () => (_jsx(Table, { fillViewport: true, data: STORY_TABLE_DATA(), columns: STORY_TABLE_COLUMNS, dataKey: "runId", variant: "embedded" }));

package/dist/components/__stories__/_data/tabs.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-import { TabItem } from '../../../components/tabs/Tabs';
-export declare const tabItems: TabItem[];
-export declare const tabArgs: {
-    tabs: TabItem[];
-    variant: 'filled' | 'outlined';
-    header: string;
-    addition: ReactNode;
-};

package/dist/components/__stories__/_data/tabs.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Hourglass, Undo2 } from 'lucide-react';
-import { Button } from '../../../components/button/Button';
-import { Icon } from '../../../components/icon/Icon';
-import { SampleTable } from './table';
-export const tabItems = [
-    {
-        header: 'Afvist af anmelder',
-        id: 1,
-        headerIcon: _jsx(Icon, { severity: "error" }),
-        content: _jsx(SampleTable, {}),
-    },
-    {
-        header: 'Afventer godkendelse',
-        id: 2,
-        headerIcon: _jsx(Hourglass, {}),
-        content: _jsx(SampleTable, {}),
-    },
-    {
-        header: 'Retur til redigering',
-        id: 3,
-        headerIcon: _jsx(Undo2, {}),
-        content: _jsx(SampleTable, {}),
-    },
-];
-export const tabArgs = {
-    tabs: tabItems,
-    variant: 'filled',
-    header: 'Sagsoversigt',
-    addition: _jsx(Button, { children: "Se historik" }),
-};

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

@@ -1,11 +0,0 @@
-import type { ReactNode } from 'react';
-export declare const textSizes: {
-    name: string;
-    value: string;
-}[];
-export declare const textColors: {
-    name: string;
-    value: string;
-    backgroundColor: string | undefined;
-}[];
-export declare function Colors(): ReactNode;

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

@@ -1,96 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Select } from '../../../components/forms/select/Select';
-import { Headline } from '../../../components/headline/Headline';
-import styles from './Colors.module.css';
-const colors = [
-    {
-        name: 'Brand',
-        value: '--color-brand',
-        textColor: 'var(--color-fg-on-brand)',
-        hoverColor: 'var(--color-brand-hover)',
-    },
-    {
-        name: 'Success',
-        value: '--color-status-success',
-        textColor: 'var(--color-fg-on-strong)',
-        // no dedicated hover token for status colors in the new theme
-        hoverColor: 'var(--color-status-success)',
-    },
-    {
-        name: 'Info',
-        value: '--color-status-info',
-        textColor: 'var(--color-fg-on-strong)',
-        hoverColor: 'var(--color-status-info)',
-    },
-    {
-        name: 'Warning',
-        value: '--color-status-warning',
-        textColor: 'var(--color-fg-on-strong)',
-        hoverColor: 'var(--color-status-warning)',
-    },
-    {
-        name: 'Error',
-        value: '--color-status-error',
-        textColor: 'var(--color-fg-on-strong)',
-        hoverColor: 'var(--color-status-error)',
-    },
-    {
-        name: 'Success background',
-        value: '--color-status-success-bg',
-        textColor: 'var(--color-status-success-fg)',
-        hoverColor: 'var(--color-status-success-bg)',
-    },
-    {
-        name: 'Info background',
-        value: '--color-status-info-bg',
-        textColor: 'var(--color-status-info-fg)',
-        hoverColor: 'var(--color-status-info-bg)',
-    },
-    {
-        name: 'Warning background',
-        value: '--color-status-warning-bg',
-        textColor: 'var(--color-status-warning-fg)',
-        hoverColor: 'var(--color-status-warning-bg)',
-    },
-    {
-        name: 'Error background',
-        value: '--color-status-error-bg',
-        textColor: 'var(--color-status-error-fg)',
-        hoverColor: 'var(--color-status-error-bg)',
-    },
-];
-export const textSizes = [
-    { name: 'Extra small', value: '--font-size-xs' },
-    { name: 'Small', value: '--font-size-sm' },
-    { name: 'Medium', value: '--font-size-md' },
-    { name: 'Large', value: '--font-size-lg' },
-];
-export const textColors = [
-    { name: 'Text Default', value: '--color-fg-default', backgroundColor: undefined },
-    { name: 'Text Secondary', value: '--color-fg-muted', backgroundColor: undefined },
-    { name: 'Text Muted', value: '--color-fg-subtle', backgroundColor: undefined },
-    {
-        name: 'Text Inverse',
-        value: '--color-fg-on-strong',
-        backgroundColor: 'var(--color-fg-default)',
-    },
-];
-const fontWeights = [
-    { label: 'Default', value: 'var(--font-weight-default)' }, // <- fixed missing ')'
-    { label: 'Medium', value: 'var(--font-weight-medium)' },
-    { label: 'Bold', value: 'var(--font-weight-bold)' },
-];
-const headerSizes = [1, 2, 3, 4, 5, 6];
-export function Colors() {
-    const [fontWeight, setFontWeight] = useState(fontWeights[0].value);
-    return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md", children: [_jsx(Headline, { children: "Colors" }), _jsx("div", { className: `dbc-flex dbc-gap-sm dbc-flex-wrap ${styles.container}`, style: { width: '100%' }, children: colors.map(color => (_jsx("div", { className: styles.colorItem, style: {
-                        '--bgColor': `var(${color.value})`,
-                        '--textColor': color.textColor,
-                    }, children: color.name }, color.name))) }), _jsxs("div", { children: [_jsx(Headline, { addition: _jsx(Select, { selectedValue: fontWeight, onChange: e => setFontWeight(e), options: fontWeights }), children: "Typography" }), textColors.map(color => (_jsx("div", { className: "dbc-flex dbc-gap-sm", children: textSizes.map(size => (_jsxs("div", { className: styles.textColorItem, style: {
-                                '--textColor': `var(${color.value})`,
-                                '--bgColor': color.backgroundColor ? color.backgroundColor : 'transparent',
-                                '--fontSize': `var(${size.value})`,
-                                '--fontWeight': fontWeight,
-                            }, children: [color.name, " - ", size.name] }, `${color.name}-${size.name}`))) }, color.name))), _jsx("div", { className: "dbc-flex dbc-gap-sm", children: headerSizes.map(size => (_jsxs(Headline, { size: size, children: ["Header ", size] }, `header-size-${size}`))) })] })] }));
-}

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

@@ -1,27 +0,0 @@
-.colorItem {
-  width: calc(100% / 3);
-  background-color: var(--bgColor);
-  padding: var(--spacing-md);
-  color: var(--textColor);
-  border-radius: var(--border-radius-default);
-  &:hover {
-    opacity: 0.8;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-  }
-}
-
-.textColorItem {
-  width: calc(100% / 3);
-  font-size: var(--fontSize);
-  background-color: var(--bgColor);
-  font-weight: var(--fontWeight);
-  padding: var(--spacing-md);
-  color: var(--textColor);
-  border-radius: var(--border-radius-default);
-  &:hover {
-    opacity: 0.8;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-  }
-}

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

@@ -1,2 +0,0 @@
-import type { JSX } from 'react';
-export declare function ComponentSizes(): JSX.Element;

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Headline } from '../../../components/headline/Headline';
-const TOKENS = [
-    { name: '2xs', token: '--component-size-2xs' },
-    { name: 'xxs', token: '--component-size-xxs' },
-    { name: 'xs', token: '--component-size-xs' },
-    { name: 'sm', token: '--component-size-sm' },
-    { name: 'md', token: '--component-size-md' },
-    { name: 'lg', token: '--component-size-lg' },
-];
-function Swatch({ token, name }) {
-    return (_jsxs("div", { style: {
-            display: 'grid',
-            gap: 8,
-            justifyItems: 'start',
-            minWidth: 120,
-        }, children: [_jsx("div", { style: { fontSize: 'var(--font-size-xs)', color: 'var(--color-fg-muted)' }, children: name }), _jsx("div", { style: {
-                    width: `var(${token})`,
-                    height: `var(${token})`,
-                    borderRadius: 'var(--border-radius-default)',
-                    background: 'var(--color-brand)',
-                } }), _jsx("code", { style: { fontSize: 'var(--font-size-xs)' }, children: token })] }));
-}
-export function ComponentSizes() {
-    return (_jsxs("div", { style: { display: 'grid', gap: 16 }, children: [_jsx(Headline, { disableMargin: true, children: "Komponentst\u00F8rrelser" }), _jsx("p", { style: { margin: 0, color: 'var(--color-fg-muted)' }, children: "Tokens til faste komponenth\u00F8jder og st\u00F8rrelser, som bruges p\u00E5 tv\u00E6rs af inputfelter, chips, indikatorer og andre UI-elementer." }), _jsx("div", { style: { display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'end' }, children: TOKENS.map(item => (_jsx(Swatch, { token: item.token, name: item.name }, item.token))) })] }));
-}

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

@@ -1,2 +0,0 @@
-import type { JSX } from 'react';
-export declare function Elevation(): JSX.Element;

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

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Headline } from '../../../components/headline/Headline';
-const SHADOWS = [
-    { name: 'xs', token: '--shadow-xs' },
-    { name: 'sm', token: '--shadow-sm' },
-    { name: 'md', token: '--shadow-md' },
-    { name: 'lg', token: '--shadow-lg' },
-    { name: 'xl', token: '--shadow-xl' },
-];
-const RADII = [
-    { name: 'sm', token: '--border-radius-sm' },
-    { name: 'default', token: '--border-radius-default' },
-    { name: 'md', token: '--border-radius-md' },
-    { name: 'lg', token: '--border-radius-lg' },
-    { name: 'xl', token: '--border-radius-xl' },
-    { name: 'rounded', token: '--border-radius-rounded' },
-];
-export function Elevation() {
-    return (_jsxs("div", { style: { display: 'grid', gap: 24 }, children: [_jsxs("section", { style: { display: 'grid', gap: 16 }, children: [_jsx(Headline, { disableMargin: true, children: "Skygger" }), _jsx("div", { style: { display: 'flex', gap: 20, flexWrap: 'wrap' }, children: SHADOWS.map(item => (_jsxs("div", { style: {
-                                display: 'grid',
-                                gap: 8,
-                                width: 140,
-                            }, children: [_jsx("div", { style: {
-                                        height: 72,
-                                        borderRadius: 'var(--border-radius-md)',
-                                        background: 'var(--color-bg-surface)',
-                                        boxShadow: `var(${item.token})`,
-                                        border: '1px solid var(--color-border-subtle)',
-                                    } }), _jsx("div", { style: { fontSize: 'var(--font-size-xs)' }, children: item.name }), _jsx("code", { style: { fontSize: 'var(--font-size-xs)' }, children: item.token })] }, item.token))) })] }), _jsxs("section", { style: { display: 'grid', gap: 16 }, children: [_jsx(Headline, { disableMargin: true, children: "Border radius" }), _jsx("div", { style: { display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'end' }, children: RADII.map(item => (_jsxs("div", { style: {
-                                display: 'grid',
-                                gap: 8,
-                                width: 120,
-                            }, children: [_jsx("div", { style: {
-                                        height: 64,
-                                        background: 'var(--color-bg-contextual)',
-                                        border: '1px solid var(--color-border-default)',
-                                        borderRadius: `var(${item.token})`,
-                                    } }), _jsx("div", { style: { fontSize: 'var(--font-size-xs)' }, children: item.name }), _jsx("code", { style: { fontSize: 'var(--font-size-xs)' }, children: item.token })] }, item.token))) })] }), _jsxs("section", { style: { display: 'grid', gap: 16 }, children: [_jsx(Headline, { disableMargin: true, children: "Fokusmarkering" }), _jsx("div", { style: {
-                            display: 'inline-flex',
-                            width: 180,
-                            height: 44,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            borderRadius: 'var(--border-radius-default)',
-                            background: 'var(--color-bg-surface)',
-                            border: '1px solid var(--color-border-default)',
-                            boxShadow: 'var(--focus-ring)',
-                        }, children: _jsx("code", { style: { fontSize: 'var(--font-size-xs)' }, children: "--focus-ring" }) })] })] }));
-}

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

@@ -1,2 +0,0 @@
-import type { JSX } from 'react';
-export declare function Flex(): JSX.Element;

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

@@ -1,177 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CopyButton } from '../../../components/copy-button/CopyButton';
-import { Headline } from '../../../components/headline/Headline';
-import styles from './Flex.module.css';
-const BOXES = ['A', 'B', 'C'];
-const GROUPS = [
-    {
-        key: 'display',
-        title: 'Display',
-        description: (_jsxs(_Fragment, { children: ["Start med ", _jsx("code", { className: styles.code, children: "dbc-flex" }), " eller", ' ', _jsx("code", { className: styles.code, children: "dbc-inline-flex" }), " for at aktivere flex layout."] })),
-        helpers: [
-            { className: 'dbc-flex', description: 'Opretter en flex-container på blokniveau.' },
-            { className: 'dbc-inline-flex', description: 'Opretter en flex-container på inline-niveau.' },
-            {
-                className: 'dbc-flex-center',
-                description: 'Shortcut der både sætter display:flex og centrerer indhold vandret og lodret.',
-            },
-        ],
-    },
-    {
-        key: 'direction',
-        title: 'Retning',
-        description: 'Bestemmer om elementer lægges vandret eller lodret.',
-        helpers: [
-            { className: 'dbc-flex-row', description: 'Placerer elementer i en række.' },
-            { className: 'dbc-flex-column', description: 'Placerer elementer i en kolonne.' },
-        ],
-    },
-    {
-        key: 'wrap',
-        title: 'Wrap',
-        description: 'Styrer om elementer må bryde over på flere linjer.',
-        helpers: [
-            { className: 'dbc-flex-wrap', description: 'Tillader linjeskift når der ikke er plads.' },
-            { className: 'dbc-flex-nowrap', description: 'Holder alle elementer på samme linje.' },
-        ],
-    },
-    {
-        key: 'justify',
-        title: 'Justify',
-        description: 'Fordeler elementer langs hovedaksen.',
-        helpers: [
-            { className: 'dbc-justify-start', description: 'Pakker elementer mod starten.' },
-            { className: 'dbc-justify-center', description: 'Centrerer elementer.' },
-            { className: 'dbc-justify-end', description: 'Pakker elementer mod slutningen.' },
-            { className: 'dbc-justify-between', description: 'Lægger plads mellem elementerne.' },
-            { className: 'dbc-justify-around', description: 'Giver plads omkring hvert element.' },
-            { className: 'dbc-justify-evenly', description: 'Fordeler pladsen helt jævnt.' },
-        ],
-    },
-    {
-        key: 'items',
-        title: 'Align Items',
-        description: 'Justerer alle elementer på tværs af hovedaksen.',
-        helpers: [
-            { className: 'dbc-items-start', description: 'Justerer alle elementer mod starten.' },
-            { className: 'dbc-items-center', description: 'Centrerer alle elementer.' },
-            { className: 'dbc-items-end', description: 'Justerer alle elementer mod slutningen.' },
-            { className: 'dbc-items-stretch', description: 'Lader elementer strække sig i højden.' },
-        ],
-    },
-    {
-        key: 'self',
-        title: 'Align Self',
-        description: 'Overstyrer ét barns placering i forhold til resten af rækken.',
-        helpers: [
-            { className: 'dbc-self-start', description: 'Justerer det enkelte element mod starten.' },
-            { className: 'dbc-self-center', description: 'Centrerer det enkelte element.' },
-            { className: 'dbc-self-end', description: 'Justerer det enkelte element mod slutningen.' },
-            { className: 'dbc-self-stretch', description: 'Lader det enkelte element strække sig.' },
-        ],
-    },
-    {
-        key: 'gap',
-        title: 'Gap',
-        description: 'Bruger de samme spacing tokens som spacing-hjælperne.',
-        helpers: [
-            {
-                className: 'dbc-gap-xxs',
-                description: 'Mindste afstand. Brug til fx chips inde i en inputboks.',
-            },
-            {
-                className: 'dbc-gap-xs',
-                description: 'Meget tæt afstand. Brug til fx ikon + label eller label + inputfelt.',
-            },
-            {
-                className: 'dbc-gap-sm',
-                description: 'Standard tæt afstand. Brug til fx sideordnede knapper eller handlinger i en toolbar.',
-            },
-            {
-                className: 'dbc-gap-md',
-                description: 'Moderat afstand. Brug til elementer, der hører til samme sektion, men ikke direkte sammen.',
-            },
-            {
-                className: 'dbc-gap-lg',
-                description: 'Større afstand. Brug til adskillelse af logisk forskellige grupper inden for samme visning.',
-            },
-            {
-                className: 'dbc-gap-xl',
-                description: 'Størst afstand. Brug til overordnede layoutområder eller markante sektionsskift.',
-            },
-        ],
-    },
-    {
-        key: 'behavior',
-        title: 'Flex adfærd',
-        description: 'Styrer hvordan det enkelte barn vokser eller krymper.',
-        helpers: [
-            { className: 'dbc-flex-grow', description: 'Lader elementet tage ledig plads.' },
-            { className: 'dbc-flex-shrink', description: 'Tillader elementet at krympe.' },
-        ],
-    },
-];
-function HelperCode({ children }) {
-    return _jsx("code", { className: styles.code, children: children });
-}
-function DemoBoxes() {
-    return (_jsx(_Fragment, { children: BOXES.map((label, index) => (_jsx("div", { className: `${styles.demoBox} ${index === 1 ? styles.tallBox : ''}`, "data-label": label, children: label }, label))) }));
-}
-function DefaultPreview({ className, baseClassName = 'dbc-flex', }) {
-    return (_jsx("div", { className: `${styles.demoSurface} ${baseClassName} ${className}`, children: _jsx(DemoBoxes, {}) }));
-}
-function InlinePreview({ className }) {
-    return (_jsxs("div", { className: styles.inlineRow, children: [_jsx("span", { className: styles.inlineLabel, children: "F\u00F8r" }), _jsx("span", { className: `${styles.inlineSurface} ${className}`, children: _jsx(DemoBoxes, {}) }), _jsx("span", { className: styles.inlineLabel, children: "Efter" })] }));
-}
-function SelfPreview({ className }) {
-    return (_jsx("div", { className: `${styles.demoSurface} ${styles.tallSurface} dbc-flex dbc-gap-xs dbc-items-stretch`, children: BOXES.map((label, index) => (_jsx("div", { className: `${styles.demoBox} ${index === 1 ? className : ''}`, "data-label": label, children: label }, label))) }));
-}
-function FlexGrowPreview() {
-    return (_jsxs("div", { className: `${styles.demoSurface} ${styles.growSurface} dbc-flex dbc-gap-xs`, children: [_jsx("div", { className: styles.growSideBox, children: "A" }), _jsx("div", { className: `${styles.flexBehaviorBox} ${styles.growMainBox} dbc-flex-grow`, children: "B" }), _jsx("div", { className: styles.growSideBox, children: "C" })] }));
-}
-function FlexShrinkPreview() {
-    return (_jsxs("div", { className: `${styles.demoSurface} ${styles.shrinkSurface} dbc-flex dbc-gap-xs`, children: [_jsx("div", { className: styles.fixedBox, children: "A" }), _jsx("div", { className: `${styles.shrinkBox} dbc-flex-shrink`, children: "B" }), _jsx("div", { className: styles.fixedBox, children: "C" })] }));
-}
-function CenterPreview({ className }) {
-    return (_jsx("div", { className: `${styles.centerSurface} ${className}`, children: _jsx("div", { className: styles.demoBox, children: "Center" }) }));
-}
-function WrapPreview({ className }) {
-    return (_jsxs("div", { className: `${styles.demoSurface} ${styles.wrapSurface} dbc-flex dbc-gap-xs ${className}`, children: [_jsx("div", { className: styles.wideBox, children: "Alpha" }), _jsx("div", { className: styles.wideBox, children: "Beta" }), _jsx("div", { className: styles.wideBox, children: "Gamma" })] }));
-}
-function JustifyPreview({ className }) {
-    return (_jsx("div", { className: `${styles.demoSurface} dbc-flex ${className}`, children: _jsx(DemoBoxes, {}) }));
-}
-function ItemsPreview({ className }) {
-    return (_jsxs("div", { className: `${styles.demoSurface} ${styles.tallSurface} dbc-flex dbc-gap-xs ${className}`, children: [_jsx("div", { className: `${styles.demoBox} ${styles.shortBox}`, children: "A" }), _jsx("div", { className: `${styles.demoBox} ${styles.midBox}`, children: "B" }), _jsx("div", { className: `${styles.demoBox} ${styles.tallBox}`, children: "C" })] }));
-}
-function Preview({ className, groupKey }) {
-    if (className === 'dbc-inline-flex')
-        return _jsx(InlinePreview, { className: className });
-    if (className === 'dbc-flex-center')
-        return _jsx(CenterPreview, { className: className });
-    if (groupKey === 'wrap')
-        return _jsx(WrapPreview, { className: className });
-    if (groupKey === 'justify')
-        return _jsx(JustifyPreview, { className: className });
-    if (groupKey === 'items')
-        return _jsx(ItemsPreview, { className: className });
-    if (groupKey === 'self')
-        return _jsx(SelfPreview, { className: className });
-    if (className === 'dbc-flex-grow')
-        return _jsx(FlexGrowPreview, {});
-    if (className === 'dbc-flex-shrink')
-        return _jsx(FlexShrinkPreview, {});
-    if (groupKey === 'gap') {
-        return _jsx(DefaultPreview, { className: className, baseClassName: "dbc-flex" });
-    }
-    return _jsx(DefaultPreview, { className: className });
-}
-function HelperCard({ helper, groupKey }) {
-    return (_jsxs("article", { className: styles.card, children: [_jsxs("div", { className: styles.cardHeader, children: [_jsxs("div", { className: styles.classNameRow, children: [_jsx(HelperCode, { children: helper.className }), _jsx(CopyButton, { text: helper.className, variant: "inline", size: "sm" })] }), _jsx("p", { className: styles.cardDescription, children: helper.description })] }), _jsx(Preview, { className: helper.className, groupKey: groupKey })] }));
-}
-function Group({ group }) {
-    return (_jsxs("section", { className: styles.section, children: [_jsx(Headline, { marker: true, severity: "info", disableMargin: true, size: 2, children: group.title }), _jsx("p", { className: styles.paragraph, children: group.description }), _jsx("div", { className: styles.grid, children: group.helpers.map(helper => (_jsx(HelperCard, { helper: helper, groupKey: group.key }, helper.className))) })] }));
-}
-export function Flex() {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("header", { className: styles.header, children: _jsx(Headline, { disableMargin: true, children: "Flex-hj\u00E6lpere" }) }), _jsxs("section", { className: styles.intro, children: [_jsx("h2", { className: styles.h2, children: "Baggrund" }), _jsx("p", { className: styles.paragraph, children: "Biblioteket stiller et s\u00E6t flex-hj\u00E6lpeklasser til r\u00E5dighed, s\u00E5 du kan sammens\u00E6tte layout direkte i markup uden at oprette lokale CSS-filer til trivielle regler. Form\u00E5l er bl.a.:" }), _jsxs("ul", { className: styles.list, children: [_jsx("li", { children: "At hj\u00E6lpe med at sikre konsistent layout p\u00E5 tv\u00E6rs af sider og DBC-apps." }), _jsxs("li", { children: ["Undg\u00E5 CSS-filer, der kun indeholder trivielle regler som", ' ', _jsx(HelperCode, { children: "display: flex" }), ", ", _jsx(HelperCode, { children: "gap" }), " eller", ' ', _jsx(HelperCode, { children: "align-items" }), "."] }), _jsx("li", { children: "Mindre boilerplate og f\u00E6rre one-off-overrides p\u00E5 tv\u00E6rs af features." }), _jsx("li", { children: "Et f\u00E6lles, dokumenteret sprog for layoutkomposition, der holder sig inden for design-systemet." }), _jsxs("li", { children: ["Semantiske afstandsrelationer \u2014 ", _jsx(HelperCode, { children: "dbc-gap-sm" }), " frem for r\u00E5 pixelv\u00E6rdier i feature-kode."] })] }), _jsx("p", { className: styles.paragraph, children: "CSS-moduler har stadig en vigtig plads til komponent-specifik eller kompleks styling \u2014 pointen er blot, at de ikke beh\u00F8ver v\u00E6re standardl\u00F8sningen til rutinelayout." }), _jsx("h2", { className: styles.h2, children: "Navngivningskonvention" }), _jsx("p", { className: styles.paragraph, children: "Flex-hj\u00E6lperne er sm\u00E5 utility-klasser, som kan kombineres direkte i markup." }), _jsx("div", { className: styles.example, children: _jsx(HelperCode, { children: "dbc-flex dbc-flex-row dbc-gap-sm dbc-items-center" }) }), _jsxs("ul", { className: styles.list, children: [_jsxs("li", { children: ["Brug ", _jsx(HelperCode, { children: "dbc-flex" }), " eller ", _jsx(HelperCode, { children: "dbc-inline-flex" }), ' ', "som base."] }), _jsx("li", { children: "Tilf\u00F8j derefter helpers for retning, justering, gap og evt. flex-adf\u00E6rd p\u00E5 b\u00F8rnene." }), _jsxs("li", { children: [_jsx(HelperCode, { children: "dbc-gap-*" }), " f\u00F8lger spacing tokens: ", _jsx(HelperCode, { children: "xxs" }), ",", ' ', _jsx(HelperCode, { children: "xs" }), ", ", _jsx(HelperCode, { children: "sm" }), ", ", _jsx(HelperCode, { children: "md" }), ",", ' ', _jsx(HelperCode, { children: "lg" }), " og ", _jsx(HelperCode, { children: "xl" }), "."] })] })] }), GROUPS.map(group => (_jsx(Group, { group: group }, group.title)))] }));
-}