@chayns-components/core 5.5.27 → 5.5.28

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 (2) hide show
  1. package/AGENTS.md +874 -64
  2. package/package.json +4 -4
package/AGENTS.md CHANGED
@@ -478,7 +478,40 @@ import { Accordion } from '@chayns-components/core';
478
478
 
479
479
  ### Props
480
480
 
481
- No prop documentation available.
481
+ | name | type | required | description |
482
+ | --- | --- | --- | --- |
483
+ | `bodyMaxHeight` | `number \| undefined` | no | Maximum height of the accordion body element. This automatically makes the content of the<br />body element scrollable. |
484
+ | `children` | `ReactNode` | yes | The content of the accordion body |
485
+ | `colors` | `AccordionColors \| undefined` | no | Provide custom colors to the Accordion Component |
486
+ | `icon` | `string \| undefined` | no | The icon that is displayed in front of the title |
487
+ | `isDefaultOpen` | `boolean \| undefined` | no | This can be used to automatically expand the Accordion during the first render. |
488
+ | `isDisabled` | `boolean \| undefined` | no | This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened. |
489
+ | `isFixed` | `boolean \| undefined` | no | This can be used so that the Accordion cannot be opened or closed.<br />In addition, in this case the icon is exchanged to mark the Accordions. |
490
+ | `isOpened` | `boolean \| undefined` | no | This can be used to open the Accordion from the outside |
491
+ | `isTitleGreyed` | `boolean \| undefined` | no | This will gray out the title of the Accordion to indicate hidden content, for example. |
492
+ | `onBodyAnimationComplete` | `VoidFunction \| undefined` | no | Function that is executed when the accordion body is animated |
493
+ | `onBodyScroll` | `((event: UIEvent<HTMLDivElement, UIEvent>) => void) \| undefined` | no | Function that is executed when the accordion body will be scrolled |
494
+ | `onClose` | `VoidFunction \| undefined` | no | Function that is executed when the accordion will be closed. |
495
+ | `onHoverEnd` | `MouseEventHandler<HTMLDivElement> \| undefined` | no | Function to be executed when the accordion is no longer hovered. |
496
+ | `onHoverStart` | `MouseEventHandler<HTMLDivElement> \| undefined` | no | Function to be executed when the accordion is hovered. |
497
+ | `onOpen` | `VoidFunction \| undefined` | no | Function that is executed when the accordion will be opened. |
498
+ | `onSearchChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the text of the search in the accordion<br />head changes. When this function is given, the search field is displayed<br />in the Accordion Head. |
499
+ | `onTitleInputChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the text of the search in the accordion<br />title changes. When this function is given, the search field is displayed<br />as the Accordion title. |
500
+ | `rightElement` | `ReactNode` | no | Content to be displayed on the right side in the head of the Accordion |
501
+ | `searchPlaceholder` | `string \| undefined` | no | The placeholder to be used for the search |
502
+ | `searchValue` | `string \| undefined` | no | The value that is displayed inside the search |
503
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. The highlighting is only visible while the<br />user navigates with the keyboard and is reset on mouse movement or click. |
504
+ | `shouldForceBackground` | `boolean \| undefined` | no | This will force the background color of the accordion to be used even if it is closed and not hovered. |
505
+ | `shouldForceBottomLine` | `boolean \| undefined` | no | Whether the bottom line should always be shown, regardless of other line-related props. |
506
+ | `shouldHideBackground` | `boolean \| undefined` | no | This will hide the background color of the accordion |
507
+ | `shouldHideBottomLine` | `boolean \| undefined` | no | Whether the bottom line should be hidden. |
508
+ | `shouldIndex` | `boolean \| undefined` | no | Whether the accordion should be indexed. |
509
+ | `shouldRenderClosed` | `boolean \| undefined` | no | This will render the Accordion closed on the first render. |
510
+ | `shouldRotateIcon` | `boolean \| undefined` | no | Whether the icon should be rotating. |
511
+ | `shouldSkipAnimation` | `boolean \| undefined` | no | Whether the animation should be skipped.<br />If 'isDefaultOpen' is true the initial animation will be skipped even this prop is false |
512
+ | `title` | `string \| undefined` | no | Title of the Accordion displayed in the head |
513
+ | `titleElement` | `ReactNode` | no | Additional elements to be displayed in the header next to the title. |
514
+ | `titleInputProps` | `InputProps \| undefined` | no | The props of the title Input. |
482
515
 
483
516
  ### Types
484
517
 
@@ -488,10 +521,12 @@ No additional exported types documented.
488
521
 
489
522
  - Import `Accordion` directly from `@chayns-components/core` instead of internal source paths.
490
523
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
524
+ - Pay special attention to required props: `children`.
491
525
 
492
526
  ### Anti Patterns
493
527
 
494
528
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
529
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
495
530
  ## AmountControl
496
531
 
497
532
  `AmountControl` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -534,7 +569,22 @@ import { AmountControl } from '@chayns-components/core';
534
569
 
535
570
  ### Props
536
571
 
537
- No prop documentation available.
572
+ | name | type | required | description |
573
+ | --- | --- | --- | --- |
574
+ | `amount` | `number \| undefined` | no | The amount that should be displayed. |
575
+ | `icon` | `string \| undefined` | no | The icon that should be displayed if no amount is selected. |
576
+ | `iconColor` | `string \| undefined` | no | The color of the icon. |
577
+ | `isDisabled` | `boolean \| undefined` | no | Whether the control should be disabled |
578
+ | `label` | `string \| undefined` | no | A Text that should be displayed if no amount is selected; |
579
+ | `maxAmount` | `number \| undefined` | no | The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side. |
580
+ | `minAmount` | `number \| undefined` | no | The minimum allowed amount. |
581
+ | `onChange` | `((amount: number) => void) \| undefined` | no | A Function that is executed when the amount is changed |
582
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. The highlighting is only visible while the<br />user navigates with the keyboard and is reset on mouse movement or click. |
583
+ | `shouldForceLabel` | `boolean \| undefined` | no | Whether the label should be displayed even if an amount is selected. |
584
+ | `shouldShowAddIconOnMinAmount` | `boolean \| undefined` | no | Whether the "add"-icon should be displayed if the minAmount is reached. |
585
+ | `shouldShowIcon` | `boolean \| undefined` | no | Whether the icon should be displayed if no amount is selected |
586
+ | `shouldShowWideInput` | `boolean \| undefined` | no | Whether the input should be wider |
587
+ | `step` | `number \| undefined` | no | Defines the amount that will change when adjusted |
538
588
 
539
589
  ### Types
540
590
 
@@ -548,6 +598,7 @@ No additional exported types documented.
548
598
  ### Anti Patterns
549
599
 
550
600
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
601
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
551
602
  ## AnimatedNumber
552
603
 
553
604
  `AnimatedNumber` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -570,7 +621,17 @@ import { AnimatedNumber } from '@chayns-components/core';
570
621
 
571
622
  ### Props
572
623
 
573
- No prop documentation available.
624
+ | name | type | required | description |
625
+ | --- | --- | --- | --- |
626
+ | `delay` | `number \| undefined` | no | Start delay of the animation in seconds. |
627
+ | `duration` | `number \| undefined` | no | Total duration of the animation in seconds. |
628
+ | `ease` | `Ease \| undefined` | no | Easing curve of the animation (e.g., cubic-bezier like [0.16, 1, 0.3, 1] or predefined easings).<br />Controls how the animation accelerates/decelerates. |
629
+ | `format` | `((n: number) => string) \| undefined` | no | Custom formatter for the displayed value.<br />If provided, it overrides locale/toLocaleString and round.<br />Example: (n) => `${Math.round(n)} points` |
630
+ | `locale` | `string \| undefined` | no | Locale used by toLocaleString when no custom formatter is provided. |
631
+ | `onComplete` | `(() => void) \| undefined` | no | Callback invoked when the animation completes. |
632
+ | `round` | `((n: number) => number) \| undefined` | no | Custom rounding function when no custom formatter is provided.<br />Default: Math.round |
633
+ | `startFrom` | `number \| undefined` | no | Starting value for the animation.<br />Default: 0 |
634
+ | `value` | `number` | yes | Target value to animate to. |
574
635
 
575
636
  ### Types
576
637
 
@@ -580,10 +641,12 @@ No additional exported types documented.
580
641
 
581
642
  - Import `AnimatedNumber` directly from `@chayns-components/core` instead of internal source paths.
582
643
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
644
+ - Pay special attention to required props: `value`.
583
645
 
584
646
  ### Anti Patterns
585
647
 
586
648
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
649
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
587
650
  ## Badge
588
651
 
589
652
  `Badge` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -635,11 +698,30 @@ import { Badge } from '@chayns-components/core';
635
698
 
636
699
  ### Props
637
700
 
638
- No prop documentation available.
701
+ | name | type | required | description |
702
+ | --- | --- | --- | --- |
703
+ | `backgroundColor` | `BackgroundColor \| undefined` | no | The background color of the badge. |
704
+ | `children` | `ReactNode` | no | The content of the badge. |
705
+ | `className` | `string \| undefined` | no | Additional class names for the badge element. |
706
+ | `design` | `BadgeDesign \| undefined` | no | The design of the Badge. |
707
+ | `fontColor` | `Color \| undefined` | no | The font color of the badge. |
708
+ | `onClick` | `MouseEventHandler \| undefined` | no | Function to be executed when the badge is clicked. |
709
+ | `size` | `BadgeSize \| undefined` | no | The size of the badge. |
639
710
 
640
711
  ### Types
641
712
 
642
- No additional exported types documented.
713
+ - `BadgeDesign` -> `enum BadgeDesign {
714
+ /** Default design with background color and no border */
715
+ DEFAULT = 'default',
716
+ /** Design with border only, no background color */
717
+ BORDER = 'border',
718
+ }`
719
+ - `BadgeSize` -> `enum BadgeSize {
720
+ /** Small size */
721
+ SMALL = 'small',
722
+ /** Default size */
723
+ DEFAULT = 'default',
724
+ }`
643
725
 
644
726
  ### Usage Notes
645
727
 
@@ -649,6 +731,7 @@ No additional exported types documented.
649
731
  ### Anti Patterns
650
732
 
651
733
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
734
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
652
735
  ## Button
653
736
 
654
737
  `Button` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -699,7 +782,21 @@ import { Button } from '@chayns-components/core';
699
782
 
700
783
  ### Props
701
784
 
702
- No prop documentation available.
785
+ | name | type | required | description |
786
+ | --- | --- | --- | --- |
787
+ | `buttonDesign` | `number \| undefined` | no | Optional button design override. |
788
+ | `children` | `ReactNode` | no | The label of the button. |
789
+ | `className` | `string \| undefined` | no | Additional class names for the button element. |
790
+ | `icon` | `string \| undefined` | no | An icon that is displayed on the left-hand side of the button text. |
791
+ | `isDisabled` | `boolean \| undefined` | no | Whether the button is disabled and cannot be clicked anymore. |
792
+ | `isSecondary` | `boolean \| undefined` | no | Displays the button in the secondary style. |
793
+ | `onClick` | `MouseEventHandler<HTMLButtonElement>` | yes | Function to be executed when the button is clicked. |
794
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
795
+ | `shouldShowAsSelectButton` | `boolean \| undefined` | no | Whether the button should be displayed as a selectButton. |
796
+ | `shouldShowTextAsRobotoMedium` | `boolean \| undefined` | no | Whether the text should be 'Roboto Medium'. |
797
+ | `shouldShowWaitCursor` | `boolean \| undefined` | no | Shows a wait cursor instead of button text. |
798
+ | `shouldStopPropagation` | `boolean \| undefined` | no | Stops event propagation on click. |
799
+ | `tapDuration` | `number \| undefined` | no | Duration in seconds for the tap animation. |
703
800
 
704
801
  ### Types
705
802
 
@@ -709,10 +806,12 @@ No additional exported types documented.
709
806
 
