@boostdev/design-system-components 0.1.4 → 0.1.6

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 (59) hide show
  1. package/dist/client.cjs +188 -107
  2. package/dist/client.css +463 -441
  3. package/dist/client.d.cts +15 -13
  4. package/dist/client.d.ts +15 -13
  5. package/dist/client.js +192 -110
  6. package/dist/index.cjs +188 -107
  7. package/dist/index.css +463 -441
  8. package/dist/index.d.cts +15 -13
  9. package/dist/index.d.ts +15 -13
  10. package/dist/index.js +192 -110
  11. package/package.json +2 -1
  12. package/src/components/interaction/Button/Button.tsx +35 -8
  13. package/src/components/interaction/Command/Command.module.css +6 -5
  14. package/src/components/interaction/Dialog/Dialog.module.css +8 -5
  15. package/src/components/interaction/Dialog/Dialog.spec.tsx +10 -10
  16. package/src/components/interaction/Dialog/Dialog.stories.tsx +2 -2
  17. package/src/components/interaction/Dialog/Dialog.tsx +24 -8
  18. package/src/components/interaction/Drawer/Drawer.module.css +3 -4
  19. package/src/components/interaction/DropdownMenu/DropdownMenu.module.css +6 -4
  20. package/src/components/interaction/DropdownMenu/DropdownMenu.tsx +1 -1
  21. package/src/components/interaction/DropdownMenu/index.ts +1 -0
  22. package/src/components/interaction/Popover/Popover.module.css +3 -3
  23. package/src/components/interaction/Toast/Toast.module.css +25 -8
  24. package/src/components/interaction/Toast/Toast.tsx +10 -1
  25. package/src/components/interaction/form/Checkbox/Checkbox.module.css +1 -1
  26. package/src/components/interaction/form/Checkbox/Checkbox.tsx +3 -2
  27. package/src/components/interaction/form/Combobox/Combobox.module.css +3 -2
  28. package/src/components/interaction/form/Combobox/Combobox.tsx +11 -3
  29. package/src/components/interaction/form/Combobox/index.ts +1 -0
  30. package/src/components/interaction/form/FileInput/FileInput.tsx +15 -2
  31. package/src/components/interaction/form/FormInput/FormInput.tsx +5 -4
  32. package/src/components/interaction/form/NumberInput/NumberInput.tsx +21 -17
  33. package/src/components/interaction/form/Radio/Radio.module.css +1 -1
  34. package/src/components/interaction/form/Radio/Radio.tsx +3 -2
  35. package/src/components/interaction/form/Select/Select.spec.tsx +2 -1
  36. package/src/components/interaction/form/Select/Select.tsx +3 -3
  37. package/src/components/interaction/form/Select/index.ts +1 -0
  38. package/src/components/interaction/form/Slider/Slider.tsx +5 -4
  39. package/src/components/interaction/form/Switch/Switch.tsx +1 -1
  40. package/src/components/interaction/form/Textarea/Textarea.tsx +1 -1
  41. package/src/components/interaction/form/atoms/Message.tsx +2 -2
  42. package/src/components/layout/ButtonGroup/ButtonGroup.tsx +1 -1
  43. package/src/components/layout/Card/Card.module.css +3 -2
  44. package/src/components/layout/Card/Card.tsx +3 -0
  45. package/src/components/layout/SectionHeader/SectionHeader.tsx +2 -3
  46. package/src/components/ui/Accordion/Accordion.tsx +1 -1
  47. package/src/components/ui/Accordion/index.ts +1 -0
  48. package/src/components/ui/Breadcrumb/Breadcrumb.tsx +2 -2
  49. package/src/components/ui/Breadcrumb/index.ts +1 -0
  50. package/src/components/ui/Calendar/Calendar.tsx +8 -3
  51. package/src/components/ui/DescriptionList/DescriptionList.tsx +1 -1
  52. package/src/components/ui/DescriptionList/index.ts +1 -0
  53. package/src/components/ui/Link/Link.tsx +3 -1
  54. package/src/components/ui/Separator/Separator.module.css +1 -1
  55. package/src/components/ui/Table/Table.tsx +1 -1
  56. package/src/components/ui/Table/index.ts +1 -0
  57. package/src/components/ui/Tabs/Tabs.tsx +1 -1
  58. package/src/components/ui/Tabs/index.ts +1 -0
  59. package/src/index.ts +8 -0
package/dist/client.d.cts CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { JSX } from 'react/jsx-runtime';
3
- import { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, MouseEventHandler, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties } from 'react';
2
+ import { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties, JSX } from 'react';
4
3
  export { cn } from '@boostdev/design-system-foundation';
5
4
 
