@dbcdk/react-components 0.0.9 → 0.0.12

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+export interface AccordionItem {
+    header: string;
+    headerIcon?: ReactNode;
+    severity?: Severity;
+    children: ReactNode;
+    disabled?: boolean;
+}
+type Size = 'sm' | 'md' | 'lg';
+type Mode = 'single' | 'multiple';
+export interface AccordionProps {
+    items: AccordionItem[];
+    mode?: Mode;
+    size?: Size;
+    /** Uncontrolled defaults */
+    defaultOpenIndex?: number | null;
+    defaultOpenIndexes?: number[];
+    /** Controlled state */
+    openIndex?: number | null;
+    openIndexes?: number[];
+    /** Change callbacks */
+    onOpenIndexChange?: (index: number | null) => void;
+    onOpenIndexesChange?: (indexes: number[]) => void;
+}
+export declare function Accordion({ items, mode, size, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }: AccordionProps): JSX.Element;
+export {};

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import styles from './Accordion.module.css';
+import { Headline } from '../headline/Headline';
+function uniqSorted(nums) {
+    return Array.from(new Set(nums)).sort((a, b) => a - b);
+}
+export function Accordion({ items, mode = 'single', size = 'md', defaultOpenIndex = null, defaultOpenIndexes = [], openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }) {
+    const uid = useId();
+    const isControlledSingle = mode === 'single' && openIndex !== undefined;
+    const isControlledMultiple = mode === 'multiple' && openIndexes !== undefined;
+    const [internalOpenIndex, setInternalOpenIndex] = useState(mode === 'single' ? defaultOpenIndex : null);
+    const [internalOpenIndexes, setInternalOpenIndexes] = useState(mode === 'multiple' ? uniqSorted(defaultOpenIndexes) : []);
+    const currentOpenIndex = mode === 'single' ? (isControlledSingle ? openIndex : internalOpenIndex) : null;
+    const currentOpenIndexes = useMemo(() => mode === 'multiple'
+        ? isControlledMultiple
+            ? uniqSorted(openIndexes)
+            : internalOpenIndexes
+        : [], [mode, isControlledMultiple, openIndexes, internalOpenIndexes]);
+    const openSet = useMemo(() => new Set(mode === 'single'
+        ? currentOpenIndex !== null
+            ? [currentOpenIndex]
+            : []
+        : currentOpenIndexes), [mode, currentOpenIndex, currentOpenIndexes]);
+    function setSingle(next) {
+        if (isControlledSingle)
+            onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
+        else {
+            setInternalOpenIndex(next);
+            onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
+        }
+    }
+    function setMultiple(next) {
+        const normalized = uniqSorted(next);
+        if (isControlledMultiple)
+            onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
+        else {
+            setInternalOpenIndexes(normalized);
+            onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
+        }
+    }
+    function toggle(index) {
+        const item = items[index];
+        if (!item || item.disabled)
+            return;
+        if (mode === 'single') {
+            const isOpen = openSet.has(index);
+            setSingle(isOpen ? null : index);
+            return;
+        }
+        // multiple
+        const isOpen = openSet.has(index);
+        if (isOpen)
+            setMultiple(currentOpenIndexes.filter(i => i !== index));
+        else
+            setMultiple([...currentOpenIndexes, index]);
+    }
+    return (_jsx("div", { className: `${styles.container} ${styles[size]}`, children: items.map((item, i) => {
+            const isOpen = openSet.has(i);
+            const isDisabled = !!item.disabled;
+            const buttonId = `${uid}-acc-btn-${i}`;
+            const panelId = `${uid}-acc-panel-${i}`;
+            return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(i), disabled: isDisabled, children: [_jsx("span", { className: styles.title, children: _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, allowWrap: isOpen, children: item.header }) }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 20 20", focusable: "false", children: _jsx("path", { d: "M5.5 7.5L10 12l4.5-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: styles.panel, "data-open": isOpen ? 'true' : 'false', children: _jsx("div", { className: styles.content, children: item.children }) })] }, i));
+        }) }));
+}

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