710
807
  - Import `Button` directly from `@chayns-components/core` instead of internal source paths.
711
808
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
809
+ - Pay special attention to required props: `onClick`.
712
810
 
713
811
  ### Anti Patterns
714
812
 
715
813
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
814
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
716
815
  ## Checkbox
717
816
 
718
817
  `Checkbox` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -735,7 +834,19 @@ import { Checkbox } from '@chayns-components/core';
735
834
 
736
835
  ### Props
737
836
 
738
- No prop documentation available.
837
+ | name | type | required | description |
838
+ | --- | --- | --- | --- |
839
+ | `borderRadius` | `BorderRadius<string \| number> \| undefined` | no | Border radius for the checkbox or switch indicator. |
840
+ | `children` | `string \| ReactElement<any, string \| JSXElementConstructor<any>> \| undefined` | no | Text for checkbox or switch |
841
+ | `colors` | `CheckboxColors \| undefined` | no | No description available. |
842
+ | `isChecked` | `boolean \| undefined` | no | Indicates whether the checkbox or switch is selected |
843
+ | `isDisabled` | `boolean \| undefined` | no | Disables the checkbox or switch so it cannot be toggled |
844
+ | `labelClassName` | `string \| undefined` | no | Classname for the label |
845
+ | `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed if the checked value changes |
846
+ | `shouldChangeOnLabelClick` | `boolean \| undefined` | no | Whether the label should change the state of the checkbox |
847
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
848
+ | `shouldShowAsSwitch` | `boolean \| undefined` | no | Changes the design to use switch instead of checkbox |
849
+ | `shouldShowCentered` | `boolean \| undefined` | no | Whether the Checkbox should be displayed centered to the label or at the top |
739
850
 
740
851
  ### Types
741
852
 
@@ -749,6 +860,7 @@ No additional exported types documented.
749
860
  ### Anti Patterns
750
861
 
751
862
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
863
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
752
864
  ## ComboBox
753
865
 
754
866
  `ComboBox` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -1278,20 +1390,69 @@ import { ComboBox } from '@chayns-components/core';
1278
1390
 
1279
1391
  ### Props
1280
1392
 
1281
- No prop documentation available.
1393
+ | name | type | required | description |
1394
+ | --- | --- | --- | --- |
1395
+ | `bodyWidth` | `number \| undefined` | no | The width of the body. |
1396
+ | `container` | `Element \| undefined` | no | The element where the content of the `ComboBox` should be rendered via React Portal. |
1397
+ | `direction` | `DropdownDirection \| undefined` | no | The direction in which the combobox should open. |
1398
+ | `inputValue` | `string \| undefined` | no | The value of the optional input. |
1399
+ | `isDisabled` | `boolean \| undefined` | no | Whether the combobox should be disabled. |
1400
+ | `lists` | `IComboBoxItems[]` | yes | The list of the items that should be displayed. |
1401
+ | `maxHeight` | `number \| undefined` | no | The maximum height of the combobox content. |
1402
+ | `onHide` | `(() => void) \| undefined` | no | Function to be executed when the content of the `ComboBox` is hidden. |
1403
+ | `onInputBlur` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the optional input lost its focus. |
1404
+ | `onInputChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the value of the optional input is changed. |
1405
+ | `onInputFocus` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the optional input gets its focus. |
1406
+ | `onSelect` | `((comboboxItem?: IComboBoxItem \| undefined) => boolean \| void \| Promise<boolean>) \| undefined` | no | Function that should be executed when an item is selected. If the function returns false, the item will not be selected. |
1407
+ | `onShow` | `(() => void) \| undefined` | no | Function to be executed when the content of the `ComboBox` is shown. |
1408
+ | `placeholder` | `string` | yes | A text that should be displayed when no item is selected. |
1409
+ | `prefix` | `string \| undefined` | no | A prefix that should be displayed before the placeholder. |
1410
+ | `prefixMinWidth` | `number \| undefined` | no | Optional min width for the prefix element. |
1411
+ | `selectedItem` | `IComboBoxItem \| undefined` | no | An item that should be preselected. |
1412
+ | `shouldCaptureEvents` | `boolean \| undefined` | no | Whether the outside events should be captured. |
1413
+ | `shouldDropDownUseMaxItemWidth` | `boolean \| undefined` | no | If true, the dropdown will use the maximum width of the items. |
1414
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables the shared keyboard-only focus ring for the combobox header. |
1415
+ | `shouldShowBigImage` | `boolean \| undefined` | no | If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given. |
1416
+ | `shouldShowClearIcon` | `boolean \| undefined` | no | If true, a clear icon is displayed at the end of the combo box if an item is selected. |
1417
+ | `shouldShowRoundImage` | `boolean \| undefined` | no | If true, the images of the items are displayed in a round shape. |
1418
+ | `shouldShowTransparentBackground` | `boolean \| undefined` | no | Whether the background should be transparent. |
1419
+ | `shouldUseCurrentItemWidth` | `boolean \| undefined` | no | Whether the width of the ComboBox should be the width of the current item. |
1420
+ | `shouldUseFullWidth` | `boolean \| undefined` | no | Whether the width of the 'ComboBox' should be the width of the parent or of the widest item. |
1421
+ | `size` | `ComboBoxSize \| undefined` | no | The size of the ComboBox. |
1282
1422
 
1283
1423
  ### Types
1284
1424
 
1285
- No additional exported types documented.
1425
+ - `ComboBoxSize` -> `enum ComboBoxSize {
1426
+ /**
1427
+ * Standard height and spacing.
1428
+ */
1429
+ NORMAL = 'normal',
1430
+ /**
1431
+ * Compact height and spacing.
1432
+ */
1433
+ SMALL = 'small',
1434
+ }`
1435
+ - `DropdownDirection` -> `enum DropdownDirection {
1436
+ BOTTOM,
1437
+ TOP,
1438
+ BOTTOM_LEFT,
1439
+ BOTTOM_RIGHT,
1440
+ TOP_LEFT,
1441
+ TOP_RIGHT,
1442
+ LEFT,
1443
+ RIGHT,
1444
+ }`
1286
1445
 
1287
1446
  ### Usage Notes
1288
1447
 
1289
1448
  - Import `ComboBox` directly from `@chayns-components/core` instead of internal source paths.
1290
1449
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
1450
+ - Pay special attention to required props: `lists`, `placeholder`.
1291
1451
 
1292
1452
  ### Anti Patterns
1293
1453
 
1294
1454
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
1455
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
1295
1456
  ## ContentCard
1296
1457
 
1297
1458
  `ContentCard` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -1336,11 +1497,21 @@ import { ContentCard } from '@chayns-components/core';
1336
1497
 
1337
1498
  ### Props
1338
1499
 
1339
- No prop documentation available.
1500
+ | name | type | required | description |
1501
+ | --- | --- | --- | --- |
1502
+ | `children` | `ReactNode` | no | The content of the content card |
1503
+ | `onClick` | `(() => void) \| undefined` | no | The onClick event handler |
1504
+ | `type` | `ContentCardType \| undefined` | no | The type of the content card |
1340
1505
 
1341
1506
  ### Types
1342
1507
 
1343
- No additional exported types documented.
1508
+ - `ContentCardType` -> `enum ContentCardType {
1509
+ Default = 'default',
1510
+ Error = 'error',
1511
+ Success = 'success',
1512
+ Warning = 'warning',
1513
+ SiteColor = 'siteColor',
1514
+ }`
1344
1515
 
1345
1516
  ### Usage Notes
1346
1517
 
@@ -1350,6 +1521,7 @@ No additional exported types documented.
1350
1521
  ### Anti Patterns
1351
1522
 
1352
1523
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
1524
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
1353
1525
  ## ContextMenu
1354
1526
 
1355
1527
  `ContextMenu` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -1451,20 +1623,69 @@ import { ContextMenu } from '@chayns-components/core';
1451
1623
 
1452
1624
  ### Props
1453
1625
 
1454
- No prop documentation available.
1626
+ | name | type | required | description |
1627
+ | --- | --- | --- | --- |
1628
+ | `alignment` | `ContextMenuAlignment \| undefined` | no | Context menu alignment |
1629
+ | `children` | `ReactNode` | no | Children element |
1630
+ | `className` | `string \| undefined` | no | Additional class name applied to the trigger wrapper. |
1631
+ | `container` | `Element \| undefined` | no | Container element |
1632
+ | `coordinates` | `ContextMenuCoordinates \| undefined` | no | Custom coordinates |
1633
+ | `dialogText` | `string \| undefined` | no | Optional text for the select dialog. |
1634
+ | `headline` | `string \| undefined` | no | Context menu headline |
1635
+ | `items` | `ContextMenuItem[]` | yes | Menu items |
1636
+ | `onHide` | `VoidFunction \| undefined` | no | Hide callback function |
1637
+ | `onShow` | `VoidFunction \| undefined` | no | Show callback function |
1638
+ | `shouldCloseOnPopupClick` | `boolean \| undefined` | no | Close on popup click flag |
1639
+ | `shouldDisableClick` | `boolean \| undefined` | no | Disable click flag |
1640
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for the trigger. |
1641
+ | `shouldHidePopupArrow` | `boolean \| undefined` | no | Hide popup arrow flag |
1642
+ | `shouldShowHoverEffect` | `boolean \| undefined` | no | Show hover effect flag |
1643
+ | `shouldUseDefaultTriggerStyles` | `boolean \| undefined` | no | Whether the default trigger padding/background styles should be applied. |
1644
+ | `style` | `CSSProperties \| undefined` | no | Inline styles applied to the trigger wrapper. |
1645
+ | `yOffset` | `number \| undefined` | no | Vertical offset between the trigger element and the context menu. |
1646
+ | `zIndex` | `number \| undefined` | no | Z-index value |
1455
1647
 
1456
1648
  ### Types
1457
1649
 
1458
- No additional exported types documented.
1650
+ - `ContextMenuAlignment` -> `enum ContextMenuAlignment {
1651
+ TopLeft,
1652
+ BottomLeft,
1653
+ TopRight,
1654
+ BottomRight,
1655
+ TopCenter,
1656
+ BottomCenter,
1657
+ }`
1658
+ - `ContextMenuCoordinates` -> `type ContextMenuCoordinates = {
1659
+ /** The x-coordinate. */
1660
+ x: number;
1661
+ /** The y-coordinate. */
1662
+ y: number;
1663
+ };`
1664
+ - `ContextMenuItem` -> `type ContextMenuItem = {
1665
+ /** Optional icons for the item. Can be strings or React nodes. */
1666
+ icons?: string[] | ReactNode;
1667
+ /** Whether the item is selected. */
1668
+ isSelected?: boolean;
1669
+ /** Unique key for the item. */
1670
+ key: string;
1671
+ /** Function called when the item is clicked. */
1672
+ onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;
1673
+ /** Whether to show a spacer after the item. */
1674
+ shouldShowSpacer?: boolean;
1675
+ /** The text displayed for the item. */
1676
+ text: string;
1677
+ };`
1459
1678
 
1460
1679
  ### Usage Notes
1461
1680
 
1462
1681
  - Import `ContextMenu` directly from `@chayns-components/core` instead of internal source paths.
1463
1682
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
1683
+ - Pay special attention to required props: `items`.
1464
1684
 
1465
1685
  ### Anti Patterns
1466
1686
 
1467
1687
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
1688
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
1468
1689
  ## CopyableContent
1469
1690
 
1470
1691
  `CopyableContent` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -1603,7 +1824,13 @@ import { CopyableContent } from '@chayns-components/core';
1603
1824
 
1604
1825
  ### Props
1605
1826
 
