@boostdev/design-system-components 1.2.1 → 1.2.2

package/src/components/ui/Badge/Badge.tsx

@@ -1,13 +1,12 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 import css from './Badge.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface BadgeProps extends WithClassName {
-  children: ReactNode;
+interface BadgeProps extends WithClassName, HTMLAttributes<HTMLSpanElement> {
   variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
 }
 
-export function Badge({ children, variant = 'primary', className }: BadgeProps) {
-  return <span className={cn(css.badge, css[`--variant_${variant}`], className)}>{children}</span>;
+export function Badge({ children, variant = 'primary', className, ...rest }: BadgeProps) {
+  return <span {...rest} className={cn(css.badge, css[`--variant_${variant}`], className)}>{children}</span>;
 }

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'react';
 import css from './Breadcrumb.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -7,13 +8,13 @@ export interface BreadcrumbItem {
   href?: string;
 }
 
-interface BreadcrumbProps extends WithClassName {
+interface BreadcrumbProps extends WithClassName, HTMLAttributes<HTMLElement> {
   items: BreadcrumbItem[];
 }
 
-export function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>) {
+export function Breadcrumb({ items, className, ...rest }: Readonly<BreadcrumbProps>) {
   return (
-    <nav aria-label="Breadcrumb" className={cn(css.breadcrumb, className)}>
+    <nav {...rest} aria-label="Breadcrumb" className={cn(css.breadcrumb, className)}>
       <ol className={css.list}>
         {items.map((item, index) => {
           const isLast = index === items.length - 1;

package/src/components/ui/Calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import { useState, useId, KeyboardEvent } from 'react';
+import { HTMLAttributes, useState, useId, KeyboardEvent } from 'react';
 import css from './Calendar.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -13,7 +13,7 @@ const MONTHS = [
   'July', 'August', 'September', 'October', 'November', 'December',
 ];
 
-interface CalendarProps extends WithClassName {
+interface CalendarProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
   value?: Date;
   defaultValue?: Date;
   min?: Date;
@@ -46,7 +46,7 @@ function getFirstDayOfMonth(year: number, month: number): number {
   return new Date(year, month, 1).getDay();
 }
 
-export function Calendar({ value, defaultValue, min, max, onChange, className }: Readonly<CalendarProps>) {
+export function Calendar({ value, defaultValue, min, max, onChange, className, ...rest }: Readonly<CalendarProps>) {
   const today = new Date();
   const controlled = value !== undefined;
   const [internal, setInternal] = useState<Date | undefined>(defaultValue);
@@ -107,7 +107,7 @@ export function Calendar({ value, defaultValue, min, max, onChange, className }:
   while (cells.length % 7 !== 0) cells.push(null);
 
   return (
-    <div className={cn(css.calendar, className)} role="group" aria-labelledby={titleId}>
+    <div {...rest} className={cn(css.calendar, className)} role="group" aria-labelledby={titleId}>
       <div className={css.header}>
         <button
           type="button"

package/src/components/ui/Carousel/Carousel.tsx

@@ -1,14 +1,14 @@
-import { ReactNode, useRef, useId } from 'react';
+import { HTMLAttributes, ReactNode, useRef, useId } from 'react';
 import css from './Carousel.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface CarouselProps extends WithClassName {
+interface CarouselProps extends WithClassName, HTMLAttributes<HTMLElement> {
   items: ReactNode[];
   label: string;
 }
 
-export function Carousel({ items, label, className }: Readonly<CarouselProps>) {
+export function Carousel({ items, label, className, ...rest }: Readonly<CarouselProps>) {
   const trackRef = useRef<HTMLDivElement>(null);
   const listId = useId();
 
@@ -22,7 +22,7 @@ export function Carousel({ items, label, className }: Readonly<CarouselProps>) {
   };
 
   return (
-    <section aria-label={label} className={cn(css.carousel, className)}>
+    <section {...rest} aria-label={label} className={cn(css.carousel, className)}>
       <button
         type="button"
         className={cn(css.navBtn, css['--prev'])}

package/src/components/ui/DescriptionList/DescriptionList.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import css from './DescriptionList.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -8,14 +8,14 @@ export interface DescriptionItem {
   details: ReactNode | ReactNode[];
 }
 
-interface DescriptionListProps extends WithClassName {
+interface DescriptionListProps extends WithClassName, HTMLAttributes<HTMLDListElement> {
   items: DescriptionItem[];
   layout?: 'stacked' | 'inline';
 }
 
-export function DescriptionList({ items, layout = 'stacked', className }: Readonly<DescriptionListProps>) {
+export function DescriptionList({ items, layout = 'stacked', className, ...rest }: Readonly<DescriptionListProps>) {
   return (
-    <dl className={cn(css.list, css[`--layout_${layout}`], className)}>
+    <dl {...rest} className={cn(css.list, css[`--layout_${layout}`], className)}>
       {items.map((item, i) => (
         <div key={i} className={css.group}>
           <dt className={css.term}>{item.term}</dt>

package/src/components/ui/Loading/Loading.tsx

@@ -1,14 +1,15 @@
+import { HTMLAttributes } from 'react';
 import css from './Loading.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface LoadingProps extends WithClassName {
+interface LoadingProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   size?: 'small' | 'medium' | 'large';
 }
 
-export function Loading({ size = 'medium', className }: LoadingProps) {
+export function Loading({ size = 'medium', className, ...rest }: LoadingProps) {
   return (
-    <div className={cn(css.loading, css[`--size_${size}`], className)}>
+    <div {...rest} className={cn(css.loading, css[`--size_${size}`], className)}>
       <div className={css.spinner} role="status" aria-label="Loading" />
     </div>
   );

package/src/components/ui/NotificationBanner/NotificationBanner.tsx

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import css from './NotificationBanner.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface NotificationBannerProps extends WithClassName {
+interface NotificationBannerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   variant?: 'info' | 'success' | 'warning' | 'error';
   children: ReactNode;
   action?: ReactNode;
@@ -16,11 +16,13 @@ export function NotificationBanner({
   action,
   onDismiss,
   className,
+  ...rest
 }: Readonly<NotificationBannerProps>) {
   const isUrgent = variant === 'error' || variant === 'warning';
 
   return (
     <div
+      {...rest}
       role={isUrgent ? 'alert' : 'status'}
       aria-live={isUrgent ? 'assertive' : 'polite'}
       aria-atomic="true"

package/src/components/ui/Pagination/Pagination.tsx

@@ -1,8 +1,9 @@
+import { HTMLAttributes } from 'react';
 import css from './Pagination.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface PaginationProps extends WithClassName {
+interface PaginationProps extends WithClassName, HTMLAttributes<HTMLElement> {
   currentPage: number;
   totalPages: number;
   onPageChange: (page: number) => void;
@@ -28,11 +29,12 @@ export function Pagination({
   totalPages,
   onPageChange,
   className,
+  ...rest
 }: Readonly<PaginationProps>) {
   const pages = getPageRange(currentPage, totalPages);
 
   return (
-    <nav aria-label="Pagination" className={cn(css.pagination, className)}>
+    <nav {...rest} aria-label="Pagination" className={cn(css.pagination, className)}>
       <ul className={css.list}>
         <li>
           <button

package/src/components/ui/Progress/Progress.tsx

@@ -1,8 +1,9 @@
+import { HTMLAttributes } from 'react';
 import css from './Progress.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface ProgressProps extends WithClassName {
+interface ProgressProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   value: number;
   max?: number;
   label: string;
@@ -17,11 +18,12 @@ export function Progress({
   showLabel = false,
   size = 'medium',
   className,
+  ...rest
 }: Readonly<ProgressProps>) {
   const percentage = Math.min(100, Math.max(0, (value / max) * 100));
 
   return (
-    <div className={cn(css.container, className)}>
+    <div {...rest} className={cn(css.container, className)}>
       {showLabel && (
         <div className={css.labelRow}>
           <span className={css.label}>{label}</span>

package/src/components/ui/ProgressCircle/ProgressCircle.tsx

@@ -1,8 +1,9 @@
+import { HTMLAttributes } from 'react';
 import css from './ProgressCircle.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface ProgressCircleProps extends WithClassName {
+interface ProgressCircleProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   value: number;
   max?: number;
   label: string;
@@ -20,6 +21,7 @@ export function ProgressCircle({
   showValue = false,
   size = 'medium',
   className,
+  ...rest
 }: Readonly<ProgressCircleProps>) {
   const percentage = Math.min(100, Math.max(0, (value / max) * 100));
   const px = SIZE_PX[size];
@@ -30,6 +32,7 @@ export function ProgressCircle({
 
   return (
     <div
+      {...rest}
       role="progressbar"
       aria-label={label}
       aria-valuenow={value}

package/src/components/ui/Separator/Separator.tsx

@@ -1,15 +1,17 @@
+import { HTMLAttributes } from 'react';
 import css from './Separator.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface SeparatorProps extends WithClassName {
+interface SeparatorProps extends WithClassName, HTMLAttributes<HTMLElement> {
   orientation?: 'horizontal' | 'vertical';
 }
 
-export function Separator({ orientation = 'horizontal', className }: Readonly<SeparatorProps>) {
+export function Separator({ orientation = 'horizontal', className, ...rest }: Readonly<SeparatorProps>) {
   if (orientation === 'vertical') {
     return (
       <div
+        {...rest}
         role="separator"
         aria-orientation="vertical"
         className={cn(css.separator, css['--vertical'], className)}
@@ -17,5 +19,5 @@ export function Separator({ orientation = 'horizontal', className }: Readonly<Se
     );
   }
 
-  return <hr aria-orientation="horizontal" className={cn(css.separator, css['--horizontal'], className)} />;
+  return <hr {...rest} aria-orientation="horizontal" className={cn(css.separator, css['--horizontal'], className)} />;
 }

package/src/components/ui/Skeleton/Skeleton.tsx

@@ -1,11 +1,12 @@
+import { HTMLAttributes } from 'react';
 import { cn } from '@boostdev/design-system-foundation';
 import css from './Skeleton.module.css';
 import type { WithClassName } from '../../../types';
 
-type SkeletonProps = WithClassName;
+type SkeletonProps = WithClassName & HTMLAttributes<HTMLDivElement>;
 
-export function Skeleton({ className }: SkeletonProps) {
+export function Skeleton({ className, ...rest }: SkeletonProps) {
   return (
-    <div aria-hidden="true" className={cn(css.skeleton, className)} />
+    <div {...rest} aria-hidden="true" className={cn(css.skeleton, className)} />
   );
 }

package/src/components/ui/SkipLink/SkipLink.tsx

@@ -1,15 +1,14 @@
+import { AnchorHTMLAttributes } from 'react';
 import css from './SkipLink.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface SkipLinkProps extends WithClassName {
-  href?: string;
-  children?: string;
+interface SkipLinkProps extends WithClassName, AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
-export function SkipLink({ href = '#main', children = 'Skip to main content', className }: SkipLinkProps) {
+export function SkipLink({ href = '#main', children = 'Skip to main content', className, ...rest }: SkipLinkProps) {
   return (
-    <a href={href} className={cn(css.skipLink, className)}>
+    <a {...rest} href={href} className={cn(css.skipLink, className)}>
       {children}
     </a>
   );

package/src/components/ui/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import { KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
+import { HTMLAttributes, KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
 import css from './Tabs.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -10,12 +10,12 @@ export interface TabItem {
   disabled?: boolean;
 }
 
-interface TabsProps extends WithClassName {
+interface TabsProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   tabs: TabItem[];
   defaultTab?: string;
 }
 
-export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {
+export function Tabs({ tabs, defaultTab, className, ...rest }: Readonly<TabsProps>) {
   const baseId = useId();
   const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0]?.id);
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
@@ -49,7 +49,7 @@ export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {
   };
 
   return (
-    <div className={cn(css.tabs, className)}>
+    <div {...rest} className={cn(css.tabs, className)}>
       <div role="tablist" className={css.tabList}>
         {tabs.map((tab, i) => {
           const tabId = `${baseId}-tab-${tab.id}`;

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -1,9 +1,9 @@
-import { ReactElement, ReactNode, cloneElement, isValidElement, useId, useState } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode, cloneElement, isValidElement, useId, useState } from 'react';
 import css from './Tooltip.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface TooltipProps extends WithClassName {
+interface TooltipProps extends WithClassName, Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   children: ReactElement;
@@ -14,6 +14,7 @@ export function Tooltip({
   placement = 'top',
   children,
   className,
+  ...rest
 }: Readonly<TooltipProps>) {
   const tooltipId = useId();
   const [isVisible, setIsVisible] = useState(false);
@@ -26,6 +27,7 @@ export function Tooltip({
 
   return (
     <span
+      {...rest}
       className={cn(css.wrapper, className)}
       onMouseEnter={() => setIsVisible(true)}
       onMouseLeave={() => setIsVisible(false)}

package/src/components/ui/Typography/Typography.tsx

@@ -1,14 +1,13 @@
-import { ReactNode, ElementType } from 'react';
+import { ElementType, HTMLAttributes } from 'react';
 import css from './Typography.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
 
-interface TypographyProps extends WithClassName {
+interface TypographyProps extends WithClassName, HTMLAttributes<HTMLElement> {
   variant?: TypographyVariant;
   component?: ElementType;
-  children: ReactNode;
 }
 
 const variantToElement: Record<TypographyVariant, ElementType> = {
@@ -19,10 +18,10 @@ const variantToElement: Record<TypographyVariant, ElementType> = {
   body_s: 'p',
 };
 
-export function Typography({ variant = 'body', component, children, className }: TypographyProps) {
+export function Typography({ variant = 'body', component, children, className, ...rest }: TypographyProps) {
   const Component = component || variantToElement[variant];
 
   return (
-    <Component className={cn(css.typography, css[`--${variant}`], className)}>{children}</Component>
+    <Component {...rest} className={cn(css.typography, css[`--${variant}`], className)}>{children}</Component>
   );
 }

package/src/stories/DesignSystem/Grid.mdx

@@ -122,6 +122,8 @@ Apply the built-in layout utilities to use the grid system without writing CSS:
 </div>
 ```
 
+> **Important:** Every direct child of `utl-main-grid` **must** set `grid-column: var(--bds-grid_span-<variant>);` (e.g. `--bds-grid_span-100`, `--bds-grid_span-50`). Without it the child collapses to a single column and the responsive grid behaviour is lost.
+
 ## Custom grid usage
 
 ```css