@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/buttontoolbar.json

@@ -0,0 +1,63 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:08.258Z",
+    "source": "https://uikit.developers.rio.cloud/#components/buttonToolbar",
+    "category": "Components",
+    "section": "Interaction",
+    "slug": "components/buttontoolbar",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "8e2877cfada80ac9ca6734333d78b7315f05da3d41b690d1e122de4a32f38dc0"
+  },
+  "title": "ButtonToolbar",
+  "lead": "The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.",
+  "content": [
+    {
+      "heading": "ButtonToolbar",
+      "body": "",
+      "examples": [
+        {
+          "caption": "ButtonToolbar",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-300\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">ButtonToolbar</div><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Button</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Button</button></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">ButtonToolbar centered</div><div class=\"btn-toolbar justify-content-center\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Cancel</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Save changes</button></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">ButtonToolbar right aligned</div><div class=\"btn-toolbar justify-content-end\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Cancel</button><button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Save changes</button></div><div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\"><div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\"></div></div><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">ButtonToolbar space between</div><div class=\"btn-toolbar justify-content-between\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-left\"></span>Previous</button><button type=\"button\" class=\"btn btn-primary btn-icon-right btn-component\" tabindex=\"0\"><span class=\"rioglyph rioglyph-chevron-right\"></span>Next</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\nimport Divider from '@rio-cloud/rio-uikit/Divider';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport StepButton from '@rio-cloud/rio-uikit/StepButton';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\nexport default () => (\n    <div className='max-width-300'>\n        <FormLabel>ButtonToolbar</FormLabel>\n        <ButtonToolbar>\n            <Button>Button</Button>\n            <Button bsStyle='primary'>Button</Button>\n        </ButtonToolbar>\n\n        <Divider />\n\n        <FormLabel>ButtonToolbar centered</FormLabel>\n        <ButtonToolbar alignment='center'>\n            <Button>Cancel</Button>\n            <Button bsStyle='primary'>Save changes</Button>\n        </ButtonToolbar>\n\n        <Divider />\n\n        <FormLabel>ButtonToolbar right aligned</FormLabel>\n        <ButtonToolbar alignment='right'>\n            <Button>Cancel</Button>\n            <Button bsStyle='primary'>Save changes</Button>\n        </ButtonToolbar>\n\n        <Divider />\n\n        <FormLabel>ButtonToolbar space between</FormLabel>\n        <ButtonToolbar alignment='space-between'>\n            <StepButton direction='previous'>Previous</StepButton>\n            <StepButton direction='next' bsStyle='primary'>\n                Next\n            </StepButton>\n        </ButtonToolbar>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-300\">\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">ButtonToolbar</div>\n    <div class=\"btn-toolbar\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Button</button>\n        <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Button</button>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">ButtonToolbar centered</div>\n    <div class=\"btn-toolbar justify-content-center\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Cancel</button>\n        <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Save changes</button>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">ButtonToolbar right aligned</div>\n    <div class=\"btn-toolbar justify-content-end\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Cancel</button>\n        <button type=\"button\" class=\"btn btn-primary btn-component\" tabindex=\"0\">Save changes</button>\n    </div>\n    <div class=\"Divider position-relative width-100pct\" style=\"padding-top: 15px; padding-bottom: 15px;\">\n        <div class=\"divider-line bg-light\" style=\"width: 100%; height: 1px;\">\n        </div>\n    </div>\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">ButtonToolbar space between</div>\n    <div class=\"btn-toolbar justify-content-between\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-chevron-left\">\n            </span>Previous</button>\n        <button type=\"button\" class=\"btn btn-primary btn-icon-right btn-component\" tabindex=\"0\">\n            <span class=\"rioglyph rioglyph-chevron-right\">\n            </span>Next</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "alignment",
+                      "type": "'left' | 'right' | 'center' | 'space-between'",
+                      "default": "",
+                      "description": "Align buttons to e defined side or set them apart."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/calendarstripe.json

@@ -0,0 +1,235 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:50.190Z",
+    "source": "https://uikit.developers.rio.cloud/#components/calendarStripe",
+    "category": "Components",
+    "section": "Misc",
+    "slug": "components/calendarstripe",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "51f69fa3e74a552ad4e5e597f80ea874efd1c727bad3d6058760d3830de80c42"
+  },
+  "title": "CalendarStripe",
+  "lead": "A headless component where you provide a function that renders the UI for every day to be displayed.",
+  "content": [
+    {
+      "heading": "CalendarStripe",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"CalenderStripe display-flex align-items-center overflow-hidden bg-white border rounded\"><div class=\"align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch\"><span class=\"rioglyph rioglyph-chevron-left\"></span></div><div class=\"flex-1-1 overflow-hidden\"><div style=\"opacity: 1; transform: none;\"><div class=\"display-flex space-x--1 user-select-none\"><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest\"><div class=\"display-flex align-items-center justify-content-between\"><div class=\"display-flex flex-column gap-5 text-size-14 line-height-14\"><div>Saturday</div><div class=\"text-size-16 text-medium\">22 November 2025</div></div><div class=\"text-color-primary text-size-16 width-20\"></div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest\"><div class=\"display-flex align-items-center justify-content-between\"><div class=\"display-flex flex-column gap-5 text-size-14 line-height-14\"><div>Sunday</div><div class=\"text-size-16 text-medium\">23 November 2025</div></div><div class=\"text-color-primary text-size-16 width-20\"></div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer \"><div class=\"display-flex align-items-center justify-content-between\"><div class=\"display-flex flex-column gap-5 text-size-14 line-height-14\"><div>Monday</div><div class=\"text-size-16 text-medium\">24 November 2025</div></div><div class=\"text-color-primary text-size-16 width-20\"></div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer \"><div class=\"display-flex align-items-center justify-content-between\"><div class=\"display-flex flex-column gap-5 text-size-14 line-height-14\"><div>Tuesday</div><div class=\"text-size-16 text-medium\">25 November 2025</div></div><div class=\"text-color-primary text-size-16 width-20\"></div></div></div></div></div></div></div><div class=\"align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch\"><span class=\"rioglyph rioglyph-chevron-right\"></span></div></div><div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport { FormattedDate } from 'react-intl';\n\nimport CalendarStripe from '@rio-cloud/rio-uikit/CalendarStripe';\n\nexport default () => {\n    const [selectedDates, setSelectedDates] = useState<string[]>([]);\n\n    const handleSelect = (readableDate: string) => {\n        const dateSet = new Set(selectedDates);\n        if (dateSet.has(readableDate)) {\n            dateSet.delete(readableDate);\n        } else {\n            dateSet.add(readableDate);\n        }\n        setSelectedDates([...dateSet]);\n    };\n\n    const renderDay = (date: Date) => (\n        <DayComponent date={date} onSelect={handleSelect} selectedDates={selectedDates} />\n    );\n\n    return (\n        <div>\n            <CalendarStripe renderDay={renderDay} />\n            <div>\n                {selectedDates.map(selectedDate => (\n                    <div key={selectedDate}>{selectedDate}</div>\n                ))}\n            </div>\n        </div>\n    );\n};\n\ntype DayComponentProps = {\n    date: Date;\n    onSelect: (dateString: string) => void;\n    selectedDates: string[];\n};\n\nconst DayComponent = ({ date, onSelect, selectedDates }: DayComponentProps) => {\n    const [readableDate] = date.toISOString().split('T');\n\n    const isActive = selectedDates.includes(readableDate);\n    const isSaturday = date.getDay() === 6;\n    const isSunday = date.getDay() === 0;\n    const isWeekend = isSaturday || isSunday;\n\n    const dayWrapperClasses = [\n        'padding-15 border border-top-none border-bottom-none',\n        'hover-text-color-darkest hover-bg-highlight-decent cursor-pointer',\n        isWeekend ? 'bg-lightest' : '',\n    ].join(' ');\n\n    return (\n        <div className={dayWrapperClasses} onClick={() => onSelect(readableDate)}>\n            <div className='display-flex align-items-center justify-content-between'>\n                <div className='display-flex flex-column gap-5 text-size-14 line-height-14'>\n                    <div>\n                        <FormattedDate value={date} weekday='long' />\n                    </div>\n                    <div className='text-size-16 text-medium'>\n                        <FormattedDate value={date} year='numeric' month='long' day='numeric' />\n                    </div>\n                </div>\n                <div className='text-color-primary text-size-16 width-20'>\n                    {isActive && <span className='rioglyph rioglyph-ok-sign' />}\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"CalenderStripe display-flex align-items-center overflow-hidden bg-white border rounded\">\n        <div class=\"align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch\">\n            <span class=\"rioglyph rioglyph-chevron-left\">\n            </span>\n        </div>\n        <div class=\"flex-1-1 overflow-hidden\">\n            <div style=\"opacity: 1; transform: none;\">\n                <div class=\"display-flex space-x--1 user-select-none\">\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest\">\n                            <div class=\"display-flex align-items-center justify-content-between\">\n                                <div class=\"display-flex flex-column gap-5 text-size-14 line-height-14\">\n                                    <div>Saturday</div>\n                                    <div class=\"text-size-16 text-medium\">22 November 2025</div>\n                                </div>\n                                <div class=\"text-color-primary text-size-16 width-20\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer bg-lightest\">\n                            <div class=\"display-flex align-items-center justify-content-between\">\n                                <div class=\"display-flex flex-column gap-5 text-size-14 line-height-14\">\n                                    <div>Sunday</div>\n                                    <div class=\"text-size-16 text-medium\">23 November 2025</div>\n                                </div>\n                                <div class=\"text-color-primary text-size-16 width-20\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer \">\n                            <div class=\"display-flex align-items-center justify-content-between\">\n                                <div class=\"display-flex flex-column gap-5 text-size-14 line-height-14\">\n                                    <div>Monday</div>\n                                    <div class=\"text-size-16 text-medium\">24 November 2025</div>\n                                </div>\n                                <div class=\"text-color-primary text-size-16 width-20\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"padding-15 border border-top-none border-bottom-none hover-text-color-darkest hover-bg-highlight-decent cursor-pointer \">\n                            <div class=\"display-flex align-items-center justify-content-between\">\n                                <div class=\"display-flex flex-column gap-5 text-size-14 line-height-14\">\n                                    <div>Tuesday</div>\n                                    <div class=\"text-size-16 text-medium\">25 November 2025</div>\n                                </div>\n                                <div class=\"text-color-primary text-size-16 width-20\">\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch\">\n            <span class=\"rioglyph rioglyph-chevron-right\">\n            </span>\n        </div>\n    </div>\n    <div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "minDayWith",
+                      "type": "Number",
+                      "default": "200",
+                      "description": "The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width."
+                    },
+                    {
+                      "name": "minDays",
+                      "type": "Number",
+                      "default": "1",
+                      "description": "The minimum amount of days that should be shown per page."
+                    },
+                    {
+                      "name": "maxDays",
+                      "type": "Number",
+                      "default": "7",
+                      "description": "The maximum amount of days that should be shown per page."
+                    },
+                    {
+                      "name": "skipWeekends",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the days for the weekends are included or not."
+                    },
+                    {
+                      "name": "startDate",
+                      "type": "Date",
+                      "default": "new Date()",
+                      "description": "The date of the first day that are rendered."
+                    },
+                    {
+                      "name": "renderDay",
+                      "type": "Function",
+                      "default": "",
+                      "description": "A function that renders each individual day to be displayed."
+                    },
+                    {
+                      "name": "render",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Please use \"renderDay\" instead."
+                    },
+                    {
+                      "name": "onPreviousClick",
+                      "type": "(newStartDate: Date) => void",
+                      "default": "",
+                      "description": "Callback function for when the previous button is clicked."
+                    },
+                    {
+                      "name": "onNextClick",
+                      "type": "(newStartDate: Date) => void",
+                      "default": "",
+                      "description": "Callback function for when the next button is clicked."
+                    },
+                    {
+                      "name": "buttonClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the navigation buttons."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the calendar element."
+                    },
+                    {
+                      "name": "daysWrapperClassNames",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the days wrapper element."
+                    },
+                    {
+                      "name": "dayWrapperClassNames",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the day wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"min-height-250\"><div class=\"CalenderStripe display-flex align-items-center overflow-hidden bg-white border rounded position-relative z-index-1 shadow-default\"><div class=\"align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch\"><span class=\"rioglyph rioglyph-chevron-left\"></span></div><div class=\"flex-1-1 overflow-hidden\"><div style=\"opacity: 1; transform: none;\"><div class=\"display-flex space-x--1 user-select-none\"><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest\"><div class=\"display-flex flex-column gap-3 text-center\"><div class=\"text-size-12 line-height-12\">Nov</div><div class=\"text-size-h3 line-height-h3\">22</div><div class=\"text-size-12 line-height-12\">2025</div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest\"><div class=\"display-flex flex-column gap-3 text-center\"><div class=\"text-size-12 line-height-12\">Nov</div><div class=\"text-size-h3 line-height-h3\">23</div><div class=\"text-size-12 line-height-12\">2025</div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\"><div class=\"display-flex flex-column gap-3 text-center\"><div class=\"text-size-12 line-height-12\">Nov</div><div class=\"text-size-h3 line-height-h3\">24</div><div class=\"text-size-12 line-height-12\">2025</div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\"><div class=\"display-flex flex-column gap-3 text-center\"><div class=\"text-size-12 line-height-12\">Nov</div><div class=\"text-size-h3 line-height-h3\">25</div><div class=\"text-size-12 line-height-12\">2025</div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\"><div class=\"display-flex flex-column gap-3 text-center\"><div class=\"text-size-12 line-height-12\">Nov</div><div class=\"text-size-h3 line-height-h3\">26</div><div class=\"text-size-12 line-height-12\">2025</div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\"><div class=\"display-flex flex-column gap-3 text-center\"><div class=\"text-size-12 line-height-12\">Nov</div><div class=\"text-size-h3 line-height-h3\">27</div><div class=\"text-size-12 line-height-12\">2025</div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\"><div class=\"display-flex flex-column gap-3 text-center\"><div class=\"text-size-12 line-height-12\">Nov</div><div class=\"text-size-h3 line-height-h3\">28</div><div class=\"text-size-12 line-height-12\">2025</div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest\"><div class=\"display-flex flex-column gap-3 text-center\"><div class=\"text-size-12 line-height-12\">Nov</div><div class=\"text-size-h3 line-height-h3\">29</div><div class=\"text-size-12 line-height-12\">2025</div></div></div></div><div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\"><div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest\"><div class=\"display-flex flex-column gap-3 text-center\"><div class=\"text-size-12 line-height-12\">Nov</div><div class=\"text-size-h3 line-height-h3\">30</div><div class=\"text-size-12 line-height-12\">2025</div></div></div></div></div></div></div><div class=\"align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch\"><span class=\"rioglyph rioglyph-chevron-right\"></span></div></div><div class=\"btn-toolbar margin-top-15\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set to January</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle Weekends</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport { FormattedDate } from 'react-intl';\n\nimport CalendarStripe from '@rio-cloud/rio-uikit/CalendarStripe';\nimport Fade from '@rio-cloud/rio-uikit/Fade';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nexport default () => {\n    const [selectedReadableDate, setSelectedReadableDate] = useState<string | undefined>();\n    const [selectedDate, setSelectedDate] = useState<Date>();\n    const [startDate, setStartDate] = useState<Date>();\n    const [hideWeekends, setHideWeekends] = useState(false);\n\n    const handleSelect = (readableDate: string, date: Date) => {\n        setSelectedReadableDate(value => {\n            if (value === readableDate) {\n                setSelectedDate(undefined);\n                return;\n            }\n\n            setSelectedDate(date);\n            return readableDate;\n        });\n    };\n\n    return (\n        <div className='min-height-250'>\n            <CalendarStripe\n                minDayWith={80}\n                minDays={5}\n                maxDays={31}\n                skipWeekends={hideWeekends}\n                startDate={startDate}\n                onNextClick={newStartDate => setStartDate(newStartDate)}\n                onPreviousClick={newStartDate => setStartDate(newStartDate)}\n                renderDay={date => (\n                    <DayContent date={date} onSelect={handleSelect} selectedDate={selectedReadableDate} />\n                )}\n                className='position-relative z-index-1 shadow-default'\n            />\n            <Fade initial animationStyle={Fade.FROM_TOP} show={!!selectedReadableDate}>\n                <div\n                    className={\n                        'bg-white border border-top-none rounded-bottom ' +\n                        'padding-x-20 padding-y-15 shadow-default margin-top--2'\n                    }\n                >\n                    <div className='text-medium'>\n                        <FormattedDate value={selectedDate} weekday='long' />\n                    </div>\n                    <FormattedDate value={selectedDate} year='numeric' month='long' day='numeric' />\n                    <div className='margin-top-20 text-medium'>Your Appointments:</div>\n                    <hr className='margin-top-5' />\n                    <div className='text-italic'>No Appointments today</div>\n                </div>\n            </Fade>\n            <div className='btn-toolbar margin-top-15'>\n                <Button onClick={() => setStartDate(new Date(2023, 1, 1))}>Set to January</Button>\n                <Button onClick={() => setHideWeekends(value => !value)}>Toggle Weekends</Button>\n            </div>\n        </div>\n    );\n};\n\ntype DayContentProps = {\n    date: Date;\n    onSelect: (dateString: string, date: Date) => void;\n    selectedDate: string | undefined;\n};\n\nconst DayContent = ({ date, onSelect, selectedDate }: DayContentProps) => {\n    const [readableDate] = date.toISOString().split('T');\n\n    const isActive = selectedDate === readableDate;\n    const isSaturday = date.getDay() === 6;\n    const isSunday = date.getDay() === 0;\n    const isWeekend = isSaturday || isSunday;\n\n    const dayWrapperClasses = [\n        'cursor-pointer border border-top-none border-bottom-none',\n        'display-grid place-items-center aspect-ratio-1',\n        isWeekend ? 'bg-lightest text-color-gray pointer-events-none' : '',\n        isActive ? 'bg-primary' : 'hover-bg-highlight-decent hover-text-color-darkest',\n    ].join(' ');\n\n    return (\n        <div className={dayWrapperClasses} onClick={() => onSelect(readableDate, date)}>\n            <div className='display-flex flex-column gap-3 text-center'>\n                <div className='text-size-12 line-height-12'>\n                    <FormattedDate value={date} month='short' />\n                </div>\n                <div className='text-size-h3 line-height-h3'>\n                    <FormattedDate value={date} day='numeric' />\n                </div>\n                <div className='text-size-12 line-height-12'>\n                    <FormattedDate value={date} year='numeric' />\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"min-height-250\">\n    <div class=\"CalenderStripe display-flex align-items-center overflow-hidden bg-white border rounded position-relative z-index-1 shadow-default\">\n        <div class=\"align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch\">\n            <span class=\"rioglyph rioglyph-chevron-left\">\n            </span>\n        </div>\n        <div class=\"flex-1-1 overflow-hidden\">\n            <div style=\"opacity: 1; transform: none;\">\n                <div class=\"display-flex space-x--1 user-select-none\">\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Nov</div>\n                                <div class=\"text-size-h3 line-height-h3\">22</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Nov</div>\n                                <div class=\"text-size-h3 line-height-h3\">23</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Nov</div>\n                                <div class=\"text-size-h3 line-height-h3\">24</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Nov</div>\n                                <div class=\"text-size-h3 line-height-h3\">25</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Nov</div>\n                                <div class=\"text-size-h3 line-height-h3\">26</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Nov</div>\n                                <div class=\"text-size-h3 line-height-h3\">27</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Nov</div>\n                                <div class=\"text-size-h3 line-height-h3\">28</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Nov</div>\n                                <div class=\"text-size-h3 line-height-h3\">29</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1 bg-lightest text-color-gray pointer-events-none hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Nov</div>\n                                <div class=\"text-size-h3 line-height-h3\">30</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"ColumnItem flex-1-1-0 space-x--1 user-select-none\">\n                        <div class=\"cursor-pointer border border-top-none border-bottom-none display-grid place-items-center aspect-ratio-1  hover-bg-highlight-decent hover-text-color-darkest\">\n                            <div class=\"display-flex flex-column gap-3 text-center\">\n                                <div class=\"text-size-12 line-height-12\">Dec</div>\n                                <div class=\"text-size-h3 line-height-h3\">1</div>\n                                <div class=\"text-size-12 line-height-12\">2025</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"align-items-center display-flex hover-scale-105 hover-text-color-darkest padding-10 cursor-pointer text-color-darker text-size-12 align-self-stretch\">\n            <span class=\"rioglyph rioglyph-chevron-right\">\n            </span>\n        </div>\n    </div>\n    <div class=\"btn-toolbar margin-top-15\">\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set to January</button>\n        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle Weekends</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "minDayWith",
+                      "type": "Number",
+                      "default": "200",
+                      "description": "The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width."
+                    },
+                    {
+                      "name": "minDays",
+                      "type": "Number",
+                      "default": "1",
+                      "description": "The minimum amount of days that should be shown per page."
+                    },
+                    {
+                      "name": "maxDays",
+                      "type": "Number",
+                      "default": "7",
+                      "description": "The maximum amount of days that should be shown per page."
+                    },
+                    {
+                      "name": "skipWeekends",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the days for the weekends are included or not."
+                    },
+                    {
+                      "name": "startDate",
+                      "type": "Date",
+                      "default": "new Date()",
+                      "description": "The date of the first day that are rendered."
+                    },
+                    {
+                      "name": "renderDay",
+                      "type": "Function",
+                      "default": "",
+                      "description": "A function that renders each individual day to be displayed."
+                    },
+                    {
+                      "name": "render",
+                      "type": "Node",
+                      "default": "",
+                      "description": "Please use \"renderDay\" instead."
+                    },
+                    {
+                      "name": "onPreviousClick",
+                      "type": "(newStartDate: Date) => void",
+                      "default": "",
+                      "description": "Callback function for when the previous button is clicked."
+                    },
+                    {
+                      "name": "onNextClick",
+                      "type": "(newStartDate: Date) => void",
+                      "default": "",
+                      "description": "Callback function for when the next button is clicked."
+                    },
+                    {
+                      "name": "buttonClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the navigation buttons."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the calendar element."
+                    },
+                    {
+                      "name": "daysWrapperClassNames",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the days wrapper element."
+                    },
+                    {
+                      "name": "dayWrapperClassNames",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes set to the day wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Components/components/card.json

@@ -0,0 +1,69 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:33.638Z",
+    "source": "https://uikit.developers.rio.cloud/#components/card",
+    "category": "Components",
+    "section": "Content",
+    "slug": "components/card",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "e8dce6b976855de9a05f81617c2aba238ee37ba89cc308697bf5a9fd32ac4402"
+  },
+  "title": "Card",
+  "lead": "The Card is a utility component designed to simplify usage of default card styling.",
+  "content": [
+    {
+      "heading": "Card",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600 padding-20\"><div class=\"bg-white rounded border shadow-default padding-15\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div><div class=\"bg-white rounded border shadow-default padding-15 margin-top-50\"><div class=\"display-flex gap-10\"><div class=\"width-100pct\"><div class=\"text-size-20 text-color-darkest text-medium\">Lorem ipsum</div><div class=\"text-color-dark\">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div></div><div class=\"flex-1-1\"><span class=\"label label-muted label-filled\"><span class=\"text-capitalize\">Lorem</span></span></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Card from '@rio-cloud/rio-uikit/Card';\n\nimport { dummyText } from '../../../utils/data';\n\nexport default () => (\n    <div className='max-width-600 padding-20'>\n        <Card>{dummyText}</Card>\n\n        <Card className='margin-top-50'>\n            <div className='display-flex gap-10'>\n                <div className='width-100pct'>\n                    <div className='text-size-20 text-color-darkest text-medium'>Lorem ipsum</div>\n                    <div className='text-color-dark'>\n                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod\n                    </div>\n                </div>\n                <div className='flex-1-1'>\n                    <span className='label label-muted label-filled'>\n                        <span className='text-capitalize'>Lorem</span>\n                    </span>\n                </div>\n            </div>\n        </Card>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600 padding-20\">\n    <div class=\"bg-white rounded border shadow-default padding-15\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n    <div class=\"bg-white rounded border shadow-default padding-15 margin-top-50\">\n        <div class=\"display-flex gap-10\">\n            <div class=\"width-100pct\">\n                <div class=\"text-size-20 text-color-darkest text-medium\">Lorem ipsum</div>\n                <div class=\"text-color-dark\">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</div>\n            </div>\n            <div class=\"flex-1-1\">\n                <span class=\"label label-muted label-filled\">\n                    <span class=\"text-capitalize\">Lorem</span>\n                </span>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "shadow",
+                      "type": "'subtle' | 'muted' | 'accent' | 'default' | 'smooth' | 'muted-down' | 'default-down' | 'none'",
+                      "default": "default",
+                      "description": "The shadow class."
+                    },
+                    {
+                      "name": "shadow",
+                      "type": "0 | 5 | 10 | 15 | 20 | 25 | 50",
+                      "default": "15",
+                      "description": "The card padding."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes to be set on the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}