1606
- No prop documentation available.
1827
+ | name | type | required | description |
1828
+ | --- | --- | --- | --- |
1829
+ | `appearance` | `CopyableContentAppearance \| undefined` | no | Controls the visual surface of the content block. |
1830
+ | `children` | `ReactNode` | no | Replaces only the visible rendered content and never the copied source. |
1831
+ | `collapsedHeight` | `number \| undefined` | no | The height of the content in its collapsed state. |
1832
+ | `content` | `string` | yes | Markdown source used for rendering and clipboard data. |
1833
+ | `copyFailedMessage` | `string \| undefined` | no | Replaces the localized error message shown when copying fails. |
1607
1834
 
1608
1835
  ### Types
1609
1836
 
@@ -1613,10 +1840,12 @@ No additional exported types documented.
1613
1840
 
1614
1841
  - Import `CopyableContent` directly from `@chayns-components/core` instead of internal source paths.
1615
1842
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
1843
+ - Pay special attention to required props: `content`.
1616
1844
 
1617
1845
  ### Anti Patterns
1618
1846
 
1619
1847
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
1848
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
1620
1849
  ## ExpandableContent
1621
1850
 
1622
1851
  `ExpandableContent` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -1643,7 +1872,11 @@ import { ExpandableContent } from '@chayns-components/core';
1643
1872
 
1644
1873
  ### Props
1645
1874
 
1646
- No prop documentation available.
1875
+ | name | type | required | description |
1876
+ | --- | --- | --- | --- |
1877
+ | `children` | `ReactNode` | yes | The children that should be animated. |
1878
+ | `isOpen` | `boolean` | yes | Whether the content is expanded. |
1879
+ | `startDelay` | `number \| undefined` | no | An optional start delay. |
1647
1880
 
1648
1881
  ### Types
1649
1882
 
@@ -1653,10 +1886,12 @@ No additional exported types documented.
1653
1886
 
1654
1887
  - Import `ExpandableContent` directly from `@chayns-components/core` instead of internal source paths.
1655
1888
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
1889
+ - Pay special attention to required props: `children`, `isOpen`.
1656
1890
 
1657
1891
  ### Anti Patterns
1658
1892
 
1659
1893
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
1894
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
1660
1895
  ## FileInput
1661
1896
 
1662
1897
  `FileInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -1706,7 +1941,23 @@ import { FileInput } from '@chayns-components/core';
1706
1941
 
1707
1942
  ### Props
1708
1943
 
1709
- No prop documentation available.
1944
+ | name | type | required | description |
1945
+ | --- | --- | --- | --- |
1946
+ | `files` | `IFileItem[] \| undefined` | no | Already uploaded files to display. |
1947
+ | `fileSelectionIcons` | `string[] \| undefined` | no | An array of icons that should be displayed inside the FileInput |
1948
+ | `fileSelectionPlaceholder` | `string \| undefined` | no | The text that should be displayed inside the FileInput. |
1949
+ | `fileTypes` | `string \| undefined` | no | The filetypes that could be selected. Example for multiple types: 'image/*, video/*'. |
1950
+ | `imageSelectIcons` | `string[] \| undefined` | no | The icon of the image selection. |
1951
+ | `imageSelectPlaceholder` | `string \| undefined` | no | If set, pictures can be select via Pixabay. |
1952
+ | `isDisabled` | `boolean \| undefined` | no | Whether the FileInput is disabled. |
1953
+ | `maxFiles` | `number \| undefined` | no | The maximum amount of Files that can be uploaded. |
1954
+ | `maxFileSizeInMB` | `number \| undefined` | no | The maximum size of a file in MB. |
1955
+ | `onAdd` | `((files: File[] \| UploadedFile[]) => void) \| undefined` | no | A function to be executed when files are added. |
1956
+ | `onMaxFilesReached` | `(() => void) \| undefined` | no | Function to be executed when the maximum amount of Files are reached. |
1957
+ | `onRemove` | `((file: IFileItem \| File \| UploadedFile) => void) \| undefined` | no | A function to be executed when a file is removed. |
1958
+ | `shouldAllowDownload` | `boolean \| undefined` | no | Whether to show a download icon for files that have a `source` set. |
1959
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for the file selection trigger. |
1960
+ | `shouldPreventImageUpload` | `boolean \| undefined` | no | Whether the image upload should be prevented. |
1710
1961
 
1711
1962
  ### Types
1712
1963
 
@@ -1720,6 +1971,7 @@ No additional exported types documented.
1720
1971
  ### Anti Patterns
1721
1972
 
1722
1973
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
1974
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
1723
1975
  ## FileList
1724
1976
 
1725
1977
  `FileList` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -1747,7 +1999,11 @@ import { FileList } from '@chayns-components/core';
1747
1999
 
1748
2000
  ### Props
1749
2001
 
1750
- No prop documentation available.
2002
+ | name | type | required | description |
2003
+ | --- | --- | --- | --- |
2004
+ | `files` | `IFileItem[] \| undefined` | no | Already uploaded files to display. |
2005
+ | `onRemove` | `((id: string) => void) \| undefined` | no | A function to be executed when a file is removed. |
2006
+ | `shouldAllowDownload` | `boolean \| undefined` | no | Whether to show a download icon for files that have a `source` set. |
1751
2007
 
1752
2008
  ### Types
1753
2009
 
@@ -1761,6 +2017,7 @@ No additional exported types documented.
1761
2017
  ### Anti Patterns
1762
2018
 
1763
2019
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
2020
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
1764
2021
  ## FileSelect
1765
2022
 
1766
2023
  `FileSelect` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -1781,7 +2038,19 @@ import { FileSelect } from '@chayns-components/core';
1781
2038
 
1782
2039
  ### Props
1783
2040
 
1784
- No prop documentation available.
2041
+ | name | type | required | description |
2042
+ | --- | --- | --- | --- |
2043
+ | `fileSelectionIcons` | `string[] \| undefined` | no | An array of icons that should be displayed inside the FileInput |
2044
+ | `fileSelectionPlaceholder` | `string \| undefined` | no | The text that should be displayed inside the FileInput. |
2045
+ | `fileTypes` | `string \| undefined` | no | The filetypes that could be selected. Example for multiple types: 'image/*, video/*'. |
2046
+ | `imageSelectIcons` | `string[] \| undefined` | no | The icon of the image selection. |
2047
+ | `imageSelectPlaceholder` | `string \| undefined` | no | If set, pictures can be select via Pixabay. |
2048
+ | `isDisabled` | `boolean \| undefined` | no | Whether the FileInput is disabled. |
2049
+ | `maxFiles` | `number \| undefined` | no | The maximum amount of Files that can be uploaded. |
2050
+ | `maxFileSizeInMB` | `number \| undefined` | no | The maximum size of a file in MB. |
2051
+ | `onAdd` | `((files: File[] \| UploadedFile[]) => void) \| undefined` | no | A function to be executed when files are added. |
2052
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for selection triggers. |
2053
+ | `shouldPreventImageUpload` | `boolean \| undefined` | no | Whether the image upload should be prevented. |
1785
2054
 
1786
2055
  ### Types
1787
2056
 
@@ -1795,6 +2064,7 @@ No additional exported types documented.
1795
2064
  ### Anti Patterns
1796
2065
 
1797
2066
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
2067
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
1798
2068
  ## Filter
1799
2069
 
1800
2070
  `Filter` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -2007,20 +2277,61 @@ import { Filter } from '@chayns-components/core';
2007
2277
 
2008
2278
  ### Props
2009
2279
 
2010
- No prop documentation available.
2280
+ | name | type | required | description |
2281
+ | --- | --- | --- | --- |
2282
+ | `checkboxConfig` | `CheckboxProps \| undefined` | no | No description available. |
2283
+ | `comboboxConfig` | `ComboboxConfig \| undefined` | no | No description available. |
2284
+ | `filterButtonConfig` | `FilterButtonsProps \| undefined` | no | No description available. |
2285
+ | `headline` | `ReactNode` | yes | No description available. |
2286
+ | `onActiveChange` | `((isActive: boolean) => void) \| undefined` | no | No description available. |
2287
+ | `rightIcons` | `FilterRightIcon[] \| undefined` | no | No description available. |
2288
+ | `searchConfig` | `SearchConfig \| undefined` | no | No description available. |
2289
+ | `shouldAutoFocus` | `boolean \| undefined` | no | No description available. |
2290
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | No description available. |
2291
+ | `shouldShowRoundedHoverEffect` | `boolean \| undefined` | no | No description available. |
2292
+ | `sortConfig` | `SortConfig \| undefined` | no | No description available. |
2011
2293
 
2012
2294
  ### Types
2013
2295
 
2014
- No additional exported types documented.
2296
+ - `FilterRightIcon` -> `interface FilterRightIcon {
2297
+ icons: string[];
2298
+ onClick: VoidFunction;
2299
+ }`
2300
+ - `SearchConfig` -> `interface SearchConfig {
2301
+ /**
2302
+ * Callback invoked whenever the search input changes.
2303
+ */
2304
+ onSearchChange: (search: string) => void;
2305
+ /**
2306
+ * Current search value.
2307
+ */
2308
+ searchValue: string;
2309
+ }`
2310
+ - `SortConfig` -> `interface SortConfig {
2311
+ /**
2312
+ * Callback invoked when a sort item is selected.
2313
+ */
2314
+ onSortChange: (item: SortItem) => void;
2315
+ /**
2316
+ * Currently selected sort item.
2317
+ */
2318
+ selectedItem: SortItem;
2319
+ /**
2320
+ * Available sort items.
2321
+ */
2322
+ items: SortItem[];
2323
+ }`
2015
2324
 
2016
2325
  ### Usage Notes
2017
2326
 
2018
2327
  - Import `Filter` directly from `@chayns-components/core` instead of internal source paths.
2019
2328
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
2329
+ - Pay special attention to required props: `headline`.
2020
2330
 
2021
2331
  ### Anti Patterns
2022
2332
 
2023
2333
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
2334
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
2024
2335
  ## FilterButtons
2025
2336
 
2026
2337
  `FilterButtons` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -2151,20 +2462,33 @@ import { FilterButtons } from '@chayns-components/core';
2151
2462
 
2152
2463
  ### Props
2153
2464
 
2154
- No prop documentation available.
2465
+ | name | type | required | description |
2466
+ | --- | --- | --- | --- |
2467
+ | `allCount` | `number \| undefined` | no | The number that should be displayed as count in the "all" button. |
2468
+ | `items` | `IFilterButtonItem[]` | yes | The items that should be displayed. |
2469
+ | `onSelect` | `((keys: string[]) => void) \| undefined` | no | A function that should be executed when an item is selected. |
2470
+ | `selectedItemIds` | `string[] \| undefined` | no | The keys of items that should be selected. |
2471
+ | `shouldCalcCountForAll` | `boolean \| undefined` | no | If true, the count of all items will be shown in the "all" button. |
2472
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for filter buttons. |
2473
+ | `size` | `FilterButtonSize \| undefined` | no | The size auf the filter buttons. Use the FilterButtonSize enum. |
2155
2474
 
2156
2475
  ### Types
2157
2476
 
2158
- No additional exported types documented.
2477
+ - `FilterButtonSize` -> `enum FilterButtonSize {
2478
+ Small,
2479
+ Normal,
2480
+ }`
2159
2481
 
2160
2482
  ### Usage Notes
2161
2483
 
2162
2484
  - Import `FilterButtons` directly from `@chayns-components/core` instead of internal source paths.
2163
2485
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
2486
+ - Pay special attention to required props: `items`.
2164
2487
 
2165
2488
  ### Anti Patterns
2166
2489
 
2167
2490
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
2491
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
2168
2492
  ## GridImage
2169
2493
 
2170
2494
  `GridImage` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -2193,7 +2517,14 @@ import { GridImage } from '@chayns-components/core';
2193
2517
 
2194
2518
  ### Props
2195
2519
 
2196
- No prop documentation available.
2520
+ | name | type | required | description |
2521
+ | --- | --- | --- | --- |
2522
+ | `background` | `Background<string \| number> \| undefined` | no | The background color of the image. |
2523
+ | `images` | `string[]` | yes | The images to be displayed in the `GridImage`. Only the first three images are displayed. |
2524
+ | `onClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | no | Function to be executed when the images are clicked. |
2525
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for clickable GridImage instances. |
2526
+ | `shouldShowRoundImage` | `boolean \| undefined` | no | Images of users should always be displayed in a round shape. Therefore, this property can be set to true. |
2527
+ | `size` | `number` | yes | The size of the `GridImage` in pixels, which is set as both width and height. |
2197
2528
 
