@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/card-container/CardContainer.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var Headline = require('../headline/Headline');
+var Headline = require('@/components/headline/Headline');
 var styles = require('./CardContainer.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -11,11 +11,12 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function CardContainer({
   children,
   headline,
-  subHeadline,
-  expand
+  expand,
+  severity,
+  displayHeaderMarker
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { marker: true, severity: "brand", subHeadline, children: headline }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.wrapper, children: [
+    headline && /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { marker: displayHeaderMarker, severity, children: headline }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
   ] });
 }

package/dist/components/card-container/CardContainer.d.ts

@@ -1,8 +1,11 @@
+import React from 'react';
+import { Severity } from '@/constants/severity.types';
 interface CardContainerProps {
     headline?: string;
-    subHeadline?: string;
     children?: React.ReactNode[];
     expand?: boolean;
+    severity?: Severity;
+    displayHeaderMarker?: boolean;
 }
-export declare function CardContainer({ children, headline, subHeadline, expand, }: CardContainerProps): JSX.Element;
+export declare function CardContainer({ children, headline, expand, severity, displayHeaderMarker, }: CardContainerProps): JSX.Element;
 export {};

package/dist/components/card-container/CardContainer.js

@@ -1,15 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Headline } from '../headline/Headline';
+import { Headline } from '@/components/headline/Headline';
 import styles from './CardContainer.module.css';
 
 function CardContainer({
   children,
   headline,
-  subHeadline,
-  expand
+  expand,
+  severity,
+  displayHeaderMarker
 }) {
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Headline, { marker: true, severity: "brand", subHeadline, children: headline }),
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    headline && /* @__PURE__ */ jsx(Headline, { marker: displayHeaderMarker, severity, children: headline }),
     /* @__PURE__ */ jsx("div", { className: styles.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
   ] });
 }

package/dist/components/card-container/CardContainer.module.css

@@ -1,10 +1,50 @@
+.wrapper {
+  display: block;
+}
+
 .container {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-md);
+  border-radius: var(--border-radius-sm);
   --width: 100%;
 }
 