@@ -0,0 +1,87 @@
+.container {
+  border-radius: var(--border-radius-default);
+  background-color: var(--color-bg-surface);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: var(--spacing-xxs);
+}
+
+.trigger {
+  all: unset;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  user-select: none;
+  padding: var(--spacing-xs) var(--spacing-md);
+  background: var(--color-bg-contextual);
+
+  /* IMPORTANT: allow flex children to actually shrink */
+  min-width: 0;
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.disabled .trigger {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+}
+
+.title {
+  /* IMPORTANT: this is the shrinking area that contains Headline */
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+
+  /* ensures any overflow is clipped so ellipsis can show */
+  overflow: hidden;
+}
+
+.chevron {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  flex: 0 0 auto;
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.open .chevron {
+  transform: rotate(180deg);
+}
+
+/* Collapsible panel using max-height */
+.panel {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height var(--transition-slow) var(--ease-decelerate);
+}
+
+.panel[data-open='true'] {
+  max-height: 999px;
+}
+
+.content {
+  padding: var(--spacing-md) 0;
+}
+
+/* Sizes */
+.sm .trigger,
+.sm .content {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.md .trigger {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.lg .trigger {
+  padding: var(--spacing-md) var(--spacing-md);
+}

package/dist/components/button/Button.module.css

@@ -47,6 +47,7 @@
   background-color: var(--color-disabled-bg);
   border-color: transparent;
   color: var(--color-disabled-fg);
+  opacity: 0.5;
 }
 
 /* ==========================================================================

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

@@ -1,10 +1,10 @@
+import type { ReactNode, JSX, HTMLAttributes } from 'react';
 import { JSXElementConstructor, ReactElement } from 'react';
-import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
 type CardVariant = 'default' | 'subtle' | 'strong';
 type CardSize = 'sm' | 'md' | 'lg';
 type CardImagePlacement = 'left' | 'right' | 'top';
-interface CardProps {
+export interface CardProps {
     title?: string;
     loading?: boolean;
     variant?: CardVariant;
@@ -23,5 +23,23 @@ interface CardProps {
     link?: ReactElement<any, string | JSXElementConstructor<any>>;
     width?: 25 | 33 | 50 | 66 | 75 | 100;
 }
-export declare function Card({ title, loading, variant, size, headerMarker, headerIcon, severity, image, imgPlacement, mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider, children, link, width, }: CardProps): JSX.Element;
+type CardMetaProps = {
+    columns?: 1 | 2 | 3;
+    className?: string;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDListElement>, 'children'>;
+type CardMetaRowProps = {
+    label: ReactNode;
+    labelWidth?: string;
+    value: ReactNode;
+    className?: string;
+    nowrapValue?: boolean;
+};
+declare function CardMeta({ columns, className, children, ...rest }: CardMetaProps): JSX.Element;
+declare function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }: CardMetaRowProps): JSX.Element;
+type CardComponent = ((props: CardProps) => JSX.Element) & {
+    Meta: typeof CardMeta;
+    MetaRow: typeof CardMetaRow;
+};
+export declare const Card: CardComponent;
 export {};

package/dist/components/card/Card.js

@@ -4,7 +4,7 @@ import styles from './Card.module.css';
 import { Headline } from '../headline/Headline';
 import { Hyperlink } from '../hyperlink/Hyperlink';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-export function Card({ title, loading, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, }) {
+function CardImpl({ title, loading, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, }) {
     const outerContainerStyle = width
         ? { ['--width']: `${width}%` }
         : undefined;
@@ -17,6 +17,21 @@ export function Card({ title, loading, variant = 'default', size = 'md', headerM
             ? styles.innerImgRight
             : styles.innerImgLeft;
     const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image && (_jsx("div", { className: styles.media, style: mediaStyle, children: image })), _jsxs("div", { className: styles.content, children: [(title || headerMeta) && (_jsxs("header", { className: styles.header, children: [title && (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, size: 4, weight: 500, disableMargin: true, children: title })), headerMeta && _jsx("div", { className: styles.headerMeta, children: headerMeta })] })), loading && (_jsx("div", { className: styles.loadingList, children: Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })), !loading && (showSectionDivider || sectionTitle) && (_jsxs("div", { className: styles.section, children: [showSectionDivider && _jsx("div", { className: styles.sectionDivider }), sectionTitle && _jsx("div", { className: styles.sectionTitle, children: sectionTitle })] })), !loading && children && _jsx("div", { className: styles.body, children: children }), !loading && actions && _jsx("div", { className: styles.actions, children: actions })] })] }));
-    const cardWithLink = link ? _jsx(Hyperlink, { component: link }) : inner;
+    // keep existing behavior
+    const cardWithLink = link ? _jsx(Hyperlink, { children: link }) : inner;
     return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerContainerStyle, children: _jsx("div", { className: [styles.container, styles[variant]].filter(Boolean).join(' '), children: cardWithLink }) }));
 }
+// ---- subcomponents (declared normally) ----
+function CardMeta({ columns = 2, className, children, ...rest }) {
+    const colsClass = columns === 1 ? styles.metaCols1 : columns === 2 ? styles.metaCols2 : styles.metaCols3;
+    return (_jsx("dl", { ...rest, className: [styles.metaGrid, colsClass, className].filter(Boolean).join(' '), children: children }));
+}
+function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }) {
+    return (_jsxs("div", { className: [styles.metaRow, className].filter(Boolean).join(' '), style: { '--label-width': labelWidth }, children: [_jsx("dt", { className: styles.metaLabel, children: label }), _jsx("dd", { className: [styles.metaValue, nowrapValue ? styles.metaNowrap : undefined]
+                    .filter(Boolean)
+                    .join(' '), children: value })] }));
+}
+export const Card = Object.assign(CardImpl, {
+    Meta: CardMeta,
+    MetaRow: CardMetaRow,
+});

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

@@ -171,3 +171,62 @@
   justify-content: flex-end; /* right-align buttons */
   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/circle/Circle.d.ts

@@ -1,9 +1,13 @@
 import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
+type CircleSize = 'xs' | 'sm' | 'md' | 'lg';
 interface CircleProps {
     severity: Severity;
     children?: ReactNode;
     glow?: boolean;
+    muted?: boolean;
+    pulse?: boolean;
+    size?: CircleSize;
 }
-export declare function Circle({ severity, children, glow }: CircleProps): JSX.Element;
+export declare function Circle({ severity, children, glow, muted, pulse, size, }: CircleProps): JSX.Element;
 export {};

package/dist/components/circle/Circle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Circle.module.css';
-export function Circle({ severity, children, glow }) {
-    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, className: `${styles.circle} ${styles[severity]}` }), children, ' '] }));
+export function Circle({ severity, children, glow, muted, pulse, size = 'sm', }) {
+    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, "data-muted": muted, className: `${styles.circle} ${styles[severity]}` }), children] }));
 }

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