2198
2529
  ### Types
2199
2530
 
@@ -2203,10 +2534,12 @@ No additional exported types documented.
2203
2534
 
2204
2535
  - Import `GridImage` directly from `@chayns-components/core` instead of internal source paths.
2205
2536
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
2537
+ - Pay special attention to required props: `images`, `size`.
2206
2538
 
2207
2539
  ### Anti Patterns
2208
2540
 
2209
2541
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
2542
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
2210
2543
  ## GroupedImage
2211
2544
 
2212
2545
  `GroupedImage` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -2262,7 +2595,18 @@ import { GroupedImage } from '@chayns-components/core';
2262
2595
 
2263
2596
  ### Props
2264
2597
 
2265
- No prop documentation available.
2598
+ | name | type | required | description |
2599
+ | --- | --- | --- | --- |
2600
+ | `cornerElement` | `ReactNode` | no | Optional Element to display in the right corner of the image |
2601
+ | `cornerImage` | `string \| undefined` | no | Optional image to display in the bottom right corner of the grouped image. |
2602
+ | `height` | `number \| undefined` | no | Height of the grouped image container. |
2603
+ | `imageBackground` | `Background<string \| number> \| undefined` | no | Background for the single images. |
2604
+ | `images` | `string[]` | yes | Array of image URLs to display in the grouped image. If only one image is provided, it will be displayed as a full image. |
2605
+ | `onClick` | `MouseEventHandler<HTMLDivElement> \| undefined` | no | Optional click handler for the grouped image. |
2606
+ | `onImageError` | `((event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void) \| undefined` | no | Optional handler for image load errors. |
2607
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for clickable grouped images. |
2608
+ | `shouldPreventBackground` | `boolean \| undefined` | no | Whether to prevent the background of the images from being set. |
2609
+ | `shouldShowRoundImage` | `boolean \| undefined` | no | Whether to show the images in a round shape. |
2266
2610
 
2267
2611
  ### Types
2268
2612
 
@@ -2272,10 +2616,12 @@ No additional exported types documented.
2272
2616
 
2273
2617
  - Import `GroupedImage` directly from `@chayns-components/core` instead of internal source paths.
2274
2618
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
2619
+ - Pay special attention to required props: `images`.
2275
2620
 
2276
2621
  ### Anti Patterns
2277
2622
 
2278
2623
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
2624
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
2279
2625
  ## HighlightSlider
2280
2626
 
2281
2627
  `HighlightSlider` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -2298,7 +2644,14 @@ import { HighlightSlider } from '@chayns-components/core';
2298
2644
 
2299
2645
  ### Props
2300
2646
 
2301
- No prop documentation available.
2647
+ | name | type | required | description |
2648
+ | --- | --- | --- | --- |
2649
+ | `colors` | `HighlightSliderItemColors \| undefined` | no | The Colors of the slider. |
2650
+ | `count` | `number` | yes | The total number of sections, that should be displayed. |
2651
+ | `currentIndex` | `number` | yes | The current index. |
2652
+ | `duration` | `number \| undefined` | no | The duration of the animation of a single item in seconds. |
2653
+ | `onIndexChange` | `((index: number) => void) \| undefined` | no | Function to be executed if the index has changed. |
2654
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for interactive slider items. |
2302
2655
 
2303
2656
  ### Types
2304
2657
 
@@ -2308,10 +2661,12 @@ No additional exported types documented.
2308
2661
 
2309
2662
  - Import `HighlightSlider` directly from `@chayns-components/core` instead of internal source paths.
2310
2663
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
2664
+ - Pay special attention to required props: `count`, `currentIndex`.
2311
2665
 
2312
2666
  ### Anti Patterns
2313
2667
 
2314
2668
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
2669
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
2315
2670
  ## Icon
2316
2671
 
2317
2672
  `Icon` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -2348,7 +2703,19 @@ import { Icon } from '@chayns-components/core';
2348
2703
 
2349
2704
  ### Props
2350
2705
 
2351
- No prop documentation available.
2706
+ | name | type | required | description |
2707
+ | --- | --- | --- | --- |
2708
+ | `className` | `string \| undefined` | no | Additional class name for the icon wrapper element. |
2709
+ | `color` | `string \| undefined` | no | The color of the icon. |
2710
+ | `icons` | `string[]` | yes | The icon(s) to be displayed. |
2711
+ | `isDisabled` | `boolean \| undefined` | no | Whether the icon should be disabled. |
2712
+ | `onClick` | `MouseEventHandler<HTMLSpanElement> \| undefined` | no | Function to be executed when the icon is clicked. |
2713
+ | `onDoubleClick` | `MouseEventHandler<HTMLSpanElement> \| undefined` | no | Function to be executed when the icon is double-clicked. |
2714
+ | `onMouseDown` | `MouseEventHandler<HTMLSpanElement> \| undefined` | no | Function to be executed when the icon is pressed. |
2715
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for clickable icons. |
2716
+ | `shouldStopPropagation` | `boolean \| undefined` | no | Stops event propagation on click. |
2717
+ | `size` | `number \| undefined` | no | The size of the icon. |
2718
+ | `tabIndex` | `number \| undefined` | no | Optional tab index for the icon. |
2352
2719
 
2353
2720
  ### Types
2354
2721
 
@@ -2358,10 +2725,12 @@ No additional exported types documented.
2358
2725
 
2359
2726
  - Import `Icon` directly from `@chayns-components/core` instead of internal source paths.
2360
2727
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
2728
+ - Pay special attention to required props: `icons`.
2361
2729
 
2362
2730
  ### Anti Patterns
2363
2731
 
2364
2732
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
2733
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
2365
2734
  ## Input
2366
2735
 
2367
2736
  `Input` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -2419,11 +2788,41 @@ import { Input } from '@chayns-components/core';
2419
2788
 
2420
2789
  ### Props
2421
2790
 
2422
- No prop documentation available.
2791
+ | name | type | required | description |
2792
+ | --- | --- | --- | --- |
2793
+ | `autoComplete` | `AutoComplete` | no | Defines the auto Complete of the input |
2794
+ | `color` | `Color \| undefined` | no | Colors for different parts of the input. You can set the color of the placeholder and the border color. |
2795
+ | `disabledHint` | `string \| undefined` | no | If set and the input is disabled, the input will display a tooltip with this message. |
2796
+ | `id` | `string \| undefined` | no | The id of the input |
2797
+ | `inputMode` | `InputMode` | no | Defines the input mode of the input |
2798
+ | `isDisabled` | `boolean \| undefined` | no | Disables the input so that it cannot be changed anymore |
2799
+ | `isInvalid` | `boolean \| undefined` | no | If true, the input field is marked as invalid |
2800
+ | `leftElement` | `ReactNode` | no | An element to be displayed on the left side of the input field |
2801
+ | `onBlur` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the input field loses focus |
2802
+ | `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the text of the input changes |
2803
+ | `onFocus` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when the input field is focused |
2804
+ | `onKeyDown` | `KeyboardEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when a letter is pressed |
2805
+ | `onPaste` | `((event: ClipboardEvent<HTMLInputElement>) => void) \| undefined` | no | Function that is executed when content is pasted into the input field |
2806
+ | `placeholder` | `ReactNode` | no | Placeholder for the input field |
2807
+ | `rightElement` | `ReactElement<any, string \| JSXElementConstructor<any>> \| undefined` | no | An element that should be displayed on the right side of the Input. |
2808
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
2809
+ | `shouldPreventPlaceholderAnimation` | `boolean \| undefined` | no | Whether the placeholder animation should be prevented. |
2810
+ | `shouldRemainPlaceholder` | `boolean \| undefined` | no | Whether the placeholder should remain at its position if a value is typed. |
2811
+ | `shouldShowCenteredContent` | `boolean \| undefined` | no | Whether the content should be displayed centered inside the input. |
2812
+ | `shouldShowClearIcon` | `boolean \| undefined` | no | If true, a clear icon is displayed at the end of the input field |
2813
+ | `shouldShowOnlyBottomBorder` | `boolean \| undefined` | no | Whether only the bottom border should be displayed |
2814
+ | `shouldShowTransparentBackground` | `boolean \| undefined` | no | Whether the background should be transparent. |
2815
+ | `shouldUseAutoFocus` | `boolean \| undefined` | no | If true, the input field is focused when the component is mounted |
2816
+ | `size` | `InputSize \| undefined` | no | The size of the input field |
2817
+ | `type` | `HTMLInputTypeAttribute \| undefined` | no | Input type set for an input element (e.g. 'text', 'number' or 'password') |
2818
+ | `value` | `string \| undefined` | no | Value if the input field should be controlled |
2423
2819
 
2424
2820
  ### Types
2425
2821
 
2426
- No additional exported types documented.
2822
+ - `InputSize` -> `enum InputSize {
2823
+ Small = 'small',
2824
+ Medium = 'medium',
2825
+ }`
2427
2826
 
2428
2827
  ### Usage Notes
2429
2828
 
@@ -2433,6 +2832,7 @@ No additional exported types documented.
2433
2832
  ### Anti Patterns
2434
2833
 
2435
2834
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
2835
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
2436
2836
  ## List
2437
2837
 
2438
2838
  `List` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -3153,7 +3553,11 @@ import { List, ListItem } from '@chayns-components/core';
3153
3553
 
3154
3554
  ### Props
3155
3555
 
3156
- No prop documentation available.
3556
+ | name | type | required | description |
3557
+ | --- | --- | --- | --- |
3558
+ | `children` | `ReactNode` | yes | The items of the list |
3559
+ | `isWrapped` | `boolean \| undefined` | no | This value must be set for nested AccordionGroup components. This adjusts the style of<br />the head and the padding of the content accordions. |
3560
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting and arrow-key navigation within the list. |
3157
3561
 
3158
3562
  ### Types
3159
3563
 
@@ -3163,10 +3567,12 @@ No additional exported types documented.
3163
3567
 
3164
3568
  - Import `List` directly from `@chayns-components/core` instead of internal source paths.
3165
3569
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
3570
+ - Pay special attention to required props: `children`.
3166
3571
 
3167
3572
  ### Anti Patterns
3168
3573
 
3169
3574
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
3575
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
3170
3576
  ## Masonry
3171
3577
 
3172
3578
  `Masonry` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -3358,20 +3764,40 @@ import { MentionFinder } from '@chayns-components/core';
3358
3764
 
3359
3765
  ### Props
3360
3766
 
3361
- No prop documentation available.
3767
+ | name | type | required | description |
3768
+ | --- | --- | --- | --- |
3769
+ | `dragCloseThresholdInPx` | `number \| undefined` | no | Threshold in pixels to drag to close the popup |
3770
+ | `enableDragHandle` | `boolean \| undefined` | no | Enables the optional drag handle inside the popup |
3771
+ | `inputValue` | `string` | yes | The text from the input field |
3772
+ | `members` | `MentionMember[]` | yes | Members that can be selected |
3773
+ | `onSelect` | `({ fullMatch, member }: { fullMatch: string; member: MentionMember; }) => void` | yes | Function to be executed when a member is selected |
3774
+ | `overlayContainerSelector` | `string \| undefined` | no | Selector for the container to render the overlay into (defaults to closest dialog, thread, page provider or tapp) |
3775
+ | `popupAlignment` | `MentionFinderPopupAlignment` | yes | Alignment of the popup |
3362
3776
 
3363
3777
  ### Types
3364
3778
 
