@dbcdk/react-components 0.0.12 → 0.0.14

package/dist/components/card/Card.module.css

@@ -12,7 +12,6 @@
   border-radius: var(--border-radius-md);
   border: var(--border-width-thin) solid var(--color-border-subtle);
   box-shadow: var(--shadow-xs);
-  padding-block: 0;
   transition:
     color var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard),
@@ -24,33 +23,31 @@
 }
 
 /* BACKGROUND VARIANTS */
-.container.default {
+.variantDefault {
   background-color: var(--card-bg-default, var(--color-bg-surface));
 }
 
-.container.subtle {
+.variantSubtle {
   background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle));
 }
 
-.container.strong {
+.variantStrong {
   background-color: var(--card-bg-strong, var(--color-bg-surface-strong));
   color: var(--card-fg-on-strong, var(--color-fg-on-strong));
 }
 
-/* SIZE VARIANTS */
-.sm .inner {
-  padding: var(--spacing-md);
-  gap: var(--spacing-md);
+/* SIZE VARIANTS (define vars once; inner uses them) */
+.sm {
+  --card-pad: var(--spacing-md);
+  --card-gap: var(--spacing-md);
 }
-
-.md .inner {
-  padding: var(--spacing-lg);
-  gap: var(--spacing-lg);
+.md {
+  --card-pad: var(--spacing-lg);
+  --card-gap: var(--spacing-lg);
 }
-
-.lg .inner {
-  padding: var(--spacing-xl);
-  gap: var(--spacing-xl);
+.lg {
+  --card-pad: var(--spacing-xl);
+  --card-gap: var(--spacing-xl);
 }
 
 /* INNER LAYOUT */
@@ -58,6 +55,8 @@
   margin-inline: auto;
   display: flex;
   align-items: flex-start;
+  padding: var(--card-pad);
+  gap: var(--card-gap);
 }
 
 /* Media placement */
@@ -103,8 +102,8 @@
 
 /* CONTENT */
 .content {
-  flex: 1 1 auto; /* important: allow content column to grow */
-  min-inline-size: 0; /* prevents overflow in flex layouts */
+  flex: 1 1 auto;
+  min-inline-size: 0;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
@@ -118,11 +117,6 @@
   gap: var(--spacing-sm);
 }
 
-.value {
-  font-weight: 600;
-  white-space: nowrap;
-}
-
 .headerMeta {
   display: flex;
   align-items: center;
@@ -156,77 +150,18 @@
 }
 
 .sectionTitle {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 /* BODY */
 .body {
-  /* leave this as a neutral container; consumers render their own layout */
+  /* neutral container */
 }
 
-/* ACTIONS (bottom-right) */
+/* ACTIONS */
 .actions {
-  margin-top: auto; /* pushes actions to bottom of the content column */
+  margin-top: auto;
   display: flex;
-  justify-content: flex-end; /* right-align buttons */
+  justify-content: flex-end;
   gap: var(--spacing-sm);
 }
-
-/* --- Meta grid primitives (optional) --- */
-
-.metaGrid {
-  margin: 0;
-  display: grid;
-  gap: var(--spacing-xs) var(--spacing-lg);
-}
-
-.metaCols1 {
-  grid-template-columns: 1fr;
-}
-
-.metaCols2 {
-  grid-template-columns: 1fr;
-}
-
-.metaCols3 {
-  grid-template-columns: 1fr;
-}
-
-@media (min-width: 640px) {
-  .metaCols2 {
-    grid-template-columns: 1fr 1fr;
-  }
-  .metaCols3 {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-}
-
-.metaRow {
-  --label-width: 120px;
-  display: grid;
-  grid-template-columns: var(--label-width, auto) 1fr;
-  gap: var(--spacing-xs);
-  align-items: baseline;
-  min-inline-size: 0;
-}
-
-.metaLabel {
-  font-size: var(--font-size-xs);
-  color: var(--color-fg-subtle);
-  letter-spacing: var(--letter-spacing-wide);
-  text-transform: uppercase;
-  margin: 0;
-}
-
-.metaValue {
-  margin: 0;
-  font-size: var(--font-size-sm);
-  color: var(--color-fg-default);
-  font-weight: var(--font-weight-medium);
-  min-inline-size: 0;
-  word-break: break-word;
-}
-
-.metaNowrap {
-  white-space: nowrap;
-}

package/dist/components/card/components/CardMeta.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
+export type CardMetaProps = {
+    columns?: 1 | 2 | 3;
+    className?: string;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDListElement>, 'children'>;
+export type CardMetaRowProps = {
+    label: ReactNode;
+    value: ReactNode;
+    className?: string;
+    nowrapValue?: boolean;
+    labelWidth?: string;
+};
+export declare function CardMeta({ columns, className, children, ...rest }: CardMetaProps): JSX.Element;
+export declare function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }: CardMetaRowProps): JSX.Element;

package/dist/components/card/components/CardMeta.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './CardMeta.module.css';
+function getColsClass(columns) {
+    switch (columns) {
+        case 1:
+            return styles.cols1;
+        case 3:
+            return styles.cols3;
+        case 2:
+        default:
+            return styles.cols2;
+    }
+}
+export function CardMeta({ columns = 2, className, children, ...rest }) {
+    const colsClass = getColsClass(columns);
+    return (_jsx("dl", { ...rest, className: [styles.grid, colsClass, className].filter(Boolean).join(' '), children: children }));
+}
+export function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }) {
+    return (_jsxs("div", { className: [styles.row, className].filter(Boolean).join(' '), style: labelWidth ? { ['--label-width']: labelWidth } : undefined, children: [_jsx("dt", { className: styles.label, children: label }), _jsx("dd", { className: [styles.value, nowrapValue ? styles.nowrap : ''].filter(Boolean).join(' '), children: value })] }));
+}

package/dist/components/card/components/CardMeta.module.css

@@ -0,0 +1,51 @@
+.grid {
+  margin: 0;
+  display: grid;
+  gap: var(--spacing-xs) var(--spacing-lg);
+}
+
+/* Base: single column */
+.cols1,
+.cols2,
+.cols3 {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .cols2 {
+    grid-template-columns: 1fr 1fr;
+  }
+  .cols3 {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.row {
+  --label-width: 120px;
+  display: grid;
+  grid-template-columns: var(--label-width) 1fr;
+  gap: var(--spacing-xs);
+  align-items: baseline;
+  min-inline-size: 0;
+}
+
+.label {
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-subtle);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.value {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+  font-weight: var(--font-weight-medium);
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.nowrap {
+  white-space: nowrap;
+}

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

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Headline } from '../../components/headline/Headline';
 import styles from './CardContainer.module.css';
 export function CardContainer({ children, headline, expand, severity, displayHeaderMarker, }) {
-    return (_jsxs("div", { className: styles.wrapper, children: [headline && (_jsx(Headline, { marker: displayHeaderMarker, severity: severity, children: headline })), _jsx("div", { className: styles.container, style: { ['--expand']: expand ? '1' : '0' }, children: children })] }));
+    return (_jsxs("div", { className: styles.wrapper, children: [headline && (_jsx(Headline, { marker: displayHeaderMarker, severity: severity, disableMargin: true, children: headline })), _jsx("div", { className: styles.container, style: { ['--expand']: expand ? '1' : '0' }, children: children })] }));
 }

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

@@ -1,5 +1,7 @@
 .wrapper {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
 }
 
 .container {

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

@@ -11,7 +11,7 @@
   border-radius: var(--border-radius-default);
   border: var(--border-width-thin) solid transparent;
 
-  padding-block: calc(var(--spacing-xxs) + var(--density));
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-md);
 
   font-family: var(--font-family);
@@ -39,10 +39,15 @@
   block-size: var(--icon-size-md);
 }
 
+.sm svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
 /* Small size */
 .sm {
   height: var(--component-size-xs);
-  padding-block: calc(0px + var(--density));
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-xs);
   font-size: var(--font-size-xs);
 }

package/dist/components/datetime-picker/DateTimePicker.d.ts

@@ -1,17 +1,26 @@
 import React from 'react';
 import { Input } from '../../components/forms/input/Input';
-import { type UtcIsoString } from './dateTimeHelpers';
+import { type DateOnlyString, type UtcIsoString } from './dateTimeHelpers';
 type Mode = 'single' | 'range';
 type WeekStart = 0 | 1;
-export type DateValue = UtcIsoString | null | {
-    start: UtcIsoString | null;
-    end: UtcIsoString | null;
+/**
+ * Contract (recommended):
+ * - UI is always local time
+ *
+ * SINGLE:
+ * - enableTime=true  => value is UtcIsoString | null (UTC instant in/out)
+ * - enableTime=false => value is DateOnlyString | null (calendar date in/out)
+ *
+ * RANGE:
+ * - always date-only in UI AND value: { start/end: DateOnlyString | null }
+ */
+type RangeValue = {
+    start: DateOnlyString | null;
+    end: DateOnlyString | null;
 };
 type InputProps = React.ComponentProps<typeof Input>;
-export interface DateTimePickerProps {
+type BaseProps = {
     mode?: Mode;
-    value: DateValue;
-    onChange: (next: DateValue) => void;
     enableTime?: boolean;
     timeStep?: number;
     min?: Date;
@@ -34,6 +43,22 @@ export interface DateTimePickerProps {
         locale: string;
         enableTime: boolean;
     }) => string;
-}
+};
+export type DateTimePickerProps = (BaseProps & {
+    mode?: 'single';
+    enableTime?: true;
+    value: UtcIsoString | null;
+    onChange: (next: UtcIsoString | null) => void;
+}) | (BaseProps & {
+    mode?: 'single';
+    enableTime?: false;
+    value: DateOnlyString | null;
+    onChange: (next: DateOnlyString | null) => void;
+}) | (BaseProps & {
+    mode: 'range';
+    enableTime?: boolean;
+    value: RangeValue;
+    onChange: (next: RangeValue) => void;
+});
 export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLDivElement>>;
 export {};