+.container.default {
+  background-color: var(--card-bg-default, var(--color-bg-surface, var(--color-bg-surface-subtle)));
+  padding: var(--spacing-lg);
+}
+
+.container.subtle {
+  background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle, var(--color-bg-surface)));
+  padding: var(--spacing-lg);
+}
+
+.container.strong {
+  background-color: var(
+    --card-bg-strong,
+    var(--color-bg-surface-strong, var(--color-surface-strong))
+  );
+  color: var(--card-fg-on-strong, var(--color-fg-on-strong, #ffffff));
+  padding: var(--spacing-lg);
+}
+
+.container.accent1 {
+  background-color: var(
+    --card-bg-accent-1,
+    var(--color-bg-accent-1, var(--color-bg-surface-subtle))
+  );
+  padding: var(--spacing-lg);
+}
+
+.container.accent2 {
+  background-color: var(
+    --card-bg-accent-2,
+    var(--color-bg-accent-2, var(--color-bg-surface-subtle))
+  );
+  padding: var(--spacing-lg);
+}
+
 @media screen and (min-width: 768px) {
   .container {
     --width: 33.333%;

package/dist/components/checkbox/Checkbox.cjs

@@ -19,18 +19,17 @@ function Checkbox({
 }) {
   const [internal, setInternal] = react.useState(false);
   const isChecked = controlled != null ? controlled : internal;
-  const toggle = () => {
+  const toggle = (e) => {
     const value = !isChecked;
     setInternal(value);
-    onChange == null ? void 0 : onChange(value);
+    onChange == null ? void 0 : onChange(value, e);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.container, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { role: "button", className: styles__default.default.container, onClick: toggle, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         disabled,
         type: "button",
-        onClick: toggle,
         "aria-pressed": isChecked,
         className: `${styles__default.default.checkbox} ${isChecked ? styles__default.default.checked : ""} ${styles__default.default[variant]} ${styles__default.default[size]}`,
         children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: styles__default.default.icon })

package/dist/components/checkbox/Checkbox.d.ts

@@ -2,7 +2,7 @@ type Variant = 'default' | 'primary' | 'outlined';
 type Size = 'sm' | 'md' | 'lg';
 interface CheckboxProps {
     checked?: boolean;
-    onChange?: (checked: boolean) => void;
+    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
     variant?: Variant;
     disabled?: boolean;
     label?: string;

package/dist/components/checkbox/Checkbox.js

@@ -13,18 +13,17 @@ function Checkbox({
 }) {
   const [internal, setInternal] = useState(false);
   const isChecked = controlled != null ? controlled : internal;
-  const toggle = () => {
+  const toggle = (e) => {
     const value = !isChecked;
     setInternal(value);
-    onChange == null ? void 0 : onChange(value);
+    onChange == null ? void 0 : onChange(value, e);
   };
-  return /* @__PURE__ */ jsxs("span", { className: styles.container, children: [
+  return /* @__PURE__ */ jsxs("span", { role: "button", className: styles.container, onClick: toggle, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         disabled,
         type: "button",
-        onClick: toggle,
         "aria-pressed": isChecked,
         className: `${styles.checkbox} ${isChecked ? styles.checked : ""} ${styles[variant]} ${styles[size]}`,
         children: isChecked && /* @__PURE__ */ jsx(Check, { className: styles.icon })

package/dist/components/checkbox/Checkbox.module.css

@@ -14,9 +14,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: var(--border-width-thin) solid var(--color-border-strong);
+  border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-sm);
-  background-color: var(--color-surface);
+  background-color: var(--color-bg-surface);
   cursor: pointer;
   transition:
     background-color var(--transition-fast) var(--ease-standard),
@@ -35,19 +35,19 @@
 }
 
 .checkbox:hover {
-  border-color: var(--color-text);
+  border-color: var(--color-fg-default);
 }
 
 .checked {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
+  background-color: var(--color-brand);
+  border-color: var(--color-brand);
 }
 
 .icon {
-  width: var(--icon-size);
-  height: var(--icon-size);
-  color: var(--color-text-on-primary);
-  stroke-width: 3;
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  color: var(--color-fg-on-brand);
+  stroke-width: 2;
   pointer-events: none;
 }
 
@@ -58,6 +58,6 @@
   }
 
   .icon {
-    color: var(--color-text);
+    color: var(--color-fg-default);
   }
 }

package/dist/components/chip/Chip.cjs

@@ -19,6 +19,7 @@ function Chip({
   fullWidth = false,
   size = "md",
   customIcon,
+  type = "rounded",
   onClose
 }) {
   const [chipWidth, setChipWidth] = react.useState(void 0);
@@ -35,7 +36,7 @@ function Chip({
     "div",
     {
       ref: chipRef,
-      className: `${styles__default.default.container} ${styles__default.default[severity]} ${fullWidth ? styles__default.default.fullWidth : ""} ${styles__default.default[size]}`,
+      className: `${styles__default.default.container} ${styles__default.default[severity]} ${fullWidth ? styles__default.default.fullWidth : ""} ${styles__default.default[size]} ${styles__default.default[type]}`,
       children: [
         severity && !disableIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }),
         customIcon,

package/dist/components/chip/Chip.d.ts

@@ -8,6 +8,7 @@ interface ChipProps {
     fullWidth?: boolean;
     onClose?: () => void;
     size?: 'sm' | 'md' | 'lg';
+    type?: 'default' | 'rounded';
 }
-export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, onClose, }: ChipProps): JSX.Element;
+export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, type, onClose, }: ChipProps): JSX.Element;
 export {};

package/dist/components/chip/Chip.js

@@ -13,6 +13,7 @@ function Chip({
   fullWidth = false,
   size = "md",
   customIcon,
+  type = "rounded",
   onClose
 }) {
   const [chipWidth, setChipWidth] = useState(void 0);
@@ -29,7 +30,7 @@ function Chip({
     "div",
     {
       ref: chipRef,
-      className: `${styles.container} ${styles[severity]} ${fullWidth ? styles.fullWidth : ""} ${styles[size]}`,
+      className: `${styles.container} ${styles[severity]} ${fullWidth ? styles.fullWidth : ""} ${styles[size]} ${styles[type]}`,
       children: [
         severity && !disableIcon && /* @__PURE__ */ jsx(Icon, { severity }),
         customIcon,

package/dist/components/chip/Chip.module.css

@@ -4,10 +4,11 @@
   gap: var(--space-inline-sm);
   white-space: nowrap;
 
-  background-color: var(--opac-bg-default);
-  color: var(--color-text);
+  /* Neutral pill background + text */
+  background-color: var(--color-bg-contextual);
+  color: var(--chip-fg-default, var(--color-fg-default));
 
-  border-radius: var(--border-radius-rounded);
+  border-radius: var(--border-radius-default);
   border: var(--border-width-thin) solid transparent;
 
   padding-block: calc(var(--spacing-xxs) + var(--density));
@@ -15,7 +16,7 @@
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-default);
 
   transition:
     background-color var(--transition-fast) var(--ease-standard),
@@ -24,48 +25,61 @@
     box-shadow var(--transition-fast) var(--ease-standard);
 }
 
-.container:hover {
-  background-color: var(--opac-bg-dark);
+.container.rounded {
+  border-radius: var(--border-radius-rounded);
 }
 
 .container svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }
 
+/* Small size */
 .sm {
-  padding-block: calc(var(--spacing-2xs) + var(--density));
+  height: var(--component-size-xs);
+  padding-block: calc(0px + var(--density));
   padding-inline: var(--spacing-xs);
   font-size: var(--font-size-xs);
 }
 
+/* Inverted variant: for dark / strong backgrounds */
 .container.invert {
-  background-color: var(--opac-bg-default-invert);
-  color: var(--color-text-inverse);
+  background-color: transparent;
+  color: var(--color-fg-on-strong);
+  border-color: transparent;
 }
 
-/* Status variants */
+/* Status variants (use status tokens) */
+
 .container.success {
-  background-color: var(--color-bg-success);
-  color: var(--color-success);
+  background-color: var(--color-status-success-bg);
+  color: var(--color-status-success-fg);
+  border-color: var(--color-status-success-border);
 }
+
 .container.warning {
-  background-color: var(--color-bg-warning);
-  color: var(--color-warning);
+  background-color: var(--color-status-warning-bg);
+  color: var(--color-status-warning-fg);
+  border-color: var(--color-status-warning-border);
 }
+
 .container.error {
-  background-color: var(--color-bg-error);
-  color: var(--color-error);
+  background-color: var(--color-status-error-bg);
+  color: var(--color-status-error-fg);
+  border-color: var(--color-status-error-border);
 }
+
 .container.info {
-  background-color: var(--color-bg-info);
-  color: var(--color-info);
+  background-color: var(--color-status-info-bg);
+  color: var(--color-status-info-fg);
+  border-color: var(--color-status-info-border);
 }
 
 /* Brand variant */
 .container.brand {
-  background-color: var(--color-primary);
-  color: var(--color-text-on-primary);
+  background-color: var(--color-brand);
+  color: var(--color-fg-on-brand);
+  border-color: transparent;
 }
 
 /* Full width */
@@ -74,23 +88,24 @@
   justify-content: center;
 }
 
+/* Close button inside chip */
 .close {
   all: unset;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-
   cursor: pointer;
   color: inherit;
-
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
   border-radius: var(--border-radius-round);
   transition: background-color var(--transition-fast) var(--ease-standard);
 }
+
 .close:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-hover-subtle);
 }
+
 .close:focus-visible {
   box-shadow: var(--focus-ring);
   outline: none;

package/dist/components/circle/Circle.module.css

@@ -6,7 +6,7 @@
   white-space: nowrap;
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  color: var(--color-text);
+  color: var(--color-fg-default);
 }
 
 .circle {
@@ -29,34 +29,34 @@
 
 /* Status variants */
 .brand {
-  background-color: var(--color-primary);
+  background-color: var(--color-brand);
 }
 .success {
-  background-color: var(--color-success);
+  background-color: var(--color-status-success);
 }
 .warning {
-  background-color: var(--color-warning);
+  background-color: var(--color-status-warning);
 }
 .error {
-  background-color: var(--color-error);
+  background-color: var(--color-status-error);
 }
 .info {
-  background-color: var(--color-info);
+  background-color: var(--color-status-info);
 }
 
 .brand[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-primary);
+  box-shadow: 0 0 0 2px var(--color-bg-selected);
 }
 
 .success[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-success);
+  box-shadow: 0 0 0 2px var(--color-status-success-bg);
 }
 .warning[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-warning);
+  box-shadow: 0 0 0 2px var(--color-status-warning-bg);
 }
 .error[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-error);
+  box-shadow: 0 0 0 2px var(--color-status-error-bg);
 }
 .info[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-info);
+  box-shadow: 0 0 0 2px var(--color-status-info-bg);
 }

package/dist/components/clear-button/ClearButton.cjs

@@ -2,7 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
-var Button = require('../button/Button');
 var styles = require('./ClearButton.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -11,9 +10,10 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 function ClearButton({ onClick, absolute }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.clearButton} ${absolute ? styles__default.default.absolute : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Button.Button,
+    "span",
     {
-      variant: "inline",
+      className: styles__default.default.button,
+      role: "button",
       onClick: (e) => {
         e.stopPropagation();
         onClick();

package/dist/components/clear-button/ClearButton.js

@@ -1,13 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { X } from 'lucide-react';
-import { Button } from '../button/Button';
 import styles from './ClearButton.module.css';
 
 function ClearButton({ onClick, absolute }) {
   return /* @__PURE__ */ jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ""}`, children: /* @__PURE__ */ jsx(
-    Button,
+    "span",
     {
-      variant: "inline",
+      className: styles.button,
+      role: "button",
       onClick: (e) => {
         e.stopPropagation();
         onClick();

package/dist/components/clear-button/ClearButton.module.css

@@ -1,16 +1,17 @@
-.clearButton button {
+.clearButton .button {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-muted);
-  &:hover {
-    color: var(--color-text);
-  }
+  color: var(--color-fg-subtle);
 }
 
-.clearButton.absolute button {
+.clearButton .button:hover {
+  background-color: var(--color-bg-contextual);
+}
+
+.clearButton.absolute .button {
   position: absolute;
-  right: var(--spacing-md);
+  right: var(--spacing-xxs);
   top: 50%;
   transform: translateY(-50%);
 }

package/dist/components/code-block/CodeBlock.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var CopyButton = require('../copy-button/CopyButton');
+var styles = require('./CodeBlock.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function CodeBlock({ code, copyButton, size = "md" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: `${styles__default.default.container} ${styles__default.default[size]}`, children: [
+    copyButton && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.copyButton, children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { text: code }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles__default.default.code, children: code })
+  ] });
+}
+
+exports.CodeBlock = CodeBlock;

package/dist/components/code-block/CodeBlock.d.ts

@@ -0,0 +1,6 @@
+export interface CodeBlockProps {
+    code: string;
+    copyButton?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function CodeBlock({ code, copyButton, size }: CodeBlockProps): JSX.Element;

package/dist/components/code-block/CodeBlock.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CopyButton } from '../copy-button/CopyButton';
+import styles from './CodeBlock.module.css';
+
+function CodeBlock({ code, copyButton, size = "md" }) {
+  return /* @__PURE__ */ jsxs("pre", { className: `${styles.container} ${styles[size]}`, children: [
+    copyButton && /* @__PURE__ */ jsx("span", { className: styles.copyButton, children: /* @__PURE__ */ jsx(CopyButton, { text: code }) }),
+    /* @__PURE__ */ jsx("code", { className: styles.code, children: code })
+  ] });
+}
+
+export { CodeBlock };

package/dist/components/code-block/CodeBlock.module.css

@@ -0,0 +1,60 @@
+.container {
+  background-color: var(--color-bg-contextual);
+  position: relative;
+  padding: var(--spacing-sm);
+  border-radius: var(--border-radius-default);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  margin-block: 0;
+  font-family: var(--font-family-mono);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  padding-inline-end: calc(var(--spacing-sm) + 40px);
+}
+
+.container.sm {
+  padding: var(--spacing-xxs);
+  padding-inline-end: calc(var(--spacing-xxs) + 40px);
+  min-height: 0;
+}
+
+.container.sm .code {
+  font-size: var(--font-size-xs);
+}
+
+.container.md .code {
+  font-size: var(--font-size-sm);
+}
+.container.lg .code {
+  font-size: var(--font-size-base);
+}
+
+.code {
+  display: block;
+  margin: 0;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-break: anywhere;
+  word-break: break-all;
+}
+
+.copyButton {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  z-index: 2;
+
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.container:hover .copyButton,
+.container:focus-within .copyButton {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.copyButton button {
+  pointer-events: auto;
+}

package/dist/components/copy-button/CopyButton.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Button = require('../button/Button');
+var lucideReact = require('lucide-react');
+var styles = require('./CopyButton.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function CopyButton({
+  text,
+  variant = "outlined",
+  size = "sm",
+  children
+}) {
+  const [copied, setCopied] = react.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1e3);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { "aria-label": "Copy to clipboard", onClick: handleCopy, variant, size, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.container} ${copied ? styles__default.default.copied : ""}`, children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {}) }),
+    children
+  ] });
+}
+
+exports.CopyButton = CopyButton;

package/dist/components/copy-button/CopyButton.d.ts

@@ -0,0 +1,9 @@
+import { ButtonSize, ButtonVariant } from '../button/Button';
+interface CopyButtonProps {
+    text: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children?: React.ReactNode;
+}
+export declare function CopyButton({ text, variant, size, children, }: CopyButtonProps): React.ReactNode;
+export {};