3365
- No additional exported types documented.
3779
+ - `MentionFinderPopupAlignment` -> `enum MentionFinderPopupAlignment {
3780
+ Top,
3781
+ Bottom,
3782
+ }`
3783
+ - `MentionMember` -> `type MentionMember = {
3784
+ id: string;
3785
+ info?: string;
3786
+ imageUrl: string;
3787
+ name: string;
3788
+ shouldShowRoundImage?: boolean;
3789
+ };`
3366
3790
 
3367
3791
  ### Usage Notes
3368
3792
 
3369
3793
  - Import `MentionFinder` directly from `@chayns-components/core` instead of internal source paths.
3370
3794
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
3795
+ - Pay special attention to required props: `inputValue`, `members`, `onSelect`, `popupAlignment`.
3371
3796
 
3372
3797
  ### Anti Patterns
3373
3798
 
3374
3799
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
3800
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
3375
3801
  ## MultiActionButton
3376
3802
 
3377
3803
  `MultiActionButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -3700,20 +4126,90 @@ import { MultiActionButton } from '@chayns-components/core';
3700
4126
 
3701
4127
  ### Props
3702
4128
 
3703
- No prop documentation available.
4129
+ | name | type | required | description |
4130
+ | --- | --- | --- | --- |
4131
+ | `backgroundColor` | `string \| undefined` | no | Optional background color for both actions. |
4132
+ | `className` | `string \| undefined` | no | Additional class name for the wrapper element. |
4133
+ | `extendedTimeoutMs` | `number \| undefined` | no | Timeout in ms before the secondary action collapses after a click. |
4134
+ | `gapColor` | `string \| undefined` | no | Optional color for the 1px separator line between actions. |
4135
+ | `height` | `number \| undefined` | no | Height of the button. |
4136
+ | `isCollapsed` | `boolean \| undefined` | no | Whether the button is collapsed to a single icon. |
4137
+ | `isDisabled` | `boolean \| undefined` | no | Whether the whole control is disabled. |
4138
+ | `primaryAction` | `MultiActionButtonAction` | yes | Primary action configuration. |
4139
+ | `secondaryAction` | `MultiActionButtonAction \| undefined` | no | Secondary action configuration. |
4140
+ | `secondaryContextMenu` | `MultiActionButtonSecondaryContextMenu \| undefined` | no | Context menu rendered as the secondary action. |
4141
+ | `shouldAutoCollapse` | `boolean \| undefined` | no | Whether the button should collapse automatically based on the available width. |
4142
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for interactive action buttons. |
4143
+ | `shouldUseFullWidth` | `boolean \| undefined` | no | Whether the button should take the full width of its parent. |
4144
+ | `width` | `number \| MotionValue<number> \| undefined` | no | Optional width override for the whole button. |
3704
4145
 
3705
4146
  ### Types
3706
4147
 
3707
- No additional exported types documented.
4148
+ - `MultiActionButtonAction` -> `type MultiActionButtonAction = {
4149
+ /**
4150
+ * Optional background color for this action.
4151
+ * @description Overrides the component-level background color for this specific action.
4152
+ * If omitted, `MultiActionButton.backgroundColor` is used as fallback.
4153
+ * @optional
4154
+ */
4155
+ backgroundColor?: string;
4156
+ /**
4157
+ * Optional color for the icon and label.
4158
+ * @description Overrides the default text/icon color. If omitted, the current theme text color is used.
4159
+ * @optional
4160
+ */
4161
+ color?: string;
4162
+ /**
4163
+ * The icon for the action.
4164
+ * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom React element.
4165
+ * The icon is always rendered inside a fixed-size slot to keep alignment stable.
4166
+ */
4167
+ icon: string | ReactElement;
4168
+ /**
4169
+ * Whether the action is disabled.
4170
+ * @description Disabled actions do not respond to hover or click and are visually dimmed.
4171
+ * @optional
4172
+ */
4173
+ isDisabled?: boolean;
4174
+ /**
4175
+ * Optional reason shown in a tooltip when the action is disabled.
4176
+ * @description Use this to explain why the action is currently unavailable.
4177
+ * @optional
4178
+ */
4179
+ disabledReason?: string;
4180
+ /**
4181
+ * The optional label for the action.
4182
+ * @description The label is shown next to the icon and will be truncated with ellipsis when
4183
+ * there is not enough horizontal space.
4184
+ * @optional
4185
+ */
4186
+ label: ReactNode;
4187
+ /**
4188
+ * Click handler for the action.
4189
+ * @description Receives a payload that includes the action type, extension state, and device info.
4190
+ * This allows external logic to decide whether the click should trigger an action immediately.
4191
+ * @optional
4192
+ */
4193
+ onClick?: (info: MultiActionButtonActionEvent) => void;
4194
+ /**
4195
+ * Status effect configuration for the action.
4196
+ * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.
4197
+ * @optional
4198
+ */
4199
+ status?: MultiActionButtonActionStatus;
4200
+ };`
4201
+ - `MultiActionButtonSecondaryContextMenu` -> `type MultiActionButtonSecondaryContextMenu = ContextMenuItem[];`
3708
4202
 
3709
4203
  ### Usage Notes
3710
4204
 
3711
4205
  - Import `MultiActionButton` directly from `@chayns-components/core` instead of internal source paths.
3712
4206
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
4207
+ - Pay special attention to required props: `primaryAction`.
3713
4208
 
3714
4209
  ### Anti Patterns
3715
4210
 
3716
4211
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4212
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
3717
4213
  ## NumberInput
3718
4214
 
3719
4215
  `NumberInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -3734,7 +4230,22 @@ import { NumberInput } from '@chayns-components/core';
3734
4230
 
3735
4231
  ### Props
3736
4232
 
3737
- No prop documentation available.
4233
+ | name | type | required | description |
4234
+ | --- | --- | --- | --- |
4235
+ | `isDecimalInput` | `boolean \| undefined` | no | Applies rules for decimal input.<br />Enables the user to input one zero as number before the comma |
4236
+ | `isDisabled` | `boolean \| undefined` | no | Whether the input is disabled |
4237
+ | `isInvalid` | `boolean \| undefined` | no | Whether the value is invalid. |
4238
+ | `isMoneyInput` | `boolean \| undefined` | no | Applies rules for money input.<br />Rules: only two decimal places, one zero before the comma |
4239
+ | `isTimeInput` | `boolean \| undefined` | no | Whether the value should be formatted as a time. |
4240
+ | `maxNumber` | `number \| undefined` | no | Limits the number to this value |
4241
+ | `minNumber` | `number \| undefined` | no | Limits the number to this value |
4242
+ | `onBlur` | `((newNumber: string \| number \| null, isInvalid: boolean) => void) \| undefined` | no | Callback function that is called when the input gets out of focus |
4243
+ | `onChange` | `((newValue: string) => void) \| undefined` | no | Callback function that is called when the input changes<br />It will pass the text from the input |
4244
+ | `placeholder` | `string \| undefined` | no | Placeholder for the input field |
4245
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
4246
+ | `shouldShowOnlyBottomBorder` | `boolean \| undefined` | no | Whether only the bottom border should be displayed |
4247
+ | `shouldTriggerChangeOnFormat` | `boolean \| undefined` | no | Whether the onChange function should be triggert when the value is formatted on the focus or blur |
4248
+ | `value` | `string \| undefined` | no | The value, that should be displayed in the input, when it is in focus.<br />You can also pass a stringified number as default value.<br />NOTE: If you pass a stringified number, it will be formatted to the selected format |
3738
4249
 
3739
4250
  ### Types
3740
4251
 
@@ -3748,6 +4259,7 @@ No additional exported types documented.
3748
4259
  ### Anti Patterns
3749
4260
 
3750
4261
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4262
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
3751
4263
  ## Popup
3752
4264
 
3753
4265
  `Popup` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -3816,20 +4328,44 @@ import { Popup } from '@chayns-components/core';
3816
4328
 
3817
4329
  ### Props
3818
4330
 
3819
- No prop documentation available.
4331
+ | name | type | required | description |
4332
+ | --- | --- | --- | --- |
4333
+ | `alignment` | `PopupAlignment \| undefined` | no | The preferred alignment of the popup relative to its trigger element. |
4334
+ | `children` | `ReactNode` | no | The trigger element that the popup is attached to. |
4335
+ | `container` | `Element \| undefined` | no | The DOM element that should receive the popup portal. |
4336
+ | `content` | `ReactNode` | yes | The content rendered inside the popup. |
4337
+ | `isOpen` | `boolean \| undefined` | no | Fully controls whether the popup is visible. |
4338
+ | `onHide` | `VoidFunction \| undefined` | no | Callback that is called after the popup becomes hidden. |
4339
+ | `onShow` | `VoidFunction \| undefined` | no | Callback that is called after the popup becomes visible. |
4340
+ | `shouldBeOpen` | `boolean \| undefined` | no | Requests that the popup should be opened from outside. |
4341
+ | `shouldHideOnChildrenLeave` | `boolean \| undefined` | no | Hides the popup when the pointer leaves the trigger element. |
4342
+ | `shouldScrollWithContent` | `boolean \| undefined` | no | Keeps the popup aligned within the scrolling content container. |
4343
+ | `shouldShowOnHover` | `boolean \| undefined` | no | Opens the popup when the trigger element is hovered instead of clicked. |
4344
+ | `shouldUseChildrenWidth` | `boolean \| undefined` | no | Uses the trigger element width as the popup width reference. |
4345
+ | `shouldUseFullWidth` | `boolean \| undefined` | no | Stretches the trigger element to the full available width. |
4346
+ | `yOffset` | `number \| undefined` | no | Vertical offset between the trigger element and the popup. |
3820
4347
 
3821
4348
  ### Types
3822
4349
 
3823
- No additional exported types documented.
4350
+ - `PopupAlignment` -> `enum PopupAlignment {
4351
+ TopLeft,
4352
+ TopCenter,
4353
+ TopRight,
4354
+ BottomLeft,
4355
+ BottomCenter,
4356
+ BottomRight,
4357
+ }`
3824
4358
 
3825
4359
  ### Usage Notes
3826
4360
 
3827
4361
  - Import `Popup` directly from `@chayns-components/core` instead of internal source paths.
3828
4362
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
4363
+ - Pay special attention to required props: `content`.
3829
4364
 
3830
4365
  ### Anti Patterns
3831
4366
 
3832
4367
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4368
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
3833
4369
  ## ProgressBar
3834
4370
 
3835
4371
  `ProgressBar` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -3893,7 +4429,17 @@ import { ProgressBar } from '@chayns-components/core';
3893
4429
 
3894
4430
  ### Props
3895
4431
 
