@dbcdk/react-components 0.0.88 → 0.0.90

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

@@ -2,6 +2,7 @@ import type { JSX, ReactNode } from 'react';
 import type { Severity } from '../../constants/severity.types';
 export interface AccordionItem {
     header: string;
+    subheader?: ReactNode;
     headerAddition?: ReactNode;
     headerIcon?: ReactNode;
     severity?: Severity;

package/dist/components/accordion/components/AccordionRow.js

@@ -49,5 +49,5 @@ export function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate
     const buttonId = `${uid}-acc-btn-${index}`;
     const panelId = `${uid}-acc-panel-${index}`;
     const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
-    return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsx("div", { children: _jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => onToggle(index), disabled: isDisabled, children: [_jsxs("span", { className: styles.title, children: [item.headerIcon ? _jsx("span", { className: styles.icon, children: item.headerIcon }) : null, _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, allowWrap: isOpen, children: item.header }), item.headerAddition] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, {}) })] }) }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`, style: { height }, onTransitionEnd: onTransitionEnd, children: _jsx("div", { ref: innerRef, className: styles.content, children: item.children }) })] }));
+    return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsx("div", { children: _jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => onToggle(index), disabled: isDisabled, children: [_jsxs("span", { className: styles.title, children: [item.headerIcon ? _jsx("span", { className: styles.icon, children: item.headerIcon }) : null, _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, subheader: item.subheader, allowWrap: isOpen, children: item.header }), item.headerAddition] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, {}) })] }) }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`, style: { height }, onTransitionEnd: onTransitionEnd, children: _jsx("div", { ref: innerRef, className: styles.content, children: item.children }) })] }));
 }

package/dist/components/avatar/Avatar.js

