@boostdev/design-system-components 0.1.13 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/AGENTS.md +1 -1
  2. package/README.md +1 -1
  3. package/dist/client.cjs +406 -362
  4. package/dist/client.css +560 -511
  5. package/dist/client.d.cts +27 -5
  6. package/dist/client.d.ts +27 -5
  7. package/dist/client.js +405 -362
  8. package/dist/index.cjs +406 -362
  9. package/dist/index.css +560 -511
  10. package/dist/index.d.cts +27 -5
  11. package/dist/index.d.ts +27 -5
  12. package/dist/index.js +405 -362
  13. package/package.json +4 -2
  14. package/src/components/interaction/Button/Button.mdx +73 -0
  15. package/src/components/interaction/Button/Button.module.css +12 -20
  16. package/src/components/interaction/Button/Button.stories.tsx +0 -1
  17. package/src/components/interaction/Command/Command.mdx +28 -0
  18. package/src/components/interaction/Command/Command.module.css +2 -1
  19. package/src/components/interaction/Command/Command.stories.tsx +3 -3
  20. package/src/components/interaction/Dialog/Dialog.mdx +57 -0
  21. package/src/components/interaction/Dialog/Dialog.module.css +1 -1
  22. package/src/components/interaction/Dialog/Dialog.stories.tsx +0 -1
  23. package/src/components/interaction/Drawer/Drawer.mdx +35 -0
  24. package/src/components/interaction/Drawer/Drawer.module.css +3 -9
  25. package/src/components/interaction/Drawer/Drawer.stories.tsx +3 -3
  26. package/src/components/interaction/Drawer/Drawer.tsx +5 -3
  27. package/src/components/interaction/DropdownMenu/DropdownMenu.mdx +40 -0
  28. package/src/components/interaction/DropdownMenu/DropdownMenu.stories.tsx +5 -5
  29. package/src/components/interaction/Popover/Popover.mdx +34 -0
  30. package/src/components/interaction/Popover/Popover.stories.tsx +3 -3
  31. package/src/components/interaction/Rating/Rating.mdx +38 -0
  32. package/src/components/interaction/Rating/Rating.stories.tsx +0 -1
  33. package/src/components/interaction/Toast/Toast.mdx +78 -0
  34. package/src/components/interaction/Toast/Toast.module.css +21 -7
  35. package/src/components/interaction/Toast/Toast.stories.tsx +0 -1
  36. package/src/components/interaction/form/Checkbox/Checkbox.mdx +57 -0
  37. package/src/components/interaction/form/Checkbox/Checkbox.stories.tsx +0 -1
  38. package/src/components/interaction/form/Combobox/Combobox.mdx +37 -0
  39. package/src/components/interaction/form/Combobox/Combobox.stories.tsx +0 -1
  40. package/src/components/interaction/form/FileInput/FileInput.mdx +38 -0
  41. package/src/components/interaction/form/FileInput/FileInput.stories.tsx +0 -1
  42. package/src/components/interaction/form/FormInput/FormInput.mdx +54 -0
  43. package/src/components/interaction/form/FormInput/FormInput.stories.tsx +0 -1
  44. package/src/components/interaction/form/NumberInput/NumberInput.mdx +38 -0
  45. package/src/components/interaction/form/NumberInput/NumberInput.stories.tsx +0 -1
  46. package/src/components/interaction/form/Radio/Radio.mdx +60 -0
  47. package/src/components/interaction/form/Radio/Radio.module.css +24 -11
  48. package/src/components/interaction/form/Radio/Radio.stories.tsx +5 -5
  49. package/src/components/interaction/form/Radio/Radio.tsx +6 -2
  50. package/src/components/interaction/form/Select/Select.mdx +58 -0
  51. package/src/components/interaction/form/Select/Select.stories.tsx +0 -1
  52. package/src/components/interaction/form/Slider/Slider.mdx +58 -0
  53. package/src/components/interaction/form/Slider/Slider.stories.tsx +0 -1
  54. package/src/components/interaction/form/Switch/Switch.mdx +61 -0
  55. package/src/components/interaction/form/Switch/Switch.module.css +6 -10
  56. package/src/components/interaction/form/Switch/Switch.stories.tsx +0 -1
  57. package/src/components/interaction/form/Textarea/Textarea.mdx +41 -0
  58. package/src/components/interaction/form/Textarea/Textarea.stories.tsx +0 -1
  59. package/src/components/layout/ButtonGroup/ButtonGroup.mdx +47 -0
  60. package/src/components/layout/ButtonGroup/ButtonGroup.module.css +10 -10
  61. package/src/components/layout/ButtonGroup/ButtonGroup.stories.tsx +1 -2
  62. package/src/components/layout/Card/Card.mdx +58 -0
  63. package/src/components/layout/Card/Card.stories.tsx +0 -1
  64. package/src/components/layout/IconWrapper/IconWrapper.mdx +39 -0
  65. package/src/components/layout/IconWrapper/IconWrapper.stories.tsx +0 -1
  66. package/src/components/layout/SectionHeader/SectionHeader.mdx +38 -0
  67. package/src/components/layout/SectionHeader/SectionHeader.stories.tsx +0 -1
  68. package/src/components/ui/Accordion/Accordion.mdx +40 -0
  69. package/src/components/ui/Accordion/Accordion.stories.tsx +0 -1
  70. package/src/components/ui/Alert/Alert.mdx +63 -0
  71. package/src/components/ui/Alert/Alert.module.css +3 -7
  72. package/src/components/ui/Alert/Alert.stories.tsx +0 -1
  73. package/src/components/ui/Avatar/Avatar.mdx +53 -0
  74. package/src/components/ui/Avatar/Avatar.module.css +4 -8
  75. package/src/components/ui/Avatar/Avatar.stories.tsx +0 -1
  76. package/src/components/ui/Badge/Badge.mdx +62 -0
  77. package/src/components/ui/Badge/Badge.module.css +4 -10
  78. package/src/components/ui/Badge/Badge.stories.tsx +0 -1
  79. package/src/components/ui/Breadcrumb/Breadcrumb.mdx +36 -0
  80. package/src/components/ui/Breadcrumb/Breadcrumb.stories.tsx +0 -1
  81. package/src/components/ui/Calendar/Calendar.mdx +34 -0
  82. package/src/components/ui/Calendar/Calendar.stories.tsx +0 -1
  83. package/src/components/ui/Carousel/Carousel.mdx +31 -0
  84. package/src/components/ui/Carousel/Carousel.stories.tsx +0 -1
  85. package/src/components/ui/Collapsible/Collapsible.mdx +59 -0
  86. package/src/components/ui/Collapsible/Collapsible.module.css +76 -0
  87. package/src/components/ui/Collapsible/Collapsible.spec.tsx +75 -0
  88. package/src/components/ui/Collapsible/Collapsible.stories.tsx +57 -0
  89. package/src/components/ui/Collapsible/Collapsible.tsx +55 -0
  90. package/src/components/ui/Collapsible/index.ts +2 -0
  91. package/src/components/ui/DescriptionList/DescriptionList.mdx +28 -0
  92. package/src/components/ui/DescriptionList/DescriptionList.stories.tsx +0 -1
  93. package/src/components/ui/Link/Link.mdx +44 -0
  94. package/src/components/ui/Link/Link.module.css +2 -5
  95. package/src/components/ui/Link/Link.stories.tsx +0 -1
  96. package/src/components/ui/Loading/Loading.mdx +52 -0
  97. package/src/components/ui/Loading/Loading.stories.tsx +0 -1
  98. package/src/components/ui/NotificationBanner/NotificationBanner.mdx +45 -0
  99. package/src/components/ui/NotificationBanner/NotificationBanner.module.css +3 -7
  100. package/src/components/ui/NotificationBanner/NotificationBanner.stories.tsx +2 -2
  101. package/src/components/ui/Pagination/Pagination.mdx +39 -0
  102. package/src/components/ui/Pagination/Pagination.module.css +3 -7
  103. package/src/components/ui/Pagination/Pagination.stories.tsx +0 -1
  104. package/src/components/ui/Progress/Progress.mdx +52 -0
  105. package/src/components/ui/Progress/Progress.module.css +1 -3
  106. package/src/components/ui/Progress/Progress.stories.tsx +0 -1
  107. package/src/components/ui/ProgressCircle/ProgressCircle.mdx +46 -0
  108. package/src/components/ui/ProgressCircle/ProgressCircle.stories.tsx +0 -1
  109. package/src/components/ui/Separator/Separator.mdx +29 -0
  110. package/src/components/ui/Separator/Separator.stories.tsx +0 -1
  111. package/src/components/ui/Skeleton/Skeleton.mdx +36 -0
  112. package/src/components/ui/Skeleton/Skeleton.stories.tsx +0 -1
  113. package/src/components/ui/SkipLink/SkipLink.mdx +34 -0
  114. package/src/components/ui/SkipLink/SkipLink.stories.tsx +0 -1
  115. package/src/components/ui/Table/Table.mdx +38 -0
  116. package/src/components/ui/Table/Table.stories.tsx +0 -1
  117. package/src/components/ui/Tabs/Tabs.mdx +40 -0
  118. package/src/components/ui/Tabs/Tabs.module.css +2 -5
  119. package/src/components/ui/Tabs/Tabs.stories.tsx +0 -1
  120. package/src/components/ui/Tooltip/Tooltip.mdx +43 -0
  121. package/src/components/ui/Tooltip/Tooltip.module.css +2 -5
  122. package/src/components/ui/Tooltip/Tooltip.stories.tsx +6 -6
  123. package/src/components/ui/Typography/Typography.mdx +41 -0
  124. package/src/components/ui/Typography/Typography.stories.tsx +0 -1
  125. package/src/index.ts +2 -0
  126. package/src/static/logo.svg +8 -0
  127. package/src/stories/Introduction.css +17 -0
  128. package/src/stories/Introduction.mdx +129 -0