3896
- No prop documentation available.
4432
+ | name | type | required | description |
4433
+ | --- | --- | --- | --- |
4434
+ | `colors` | `Colors \| undefined` | no | The colors of the ProgressBar. |
4435
+ | `height` | `number \| undefined` | no | The height of the progress bar in pixels. If not provided, it will be 10px if shouldShowLabelInline is false and 20px if shouldShowLabelInline is true. |
4436
+ | `label` | `string \| undefined` | no | The label that should be displayed under the progressbar. |
4437
+ | `percentage` | `0 \| 2 \| 1 \| 4 \| 56 \| 38 \| 20 \| 3 \| 10 \| 6 \| 5 \| 7 \| 8 \| 9 \| 11 \| 12 \| 13 \| 14 \| 15 \| 16 \| 17 \| 18 \| 19 \| 21 \| 22 \| 23 \| 24 \| 25 \| 26 \| 27 \| 28 \| 29 \| 30 \| 31 \| 32 \| 33 \| 34 \| 35 \| 36 \| 37 \| 39 \| 40 \| 41 \| 42 \| 43 \| 44 \| 45 \| 46 \| 47 \| 48 \| 49 \| 50 \| 51 \| 52 \| 53 \| 54 \| 55 \| 57 \| 58 \| 59 \| 60 \| 61 \| 62 \| 63 \| 64 \| 65 \| 66 \| 67 \| 68 \| 69 \| 70 \| 71 \| 72 \| 73 \| 74 \| 75 \| 76 \| 77 \| 78 \| 79 \| 80 \| 81 \| 82 \| 83 \| 84 \| 85 \| 86 \| 87 \| 88 \| 89 \| 90 \| 91 \| 92 \| 93 \| 94 \| 95 \| 96 \| 97 \| 98 \| 99 \| 100 \| undefined` | no | The percentage of the progress. Number between 0 and 100. |
4438
+ | `shouldHideProgress` | `boolean \| undefined` | no | Whether the progress should be hide and just display the label. |
4439
+ | `shouldShowLabelInline` | `boolean \| undefined` | no | Whether the label should be displayed inside the ProgressBar. |
4440
+ | `showShine` | `boolean \| undefined` | no | Whether a shine animation should be shown on the progress bar. The amount of shine is based on the percentage value. |
4441
+ | `steps` | `(0 \| 2 \| 1 \| 4 \| 56 \| 38 \| 20 \| 3 \| 10 \| 6 \| 5 \| 7 \| 8 \| 9 \| 11 \| 12 \| 13 \| 14 \| 15 \| 16 \| 17 \| 18 \| 19 \| 21 \| 22 \| 23 \| 24 \| 25 \| 26 \| 27 \| 28 \| 29 \| 30 \| 31 \| 32 \| 33 \| 34 \| 35 \| 36 \| 37 \| 39 \| 40 \| 41 \| 42 \| 43 \| 44 \| 45 \| 46 \| 47 \| 48 \| 49 \| 50 \| 51 \| 52 \| 53 \| 54 \| 55 \| 57 \| 58 \| 59 \| 60 \| 61 \| 62 \| 63 \| 64 \| 65 \| 66 \| 67 \| 68 \| 69 \| 70 \| 71 \| 72 \| 73 \| 74 \| 75 \| 76 \| 77 \| 78 \| 79 \| 80 \| 81 \| 82 \| 83 \| 84 \| 85 \| 86 \| 87 \| 88 \| 89 \| 90 \| 91 \| 92 \| 93 \| 94 \| 95 \| 96 \| 97 \| 98 \| 99 \| 100)[] \| undefined` | no | Visual marked steps. |
4442
+ | `thumbLabel` | `ReactNode` | no | The label that should be displayed on the thumb of the progress bar. |
3897
4443
 
3898
4444
  ### Types
3899
4445
 
@@ -3907,6 +4453,7 @@ No additional exported types documented.
3907
4453
  ### Anti Patterns
3908
4454
 
3909
4455
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4456
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
3910
4457
  ## RadioButton
3911
4458
 
3912
4459
  `RadioButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -3976,7 +4523,16 @@ import { RadioButton } from '@chayns-components/core';
3976
4523
 
3977
4524
  ### Props
3978
4525
 
3979
- No prop documentation available.
4526
+ | name | type | required | description |
4527
+ | --- | --- | --- | --- |
4528
+ | `children` | `ReactNode` | no | The children that should be displayed after the RadioButton is checked. |
4529
+ | `id` | `string \| number` | yes | The id of the radio button. |
4530
+ | `isDisabled` | `boolean \| undefined` | no | whether the RadioButton should be shown. |
4531
+ | `label` | `ReactNode` | no | The label that should be displayed next to the radio button. |
4532
+ | `rightElement` | `ReactNode` | no | An element that should be displayed on the right side of the label. |
4533
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
4534
+ | `shouldShowCentered` | `boolean \| undefined` | no | Whether the RadioButton should be displayed centered to the label or at the top |
4535
+ | `shouldShowRightElementOnlyOnChecked` | `boolean \| undefined` | no | Whether the rightElement should only be displayed when the RadioButton is checked |
3980
4536
 
3981
4537
  ### Types
3982
4538
 
@@ -3986,10 +4542,12 @@ No additional exported types documented.
3986
4542
 
3987
4543
  - Import `RadioButton` directly from `@chayns-components/core` instead of internal source paths.
3988
4544
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
4545
+ - Pay special attention to required props: `id`.
3989
4546
 
3990
4547
  ### Anti Patterns
3991
4548
 
3992
4549
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4550
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
3993
4551
  ## ScrollView
3994
4552
 
3995
4553
  `ScrollView` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4010,7 +4568,15 @@ import { ScrollView } from '@chayns-components/core';
4010
4568
 
4011
4569
  ### Props
4012
4570
 
4013
- No prop documentation available.
4571
+ | name | type | required | description |
4572
+ | --- | --- | --- | --- |
4573
+ | `children` | `ReactNode` | yes | The elements that should be shown inside the scrollview |
4574
+ | `height` | `Height<string \| number> \| undefined` | no | The height of the scroll view. |
4575
+ | `maxHeight` | `Height<string \| number> \| null \| undefined` | no | The maximum height of the scroll view. |
4576
+ | `maxWidth` | `Width<string \| number> \| undefined` | no | The maximum width of the scroll view. |
4577
+ | `overflowX` | `"scroll" \| "auto" \| undefined` | no | The overflow-x style of the scroll view. |
4578
+ | `overflowY` | `"scroll" \| "auto" \| undefined` | no | The overflow-y style of the scroll view. |
4579
+ | `width` | `Width<string \| number> \| undefined` | no | The width of the scroll view. |
4014
4580
 
4015
4581
  ### Types
4016
4582
 
@@ -4020,10 +4586,12 @@ No additional exported types documented.
4020
4586
 
4021
4587
  - Import `ScrollView` directly from `@chayns-components/core` instead of internal source paths.
4022
4588
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
4589
+ - Pay special attention to required props: `children`.
4023
4590
 
4024
4591
  ### Anti Patterns
4025
4592
 
4026
4593
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4594
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4027
4595
  ## SearchBox
4028
4596
 
4029
4597
  `SearchBox` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4148,20 +4716,58 @@ import { SearchBox } from '@chayns-components/core';
4148
4716
 
4149
4717
  ### Props
4150
4718
 
4151
- No prop documentation available.
4719
+ | name | type | required | description |
4720
+ | --- | --- | --- | --- |
4721
+ | `container` | `Element \| undefined` | no | The element where the content of the `ComboBox` should be rendered via React Portal. |
4722
+ | `customFilter` | `((item: ISearchBoxItem) => boolean) \| undefined` | no | An optional callback function to filter the elements to be displayed |
4723
+ | `dropdownDirection` | `DropdownDirection \| undefined` | no | The direction in which the dropdown should be displayed. By default, it is displayed below the input. |
4724
+ | `hintText` | `string \| undefined` | no | A text that should be displayed if no results are found. |
4725
+ | `inputProps` | `InputProps \| undefined` | no | Props that are passed to the underlying Input component. |
4726
+ | `isInvalid` | `boolean \| undefined` | no | If true, the input field is marked as invalid |
4727
+ | `leftIcons` | `string[] \| undefined` | no | An optional icon that is displayed inside the left side of the input. |
4728
+ | `lists` | `ISearchBoxItems[]` | yes | List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory. |
4729
+ | `maxHeight` | `number \| undefined` | no | The maximum height of the dropdown body in pixels. |
4730
+ | `onBlur` | `FocusEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the input lost focus. |
4731
+ | `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the input is changed. |
4732
+ | `onKeyDown` | `KeyboardEventHandler<HTMLInputElement> \| undefined` | no | Function that is executed when a letter is pressed |
4733
+ | `onSelect` | `((item: ISearchBoxItem) => void) \| undefined` | no | Function to be executed when an item is selected. |
4734
+ | `placeholder` | `string \| undefined` | no | The placeholder that should be displayed. |
4735
+ | `presetValue` | `string \| undefined` | no | Set an input for the search box - it is not an item of a list, just a string. |
4736
+ | `selectedId` | `string \| undefined` | no | Control the selected item. If you use this prop, make sure to update it when the user selects an item. |
4737
+ | `shouldAddInputToList` | `boolean` | yes | If true, the value in the Input is displayed in the list. |
4738
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
4739
+ | `shouldHideFilterButtons` | `boolean \| undefined` | no | If true, the filter buttons are hidden. |
4740
+ | `shouldKeepSelectedItemPosition` | `boolean \| undefined` | no | If true, the selected item keeps its original position in the dropdown list. |
4741
+ | `shouldShowContentOnEmptyInput` | `boolean \| undefined` | no | Whether the full list of items should be displayed if the input is empty. |
4742
+ | `shouldShowRoundImage` | `boolean \| undefined` | no | If true, the images of the items are displayed in a round shape. |
4743
+ | `shouldShowSmallItems` | `boolean \| undefined` | no | If true, the dropdown items are displayed more compactly. |
4744
+ | `shouldShowToggleIcon` | `boolean \| undefined` | no | Whether the icon to open and close the list should be displayed. |
4745
+ | `shouldUseCustomFilterOnly` | `boolean \| undefined` | no | If true, the custom filter replaces the built-in text search instead of narrowing its results. |
4746
+ | `tagInputSettings` | `TagInputSettings \| undefined` | no | Settings for the TagInput. |
4152
4747
 
4153
4748
  ### Types
4154
4749
 
4155
- No additional exported types documented.
4750
+ - `DropdownDirection` -> `enum DropdownDirection {
4751
+ BOTTOM,
4752
+ TOP,
4753
+ BOTTOM_LEFT,
4754
+ BOTTOM_RIGHT,
4755
+ TOP_LEFT,
4756
+ TOP_RIGHT,
4757
+ LEFT,
4758
+ RIGHT,
4759
+ }`
4156
4760
 
4157
4761
  ### Usage Notes
4158
4762
 
4159
4763
  - Import `SearchBox` directly from `@chayns-components/core` instead of internal source paths.
4160
4764
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
4765
+ - Pay special attention to required props: `lists`, `shouldAddInputToList`.
4161
4766
 
4162
4767
  ### Anti Patterns
4163
4768
 
4164
4769
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4770
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4165
4771
  ## SearchInput
4166
4772
 
4167
4773
  `SearchInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4184,20 +4790,37 @@ import { SearchInput } from '@chayns-components/core';
4184
4790
 
4185
4791
  ### Props
4186
4792
 
4187
- No prop documentation available.
4793
+ | name | type | required | description |
4794
+ | --- | --- | --- | --- |
4795
+ | `iconColor` | `Color \| undefined` | no | Color of the icon |
4796
+ | `isActive` | `boolean \| undefined` | no | Force the active state of the input and override the internal state |
4797
+ | `onActiveChange` | `((isActive: boolean) => void) \| undefined` | no | Function that is executed when the active state of the input changes |
4798
+ | `onChange` | `ChangeEventHandler<HTMLInputElement>` | yes | Function that is executed when the text of the input changes |
4799
+ | `onKeyDown` | `((event: KeyboardEvent<HTMLInputElement>) => void) \| undefined` | no | Function that is executed when a key is pressed |
4800
+ | `placeholder` | `string \| undefined` | no | Placeholder for the input field |
4801
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
4802
+ | `shouldUseAbsolutePositioning` | `boolean \| undefined` | no | Whether the SearchInput should be positioned absolute. |
4803
+ | `size` | `InputSize \| undefined` | no | The size of the input field |
4804
+ | `value` | `string \| undefined` | no | Value if the input field should be controlled |
4805
+ | `width` | `number \| undefined` | no | The width of the parent. |
4188
4806
 
4189
4807
  ### Types
4190
4808
 
4191
- No additional exported types documented.
4809
+ - `InputSize` -> `enum InputSize {
4810
+ Small = 'small',
4811
+ Medium = 'medium',
4812
+ }`
4192
4813
 
4193
4814
  ### Usage Notes
4194
4815
 
4195
4816
  - Import `SearchInput` directly from `@chayns-components/core` instead of internal source paths.
4196
4817
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
4818
+ - Pay special attention to required props: `onChange`.
4197
4819
 