6
5
  interface AccordionItem {
@@ -86,10 +85,11 @@ type LinkOwnProps<T extends ElementType> = {
86
85
  children: ReactNode;
87
86
  variant?: 'default' | 'subtle' | 'standalone';
88
87
  external?: boolean;
88
+ externalLabel?: string;
89
89
  className?: string;
90
90
  };
91
91
  type LinkProps<T extends ElementType = 'a'> = LinkOwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T>>;
92
- declare function Link<T extends ElementType = 'a'>({ as, children, variant, external, className, ...props }: LinkProps<T>): react_jsx_runtime.JSX.Element;
92
+ declare function Link<T extends ElementType = 'a'>({ as, children, variant, external, externalLabel, className, ...props }: LinkProps<T>): react_jsx_runtime.JSX.Element;
93
93
 
94
94
  interface LoadingProps {
95
95
  size?: 'small' | 'medium' | 'large';
@@ -237,10 +237,10 @@ declare function Command({ isOpen, onClose, items, placeholder, className, }: Re
237
237
  interface DialogProps {
238
238
  children: ReactNode;
239
239
  className?: string;
240
- isVisible?: boolean;
241
- handleClose?: () => void;
240
+ isOpen?: boolean;
241
+ onClose?: () => void;
242
242
  }
243
- declare function Dialog({ children, isVisible, className, handleClose }: DialogProps): react_jsx_runtime.JSX.Element;
243
+ declare function Dialog({ children, isOpen, className, onClose }: DialogProps): react_jsx_runtime.JSX.Element;
244
244
 
245
245
  interface DrawerProps {
246
246
  isOpen: boolean;
@@ -313,11 +313,12 @@ interface ComboboxProps {
313
313
  placeholder?: string;
314
314
  value?: string;
315
315
  onChange?: (value: string) => void;
316
+ disabled?: boolean;
316
317
  error?: string;
317
318
  hint?: string;
318
319
  className?: string;
319
320
  }
320
- declare function Combobox({ label, name, options, placeholder, value, onChange, error, hint, className, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
321
+ declare function Combobox({ label, name, options, placeholder, value, onChange, disabled, error, hint, className, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
321
322
 
322
323
  interface FileInputProps {
323
324
  label: string;
@@ -332,9 +333,10 @@ interface FileInputProps {
332
333
  }
333
334
  declare function FileInput({ label, name, accept, multiple, disabled, error, hint, onChange, className, }: Readonly<FileInputProps>): react_jsx_runtime.JSX.Element;
334
335
 
335
- interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
336
+ interface FormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
336
337
  label: ReactNode;
337
338
  name: string;
339
+ type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file'>;
338
340
  ariaLabel?: string;
339
341
  error?: string;
340
342
  hint?: string;
@@ -429,11 +431,11 @@ interface CardProps {
429
431
  textAlign?: 'start' | 'center' | 'end';
430
432
  style?: CSSProperties;
431
433
  onClick?: () => void;
434
+ 'aria-label'?: string;
432
435
  }
433
- declare function Card({ children, className, variant, padding, textAlign, style, onClick, }: CardProps): react_jsx_runtime.JSX.Element;
436
+ declare function Card({ children, className, variant, padding, textAlign, style, onClick, 'aria-label': ariaLabel, }: CardProps): react_jsx_runtime.JSX.Element;
434
437
 
435
- type IntrinsicElements = JSX.IntrinsicElements;
436
- type IntrinsicElement = keyof IntrinsicElements;
438
+ type IntrinsicElement = keyof JSX.IntrinsicElements;
437
439
  type SectionHeaderProps = {
438
440
  title: string;
439
441
  subtitle?: string;
@@ -442,7 +444,7 @@ type SectionHeaderProps = {
442
444
  size?: 'small' | 'medium' | 'large';
443
445
  titleAs?: IntrinsicElement;
444
446
  };
445
- declare function SectionHeader({ title, subtitle, className, alignment, size, titleAs }: Readonly<SectionHeaderProps>): JSX.Element;
447
+ declare function SectionHeader({ title, subtitle, className, alignment, size, titleAs }: Readonly<SectionHeaderProps>): react_jsx_runtime.JSX.Element;
446
448
 
447
449
  interface Props {
448
450
  children: ReactNode;
@@ -450,4 +452,4 @@ interface Props {
450
452
  }
451
453
  declare function IconWrapper({ children, className }: Props): react_jsx_runtime.JSX.Element;
452
454
 
453
- export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, Command, type CommandItem, DescriptionList, Dialog, Drawer, DropdownMenu, FileInput, FormInput, IconWrapper, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, Rating, SectionHeader, Select, Separator, Skeleton, SkipLink, Slider, Switch, Table, Tabs, Textarea, ToastProvider, Tooltip, Typography, useToast };
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 };
package/dist/client.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { JSX } from 'react/jsx-runtime';
3
- import { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, MouseEventHandler, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties } from 'react';
2
+ import { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, MouseEventHandler, InputHTMLAttributes, HTMLInputTypeAttribute, SelectHTMLAttributes, TextareaHTMLAttributes, CSSProperties, JSX } from 'react';
4
3
  export { cn } from '@boostdev/design-system-foundation';
5
4
 
6
5
  interface AccordionItem {
@@ -86,10 +85,11 @@ type LinkOwnProps<T extends ElementType> = {
86
85
  children: ReactNode;
87
86
  variant?: 'default' | 'subtle' | 'standalone';
88
87
  external?: boolean;
88
+ externalLabel?: string;
89
89
  className?: string;
90
90
  };
91
91
  type LinkProps<T extends ElementType = 'a'> = LinkOwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof LinkOwnProps<T>>;
92
- declare function Link<T extends ElementType = 'a'>({ as, children, variant, external, className, ...props }: LinkProps<T>): react_jsx_runtime.JSX.Element;
92
+ declare function Link<T extends ElementType = 'a'>({ as, children, variant, external, externalLabel, className, ...props }: LinkProps<T>): react_jsx_runtime.JSX.Element;
93
93
 
94
94
  interface LoadingProps {
95
95
  size?: 'small' | 'medium' | 'large';
@@ -237,10 +237,10 @@ declare function Command({ isOpen, onClose, items, placeholder, className, }: Re
237
237
  interface DialogProps {
238
238
  children: ReactNode;
239
239
  className?: string;
240
- isVisible?: boolean;
241
- handleClose?: () => void;
240
+ isOpen?: boolean;
241
+ onClose?: () => void;
242
242
  }
243
- declare function Dialog({ children, isVisible, className, handleClose }: DialogProps): react_jsx_runtime.JSX.Element;
243
+ declare function Dialog({ children, isOpen, className, onClose }: DialogProps): react_jsx_runtime.JSX.Element;
244
244
 
245
245
  interface DrawerProps {
246
246
  isOpen: boolean;
@@ -313,11 +313,12 @@ interface ComboboxProps {
313
313
  placeholder?: string;
314
314
  value?: string;
315
315
  onChange?: (value: string) => void;
316
+ disabled?: boolean;
316
317
  error?: string;
317
318
  hint?: string;
318
319
  className?: string;
319
320
  }
320
- declare function Combobox({ label, name, options, placeholder, value, onChange, error, hint, className, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
321
+ declare function Combobox({ label, name, options, placeholder, value, onChange, disabled, error, hint, className, }: Readonly<ComboboxProps>): react_jsx_runtime.JSX.Element;
321
322
 
322
323
  interface FileInputProps {
323
324
  label: string;
@@ -332,9 +333,10 @@ interface FileInputProps {
332
333
  }
333
334
  declare function FileInput({ label, name, accept, multiple, disabled, error, hint, onChange, className, }: Readonly<FileInputProps>): react_jsx_runtime.JSX.Element;
334
335
 
335
- interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
336
+ interface FormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
336
337
  label: ReactNode;
337
338
  name: string;
339
+ type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file'>;
338
340
  ariaLabel?: string;
339
341
  error?: string;
340
342
  hint?: string;
@@ -429,11 +431,11 @@ interface CardProps {
429
431
  textAlign?: 'start' | 'center' | 'end';
430
432
  style?: CSSProperties;
431
433
  onClick?: () => void;
434
+ 'aria-label'?: string;
432
435
  }
433
- declare function Card({ children, className, variant, padding, textAlign, style, onClick, }: CardProps): react_jsx_runtime.JSX.Element;
436
+ declare function Card({ children, className, variant, padding, textAlign, style, onClick, 'aria-label': ariaLabel, }: CardProps): react_jsx_runtime.JSX.Element;
434
437
 
435
- type IntrinsicElements = JSX.IntrinsicElements;
436
- type IntrinsicElement = keyof IntrinsicElements;
438
+ type IntrinsicElement = keyof JSX.IntrinsicElements;
437
439
  type SectionHeaderProps = {
438
440
  title: string;
439
441
  subtitle?: string;
@@ -442,7 +444,7 @@ type SectionHeaderProps = {
442
444
  size?: 'small' | 'medium' | 'large';
443
445
  titleAs?: IntrinsicElement;
444
446
  };
445
- declare function SectionHeader({ title, subtitle, className, alignment, size, titleAs }: Readonly<SectionHeaderProps>): JSX.Element;
447
+ declare function SectionHeader({ title, subtitle, className, alignment, size, titleAs }: Readonly<SectionHeaderProps>): react_jsx_runtime.JSX.Element;
446
448
 
447
449
  interface Props {
448
450
  children: ReactNode;
@@ -450,4 +452,4 @@ interface Props {
450
452
  }
451
453
  declare function IconWrapper({ children, className }: Props): react_jsx_runtime.JSX.Element;
452
454
 
453
- export { Accordion, Alert, Avatar, Badge, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, Combobox, Command, type CommandItem, DescriptionList, Dialog, Drawer, DropdownMenu, FileInput, FormInput, IconWrapper, Link, Loading, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, Rating, SectionHeader, Select, Separator, Skeleton, SkipLink, Slider, Switch, Table, Tabs, Textarea, ToastProvider, Tooltip, Typography, useToast };
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 };