@@ -4,14 +4,16 @@ import styles from './Avatar.module.css';
 import { SeverityBgColor, SeverityTextColor } from '../../constants/severity';
 import { sizes } from '../../constants/sizes';
 export function Avatar({ image, imgSrc, imgAlt, fullName, color = 'brand', button, size = 'md', className, fullWidth = false, photographerCredit, ...rest }) {
-    const text = fullName
-        ? fullName
-            .trim()
-            .split(/\s+/)
-            .map(name => name.charAt(0))
-            .join('')
-            .toUpperCase()
-        : '';
+    const text = (() => {
+        if (!fullName)
+            return '';
+        const parts = fullName.trim().split(/\s+/);
+        if (parts.length === 1) {
+            return parts[0].charAt(0).toUpperCase();
+        }
+        // Use first letter of first and last part only
+        return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+    })();
     const styleVars = {
         '--bg': SeverityBgColor[color],
         '--text': SeverityTextColor[color],
@@ -31,9 +33,13 @@ export function Avatar({ image, imgSrc, imgAlt, fullName, color = 'brand', butto
         if (imgSrc) {
             return _jsx("img", { className: styles.image, src: imgSrc, alt: imgAlt });
         }
-        return (_jsx("span", { className: styles.avatar, "aria-hidden": "true", children: text }));
+        const avatarSizeClass = [styles.avatar];
+        if (size === 'xs')
+            avatarSizeClass.push(styles['size-xs']);
+        if (size === 'sm')
+            avatarSizeClass.push(styles['size-sm']);
+        return (_jsx("span", { className: avatarSizeClass.join(' '), "aria-hidden": "true", children: text }));
     };
-    // Keep button behavior as before (no circular credit)
     if (button) {
         return (_jsx("button", { type: "button", ...rest, className: [styles.container, styles.button, className].filter(Boolean).join(' '), style: styleVars, children: renderImage() }));
     }

package/dist/components/avatar/Avatar.module.css

@@ -4,64 +4,85 @@
   max-inline-size: var(--component-size-xl);
   aspect-ratio: 1 / 1;
   border-radius: var(--border-radius-round);
-  background-color: var(--bg);
-  color: var(--text);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-normal);
   overflow: hidden;
 }
 
 .container.button {
   cursor: pointer;
   border: 0;
-  background: var(--bg);
-  transition: opacity var(--transition-fast) var(--ease-standard);
+  padding: 0;
+  background: transparent; /* important */
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    opacity var(--transition-fast) var(--ease-standard);
+}
+
+.container.button:hover .avatar {
+  background-color: color-mix(in srgb, var(--bg) 25%, var(--color-bg-surface));
 }
 
-.container.button:hover {
+.container.button:active {
   opacity: 0.8;
 }
 
 .avatar {
-  display: flex;
+  inline-size: 80%;
+  block-size: 80%;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  border-radius: 50%;
+
+  /* moved here */
+  background-color: color-mix(in srgb, var(--bg) 20%, var(--color-bg-surface));
+  color: var(--bg);
+
   font-size: var(--font-size-sm);
   line-height: 1;
   text-transform: uppercase;
 }
 
+.avatar.size-xs,
+.avatar.size-sm {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+}
+
 .image {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   display: block;
+  border-radius: 50%; /* important if image fills avatar */
 }
 
 .imageSlot {
   display: contents;
 }
 
-/* Wrapper for non-button avatar so we can overlay SVG */
 .wrapper {
   position: relative;
   display: inline-block;
+  inline-size: var(--size);
+  block-size: var(--size);
+  max-inline-size: var(--component-size-xl);
+  aspect-ratio: 1 / 1;
   color: var(--text);
 }
 
-/* Circular photographer credit text overlay */
 .creditText {
   position: absolute;
   inset: 0;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   pointer-events: none;
   fill: currentColor;
 }
 
-/* Make sure the font is large enough and clearly visible */
 .creditText text {
   font-size: 11px;
   font-weight: 600;

package/dist/components/button/Button.js

@@ -67,7 +67,14 @@ export const Button = React.forwardRef(function Button({ variant = 'outlined', s
         });
     }
     else {
-        buttonEl = (_jsx("button", { className: computedClassName, type: type, ...buttonProps, ...(tooltipEnabled ? triggerProps : {}), "aria-describedby": describedBy, children: content }));
+        const isDisabled = Boolean(buttonProps.disabled);
+        buttonEl = (_jsx("button", { className: computedClassName, type: type, ...buttonProps, ...(tooltipEnabled && !isDisabled ? triggerProps : {}), "aria-describedby": describedBy, children: content }));
+        if (tooltipEnabled && isDisabled) {
+            buttonEl = (_jsx("span", { ref: triggerProps.ref, onPointerEnter: triggerProps.onPointerEnter, onPointerLeave: triggerProps.onPointerLeave, style: {
+                    display: fullWidth ? 'flex' : 'inline-flex',
+                    cursor: 'not-allowed',
+                }, children: buttonEl }));
+        }
     }
     return buttonEl;
 });

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

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -117,6 +117,7 @@
 
 .button.lg {
   height: var(--component-size-lg);
+  font-size: var(--font-size-md);
   min-block-size: var(--component-size-lg);
   padding-inline: var(--spacing-lg);
 }

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

@@ -6,6 +6,7 @@ type CardSize = 'sm' | 'md' | 'lg';
 type CardImagePlacement = 'left' | 'right' | 'top';
 export interface CardProps {
     title?: string;
+    subheader?: ReactNode;
     loading?: boolean;
     variant?: CardVariant;
     size?: CardSize;
@@ -21,11 +22,6 @@ export interface CardProps {
     sectionTitle?: string;
     showSectionDivider?: boolean;
     children?: ReactNode;
-    /**
-     * Keep current behavior: if provided, Card becomes "linked".
-     * NOTE: this assumes your Hyperlink component can render the passed element correctly.
-     * If Hyperlink expects an <a>, pass <a href="...">...</a> or whatever your existing pattern is.
-     */
     link?: ReactNode;
     width?: 25 | 33 | 50 | 66 | 75 | 100;
     headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;

package/dist/components/card/Card.js

@@ -4,6 +4,27 @@ import { CardMeta, CardMetaRow } from './components/CardMeta';
 import { Headline } from '../headline/Headline';
 import { Hyperlink } from '../hyperlink/Hyperlink';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+/**
+ * Fix for flex gap issue:
+ * Distributes gap proportionally across cards
+ */
+function getGapShare(width) {
+    switch (width) {
+        case 25:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)';
+        case 33:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)';
+        case 50:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) / 2)';
+        case 66:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) * 2 / 3)';
+        case 75:
+            return 'calc(var(--card-container-gap, var(--spacing-md)) * 3 / 4)';
+        case 100:
+        default:
+            return '0px';
+    }
+}
 function getInnerPlacementClass(imgPlacement, s) {
     switch (imgPlacement) {
         case 'top':
@@ -24,8 +45,13 @@ function getVariantClass(variant, s) {
             return s.variantDefault;
     }
 }
-function CardImpl({ title, loading = false, variant = 'default', size = 'md', headerMarker = true, headerIcon, headerAddition, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, headlineSize = 4, }) {
-    const outerStyle = width ? { ['--width']: `${width}%` } : undefined;
+function CardImpl({ title, subheader, loading = false, variant = 'default', size = 'md', headerMarker = true, headerIcon, headerAddition, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, headlineSize = 4, }) {
+    const outerStyle = width
+        ? {
+            ['--width']: `${width}%`,
+            ['--gap-share']: getGapShare(width),
+        }
+        : undefined;
     const mediaStyle = mediaWidth
         ? { ['--card-media-width']: `${mediaWidth}px` }
         : undefined;
@@ -35,8 +61,7 @@ function CardImpl({ title, loading = false, variant = 'default', size = 'md', he
     const showSection = !loading && (showSectionDivider || !!sectionTitle);
     const showBody = !loading && !!children;
     const showActions = !loading && !!actions;
-    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, addition: headerAddition, size: headlineSize, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
-    // keep existing behavior
+    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, addition: headerAddition, subheader: subheader, size: headlineSize, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
     const cardContent = link ? _jsx(Hyperlink, { children: link }) : inner;
     return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerStyle, children: _jsx("div", { className: `${styles.container} ${variantClass}`, children: cardContent }) }));
 }

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

@@ -1,62 +1,53 @@
-/* OUTER WRAPPER (optional width control) */
 .outerContainer {
-  inline-size: var(--width, 100%);
+  --width: 100%;
+  --gap-share: 0px;
+
+  flex: 0 1 calc(var(--width) - var(--gap-share));
+  min-width: 0;
+  box-sizing: border-box;
 }
 
-/* CARD CONTAINER */
+/* Card surface */
 .container {
-  inline-size: 100%;
-  position: relative;
-  color: var(--card-fg-default, var(--color-fg-default));
-  background-color: var(--card-bg-default, var(--color-bg-surface));
-  border-radius: var(--border-radius-md);
-  border: var(--border-width-thin) solid var(--color-border-subtle);
-  box-shadow: var(--shadow-xs);
-  transition:
-    color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard),
-    transform var(--transition-fast) var(--ease-standard);
-}
+  height: 100%;
+  border-radius: var(--border-radius-sm);
+  box-sizing: border-box;
 