4198
4820
  ### Anti Patterns
4199
4821
 
4200
4822
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4823
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4201
4824
  ## SelectButton
4202
4825
 
4203
4826
  `SelectButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4226,20 +4849,39 @@ import { SelectButton } from '@chayns-components/core';
4226
4849
 
4227
4850
  ### Props
4228
4851
 
4229
- No prop documentation available.
4852
+ | name | type | required | description |
4853
+ | --- | --- | --- | --- |
4854
+ | `additionalText` | `string \| undefined` | no | Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count. |
4855
+ | `buttonText` | `string` | yes | The text that should be displayed inside the button. |
4856
+ | `isDisabled` | `boolean \| undefined` | no | Whether the button should be disabled. |
4857
+ | `list` | `SelectButtonItem[]` | yes | A list of item that could be selected. |
4858
+ | `maxDisplayedItems` | `number \| undefined` | no | The maximum number of items displayed in the button text. |
4859
+ | `onSelect` | `((ids: (string \| number)[]) => void) \| undefined` | no | Function to be executed after an item is selected. |
4860
+ | `selectAllText` | `string \| undefined` | no | If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once. |
4861
+ | `selectedItemIds` | `(string \| number)[] \| undefined` | no | The id of an item that should be preselected. |
4862
+ | `shouldAllowMultiSelect` | `boolean \| undefined` | no | Whether more than one item should be selectable. |
4863
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
4864
+ | `shouldShowButtonTextWithSelection` | `boolean \| undefined` | no | Whether the button text should be displayed also if items are selected. |
4865
+ | `shouldShowSearch` | `boolean \| undefined` | no | Whether the search should be displayed inside the dialog. |
4866
+ | `title` | `string \| undefined` | no | The title of the dialog. |
4230
4867
 
4231
4868
  ### Types
4232
4869
 
4233
- No additional exported types documented.
4870
+ - `SelectButtonItem` -> `interface SelectButtonItem {
4871
+ text: string;
4872
+ id: number | string;
4873
+ }`
4234
4874
 
4235
4875
  ### Usage Notes
4236
4876
 
4237
4877
  - Import `SelectButton` directly from `@chayns-components/core` instead of internal source paths.
4238
4878
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
4879
+ - Pay special attention to required props: `buttonText`, `list`.
4239
4880
 
4240
4881
  ### Anti Patterns
4241
4882
 
4242
4883
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4884
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4243
4885
  ## SetupWizard
4244
4886
 
4245
4887
  `SetupWizard` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4266,7 +4908,11 @@ import { SetupWizard } from '@chayns-components/core';
4266
4908
 
4267
4909
  ### Props
4268
4910
 
4269
- No prop documentation available.
4911
+ | name | type | required | description |
4912
+ | --- | --- | --- | --- |
4913
+ | `children` | `ReactElement<SetupWizardItemProps, string \| JSXElementConstructor<any>> \| ReactElement<SetupWizardItemProps, string \| JSXElementConstructor<any>>[]` | yes | The steps of the setup. Use the SetupWizardItem component. |
4914
+ | `isWrapped` | `boolean \| undefined` | no | This value must be set if the SetupWizard is inside an Accordion. |
4915
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for setup wizard items. |
4270
4916
 
4271
4917
  ### Types
4272
4918
 
@@ -4276,10 +4922,12 @@ No additional exported types documented.
4276
4922
 
4277
4923
  - Import `SetupWizard` directly from `@chayns-components/core` instead of internal source paths.
4278
4924
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
4925
+ - Pay special attention to required props: `children`.
4279
4926
 
4280
4927
  ### Anti Patterns
4281
4928
 
4282
4929
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4930
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4283
4931
  ## SetupWizardItem
4284
4932
 
4285
4933
  `SetupWizardItem` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4319,7 +4967,12 @@ import { Input, RadioButton, RadioButtonGroup, SetupWizardItem } from '@chayns-c
4319
4967
 
4320
4968
  ### Props
4321
4969
 
4322
- No prop documentation available.
4970
+ | name | type | required | description |
4971
+ | --- | --- | --- | --- |
4972
+ | `children` | `ReactNode` | yes | The content that should be displayed inside the item. |
4973
+ | `id` | `number` | yes | The id of the item. |
4974
+ | `step` | `number` | yes | The step of the item. |
4975
+ | `title` | `string` | yes | The title of the item. |
4323
4976
 
4324
4977
  ### Types
4325
4978
 
@@ -4329,10 +4982,12 @@ No additional exported types documented.
4329
4982
 
4330
4983
  - Import `SetupWizardItem` directly from `@chayns-components/core` instead of internal source paths.
4331
4984
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
4985
+ - Pay special attention to required props: `children`, `id`, `step`, `title`.
4332
4986
 
4333
4987
  ### Anti Patterns
4334
4988
 
4335
4989
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
4990
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4336
4991
  ## SharingBar
4337
4992
 
4338
4993
  `SharingBar` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4357,20 +5012,35 @@ import { SharingBar } from '@chayns-components/core';
4357
5012
 
4358
5013
  ### Props
4359
5014
 
4360
- No prop documentation available.
5015
+ | name | type | required | description |
5016
+ | --- | --- | --- | --- |
5017
+ | `container` | `Element \| undefined` | no | The element where the content of the `SharingBar` should be rendered via React Portal. |
5018
+ | `label` | `string` | yes | The label that should be displayed. |
5019
+ | `link` | `string` | yes | The link that should be shared. |
5020
+ | `popupAlignment` | `ContextMenuAlignment` | yes | The alignment of the sharing options. |
5021
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting and keyboard interaction. |
4361
5022
 
4362
5023
  ### Types
4363
5024
 
4364
- No additional exported types documented.
5025
+ - `ContextMenuAlignment` -> `enum ContextMenuAlignment {
5026
+ TopLeft,
5027
+ BottomLeft,
5028
+ TopRight,
5029
+ BottomRight,
5030
+ TopCenter,
5031
+ BottomCenter,
5032
+ }`
4365
5033
 
4366
5034
  ### Usage Notes
4367
5035
 
4368
5036
  - Import `SharingBar` directly from `@chayns-components/core` instead of internal source paths.
4369
5037
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
5038
+ - Pay special attention to required props: `label`, `link`, `popupAlignment`.
4370
5039
 
4371
5040
  ### Anti Patterns
4372
5041
 
4373
5042
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
5043
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4374
5044
  ## SharingButton
4375
5045
 
4376
5046
  `SharingButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4441,20 +5111,36 @@ import { SharingButton } from '@chayns-components/core';
4441
5111
 
4442
5112
  ### Props
4443
5113
 
4444
- No prop documentation available.
5114
+ | name | type | required | description |
5115
+ | --- | --- | --- | --- |
5116
+ | `alignment` | `ContextMenuAlignment \| undefined` | no | Context menu alignment |
5117
+ | `children` | `ReactNode` | no | No description available. |
5118
+ | `container` | `Element \| undefined` | no | Container element |
5119
+ | `isDisabled` | `boolean \| undefined` | no | Whether the button is disabled and cannot be clicked anymore. |
5120
+ | `link` | `string` | yes | The link that should be shared. |
5121
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
4445
5122
 
4446
5123
  ### Types
4447
5124
 
4448
- No additional exported types documented.
5125
+ - `ContextMenuAlignment` -> `enum ContextMenuAlignment {
5126
+ TopLeft,
5127
+ BottomLeft,
5128
+ TopRight,
5129
+ BottomRight,
5130
+ TopCenter,
5131
+ BottomCenter,
5132
+ }`
4449
5133
 
4450
5134
  ### Usage Notes
4451
5135
 
4452
5136
  - Import `SharingButton` directly from `@chayns-components/core` instead of internal source paths.
4453
5137
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
5138
+ - Pay special attention to required props: `link`.
4454
5139
 
4455
5140
  ### Anti Patterns
4456
5141
 
4457
5142
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
5143
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4458
5144
  ## Signature
4459
5145
 
4460
5146
  `Signature` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4477,7 +5163,15 @@ import { Signature } from '@chayns-components/core';
4477
5163
 
4478
5164
  ### Props
4479
5165
 
4480
- No prop documentation available.
5166
+ | name | type | required | description |
5167
+ | --- | --- | --- | --- |
5168
+ | `buttonText` | `string` | yes | The text that should be displayed inside the button. |
5169
+ | `isDisabled` | `boolean \| undefined` | no | Whether the button is disabled. |
5170
+ | `onEdit` | `((signatureUrl: string) => void) \| undefined` | no | Function to be executed when the signature is edited. |
5171
+ | `onRemove` | `(() => void) \| undefined` | no | Function to be executed when the user deletes the signature. |
5172
+ | `onSubscribe` | `((signatureUrl: string) => void) \| undefined` | no | Function to be executed when the user subscribes. |
5173
+ | `onUnsubscribe` | `(() => void) \| undefined` | no | Function to be executed when the user unsubscribes. |
5174
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting for interactive controls. |
4481
5175
 
4482
5176
  ### Types
4483
5177
 
@@ -4487,10 +5181,12 @@ No additional exported types documented.
4487
5181
 
4488
5182
  - Import `Signature` directly from `@chayns-components/core` instead of internal source paths.
4489
5183
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
5184
+ - Pay special attention to required props: `buttonText`.
4490
5185
 
4491
5186
  ### Anti Patterns
4492
5187
 
4493
5188
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
5189
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4494
5190
  ## Skeleton
4495
5191
 
4496
5192
  `Skeleton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4677,7 +5373,22 @@ import { Slider } from '@chayns-components/core';
4677
5373
 
4678
5374
  ### Props
4679
5375
 
4680
- No prop documentation available.
5376
+ | name | type | required | description |
5377
+ | --- | --- | --- | --- |
5378
+ | `interval` | `SliderInterval \| undefined` | no | The current interval of the slider. |
5379
+ | `isDisabled` | `boolean \| undefined` | no | Disables the slider, preventing user interaction. |
5380
+ | `maxEnabledValue` | `number \| undefined` | no | The maximum enabled value of the slider. |
5381
+ | `maxValue` | `number` | yes | The maximum value of the slider. |
5382
+ | `minEnabledValue` | `number \| undefined` | no | The minimum enabled value of the slider. |
5383
+ | `minValue` | `number` | yes | The minimum value of the slider. |
5384
+ | `onChange` | `((value?: number \| undefined, interval?: SliderInterval \| undefined) => void) \| undefined` | no | Callback function that is called when the slider value changes. |
5385
+ | `onSelect` | `((value?: number \| undefined, interval?: SliderInterval \| undefined) => void) \| undefined` | no | Callback function that is called when the slider selection is finalized. |
5386
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
5387
+ | `shouldHighlightSteps` | `boolean \| undefined` | no | Indicates whether the slider should highlight steps. |
5388
+ | `shouldShowThumbLabel` | `boolean \| undefined` | no | Indicates whether the slider should show a label on the thumb. |
5389
+ | `step` | `number \| undefined` | no | The step size for the slider. |
5390
+ | `thumbLabelFormatter` | `((value: number, isMeasuring?: boolean \| undefined) => string) \| undefined` | no | A function to format the thumb label. |
5391
+ | `value` | `number \| undefined` | no | The current value of the slider. |
4681
5392
 
4682
5393
  ### Types
4683
5394
 
@@ -4687,10 +5398,12 @@ No additional exported types documented.
4687
5398
 
4688
5399
  - Import `Slider` directly from `@chayns-components/core` instead of internal source paths.
4689
5400
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
5401
+ - Pay special attention to required props: `maxValue`, `minValue`.
4690
5402
 
4691
5403
  ### Anti Patterns
4692
5404
 
4693
5405
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
5406
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4694
5407
  ## SliderButton
4695
5408
 
4696
5409
  `SliderButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4749,20 +5462,33 @@ import { SliderButton } from '@chayns-components/core';
4749
5462
 
4750
5463
  ### Props
