At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. } ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `ContentCard` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## ContextMenu `ContextMenu` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { ContextMenu } from '@chayns-components/core'; ``` ### Examples #### General ```tsx alert('Option "Umbenennen" wurde geklickt...'), text: 'Umbenennen', }, { icons: ['fa fa-eye'], key: 'show', onClick: () => alert('Option "Einblenden" wurde geklickt...'), text: 'Einblenden', }, { icons: ['fa fa-trash'], key: 'delete', onClick: () => alert('Option "Löschen" wurde geklickt...'), text: 'Löschen', }, ]} /> ``` #### With Spacer ```tsx alert('Option "Umbenennen" wurde geklickt...'), text: 'Umbenennen', }, { icons: ['fa fa-eye'], key: 'show', onClick: () => alert('Option "Einblenden" wurde geklickt...'), text: 'Einblenden', shouldShowSpacer: true, }, { icons: ['fa fa-trash'], key: 'delete', onClick: () => alert('Option "Löschen" wurde geklickt...'), text: 'Löschen', }, ]} /> ``` #### Without Icons ```tsx alert('Option "Umbenennen" wurde geklickt...'), text: 'Umbenennen', }, { key: 'show', onClick: () => alert('Option "Einblenden" wurde geklickt...'), text: 'Einblenden', }, { key: 'delete', onClick: () => alert('Option "Löschen" wurde geklickt...'), text: 'Löschen', }, ]} /> ``` #### With YOffset ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `ContextMenu` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## ExpandableContent `ExpandableContent` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { ExpandableContent } from '@chayns-components/core'; ``` ### Examples #### General ```tsx { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nisi vel nulla tincidunt facilisis. Nullam fringilla eu felis at sollicitudin. Aliquam et urna augue. Praesent rhoncus hendrerit molestie. Vestibulum non faucibus mauris. In bibendum ultricies pulvinar. Duis in nisi lacinia, maximus dolor sit amet, pharetra neque. Quisque vulputate semper eleifend. Quisque imperdiet dolor faucibus, lobortis quam et, consectetur dui. Nunc at aliquam odio, vel luctus magna. Cras at ante at nunc volutpat aliquam. Integer ex nunc, pellentesque ac pharetra eu, porttitor eu mi.\n' + '\n' + 'Vestibulum mollis sagittis maximus. Nulla facilisi. Curabitur accumsan ipsum laoreet ipsum rutrum, id vehicula lectus cursus. Donec sit amet eros sed quam suscipit sodales. Phasellus faucibus fermentum sagittis. Vestibulum non orci quis nisl aliquet pharetra. Donec massa dui, consectetur sit amet metus ac, mattis semper nulla. Suspendisse ut quam a enim egestas gravida at sed sapien. Duis id mi id nisl pellentesque ornare quis non nibh. Fusce pellentesque, leo interdum rutrum maximus, libero purus auctor velit, at sodales nulla elit ut est. Nam tellus lacus, tristique et nulla sed, mollis vulputate mi. Donec tempor non magna id ornare. Integer facilisis lacus urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc nec leo in nulla faucibus facilisis at nec dolor.' } ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `ExpandableContent` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## FileInput `FileInput` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { FileInput } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` #### With Image Selection ```tsx ``` #### With Files ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `FileInput` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## FileList `FileList` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { FileList } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `FileList` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## FileSelect `FileSelect` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { FileSelect } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `FileSelect` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## Filter `Filter` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { Filter } from '@chayns-components/core'; ``` ### Examples #### General ```tsx {}, }} checkboxConfig={{ children: 'Checkbox Label', }} filterButtonConfig={{ items: [ { id: '1', text: 'Essen', color: 'red', icons: ['fa fa-burger'], count: 5, }, { id: '2', text: 'Getränke', color: 'green', icons: ['fa fa-bottle-water'], count: 74, }, { id: '3', text: 'Nachtisch', color: 'blue', icons: ['fa fa-pie'], isDisabled: true, count: 32, }, { id: '4', text: 'Snacks', color: 'purple', icons: ['fa fa-cookie'], count: 45, }, ], size: FilterButtonSize.Small, }} sortConfig={{ items: [ { text: 'alphanumerisch', id: 'alphanumerisch' }, { text: 'zuletzt hinzugefügt', id: 'latest' }, ], selectedItem: { text: 'alphanumerisch', id: 'alphanumerisch' }, onSortChange: () => {}, }} comboboxConfig={{ label: 'Kategorie wählen', placeholder: 'Keine Kategorie gewählt', lists: [ { list: [ { text: 'Alle Kategorien', value: 'all', icons: ['fa fa-list'] }, { text: 'Lebensmittel', value: 'food', icons: ['fa fa-burger'], subtext: 'Frisch & regional', }, { text: 'Getränke', value: 'drinks', icons: ['fa fa-bottle-water'] }, { text: 'Haushalt', value: 'household', icons: ['fa fa-soap'] }, { text: 'Elektronik', value: 'electronics', icons: ['fa fa-bolt'], subtext: 'Smartphones, TV & mehr', }, { text: 'Bekleidung', value: 'clothing', icons: ['fa fa-tshirt'] }, ], }, ], }} /> ``` #### Only Search ```tsx {}, }} /> ``` #### Only Filter Buttons ```tsx ``` #### Only Sort ```tsx {}, }} /> ``` #### Only Checkbox ```tsx ``` #### Only Combobox ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `Filter` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## FilterButtons `FilterButtons` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { FilterButtons } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` #### Filter Button With Small Buttons ```tsx ``` #### Filter Button With Selected Ids ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `FilterButtons` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## GridImage `GridImage` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { GridImage } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `GridImage` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## GroupedImage `GroupedImage` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { GroupedImage } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` #### Larger Dimensions ```tsx ``` #### With Corner Image ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `GroupedImage` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## HighlightSlider `HighlightSlider` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { HighlightSlider } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `HighlightSlider` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## Icon `Icon` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { Icon } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` #### Stacked Icon ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `Icon` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## Input `Input` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { Input } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` #### With Right Element ```tsx

} /> ``` #### With Dynamic Placeholders ```tsx } /> ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `Input` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## List `List` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { List, ListItem } from '@chayns-components/core'; ``` ### Examples #### General ```tsx { [ , , , , ] } ``` #### List Items With Image ```tsx { [ , , , , ] } ``` #### List Items With Grid Image ```tsx { [ , , ] } ``` #### List Items With Right Elements ```tsx { [ , }} title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr consetetur" subtitle="Lorem ipsum dolor sit amet, consetetur sadipscing elitr consetetur amet dolor" />, } title="No sea takimata sanctus est Lorem ipsum dolor sit amet" />, , }} subtitle="Dolor sit ipsum amet" title="gubergren, no sea takimata" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , } subtitle="Dolor sit ipsum amet" title="gubergren, no sea takimata" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , - 13,54% ), bottom: 'Bottom', center: , }} title="gubergren, no sea takimata" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , , , , ] } ``` #### List Items With Separator ```tsx { [ , , , , , , ] } ``` #### List Items With Button As Right Elements ```tsx { [ {}}> Hinzufügen ), }} /> {}}> Hinzufügen ), }} /> Hinzugefügt }} /> , , ] } ``` #### List Items With Hover Item ```tsx { [ } images={[locationImages[0]]} subtitle="Sadipscing elitr dolor sit" title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr" />, } images={[locationImages[1]]} subtitle="Dolor sit ipsum amet" title="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet" />, ] } ``` #### List Items With Icon ```tsx { [ , , , , ] } ``` #### Expandable List Items ```tsx { [ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. , ] } ``` #### Mixed List Items ```tsx { [ , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. , , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , ] } ``` #### List Items With Element As Subtitle ```tsx { [ } title="Chicken Burger"> , } title="BamBoo! Prime Steak"> , ] } ``` #### List Item With Title Element ```tsx { [ } />, } />, } />, } />, ] } ``` #### List Item With Greyed Title ```tsx { [ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. , ] } ``` #### List Item With Hidden Bottom Lines ```tsx { [ , , , , ] } ``` #### Intercom List Items ```tsx { [ , , , , ] } ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `List` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## MentionFinder `MentionFinder` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { MentionFinder } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` #### Top Aligned With Drag ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `MentionFinder` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## MultiActionButton `MultiActionButton` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { MultiActionButton } from '@chayns-components/core'; ``` ### Examples #### Default ```tsx ``` #### Width Override ```tsx ``` #### Full Width ```tsx ``` #### Long Labels ```tsx ``` #### Custom Background ```tsx ``` #### Action Specific Backgrounds ```tsx ``` #### Only Primary ```tsx ``` #### Context Menu Secondary Action ```tsx console.log('Umbenennen'), text: 'Umbenennen', }, { icons: ['fa fa-eye'], key: 'show', onClick: () => console.log('Einblenden'), text: 'Einblenden', }, { icons: ['fa fa-trash'], key: 'delete', onClick: () => console.log('Löschen'), text: 'Löschen', }, ]} /> ``` #### Auto Collapse Responsive ```tsx ``` #### Auto Collapse Responsive Full Width ```tsx ``` #### Pulsing Secondary ```tsx ``` #### Pulsing Secondary Custom Colors ```tsx ``` #### Large Size ```tsx ``` #### Disabled Action With Reason ```tsx ``` #### React Element Icons ```tsx ), label: 'Chatten', }} secondaryAction={{ icon: ( ), label: 'Mitschnitt starten', }} /> ``` #### Recording Flow ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `MultiActionButton` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## NumberInput `NumberInput` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { NumberInput } from '@chayns-components/core'; ``` ### Examples #### General ```tsx ``` ### Props No prop documentation available. ### Types No additional exported types documented. ### Usage Notes - Import `NumberInput` directly from `@chayns-components/core` instead of internal source paths. - Start with one of the documented Storybook examples and adapt the props incrementally for your use case. ### Anti Patterns - Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export. ## Popup `Popup` is exported by `@chayns-components/core` and should be imported from the public package entry point. ### Import ```ts import { Popup } from '@chayns-components/core'; ``` ### Examples #### General ```tsx

Popup

Das ist ein Popup!

} /> ``` #### Long Content ```tsx

A - Apfel

B - Baum

C - Computer

D - Dach

E - Elefant

F - Fahrrad

G - Gitarre

H - Haus

I - Insel

J - Jaguar

K - Känguru

L - Lampe

M - Mond

N - Nase

O - Orange

P - Papier

Q - Quelle

R - Rakete

S - Sonne

T - Tiger

U - Uhr

V - Vogel

W - Wasser

X - Xylophon

Y - Yacht

Z - Zitrone

Popup

Teile uns dein Lieblingsessen mit

Dein Essen ist nicht dabei? Kein Problem, schreibe es uns einfach.