-.container:hover {
-  box-shadow: var(--shadow-sm);
+  /* ✅ Restore border */
+  border: 1px solid var(--color-border-subtle);
+
+  /* Optional: ensure background sits under border */
+  background-clip: padding-box;
 }
 
-/* BACKGROUND VARIANTS */
+/* Variants */
 .variantDefault {
-  background-color: var(--card-bg-default, var(--color-bg-surface));
+  background-color: var(--card-bg-default, var(--color-bg-surface, var(--color-bg-surface-subtle)));
 }
 
 .variantSubtle {
-  background-color: var(--card-bg-subtle, var(--color-bg-contextual-subtle));
+  background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle, var(--color-bg-surface)));
 }
 
-/* SIZE VARIANTS (define vars once; inner uses them) */
-.sm {
-  --card-pad: var(--spacing-md);
-  --card-gap: var(--spacing-md);
+/* Sizes */
+.sm .container {
+  padding: var(--spacing-md);
 }
-.md {
-  --card-pad: var(--spacing-lg);
-  --card-gap: var(--spacing-lg);
+
+.md .container {
+  padding: var(--spacing-lg);
 }
-.lg {
-  --card-pad: var(--spacing-xl);
-  --card-gap: var(--spacing-xl);
+
+.lg .container {
+  padding: var(--spacing-xl);
 }
 
-/* INNER LAYOUT */
+/* Layout */
 .inner {
-  margin-inline: auto;
   display: flex;
-  align-items: flex-start;
-  padding: var(--card-pad);
-  gap: var(--card-gap);
-}
-
-/* Media placement */
-.innerImgTop {
-  flex-direction: column;
+  gap: var(--spacing-lg);
+  height: 100%;
+  min-width: 0;
 }
 
 .innerImgLeft {
@@ -67,101 +58,98 @@
   flex-direction: row-reverse;
 }
 
-/* MEDIA */
-.media {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-.innerImgLeft .media,
-.innerImgRight .media {
-  inline-size: var(--card-media-width, 56px);
-  max-inline-size: 25%;
-}
-
-.innerImgTop .media {
-  inline-size: 100%;
-  max-inline-size: 100%;
+.innerImgTop {
+  flex-direction: column;
 }
 
-.media img,
-.media picture,
-.media video,
-.media svg {
-  display: block;
-  inline-size: 100%;
-  block-size: auto;
+.media {
+  flex: 0 0 var(--card-media-width, auto);
+  min-width: 0;
 }
 
-/* CONTENT */
 .content {
-  flex: 1 1 auto;
-  min-inline-size: 0;
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   gap: var(--spacing-md);
+  min-width: 0;
 }
 
-/* HEADER */
+/* Header */
 .header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--spacing-sm);
-}
-
-.header > :first-child {
-  flex: 1 1 auto;
-  min-inline-size: 0;
+  gap: var(--spacing-md);
+  min-width: 0;
 }
 
 .headerMeta {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
+  flex: 0 0 auto;
 }
 
-/* LOADING */
-.loadingList {
-  display: grid;
-  gap: var(--spacing-sm);
+/* Body */
+.body {
+  min-width: 0;
+  flex: 1 1 auto;
 }
 
-.loadingRow {
-  display: grid;
-  grid-template-columns: auto 1fr;
+/* Actions */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
   gap: var(--spacing-sm);
-  align-items: center;
+  margin-top: auto;
 }
 
-/* SECTION */
+/* Section */
 .section {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  gap: var(--spacing-sm);
 }
 
 .sectionDivider {
-  inline-size: 100%;
-  block-size: var(--border-width-thin);
-  background: var(--color-border-subtle);
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-border-subtle);
 }
 
 .sectionTitle {
-  font-weight: var(--font-weight-semibold);
+  font-weight: 500;
 }
 
-/* BODY */
-.body {
-  /* neutral container */
+/* Loading */
+.loadingList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
 }
 
-/* ACTIONS */
-.actions {
-  margin-top: auto;
+.loadingRow {
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
   gap: var(--spacing-sm);
 }
+
+/* Responsive */
+@media screen and (max-width: 767px) {
+  .outerContainer {
+    --width: 100%;
+    --gap-share: 0px;
+
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  .inner,
+  .innerImgLeft,
+  .innerImgRight,
+  .innerImgTop {
+    flex-direction: column;
+  }
+
+  .header {
+    flex-direction: column;
+  }
+}

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

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

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

@@ -1,6 +1,6 @@
 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, disableMargin: true, children: headline })), _jsx("div", { className: styles.container, style: { ['--expand']: expand ? '1' : '0' }, children: children })] }));