4751
5464
 
4752
- No prop documentation available.
5465
+ | name | type | required | description |
5466
+ | --- | --- | --- | --- |
5467
+ | `isDisabled` | `boolean \| undefined` | no | Whether the button is disabled and cannot be clicked anymore. |
5468
+ | `isRounded` | `boolean \| undefined` | no | No description available. |
5469
+ | `isSecondary` | `boolean \| undefined` | no | Displays the button in the secondary style. |
5470
+ | `items` | `SliderButtonItem[]` | yes | The items that should be displayed in the slider button. |
5471
+ | `onChange` | `((id: string) => void) \| undefined` | no | Function to be executed when a button is selected. The id of the selected button is passed as an argument. |
5472
+ | `selectedButtonId` | `string \| undefined` | no | The id of the button that should be selected. |
5473
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
4753
5474
 
4754
5475
  ### Types
4755
5476
 
4756
- No additional exported types documented.
5477
+ - `SliderButtonItem` -> `interface SliderButtonItem {
5478
+ id: string;
5479
+ text: string;
5480
+ }`
4757
5481
 
4758
5482
  ### Usage Notes
4759
5483
 
4760
5484
  - Import `SliderButton` directly from `@chayns-components/core` instead of internal source paths.
4761
5485
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
5486
+ - Pay special attention to required props: `items`.
4762
5487
 
4763
5488
  ### Anti Patterns
4764
5489
 
4765
5490
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
5491
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4766
5492
  ## SmallWaitCursor
4767
5493
 
4768
5494
  `SmallWaitCursor` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4786,11 +5512,21 @@ import { SmallWaitCursor } from '@chayns-components/core';
4786
5512
 
4787
5513
  ### Props
4788
5514
 
4789
- No prop documentation available.
5515
+ | name | type | required | description |
5516
+ | --- | --- | --- | --- |
5517
+ | `color` | `string \| undefined` | no | No description available. |
5518
+ | `shouldHideBackground` | `boolean \| undefined` | no | No description available. |
5519
+ | `shouldHideWaitCursor` | `boolean \| undefined` | no | No description available. |
5520
+ | `size` | `number \| undefined` | no | No description available. |
5521
+ | `speed` | `SmallWaitCursorSpeed \| undefined` | no | No description available. |
4790
5522
 
4791
5523
  ### Types
4792
5524
 
4793
- No additional exported types documented.
5525
+ - `SmallWaitCursorSpeed` -> `enum SmallWaitCursorSpeed {
5526
+ Slow = 1.5,
5527
+ Medium = 1,
5528
+ Fast = 0.5,
5529
+ }`
4794
5530
 
4795
5531
  ### Usage Notes
4796
5532
 
@@ -4800,6 +5536,7 @@ No additional exported types documented.
4800
5536
  ### Anti Patterns
4801
5537
 
4802
5538
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
5539
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4803
5540
  ## TagInput
4804
5541
 
4805
5542
  `TagInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4849,11 +5586,32 @@ import { TagInput } from '@chayns-components/core';
4849
5586
 
4850
5587
  ### Props
4851
5588
 
4852
- No prop documentation available.
5589
+ | name | type | required | description |
5590
+ | --- | --- | --- | --- |
5591
+ | `leftElement` | `ReactNode` | no | An element that should be displayed on the left side of the input. |
5592
+ | `onAdd` | `((tag: Tag) => boolean \| void \| Promise<boolean>) \| undefined` | no | Function to be executed when a tag is added. |
5593
+ | `onBlur` | `FocusEventHandler \| undefined` | no | Function to be executed when the input is blurred. |
5594
+ | `onChange` | `ChangeEventHandler<HTMLInputElement> \| undefined` | no | Function to be executed when the value of the input is changed. |
5595
+ | `onFocus` | `FocusEventHandler \| undefined` | no | Function to be executed when the input is focused. |
5596
+ | `onRemove` | `((id: string) => void) \| undefined` | no | Function to be executed when a tag is removed. |
5597
+ | `placeholder` | `string \| undefined` | no | The placeholder that should be displayed. |
5598
+ | `shouldAllowMultiple` | `boolean \| undefined` | no | Whether multiple tags should be allowed. |
5599
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
5600
+ | `shouldPreventEnter` | `boolean \| undefined` | no | Whether the enter key should be prevented. |
5601
+ | `size` | `InputSize \| undefined` | no | The size of the input field. |
5602
+ | `tags` | `Tag[] \| undefined` | no | The tags that should be displayed. |
4853
5603
 
4854
5604
  ### Types
4855
5605
 
4856
- No additional exported types documented.
5606
+ - `InputSize` -> `enum InputSize {
5607
+ Small = 'small',
5608
+ Medium = 'medium',
5609
+ }`
5610
+ - `Tag` -> `interface Tag {
5611
+ id: string;
5612
+ text: string;
5613
+ rightElement?: ReactNode;
5614
+ }`
4857
5615
 
4858
5616
  ### Usage Notes
4859
5617
 
@@ -4863,6 +5621,7 @@ No additional exported types documented.
4863
5621
  ### Anti Patterns
4864
5622
 
4865
5623
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
5624
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4866
5625
  ## TextArea
4867
5626
 
4868
5627
  `TextArea` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -4931,7 +5690,21 @@ import { TextArea } from '@chayns-components/core';
4931
5690
 
4932
5691
  ### Props
4933
5692
 
4934
- No prop documentation available.
5693
+ | name | type | required | description |
5694
+ | --- | --- | --- | --- |
5695
+ | `colors` | `TextAreaColors \| undefined` | no | Provide custom colors to the TextArea Component |
5696
+ | `isDisabled` | `boolean \| undefined` | no | Disables the text area so that it cannot be changed. |
5697
+ | `isInvalid` | `boolean \| undefined` | no | If true, the text area is marked as invalid |
5698
+ | `maxHeight` | `MaxHeight<string \| number> \| undefined` | no | The maximum height of the text area. |
5699
+ | `minHeight` | `MinHeight<string \| number> \| undefined` | no | The minimum height of the text area. |
5700
+ | `onBlur` | `FocusEventHandler<HTMLTextAreaElement> \| undefined` | no | Function that is executed when the text area loses focus. |
5701
+ | `onChange` | `ChangeEventHandler<HTMLTextAreaElement> \| undefined` | no | Function that is executed when the text of the text area changes. |
5702
+ | `onFocus` | `FocusEventHandler<HTMLTextAreaElement> \| undefined` | no | Function that is executed when the input field is focused |
5703
+ | `onKeyDown` | `KeyboardEventHandler<HTMLTextAreaElement> \| undefined` | no | Function that is executed when a letter is pressed |
5704
+ | `placeholder` | `string \| ReactElement<any, string \| JSXElementConstructor<any>> \| undefined` | no | Placeholder for the text area field. |
5705
+ | `rightElement` | `ReactElement<any, string \| JSXElementConstructor<any>> \| undefined` | no | An element that should be displayed on the right side of the Input. |
5706
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
5707
+ | `value` | `string \| undefined` | no | Value if the text area should be controlled. |
4935
5708
 
4936
5709
  ### Types
4937
5710
 
@@ -4945,6 +5718,7 @@ No additional exported types documented.
4945
5718
  ### Anti Patterns
4946
5719
 
4947
5720
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
5721
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
4948
5722
  ## Tooltip
4949
5723
 
4950
5724
  `Tooltip` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -5010,20 +5784,41 @@ import { Tooltip } from '@chayns-components/core';
5010
5784
 
5011
5785
  ### Props
5012
5786
 
5013
- No prop documentation available.
5787
+ | name | type | required | description |
5788
+ | --- | --- | --- | --- |
5789
+ | `alignment` | `PopupAlignment \| undefined` | no | The alignment of the tooltip. By default, the tooltip will calculate the best alignment. |
5790
+ | `children` | `ReactNode` | yes | The elements that the tooltip should surround. |
5791
+ | `container` | `Element \| undefined` | no | The element where the content of the `Tooltip` should be rendered via React Portal. |
5792
+ | `isDisabled` | `boolean \| undefined` | no | whether the tooltip should be shown. |
5793
+ | `item` | `ReactNode \| ITooltipItem` | yes | The content that should be displayed. |
5794
+ | `itemWidth` | `Width<string \| number> \| undefined` | no | The width of an item. |
5795
+ | `maxItemWidth` | `number \| undefined` | no | The max width of the Tooltip. |
5796
+ | `shouldHideOnChildrenLeave` | `boolean \| undefined` | no | Whether the tooltip should be hidden after the children is not hovered. |
5797
+ | `shouldUseChildrenWidth` | `boolean \| undefined` | no | Whether the width of the children should be used. |
5798
+ | `shouldUseFullWidth` | `boolean \| undefined` | no | Whether the tooltip children should use the full width. |
5799
+ | `yOffset` | `number \| undefined` | no | The Y offset of the tooltip to the children. |
5014
5800
 
5015
5801
  ### Types
5016
5802
 
5017
- No additional exported types documented.
5803
+ - `PopupAlignment` -> `enum PopupAlignment {
5804
+ TopLeft,
5805
+ TopCenter,
5806
+ TopRight,
5807
+ BottomLeft,
5808
+ BottomCenter,
5809
+ BottomRight,
5810
+ }`
5018
5811
 
5019
5812
  ### Usage Notes
5020
5813
 
5021
5814
  - Import `Tooltip` directly from `@chayns-components/core` instead of internal source paths.
5022
5815
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
5816
+ - Pay special attention to required props: `children`, `item`.
5023
5817
 
5024
5818
  ### Anti Patterns
5025
5819
 
5026
5820
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
5821
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
5027
5822
  ## Truncation
5028
5823
 
5029
5824
  `Truncation` is exported by `@chayns-components/core` and should be imported from the public package entry point.
@@ -5221,20 +6016,35 @@ import { Button, Truncation } from '@chayns-components/core';
5221
6016
 
5222
6017
  ### Props
5223
6018
 
5224
- No prop documentation available.
6019
+ | name | type | required | description |
6020
+ | --- | --- | --- | --- |
6021
+ | `children` | `ReactElement<any, string \| JSXElementConstructor<any>>` | yes | The elements that should be expanding or collapsing. |
6022
+ | `clampPosition` | `ClampPosition \| undefined` | no | The position of the clamp. |
6023
+ | `collapsedHeight` | `number \| undefined` | no | The height of the children element in its collapsed state. |
6024
+ | `isOpen` | `boolean \| undefined` | no | If set to true, the content is exposed. |
6025
+ | `lessLabel` | `string \| undefined` | no | A text that should be displayed if the content is expanded. |
6026
+ | `moreLabel` | `string \| undefined` | no | A text that should be displayed if the content is collapsed. |
6027
+ | `onChange` | `((event: MouseEvent<HTMLAnchorElement, MouseEvent>, isOpen: boolean) => void) \| undefined` | no | Function to be executed when the component is expanding or collapsing. |
6028
+ | `shouldEnableKeyboardHighlighting` | `boolean \| undefined` | no | Enables keyboard-only focus highlighting. |
5225
6029
 
5226
6030
  ### Types
5227
6031
 
5228
- No additional exported types documented.
6032
+ - `ClampPosition` -> `enum ClampPosition {
6033
+ Right,
6034
+ Middle,
6035
+ Left,
6036
+ }`
5229
6037
 
5230
6038
  ### Usage Notes
5231
6039
 
5232
6040
  - Import `Truncation` directly from `@chayns-components/core` instead of internal source paths.
5233
6041
  - Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
6042
+ - Pay special attention to required props: `children`.
5234
6043
 
5235
6044
  ### Anti Patterns
5236
6045
 
5237
6046
  - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
6047
+ - Avoid incomplete prop objects; follow the documented prop types and required fields.
5238
6048
  ## VerificationBadge
5239
6049
 
5240
6050
  `VerificationBadge` is exported by `@chayns-components/core` and should be imported from the public package entry point.