@@ -10,15 +10,16 @@
 }
 
 .circle {
+  position: relative;
   display: inline-block;
-  inline-size: var(--component-size-xs);
-  block-size: var(--component-size-xs);
+  inline-size: var(--component-size-sm);
+  block-size: var(--component-size-sm);
   border-radius: var(--border-radius-round);
   flex-shrink: 0;
-
   transition:
     background-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
+    box-shadow var(--transition-fast) var(--ease-standard),
+    opacity var(--transition-normal) var(--ease-standard);
 }
 
 /* Density modifier (optional) */
@@ -60,3 +61,58 @@
 .info[data-glow='true'] {
   box-shadow: 0 0 0 2px var(--color-status-info-bg);
 }
+
+.circle[data-size='xs'] {
+  inline-size: var(--component-size-xxs);
+  block-size: var(--component-size-xxs);
+}
+
+.circle[data-size='sm'] {
+  inline-size: 14px;
+  block-size: 14px;
+}
+
+.circle[data-size='md'] {
+  inline-size: 18px;
+  block-size: 18px;
+}
+
+.circle[data-muted='true'] {
+  opacity: 0.4;
+}
+
+.circle[data-size='lg'] {
+  inline-size: 22px;
+  block-size: 22px;
+}
+
+.circle[data-pulse='true']::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: inherit;
+  animation: circle-pulse 1.6s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes circle-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  60% {
+    transform: scale(2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .circle[data-pulse='true']::after {
+    animation: none;
+  }
+}

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

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './CodeBlock.module.css';
 import { CopyButton } from '../copy-button/CopyButton';
 export function CodeBlock({ code, copyButton, size = 'md' }) {
-    return (_jsxs("pre", { className: `${styles.container} ${styles[size]}`, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { text: code }) })), _jsx("code", { className: styles.code, children: code })] }));
+    return (_jsxs("pre", { className: `${styles.container} ${styles[size]}`, tabIndex: 0, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { style: "link", text: code }) })), _jsx("code", { className: styles.code, children: code })] }));
 }

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

@@ -1,21 +1,33 @@
 .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;
+
+  background: var(--color-bg-contextual-subtle);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-xs);
+
+  padding: var(--spacing-sm);
   padding-inline-end: calc(var(--spacing-sm) + 40px);