+export function CardContainer({ children, headline, subheader, expand, severity, displayHeaderMarker, }) {
+    return (_jsxs("div", { className: styles.wrapper, children: [headline && (_jsx(Headline, { marker: displayHeaderMarker, severity: severity, disableMargin: true, subheader: subheader, children: headline })), _jsx("div", { className: styles.container, style: { ['--expand']: expand ? '1' : '0' }, children: children })] }));
 }

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

@@ -8,8 +8,8 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-md);
+  --card-container-gap: var(--spacing-md);
   border-radius: var(--border-radius-sm);
-  --width: 100%;
 }
 
 .container.default {
@@ -47,14 +47,15 @@
   padding: var(--spacing-lg);
 }
 
-@media screen and (min-width: 768px) {
-  .container {
-    --width: 33.333%;
-  }
-}
-
 .container > * {
-  flex-grow: var(--expand);
-  flex-shrink: 1;
+  min-width: 0;
   box-sizing: border-box;
 }
+
+/* Mobile: stack */
+@media screen and (max-width: 767px) {
+  .container > * {
+    flex-basis: 100% !important;
+    max-width: 100%;
+  }
+}

package/dist/components/clear-button/ClearButton.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
+import * as React from 'react';
 interface ClearButtonProps {
-    onClick: () => void;
+    onClick?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
     absolute?: boolean;
 }
 export declare function ClearButton({ onClick, absolute }: ClearButtonProps): ReactNode;

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