package/dist/client.d.cts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, ButtonHTMLAttributes, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties, JSX } from 'react';
2
+ import { ReactNode, HTMLAttributes, ElementType, ComponentPropsWithoutRef, ReactElement, ButtonHTMLAttributes, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties, JSX } from 'react';
3
3
  export { cn } from '@boostdev/design-system-foundation';
4
4
 
5
5
  interface AccordionItem {
@@ -52,6 +52,26 @@ interface BreadcrumbProps {
52
52
  }
53
53
  declare function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>): react_jsx_runtime.JSX.Element;
54
54
 
55
+ interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
56
+ /** The trigger label — always visible */
57
+ summary: ReactNode;
58
+ /** The content revealed when expanded */
59
+ children: ReactNode;
60
+ /** Controlled open state */
61
+ open?: boolean;
62
+ /** Uncontrolled initial open state */
63
+ defaultOpen?: boolean;
64
+ /** Called after each toggle with the new open state */
65
+ onToggle?: (open: boolean) => void;
66
+ /**
67
+ * Groups multiple Collapsible elements so only one is open at a time
68
+ * (native <details name="…"> behaviour).
69
+ */
70
+ name?: string;
71
+ className?: string;
72
+ }
73
+ declare function Collapsible({ summary, children, open, defaultOpen, onToggle, name, className, ...rest }: Readonly<CollapsibleProps>): react_jsx_runtime.JSX.Element;
74
+
55
75
  interface CalendarProps {
56
76
  value?: Date;
57
77
  defaultValue?: Date;
@@ -245,12 +265,13 @@ declare function Dialog({ children, isOpen, className, onClose }: DialogProps):
245
265
  interface DrawerProps {
246
266
  isOpen: boolean;
247
267
  onClose: () => void;
248
- title: string;
268
+ title: ReactNode;
249
269
  children: ReactNode;
250
270
  side?: 'left' | 'right';
251
271
  className?: string;
272
+ arialLabel?: string;
252
273
  }
253
- declare function Drawer({ isOpen, onClose, title, children, side, className, }: Readonly<DrawerProps>): react_jsx_runtime.JSX.Element;
274
+ declare function Drawer({ isOpen, onClose, title, children, side, arialLabel, className, }: Readonly<DrawerProps>): react_jsx_runtime.JSX.Element;
254
275
 
255
276
  interface DropdownMenuItem {
256
277
  id: string;
@@ -363,11 +384,12 @@ declare function NumberInput({ label, name, value, defaultValue, min, max, step,
363
384
  interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
364
385
  label: string;
365
386
  name: string;
387
+ description?: string;
366
388
  error?: string;
367
389
  hint?: string;
368
390
  className?: string;
369
391
  }
370
- declare function Radio({ label, name, error, hint, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
392
+ declare function Radio({ label, name, description, error, hint, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
371
393
 
372
394
  interface SelectOption {
373
395
  value: string;
@@ -452,4 +474,4 @@ interface Props {
452
474
  }
453
475
  declare function IconWrapper({ children, className }: Props): react_jsx_runtime.JSX.Element;
454
476
 
455
- export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, Rating, SectionHeader, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, useToast };
477
+ export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, Rating, SectionHeader, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, useToast };
package/dist/client.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, ButtonHTMLAttributes, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties, JSX } from 'react';
2
+ import { ReactNode, HTMLAttributes, ElementType, ComponentPropsWithoutRef, ReactElement, ButtonHTMLAttributes, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties, JSX } from 'react';
3
3
  export { cn } from '@boostdev/design-system-foundation';
4
4
 
5
5
  interface AccordionItem {
@@ -52,6 +52,26 @@ interface BreadcrumbProps {
52
52
  }
53
53
  declare function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>): react_jsx_runtime.JSX.Element;
54
54
 
55
+ interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
56
+ /** The trigger label — always visible */
57
+ summary: ReactNode;
58
+ /** The content revealed when expanded */
59
+ children: ReactNode;
60
+ /** Controlled open state */
61
+ open?: boolean;
62
+ /** Uncontrolled initial open state */
63
+ defaultOpen?: boolean;
64
+ /** Called after each toggle with the new open state */
65
+ onToggle?: (open: boolean) => void;
66
+ /**
67
+ * Groups multiple Collapsible elements so only one is open at a time
68
+ * (native <details name="…"> behaviour).
69
+ */
70
+ name?: string;
71
+ className?: string;
72
+ }
73
+ declare function Collapsible({ summary, children, open, defaultOpen, onToggle, name, className, ...rest }: Readonly<CollapsibleProps>): react_jsx_runtime.JSX.Element;
74
+
55
75
  interface CalendarProps {
56
76
  value?: Date;
57
77
  defaultValue?: Date;
@@ -245,12 +265,13 @@ declare function Dialog({ children, isOpen, className, onClose }: DialogProps):
245
265
  interface DrawerProps {
246
266
  isOpen: boolean;
247
267
  onClose: () => void;
248
- title: string;
268
+ title: ReactNode;
249
269
  children: ReactNode;
250
270
  side?: 'left' | 'right';
251
271
  className?: string;
272
+ arialLabel?: string;
252
273
  }
253
- declare function Drawer({ isOpen, onClose, title, children, side, className, }: Readonly<DrawerProps>): react_jsx_runtime.JSX.Element;
274
+ declare function Drawer({ isOpen, onClose, title, children, side, arialLabel, className, }: Readonly<DrawerProps>): react_jsx_runtime.JSX.Element;
254
275
 
255
276
  interface DropdownMenuItem {
256
277
  id: string;
@@ -363,11 +384,12 @@ declare function NumberInput({ label, name, value, defaultValue, min, max, step,
363
384
  interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
364
385
  label: string;
365
386
  name: string;
387
+ description?: string;
366
388
  error?: string;
367
389
  hint?: string;
368
390
  className?: string;
369
391
  }
370
- declare function Radio({ label, name, error, hint, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
392
+ declare function Radio({ label, name, description, error, hint, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
371
393
 
372
394
  interface SelectOption {
373
395
  value: string;
@@ -452,4 +474,4 @@ interface Props {
452
474
  }
453
475
  declare function IconWrapper({ children, className }: Props): react_jsx_runtime.JSX.Element;
454
476
 
455
- export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, Rating, SectionHeader, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, useToast };
477
+ export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, Command, type CommandItem, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, Rating, SectionHeader, Select, type SelectOption, Separator, Skeleton, SkipLink, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ToastProvider, Tooltip, Typography, useToast };