+
+  font-family: var(--font-family-mono);
+  line-height: var(--line-height-relaxed);
+
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  /* Nice: avoids layout shift if/when scrollbars appear (supported in modern browsers) */
+  scrollbar-gutter: stable;
+}
+
+.container:focus-within {
+  border-color: var(--color-border-selected);
+  box-shadow: var(--shadow-xs), var(--focus-ring);
 }
 
 .container.sm {
   padding: var(--spacing-xs);
-  padding-inline-end: calc(var(--spacing-xxs) + 40px);
-  min-height: 0;
+  padding-inline-end: calc(var(--spacing-xs) + 40px);
 }
 
 .container.sm .code {
@@ -25,6 +37,7 @@
 .container.md .code {
   font-size: var(--font-size-sm);
 }
+
 .container.lg .code {
   font-size: var(--font-size-base);
 }
@@ -33,11 +46,15 @@
   display: block;
   margin: 0;
   font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  line-break: anywhere;
-  word-break: break-all;
+  color: var(--color-fg-default);
+
+  /* ✅ Preserve formatting but avoid ugly breaking */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: normal; /* <- not break-all */
 }
 
+/* Copy button stays overlayed; does not affect layout */
 .copyButton {
   position: absolute;
   top: var(--spacing-xs);
@@ -54,7 +71,3 @@
   opacity: 1;
   pointer-events: auto;
 }
-
-.copyButton button {
-  pointer-events: auto;
-}

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

@@ -5,6 +5,7 @@ interface CopyButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     children?: ReactNode;
+    style?: 'button' | 'link';
 }
 export declare function CopyButton(props: CopyButtonProps & ComponentProps<typeof Button>): ReactNode;
 export {};

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

@@ -4,8 +4,9 @@ import { Check, Copy } from 'lucide-react';
 import { useState } from 'react';
 import styles from './CopyButton.module.css';
 import { Button } from '../button/Button';
+import { Hyperlink } from '../hyperlink/Hyperlink';
 export function CopyButton(props) {
-    var _a;
+    var _a, _b;
     const { text, variant = 'outlined', size = 'sm', children, ...rest } = props;
     const [copied, setCopied] = useState(false);
     const handleCopy = async () => {
@@ -18,5 +19,12 @@ export function CopyButton(props) {
             console.error('Failed to copy: ', err);
         }
     };
-    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_a = rest['aria-label']) !== null && _a !== void 0 ? _a : 'Kopier til udklipsholder'), onClick: handleCopy, variant: variant, size: size, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }), children] }));
+    if (props.style === 'link') {
+        return (_jsx(Hyperlink, { asChild: true, variant: "secondary", inline: props.variant === 'inline', children: _jsxs("button", { "aria-label": children ? '' : ((_a = rest['aria-label']) !== null && _a !== void 0 ? _a : 'Kopier til udklipsholder'), onClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleCopy();
+                }, className: `${styles.link} ${copied ? styles.copied : ''}`, children: [children, copied ? _jsx(Check, {}) : _jsx(Copy, {})] }) }));
+    }
+    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_b = rest['aria-label']) !== null && _b !== void 0 ? _b : 'Kopier til udklipsholder'), onClick: handleCopy, variant: variant, size: size, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }), children] }));
 }

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Input } from '../../components/forms/input/Input';
-import { DateOnly } from './dateTimeHelpers';
+import { type UtcIsoString } from './dateTimeHelpers';
 type Mode = 'single' | 'range';
 type WeekStart = 0 | 1;
-export type DateValue = number | DateOnly | null | {
-    start: DateOnly | null;
-    end: DateOnly | null;
+export type DateValue = UtcIsoString | null | {
+    start: UtcIsoString | null;
+    end: UtcIsoString | null;
 };
 type InputProps = React.ComponentProps<typeof Input>;
 export interface DateTimePickerProps {
@@ -25,10 +25,6 @@ export interface DateTimePickerProps {
             end: Date;
         };
     }[];
-    /**
-     * Forwarded to the internal <Input />.
-     * DateTimePicker controls: value, onInput/onBlur/onKeyDown, icon, onClear.
-     */
     inputProps?: Omit<InputProps, 'value' | 'onInput' | 'onBlur' | 'icon' | 'onClear' | 'type'>;
     formatDate?: (d: Date, opts: {
         locale: string;