@@ -2,8 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { X } from 'lucide-react';
 import styles from './ClearButton.module.css';
 export function ClearButton({ onClick, absolute }) {
-    return (_jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ''}`, children: _jsx("span", { className: styles.button, role: "button", onClick: e => {
+    return (_jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ''}`, children: _jsx("button", { className: styles.button, type: "button", "data-input-role": "clear", onMouseDown: e => {
+                e.preventDefault();
                 e.stopPropagation();
-                onClick();
+            }, onClick: e => {
+                e.preventDefault();
+                e.stopPropagation();
+                onClick === null || onClick === void 0 ? void 0 : onClick(e);
             }, children: _jsx(X, { size: 16 }) }) }));
 }

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

@@ -1,8 +1,14 @@
 .clearButton .button {
+  appearance: none;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0;
+  border: 0;
+  background: transparent;
   color: var(--color-fg-subtle);
+  font: inherit;
+  line-height: 0;
   padding: var(--spacing-xxs);
   cursor: pointer;
   border-radius: 100%;

package/dist/components/divider/Divider.d.ts

@@ -0,0 +1,5 @@
+type DividerProps = {
+    spacing?: 'sm' | 'md' | 'lg';
+};
+export declare const Divider: ({ spacing }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/divider/Divider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const spacingMap = {
+    sm: 'var(--spacing-sm)',
+    md: 'var(--spacing-md)',
+    lg: 'var(--spacing-lg)',
+};
+export const Divider = ({ spacing = 'md' }) => {
+    return (_jsx("div", { style: {
+            borderTop: '1px solid var(--color-border-subtle)',
+            marginBlock: spacingMap[spacing],
+        } }));
+};

package/dist/components/forms/input/Input.d.ts

@@ -10,10 +10,11 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     maxWidth?: string | number;
     inputSize?: Exclude<Size, 'xl'>;
     variant?: InputVariant;
-    onClear?: () => void;
+    onClear?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
     onButtonClick?: () => void;
     buttonLabel?: string;
     buttonIcon?: React.ReactNode;
+    trailingLabel?: string;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
     tooltipOpenOnFocus?: boolean;