@boostdev/design-system-components 0.1.3 → 0.1.5

package/src/components/layout/IconWrapper/IconWrapper.module.css

@@ -1,8 +1,5 @@
 @layer component {
   .wrapper {
-    --icon-wrapper-color: var(--color_bg);
-    --color_on-icon-wrapper-color: var(--color_on-bg);
-
     width: 2em;
     height: 2em;
     font-size: 3em;
@@ -11,9 +8,9 @@
     align-items: center;
     justify-content: center;
     margin: var(--space_l) auto var(--space_m);
-    background: var(--icon-wrapper-color);
-    color: var(--color_on-icon-wrapper-color);
-    fill: var(--color_on-icon-wrapper-color);
+    background: var(--icon-wrapper-color, var(--color_bg));
+    color: var(--color_on-icon-wrapper-color, var(--color_on-bg));
+    fill: var(--color_on-icon-wrapper-color, var(--color_on-bg));
     position: relative;
     transition: var(--animation_transition);
   }

package/src/components/layout/SectionHeader/SectionHeader.module.css

@@ -1,8 +1,5 @@
 @layer component {
   .sectionHeader {
-    --sectionHeader-title-color: var(--color_on-bg);
-    --sectionHeader_subtitle-color: var(--color_grey--strong);
-
     display: flex;
     flex-direction: column;
     gap: var(--space_m);
@@ -11,13 +8,13 @@
   }
 
   .title {
-    color: var(--sectionHeader-title-color);
+    color: var(--sectionHeader-title-color, var(--color_on-bg));
     margin: 0;
     font-family: var(--font_family--body);
   }
 
   .subtitle {
-    color: var(--sectionHeader_subtitle-color);
+    color: var(--sectionHeader_subtitle-color, var(--color_grey--strong));
     margin: 0;
     font-family: var(--font_family--body);
     font-weight: var(--font_weight--medium);

package/src/components/layout/SectionHeader/SectionHeader.tsx

@@ -1,9 +1,8 @@
+import type { JSX } from 'react';
 import css from './SectionHeader.module.css';
 import { cn } from '@boostdev/design-system-foundation';
-import {JSX} from "react/jsx-runtime";
-type IntrinsicElements = JSX.IntrinsicElements;
 
-type IntrinsicElement = keyof IntrinsicElements
+type IntrinsicElement = keyof JSX.IntrinsicElements;
 
 type SectionHeaderProps = {
   title: string;

package/src/components/ui/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useId, useState } from 'react';
 import css from './Accordion.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface AccordionItem {
+export interface AccordionItem {
   id: string;
   title: ReactNode;
   content: ReactNode;

package/src/components/ui/Accordion/index.ts

@@ -1 +1,2 @@
 export { Accordion } from './Accordion';
+export type { AccordionItem } from './Accordion';

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

@@ -1,7 +1,7 @@
 import css from './Breadcrumb.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface BreadcrumbItem {
+export interface BreadcrumbItem {
   label: string;
   href?: string;
 }
@@ -19,7 +19,7 @@ export function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>) {
           const isLast = index === items.length - 1;
 
           return (
-            <li key={item.label} className={css.item}>
+            <li key={index} className={css.item}>
               {isLast ? (
                 <span aria-current="page" className={css.current}>
                   {item.label}

package/src/components/ui/Breadcrumb/index.ts

@@ -1 +1,2 @@
 export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbItem } from './Breadcrumb';

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

@@ -23,10 +23,15 @@ function isSameDay(a: Date, b: Date): boolean {
     a.getDate() === b.getDate();
 }
 
+function toMidnight(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
 function isOutOfRange(date: Date, min?: Date, max?: Date): boolean {
-  if (min && date < min) return true;
-  if (max && date > max) return true;
-  return false;
+  const d = toMidnight(date);
+  if (min && d < toMidnight(min)) return true;
+  return !!(max && d > toMidnight(max));
+
 }
 
 function getDaysInMonth(year: number, month: number): number {

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import css from './DescriptionList.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface DescriptionItem {
+export interface DescriptionItem {
   term: ReactNode;
   details: ReactNode | ReactNode[];
 }

package/src/components/ui/DescriptionList/index.ts

@@ -1 +1,2 @@
 export { DescriptionList } from './DescriptionList';
+export type { DescriptionItem } from './DescriptionList';

package/src/components/ui/Link/Link.tsx

@@ -7,6 +7,7 @@ type LinkOwnProps<T extends ElementType> = {
   children: ReactNode;
   variant?: 'default' | 'subtle' | 'standalone';
   external?: boolean;
+  externalLabel?: string;
   className?: string;
 };
 
@@ -18,6 +19,7 @@ export function Link<T extends ElementType = 'a'>({
   children,
   variant = 'default',
   external = false,
+  externalLabel = '(opens in new tab)',
   className,
   ...props
 }: LinkProps<T>) {
@@ -35,7 +37,7 @@ export function Link<T extends ElementType = 'a'>({
     >
       {children}
       {external && (
-        <span className={css.externalLabel}> (opens in new tab)</span>
+        <span className={css.externalLabel}>{externalLabel}</span>
       )}
     </Component>
   );

package/src/components/ui/Separator/Separator.module.css

@@ -1,22 +1,19 @@
 @layer component {
   .separator {
-    --separator_color:     var(--color_border);
-    --separator_thickness: 1px;
-
     border: none;
-    background-color: var(--separator_color);
+    background-color: var(--separator_color, var(--color_on-bg));
   }
 
   .separator.--horizontal {
     display: block;
     width: 100%;
-    height: var(--separator_thickness);
+    height: var(--separator_thickness, 1px);
     margin-block: var(--space_m);
   }
 
   .separator.--vertical {
     display: inline-block;
-    width: var(--separator_thickness);
+    width: var(--separator_thickness, 1px);
     align-self: stretch;
     margin-inline: var(--space_m);
   }

package/src/components/ui/Table/Table.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import css from './Table.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface TableColumn<Row> {
+export interface TableColumn<Row> {
   key: string;
   header: ReactNode;
   sortable?: boolean;

package/src/components/ui/Table/index.ts

@@ -1 +1,2 @@
 export { Table } from './Table';
+export type { TableColumn } from './Table';

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

@@ -2,7 +2,7 @@ import { KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
 import css from './Tabs.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface TabItem {
+export interface TabItem {
   id: string;
   label: ReactNode;
   content: ReactNode;

package/src/components/ui/Tabs/index.ts

@@ -1 +1,2 @@
 export { Tabs } from './Tabs';
+export type { TabItem } from './Tabs';

package/src/components/ui/Typography/Typography.module.css

@@ -1,11 +1,8 @@
 @layer component {
   .typography {
-    /* Component token — override from a parent context or inline style */
-    --typography_color: var(--color_on-bg);
-
     margin: 0;
     font-family: var(--font_family--body);
-    color: var(--typography_color);
+    color: var(--typography_color, var(--color_on-bg));
   }
 
   .--h1 {

package/src/index.ts

@@ -1,12 +1,15 @@
 // UI
 export { Accordion } from './components/ui/Accordion';
+export type { AccordionItem } from './components/ui/Accordion';
 export { Alert } from './components/ui/Alert';
 export { Avatar } from './components/ui/Avatar';
 export { Badge } from './components/ui/Badge';
 export { Breadcrumb } from './components/ui/Breadcrumb';
+export type { BreadcrumbItem } from './components/ui/Breadcrumb';
 export { Calendar } from './components/ui/Calendar';
 export { Carousel } from './components/ui/Carousel';
 export { DescriptionList } from './components/ui/DescriptionList';
+export type { DescriptionItem } from './components/ui/DescriptionList';
 export { Link } from './components/ui/Link';
 export { Loading } from './components/ui/Loading';
 export { NotificationBanner } from './components/ui/NotificationBanner';
@@ -17,7 +20,9 @@ export { Separator } from './components/ui/Separator';
 export { Skeleton } from './components/ui/Skeleton';
 export { SkipLink } from './components/ui/SkipLink';
 export { Table } from './components/ui/Table';
+export type { TableColumn } from './components/ui/Table';
 export { Tabs } from './components/ui/Tabs';
+export type { TabItem } from './components/ui/Tabs';
 export { Tooltip } from './components/ui/Tooltip';
 export { Typography } from './components/ui/Typography';
 
@@ -28,6 +33,7 @@ export type { CommandItem } from './components/interaction/Command';
 export { Dialog } from './components/interaction/Dialog';
 export { Drawer } from './components/interaction/Drawer';
 export { DropdownMenu } from './components/interaction/DropdownMenu';
+export type { DropdownMenuItem } from './components/interaction/DropdownMenu';
 export { Popover } from './components/interaction/Popover';
 export { Rating } from './components/interaction/Rating';
 export { ToastProvider, useToast } from './components/interaction/Toast';
@@ -35,11 +41,13 @@ export { ToastProvider, useToast } from './components/interaction/Toast';
 // Form
 export { Checkbox } from './components/interaction/form/Checkbox';
 export { Combobox } from './components/interaction/form/Combobox';
+export type { ComboboxOption } from './components/interaction/form/Combobox';
 export { FileInput } from './components/interaction/form/FileInput';
 export { FormInput } from './components/interaction/form/FormInput';
 export { NumberInput } from './components/interaction/form/NumberInput';
 export { Radio } from './components/interaction/form/Radio';
 export { Select } from './components/interaction/form/Select';
+export type { SelectOption } from './components/interaction/form/Select';
 export { Slider } from './components/interaction/form/Slider';
 export { Switch } from './components/interaction/form/Switch';
 export { Textarea } from './components/interaction/form/Textarea';