@@ -9545,7 +9545,7 @@ --mbx-review-icon-color-dark
- |
+ |
|
diff --git a/playground/public/docs/search/search_index.json b/playground/public/docs/search/search_index.json
index 40400ad9..5fa6e7dc 100644
--- a/playground/public/docs/search/search_index.json
+++ b/playground/public/docs/search/search_index.json
@@ -1 +1 @@
-{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"MoBrix-ui","text":"Smart React components for every app, easily customizable for every purpose.
"},{"location":"#note-for-older-mobrix-ui-version","title":"Note for older MoBrix-ui version","text":"If you still want to use older MoBrix-ui versions, read the old versions guide .
(Upgrade it to v4.X.X if possible!)
"},{"location":"#mobrix-ui-philosophy","title":"MoBrix-ui philosophy","text":"This library is built upon few (but important) concepts:
- Small library size, to not impact on final app bundle size
- Few dependencies, to not introduce a bunch of additional packages (that could also introduce bugs or version conflicts with pre-existent packages)
- Let the user customize every part as desired, but with default values set otherwise, to make every component ready to be used without so many parameters
- Every component should be integrable into every react app, so their behaviour must be customizable too (with callbacks, for example)
The same concepts are also the base of another project I maintain, MoBrix-engine (check it out, it is also the base of MoBrix-ui guide page !)
"},{"location":"#components-building-process","title":"Components building process","text":"This library use a standardized process to build every component. As result, every component has a shared initial logic, shared CSS styles and shared properties. Some properties are shared between all components, for a smoother dev experience. In addition, this makes every single component easily re-usable.
"},{"location":"#shared-properties","title":"Shared Properties","text":"MoBrix-ui components shares some properties:
Parameter Type Default key string / className string / dark boolean false hide boolean false id string / shadow boolean true style CSSProperties / unstyled boolean false animated boolean true animation fade-in | slide-in-left | slide-in-right | slide-in-top | shake / background boolean true hover boolean true active boolean false disabled boolean false onKeyDown (keyEvent : any) => void / onFocus () => void / onFocusLost () => void / props Record / a11y boolean true a11yLabel string / tabIndex number | string / Check out the complete components list for more details
"},{"location":"#css-variables","title":"CSS variables","text":"MoBrix-ui is globally configurable, with CSS variables. By defining some specific custom CSS variables into your app css, you'll change the UI of all components:
Css variable Fallback Default --mbx-background / / --mbx-background-light --mbx-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-background-dark --mbx-background linear-gradient(to right, #2d3748, #1d232e) --mbx-background-color / / --mbx-background-color-light --mbx-background-color #e9e9e9 --mbx-background-color-dark --mbx-background-color #1d232e --mbx-background-color-hover / / --mbx-background-color-hover-light --mbx-background-color-hover #dfeaf8 --mbx-background-color-hover-dark --mbx-background-color-hover #3a3552 --mbx-background-hover / / --mbx-background-hover-light --mbx-background-hover linear-gradient(to right, #ececec, #e1e1e6, #dbdddd) --mbx-background-hover-dark --mbx-background-hover linear-gradient(to right, #364257, #252d3b) --mbx-text-color / / --mbx-text-color-light --mbx-text-color #1b1b1b --mbx-text-color-dark --mbx-text-color white --mbx-text-color-hover / / --mbx-text-color-hover-light --mbx-text-color-hover #413c5c --mbx-text-color-hover-dark --mbx-text-color-hover #dfeaf8 --mbx-shadow / / --mbx-shadow-light --mbx-shadow #464545 --mbx-shadow-dark --mbx-shadow #464545 --mbx-focus-color / / --mbx-focus-color-light --mbx-focus-color #7785ff --mbx-focus-color-dark --mbx-focus-color #fb7a10 Check out the complete components list for more details
"},{"location":"#reactive-components","title":"Reactive components","text":"Some components are designed with a specific structure, to sync their internal state with an external input value. This kind of component handle internally their actual value, using the value parameter as starting point. This let the component to be driven in 2 different way:
-
Internally, Its internal value, when using the component without changing its value parameter from code
-
External, passing the value parameter
So, we have 2 scenarios:
-
If you change the component value using the component (without changing the value parameter), it will be updated internally.
-
If you change the passed value parameter, the component will sync its value with the given one.
A clear example is the Input component. When changing the value parameter, the component will sync its actual value.
"},{"location":"#getting-started","title":"Getting started","text":""},{"location":"#installation","title":"Installation","text":"If you want to use this library inside your project, just install it:
\nnpm i mobrix-ui\n\n
"},{"location":"#usage","title":"Usage","text":"After installation, you can use every MoBrix-ui component in your app. Run this example to see them in action:
import { Card, Container, Link } from \"mobrix-ui\";\nimport { render } from \"react-dom\";\n\nrender(\n <Container animated>\n <Card\n dark={true}\n body={<p>This page is entirely made with MoBrix-ui components !</p>}\n footer={\n <Link to=\"https://cianciarusocataldo.github.io/mobrix-ui\">\n MoBrix-ui page\n </Link>\n }\n />\n </Container>,\n document.getElementById(\"root\"),\n);\n
If you want to customize the UI globally, initialize the dedicated CSS variables:
* {\n --mbx-ui-text-color: #f5f5f5;\n --mbx-ui-background-color: #1b1b1b;\n}\n
"},{"location":"#tests","title":"Tests","text":"Unit tests for every component are located inside tests folder. The test script is executed with pre-defined test command:
npm run test\n
"},{"location":"#authors","title":"Authors","text":""},{"location":"Changelog/","title":"MoBrix-ui changelog","text":""},{"location":"Changelog/#versions","title":"Versions","text":" - 4.0.0
- 3.14.0
- 3.13.0
- 3.12.0
- 3.11.0
- 3.10.0
- 3.9.0
- 3.8.0
- 3.7.0
- 3.6.0
- 3.5.0
- 3.4.0
- 3.3.0
- 3.2.0
- 3.1.0
- 3.0.0
- 2.1.0
- 2.0.0
- 1.2.0
- 1.1.0
- 1.0.0
"},{"location":"Changelog/#changes","title":"Changes","text":""},{"location":"Changelog/#400","title":"4.0.0","text":" - Css totally re-defined and cleaned up, with more efficent rules and with less data as possible, to keep a smooth dev experience
- Refactoring
- Bundle size reduced
- New
underline prop for Link component highlight property removed from CodeBox componentReview logo now can be customized, wihout choosing a predefined type (logo property now accept a standard JSX.Element)- UI re-designed for all components
- New
Password component, a modern password field - Css vars naming changed, to simplify overall dev experience and to optimize bundle size and to avoid redundancy:
arrow instead of arrow-coloricon instead of icon-colortext instead of text-color
"},{"location":"Changelog/#3140","title":"3.14.0","text":" - Styles optimized
- Big Clean-up, bundle size reduced
- Code refactoring, with more efficent naming
- More styles unified to
data-mbx-scl Card and DismissableCard better styled- New
size prop to specify Divider component height
"},{"location":"Changelog/#3130","title":"3.13.0","text":" - Styles optimized
- Unified shared classes, to optimize bundle size
- Clean-up
- New
fillOnFocus feature, to fill icons when focused (similar to textcolorOnFocus feature)
"},{"location":"Changelog/#3120","title":"3.12.0","text":" PackageVersion component improved, now it auto-updates itself when any relevant prop is changed (like a MoBrix-ui Reactive component)- Clean-up
Drawer component height fix and close button fixList component hover fix, now disabled when onClick is not set- New
opacityOnActive feature, to reduce opacity when a component is clicked (lower than opacityOnHover feature)
"},{"location":"Changelog/#3110","title":"3.11.0","text":" PackageVersion component- Clean-up
"},{"location":"Changelog/#3100","title":"3.10.0","text":" data-mb-enabled migrated to data-mbx-attributes field. If the component is disabled, the data-mbx-attributes contains disabled stringdata-mbx-a11y migrated to data-mbx-attributes field. If a11y = true, the data-mbx-attributes contains a11y stringdata-mbx-animated migrated to data-mbx-attributes field. If animated = true, the data-mbx-attributes contains animated stringdata-mbx-animation migrated to data-mbx-features field. If animated = true and animation prop is set, the data-mbx-features contains it (with anim- prefix, ex. anim-fade-in)data-mbx-a11y-dark removed- Clean-up
"},{"location":"Changelog/#390","title":"3.9.0","text":" arrowClassName parameter for Calendar, Carousel and Drawer components- css variables splitted into full theme (for future v4 updates)
- Opacity reduced on hover instead of specific hover colors, to optimize overall library size and in preparation for v4 update
data-mbx-features field, to easily handle multiple features through css selectorsdata-mbx-hover, data-mbx-shadow, data-mbx-background and data-mbx-dark unified in a single field, data-mbx-attributes
"},{"location":"Changelog/#380","title":"3.8.0","text":" - Ui improvements and fix
- Refactoring
- Bundle size reduced
- New shared property,
animation, to customize components animation when they are rendered - New global css variables, to customize shadow colors:
--mbx-shadow--mbx-shadow-light--mbx-shadow-dark
"},{"location":"Changelog/#370","title":"3.7.0","text":" CodeBox component refactoring:noCopyButton properties removedcopyButton properties used instead (enable/disable copy button)- Multiline strings are now supported
- Clean-up
"},{"location":"Changelog/#360","title":"3.6.0","text":" Image component- Clean-up
- Better automatic release system
- Docs updated
"},{"location":"Changelog/#350","title":"3.5.0","text":" - Clean-up
- Refactoring
- Reduced bundle size
- Comments generator fix
- New automatic release creation system
- New automatic publish system
"},{"location":"Changelog/#340","title":"3.4.0","text":" EmbeddedVideo component- Clean-up
"},{"location":"Changelog/#330","title":"3.3.0","text":" - Slider fix
- IconButton highlight fix on mobile
- All components now use new building functions (
buildMbxReactiveComponent and buildMbxStandardComponent)
"},{"location":"Changelog/#320","title":"3.2.0","text":" - New DatePicker css vars, to customize its internal modal
--mbx-datepicker-modal-background-light,--mbx-datepicker-modal-background-dark,--mbx-datepicker-modal-x-color-light,--mbx-datepicker-modal-x-color-dark,--mbx-datepicker-modal-x-color-hover-light,--mbx-datepicker-modal-x-color-hover-dark- Clean-up
- New CI workflow to publish MoBrix-ui package to github registry
- Automatic css variables docs generation
"},{"location":"Changelog/#310","title":"3.1.0","text":" - New Card properties (
headerClassName, headerProps, bodyClassName, bodyProps, footerClassName, footerProps) - Clean-up
- Minor improvements
"},{"location":"Changelog/#300","title":"3.0.0","text":" - No more external dependencies
- Totally re-designed css variables system, to fully customize every component at once
- Docs and comments generator
- Global refactoring and huge clean-up
"},{"location":"Changelog/#210","title":"2.1.0","text":" TabViewer component- Minor fixes
"},{"location":"Changelog/#200","title":"2.0.0","text":" Calendar componentDatePicker componentPopup componentSelector componentSlider componentRadioButtonGroup componentRadioButton componentReactive components replace old Box Components, mantaining only the automatic input value sync with actual value set- Better overall performance
- Huge cleanup
- Deep refactoring
- Minor fixes
"},{"location":"Changelog/#120","title":"1.2.0","text":" Carousel arrow fixExpandableContainer arrow fixFacebookButtons component
"},{"location":"Changelog/#110","title":"1.1.0","text":" readonly support for Rater componentReview component- Clean-up
"},{"location":"Changelog/#100","title":"1.0.0","text":" - MoBrix-ui-components library setup
"},{"location":"License/","title":"License","text":"MIT License
Copyright (c) 2024 Cataldo Cianciaruso
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
"},{"location":"components/","title":"MoBrix-ui components","text":""},{"location":"components/#summary","title":"Summary","text":"Atoms
-
Button
-
CheckBox
-
CodeBox
-
Counter
-
Divider
-
EmbeddedVideo
-
IconButton
-
Image
-
Input
-
Label
-
Link
-
PackageVersion
-
Password
-
RadioButton
-
Rater
-
Selector
-
Slider
-
Spinner
-
Toggle
Molecules
-
Card
-
Carousel
-
Container
-
DismissableCard
-
Dropdown
-
ExpandableContainer
-
FormField
-
List
-
Modal
-
Popup
-
RadioButtonGroup
-
Review
-
Table
-
TabViewer
Organisms
-
Calendar
-
DatePicker
-
Drawer
-
Form
"},{"location":"components/atoms/","title":"MoBrix-ui atoms","text":""},{"location":"components/atoms/#summary","title":"Summary","text":" - Button
- CheckBox
- CodeBox
- Counter
- Divider
- EmbeddedVideo
- IconButton
- Image
- Input
- Label
- Link
- PackageVersion
- Password
- RadioButton
- Rater
- Selector
- Slider
- Spinner
- Toggle
"},{"location":"components/atoms/Button/","title":"Button page","text":"A tiny and smart button component.
"},{"location":"components/atoms/Button/css-vars/","title":"Button CSS variables","text":""},{"location":"components/atoms/Button/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Button/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-button-background / / --mbx-button-background-light --mbx-button-background --mbx-background-light --mbx-button-background-dark --mbx-button-background --mbx-background-dark --mbx-button-text-color / / --mbx-button-text-color-light --mbx-button-text-color --mbx-text-color-light --mbx-button-text-color-dark --mbx-button-text-color --mbx-text-color-dark --mbx-button-background-hover / / --mbx-button-background-hover-light --mbx-button-background-hover --mbx-background-hover-light --mbx-button-background-hover-dark --mbx-button-background-hover --mbx-background-hover-dark --mbx-button-text-color-hover / / --mbx-button-text-color-hover-light --mbx-button-text-color-hover --mbx-text-color-hover-light --mbx-button-text-color-hover-dark --mbx-button-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/atoms/Button/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Button/css-vars/#-mbx-button-background","title":"--mbx-button-background","text":"Fallback Default / / Fallback value for mbx-button-background-light and mbx-button-background-dark
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-light","title":"--mbx-button-background-light","text":"Fallback Default --mbx-button-background --mbx-background-light Button background when dark mode is off
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-dark","title":"--mbx-button-background-dark","text":"Fallback Default --mbx-button-background --mbx-background-dark Button background when dark mode is on
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color","title":"--mbx-button-text-color","text":"Fallback Default / / Fallback value for mbx-button-text-color-light and mbx-button-text-color-dark
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-light","title":"--mbx-button-text-color-light","text":"Fallback Default --mbx-button-text-color --mbx-text-color-light Button text color when dark mode is off
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-dark","title":"--mbx-button-text-color-dark","text":"Fallback Default --mbx-button-text-color --mbx-text-color-dark Button text color when dark mode is on
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-hover","title":"--mbx-button-background-hover","text":"Fallback Default / / Fallback value for mbx-button-background-hover-light and mbx-button-background-hover-dark
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-hover-light","title":"--mbx-button-background-hover-light","text":"Fallback Default --mbx-button-background-hover --mbx-background-hover-light Button background when dark mode is off, on hover
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-hover-dark","title":"--mbx-button-background-hover-dark","text":"Fallback Default --mbx-button-background-hover --mbx-background-hover-dark Button background when dark mode is on, on hover
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-hover","title":"--mbx-button-text-color-hover","text":"Fallback Default / / Fallback value for mbx-button-text-color-hover-light and mbx-button-text-color-hover-dark
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-hover-light","title":"--mbx-button-text-color-hover-light","text":"Fallback Default --mbx-button-text-color-hover --mbx-text-color-hover-light Button text color when dark mode is off, on hover
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-hover-dark","title":"--mbx-button-text-color-hover-dark","text":"Fallback Default --mbx-button-text-color-hover --mbx-text-color-hover-dark Button text color when dark mode is on, on hover
"},{"location":"components/atoms/Button/props/","title":"Button properties","text":""},{"location":"components/atoms/Button/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Button/props/#props-table","title":"Props table","text":"Parameter Type Default onMouseEnter () => void / onMouseLeave () => void / onClick () => void () => {} children JSX.Element | string /"},{"location":"components/atoms/Button/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Button/props/#onmouseenter","title":"onMouseEnter","text":"Type Default () => void / This callback is triggered everytime the cursor enter the button area
"},{"location":"components/atoms/Button/props/#onmouseleave","title":"onMouseLeave","text":"Type Default () => void / This callback is triggered everytime the cursor exit the button area
"},{"location":"components/atoms/Button/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when Button component is clicked
"},{"location":"components/atoms/Button/props/#children","title":"children","text":"Type Default JSX.Element | string / Button content
"},{"location":"components/atoms/CheckBox/","title":"CheckBox page","text":"A checkbox element, totally customizable.
"},{"location":"components/atoms/CheckBox/css-vars/","title":"CheckBox CSS variables","text":""},{"location":"components/atoms/CheckBox/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/CheckBox/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-checkbox-background / / --mbx-checkbox-background-light --mbx-checkbox-background --mbx-background-light --mbx-checkbox-background-dark --mbx-checkbox-background --mbx-background-dark --mbx-checkbox-background-hover / / --mbx-checkbox-background-hover-light --mbx-checkbox-background-hover --mbx-background-hover-light --mbx-checkbox-background-hover-dark --mbx-checkbox-background-hover --mbx-background-hover-dark --mbx-checkbox-tick-color / / --mbx-checkbox-tick-color-light --mbx-checkbox-tick-color rgb(37, 99, 235) --mbx-checkbox-tick-color-dark --mbx-checkbox-tick-color white"},{"location":"components/atoms/CheckBox/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background","title":"--mbx-checkbox-background","text":"Fallback Default / / Fallback value for mbx-checkbox-background-light and mbx-checkbox-background-dark
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-light","title":"--mbx-checkbox-background-light","text":"Fallback Default --mbx-checkbox-background --mbx-background-light CheckBox background when dark mode is off
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-dark","title":"--mbx-checkbox-background-dark","text":"Fallback Default --mbx-checkbox-background --mbx-background-dark CheckBox background when dark mode is on
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover","title":"--mbx-checkbox-background-hover","text":"Fallback Default / / Fallback value for mbx-checkbox-background-hover-light and mbx-checkbox-background-hover-dark
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover-light","title":"--mbx-checkbox-background-hover-light","text":"Fallback Default --mbx-checkbox-background-hover --mbx-background-hover-light CheckBox background when dark mode is off, on hover
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover-dark","title":"--mbx-checkbox-background-hover-dark","text":"Fallback Default --mbx-checkbox-background-hover --mbx-background-hover-dark CheckBox background when dark mode is on, on hover
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color","title":"--mbx-checkbox-tick-color","text":"Fallback Default / / Fallback value for mbx-checkbox-tick-color-light and mbx-checkbox-tick-color-dark
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color-light","title":"--mbx-checkbox-tick-color-light","text":"Fallback Default --mbx-checkbox-tick-color rgb(37, 99, 235) CheckBox tick color when dark mode is off
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color-dark","title":"--mbx-checkbox-tick-color-dark","text":"Fallback Default --mbx-checkbox-tick-color white CheckBox tick color when dark mode is on
"},{"location":"components/atoms/CheckBox/props/","title":"CheckBox properties","text":""},{"location":"components/atoms/CheckBox/props/#summary","title":"Summary","text":""},{"location":"components/atoms/CheckBox/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean false icon JSX.Element Internal tick icon onChange (newValue: boolean) => void () => {}"},{"location":"components/atoms/CheckBox/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/CheckBox/props/#value","title":"value","text":"Type Default boolean false Checkbox initial value (checked / unchecked)
"},{"location":"components/atoms/CheckBox/props/#icon","title":"icon","text":"Type Default JSX.Element Internal tick icon custom tick icon (if not set, the default one will be used)
"},{"location":"components/atoms/CheckBox/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when CheckBox component input value is changed by the user
"},{"location":"components/atoms/CodeBox/","title":"CodeBox page","text":"A smart code box, to display code text as a compiler. Supports code highlight, with a selectable environment, and multiline strings
"},{"location":"components/atoms/CodeBox/css-vars/","title":"CodeBox CSS variables","text":""},{"location":"components/atoms/CodeBox/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/CodeBox/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-codebox-background / / --mbx-codebox-background-light --mbx-codebox-background --mbx-background-light --mbx-codebox-background-dark --mbx-codebox-background --mbx-background-dark --mbx-codebox-text-color / / --mbx-codebox-text-color-light --mbx-codebox-text-color --mbx-text-color-light --mbx-codebox-text-color-dark --mbx-codebox-text-color --mbx-text-color-dark"},{"location":"components/atoms/CodeBox/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-background","title":"--mbx-codebox-background","text":"Fallback Default / / Fallback value for mbx-codebox-background-light and mbx-codebox-background-dark
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-background-light","title":"--mbx-codebox-background-light","text":"Fallback Default --mbx-codebox-background --mbx-background-light CodeBox background when dark mode is off
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-background-dark","title":"--mbx-codebox-background-dark","text":"Fallback Default --mbx-codebox-background --mbx-background-dark CodeBox background when dark mode is on
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color","title":"--mbx-codebox-text-color","text":"Fallback Default / / Fallback value for mbx-codebox-text-color-light and mbx-codebox-text-color-dark
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color-light","title":"--mbx-codebox-text-color-light","text":"Fallback Default --mbx-codebox-text-color --mbx-text-color-light CodeBox text-color when dark mode is off
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color-dark","title":"--mbx-codebox-text-color-dark","text":"Fallback Default --mbx-codebox-text-color --mbx-text-color-dark CodeBox text-color when dark mode is on
"},{"location":"components/atoms/CodeBox/props/","title":"CodeBox properties","text":""},{"location":"components/atoms/CodeBox/props/#summary","title":"Summary","text":""},{"location":"components/atoms/CodeBox/props/#props-table","title":"Props table","text":"Parameter Type Default value string / environment javascript | python | terminal | common 'terminal' copyButton boolean true"},{"location":"components/atoms/CodeBox/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/CodeBox/props/#value","title":"value","text":"Type Default string / code to display - multiline string is supported
"},{"location":"components/atoms/CodeBox/props/#environment","title":"environment","text":"Type Default javascript | python | terminal | common 'terminal' environment for text highlight feature, default to 'terminal' (only enabled when 'highlight' is true)
"},{"location":"components/atoms/CodeBox/props/#copybutton","title":"copyButton","text":"Type Default boolean true Enable/disable the copy button
"},{"location":"components/atoms/Counter/","title":"Counter page","text":"A flexible numeric input element
"},{"location":"components/atoms/Counter/css-vars/","title":"Counter CSS variables","text":""},{"location":"components/atoms/Counter/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Counter/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-counterbox-background / / --mbx-counterbox-background-light --mbx-counterbox-background --mbx-background-color-light --mbx-counterbox-background-dark --mbx-counterbox-background --mbx-background-color-dark --mbx-counterbox-text-color / / --mbx-counterbox-text-color-light --mbx-counterbox-text-color --mbx-text-color-light --mbx-counterbox-text-color-dark --mbx-counterbox-text-color --mbx-text-color-dark --mbx-counterbox-background-hover / / --mbx-counterbox-background-hover-light --mbx-counterbox-background-hover --mbx-background-color-hover-light --mbx-counterbox-background-hover-dark --mbx-counterbox-background-hover --mbx-background-color-hover-dark --mbx-counterbox-text-color-hover / / --mbx-counterbox-text-color-hover-light --mbx-counterbox-text-color-hover --mbx-text-color-hover-light --mbx-counterbox-text-color-hover-dark --mbx-counterbox-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/atoms/Counter/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background","title":"--mbx-counterbox-background","text":"Fallback Default / / Fallback value for mbx-counterbox-background-light and mbx-counterbox-background-dark
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-light","title":"--mbx-counterbox-background-light","text":"Fallback Default --mbx-counterbox-background --mbx-background-color-light Counter background when dark mode is off
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-dark","title":"--mbx-counterbox-background-dark","text":"Fallback Default --mbx-counterbox-background --mbx-background-color-dark Counter background when dark mode is on
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color","title":"--mbx-counterbox-text-color","text":"Fallback Default / / Fallback value for mbx-counterbox-text-color-light and mbx-counterbox-text-color-dark
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-light","title":"--mbx-counterbox-text-color-light","text":"Fallback Default --mbx-counterbox-text-color --mbx-text-color-light Counter text color when dark mode is off
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-dark","title":"--mbx-counterbox-text-color-dark","text":"Fallback Default --mbx-counterbox-text-color --mbx-text-color-dark Counter text color when dark mode is on
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover","title":"--mbx-counterbox-background-hover","text":"Fallback Default / / Fallback value for mbx-counterbox-background-hover-light and mbx-counterbox-background-hover-dark
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover-light","title":"--mbx-counterbox-background-hover-light","text":"Fallback Default --mbx-counterbox-background-hover --mbx-background-color-hover-light Counter background when dark mode is off, on hover
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover-dark","title":"--mbx-counterbox-background-hover-dark","text":"Fallback Default --mbx-counterbox-background-hover --mbx-background-color-hover-dark Counter background when dark mode is on, on hover
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover","title":"--mbx-counterbox-text-color-hover","text":"Fallback Default / / Fallback value for mbx-counterbox-text-color-hover-light and mbx-counterbox-text-color-hover-dark
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover-light","title":"--mbx-counterbox-text-color-hover-light","text":"Fallback Default --mbx-counterbox-text-color-hover --mbx-text-color-hover-light Counter text color when dark mode is off, on hover
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover-dark","title":"--mbx-counterbox-text-color-hover-dark","text":"Fallback Default --mbx-counterbox-text-color-hover --mbx-text-color-hover-dark Counter text color when dark mode is on, on hover
"},{"location":"components/atoms/Counter/props/","title":"Counter properties","text":""},{"location":"components/atoms/Counter/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Counter/props/#props-table","title":"Props table","text":"Parameter Type Default value number / placeholder string / readOnly boolean false min number / max number / onChange (newValue: number) => void () => {}"},{"location":"components/atoms/Counter/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Counter/props/#value","title":"value","text":"Type Default number / numeric input value
"},{"location":"components/atoms/Counter/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set
"},{"location":"components/atoms/Counter/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter
"},{"location":"components/atoms/Counter/props/#min","title":"min","text":"Type Default number / min allowed value
"},{"location":"components/atoms/Counter/props/#max","title":"max","text":"Type Default number / max allowed value
"},{"location":"components/atoms/Counter/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Counter component input value is changed by the user
"},{"location":"components/atoms/Divider/","title":"Divider page","text":"A simple divider, useful to separate sections and paragraphs
"},{"location":"components/atoms/Divider/css-vars/","title":"Divider CSS variables","text":""},{"location":"components/atoms/Divider/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Divider/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-divider-color / / --mbx-divider-color-light --mbx-divider-color --mbx-text-color-light --mbx-divider-color-dark --mbx-divider-color --mbx-text-color-dark"},{"location":"components/atoms/Divider/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Divider/css-vars/#-mbx-divider-color","title":"--mbx-divider-color","text":"Fallback Default / / Fallback value for --mbx-divider-color-light and --mbx-divider-color-dark
"},{"location":"components/atoms/Divider/css-vars/#-mbx-divider-color-light","title":"--mbx-divider-color-light","text":"Fallback Default --mbx-divider-color --mbx-text-color-light Divider color when dark mode is off
"},{"location":"components/atoms/Divider/css-vars/#-mbx-divider-color-dark","title":"--mbx-divider-color-dark","text":"Fallback Default --mbx-divider-color --mbx-text-color-dark Divider color when dark mode is on
"},{"location":"components/atoms/Divider/props/","title":"Divider properties","text":""},{"location":"components/atoms/Divider/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Divider/props/#props-table","title":"Props table","text":"Parameter Type Default size string 2px"},{"location":"components/atoms/Divider/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Divider/props/#size","title":"size","text":"Type Default string 2px Divider size. Can be used any unit (like rem, em or pixels, for example 4px)
"},{"location":"components/atoms/EmbeddedVideo/","title":"EmbeddedVideo page","text":"A wrapper to easily serve embedded videos from supported sources (Youtube, Dailymotion and Facebook watch for now) - https://www.youtube-nocookie.com/ is used for youtube videos to prevent cookies
"},{"location":"components/atoms/EmbeddedVideo/css-vars/","title":"EmbeddedVideo CSS variables","text":""},{"location":"components/atoms/EmbeddedVideo/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/EmbeddedVideo/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"components/atoms/EmbeddedVideo/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/EmbeddedVideo/props/","title":"EmbeddedVideo properties","text":""},{"location":"components/atoms/EmbeddedVideo/props/#summary","title":"Summary","text":""},{"location":"components/atoms/EmbeddedVideo/props/#props-table","title":"Props table","text":"Parameter Type Default url string /"},{"location":"components/atoms/EmbeddedVideo/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/EmbeddedVideo/props/#url","title":"url","text":"Type Default string / External video url to embed
"},{"location":"components/atoms/IconButton/","title":"IconButton page","text":"An empty button, without additional styles, to make an icon clickable
"},{"location":"components/atoms/IconButton/css-vars/","title":"IconButton CSS variables","text":""},{"location":"components/atoms/IconButton/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/IconButton/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"components/atoms/IconButton/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/IconButton/props/","title":"IconButton properties","text":""},{"location":"components/atoms/IconButton/props/#summary","title":"Summary","text":""},{"location":"components/atoms/IconButton/props/#props-table","title":"Props table","text":"Parameter Type Default children JSX.Element | string / onMouseEnter () => void / onMouseLeave () => void / onClick () => void () => {}"},{"location":"components/atoms/IconButton/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/IconButton/props/#children","title":"children","text":"Type Default JSX.Element | string / Button content - extended from Button component
"},{"location":"components/atoms/IconButton/props/#onmouseenter","title":"onMouseEnter","text":"Type Default () => void / This callback is triggered everytime the cursor enter the button area - extended from Button component
"},{"location":"components/atoms/IconButton/props/#onmouseleave","title":"onMouseLeave","text":"Type Default () => void / This callback is triggered everytime the cursor exit the button area - extended from Button component
"},{"location":"components/atoms/IconButton/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when Button component is clicked - extended from Button component
"},{"location":"components/atoms/Image/","title":"Image page","text":"An Image component, enhanced by MoBrix-ui system
"},{"location":"components/atoms/Image/css-vars/","title":"Image CSS variables","text":""},{"location":"components/atoms/Image/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Image/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"components/atoms/Image/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Image/props/","title":"Image properties","text":""},{"location":"components/atoms/Image/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Image/props/#props-table","title":"Props table","text":"Parameter Type Default src string / width number / height number / alt string /"},{"location":"components/atoms/Image/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Image/props/#src","title":"src","text":"Type Default string / Image src attribute
"},{"location":"components/atoms/Image/props/#width","title":"width","text":"Type Default number / Image width attribute
"},{"location":"components/atoms/Image/props/#height","title":"height","text":"Type Default number / Image height attribute
"},{"location":"components/atoms/Image/props/#alt","title":"alt","text":"Type Default string / Image alt attribute
"},{"location":"components/atoms/Input/","title":"Input page","text":"A flexible text input element
"},{"location":"components/atoms/Input/css-vars/","title":"Input CSS variables","text":""},{"location":"components/atoms/Input/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Input/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-inputbox-background / / --mbx-inputbox-background-light --mbx-inputbox-background --mbx-background-color-light --mbx-inputbox-background-dark --mbx-inputbox-background --mbx-background-color-dark --mbx-inputbox-text-color / / --mbx-inputbox-text-color-light --mbx-inputbox-text-color --mbx-text-color-light --mbx-inputbox-text-color-dark --mbx-inputbox-text-color --mbx-text-color-dark --mbx-inputbox-background-hover / / --mbx-inputbox-background-hover-light --mbx-inputbox-background-hover --mbx-background-color-hover-light --mbx-inputbox-background-hover-dark --mbx-inputbox-background-hover --mbx-background-color-hover-dark --mbx-inputbox-text-color-hover / / --mbx-inputbox-text-color-hover-light --mbx-inputbox-text-color-hover --mbx-text-color-hover-light --mbx-inputbox-text-color-hover-dark --mbx-inputbox-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/atoms/Input/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background","title":"--mbx-inputbox-background","text":"Fallback Default / / Fallback value for mbx-inputbox-background-light and mbx-inputbox-background-dark
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-light","title":"--mbx-inputbox-background-light","text":"Fallback Default --mbx-inputbox-background --mbx-background-color-light Input background when dark mode is off
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-dark","title":"--mbx-inputbox-background-dark","text":"Fallback Default --mbx-inputbox-background --mbx-background-color-dark Input background when dark mode is on
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color","title":"--mbx-inputbox-text-color","text":"Fallback Default / / Fallback value for mbx-inputbox-text-color-light and mbx-inputbox-text-color-dark
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-light","title":"--mbx-inputbox-text-color-light","text":"Fallback Default --mbx-inputbox-text-color --mbx-text-color-light Input text color when dark mode is off
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-dark","title":"--mbx-inputbox-text-color-dark","text":"Fallback Default --mbx-inputbox-text-color --mbx-text-color-dark Input text color when dark mode is on
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-hover","title":"--mbx-inputbox-background-hover","text":"Fallback Default / / Fallback value for mbx-inputbox-background-hover-light and mbx-inputbox-background-hover-dark
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-hover-light","title":"--mbx-inputbox-background-hover-light","text":"Fallback Default --mbx-inputbox-background-hover --mbx-background-color-hover-light Input background when dark mode is off, on hover
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-hover-dark","title":"--mbx-inputbox-background-hover-dark","text":"Fallback Default --mbx-inputbox-background-hover --mbx-background-color-hover-dark Input background when dark mode is on, on hover
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover","title":"--mbx-inputbox-text-color-hover","text":"Fallback Default / / Fallback value for mbx-inputbox-text-color-hover-light and mbx-inputbox-text-color-hover-dark
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover-light","title":"--mbx-inputbox-text-color-hover-light","text":"Fallback Default --mbx-inputbox-text-color-hover --mbx-text-color-hover-light Input text color when dark mode is off, on hover
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover-dark","title":"--mbx-inputbox-text-color-hover-dark","text":"Fallback Default --mbx-inputbox-text-color-hover --mbx-text-color-hover-dark Input text color when dark mode is on, on hover
"},{"location":"components/atoms/Input/props/","title":"Input properties","text":""},{"location":"components/atoms/Input/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Input/props/#props-table","title":"Props table","text":"Parameter Type Default value string / placeholder string / readOnly boolean false onChange (newValue: string) => void () => {}"},{"location":"components/atoms/Input/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Input/props/#value","title":"value","text":"Type Default string / text input value
"},{"location":"components/atoms/Input/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set
"},{"location":"components/atoms/Input/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter
"},{"location":"components/atoms/Input/props/#onchange","title":"onChange","text":"Type Default (newValue: string) => void () => {} Callback triggered when Input component input value is changed by the user
"},{"location":"components/atoms/Label/","title":"Label page","text":"A text wrapper, with many options to customize its content
"},{"location":"components/atoms/Label/css-vars/","title":"Label CSS variables","text":""},{"location":"components/atoms/Label/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Label/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-label-text-color / / --mbx-label-text-color-light --mbx-label-text-color --mbx-text-color-light --mbx-label-text-color-dark --mbx-label-text-color --mbx-text-color-dark"},{"location":"components/atoms/Label/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Label/css-vars/#-mbx-label-text-color","title":"--mbx-label-text-color","text":"Fallback Default / / Fallback value for mbx-label-text-color-light and mbx-label-text-color-dark
"},{"location":"components/atoms/Label/css-vars/#-mbx-label-text-color-light","title":"--mbx-label-text-color-light","text":"Fallback Default --mbx-label-text-color --mbx-text-color-light Label text color when dark mode is off
"},{"location":"components/atoms/Label/css-vars/#-mbx-label-text-color-dark","title":"--mbx-label-text-color-dark","text":"Fallback Default --mbx-label-text-color --mbx-text-color-dark Label text color when dark mode is on
"},{"location":"components/atoms/Label/props/","title":"Label properties","text":""},{"location":"components/atoms/Label/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Label/props/#props-table","title":"Props table","text":"Parameter Type Default children string | string[] /"},{"location":"components/atoms/Label/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Label/props/#children","title":"children","text":"Type Default string | string[] / text content to show (string arrays are accepted)
"},{"location":"components/atoms/Link/","title":"Link page","text":"A re-defined <a> component, designed to be better used with links
"},{"location":"components/atoms/Link/css-vars/","title":"Link CSS variables","text":""},{"location":"components/atoms/Link/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Link/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-link-color / / --mbx-link-color-light --mbx-link-color --mbx-text-color-light --mbx-link-color-dark --mbx-link-color --mbx-text-color-dark --mbx-link-color-hover / / --mbx-link-color-hover-light --mbx-link-color-hover --mbx-link-color-light --mbx-link-color-hover-dark --mbx-link-color-hover --mbx-link-color-dark"},{"location":"components/atoms/Link/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Link/css-vars/#-mbx-link-color","title":"--mbx-link-color","text":"Fallback Default / / Fallback value for mbx-link-color-light and mbx-link-color-dark
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-light","title":"--mbx-link-color-light","text":"Fallback Default --mbx-link-color --mbx-text-color-light Link text color when dark mode is off
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-dark","title":"--mbx-link-color-dark","text":"Fallback Default --mbx-link-color --mbx-text-color-dark Link text color when dark mode is on
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-hover","title":"--mbx-link-color-hover","text":"Fallback Default / / Fallback value for mbx-link-color-hover-light and mbx-link-color-hover-dark
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-hover-light","title":"--mbx-link-color-hover-light","text":"Fallback Default --mbx-link-color-hover --mbx-link-color-light Link text color when dark mode is off, on hover
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-hover-dark","title":"--mbx-link-color-hover-dark","text":"Fallback Default --mbx-link-color-hover --mbx-link-color-dark Link text color when dark mode is on, on hover
"},{"location":"components/atoms/Link/props/","title":"Link properties","text":""},{"location":"components/atoms/Link/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Link/props/#props-table","title":"Props table","text":"Parameter Type Default to string / underline boolean true newTab string false children JSX.Element | string /"},{"location":"components/atoms/Link/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Link/props/#to","title":"to","text":"Type Default string / Link url
"},{"location":"components/atoms/Link/props/#underline","title":"underline","text":"Type Default boolean true if true, the link will be displayed underlined (default=true)
"},{"location":"components/atoms/Link/props/#newtab","title":"newTab","text":"Type Default string false f true, the link will be opened in a new tab
"},{"location":"components/atoms/Link/props/#children","title":"children","text":"Type Default JSX.Element | string / Link content
"},{"location":"components/atoms/PackageVersion/","title":"PackageVersion page","text":"A tiny and smart component, to show a package version from many sources (like NPM registry or directly from Github repo). Can be easily integrated into more complex components.
"},{"location":"components/atoms/PackageVersion/css-vars/","title":"PackageVersion CSS variables","text":""},{"location":"components/atoms/PackageVersion/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/PackageVersion/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-packageversion-text-color / / --mbx-packageversion-text-color-light --mbx-packageversion-text-color --mbx-label-text-color-light --mbx-packageversion-text-color-dark --mbx-packageversion-text-color --mbx-label-text-color-dark"},{"location":"components/atoms/PackageVersion/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color","title":"--mbx-packageversion-text-color","text":"Fallback Default / / Fallback value for mbx-packageversion-text-color-light and mbx-packageversion-text-color-dark
"},{"location":"components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color-light","title":"--mbx-packageversion-text-color-light","text":"Fallback Default --mbx-packageversion-text-color --mbx-label-text-color-light PackageVersion text color when dark mode is off
"},{"location":"components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color-dark","title":"--mbx-packageversion-text-color-dark","text":"Fallback Default --mbx-packageversion-text-color --mbx-label-text-color-dark PackageVersion text color when dark mode is on
"},{"location":"components/atoms/PackageVersion/props/","title":"PackageVersion properties","text":""},{"location":"components/atoms/PackageVersion/props/#summary","title":"Summary","text":""},{"location":"components/atoms/PackageVersion/props/#props-table","title":"Props table","text":"Parameter Type Default name () => void / source npm | github-release | github / user string / branch string /"},{"location":"components/atoms/PackageVersion/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/PackageVersion/props/#name","title":"name","text":"Type Default () => void / Library name (it is used as repo name when source = github)
"},{"location":"components/atoms/PackageVersion/props/#source","title":"source","text":"Type Default npm | github-release | github / Package location (actually, NPM, Github and Github release are supported)
"},{"location":"components/atoms/PackageVersion/props/#user","title":"user","text":"Type Default string / Library owner (it is used as repo owner username when source = github or source = github-release)
"},{"location":"components/atoms/PackageVersion/props/#branch","title":"branch","text":"Type Default string / Github repo default branch (used when source = github)
"},{"location":"components/atoms/Password/","title":"Password page","text":"A modern password input field
"},{"location":"components/atoms/Password/css-vars/","title":"Password CSS variables","text":""},{"location":"components/atoms/Password/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Password/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-password-background / / --mbx-password-background-light --mbx-password-background --mbx-background-color-light --mbx-password-background-dark --mbx-password-background --mbx-background-color-dark --mbx-password-text-color / / --mbx-password-text-color-light --mbx-password-text-color --mbx-text-color-light --mbx-password-text-color-dark --mbx-password-text-color --mbx-text-color-dark --mbx-password-background-hover / / --mbx-password-background-hover-light --mbx-password-background-hover --mbx-background-color-hover-light --mbx-password-background-hover-dark --mbx-password-background-hover --mbx-background-color-hover-dark --mbx-password-text-color-hover / / --mbx-password-text-color-hover-light --mbx-password-text-color-hover --mbx-text-color-hover-light --mbx-password-text-color-hover-dark --mbx-password-text-color-hover --mbx-text-color-hover-dark --mbx-password-icon-color / / --mbx-password-icon-color-light --mbx-password-icon-color --mbx-password-text-color-light --mbx-password-icon-color-dark --mbx-password-icon-color --mbx-password-text-color-dark --mbx-password-icon-color-hover / / --mbx-password-icon-color-hover-light --mbx-password-icon-color-hover --mbx-password-text-color-light --mbx-password-icon-color-hover-dark --mbx-password-icon-color-hover --mbx-password-text-color-dark"},{"location":"components/atoms/Password/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Password/css-vars/#-mbx-password-background","title":"--mbx-password-background","text":"Fallback Default / / Fallback value for mbx-password-background-light and mbx-password-background-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-light","title":"--mbx-password-background-light","text":"Fallback Default --mbx-password-background --mbx-background-color-light Password background when dark mode is off
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-dark","title":"--mbx-password-background-dark","text":"Fallback Default --mbx-password-background --mbx-background-color-dark Password background when dark mode is on
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color","title":"--mbx-password-text-color","text":"Fallback Default / / Fallback value for mbx-password-text-color-light and mbx-password-text-color-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-light","title":"--mbx-password-text-color-light","text":"Fallback Default --mbx-password-text-color --mbx-text-color-light Password text color when dark mode is off
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-dark","title":"--mbx-password-text-color-dark","text":"Fallback Default --mbx-password-text-color --mbx-text-color-dark Password text color when dark mode is on
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-hover","title":"--mbx-password-background-hover","text":"Fallback Default / / Fallback value for mbx-password-background-hover-light and mbx-password-background-hover-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-hover-light","title":"--mbx-password-background-hover-light","text":"Fallback Default --mbx-password-background-hover --mbx-background-color-hover-light Password background when dark mode is off, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-hover-dark","title":"--mbx-password-background-hover-dark","text":"Fallback Default --mbx-password-background-hover --mbx-background-color-hover-dark Password background when dark mode is on, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-hover","title":"--mbx-password-text-color-hover","text":"Fallback Default / / Fallback value for mbx-password-text-color-hover-light and mbx-password-text-color-hover-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-hover-light","title":"--mbx-password-text-color-hover-light","text":"Fallback Default --mbx-password-text-color-hover --mbx-text-color-hover-light Password text color when dark mode is off, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-hover-dark","title":"--mbx-password-text-color-hover-dark","text":"Fallback Default --mbx-password-text-color-hover --mbx-text-color-hover-dark Password text color when dark mode is on, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-color","title":"--mbx-password-icon-color","text":"Fallback Default / / Fallback value for --mbx-password-icon-color-light and --mbx-password-icon-color-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-color-light","title":"--mbx-password-icon-color-light","text":"Fallback Default --mbx-password-icon-color --mbx-password-text-color-light Password eye icon color when dark mode is off
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-color-dark","title":"--mbx-password-icon-color-dark","text":"Fallback Default --mbx-password-icon-color --mbx-password-text-color-dark Password eye icon color when dark mode is on
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-color-hover","title":"--mbx-password-icon-color-hover","text":"Fallback Default / / Fallback value for --mbx-password-icon-color-hover-light and --mbx-password-icon-color-hover-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-color-hover-light","title":"--mbx-password-icon-color-hover-light","text":"Fallback Default --mbx-password-icon-color-hover --mbx-password-text-color-light Password eye icon color when dark mode is off, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-color-hover-dark","title":"--mbx-password-icon-color-hover-dark","text":"Fallback Default --mbx-password-icon-color-hover --mbx-password-text-color-dark Password eye icon color when dark mode is on, on hover
"},{"location":"components/atoms/Password/props/","title":"Password properties","text":""},{"location":"components/atoms/Password/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Password/props/#props-table","title":"Props table","text":"Parameter Type Default value string / placeholder string / readOnly boolean false onChange (newValue: string) => void () => {} show boolean false"},{"location":"components/atoms/Password/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Password/props/#value","title":"value","text":"Type Default string / text input value - extended from Input component
"},{"location":"components/atoms/Password/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set - extended from Input component
"},{"location":"components/atoms/Password/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter - extended from Input component
"},{"location":"components/atoms/Password/props/#onchange","title":"onChange","text":"Type Default (newValue: string) => void () => {} Callback triggered when Input component input value is changed by the user - extended from Input component
"},{"location":"components/atoms/Password/props/#show","title":"show","text":"Type Default boolean false Show/hide the password
"},{"location":"components/atoms/RadioButton/","title":"RadioButton page","text":"A single radio button component. Optionally, can prevent user to deselect it
"},{"location":"components/atoms/RadioButton/css-vars/","title":"RadioButton CSS variables","text":""},{"location":"components/atoms/RadioButton/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/RadioButton/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-radio-background / / --mbx-radio-background-light --mbx-radio-background radial-gradient(#f1f1f1 20%, #e4e4e4 30%, #bebebe 55%, #f0f0f0 20%) --mbx-radio-background-dark --mbx-radio-background radial-gradient(closest-side, #2d3748 20%, #232b38 30%, #1d1f44 55%, #191f29 20%) --mbx-radio-background-hover / / --mbx-radio-background-hover-light --mbx-radio-background-hover --mbx-radio-background-light --mbx-radio-background-hover-dark --mbx-radio-background-hover --mbx-radio-background-dark --mbx-radio-icon-background / / --mbx-radio-icon-background-light --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #2d3748, #191f29) --mbx-radio-icon-background-dark --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #dbe0e6, #949494)"},{"location":"components/atoms/RadioButton/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background","title":"--mbx-radio-background","text":"Fallback Default / / Fallback value for mbx-radio-background-light and mbx-radio-background-dark
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-light","title":"--mbx-radio-background-light","text":"Fallback Default --mbx-radio-background radial-gradient(#f1f1f1 20%, #e4e4e4 30%, #bebebe 55%, #f0f0f0 20%) RadioButton background when dark mode is off
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-dark","title":"--mbx-radio-background-dark","text":"Fallback Default --mbx-radio-background radial-gradient(closest-side, #2d3748 20%, #232b38 30%, #1d1f44 55%, #191f29 20%) RadioButton background when dark mode is on
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover","title":"--mbx-radio-background-hover","text":"Fallback Default / / Fallback value for mbx-radio-background-hover-light and mbx-radio-background-hover-dark
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover-light","title":"--mbx-radio-background-hover-light","text":"Fallback Default --mbx-radio-background-hover --mbx-radio-background-light RadioButton background when dark mode is off, on hover
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover-dark","title":"--mbx-radio-background-hover-dark","text":"Fallback Default --mbx-radio-background-hover --mbx-radio-background-dark RadioButton background when dark mode is on, on hover
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background","title":"--mbx-radio-icon-background","text":"Fallback Default / / Fallback value for mbx-radio-icon-background-light and mbx-radio-icon-background-dark
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background-light","title":"--mbx-radio-icon-background-light","text":"Fallback Default --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #2d3748, #191f29) RadioButton icon background when dark mode is off
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background-dark","title":"--mbx-radio-icon-background-dark","text":"Fallback Default --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #dbe0e6, #949494) RadioButton icon background when dark mode is on
"},{"location":"components/atoms/RadioButton/props/","title":"RadioButton properties","text":""},{"location":"components/atoms/RadioButton/props/#summary","title":"Summary","text":""},{"location":"components/atoms/RadioButton/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean false deselectable boolean false onChange (newValue: boolean) => void () => {}"},{"location":"components/atoms/RadioButton/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/RadioButton/props/#value","title":"value","text":"Type Default boolean false actual radio button value (radio icon visiblity)
"},{"location":"components/atoms/RadioButton/props/#deselectable","title":"deselectable","text":"Type Default boolean false if false, the button can be selected only once (the value can't change then)
"},{"location":"components/atoms/RadioButton/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when RadioButton component input value is changed by the user
"},{"location":"components/atoms/Rater/","title":"Rater page","text":"A modern rater component, to let the user leave a review within your app
"},{"location":"components/atoms/Rater/css-vars/","title":"Rater CSS variables","text":""},{"location":"components/atoms/Rater/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Rater/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-rater-background / / --mbx-rater-background-light --mbx-rater-background --mbx-background-light --mbx-rater-background-dark --mbx-rater-background --mbx-background-dark"},{"location":"components/atoms/Rater/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Rater/css-vars/#-mbx-rater-background","title":"--mbx-rater-background","text":"Fallback Default / / Fallback value for mbx-rater-background-light and mbx-rater-background-dark
"},{"location":"components/atoms/Rater/css-vars/#-mbx-rater-background-light","title":"--mbx-rater-background-light","text":"Fallback Default --mbx-rater-background --mbx-background-light Rater background when dark mode is off
"},{"location":"components/atoms/Rater/css-vars/#-mbx-rater-background-dark","title":"--mbx-rater-background-dark","text":"Fallback Default --mbx-rater-background --mbx-background-dark Rater background when dark mode is on
"},{"location":"components/atoms/Rater/props/","title":"Rater properties","text":""},{"location":"components/atoms/Rater/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Rater/props/#props-table","title":"Props table","text":"Parameter Type Default value number 0 max number 5 readOnly boolean false type star|circle 'star' vertical boolean false onChange (newValue: number) => void () => {}"},{"location":"components/atoms/Rater/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Rater/props/#value","title":"value","text":"Type Default number 0 actual vote
"},{"location":"components/atoms/Rater/props/#max","title":"max","text":"Type Default number 5 max vote (max number of icons displayed)
"},{"location":"components/atoms/Rater/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, the rate can't be changed by clicking on the icons
"},{"location":"components/atoms/Rater/props/#type","title":"type","text":"Type Default star|circle 'star' vote icons type
"},{"location":"components/atoms/Rater/props/#vertical","title":"vertical","text":"Type Default boolean false if true, rate icons will be displayed vertically
"},{"location":"components/atoms/Rater/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} callback triggered when user select a vote
"},{"location":"components/atoms/Selector/","title":"Selector page","text":"A re-defined select component
"},{"location":"components/atoms/Selector/css-vars/","title":"Selector CSS variables","text":""},{"location":"components/atoms/Selector/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Selector/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-selector-background / / --mbx-selector-background-light --mbx-selector-background --mbx-background-light --mbx-selector-background-dark --mbx-selector-background --mbx-background-dark)) --mbx-selector-text-color / / --mbx-selector-text-color-light --mbx-selector-text-color --mbx-text-color-light --mbx-selector-text-color-dark --mbx-selector-text-color [--mbx-text-color-dark --mbx-selector-background-hover / / --mbx-selector-background-hover-light --mbx-selector-background-hover --mbx-selector-background-light --mbx-selector-background-hover-dark --mbx-selector-background-hover --mbx-selector-background-dark --mbx-selector-text-color-hover / / --mbx-selector-text-color-hover-light --mbx-selector-text-color-hover --mbx-text-color-hover-light --mbx-selector-text-color-hover-dark --mbx-selector-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/atoms/Selector/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background","title":"--mbx-selector-background","text":"Fallback Default / / Fallback value for mbx-selector-background-light and mbx-selector-background-dark
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-light","title":"--mbx-selector-background-light","text":"Fallback Default --mbx-selector-background --mbx-background-light Selector background when dark mode is off
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-dark","title":"--mbx-selector-background-dark","text":"Fallback Default --mbx-selector-background --mbx-background-dark)) Selector background when dark mode is on
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color","title":"--mbx-selector-text-color","text":"Fallback Default / / Fallback value for mbx-selector-text-color-light and mbx-selector-text-color-dark
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-light","title":"--mbx-selector-text-color-light","text":"Fallback Default --mbx-selector-text-color --mbx-text-color-light Selector text color when dark mode is off
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-dark","title":"--mbx-selector-text-color-dark","text":"Fallback Default --mbx-selector-text-color [--mbx-text-color-dark Selector text color when dark mode is on
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-hover","title":"--mbx-selector-background-hover","text":"Fallback Default / / Fallback value for mbx-selector-background-hover-light and mbx-selector-background-hover-dark
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-hover-light","title":"--mbx-selector-background-hover-light","text":"Fallback Default --mbx-selector-background-hover --mbx-selector-background-light Selector background when dark mode is off, on hover
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-hover-dark","title":"--mbx-selector-background-hover-dark","text":"Fallback Default --mbx-selector-background-hover --mbx-selector-background-dark Selector background when dark mode is on, on hover
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover","title":"--mbx-selector-text-color-hover","text":"Fallback Default / / Fallback value for mbx-selector-text-color-hover-light and mbx-selector-text-color-hover-dark
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover-light","title":"--mbx-selector-text-color-hover-light","text":"Fallback Default --mbx-selector-text-color-hover --mbx-text-color-hover-light Selector text color when dark mode is off, on hover
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover-dark","title":"--mbx-selector-text-color-hover-dark","text":"Fallback Default --mbx-selector-text-color-hover --mbx-text-color-hover-dark Selector text color when dark mode is on, on hover
"},{"location":"components/atoms/Selector/props/","title":"Selector properties","text":""},{"location":"components/atoms/Selector/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Selector/props/#props-table","title":"Props table","text":"Parameter Type Default value number 0 elements string[] [] optionClassName string / onChange (newValue: number) => void () => {}"},{"location":"components/atoms/Selector/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Selector/props/#value","title":"value","text":"Type Default number 0 option index actually displayed
"},{"location":"components/atoms/Selector/props/#elements","title":"elements","text":"Type Default string[] [] selector options array, every element must be a string
"},{"location":"components/atoms/Selector/props/#optionclassname","title":"optionClassName","text":"Type Default string / className applied on every options inside the selector
"},{"location":"components/atoms/Selector/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Selector component input value is changed by the user
"},{"location":"components/atoms/Slider/","title":"Slider page","text":"A modern range input component, to control a value using a simple slider
"},{"location":"components/atoms/Slider/css-vars/","title":"Slider CSS variables","text":""},{"location":"components/atoms/Slider/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Slider/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-slider-background / / --mbx-slider-background-light --mbx-slider-background --mbx-background-light --mbx-slider-background-dark --mbx-slider-background --mbx-background-dark --mbx-slider-thumb-color / / --mbx-slider-thumb-color-light --mbx-slider-thumb-color radial-gradient(#2d3748, #1d232e) --mbx-slider-thumb-color-dark --mbx-slider-thumb-color radial-gradient(#e3e4e9, #9b9999) --mbx-slider-thumb-color-hover / / --mbx-slider-thumb-color-hover-light --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-light --mbx-slider-thumb-color-hover-dark --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-dark"},{"location":"components/atoms/Slider/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-background","title":"--mbx-slider-background","text":"Fallback Default / / Fallback value for mbx-slider-background-light and mbx-slider-background-dark
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-background-light","title":"--mbx-slider-background-light","text":"Fallback Default --mbx-slider-background --mbx-background-light Slider background when dark mode is off
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-background-dark","title":"--mbx-slider-background-dark","text":"Fallback Default --mbx-slider-background --mbx-background-dark Slider background when dark mode is on
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color","title":"--mbx-slider-thumb-color","text":"Fallback Default / / Fallback value for mbx-slider-thumb-color-light and mbx-slider-thumb-color-dark
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-light","title":"--mbx-slider-thumb-color-light","text":"Fallback Default --mbx-slider-thumb-color radial-gradient(#2d3748, #1d232e) Slider thumb color when dark mode is off
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-dark","title":"--mbx-slider-thumb-color-dark","text":"Fallback Default --mbx-slider-thumb-color radial-gradient(#e3e4e9, #9b9999) Slider thumb color when dark mode is on
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover","title":"--mbx-slider-thumb-color-hover","text":"Fallback Default / / Fallback value for mbx-slider-thumb-color-hover-light and mbx-slider-thumb-color-hover-dark
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover-light","title":"--mbx-slider-thumb-color-hover-light","text":"Fallback Default --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-light Slider thumb color when dark mode is off, on hover
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover-dark","title":"--mbx-slider-thumb-color-hover-dark","text":"Fallback Default --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-dark Slider thumb color when dark mode is on, on hover
"},{"location":"components/atoms/Slider/props/","title":"Slider properties","text":""},{"location":"components/atoms/Slider/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Slider/props/#props-table","title":"Props table","text":"Parameter Type Default value number / min number / max number / readOnly boolean / onChange (newValue: number) => void () => {}"},{"location":"components/atoms/Slider/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Slider/props/#value","title":"value","text":"Type Default number / Actual slider value
"},{"location":"components/atoms/Slider/props/#min","title":"min","text":"Type Default number / Min allowed value
"},{"location":"components/atoms/Slider/props/#max","title":"max","text":"Type Default number / Max allowed value
"},{"location":"components/atoms/Slider/props/#readonly","title":"readOnly","text":"Type Default boolean / if true, component value can only be set with value parameter
"},{"location":"components/atoms/Slider/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Slider component input value is changed by the user
"},{"location":"components/atoms/Spinner/","title":"Spinner page","text":"A smart status indicator, optionally with custom images showed for every state (defaults are loading,success and error)
"},{"location":"components/atoms/Spinner/css-vars/","title":"Spinner CSS variables","text":""},{"location":"components/atoms/Spinner/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Spinner/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-spinner-success-color / / --mbx-spinner-success-color-light --mbx-spinner-success-color #05bc29 --mbx-spinner-success-color-dark --mbx-spinner-success-color #05bc29 --mbx-spinner-error-color / / --mbx-spinner-error-color-light --mbx-spinner-error-color #ff0000 --mbx-spinner-error-color-dark --mbx-spinner-error-color #ff0000 --mbx-spinner-loading-color / / --mbx-spinner-loading-color-light --mbx-spinner-loading-color #202020 --mbx-spinner-loading-color-dark --mbx-spinner-loading-color #202020"},{"location":"components/atoms/Spinner/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-success-color","title":"--mbx-spinner-success-color","text":"Fallback Default / / Fallback value for --mbx-spinner-success-color-light and --mbx-spinner-success-color-dark
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-success-color-light","title":"--mbx-spinner-success-color-light","text":"Fallback Default --mbx-spinner-success-color #05bc29 Spinner success color when dark mode is off
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-success-color-dark","title":"--mbx-spinner-success-color-dark","text":"Fallback Default --mbx-spinner-success-color #05bc29 Spinner success color when dark mode is on
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-error-color","title":"--mbx-spinner-error-color","text":"Fallback Default / / Fallback value for --mbx-spinner-error-color-light and --mbx-spinner-error-color-dark
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-error-color-light","title":"--mbx-spinner-error-color-light","text":"Fallback Default --mbx-spinner-error-color #ff0000 Spinner error color when dark mode is off
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-error-color-dark","title":"--mbx-spinner-error-color-dark","text":"Fallback Default --mbx-spinner-error-color #ff0000 Spinner error color when dark mode is on
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color","title":"--mbx-spinner-loading-color","text":"Fallback Default / / Fallback value for --mbx-spinner-loading-color-light and --mbx-spinner-loading-color-dark
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color-light","title":"--mbx-spinner-loading-color-light","text":"Fallback Default --mbx-spinner-loading-color #202020 Spinner loading color when dark mode is off
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color-dark","title":"--mbx-spinner-loading-color-dark","text":"Fallback Default --mbx-spinner-loading-color #202020 Spinner loading color when dark mode is on
"},{"location":"components/atoms/Spinner/props/","title":"Spinner properties","text":""},{"location":"components/atoms/Spinner/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Spinner/props/#props-table","title":"Props table","text":"Parameter Type Default value number 'loading' statuses Record /"},{"location":"components/atoms/Spinner/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Spinner/props/#value","title":"value","text":"Type Default number 'loading' Spinner status
"},{"location":"components/atoms/Spinner/props/#statuses","title":"statuses","text":"Type Default Record / Custom statuses, to map every icon with a specific status
"},{"location":"components/atoms/Toggle/","title":"Toggle page","text":"A compact Toggle switcher, customized to reflect its actual status
"},{"location":"components/atoms/Toggle/css-vars/","title":"Toggle CSS variables","text":""},{"location":"components/atoms/Toggle/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Toggle/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-toggle-background / / --mbx-toggle-background-light --mbx-toggle-background --mbx-background-light --mbx-toggle-background-dark --mbx-toggle-background --mbx-background-dark --mbx-toggle-icon-on-internal-color / / --mbx-toggle-icon-on-internal-color-light --mbx-toggle-icon-on-internal-color #ffffff --mbx-toggle-icon-on-internal-color-dark --mbx-toggle-icon-on-internal-color #ffffff --mbx-toggle-icon-on-external-color / / --mbx-toggle-icon-on-external-color-light --mbx-toggle-icon-on-external-color #adadad --mbx-toggle-icon-on-external-color-dark --mbx-toggle-icon-on-external-color #adadad --mbx-toggle-icon-off-internal-color / / --mbx-toggle-icon-off-internal-color-light --mbx-toggle-icon-off-internal-color #a5a5a5 --mbx-toggle-icon-off-internal-color-dark --mbx-toggle-icon-off-internal-color #a5a5a5 --mbx-toggle-icon-off-external-color / / --mbx-toggle-icon-off-external-color-light --mbx-toggle-icon-off-external-color #a7a3a3 --mbx-toggle-icon-off-external-color-dark --mbx-toggle-icon-off-external-color #a7a3a3"},{"location":"components/atoms/Toggle/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-background","title":"--mbx-toggle-background","text":"Fallback Default / / Fallback value for --mbx-toggle-background-light and --mbx-toggle-background-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-background-light","title":"--mbx-toggle-background-light","text":"Fallback Default --mbx-toggle-background --mbx-background-light Toggle background when dark mode is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-background-dark","title":"--mbx-toggle-background-dark","text":"Fallback Default --mbx-toggle-background --mbx-background-dark Toggle background when dark mode is on
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color","title":"--mbx-toggle-icon-on-internal-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-on-internal-color-light and --mbx-toggle-icon-on-internal-color-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color-light","title":"--mbx-toggle-icon-on-internal-color-light","text":"Fallback Default --mbx-toggle-icon-on-internal-color #ffffff Toggle icon internal color, when dark mode is off and toggle status is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color-dark","title":"--mbx-toggle-icon-on-internal-color-dark","text":"Fallback Default --mbx-toggle-icon-on-internal-color #ffffff Toggle icon internal color, when dark mode is off and toggle status is on
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color","title":"--mbx-toggle-icon-on-external-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-on-external-color-light and --mbx-toggle-icon-on-external-color-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color-light","title":"--mbx-toggle-icon-on-external-color-light","text":"Fallback Default --mbx-toggle-icon-on-external-color #adadad Toggle icon external color, when dark mode is off and toggle status is on
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color-dark","title":"--mbx-toggle-icon-on-external-color-dark","text":"Fallback Default --mbx-toggle-icon-on-external-color #adadad Toggle icon external color, when dark mode is on and toggle status is on
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color","title":"--mbx-toggle-icon-off-internal-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-off-internal-color-light and --mbx-toggle-icon-off-internal-color-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color-light","title":"--mbx-toggle-icon-off-internal-color-light","text":"Fallback Default --mbx-toggle-icon-off-internal-color #a5a5a5 Toggle icon internal color, when dark mode is off and toggle status is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color-dark","title":"--mbx-toggle-icon-off-internal-color-dark","text":"Fallback Default --mbx-toggle-icon-off-internal-color #a5a5a5 Toggle icon internal color, when dark mode is on and toggle status is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color","title":"--mbx-toggle-icon-off-external-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-off-external-color-light and --mbx-toggle-icon-off-external-color-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color-light","title":"--mbx-toggle-icon-off-external-color-light","text":"Fallback Default --mbx-toggle-icon-off-external-color #a7a3a3 Toggle icon external color, when dark mode is off and toggle status is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color-dark","title":"--mbx-toggle-icon-off-external-color-dark","text":"Fallback Default --mbx-toggle-icon-off-external-color #a7a3a3 Toggle icon external color, when dark mode is on and toggle status is off
"},{"location":"components/atoms/Toggle/props/","title":"Toggle properties","text":""},{"location":"components/atoms/Toggle/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Toggle/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean / onIcon JSX.Element / icon JSX.Element / offIcon JSX.Element / onChange (newValue: boolean) => void () => {}"},{"location":"components/atoms/Toggle/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Toggle/props/#value","title":"value","text":"Type Default boolean / toggle status (true - on/false - off)
"},{"location":"components/atoms/Toggle/props/#onicon","title":"onIcon","text":"Type Default JSX.Element / custom toggle on icon (value === true)
"},{"location":"components/atoms/Toggle/props/#icon","title":"icon","text":"Type Default JSX.Element / custom toggle icon, used as a default icon
"},{"location":"components/atoms/Toggle/props/#officon","title":"offIcon","text":"Type Default JSX.Element / custom toggle off icon (value === false)
"},{"location":"components/atoms/Toggle/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when Toggle component input value is changed by the user
"},{"location":"components/molecules/","title":"MoBrix-ui molecules","text":""},{"location":"components/molecules/#summary","title":"Summary","text":" - Card
- Carousel
- Container
- DismissableCard
- Dropdown
- ExpandableContainer
- FormField
- List
- Modal
- Popup
- RadioButtonGroup
- Review
- Table
- TabViewer
"},{"location":"components/molecules/Card/","title":"Card page","text":"A Card component. Its UI depends on given parameters (header, body and footer)
"},{"location":"components/molecules/Card/css-vars/","title":"Card CSS variables","text":""},{"location":"components/molecules/Card/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Card/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-card-background / / --mbx-card-background-light --mbx-card-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-card-background-dark --mbx-card-background linear-gradient(to right, #2d3748, #1d232e) --mbx-card-text-color / / --mbx-card-text-color-light --mbx-card-text-color --mbx-text-color-light --mbx-card-text-color-dark --mbx-card-text-color --mbx-text-color-dark"},{"location":"components/molecules/Card/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Card/css-vars/#-mbx-card-background","title":"--mbx-card-background","text":"Fallback Default / / Fallback value for --mbx-card-background-light and --mbx-card-background-dark
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-background-light","title":"--mbx-card-background-light","text":"Fallback Default --mbx-card-background linear-gradient(to right, #fff, #ededee, #e6e7e7) Card background when dark mode is off
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-background-dark","title":"--mbx-card-background-dark","text":"Fallback Default --mbx-card-background linear-gradient(to right, #2d3748, #1d232e) Card background when dark mode is on
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-text-color","title":"--mbx-card-text-color","text":"Fallback Default / / Fallback value for --mbx-card-text-color-light and --mbx-card-text-color-dark
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-text-color-light","title":"--mbx-card-text-color-light","text":"Fallback Default --mbx-card-text-color --mbx-text-color-light Card text color when dark mode is off
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-text-color-dark","title":"--mbx-card-text-color-dark","text":"Fallback Default --mbx-card-text-color --mbx-text-color-dark Card text color when dark mode is on
"},{"location":"components/molecules/Card/props/","title":"Card properties","text":""},{"location":"components/molecules/Card/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Card/props/#props-table","title":"Props table","text":"Parameter Type Default header JSX.Element | string / body JSX.Element | string / footer JSX.Element | string / headerClassName string / bodyClassName string / footerClassName string / headerProps Record / bodyProps Record / footerProps Record / noDivider boolean / noTopDivider boolean / noBottomDivider boolean / dividerSize string 1px children JSX.Element | string /"},{"location":"components/molecules/Card/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Card/props/#header","title":"header","text":"Type Default JSX.Element | string / Card header content
"},{"location":"components/molecules/Card/props/#body","title":"body","text":"Type Default JSX.Element | string / Card body content
"},{"location":"components/molecules/Card/props/#footer","title":"footer","text":"Type Default JSX.Element | string / Card footer content
"},{"location":"components/molecules/Card/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on the Card header
"},{"location":"components/molecules/Card/props/#bodyclassname","title":"bodyClassName","text":"Type Default string / Custom classname applied on the Card body
"},{"location":"components/molecules/Card/props/#footerclassname","title":"footerClassName","text":"Type Default string / Custom classname applied on the Card footer
"},{"location":"components/molecules/Card/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on the Card header
"},{"location":"components/molecules/Card/props/#bodyprops","title":"bodyProps","text":"Type Default Record / Custom props applied on the Card body
"},{"location":"components/molecules/Card/props/#footerprops","title":"footerProps","text":"Type Default Record / Custom props applied on the Card footer
"},{"location":"components/molecules/Card/props/#nodivider","title":"noDivider","text":"Type Default boolean / If true, hide all dividers
"},{"location":"components/molecules/Card/props/#notopdivider","title":"noTopDivider","text":"Type Default boolean / If true, hide the top divider, between header and body
"},{"location":"components/molecules/Card/props/#nobottomdivider","title":"noBottomDivider","text":"Type Default boolean / If true, hide the top divider, between body and footer
"},{"location":"components/molecules/Card/props/#dividersize","title":"dividerSize","text":"Type Default string 1px Set the size of the top and the bottom divider
"},{"location":"components/molecules/Card/props/#children","title":"children","text":"Type Default JSX.Element | string / Card content
"},{"location":"components/molecules/Carousel/","title":"Carousel page","text":"A compact carousel, to show any component (or image) into a slide, with dots and arrow button to go next/previous
"},{"location":"components/molecules/Carousel/css-vars/","title":"Carousel CSS variables","text":""},{"location":"components/molecules/Carousel/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Carousel/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-carousel-background / / --mbx-carousel-background-light --mbx-carousel-background --mbx-background-light --mbx-carousel-background-dark --mbx-carousel-background --mbx-background-dark --mbx-carousel-arrow / / --mbx-carousel-arrow-light --mbx-carousel-arrow #252525 --mbx-carousel-arrow-dark --mbx-carousel-arrow #e2e2e2 --mbx-carousel-arrow-hover / / --mbx-carousel-arrow-hover-light --mbx-carousel-arrow-hover #287dfd --mbx-carousel-arrow-hover-dark --mbx-carousel-arrow-hover #ff8007 --mbx-carousel-dot-empty-background / / --mbx-carousel-dot-empty-background-light --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) --mbx-carousel-dot-empty-background-dark --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) --mbx-carousel-dot-full-background / / --mbx-carousel-dot-full-background-light --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) --mbx-carousel-dot-full-background-dark --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4)"},{"location":"components/molecules/Carousel/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-background","title":"--mbx-carousel-background","text":"Fallback Default / / Fallback value for --mbx-carousel-background-light and --mbx-carousel-background-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-background-light","title":"--mbx-carousel-background-light","text":"Fallback Default --mbx-carousel-background --mbx-background-light Carousel background when dark mode is off
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-background-dark","title":"--mbx-carousel-background-dark","text":"Fallback Default --mbx-carousel-background --mbx-background-dark Carousel background when dark mode is on
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow","title":"--mbx-carousel-arrow","text":"Fallback Default / / Fallback value for --mbx-carousel-arrow-light and --mbx-carousel-arrow-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-light","title":"--mbx-carousel-arrow-light","text":"Fallback Default --mbx-carousel-arrow #252525 Carousel arrow color when dark mode is off
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-dark","title":"--mbx-carousel-arrow-dark","text":"Fallback Default --mbx-carousel-arrow #e2e2e2 Carousel arrow color when dark mode is on
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-hover","title":"--mbx-carousel-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-carousel-arrow-hover-light and --mbx-carousel-arrow-hover-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-hover-light","title":"--mbx-carousel-arrow-hover-light","text":"Fallback Default --mbx-carousel-arrow-hover #287dfd Carousel arrow color when dark mode is off, on hover
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-hover-dark","title":"--mbx-carousel-arrow-hover-dark","text":"Fallback Default --mbx-carousel-arrow-hover #ff8007 Carousel arrow color when dark mode is on, on hover
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background","title":"--mbx-carousel-dot-empty-background","text":"Fallback Default / / Fallback value for --mbx-carousel-dot-empty-background-light and --mbx-carousel-dot-empty-background-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background-light","title":"--mbx-carousel-dot-empty-background-light","text":"Fallback Default --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) Carousel empty dot background when dark mode is off
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background-dark","title":"--mbx-carousel-dot-empty-background-dark","text":"Fallback Default --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) Carousel empty dot background when dark mode is on
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background","title":"--mbx-carousel-dot-full-background","text":"Fallback Default / / Fallback value for --mbx-carousel-dot-full-background-light and --mbx-carousel-dot-full-background-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background-light","title":"--mbx-carousel-dot-full-background-light","text":"Fallback Default --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) Carousel full dot background when dark mode is off
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background-dark","title":"--mbx-carousel-dot-full-background-dark","text":"Fallback Default --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) Carousel full dot background when dark mode is on
"},{"location":"components/molecules/Carousel/props/","title":"Carousel properties","text":""},{"location":"components/molecules/Carousel/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Carousel/props/#props-table","title":"Props table","text":"Parameter Type Default elements (JSX.Element | string)[] [] onChange (newValue: number) => void () => {} value number 0 arrowClassName string / dotClassName string /"},{"location":"components/molecules/Carousel/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Carousel/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] [] Carousel elements
"},{"location":"components/molecules/Carousel/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Carousel component input value is changed by the user
"},{"location":"components/molecules/Carousel/props/#value","title":"value","text":"Type Default number 0 Initial element to show (as index)
"},{"location":"components/molecules/Carousel/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the Carousel arrows
"},{"location":"components/molecules/Carousel/props/#dotclassname","title":"dotClassName","text":"Type Default string / Custom classname applied on every Carousel dot
"},{"location":"components/molecules/Container/","title":"Container page","text":"A simple but smart container, enhanced with MoBrix-ui common props
"},{"location":"components/molecules/Container/css-vars/","title":"Container CSS variables","text":""},{"location":"components/molecules/Container/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Container/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-container-background / / --mbx-container-background-light --mbx-container-background --mbx-background-light --mbx-container-background-dark --mbx-container-background --mbx-background-dark --mbx-container-text-color / / --mbx-container-text-color-light --mbx-container-text-color --mbx-text-color-light --mbx-container-text-color-dark --mbx-container-text-color --mbx-text-color-dark"},{"location":"components/molecules/Container/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Container/css-vars/#-mbx-container-background","title":"--mbx-container-background","text":"Fallback Default / / Fallback value for --mbx-container-background-light and --mbx-container-background-dark
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-background-light","title":"--mbx-container-background-light","text":"Fallback Default --mbx-container-background --mbx-background-light Container background when dark mode is off
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-background-dark","title":"--mbx-container-background-dark","text":"Fallback Default --mbx-container-background --mbx-background-dark Container background when dark mode is on
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-text-color","title":"--mbx-container-text-color","text":"Fallback Default / / Fallback value for --mbx-container-text-color-light and --mbx-container-text-color-dark
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-text-color-light","title":"--mbx-container-text-color-light","text":"Fallback Default --mbx-container-text-color --mbx-text-color-light Container text color when dark mode is off
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-text-color-dark","title":"--mbx-container-text-color-dark","text":"Fallback Default --mbx-container-text-color --mbx-text-color-dark Container text color when dark mode is on
"},{"location":"components/molecules/Container/props/","title":"Container properties","text":""},{"location":"components/molecules/Container/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Container/props/#props-table","title":"Props table","text":"Parameter Type Default children any / wrapper div | header | footer div"},{"location":"components/molecules/Container/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Container/props/#children","title":"children","text":"Type Default any / content to render inside Container
"},{"location":"components/molecules/Container/props/#wrapper","title":"wrapper","text":"Type Default div | header | footer div component wrapper type
"},{"location":"components/molecules/DismissableCard/","title":"DismissableCard page","text":"A standard Card with a dismiss function
"},{"location":"components/molecules/DismissableCard/css-vars/","title":"DismissableCard CSS variables","text":""},{"location":"components/molecules/DismissableCard/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/DismissableCard/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-dismissablecard-background / / --mbx-dismissablecard-background-light --mbx-dismissablecard-background --mbx-card-background-light --mbx-dismissablecard-background-dark --mbx-dismissablecard-background --mbx-card-background-dark --mbx-dismissablecard-text-color / / --mbx-dismissablecard-text-color-light --mbx-dismissablecard-text-color --mbx-card-text-color-light --mbx-dismissablecard-text-color-dark --mbx-dismissablecard-text-color --mbx-card-text-color-dark --mbx-dismissablecard-x-color / / --mbx-dismissablecard-x-color-light --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-light --mbx-dismissablecard-x-color-dark --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-dark --mbx-dismissablecard-x-color-hover / / --mbx-dismissablecard-x-color-hover-light --mbx-dismissablecard-x-color-hover red --mbx-dismissablecard-x-color-hover-dark --mbx-dismissablecard-x-color-hover red"},{"location":"components/molecules/DismissableCard/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background","title":"--mbx-dismissablecard-background","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-background-light and --mbx-dismissablecard-background-dark
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background-light","title":"--mbx-dismissablecard-background-light","text":"Fallback Default --mbx-dismissablecard-background --mbx-card-background-light DismissableCard background when dark mode is off
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background-dark","title":"--mbx-dismissablecard-background-dark","text":"Fallback Default --mbx-dismissablecard-background --mbx-card-background-dark DismissableCard background when dark mode is on
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color","title":"--mbx-dismissablecard-text-color","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-text-color-light and --mbx-dismissablecard-text-color-dark
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color-light","title":"--mbx-dismissablecard-text-color-light","text":"Fallback Default --mbx-dismissablecard-text-color --mbx-card-text-color-light DismissableCard text color when dark mode is off
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color-dark","title":"--mbx-dismissablecard-text-color-dark","text":"Fallback Default --mbx-dismissablecard-text-color --mbx-card-text-color-dark DismissableCard text color when dark mode is on
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color","title":"--mbx-dismissablecard-x-color","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-x-color-light and --mbx-dismissablecard-x-color-dark
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-light","title":"--mbx-dismissablecard-x-color-light","text":"Fallback Default --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-light DismissableCard x icon color when dark mode is off
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-dark","title":"--mbx-dismissablecard-x-color-dark","text":"Fallback Default --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-dark DismissableCard x icon color when dark mode is on
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover","title":"--mbx-dismissablecard-x-color-hover","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-x-color-hover-light and --mbx-dismissablecard-x-color-hover-dark
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover-light","title":"--mbx-dismissablecard-x-color-hover-light","text":"Fallback Default --mbx-dismissablecard-x-color-hover red DismissableCard x icon color when dark mode is off, on hover
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover-dark","title":"--mbx-dismissablecard-x-color-hover-dark","text":"Fallback Default --mbx-dismissablecard-x-color-hover red DismissableCard x icon color when dark mode is on, on hover
"},{"location":"components/molecules/DismissableCard/props/","title":"DismissableCard properties","text":""},{"location":"components/molecules/DismissableCard/props/#summary","title":"Summary","text":""},{"location":"components/molecules/DismissableCard/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} alwaysVisible boolean false header JSX.Element | string / body JSX.Element | string / footer JSX.Element | string / noDivider boolean / noTopDivider boolean / noBottomDivider boolean / children JSX.Element | string / headerClassName string / bodyClassName string / footerClassName string / headerProps Record / bodyProps Record / footerProps Record / dividerSize string 1px"},{"location":"components/molecules/DismissableCard/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/DismissableCard/props/#onclose","title":"onClose","text":"Type Default () => void () => {} Callback triggered when the X icon is clicked
"},{"location":"components/molecules/DismissableCard/props/#alwaysvisible","title":"alwaysVisible","text":"Type Default boolean false If true, the DismissableCard won't disappear if the X icon is clicked (can be hidden with hide shared prop)
"},{"location":"components/molecules/DismissableCard/props/#header","title":"header","text":"Type Default JSX.Element | string / Card header content - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#body","title":"body","text":"Type Default JSX.Element | string / Card body content - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#footer","title":"footer","text":"Type Default JSX.Element | string / Card footer content - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#nodivider","title":"noDivider","text":"Type Default boolean / If true, hide all dividers - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#notopdivider","title":"noTopDivider","text":"Type Default boolean / If true, hide the top divider, between header and body - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#nobottomdivider","title":"noBottomDivider","text":"Type Default boolean / If true, hide the top divider, between body and footer - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#children","title":"children","text":"Type Default JSX.Element | string / Card content - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on the Card header - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#bodyclassname","title":"bodyClassName","text":"Type Default string / Custom classname applied on the Card body - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#footerclassname","title":"footerClassName","text":"Type Default string / Custom classname applied on the Card footer - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on the Card header - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#bodyprops","title":"bodyProps","text":"Type Default Record / Custom props applied on the Card body - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#footerprops","title":"footerProps","text":"Type Default Record / Custom props applied on the Card footer - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#dividersize","title":"dividerSize","text":"Type Default string 1px Set the size of the top and the bottom divider - extended from Card component
"},{"location":"components/molecules/Dropdown/","title":"Dropdown page","text":"Show a list of elements in a dropdown menu (with fade-in and out effects). Can be easily customized and every element style and behaviour (with a callback) can be customized too.
"},{"location":"components/molecules/Dropdown/css-vars/","title":"Dropdown CSS variables","text":""},{"location":"components/molecules/Dropdown/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Dropdown/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-dropdown-background / / --mbx-dropdown-background-light --mbx-dropdown-background --mbx-background-light --mbx-dropdown-background-dark --mbx-dropdown-background --mbx-background-dark --mbx-dropdown-text-color / / --mbx-dropdown-text-color-light --mbx-dropdown-text-color --mbx-text-color-light --mbx-dropdown-text-color-dark --mbx-dropdown-text-color --mbx-text-color-dark --mbx-dropdown-background-hover / / --mbx-dropdown-background-hover-light --mbx-dropdown-background --mbx-background-hover-light --mbx-dropdown-background-hover-dark --mbx-dropdown-background --mbx-background-hover-dark --mbx-dropdown-text-color-hover / / --mbx-dropdown-text-color-hover-light --mbx-dropdown-text-color-hover --mbx-text-color-hover-light --mbx-dropdown-text-color-hover-dark --mbx-dropdown-text-color-hover --mbx-text-color-hover-light --mbx-dropdown-arrow / / --mbx-dropdown-arrow-light --mbx-dropdown-arrow --mbx-dropdown-text-color-light --mbx-dropdown-arrow-dark --mbx-dropdown-arrow --mbx-dropdown-text-color-dark --mbx-dropdown-arrow-hover / / --mbx-dropdown-arrow-hover-light --mbx-dropdown-arrow-hover --mbx-dropdown-arrow-light --mbx-dropdown-arrow-hover-dark --mbx-dropdown-arrow-hover --mbx-dropdown-arrow-dark"},{"location":"components/molecules/Dropdown/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background","title":"--mbx-dropdown-background","text":"Fallback Default / / Fallback value for --mbx-dropdown-background-light and --mbx-dropdown-background-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-light","title":"--mbx-dropdown-background-light","text":"Fallback Default --mbx-dropdown-background --mbx-background-light Dropdown background when dark mode is off
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-dark","title":"--mbx-dropdown-background-dark","text":"Fallback Default --mbx-dropdown-background --mbx-background-dark Dropdown background when dark mode is on
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color","title":"--mbx-dropdown-text-color","text":"Fallback Default / / Fallback value for --mbx-dropdown-text-color-light and --mbx-dropdown-text-color-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-light","title":"--mbx-dropdown-text-color-light","text":"Fallback Default --mbx-dropdown-text-color --mbx-text-color-light Dropdown text color when dark mode is off
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-dark","title":"--mbx-dropdown-text-color-dark","text":"Fallback Default --mbx-dropdown-text-color --mbx-text-color-dark Dropdown text color when dark mode is on
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover","title":"--mbx-dropdown-background-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-background-hover-light and --mbx-dropdown-background-hover-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover-light","title":"--mbx-dropdown-background-hover-light","text":"Fallback Default --mbx-dropdown-background --mbx-background-hover-light Dropdown background when dark mode is off, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover-dark","title":"--mbx-dropdown-background-hover-dark","text":"Fallback Default --mbx-dropdown-background --mbx-background-hover-dark Dropdown background when dark mode is on, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover","title":"--mbx-dropdown-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-text-color-hover-light and --mbx-dropdown-text-color-hover-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover-light","title":"--mbx-dropdown-text-color-hover-light","text":"Fallback Default --mbx-dropdown-text-color-hover --mbx-text-color-hover-light Dropdown text color when dark mode is off, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover-dark","title":"--mbx-dropdown-text-color-hover-dark","text":"Fallback Default --mbx-dropdown-text-color-hover --mbx-text-color-hover-light Dropdown text color when dark mode is on, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow","title":"--mbx-dropdown-arrow","text":"Fallback Default / / Fallback value for --mbx-dropdown-arrow-light and --mbx-dropdown-arrow-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-light","title":"--mbx-dropdown-arrow-light","text":"Fallback Default --mbx-dropdown-arrow --mbx-dropdown-text-color-light Dropdown arrow color when dark mode is off
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-dark","title":"--mbx-dropdown-arrow-dark","text":"Fallback Default --mbx-dropdown-arrow --mbx-dropdown-text-color-dark Dropdown arrow color when dark mode is on
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-hover","title":"--mbx-dropdown-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-arrow-hover-light and --mbx-dropdown-arrow-hover-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-hover-light","title":"--mbx-dropdown-arrow-hover-light","text":"Fallback Default --mbx-dropdown-arrow-hover --mbx-dropdown-arrow-light Dropdown arrow color when dark mode is off, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-hover-dark","title":"--mbx-dropdown-arrow-hover-dark","text":"Fallback Default --mbx-dropdown-arrow-hover --mbx-dropdown-arrow-dark Dropdown arrow color when dark mode is on, on hover
"},{"location":"components/molecules/Dropdown/props/","title":"Dropdown properties","text":""},{"location":"components/molecules/Dropdown/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Dropdown/props/#props-table","title":"Props table","text":"Parameter Type Default value number / elements (JSX.Element | string)[] [] hideArrow boolean false onChange (newValue: number) => void () => {}"},{"location":"components/molecules/Dropdown/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Dropdown/props/#value","title":"value","text":"Type Default number / actual selected element (as index). If not set, default value will be used.
"},{"location":"components/molecules/Dropdown/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] [] Dropdown content elements
"},{"location":"components/molecules/Dropdown/props/#hidearrow","title":"hideArrow","text":"Type Default boolean false If true, hide the arrow icon near selected element
"},{"location":"components/molecules/Dropdown/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when selecting new element from dropdown
"},{"location":"components/molecules/ExpandableContainer/","title":"ExpandableContainer page","text":"An exapandable container, to hide/show some content on demand.
"},{"location":"components/molecules/ExpandableContainer/css-vars/","title":"ExpandableContainer CSS variables","text":""},{"location":"components/molecules/ExpandableContainer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/ExpandableContainer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-expandablecontainer-background / / --mbx-expandablecontainer-background-light --mbx-expandablecontainer-background mbx-container-background-light --mbx-expandablecontainer-background-dark --mbx-expandablecontainer-background mbx-container-background-dark --mbx-expandablecontainer-text-color / / --mbx-expandablecontainer-text-color-light --mbx-expandablecontainer-text-color mbx-container-text-color-light --mbx-expandablecontainer-text-color-dark --mbx-expandablecontainer-text-color mbx-container-text-color-dark --mbx-expandablecontainer-arrow / / --mbx-expandablecontainer-arrow-light --mbx-expandablecontainer-arrow --mbx-expandablecontainer-text-color-light --mbx-expandablecontainer-arrow-dark --mbx-expandablecontainer-arrow --mbx-expandablecontainer-text-color-dark --mbx-expandablecontainer-arrow-hover / / --mbx-expandablecontainer-arrow-hover-light --mbx-expandablecontainer-arrow-hover --mbx-expandablecontainer-arrow-lrrowight --mbx-expandablecontainer-arrow-hover-dark --mbx-expandablecontainer-arrow-hover --mbx-expandablecontainer-a-color-dark"},{"location":"components/molecules/ExpandableContainer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background","title":"--mbx-expandablecontainer-background","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-background-light and --mbx-expandablecontainer-background-dark
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background-light","title":"--mbx-expandablecontainer-background-light","text":"Fallback Default --mbx-expandablecontainer-background mbx-container-background-light ExpandableContainer background when dark mode is off
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background-dark","title":"--mbx-expandablecontainer-background-dark","text":"Fallback Default --mbx-expandablecontainer-background mbx-container-background-dark ExpandableContainer background when dark mode is on
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color","title":"--mbx-expandablecontainer-text-color","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-text-color-light and --mbx-expandablecontainer-text-color-dark
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color-light","title":"--mbx-expandablecontainer-text-color-light","text":"Fallback Default --mbx-expandablecontainer-text-color mbx-container-text-color-light ExpandableContainer text color when dark mode is off
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color-dark","title":"--mbx-expandablecontainer-text-color-dark","text":"Fallback Default --mbx-expandablecontainer-text-color mbx-container-text-color-dark ExpandableContainer text color when dark mode is on
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow","title":"--mbx-expandablecontainer-arrow","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-arrow-light and --mbx-expandablecontainer-arrow-dark
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-light","title":"--mbx-expandablecontainer-arrow-light","text":"Fallback Default --mbx-expandablecontainer-arrow --mbx-expandablecontainer-text-color-light ExpandableContainer arrow color when dark mode is off
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-dark","title":"--mbx-expandablecontainer-arrow-dark","text":"Fallback Default --mbx-expandablecontainer-arrow --mbx-expandablecontainer-text-color-dark ExpandableContainer arrow color when dark mode is on
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-hover","title":"--mbx-expandablecontainer-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-arrow-hover-light and --mbx-expandablecontainer-arrow-hover-dark
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-hover-light","title":"--mbx-expandablecontainer-arrow-hover-light","text":"Fallback Default --mbx-expandablecontainer-arrow-hover --mbx-expandablecontainer-arrow-lrrowight ExpandableContainer arrow color when dark mode is off, on hover
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-hover-dark","title":"--mbx-expandablecontainer-arrow-hover-dark","text":"Fallback Default --mbx-expandablecontainer-arrow-hover --mbx-expandablecontainer-a-color-dark ExpandableContainer arrow color when dark mode is on, on hover
"},{"location":"components/molecules/ExpandableContainer/props/","title":"ExpandableContainer properties","text":""},{"location":"components/molecules/ExpandableContainer/props/#summary","title":"Summary","text":""},{"location":"components/molecules/ExpandableContainer/props/#props-table","title":"Props table","text":"Parameter Type Default children any / wrapper div | header | footer div expanded boolean / compact boolean / onChange (newValue: boolean) => void () => {}"},{"location":"components/molecules/ExpandableContainer/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/ExpandableContainer/props/#children","title":"children","text":"Type Default any / content to render inside Container - extended from Container component
"},{"location":"components/molecules/ExpandableContainer/props/#wrapper","title":"wrapper","text":"Type Default div | header | footer div component wrapper type - extended from Container component
"},{"location":"components/molecules/ExpandableContainer/props/#expanded","title":"expanded","text":"Type Default boolean / Extra content showed only when container is expanded (compact === true)
"},{"location":"components/molecules/ExpandableContainer/props/#compact","title":"compact","text":"Type Default boolean / if true, shows the whole container content
"},{"location":"components/molecules/ExpandableContainer/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when ExpandableContainer component input value is changed by the user
"},{"location":"components/molecules/FormField/","title":"FormField page","text":"A single form field. Depending on its type, a different input component is used inside
"},{"location":"components/molecules/FormField/css-vars/","title":"FormField CSS variables","text":""},{"location":"components/molecules/FormField/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/FormField/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-formfield-background / / --mbx-formfield-background-dark --mbx-formfield-background --mbx-background-dark --mbx-formfield-background-light --mbx-formfield-background --mbx-background-light --mbx-formfield-text-color / / --mbx-formfield-text-color-light --mbx-formfield-text-color --mbx-text-color-light --mbx-formfield-text-color-dark --mbx-formfield-text-color --mbx-text-color-dark --mbx-formfield-background-hover / / --mbx-formfield-background-hover-light --mbx-formfield-background-hover --mbx-background-hover-light --mbx-formfield-background-hover-dark --mbx-formfield-background-hover --mbx-background-hover-light --mbx-formfield-text-color-hover / / --mbx-formfield-text-color-hover-light --mbx-formfield-text-color-hover --mbx-text-color-hover-light --mbx-formfield-text-color-hover-dark --mbx-formfield-text-color-hover --mbx-text-color-hover-dark --mbx-formfield-error-border / / --mbx-formfield-error-border-light --mbx-formfield-error-border red --mbx-formfield-error-border-dark --mbx-formfield-error-border red --mbx-formfield-error-text / / --mbx-formfield-error-text-light --mbx-formfield-error-text red --mbx-formfield-error-text-dark --mbx-formfield-error-text red"},{"location":"components/molecules/FormField/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background","title":"--mbx-formfield-background","text":"Fallback Default / / Fallback value for --mbx-formfield-background-light and --mbx-formfield-background-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-dark","title":"--mbx-formfield-background-dark","text":"Fallback Default --mbx-formfield-background --mbx-background-dark FormField background when dark mode is off
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-light","title":"--mbx-formfield-background-light","text":"Fallback Default --mbx-formfield-background --mbx-background-light FormField background when dark mode is on
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color","title":"--mbx-formfield-text-color","text":"Fallback Default / / Fallback value for --mbx-formfield-text-color-light and --mbx-formfield-text-color-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-light","title":"--mbx-formfield-text-color-light","text":"Fallback Default --mbx-formfield-text-color --mbx-text-color-light FormField text color when dark mode is off
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-dark","title":"--mbx-formfield-text-color-dark","text":"Fallback Default --mbx-formfield-text-color --mbx-text-color-dark FormField text color when dark mode is on
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-hover","title":"--mbx-formfield-background-hover","text":"Fallback Default / / Fallback value for --mbx-formfield-background-hover-light and --mbx-formfield-background-hover-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-hover-light","title":"--mbx-formfield-background-hover-light","text":"Fallback Default --mbx-formfield-background-hover --mbx-background-hover-light FormField background when dark mode is off, on hover
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-hover-dark","title":"--mbx-formfield-background-hover-dark","text":"Fallback Default --mbx-formfield-background-hover --mbx-background-hover-light FormField background when dark mode is on, on hover
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover","title":"--mbx-formfield-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-formfield-text-color-hover-light and --mbx-formfield-text-color-hover-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover-light","title":"--mbx-formfield-text-color-hover-light","text":"Fallback Default --mbx-formfield-text-color-hover --mbx-text-color-hover-light FormField text color when dark mode is off, on hover
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover-dark","title":"--mbx-formfield-text-color-hover-dark","text":"Fallback Default --mbx-formfield-text-color-hover --mbx-text-color-hover-dark FormField text color when dark mode is on, on hover
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-border","title":"--mbx-formfield-error-border","text":"Fallback Default / / Fallback value for --mbx-formfield-error-border-light and --mbx-formfield-error-border-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-border-light","title":"--mbx-formfield-error-border-light","text":"Fallback Default --mbx-formfield-error-border red FormField error box border color when dark mode is off
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-border-dark","title":"--mbx-formfield-error-border-dark","text":"Fallback Default --mbx-formfield-error-border red FormField error box border color when dark mode is on
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-text","title":"--mbx-formfield-error-text","text":"Fallback Default / / Fallback value for --mbx-formfield-error-text-light and --mbx-formfield-error-text-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-text-light","title":"--mbx-formfield-error-text-light","text":"Fallback Default --mbx-formfield-error-text red FormField error box text color when dark mode is off
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-text-dark","title":"--mbx-formfield-error-text-dark","text":"Fallback Default --mbx-formfield-error-text red FormField error box text color when dark mode is on
"},{"location":"components/molecules/FormField/props/","title":"FormField properties","text":""},{"location":"components/molecules/FormField/props/#summary","title":"Summary","text":""},{"location":"components/molecules/FormField/props/#props-table","title":"Props table","text":"Parameter Type Default value / / type boolean | text | numeric | radio | checkbox | toggle | rater | slider | input | counter | password 'text' placeholder string / required boolean / validate (fieldValue: any) => boolean () => \u02da{} header JSX.Element | string / headerClassName string / headerProps Record / errorLabel JSX.Element | string /"},{"location":"components/molecules/FormField/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/FormField/props/#value","title":"value","text":"Type Default / / FormField input content
"},{"location":"components/molecules/FormField/props/#type","title":"type","text":"Type Default boolean | text | numeric | radio | checkbox | toggle | rater | slider | input | counter | password 'text' The field type. It determines the UI component to be used to render it. Allowed types are:
boolean (rendered as a CheckBox)numeric (rendered as a Counter)text (rendered as a Input)radio (rendered as a RadioButton)checkbox (rendered as a CheckBox)toggle (rendered as a Toggle)rater (rendered as a Rater)slider (rendered as a Slider)input (rendered as a Input)counter (rendered as a Counter)password (rendered as a Password)
"},{"location":"components/molecules/FormField/props/#placeholder","title":"placeholder","text":"Type Default string /"},{"location":"components/molecules/FormField/props/#required","title":"required","text":"Type Default boolean / If true, the field switch to error state if its value is empty
"},{"location":"components/molecules/FormField/props/#validate","title":"validate","text":"Type Default (fieldValue: any) => boolean () => \u02da{} Custom validation function called on submit
"},{"location":"components/molecules/FormField/props/#header","title":"header","text":"Type Default JSX.Element | string / Form field header
"},{"location":"components/molecules/FormField/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on every header element
"},{"location":"components/molecules/FormField/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on every header element (including MoBrix-ui shared props)
"},{"location":"components/molecules/FormField/props/#errorlabel","title":"errorLabel","text":"Type Default JSX.Element | string / Custom error box content, displayed when FormField is in error state
"},{"location":"components/molecules/List/","title":"List page","text":"A custom bullet list, that support any type of elements
"},{"location":"components/molecules/List/css-vars/","title":"List CSS variables","text":""},{"location":"components/molecules/List/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/List/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-list-text-color / / --mbx-list-text-color-light --mbx-list-text-color --mbx-text-color-light --mbx-list-text-color-dark --mbx-list-text-color --mbx-text-color-dark --mbx-list-text-color-hover / / --mbx-list-text-color-hover-light --mbx-list-text-color-hover --mbx-text-color-hover-light --mbx-list-text-color-hover-dark --mbx-list-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/molecules/List/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color","title":"--mbx-list-text-color","text":"Fallback Default / / Fallback value for --mbx-list-text-color-light and --mbx-list-text-color-dark
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-light","title":"--mbx-list-text-color-light","text":"Fallback Default --mbx-list-text-color --mbx-text-color-light List element text color when dark is off
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-dark","title":"--mbx-list-text-color-dark","text":"Fallback Default --mbx-list-text-color --mbx-text-color-dark List element text color when dark is on
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-hover","title":"--mbx-list-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-list-text-color-hover-light and --mbx-list-text-color-hover-dark
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-hover-light","title":"--mbx-list-text-color-hover-light","text":"Fallback Default --mbx-list-text-color-hover --mbx-text-color-hover-light List element text color when dark is off, on hover
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-hover-dark","title":"--mbx-list-text-color-hover-dark","text":"Fallback Default --mbx-list-text-color-hover --mbx-text-color-hover-dark List element text color when dark is on, on hover
"},{"location":"components/molecules/List/props/","title":"List properties","text":""},{"location":"components/molecules/List/props/#summary","title":"Summary","text":""},{"location":"components/molecules/List/props/#props-table","title":"Props table","text":"Parameter Type Default elements (JSX.Element | string)[] / onClick () => void () => {}"},{"location":"components/molecules/List/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/List/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] / List elements
"},{"location":"components/molecules/List/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when a list element is clicked
"},{"location":"components/molecules/Modal/","title":"Modal page","text":"A Modal component, with an optional close button
"},{"location":"components/molecules/Modal/css-vars/","title":"Modal CSS variables","text":""},{"location":"components/molecules/Modal/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Modal/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-modal-background / / --mbx-modal-background-light --mbx-modal-background rgba(0, 0, 0, 0.8) --mbx-modal-background-dark --mbx-modal-background rgba(0, 0, 0, 0.8) --mbx-modal-x-color / / --mbx-modal-x-color-light --mbx-modal-x-color white --mbx-modal-x-color-dark --mbx-modal-x-color white --mbx-modal-x-color-hover / / --mbx-modal-x-color-hover-light --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-light --mbx-modal-x-color-hover-dark --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-dark"},{"location":"components/molecules/Modal/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-background","title":"--mbx-modal-background","text":"Fallback Default / / Fallback value for --mbx-modal-background-light and --mbx-modal-background-dark
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-background-light","title":"--mbx-modal-background-light","text":"Fallback Default --mbx-modal-background rgba(0, 0, 0, 0.8) Modal background when dark mode is off
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-background-dark","title":"--mbx-modal-background-dark","text":"Fallback Default --mbx-modal-background rgba(0, 0, 0, 0.8) Modal background when dark mode is on
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color","title":"--mbx-modal-x-color","text":"Fallback Default / / Fallback value for --mbx-modal-x-color-light and --mbx-modal-x-color-dark
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-light","title":"--mbx-modal-x-color-light","text":"Fallback Default --mbx-modal-x-color white Modal x icon color when dark mode is off
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-dark","title":"--mbx-modal-x-color-dark","text":"Fallback Default --mbx-modal-x-color white Modal x icon color when dark mode is on
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover","title":"--mbx-modal-x-color-hover","text":"Fallback Default / / Fallback value for --mbx-modal-x-color-hover-light and --mbx-modal-x-color-hover-dark
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover-light","title":"--mbx-modal-x-color-hover-light","text":"Fallback Default --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-light Modal x icon color when dark mode is off, on hover
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover-dark","title":"--mbx-modal-x-color-hover-dark","text":"Fallback Default --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-dark Modal x icon color when dark mode is on, on hover
"},{"location":"components/molecules/Modal/props/","title":"Modal properties","text":""},{"location":"components/molecules/Modal/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Modal/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} children JSX.Element | string /"},{"location":"components/molecules/Modal/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Modal/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Modal is closed
"},{"location":"components/molecules/Modal/props/#children","title":"children","text":"Type Default JSX.Element | string / Modal content
"},{"location":"components/molecules/Popup/","title":"Popup page","text":"A Popup container, displayed upon every other component, overlayed
"},{"location":"components/molecules/Popup/css-vars/","title":"Popup CSS variables","text":""},{"location":"components/molecules/Popup/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Popup/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-popup-background / / --mbx-popup-background-light --mbx-popup-background --mbx-background-light --mbx-popup-background-dark --mbx-popup-background --mbx-background-dark --mbx-popup-text-color / / --mbx-popup-text-color-light --mbx-popup-text-color --mbx-text-color-light --mbx-popup-text-color-dark --mbx-popup-text-color --mbx-text-color-dark"},{"location":"components/molecules/Popup/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-background","title":"--mbx-popup-background","text":"Fallback Default / / Fallback value for --mbx-popup-background-light and --mbx-popup-background-dark
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-background-light","title":"--mbx-popup-background-light","text":"Fallback Default --mbx-popup-background --mbx-background-light Popup background when dark mode is off
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-background-dark","title":"--mbx-popup-background-dark","text":"Fallback Default --mbx-popup-background --mbx-background-dark Popup background when dark mode is on
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-text-color","title":"--mbx-popup-text-color","text":"Fallback Default / / Fallback value for and
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-text-color-light","title":"--mbx-popup-text-color-light","text":"Fallback Default --mbx-popup-text-color --mbx-text-color-light Popup text color when dark mode is off
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-text-color-dark","title":"--mbx-popup-text-color-dark","text":"Fallback Default --mbx-popup-text-color --mbx-text-color-dark Popup text color when dark mode is on
"},{"location":"components/molecules/Popup/props/","title":"Popup properties","text":""},{"location":"components/molecules/Popup/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Popup/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} children JSX.Element | string /"},{"location":"components/molecules/Popup/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Popup/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Popup is closed
"},{"location":"components/molecules/Popup/props/#children","title":"children","text":"Type Default JSX.Element | string / Popup content
"},{"location":"components/molecules/RadioButtonGroup/","title":"RadioButtonGroup page","text":"A flexible and fully customizable radio buttons group
"},{"location":"components/molecules/RadioButtonGroup/css-vars/","title":"RadioButtonGroup CSS variables","text":""},{"location":"components/molecules/RadioButtonGroup/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-radiogroup-background / / --mbx-radiogroup-background-light --mbx-radiogroup-background --mbx-background-light --mbx-radiogroup-background-dark --mbx-radiogroup-background --mbx-background-dark --mbx-radiogroup-text-color / / --mbx-radiogroup-text-color-light --mbx-radiogroup-text-color --mbx-text-color-light --mbx-radiogroup-text-color-dark --mbx-radiogroup-text-color --mbx-text-color-dark --mbx-radiogroup-radio-background / / --mbx-radiogroup-radio-background-light --mbx-radiogroup-radio-background --mbx-radio-background-light --mbx-radiogroup-radio-background-dark --mbx-radiogroup-radio-background --mbx-radio-background-dark --mbx-radiogroup-radio-background-hover / / --mbx-radiogroup-radio-background-hover-light --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-light --mbx-radiogroup-radio-background-hover-dark --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-dark --mbx-radiogroup-radio-icon-background / / --mbx-radiogroup-radio-icon-background-light --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-light --mbx-radiogroup-radio-icon-background-dark --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-dark"},{"location":"components/molecules/RadioButtonGroup/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background","title":"--mbx-radiogroup-background","text":"Fallback Default / / Fallback value for --mbx-radiogroup-background-light and --mbx-radiogroup-background-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background-light","title":"--mbx-radiogroup-background-light","text":"Fallback Default --mbx-radiogroup-background --mbx-background-light RadioGroup background when dark mode is off
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background-dark","title":"--mbx-radiogroup-background-dark","text":"Fallback Default --mbx-radiogroup-background --mbx-background-dark RadioGroup background when dark mode is on
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color","title":"--mbx-radiogroup-text-color","text":"Fallback Default / / Fallback value for --mbx-radiogroup-text-color-light and --mbx-radiogroup-text-color-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color-light","title":"--mbx-radiogroup-text-color-light","text":"Fallback Default --mbx-radiogroup-text-color --mbx-text-color-light RadioGroup text color when dark mode is off
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color-dark","title":"--mbx-radiogroup-text-color-dark","text":"Fallback Default --mbx-radiogroup-text-color --mbx-text-color-dark RadioGroup text color when dark mode is on
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background","title":"--mbx-radiogroup-radio-background","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-background-light and mbx-radiogroup-radio-background-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-light","title":"--mbx-radiogroup-radio-background-light","text":"Fallback Default --mbx-radiogroup-radio-background --mbx-radio-background-light Internal RadioButton background when dark mode is off
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-dark","title":"--mbx-radiogroup-radio-background-dark","text":"Fallback Default --mbx-radiogroup-radio-background --mbx-radio-background-dark Internal RadioButton background when dark mode is on
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover","title":"--mbx-radiogroup-radio-background-hover","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-background-hover-light and mbx-radiogroup-radio-background-hover-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover-light","title":"--mbx-radiogroup-radio-background-hover-light","text":"Fallback Default --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-light Internal RadioButton background when dark mode is off, on hover
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover-dark","title":"--mbx-radiogroup-radio-background-hover-dark","text":"Fallback Default --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-dark Internal RadioButton background when dark mode is on, on hover
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background","title":"--mbx-radiogroup-radio-icon-background","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-icon-background-light and mbx-radiogroup-radio-icon-background-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background-light","title":"--mbx-radiogroup-radio-icon-background-light","text":"Fallback Default --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-light Internal RadioButton icon background when dark mode is off
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background-dark","title":"--mbx-radiogroup-radio-icon-background-dark","text":"Fallback Default --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-dark Internal RadioButton icon background when dark mode is on
"},{"location":"components/molecules/RadioButtonGroup/props/","title":"RadioButtonGroup properties","text":""},{"location":"components/molecules/RadioButtonGroup/props/#summary","title":"Summary","text":""},{"location":"components/molecules/RadioButtonGroup/props/#props-table","title":"Props table","text":"Parameter Type Default value number / buttons { component: JSX.Element, text: string, textPosition: top | bottom | left | right }[] / elementClassName string / radioProps RadioButtonProps / defaultPosition top | bottom | left | right left horizontal boolean false onChange (newValue: number) => void () => {}"},{"location":"components/molecules/RadioButtonGroup/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/RadioButtonGroup/props/#value","title":"value","text":"Type Default number / Selected RadioButton (as index)
"},{"location":"components/molecules/RadioButtonGroup/props/#buttons","title":"buttons","text":"Type Default { component: JSX.Element, text: string, textPosition: top | bottom | left | right }[] / Radio elements array. Every element UI can be driven with attributes. A radio element can contain 3 fields:
- -
component: custom component rendered before radio button - -
text: custom radio text showed near the radio button - -
textPosition: custom text position "},{"location":"components/molecules/RadioButtonGroup/props/#elementclassname","title":"elementClassName","text":"Type Default string / Classname applied on every radio element
"},{"location":"components/molecules/RadioButtonGroup/props/#radioprops","title":"radioProps","text":"Type Default RadioButtonProps / RadioButton props applied on every RadioButton element
"},{"location":"components/molecules/RadioButtonGroup/props/#defaultposition","title":"defaultPosition","text":"Type Default top | bottom | left | right left Default text position for RadioButton elements (when textPosition is not provided)
"},{"location":"components/molecules/RadioButtonGroup/props/#horizontal","title":"horizontal","text":"Type Default boolean false If true, the RadioButton elements are displayed horizontally
"},{"location":"components/molecules/RadioButtonGroup/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when a RadioButton is clicked by the user, giving its index as parameter
"},{"location":"components/molecules/Review/","title":"Review page","text":"A smart review container, useful to show reviews on your web app with custom data inside. Optionally, an external link can be set to redirect user to the platform where the review is located
"},{"location":"components/molecules/Review/css-vars/","title":"Review CSS variables","text":""},{"location":"components/molecules/Review/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Review/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-review-background / / --mbx-review-background-light --mbx-review-background --mbx-background-light --mbx-review-background-dark --mbx-review-background --mbx-background-dark --mbx-review-text-color / / --mbx-review-text-color-light --mbx-review-text-color --mbx-text-color-light --mbx-review-text-color-dark --mbx-review-text-color --mbx-text-color-dark --mbx-review-icon-color / / --mbx-review-icon-color-light --mbx-review-icon-color #615f5f --mbx-review-icon-color-dark --mbx-review-icon-color white"},{"location":"components/molecules/Review/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Review/css-vars/#-mbx-review-background","title":"--mbx-review-background","text":"Fallback Default / / Fallback value for --mbx-review-background-light and --mbx-review-background-dark
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-background-light","title":"--mbx-review-background-light","text":"Fallback Default --mbx-review-background --mbx-background-light Review background when dark mode is off
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-background-dark","title":"--mbx-review-background-dark","text":"Fallback Default --mbx-review-background --mbx-background-dark Review background when dark mode is on
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-text-color","title":"--mbx-review-text-color","text":"Fallback Default / / Fallback value for --mbx-review-text-color-light and --mbx-review-text-color-dark
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-text-color-light","title":"--mbx-review-text-color-light","text":"Fallback Default --mbx-review-text-color --mbx-text-color-light Review text color when dark mode is off
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-text-color-dark","title":"--mbx-review-text-color-dark","text":"Fallback Default --mbx-review-text-color --mbx-text-color-dark Review text color when dark mode is on
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-icon-color","title":"--mbx-review-icon-color","text":"Fallback Default / / Fallback value for --mbx-review-github-color-light and --mbx-review-github-color-dark
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-icon-color-light","title":"--mbx-review-icon-color-light","text":"Fallback Default --mbx-review-icon-color #615f5f Review icon icon color when dark mode is on
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-icon-color-dark","title":"--mbx-review-icon-color-dark","text":"Fallback Default --mbx-review-icon-color white Review icon icon color when dark mode is off
"},{"location":"components/molecules/Review/props/","title":"Review properties","text":""},{"location":"components/molecules/Review/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Review/props/#props-table","title":"Props table","text":"Parameter Type Default user string / description string / icon JSX.Element / url string / logo JSX.Element | string / max number 5 vertical boolean false rate number 0 rateType star|circle 'star'"},{"location":"components/molecules/Review/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Review/props/#user","title":"user","text":"Type Default string / Username displayed above the review description, at the right of the icon
"},{"location":"components/molecules/Review/props/#description","title":"description","text":"Type Default string / Review description displayed below the review username, at the top of the rate
"},{"location":"components/molecules/Review/props/#icon","title":"icon","text":"Type Default JSX.Element / Icon displayed inside the component
"},{"location":"components/molecules/Review/props/#url","title":"url","text":"Type Default string / Review external url. If set, an icon will be displayed at the top right of the review
"},{"location":"components/molecules/Review/props/#logo","title":"logo","text":"Type Default JSX.Element | string / Top icon, displayed at the top right of the container. If not provided, a default icon is displayed (if an url is provided too)
"},{"location":"components/molecules/Review/props/#max","title":"max","text":"Type Default number 5 max vote (max number of icons displayed) - extended from Rater component
"},{"location":"components/molecules/Review/props/#vertical","title":"vertical","text":"Type Default boolean false if true, rate icons will be displayed vertically - extended from Rater component
"},{"location":"components/molecules/Review/props/#rate","title":"rate","text":"Type Default number 0 actual vote - extended from Rater component
"},{"location":"components/molecules/Review/props/#ratetype","title":"rateType","text":"Type Default star|circle 'star' vote icons type - extended from Rater component
"},{"location":"components/molecules/TabViewer/","title":"TabViewer page","text":"A Tab viewer component, to organize elements with tabs and show them on demand
"},{"location":"components/molecules/TabViewer/css-vars/","title":"TabViewer CSS variables","text":""},{"location":"components/molecules/TabViewer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/TabViewer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-tabviewer-background / / --mbx-tabviewer-background-light --mbx-tabviewer-background linear-gradient(to right, #cccccc, #c7c7c7) --mbx-tabviewer-background-dark --mbx-tabviewer-background linear-gradient(to right, #2d3748, #1d232e) --mbx-tabviewer-text-color / / --mbx-tabviewer-text-color-light --mbx-tabviewer-text-color --mbx-text-color-light --mbx-tabviewer-text-color-dark --mbx-tabviewer-text-color --mbx-text-color-dark --mbx-tabviewer-inactive-background / / --mbx-tabviewer-inactive-background-light --mbx-tabviewer-inactive-background linear-gradient(to right, #a1a0a0, #797979) --mbx-tabviewer-inactive-background-dark --mbx-tabviewer-inactive-background linear-gradient(to right, #3e4b63, #3f4858) --mbx-tabviewer-inactive-text-color / / --mbx-tabviewer-inactive-text-color-light --mbx-tabviewer-inactive-text-color #c2c2c2 --mbx-tabviewer-inactive-text-color-dark --mbx-tabviewer-inactive-text-color #c2c2c2 --mbx-tabviewer-inactive-background-hover / / --mbx-tabviewer-inactive-background-hover-light --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #b6b4b4, #999797) --mbx-tabviewer-inactive-background-hover-dark --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #566888, #3c465a) --mbx-tabviewer-inactive-text-color-hover / / --mbx-tabviewer-inactive-text-color-hover-light --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-light --mbx-tabviewer-inactive-text-color-hover-dark --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/molecules/TabViewer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background","title":"--mbx-tabviewer-background","text":"Fallback Default / / Fallback value for --mbx-tabviewer-background-light and --mbx-tabviewer-background-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background-light","title":"--mbx-tabviewer-background-light","text":"Fallback Default --mbx-tabviewer-background linear-gradient(to right, #cccccc, #c7c7c7) TabViewer background when dark mode is `off'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background-dark","title":"--mbx-tabviewer-background-dark","text":"Fallback Default --mbx-tabviewer-background linear-gradient(to right, #2d3748, #1d232e) TabViewer background when dark mode is `on'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color","title":"--mbx-tabviewer-text-color","text":"Fallback Default / / Fallback value for --mbx-tabviewer-text-color-light and --mbx-tabviewer-text-color-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color-light","title":"--mbx-tabviewer-text-color-light","text":"Fallback Default --mbx-tabviewer-text-color --mbx-text-color-light TabViewer text color when dark mode is `off'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color-dark","title":"--mbx-tabviewer-text-color-dark","text":"Fallback Default --mbx-tabviewer-text-color --mbx-text-color-dark TabViewer text color when dark mode is `on'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background","title":"--mbx-tabviewer-inactive-background","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-background-light and --mbx-tabviewer-inactive-background-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-light","title":"--mbx-tabviewer-inactive-background-light","text":"Fallback Default --mbx-tabviewer-inactive-background linear-gradient(to right, #a1a0a0, #797979) TabViewer inactive tab background when dark mode is `off'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-dark","title":"--mbx-tabviewer-inactive-background-dark","text":"Fallback Default --mbx-tabviewer-inactive-background linear-gradient(to right, #3e4b63, #3f4858) TabViewer inactive tab background when dark mode is `on'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color","title":"--mbx-tabviewer-inactive-text-color","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-text-color-light and --mbx-tabviewer-inactive-text-color-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-light","title":"--mbx-tabviewer-inactive-text-color-light","text":"Fallback Default --mbx-tabviewer-inactive-text-color #c2c2c2 TabViewer inactive tab text color when dark mode is `off'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-dark","title":"--mbx-tabviewer-inactive-text-color-dark","text":"Fallback Default --mbx-tabviewer-inactive-text-color #c2c2c2 TabViewer inactive tab text color when dark mode is `on'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover","title":"--mbx-tabviewer-inactive-background-hover","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-background-hover-light and --mbx-tabviewer-inactive-background-hover-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover-light","title":"--mbx-tabviewer-inactive-background-hover-light","text":"Fallback Default --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #b6b4b4, #999797) TabViewer inactive tab background when dark mode is `off', on hover
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover-dark","title":"--mbx-tabviewer-inactive-background-hover-dark","text":"Fallback Default --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #566888, #3c465a) TabViewer inactive tab background when dark mode is `on', on hover
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover","title":"--mbx-tabviewer-inactive-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-text-color-hover-light and --mbx-tabviewer-inactive-text-color-hover-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover-light","title":"--mbx-tabviewer-inactive-text-color-hover-light","text":"Fallback Default --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-light TabViewer inactive tab text color when dark mode is `off', on hover
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover-dark","title":"--mbx-tabviewer-inactive-text-color-hover-dark","text":"Fallback Default --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-dark TabViewer inactive tab text color when dark mode is `on', on hover
"},{"location":"components/molecules/TabViewer/props/","title":"TabViewer properties","text":""},{"location":"components/molecules/TabViewer/props/#summary","title":"Summary","text":""},{"location":"components/molecules/TabViewer/props/#props-table","title":"Props table","text":"Parameter Type Default selected / / tabs {label: string; content: JSX.Element;}[] / tabProps Record / tabSelectedProps Record / tabUnselectedProps Record / tabViewProps Record / tabClassName Record / tabSelectedClassName Record / tabUnselectedClassName Record / tabViewClassName Record / onChange (newValue: number) => void () => {}"},{"location":"components/molecules/TabViewer/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/TabViewer/props/#selected","title":"selected","text":"Type Default / /"},{"location":"components/molecules/TabViewer/props/#tabs","title":"tabs","text":"Type Default {label: string; content: JSX.Element;}[] / tabs array. Every tab object contains 3 fields:
label: tab label displayed on topcontent: tab content element
"},{"location":"components/molecules/TabViewer/props/#tabprops","title":"tabProps","text":"Type Default Record / Custom props applied on every tab
"},{"location":"components/molecules/TabViewer/props/#tabselectedprops","title":"tabSelectedProps","text":"Type Default Record / Custom props applied on every selected tab
"},{"location":"components/molecules/TabViewer/props/#tabunselectedprops","title":"tabUnselectedProps","text":"Type Default Record / Custom props applied on every unselected tab
"},{"location":"components/molecules/TabViewer/props/#tabviewprops","title":"tabViewProps","text":"Type Default Record / Custom props applied on the tab view panel
"},{"location":"components/molecules/TabViewer/props/#tabclassname","title":"tabClassName","text":"Type Default Record / Custom props applied on every tab
"},{"location":"components/molecules/TabViewer/props/#tabselectedclassname","title":"tabSelectedClassName","text":"Type Default Record / Custom props applied on every selected tab
"},{"location":"components/molecules/TabViewer/props/#tabunselectedclassname","title":"tabUnselectedClassName","text":"Type Default Record / Custom props applied on every unselected tab
"},{"location":"components/molecules/TabViewer/props/#tabviewclassname","title":"tabViewClassName","text":"Type Default Record / Custom props applied on the tab view panel
"},{"location":"components/molecules/TabViewer/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when a tab is selected, giving its index as parameter
"},{"location":"components/molecules/Table/","title":"Table page","text":"A re-invented Table component. It follows a CSV-like format for its content.
"},{"location":"components/molecules/Table/css-vars/","title":"Table CSS variables","text":""},{"location":"components/molecules/Table/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Table/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-table-background / / --mbx-table-background-light --mbx-table-background --mbx-background-light --mbx-table-background-dark --mbx-table-background --mbx-background-dark --mbx-table-text-color / / --mbx-table-text-color-light --mbx-table-text-color --mbx-text-color-light --mbx-table-text-color-dark --mbx-table-text-color --mbx-text-color-dark --mbx-table-header-background / / --mbx-table-header-background-light --mbx-table-header-background linear-gradient(to right, #354155, #2b3546) --mbx-table-header-background-dark --mbx-table-header-background linear-gradient(to right, #4b5b77, #3e4c64) --mbx-table-header-text-color / / --mbx-table-header-text-color-light --mbx-table-header-text-color whitesmoke --mbx-table-header-text-color-dark --mbx-table-header-text-color rgb(255, 255, 255) --mbx-table-border-color / / --mbx-table-border-color-light --mbx-table-border-color darkslategrey --mbx-table-border-color-dark --mbx-table-border-color rgb(219, 219, 219)"},{"location":"components/molecules/Table/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Table/css-vars/#-mbx-table-background","title":"--mbx-table-background","text":"Fallback Default / / Fallback value for --mbx-table-background-light and --mbx-table-background-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-background-light","title":"--mbx-table-background-light","text":"Fallback Default --mbx-table-background --mbx-background-light Table background when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-background-dark","title":"--mbx-table-background-dark","text":"Fallback Default --mbx-table-background --mbx-background-dark Table background when dark mode is `on'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-text-color","title":"--mbx-table-text-color","text":"Fallback Default / / Fallback value for --mbx-table-text-color-light and --mbx-table-text-color-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-text-color-light","title":"--mbx-table-text-color-light","text":"Fallback Default --mbx-table-text-color --mbx-text-color-light Table text color when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-text-color-dark","title":"--mbx-table-text-color-dark","text":"Fallback Default --mbx-table-text-color --mbx-text-color-dark Table text color when dark mode is `on'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-background","title":"--mbx-table-header-background","text":"Fallback Default / / Fallback value for --mbx-table-header-background-light and --mbx-table-header-background-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-background-light","title":"--mbx-table-header-background-light","text":"Fallback Default --mbx-table-header-background linear-gradient(to right, #354155, #2b3546) Table header background when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-background-dark","title":"--mbx-table-header-background-dark","text":"Fallback Default --mbx-table-header-background linear-gradient(to right, #4b5b77, #3e4c64) Table header background when dark mode is `on'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-text-color","title":"--mbx-table-header-text-color","text":"Fallback Default / / Fallback value for --mbx-table-header-text-color-light and --mbx-table-header-text-color-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-text-color-light","title":"--mbx-table-header-text-color-light","text":"Fallback Default --mbx-table-header-text-color whitesmoke Table header text color when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-text-color-dark","title":"--mbx-table-header-text-color-dark","text":"Fallback Default --mbx-table-header-text-color rgb(255, 255, 255) Table header text color when dark mode is `on'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-border-color","title":"--mbx-table-border-color","text":"Fallback Default / / Fallback value for --mbx-table-border-color-light and --mbx-table-border-color-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-border-color-light","title":"--mbx-table-border-color-light","text":"Fallback Default --mbx-table-border-color darkslategrey Table border color when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-border-color-dark","title":"--mbx-table-border-color-dark","text":"Fallback Default --mbx-table-border-color rgb(219, 219, 219) Table border color when dark mode is `on'
"},{"location":"components/molecules/Table/props/","title":"Table properties","text":""},{"location":"components/molecules/Table/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Table/props/#props-table","title":"Props table","text":"Parameter Type Default headers boolean / rows (JSX.Element | string)[][] / headerClassName string / headersProps Record / cellClassName string / cellProps Record / rowClassName string / rowProps Record / onClick (row: number, column: number) => void () => {} propsCallback (row: number, column: number) => Record () => ({})"},{"location":"components/molecules/Table/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Table/props/#headers","title":"headers","text":"Type Default boolean /"},{"location":"components/molecules/Table/props/#rows","title":"rows","text":"Type Default (JSX.Element | string)[][] / Table elements
"},{"location":"components/molecules/Table/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom className applied on every Table header element
"},{"location":"components/molecules/Table/props/#headersprops","title":"headersProps","text":"Type Default Record / Custom props applied on every Table header element
"},{"location":"components/molecules/Table/props/#cellclassname","title":"cellClassName","text":"Type Default string / Custom className applied on every Table cell element
"},{"location":"components/molecules/Table/props/#cellprops","title":"cellProps","text":"Type Default Record / Custom props applied on every Table cell element
"},{"location":"components/molecules/Table/props/#rowclassname","title":"rowClassName","text":"Type Default string / Custom className applied on every Table row element
"},{"location":"components/molecules/Table/props/#rowprops","title":"rowProps","text":"Type Default Record / Custom props applied on every Table row element
"},{"location":"components/molecules/Table/props/#onclick","title":"onClick","text":"Type Default (row: number, column: number) => void () => {} Callback triggered when a Table cell is clicked
"},{"location":"components/molecules/Table/props/#propscallback","title":"propsCallback","text":"Type Default (row: number, column: number) => Record () => ({}) A function to add custom props depending on Table row and column
"},{"location":"components/organisms/","title":"MoBrix-ui organisms","text":""},{"location":"components/organisms/#summary","title":"Summary","text":" - Calendar
- DatePicker
- Drawer
- Form
"},{"location":"components/organisms/Calendar/","title":"Calendar page","text":"A ready to use Calendar, designed for a lot of scenarios.
"},{"location":"components/organisms/Calendar/css-vars/","title":"Calendar CSS variables","text":""},{"location":"components/organisms/Calendar/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/organisms/Calendar/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-calendar-background / / --mbx-calendar-background-light --mbx-calendar-background --mbx-background-light --mbx-calendar-background-dark --mbx-calendar-background --mbx-background-dark --mbx-calendar-text-color / / --mbx-calendar-text-color-light --mbx-calendar-text-color --mbx-text-color-light --mbx-calendar-text-color-dark --mbx-calendar-text-color --mbx-text-color-dark --mbx-calendar-selected-background / / --mbx-calendar-selected-background-light --mbx-calendar-selected-background --mbx-calendar-background-dark --mbx-calendar-selected-background-dark --mbx-calendar-selected-background --mbx-calendar-background-light --mbx-calendar-selected-text-color / / --mbx-calendar-selected-text-color-light --mbx-calendar-selected-text-color --mbx-calendar-text-color-dark --mbx-calendar-selected-text-color-dark --mbx-calendar-selected-text-color --mbx-calendar-text-color-light --mbx-calendar-background-hover / / --mbx-calendar-background-hover-light --mbx-calendar-background-hover --mbx-calendar-selected-background-light --mbx-calendar-background-hover-dark --mbx-calendar-background-hover --mbx-calendar-selected-background-dark --mbx-calendar-text-color-hover / / --mbx-calendar-text-color-hover-light --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-light --mbx-calendar-text-color-hover-dark --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-dark --mbx-calendar-arrow / / --mbx-calendar-arrow-light --mbx-calendar-arrow --mbx-calendar-text-color-light --mbx-calendar-arrow-dark --mbx-calendar-arrow --mbx-calendar-text-color-dark --mbx-calendar-arrow-hover / / --mbx-calendar-arrow-hover-light --mbx-calendar-arrow-hover --mbx-text-color-light --mbx-calendar-arrow-hover-dark --mbx-calendar-arrow-hover --mbx-text-color-dark --mbx-calendar-today-color / / --mbx-calendar-today-color-light --mbx-calendar-today-color red --mbx-calendar-today-color-dark --mbx-calendar-today-color red"},{"location":"components/organisms/Calendar/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background","title":"--mbx-calendar-background","text":"Fallback Default / / Fallback value for --mbx-calendar-background-light and --mbx-calendar-background-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-light","title":"--mbx-calendar-background-light","text":"Fallback Default --mbx-calendar-background --mbx-background-light Calendar background when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-dark","title":"--mbx-calendar-background-dark","text":"Fallback Default --mbx-calendar-background --mbx-background-dark Calendar background when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color","title":"--mbx-calendar-text-color","text":"Fallback Default / / Fallback value for --mbx-calendar-text-color-light and --mbx-calendar-text-color-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-light","title":"--mbx-calendar-text-color-light","text":"Fallback Default --mbx-calendar-text-color --mbx-text-color-light Calendar text color when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-dark","title":"--mbx-calendar-text-color-dark","text":"Fallback Default --mbx-calendar-text-color --mbx-text-color-dark Calendar text color when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background","title":"--mbx-calendar-selected-background","text":"Fallback Default / / Fallback value for --mbx-calendar-selected-background-light and --mbx-calendar-selected-background-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background-light","title":"--mbx-calendar-selected-background-light","text":"Fallback Default --mbx-calendar-selected-background --mbx-calendar-background-dark Calendar selected cell background when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background-dark","title":"--mbx-calendar-selected-background-dark","text":"Fallback Default --mbx-calendar-selected-background --mbx-calendar-background-light Calendar selected cell background when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color","title":"--mbx-calendar-selected-text-color","text":"Fallback Default / / Fallback value for --mbx-calendar-selected-text-color-light and --mbx-calendar-selected-text-color-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color-light","title":"--mbx-calendar-selected-text-color-light","text":"Fallback Default --mbx-calendar-selected-text-color --mbx-calendar-text-color-dark Calendar selected cell text color when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color-dark","title":"--mbx-calendar-selected-text-color-dark","text":"Fallback Default --mbx-calendar-selected-text-color --mbx-calendar-text-color-light Calendar selected cell text color when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover","title":"--mbx-calendar-background-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-background-hover-light and --mbx-calendar-background-hover-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover-light","title":"--mbx-calendar-background-hover-light","text":"Fallback Default --mbx-calendar-background-hover --mbx-calendar-selected-background-light Calendar background when dark mode is `off', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover-dark","title":"--mbx-calendar-background-hover-dark","text":"Fallback Default --mbx-calendar-background-hover --mbx-calendar-selected-background-dark Calendar background when dark mode is `on', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover","title":"--mbx-calendar-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-text-color-hover-light and --mbx-calendar-text-color-hover-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover-light","title":"--mbx-calendar-text-color-hover-light","text":"Fallback Default --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-light Calendar text color when dark mode is `off', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover-dark","title":"--mbx-calendar-text-color-hover-dark","text":"Fallback Default --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-dark Calendar text color when dark mode is `on', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow","title":"--mbx-calendar-arrow","text":"Fallback Default / / Fallback value for --mbx-calendar-arrow-light and --mbx-calendar-arrow-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-light","title":"--mbx-calendar-arrow-light","text":"Fallback Default --mbx-calendar-arrow --mbx-calendar-text-color-light Calendar arrow color when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-dark","title":"--mbx-calendar-arrow-dark","text":"Fallback Default --mbx-calendar-arrow --mbx-calendar-text-color-dark Calendar arrow color when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover","title":"--mbx-calendar-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-arrow-hover-light and --mbx-calendar-arrow-hover-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover-light","title":"--mbx-calendar-arrow-hover-light","text":"Fallback Default --mbx-calendar-arrow-hover --mbx-text-color-light Calendar arrow color when dark mode is `off', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover-dark","title":"--mbx-calendar-arrow-hover-dark","text":"Fallback Default --mbx-calendar-arrow-hover --mbx-text-color-dark Calendar arrow color when dark mode is `on', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-today-color","title":"--mbx-calendar-today-color","text":"Fallback Default / / Fallback value for --mbx-calendar-today-color-light and --mbx-calendar-today-color-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-today-color-light","title":"--mbx-calendar-today-color-light","text":"Fallback Default --mbx-calendar-today-color red Calendar today color when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-today-color-dark","title":"--mbx-calendar-today-color-dark","text":"Fallback Default --mbx-calendar-today-color red Calendar today color when dark mode is `on'
"},{"location":"components/organisms/Calendar/props/","title":"Calendar properties","text":""},{"location":"components/organisms/Calendar/props/#summary","title":"Summary","text":""},{"location":"components/organisms/Calendar/props/#props-table","title":"Props table","text":"Parameter Type Default value CalendarDate Today date hideArrows boolean / days string[] English week labels months string[] English months labels onViewChange (date: CalendarDate) => void / startYear number Today year startMonth number Today month fromToday boolean true dayLabel string true labelClassName string / labelProps Record / onChange (newValue: CalendarDate) => void () => {} arrowClassName string /"},{"location":"components/organisms/Calendar/props/#props-list","title":"Props list","text":""},{"location":"components/organisms/Calendar/props/#value","title":"value","text":"Type Default CalendarDate Today date Actual selected date
"},{"location":"components/organisms/Calendar/props/#hidearrows","title":"hideArrows","text":"Type Default boolean / If true, hide arrow buttons near the date label
"},{"location":"components/organisms/Calendar/props/#days","title":"days","text":"Type Default string[] English week labels Custom days labels
"},{"location":"components/organisms/Calendar/props/#months","title":"months","text":"Type Default string[] English months labels Custom months labels
"},{"location":"components/organisms/Calendar/props/#onviewchange","title":"onViewChange","text":"Type Default (date: CalendarDate) => void / Callback triggered when the Calendar view (the displayed month) is changed
"},{"location":"components/organisms/Calendar/props/#startyear","title":"startYear","text":"Type Default number Today year Initial displayed year
"},{"location":"components/organisms/Calendar/props/#startmonth","title":"startMonth","text":"Type Default number Today month Initial displayed month
"},{"location":"components/organisms/Calendar/props/#fromtoday","title":"fromToday","text":"Type Default boolean true If false, prevent the user to select a date lower than today date
"},{"location":"components/organisms/Calendar/props/#daylabel","title":"dayLabel","text":"Type Default string true Show/hide actual day label on top of the calendar
"},{"location":"components/organisms/Calendar/props/#labelclassname","title":"labelClassName","text":"Type Default string / Custom className applied on the day label component
"},{"location":"components/organisms/Calendar/props/#labelprops","title":"labelProps","text":"Type Default Record / Custom props applied on the day label component
"},{"location":"components/organisms/Calendar/props/#onchange","title":"onChange","text":"Type Default (newValue: CalendarDate) => void () => {} Callback triggered when Calendar component input value is changed by the user
"},{"location":"components/organisms/Calendar/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button
"},{"location":"components/organisms/DatePicker/","title":"DatePicker page","text":"A smart date-picker, with an internal Calendar accessible to choose a date
"},{"location":"components/organisms/DatePicker/css-vars/","title":"DatePicker CSS variables","text":""},{"location":"components/organisms/DatePicker/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/organisms/DatePicker/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-datepicker-background / / --mbx-datepicker-background-light --mbx-datepicker-background --mbx-background-light --mbx-datepicker-background-dark --mbx-datepicker-background --mbx-background-dark --mbx-datepicker-text-color / / --mbx-datepicker-text-color-light --mbx-datepicker-text-color --mbx-text-color-light --mbx-datepicker-text-color-dark --mbx-datepicker-text-color --mbx-text-color-dark --mbx-datepicker-icon / / --mbx-datepicker-icon-light --mbx-datepicker-icon --mbx-datepicker-text-color-light --mbx-datepicker-icon-dark --mbx-datepicker-icon --mbx-datepicker-text-color-dark --mbx-datepicker-icon-hover / / --mbx-datepicker-icon-hover-light --mbx-datepicker-icon-hover blue --mbx-datepicker-icon-hover-dark --mbx-datepicker-icon-hover orange --mbx-datepicker-calendar-background / / --mbx-datepicker-calendar-background-light --mbx-datepicker-calendar-background --mbx-calendar-background-light --mbx-datepicker-calendar-background-dark --mbx-datepicker-calendar-background --mbx-calendar-background-dark --mbx-datepicker-calendar-text-color / / --mbx-datepicker-calendar-text-color-light --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-light --mbx-datepicker-calendar-text-color-dark --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-dark --mbx-datepicker-calendar-background-hover / / --mbx-datepicker-calendar-background-hover-light --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-light --mbx-datepicker-calendar-background-hover-dark --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-dark --mbx-datepicker-calendar-text-color-hover / / --mbx-datepicker-calendar-text-color-hover-light --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-light --mbx-datepicker-calendar-text-color-hover-dark --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-dark --mbx-datepicker-calendar-arrow / / --mbx-datepicker-calendar-arrow-light --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-light --mbx-datepicker-calendar-arrow-dark --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-dark --mbx-datepicker-calendar-arrow-hover / / --mbx-datepicker-calendar-arrow-hover-light --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-light --mbx-datepicker-calendar-arrow-hover-dark --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-dark --mbx-datepicker-calendar-selected-background / / --mbx-datepicker-calendar-selected-background-light --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-light --mbx-datepicker-calendar-selected-background-dark --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-dark --mbx-datepicker-calendar-selected-text-color / / --mbx-datepicker-calendar-selected-text-color-light --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-light --mbx-datepicker-calendar-selected-text-color-dark --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-dark --mbx-datepicker-calendar-today-color / / --mbx-datepicker-calendar-today-color-light --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-light --mbx-datepicker-calendar-today-color-dark --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-dark --mbx-datepicker-modal-background / / --mbx-datepicker-modal-background-light --mbx-datepicker-modal-background --mbx-modal-background-light --mbx-datepicker-modal-background-dark --mbx-datepicker-modal-background --mbx-modal-background-dark --mbx-datepicker-modal-x-color / / --mbx-datepicker-modal-x-color-light --mbx-datepicker-modal-x-color --mbx-modal-x-color-light --mbx-datepicker-modal-x-color-dark --mbx-datepicker-modal-x-color --mbx-modal-x-color-dark --mbx-datepicker-modal-x-color-hover / / --mbx-datepicker-modal-x-color-hover-light --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-light --mbx-datepicker-modal-x-color-hover-dark --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-dark"},{"location":"components/organisms/DatePicker/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-background","title":"--mbx-datepicker-background","text":"Fallback Default / / Fallback value for --mbx-datepicker-background-light and --mbx-datepicker-background-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-background-light","title":"--mbx-datepicker-background-light","text":"Fallback Default --mbx-datepicker-background --mbx-background-light DatePicker background when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-background-dark","title":"--mbx-datepicker-background-dark","text":"Fallback Default --mbx-datepicker-background --mbx-background-dark DatePicker background when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color","title":"--mbx-datepicker-text-color","text":"Fallback Default / / Fallback value for --mbx-datepicker-text-color-light and --mbx-datepicker-text-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color-light","title":"--mbx-datepicker-text-color-light","text":"Fallback Default --mbx-datepicker-text-color --mbx-text-color-light DatePicker text color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color-dark","title":"--mbx-datepicker-text-color-dark","text":"Fallback Default --mbx-datepicker-text-color --mbx-text-color-dark DatePicker text color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon","title":"--mbx-datepicker-icon","text":"Fallback Default / / Fallback value for --mbx-datepicker-icon-light and --mbx-datepicker-icon-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-light","title":"--mbx-datepicker-icon-light","text":"Fallback Default --mbx-datepicker-icon --mbx-datepicker-text-color-light DatePicker calendar icon color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-dark","title":"--mbx-datepicker-icon-dark","text":"Fallback Default --mbx-datepicker-icon --mbx-datepicker-text-color-dark DatePicker calendar icon color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover","title":"--mbx-datepicker-icon-hover","text":"Fallback Default / / Fallback value for --mbx-datepicker-icon-hover-light and --mbx-datepicker-icon-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover-light","title":"--mbx-datepicker-icon-hover-light","text":"Fallback Default --mbx-datepicker-icon-hover blue DatePicker calendar icon color when dark mode is `off', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover-dark","title":"--mbx-datepicker-icon-hover-dark","text":"Fallback Default --mbx-datepicker-icon-hover orange DatePicker calendar icon color when dark mode is `on', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background","title":"--mbx-datepicker-calendar-background","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-background-light and --mbx-datepicker-calendar-background-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-light","title":"--mbx-datepicker-calendar-background-light","text":"Fallback Default --mbx-datepicker-calendar-background --mbx-calendar-background-light Extended from Calendar - Calendar background when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-dark","title":"--mbx-datepicker-calendar-background-dark","text":"Fallback Default --mbx-datepicker-calendar-background --mbx-calendar-background-dark Extended from Calendar - Calendar background when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color","title":"--mbx-datepicker-calendar-text-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-text-color-light and --mbx-datepicker-calendar-text-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-light","title":"--mbx-datepicker-calendar-text-color-light","text":"Fallback Default --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-light Extended from Calendar - Calendar text color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-dark","title":"--mbx-datepicker-calendar-text-color-dark","text":"Fallback Default --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-dark Extended from Calendar - Calendar text color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover","title":"--mbx-datepicker-calendar-background-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-background-hover-light and --mbx-datepicker-calendar-background-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover-light","title":"--mbx-datepicker-calendar-background-hover-light","text":"Fallback Default --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-light Extended from Calendar - Calendar background when dark mode is `off', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover-dark","title":"--mbx-datepicker-calendar-background-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-dark Extended from Calendar - Calendar background when dark mode is `on', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover","title":"--mbx-datepicker-calendar-text-color-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-text-color-hover-light and --mbx-datepicker-calendar-text-color-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover-light","title":"--mbx-datepicker-calendar-text-color-hover-light","text":"Fallback Default --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-light Extended from Calendar - Calendar text color when dark mode is `off', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover-dark","title":"--mbx-datepicker-calendar-text-color-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-dark Extended from Calendar - Calendar text color when dark mode is `on', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow","title":"--mbx-datepicker-calendar-arrow","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-arrow-light and --mbx-datepicker-calendar-arrow-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-light","title":"--mbx-datepicker-calendar-arrow-light","text":"Fallback Default --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-light Extended from Calendar - Calendar arrow color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-dark","title":"--mbx-datepicker-calendar-arrow-dark","text":"Fallback Default --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-dark Extended from Calendar - Calendar arrow color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover","title":"--mbx-datepicker-calendar-arrow-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-arrow-hover-light and --mbx-datepicker-calendar-arrow-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover-light","title":"--mbx-datepicker-calendar-arrow-hover-light","text":"Fallback Default --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-light Extended from Calendar - Calendar arrow color when dark mode is `off', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover-dark","title":"--mbx-datepicker-calendar-arrow-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-dark Extended from Calendar - Calendar arrow color when dark mode is `on', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background","title":"--mbx-datepicker-calendar-selected-background","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-selected-background-light and --mbx-datepicker-calendar-selected-background-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background-light","title":"--mbx-datepicker-calendar-selected-background-light","text":"Fallback Default --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-light Extended from Calendar - Calendar selected cell background when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background-dark","title":"--mbx-datepicker-calendar-selected-background-dark","text":"Fallback Default --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-dark Extended from Calendar - Calendar selected cell background when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color","title":"--mbx-datepicker-calendar-selected-text-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-selected-text-color-light and --mbx-datepicker-calendar-selected-text-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color-light","title":"--mbx-datepicker-calendar-selected-text-color-light","text":"Fallback Default --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-light Extended from Calendar - Calendar selected cell text color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color-dark","title":"--mbx-datepicker-calendar-selected-text-color-dark","text":"Fallback Default --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-dark Extended from Calendar - Calendar selected cell text color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color","title":"--mbx-datepicker-calendar-today-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-today-color-light and --mbx-datepicker-calendar-today-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color-light","title":"--mbx-datepicker-calendar-today-color-light","text":"Fallback Default --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-light Extended from Calendar - Calendar today color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color-dark","title":"--mbx-datepicker-calendar-today-color-dark","text":"Fallback Default --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-dark Extended from Calendar - Calendar today color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background","title":"--mbx-datepicker-modal-background","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-background-light and --mbx-datepicker-modal-background-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background-light","title":"--mbx-datepicker-modal-background-light","text":"Fallback Default --mbx-datepicker-modal-background --mbx-modal-background-light Extended from Modal - Modal background when dark mode is off
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background-dark","title":"--mbx-datepicker-modal-background-dark","text":"Fallback Default --mbx-datepicker-modal-background --mbx-modal-background-dark Extended from Modal - Modal background when dark mode is on
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color","title":"--mbx-datepicker-modal-x-color","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-x-color-light and --mbx-datepicker-modal-x-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-light","title":"--mbx-datepicker-modal-x-color-light","text":"Fallback Default --mbx-datepicker-modal-x-color --mbx-modal-x-color-light Extended from Modal - Modal x icon color when dark mode is off
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-dark","title":"--mbx-datepicker-modal-x-color-dark","text":"Fallback Default --mbx-datepicker-modal-x-color --mbx-modal-x-color-dark Extended from Modal - Modal x icon color when dark mode is on
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover","title":"--mbx-datepicker-modal-x-color-hover","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-x-color-hover-light and --mbx-datepicker-modal-x-color-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover-light","title":"--mbx-datepicker-modal-x-color-hover-light","text":"Fallback Default --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-light Extended from Modal - Modal x icon color when dark mode is off, on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover-dark","title":"--mbx-datepicker-modal-x-color-hover-dark","text":"Fallback Default --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-dark Extended from Modal - Modal x icon color when dark mode is on, on hover
"},{"location":"components/organisms/DatePicker/props/","title":"DatePicker properties","text":""},{"location":"components/organisms/DatePicker/props/#summary","title":"Summary","text":""},{"location":"components/organisms/DatePicker/props/#props-table","title":"Props table","text":"Parameter Type Default value CalendarDate Today date hideArrows boolean / days string[] English week labels months string[] English months labels onViewChange (date: CalendarDate) => void / startYear number Today year startMonth number Today month fromToday boolean true dayLabel string true labelClassName string / labelProps Record / onChange (newValue: CalendarDate) => void () => {} onClose () => void () => {} arrowClassName string /"},{"location":"components/organisms/DatePicker/props/#props-list","title":"Props list","text":""},{"location":"components/organisms/DatePicker/props/#value","title":"value","text":"Type Default CalendarDate Today date Actual selected date - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#hidearrows","title":"hideArrows","text":"Type Default boolean / If true, hide arrow buttons near the date label - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#days","title":"days","text":"Type Default string[] English week labels Custom days labels - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#months","title":"months","text":"Type Default string[] English months labels Custom months labels - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#onviewchange","title":"onViewChange","text":"Type Default (date: CalendarDate) => void / Callback triggered when the Calendar view (the displayed month) is changed - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#startyear","title":"startYear","text":"Type Default number Today year Initial displayed year - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#startmonth","title":"startMonth","text":"Type Default number Today month Initial displayed month - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#fromtoday","title":"fromToday","text":"Type Default boolean true If false, prevent the user to select a date lower than today date - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#daylabel","title":"dayLabel","text":"Type Default string true Show/hide actual day label on top of the calendar - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#labelclassname","title":"labelClassName","text":"Type Default string / Custom className applied on the day label component - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#labelprops","title":"labelProps","text":"Type Default Record / Custom props applied on the day label component - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#onchange","title":"onChange","text":"Type Default (newValue: CalendarDate) => void () => {} Callback triggered when Calendar component input value is changed by the user - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#onclose","title":"onClose","text":"Type Default () => void () => {} Callback triggered when DatePicker modal is closed
"},{"location":"components/organisms/DatePicker/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button - extended from Calendar component
"},{"location":"components/organisms/Drawer/","title":"Drawer page","text":"A modern drawer, easy to integrate and to customize
"},{"location":"components/organisms/Drawer/css-vars/","title":"Drawer CSS variables","text":""},{"location":"components/organisms/Drawer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/organisms/Drawer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-drawer-background / / --mbx-drawer-background-light --mbx-drawer-background --mbx-background-light --mbx-drawer-background-dark --mbx-drawer-background --mbx-background-dark --mbx-drawer-text-color / / --mbx-drawer-text-color-light --mbx-drawer-text-color --mbx-text-color-light --mbx-drawer-text-color-dark --mbx-drawer-text-color --mbx-text-color-dark --mbx-drawer-arrow / / --mbx-drawer-arrow-light --mbx-drawer-arrow --mbx-drawer-text-color-light --mbx-drawer-arrow-dark --mbx-drawer-arrow --mbx-drawer-text-color-dark --mbx-drawer-arrow-hover / / --mbx-drawer-arrow-hover-light --mbx-drawer-arrow-hover / --mbx-drawer-arrow-hover-dark --mbx-drawer-arrow-hover /"},{"location":"components/organisms/Drawer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-background","title":"--mbx-drawer-background","text":"Fallback Default / / Fallback value for --mbx-drawer-background-light and --mbx-drawer-background-dark
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-background-light","title":"--mbx-drawer-background-light","text":"Fallback Default --mbx-drawer-background --mbx-background-light Drawer background when dark mode is off
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-background-dark","title":"--mbx-drawer-background-dark","text":"Fallback Default --mbx-drawer-background --mbx-background-dark Drawer background when dark mode is on
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-text-color","title":"--mbx-drawer-text-color","text":"Fallback Default / / Fallback value for --mbx-drawer-text-color-light and --mbx-drawer-text-color-dark
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-text-color-light","title":"--mbx-drawer-text-color-light","text":"Fallback Default --mbx-drawer-text-color --mbx-text-color-light Drawer text color when dark mode is off
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-text-color-dark","title":"--mbx-drawer-text-color-dark","text":"Fallback Default --mbx-drawer-text-color --mbx-text-color-dark Drawer text color when dark mode is on
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow","title":"--mbx-drawer-arrow","text":"Fallback Default / / Fallback value for --mbx-drawer-arrow-light and --mbx-drawer-arrow-dark
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-light","title":"--mbx-drawer-arrow-light","text":"Fallback Default --mbx-drawer-arrow --mbx-drawer-text-color-light Drawer arrow color when dark mode is off
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-dark","title":"--mbx-drawer-arrow-dark","text":"Fallback Default --mbx-drawer-arrow --mbx-drawer-text-color-dark Drawer arrow color when dark mode is on
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover","title":"--mbx-drawer-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-drawer-arrow-hover-light and --mbx-drawer-arrow-hover-dark
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover-light","title":"--mbx-drawer-arrow-hover-light","text":"Fallback Default --mbx-drawer-arrow-hover / Drawer arrow color when dark mode is off, on hover
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover-dark","title":"--mbx-drawer-arrow-hover-dark","text":"Fallback Default --mbx-drawer-arrow-hover / Drawer arrow color when dark mode is on, on hover
"},{"location":"components/organisms/Drawer/props/","title":"Drawer properties","text":""},{"location":"components/organisms/Drawer/props/#summary","title":"Summary","text":""},{"location":"components/organisms/Drawer/props/#props-table","title":"Props table","text":"Parameter Type Default position left | right | top | bottom | top-left | top-right | bottom-left | bottom-right left onClose () => void () => {} children (JSX.Element | string) | (JSX.Element|string`)[] / closeOnClickOutside boolean true arrowClassName string /"},{"location":"components/organisms/Drawer/props/#props-list","title":"Props list","text":""},{"location":"components/organisms/Drawer/props/#position","title":"position","text":"Type Default left | right | top | bottom | top-left | top-right | bottom-left | bottom-right left Drawer position, relative to the entire window
"},{"location":"components/organisms/Drawer/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Drawer is closed
"},{"location":"components/organisms/Drawer/props/#children","title":"children","text":"Type Default (JSX.Element | string) | (JSX.Element|string`)[] / Drawer content
"},{"location":"components/organisms/Drawer/props/#closeonclickoutside","title":"closeOnClickOutside","text":"Type Default boolean true If false, the drawer won't be closed when clicking outside of it
"},{"location":"components/organisms/Drawer/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button
"},{"location":"components/organisms/Form/","title":"Form page","text":"A totally configurable Form, with a submit button to let the user submit data from your web-app
"},{"location":"components/organisms/Form/css-vars/","title":"Form CSS variables","text":""},{"location":"components/organisms/Form/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/organisms/Form/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-form-background-light --mbx-form-background --mbx-background-light --mbx-form-background / / --mbx-form-background-dark --mbx-form-background --mbx-background-dark --mbx-form-text-color / / --mbx-form-text-color-light --mbx-form-text-color --mbx-text-color-light --mbx-form-text-color-dark --mbx-form-text-color --mbx-text-color-dark --mbx-form-submit-background / / --mbx-form-submit-background-light --mbx-form-submit-background mbx-button-background-light --mbx-form-submit-background-dark --mbx-form-submit-background mbx-button-background-dark --mbx-form-submit-text-color / / --mbx-form-submit-text-color-light --mbx-form-submit-text-color mbx-button-text-color-light --mbx-form-submit-text-color-dark --mbx-form-submit-text-color mbx-button-text-color-dark --mbx-form-formfield-background / / --mbx-form-formfield-background-dark --mbx-form-formfield-background --mbx-formfield-background-dark --mbx-form-formfield-background-light --mbx-form-formfield-background --mbx-formfield-background-light --mbx-form-formfield-text-color / / --mbx-form-formfield-text-color-light --mbx-form-formfield-text-color --mbx-formfield-text-color-light --mbx-form-formfield-text-color-dark --mbx-form-formfield-text-color --mbx-formfield-text-color-dark --mbx-form-formfield-background-hover / / --mbx-form-formfield-background-hover-light --mbx-form-formfield-background-hover --mbx-formfield-background-hover-light --mbx-form-formfield-background-hover-dark --mbx-form-formfield-background-hover --mbx-formfield-background-hover-dark --mbx-form-formfield-text-color-hover / / --mbx-form-formfield-text-color-hover-light --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-light --mbx-form-formfield-text-color-hover-dark --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-dark --mbx-form-formfield-error-border / / --mbx-form-formfield-error-border-light --mbx-form-formfield-error-border --mbx-formfield-error-border-light --mbx-form-formfield-error-border-dark --mbx-form-formfield-error-border --mbx-formfield-error-border-dark --mbx-form-formfield-error-text / / --mbx-form-formfield-error-text-light --mbx-form-formfield-error-text --mbx-formfield-error-text-light --mbx-form-formfield-error-text-dark --mbx-form-formfield-error-text --mbx-formfield-error-text-dark"},{"location":"components/organisms/Form/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/organisms/Form/css-vars/#-mbx-form-background-light","title":"--mbx-form-background-light","text":"Fallback Default --mbx-form-background --mbx-background-light Form background when dark mode is `off'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-background","title":"--mbx-form-background","text":"Fallback Default / / Fallback value for and
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-background-dark","title":"--mbx-form-background-dark","text":"Fallback Default --mbx-form-background --mbx-background-dark Form background when dark mode is `on'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-text-color","title":"--mbx-form-text-color","text":"Fallback Default / / Fallback value for and
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-text-color-light","title":"--mbx-form-text-color-light","text":"Fallback Default --mbx-form-text-color --mbx-text-color-light Form text color when dark mode is `off'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-text-color-dark","title":"--mbx-form-text-color-dark","text":"Fallback Default --mbx-form-text-color --mbx-text-color-dark Form text color when dark mode is `on'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-background","title":"--mbx-form-submit-background","text":"Fallback Default / / Fallback value for --mbx-form-submit-background-light and --mbx-form-submit-background-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-background-light","title":"--mbx-form-submit-background-light","text":"Fallback Default --mbx-form-submit-background mbx-button-background-light Form submit button background when dark mode is `off'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-background-dark","title":"--mbx-form-submit-background-dark","text":"Fallback Default --mbx-form-submit-background mbx-button-background-dark Form submit button background when dark mode is `on'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-text-color","title":"--mbx-form-submit-text-color","text":"Fallback Default / / Fallback value for --mbx-form-submit-text-color-light and --mbx-form-submit-text-color-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-text-color-light","title":"--mbx-form-submit-text-color-light","text":"Fallback Default --mbx-form-submit-text-color mbx-button-text-color-light Form submit button text color when dark mode is `off'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-text-color-dark","title":"--mbx-form-submit-text-color-dark","text":"Fallback Default --mbx-form-submit-text-color mbx-button-text-color-dark Form submit button text color when dark mode is `on'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background","title":"--mbx-form-formfield-background","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-background-light and --mbx-form-formfield-background-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-dark","title":"--mbx-form-formfield-background-dark","text":"Fallback Default --mbx-form-formfield-background --mbx-formfield-background-dark Extended from FormField - FormField background when dark mode is off
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-light","title":"--mbx-form-formfield-background-light","text":"Fallback Default --mbx-form-formfield-background --mbx-formfield-background-light Extended from FormField - FormField background when dark mode is on
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color","title":"--mbx-form-formfield-text-color","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-text-color-light and --mbx-form-formfield-text-color-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-light","title":"--mbx-form-formfield-text-color-light","text":"Fallback Default --mbx-form-formfield-text-color --mbx-formfield-text-color-light Extended from FormField - FormField text color when dark mode is off
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-dark","title":"--mbx-form-formfield-text-color-dark","text":"Fallback Default --mbx-form-formfield-text-color --mbx-formfield-text-color-dark Extended from FormField - FormField text color when dark mode is on
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover","title":"--mbx-form-formfield-background-hover","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-background-hover-light and --mbx-form-formfield-background-hover-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover-light","title":"--mbx-form-formfield-background-hover-light","text":"Fallback Default --mbx-form-formfield-background-hover --mbx-formfield-background-hover-light Extended from FormField - FormField background when dark mode is off, on hover
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover-dark","title":"--mbx-form-formfield-background-hover-dark","text":"Fallback Default --mbx-form-formfield-background-hover --mbx-formfield-background-hover-dark Extended from FormField - FormField background when dark mode is on, on hover
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover","title":"--mbx-form-formfield-text-color-hover","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-text-color-hover-light and --mbx-form-formfield-text-color-hover-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover-light","title":"--mbx-form-formfield-text-color-hover-light","text":"Fallback Default --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-light Extended from FormField - FormField text color when dark mode is off, on hover
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover-dark","title":"--mbx-form-formfield-text-color-hover-dark","text":"Fallback Default --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-dark Extended from FormField - FormField text color when dark mode is on, on hover
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-border","title":"--mbx-form-formfield-error-border","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-error-border-light and --mbx-form-formfield-error-border-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-border-light","title":"--mbx-form-formfield-error-border-light","text":"Fallback Default --mbx-form-formfield-error-border --mbx-formfield-error-border-light Extended from FormField - FormField error box border color when dark mode is off
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-border-dark","title":"--mbx-form-formfield-error-border-dark","text":"Fallback Default --mbx-form-formfield-error-border --mbx-formfield-error-border-dark Extended from FormField - FormField error box border color when dark mode is on
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-text","title":"--mbx-form-formfield-error-text","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-error-text-light and --mbx-form-formfield-error-text-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-text-light","title":"--mbx-form-formfield-error-text-light","text":"Fallback Default --mbx-form-formfield-error-text --mbx-formfield-error-text-light Extended from FormField - FormField error box text color when dark mode is off
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-text-dark","title":"--mbx-form-formfield-error-text-dark","text":"Fallback Default --mbx-form-formfield-error-text --mbx-formfield-error-text-dark Extended from FormField - FormField error box text color when dark mode is on
"},{"location":"components/organisms/Form/props/","title":"Form properties","text":""},{"location":"components/organisms/Form/props/#summary","title":"Summary","text":""},{"location":"components/organisms/Form/props/#props-table","title":"Props table","text":"Parameter Type Default title string / fields Record {} onSubmit (values: Record) => void / submitLabel string | JSX.Element / fieldClassName string / children JSX.Element /"},{"location":"components/organisms/Form/props/#props-list","title":"Props list","text":""},{"location":"components/organisms/Form/props/#title","title":"title","text":"Type Default string / Form title
"},{"location":"components/organisms/Form/props/#fields","title":"fields","text":"Type Default Record {} Form fields object. Every key is the field unique ID, and will be used on submit when returning their values
"},{"location":"components/organisms/Form/props/#onsubmit","title":"onSubmit","text":"Type Default (values: Record) => void / Custom callback triggered when clicking on submit button. Gives the fields values as input parameter
"},{"location":"components/organisms/Form/props/#submitlabel","title":"submitLabel","text":"Type Default string | JSX.Element / Custom submit button label
"},{"location":"components/organisms/Form/props/#fieldclassname","title":"fieldClassName","text":"Type Default string / Custom classname applied on every field
"},{"location":"components/organisms/Form/props/#children","title":"children","text":"Type Default JSX.Element / Form content
"},{"location":"old-guides/","title":"Old guides","text":" - MoBrix-ui v1.X.X
- MoBrix-ui v2.X.X
- MoBrix-ui v3.X.X
"},{"location":"old-guides/README_v1/","title":"MoBrix-ui - V1 guide","text":"React components for every app, easy to use and customize
"},{"location":"old-guides/README_v1/#summary","title":"Summary","text":" - MoBrix-ui philosophy
- Components building process
- Shared components properties
- Customizable UI
- Box components
- Getting started
- Installation
- Usage
- Tests
- Authors
- License
"},{"location":"old-guides/README_v1/#mobrix-ui-philosophy","title":"mobrix-ui philosophy","text":"This library is built upon few (but important) concepts:
- Small library size, to not impact on final app bundle size
- Few dependencies, to not introduce a bunch of additional packages (that could also introduce bugs or version conflicts with pre-existent packages)
- Let the user customize every part as desired, but with default values set otherwise, to make every component ready to be used without so many parameters
- Every component should be integrable into every react app, so their behaviour must be customizable too (with callbacks, for example)
The same concepts are also the base of another project I maintain, MoBrix-engine (check it out, it is also the base of MoBrix-ui guide page !)
"},{"location":"old-guides/README_v1/#components-building-process","title":"Components building process","text":"This library use a standardized process to build every component. As result, every component has a shared initial logic, shared CSS styles and shared properties.
"},{"location":"old-guides/README_v1/#shared-components-properties","title":"Shared components properties","text":"Some properties are shared between all components, for a smoother dev experience. In addition, this makes every single component easily re-usable. Let's see them in details:
Property Description className custom className applied on main container dark Enable/disable dark mode hide Hide/show component id data-id parameter (for testing purpose, to easily find the component into the DOM) shadow Enable/disable shadow behind component style Css inline properties applied on main container unstyled If true, no standard mobrix-ui styles will be applied on the components (useful for example, with image buttons) With these shared properties is possible to drive every component behaviour and UI with an external state management system
"},{"location":"old-guides/README_v1/#customizable-ui","title":"Customizable UI","text":"MoBrix-ui-components components UI is globally configurable, with CSS variables. By defining some specific custom CSS variables into your app css, you'll change the UI of all components:
CSS variable Description Default value Related CSS attribute --mobrix-ui-custom-background-dark Components background, when in dark-mode (dark is set to true). linear-gradient(to right, #2d3748, #1d232e) background-image --mobrix-ui-custom-background-color-dark Components background color, when in dark-mode (dark is set to true). #1d232e background-color --mobrix-ui-custom-text-color-dark Components text color, when in dark-mode (dark is set to true). white text-color --mobrix-ui-custom-background-light Components background, when not in dark-mode (dark is set to false). linear-gradient(to right, #fff, #eaebec) background-image --mobrix-ui-custom-background-color-light Components background color, when not in dark-mode (dark is set to false). #f5f5f5 background-color --mobrix-ui-custom-text-color-light Components text color, when not in dark-mode (dark is set to false). #1b1b1b text-color If you don't set these variables, the default values will be used.
"},{"location":"old-guides/README_v1/#box-components","title":"Box components","text":"Some components are designed with a specific structure, to better control and customize their look and feel. This type of components is called Box Component, for their particular structure. In addition to the shared properties, as they are part of MoBrix-ui, they accept 3 additional (and optional) properties:
label, a string or a component rendered above the final componentvalue, a specific property that drive the component UI, its type vary depends on component itself (for example, for the CheckBox component, it is the check status, as a boolean )defaultValue, the default value to use when value is not given or is undefined
"},{"location":"old-guides/README_v1/#getting-started","title":"Getting started","text":""},{"location":"old-guides/README_v1/#installation","title":"Installation","text":"If you want to use this library inside your project, just install it:
\nnpm i mobrix-ui\n\n
"},{"location":"old-guides/README_v1/#usage","title":"Usage","text":"After installation, you can use every MoBrix-ui component in your app. Run this example to see them in action:
import { Card, Container, Link } from \"mobrix-ui\";\nimport { render } from \"react-dom\";\n\nrender(\n <Container animated>\n <Card\n dark={true}\n body={<p>This page is entirely made with MoBrix-ui components !</p>}\n footer={\n <Link to=\"https://cianciarusocataldo.github.io/mobrix-ui\">\n MoBrix-ui page\n </Link>\n }\n />\n </Container>,\n document.getElementById(\"root\"),\n);\n
If you want to customize the UI globally, initialize the dedicated CSS variables:
* {\n --mobrix-ui-text-color: #f5f5f5;\n --mobrix-ui-background-color: #1b1b1b;\n}\n
"},{"location":"old-guides/README_v1/#tests","title":"Tests","text":"Unit tests for every component are located inside tests folder. The test script is executed with pre-defined test command:
npm run test\n
"},{"location":"old-guides/README_v1/#authors","title":"Authors","text":""},{"location":"old-guides/README_v1/#license","title":"License","text":"This project is licensed under the MIT License - see the LICENSE file for details
"},{"location":"old-guides/README_v2/","title":"MoBrix-ui - V2 guide","text":"React components for every app, easy to use and customize.
"},{"location":"old-guides/README_v2/#note-for-mobrix-ui-v1-user","title":"Note for MoBrix-ui v1 user","text":"MoBrix-ui v2 introduces some breaking changes that makes it not compatible with older MoBrix verions (using different lib versions in parallel is possible, but can cause some unexpected errors). If you are using MoBrix 1.X.X, please read the dedicated guide, or upgrade it to v2.X.X!
"},{"location":"old-guides/README_v2/#summary","title":"Summary","text":" - MoBrix-ui philosophy
- Components building process
- UI properties
- Accessibility properties
- CSS variables
- Reactive components
- Getting started
- Installation
- Usage
- Tests
- Authors
- License
"},{"location":"old-guides/README_v2/#mobrix-ui-philosophy","title":"MoBrix-ui philosophy","text":"This library is built upon few (but important) concepts:
- Small library size, to not impact on final app bundle size
- Few dependencies, to not introduce a bunch of additional packages (that could also introduce bugs or version conflicts with pre-existent packages)
- Let the user customize every part as desired, but with default values set otherwise, to make every component ready to be used without so many parameters
- Every component should be integrable into every react app, so their behaviour must be customizable too (with callbacks, for example)
The same concepts are also the base of another project I maintain, MoBrix-engine (check it out, it is also the base of MoBrix-ui guide page !)
"},{"location":"old-guides/README_v2/#components-building-process","title":"Components building process","text":"This library use a standardized process to build every component. As result, every component has a shared initial logic, shared CSS styles and shared properties. Some properties are shared between all components, for a smoother dev experience. In addition, this makes every single component easily re-usable.
"},{"location":"old-guides/README_v2/#ui-properties","title":"UI properties","text":"Property Type Description Default value className string custom className applied on main container \"\" dark boolean Enable/disable dark mode false hide boolean Hide/show component false id string data-id parameter (for testing purpose, to easily find the component into the DOM) / shadow boolean Enable/disable shadow behind component false style Record<string,any> Css inline properties applied on main container / unstyled boolean If true, no standard mobrix-ui styles will be applied on the components (useful for example, with image buttons) false animated boolean Enable/disable component animations false"},{"location":"old-guides/README_v2/#accessibility-properties","title":"Accessibility properties","text":"Some accessibility properties are shared between all components, for a better and smoother user experience, in any scenario:
Property Type Description Default value onFocus ( ) => void custom callback triggered when the component get the focus (for example, through tab key) / onFocusLost ( ) => void custom callback triggered when the component lose the focus (for example, when user clicks outside it) / a11y boolean Enable/disable accessibility features. true a11yLabel string If a11y = true, is used as aria-label accessibility parameter / a11yDark boolean If a11y = true, enable/disable dark mode for a11y styles. If not set, will be used the dark UI parameter same as dark or false onKeyDown (keyEvent : any) => void custom callback triggered when a key is pressed while using the component (for example, when writing text inside an Input component). / "},{"location":"old-guides/README_v2/#css-variables","title":"CSS variables","text":"MoBrix-ui is globally configurable, with CSS variables. By defining some specific custom CSS variables into your app css, you'll change the UI of all components:
CSS variable Description Default value Related CSS attribute --mobrix-ui-custom-background-dark Components background, when in dark-mode (dark is set to true). linear-gradient(to right, #2d3748, #1d232e) background-image --mobrix-ui-custom-background-color-dark Components background color, when in dark-mode (dark is set to true). #1d232e background-color --mobrix-ui-custom-text-color-dark Components text color, when in dark-mode (dark is set to true). white text-color --mobrix-ui-custom-background-light Components background, when not in dark-mode (dark is set to false). linear-gradient(to right, #fff, #eaebec) background-image --mobrix-ui-custom-background-color-light Components background color, when not in dark-mode (dark is set to false). #f5f5f5 background-color --mobrix-ui-custom-text-color-light Components text color, when not in dark-mode (dark is set to false). #1b1b1b text-color --mobrix-ui-custom-focus-color-light If a11yDark = false , this color is used to update UI when a component is focused (with a screen reader or by navigating with the Tab key) #7785ff box-shadow / color --mobrix-ui-custom-focus-color-dark If a11yDark = true , this color is used to update UI when a component is focused (with a screen reader or by navigating with the Tab key) #fb7a10 box-shadow / color "},{"location":"old-guides/README_v2/#reactive-components","title":"Reactive components","text":"Some components are designed with a specific structure, to sync their internal state with an external input value. This kind of component handle internally their actual value, using the value parameter as starting point. This let the component to be driven in 2 different way:
-
Internally, Its internal value, when using the component without changing its value parameter from code
-
External, passing the value parameter
So, we have 2 scenarios:
-
If you change the component value using the component(without changing the value parameter), it will be updated internally.
-
If you change the passed value parameter, the component will sync its value with the given one.
A clear example is the Input component. When changing the value parameter, the component will sync its actual value.
"},{"location":"old-guides/README_v2/#getting-started","title":"Getting started","text":""},{"location":"old-guides/README_v2/#installation","title":"Installation","text":"If you want to use this library inside your project, just install it:
\nnpm i mobrix-ui\n\n
"},{"location":"old-guides/README_v2/#usage","title":"Usage","text":"After installation, you can use every MoBrix-ui component in your app. Run this example to see them in action:
import { Card, Container, Link } from \"mobrix-ui\";\nimport { render } from \"react-dom\";\n\nrender(\n <Container animated>\n <Card\n dark={true}\n body={<p>This page is entirely made with MoBrix-ui components !</p>}\n footer={\n <Link to=\"https://cianciarusocataldo.github.io/mobrix-ui\">\n MoBrix-ui page\n </Link>\n }\n />\n </Container>,\n document.getElementById(\"root\"),\n);\n
If you want to customize the UI globally, initialize the dedicated CSS variables:
* {\n --mobrix-ui-text-color: #f5f5f5;\n --mobrix-ui-background-color: #1b1b1b;\n}\n
"},{"location":"old-guides/README_v2/#tests","title":"Tests","text":"Unit tests for every component are located inside tests folder. The test script is executed with pre-defined test command:
npm run test\n
"},{"location":"old-guides/README_v2/#authors","title":"Authors","text":""},{"location":"old-guides/README_v2/#license","title":"License","text":"This project is licensed under the MIT License - see the LICENSE file for details
"},{"location":"old-guides/V3/README_v3/","title":"MoBrix-ui - V3 guide","text":"Smart React components for every app, easily customizable for every purpose.
"},{"location":"old-guides/V3/README_v3/#note-for-older-mobrix-ui-version","title":"Note for older MoBrix-ui version","text":"MoBrix-ui v3 introduces some breaking changes that makes it not compatible with older MoBrix verions (using different lib versions in parallel is possible, but can cause some unexpected errors). If you are using MoBrix 2.X.X or lower, upgrade it to v3.X.X if possible! Please read the old versions guide if you want to use older MoBrix-ui versions.
"},{"location":"old-guides/V3/README_v3/#summary","title":"Summary","text":" - MoBrix-ui philosophy
- Components building process
- Shared Properties
- Accessibility properties
- CSS variables
- Reactive components
- Getting started
- Installation
- Usage
- Tests
- Authors
- License
Check out the official MoBrix-ui guide page for more details
"},{"location":"old-guides/V3/README_v3/#mobrix-ui-philosophy","title":"MoBrix-ui philosophy","text":"This library is built upon few (but important) concepts:
- Small library size, to not impact on final app bundle size
- Few dependencies, to not introduce a bunch of additional packages (that could also introduce bugs or version conflicts with pre-existent packages)
- Let the user customize every part as desired, but with default values set otherwise, to make every component ready to be used without so many parameters
- Every component should be integrable into every react app, so their behaviour must be customizable too (with callbacks, for example)
The same concepts are also the base of another project I maintain, MoBrix-engine (check it out, it is also the base of MoBrix-ui guide page !)
"},{"location":"old-guides/V3/README_v3/#components-building-process","title":"Components building process","text":"This library use a standardized process to build every component. As result, every component has a shared initial logic, shared CSS styles and shared properties. Some properties are shared between all components, for a smoother dev experience. In addition, this makes every single component easily re-usable.
"},{"location":"old-guides/V3/README_v3/#shared-properties","title":"Shared Properties","text":"MoBrix-ui components shares some properties:
Parameter Type Default key string / className string / dark boolean false hide boolean false id string / shadow boolean true style CSSProperties / unstyled boolean false animated boolean true animation fade-in | slide-in-left | slide-in-right | slide-in-top | shake / background boolean true hover boolean true disabled boolean false onKeyDown (keyEvent : any) => void / onFocus () => void / onFocusLost () => void / additionalProps Record / a11y boolean true a11yLabel string / tabIndex number | string / Check out the complete components list for more details
"},{"location":"old-guides/V3/README_v3/#css-variables","title":"CSS variables","text":"MoBrix-ui is globally configurable, with CSS variables. By defining some specific custom CSS variables into your app css, you'll change the UI of all components:
Css variable Fallback Default --mbx-background / / --mbx-background-light --mbx-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-background-dark --mbx-background linear-gradient(to right, #2d3748, #1d232e) --mbx-background-color / / --mbx-background-color-light --mbx-background-color #e9e9e9 --mbx-background-color-dark --mbx-background-color #1d232e --mbx-background-color-hover / / --mbx-background-color-hover-light --mbx-background-color-hover #dfeaf8 --mbx-background-color-hover-dark --mbx-background-color-hover #3a3552 --mbx-background-hover / / --mbx-background-hover-light --mbx-background-hover linear-gradient(to right, #ececec, #e1e1e6, #dbdddd) --mbx-background-hover-dark --mbx-background-hover linear-gradient(to right, #364257, #252d3b) --mbx-text-color / / --mbx-text-color-light --mbx-text-color #1b1b1b --mbx-text-color-dark --mbx-text-color white --mbx-text-color-hover / / --mbx-text-color-hover-light --mbx-text-color-hover #413c5c --mbx-text-color-hover-dark --mbx-text-color-hover #dfeaf8 --mbx-shadow / / --mbx-shadow-light --mbx-shadow #464545 --mbx-shadow-dark --mbx-shadow #464545 --mbx-focus-color / / --mbx-focus-color-light --mbx-focus-color #7785ff --mbx-focus-color-dark --mbx-focus-color #fb7a10 Check out the complete components list for more details
"},{"location":"old-guides/V3/README_v3/#reactive-components","title":"Reactive components","text":"Some components are designed with a specific structure, to sync their internal state with an external input value. This kind of component handle internally their actual value, using the value parameter as starting point. This let the component to be driven in 2 different way:
-
Internally, Its internal value, when using the component without changing its value parameter from code
-
External, passing the value parameter
So, we have 2 scenarios:
-
If you change the component value using the component (without changing the value parameter), it will be updated internally.
-
If you change the passed value parameter, the component will sync its value with the given one.
A clear example is the Input component. When changing the value parameter, the component will sync its actual value.
"},{"location":"old-guides/V3/README_v3/#getting-started","title":"Getting started","text":""},{"location":"old-guides/V3/README_v3/#installation","title":"Installation","text":"If you want to use this library inside your project, just install it:
\nnpm i mobrix-ui\n\n
"},{"location":"old-guides/V3/README_v3/#usage","title":"Usage","text":"After installation, you can use every MoBrix-ui component in your app. Run this example to see them in action:
import { Card, Container, Link } from \"mobrix-ui\";\nimport { render } from \"react-dom\";\n\nrender(\n <Container animated>\n <Card\n dark={true}\n body={<p>This page is entirely made with MoBrix-ui components !</p>}\n footer={\n <Link to=\"https://cianciarusocataldo.github.io/mobrix-ui\">\n MoBrix-ui page\n </Link>\n }\n />\n </Container>,\n document.getElementById(\"root\"),\n);\n
If you want to customize the UI globally, initialize the dedicated CSS variables:
* {\n --mbx-ui-text-color: #f5f5f5;\n --mbx-ui-background-color: #1b1b1b;\n}\n
"},{"location":"old-guides/V3/README_v3/#tests","title":"Tests","text":"Unit tests for every component are located inside tests folder. The test script is executed with pre-defined test command:
npm run test\n
"},{"location":"old-guides/V3/README_v3/#authors","title":"Authors","text":""},{"location":"old-guides/V3/README_v3/#_1","title":"MoBrix-ui - V3 guide","text":""},{"location":"old-guides/V3/README_v3/#license","title":"License","text":"This project is licensed under the MIT License - see the LICENSE file for details
"},{"location":"old-guides/V3/components/","title":"MoBrix-ui components","text":""},{"location":"old-guides/V3/components/#summary","title":"Summary","text":"Atoms
-
Button
-
CheckBox
-
CodeBox
-
Counter
-
Divider
-
EmbeddedVideo
-
IconButton
-
Image
-
Input
-
Label
-
Link
-
PackageVersion
-
RadioButton
-
Rater
-
Selector
-
Slider
-
Spinner
-
Toggle
Molecules
-
Card
-
Carousel
-
Container
-
DismissableCard
-
Dropdown
-
ExpandableContainer
-
FormField
-
List
-
Modal
-
Popup
-
RadioButtonGroup
-
Review
-
Table
-
TabViewer
Organisms
-
Calendar
-
DatePicker
-
Drawer
-
Form
"},{"location":"old-guides/V3/components/atoms/","title":"MoBrix-ui atoms","text":""},{"location":"old-guides/V3/components/atoms/#summary","title":"Summary","text":" - Button
- CheckBox
- CodeBox
- Counter
- Divider
- EmbeddedVideo
- IconButton
- Image
- Input
- Label
- Link
- PackageVersion
- RadioButton
- Rater
- Selector
- Slider
- Spinner
- Toggle
"},{"location":"old-guides/V3/components/atoms/Button/","title":"Button page","text":"A tiny and smart button component.
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/","title":"Button CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Button/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-button-background / / --mbx-button-background-light --mbx-button-background --mbx-background-light --mbx-button-background-dark --mbx-button-background --mbx-background-dark --mbx-button-text-color / / --mbx-button-text-color-light --mbx-button-text-color --mbx-text-color-light --mbx-button-text-color-dark --mbx-button-text-color --mbx-text-color-dark --mbx-button-background-hover / / --mbx-button-background-hover-light --mbx-button-background-hover --mbx-background-hover-light --mbx-button-background-hover-dark --mbx-button-background-hover --mbx-background-hover-dark --mbx-button-text-color-hover / / --mbx-button-text-color-hover-light --mbx-button-text-color-hover --mbx-text-color-hover-light --mbx-button-text-color-hover-dark --mbx-button-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background","title":"--mbx-button-background","text":"Fallback Default / / Fallback value for mbx-button-background-light and mbx-button-background-dark
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-light","title":"--mbx-button-background-light","text":"Fallback Default --mbx-button-background --mbx-background-light Button background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-dark","title":"--mbx-button-background-dark","text":"Fallback Default --mbx-button-background --mbx-background-dark Button background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color","title":"--mbx-button-text-color","text":"Fallback Default / / Fallback value for mbx-button-text-color-light and mbx-button-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-light","title":"--mbx-button-text-color-light","text":"Fallback Default --mbx-button-text-color --mbx-text-color-light Button text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-dark","title":"--mbx-button-text-color-dark","text":"Fallback Default --mbx-button-text-color --mbx-text-color-dark Button text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-hover","title":"--mbx-button-background-hover","text":"Fallback Default / / Fallback value for mbx-button-background-hover-light and mbx-button-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-hover-light","title":"--mbx-button-background-hover-light","text":"Fallback Default --mbx-button-background-hover --mbx-background-hover-light Button background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-hover-dark","title":"--mbx-button-background-hover-dark","text":"Fallback Default --mbx-button-background-hover --mbx-background-hover-dark Button background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-hover","title":"--mbx-button-text-color-hover","text":"Fallback Default / / Fallback value for mbx-button-text-color-hover-light and mbx-button-text-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-hover-light","title":"--mbx-button-text-color-hover-light","text":"Fallback Default --mbx-button-text-color-hover --mbx-text-color-hover-light Button text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-hover-dark","title":"--mbx-button-text-color-hover-dark","text":"Fallback Default --mbx-button-text-color-hover --mbx-text-color-hover-dark Button text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Button/props/","title":"Button properties","text":""},{"location":"old-guides/V3/components/atoms/Button/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Button/props/#props-table","title":"Props table","text":"Parameter Type Default onMouseEnter () => void / onMouseLeave () => void / onClick () => void () => {} children JSX.Element | string /"},{"location":"old-guides/V3/components/atoms/Button/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Button/props/#onmouseenter","title":"onMouseEnter","text":"Type Default () => void / This callback is triggered everytime the cursor enter the button area
"},{"location":"old-guides/V3/components/atoms/Button/props/#onmouseleave","title":"onMouseLeave","text":"Type Default () => void / This callback is triggered everytime the cursor exit the button area
"},{"location":"old-guides/V3/components/atoms/Button/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when Button component is clicked
"},{"location":"old-guides/V3/components/atoms/Button/props/#children","title":"children","text":"Type Default JSX.Element | string / Button content
"},{"location":"old-guides/V3/components/atoms/CheckBox/","title":"CheckBox page","text":"A checkbox element, totally customizable.
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/","title":"CheckBox CSS variables","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-checkbox-background / / --mbx-checkbox-background-light --mbx-checkbox-background --mbx-background-light --mbx-checkbox-background-dark --mbx-checkbox-background --mbx-background-dark --mbx-checkbox-background-hover / / --mbx-checkbox-background-hover-light --mbx-checkbox-background-hover --mbx-background-hover-light --mbx-checkbox-background-hover-dark --mbx-checkbox-background-hover --mbx-background-hover-dark --mbx-checkbox-tick-color / / --mbx-checkbox-tick-color-light --mbx-checkbox-tick-color rgb(37, 99, 235) --mbx-checkbox-tick-color-dark --mbx-checkbox-tick-color white"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background","title":"--mbx-checkbox-background","text":"Fallback Default / / Fallback value for mbx-checkbox-background-light and mbx-checkbox-background-dark
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-light","title":"--mbx-checkbox-background-light","text":"Fallback Default --mbx-checkbox-background --mbx-background-light CheckBox background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-dark","title":"--mbx-checkbox-background-dark","text":"Fallback Default --mbx-checkbox-background --mbx-background-dark CheckBox background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover","title":"--mbx-checkbox-background-hover","text":"Fallback Default / / Fallback value for mbx-checkbox-background-hover-light and mbx-checkbox-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover-light","title":"--mbx-checkbox-background-hover-light","text":"Fallback Default --mbx-checkbox-background-hover --mbx-background-hover-light CheckBox background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover-dark","title":"--mbx-checkbox-background-hover-dark","text":"Fallback Default --mbx-checkbox-background-hover --mbx-background-hover-dark CheckBox background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color","title":"--mbx-checkbox-tick-color","text":"Fallback Default / / Fallback value for mbx-checkbox-tick-color-light and mbx-checkbox-tick-color-dark
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color-light","title":"--mbx-checkbox-tick-color-light","text":"Fallback Default --mbx-checkbox-tick-color rgb(37, 99, 235) CheckBox tick color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color-dark","title":"--mbx-checkbox-tick-color-dark","text":"Fallback Default --mbx-checkbox-tick-color white CheckBox tick color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/CheckBox/props/","title":"CheckBox properties","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean false icon JSX.Element Internal tick icon onChange (newValue: boolean) => void () => {}"},{"location":"old-guides/V3/components/atoms/CheckBox/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/props/#value","title":"value","text":"Type Default boolean false Checkbox initial value (checked / unchecked)
"},{"location":"old-guides/V3/components/atoms/CheckBox/props/#icon","title":"icon","text":"Type Default JSX.Element Internal tick icon custom tick icon (if not set, the default one will be used)
"},{"location":"old-guides/V3/components/atoms/CheckBox/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when CheckBox component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/CodeBox/","title":"CodeBox page","text":"A smart code box, to display code text as a compiler. Supports code highlight, with a selectable environment, and multiline strings
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/","title":"CodeBox CSS variables","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-codebox-background / / --mbx-codebox-background-light --mbx-codebox-background --mbx-background-light --mbx-codebox-background-dark --mbx-codebox-background --mbx-background-dark --mbx-codebox-text-color / / --mbx-codebox-text-color-light --mbx-codebox-text-color --mbx-text-color-light --mbx-codebox-text-color-dark --mbx-codebox-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-background","title":"--mbx-codebox-background","text":"Fallback Default / / Fallback value for mbx-codebox-background-light and mbx-codebox-background-dark
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-background-light","title":"--mbx-codebox-background-light","text":"Fallback Default --mbx-codebox-background --mbx-background-light CodeBox background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-background-dark","title":"--mbx-codebox-background-dark","text":"Fallback Default --mbx-codebox-background --mbx-background-dark CodeBox background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color","title":"--mbx-codebox-text-color","text":"Fallback Default / / Fallback value for mbx-codebox-text-color-light and mbx-codebox-text-color-dark
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color-light","title":"--mbx-codebox-text-color-light","text":"Fallback Default --mbx-codebox-text-color --mbx-text-color-light CodeBox text-color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color-dark","title":"--mbx-codebox-text-color-dark","text":"Fallback Default --mbx-codebox-text-color --mbx-text-color-dark CodeBox text-color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/CodeBox/props/","title":"CodeBox properties","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/props/#props-table","title":"Props table","text":"Parameter Type Default value string / highlight boolean true environment javascript | python | terminal | common 'terminal' copyButton boolean true"},{"location":"old-guides/V3/components/atoms/CodeBox/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/props/#value","title":"value","text":"Type Default string / code to display - multiline string is supported
"},{"location":"old-guides/V3/components/atoms/CodeBox/props/#highlight","title":"highlight","text":"Type Default boolean true Enable/disable text highlight, based on selected environment
"},{"location":"old-guides/V3/components/atoms/CodeBox/props/#environment","title":"environment","text":"Type Default javascript | python | terminal | common 'terminal' environment for text highlight feature, default to 'terminal' (only enabled when 'highlight' is true)
"},{"location":"old-guides/V3/components/atoms/CodeBox/props/#copybutton","title":"copyButton","text":"Type Default boolean true Enable/disable the copy button
"},{"location":"old-guides/V3/components/atoms/Counter/","title":"Counter page","text":"A flexible numeric input element
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/","title":"Counter CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-counterbox-background / / --mbx-counterbox-background-light --mbx-counterbox-background --mbx-background-color-light --mbx-counterbox-background-dark --mbx-counterbox-background --mbx-background-color-dark --mbx-counterbox-text-color / / --mbx-counterbox-text-color-light --mbx-counterbox-text-color --mbx-text-color-light --mbx-counterbox-text-color-dark --mbx-counterbox-text-color --mbx-text-color-dark --mbx-counterbox-background-hover / / --mbx-counterbox-background-hover-light --mbx-counterbox-background-hover --mbx-background-color-hover-light --mbx-counterbox-background-hover-dark --mbx-counterbox-background-hover --mbx-background-color-hover-dark --mbx-counterbox-text-color-hover / / --mbx-counterbox-text-color-hover-light --mbx-counterbox-text-color-hover --mbx-text-color-hover-light --mbx-counterbox-text-color-hover-dark --mbx-counterbox-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background","title":"--mbx-counterbox-background","text":"Fallback Default / / Fallback value for mbx-counterbox-background-light and mbx-counterbox-background-dark
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-light","title":"--mbx-counterbox-background-light","text":"Fallback Default --mbx-counterbox-background --mbx-background-color-light Counter background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-dark","title":"--mbx-counterbox-background-dark","text":"Fallback Default --mbx-counterbox-background --mbx-background-color-dark Counter background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color","title":"--mbx-counterbox-text-color","text":"Fallback Default / / Fallback value for mbx-counterbox-text-color-light and mbx-counterbox-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-light","title":"--mbx-counterbox-text-color-light","text":"Fallback Default --mbx-counterbox-text-color --mbx-text-color-light Counter text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-dark","title":"--mbx-counterbox-text-color-dark","text":"Fallback Default --mbx-counterbox-text-color --mbx-text-color-dark Counter text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover","title":"--mbx-counterbox-background-hover","text":"Fallback Default / / Fallback value for mbx-counterbox-background-hover-light and mbx-counterbox-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover-light","title":"--mbx-counterbox-background-hover-light","text":"Fallback Default --mbx-counterbox-background-hover --mbx-background-color-hover-light Counter background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover-dark","title":"--mbx-counterbox-background-hover-dark","text":"Fallback Default --mbx-counterbox-background-hover --mbx-background-color-hover-dark Counter background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover","title":"--mbx-counterbox-text-color-hover","text":"Fallback Default / / Fallback value for mbx-counterbox-text-color-hover-light and mbx-counterbox-text-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover-light","title":"--mbx-counterbox-text-color-hover-light","text":"Fallback Default --mbx-counterbox-text-color-hover --mbx-text-color-hover-light Counter text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover-dark","title":"--mbx-counterbox-text-color-hover-dark","text":"Fallback Default --mbx-counterbox-text-color-hover --mbx-text-color-hover-dark Counter text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Counter/props/","title":"Counter properties","text":""},{"location":"old-guides/V3/components/atoms/Counter/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Counter/props/#props-table","title":"Props table","text":"Parameter Type Default value number / placeholder string / readOnly boolean false min number / max number / onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/atoms/Counter/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Counter/props/#value","title":"value","text":"Type Default number / numeric input value
"},{"location":"old-guides/V3/components/atoms/Counter/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set
"},{"location":"old-guides/V3/components/atoms/Counter/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter
"},{"location":"old-guides/V3/components/atoms/Counter/props/#min","title":"min","text":"Type Default number / min allowed value
"},{"location":"old-guides/V3/components/atoms/Counter/props/#max","title":"max","text":"Type Default number / max allowed value
"},{"location":"old-guides/V3/components/atoms/Counter/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Counter component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Divider/","title":"Divider page","text":"A simple divider, useful to separate sections and paragraphs
"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/","title":"Divider CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-divider-color / / --mbx-divider-color-light --mbx-divider-color --mbx-text-color-light --mbx-divider-color-dark --mbx-divider-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#-mbx-divider-color","title":"--mbx-divider-color","text":"Fallback Default / / Fallback value for --mbx-divider-color-light and --mbx-divider-color-dark
"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#-mbx-divider-color-light","title":"--mbx-divider-color-light","text":"Fallback Default --mbx-divider-color --mbx-text-color-light Divider color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#-mbx-divider-color-dark","title":"--mbx-divider-color-dark","text":"Fallback Default --mbx-divider-color --mbx-text-color-dark Divider color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Divider/props/","title":"Divider properties","text":""},{"location":"old-guides/V3/components/atoms/Divider/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Divider/props/#props-table","title":"Props table","text":"Parameter Type Default size string 2px"},{"location":"old-guides/V3/components/atoms/Divider/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Divider/props/#size","title":"size","text":"Type Default string 2px Divider size. Can be used any unit (like rem, em or pixels, for example 4px)
"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/","title":"EmbeddedVideo page","text":"A wrapper to easily serve embedded videos from supported sources (Youtube, Dailymotion and Facebook watch for now) - https://www.youtube-nocookie.com/ is used for youtube videos to prevent cookies
"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/css-vars/","title":"EmbeddedVideo CSS variables","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/","title":"EmbeddedVideo properties","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/#props-table","title":"Props table","text":"Parameter Type Default url string /"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/#url","title":"url","text":"Type Default string / External video url to embed
"},{"location":"old-guides/V3/components/atoms/IconButton/","title":"IconButton page","text":"An empty button, without additional styles, to make an icon clickable
"},{"location":"old-guides/V3/components/atoms/IconButton/css-vars/","title":"IconButton CSS variables","text":""},{"location":"old-guides/V3/components/atoms/IconButton/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/IconButton/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"old-guides/V3/components/atoms/IconButton/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/IconButton/props/","title":"IconButton properties","text":""},{"location":"old-guides/V3/components/atoms/IconButton/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/IconButton/props/#props-table","title":"Props table","text":"Parameter Type Default children JSX.Element | string / onMouseEnter () => void / onMouseLeave () => void / onClick () => void () => {}"},{"location":"old-guides/V3/components/atoms/IconButton/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/IconButton/props/#children","title":"children","text":"Type Default JSX.Element | string / Button content - extended from Button component
"},{"location":"old-guides/V3/components/atoms/IconButton/props/#onmouseenter","title":"onMouseEnter","text":"Type Default () => void / This callback is triggered everytime the cursor enter the button area - extended from Button component
"},{"location":"old-guides/V3/components/atoms/IconButton/props/#onmouseleave","title":"onMouseLeave","text":"Type Default () => void / This callback is triggered everytime the cursor exit the button area - extended from Button component
"},{"location":"old-guides/V3/components/atoms/IconButton/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when Button component is clicked - extended from Button component
"},{"location":"old-guides/V3/components/atoms/Image/","title":"Image page","text":"An Image component, enhanced by MoBrix-ui system
"},{"location":"old-guides/V3/components/atoms/Image/css-vars/","title":"Image CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Image/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Image/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"old-guides/V3/components/atoms/Image/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Image/props/","title":"Image properties","text":""},{"location":"old-guides/V3/components/atoms/Image/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Image/props/#props-table","title":"Props table","text":"Parameter Type Default src string / width number / height number / alt string /"},{"location":"old-guides/V3/components/atoms/Image/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Image/props/#src","title":"src","text":"Type Default string / Image src attribute
"},{"location":"old-guides/V3/components/atoms/Image/props/#width","title":"width","text":"Type Default number / Image width attribute
"},{"location":"old-guides/V3/components/atoms/Image/props/#height","title":"height","text":"Type Default number / Image height attribute
"},{"location":"old-guides/V3/components/atoms/Image/props/#alt","title":"alt","text":"Type Default string / Image alt attribute
"},{"location":"old-guides/V3/components/atoms/Input/","title":"Input page","text":"A flexible text input element
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/","title":"Input CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Input/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-inputbox-background / / --mbx-inputbox-background-light --mbx-inputbox-background --mbx-background-color-light --mbx-inputbox-background-dark --mbx-inputbox-background --mbx-background-color-dark --mbx-inputbox-text-color / / --mbx-inputbox-text-color-light --mbx-inputbox-text-color --mbx-text-color-light --mbx-inputbox-text-color-dark --mbx-inputbox-text-color --mbx-text-color-dark --mbx-inputbox-background-hover / / --mbx-inputbox-background-hover-light --mbx-inputbox-background-hover --mbx-background-color-hover-light --mbx-inputbox-background-hover-dark --mbx-inputbox-background-hover --mbx-background-color-hover-dark --mbx-inputbox-text-color-hover / / --mbx-inputbox-text-color-hover-light --mbx-inputbox-text-color-hover --mbx-text-color-hover-light --mbx-inputbox-text-color-hover-dark --mbx-inputbox-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background","title":"--mbx-inputbox-background","text":"Fallback Default / / Fallback value for mbx-inputbox-background-light and mbx-inputbox-background-dark
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-light","title":"--mbx-inputbox-background-light","text":"Fallback Default --mbx-inputbox-background --mbx-background-color-light Input background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-dark","title":"--mbx-inputbox-background-dark","text":"Fallback Default --mbx-inputbox-background --mbx-background-color-dark Input background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color","title":"--mbx-inputbox-text-color","text":"Fallback Default / / Fallback value for mbx-inputbox-text-color-light and mbx-inputbox-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-light","title":"--mbx-inputbox-text-color-light","text":"Fallback Default --mbx-inputbox-text-color --mbx-text-color-light Input text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-dark","title":"--mbx-inputbox-text-color-dark","text":"Fallback Default --mbx-inputbox-text-color --mbx-text-color-dark Input text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-hover","title":"--mbx-inputbox-background-hover","text":"Fallback Default / / Fallback value for mbx-inputbox-background-hover-light and mbx-inputbox-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-hover-light","title":"--mbx-inputbox-background-hover-light","text":"Fallback Default --mbx-inputbox-background-hover --mbx-background-color-hover-light Input background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-hover-dark","title":"--mbx-inputbox-background-hover-dark","text":"Fallback Default --mbx-inputbox-background-hover --mbx-background-color-hover-dark Input background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover","title":"--mbx-inputbox-text-color-hover","text":"Fallback Default / / Fallback value for mbx-inputbox-text-color-hover-light and mbx-inputbox-text-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover-light","title":"--mbx-inputbox-text-color-hover-light","text":"Fallback Default --mbx-inputbox-text-color-hover --mbx-text-color-hover-light Input text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover-dark","title":"--mbx-inputbox-text-color-hover-dark","text":"Fallback Default --mbx-inputbox-text-color-hover --mbx-text-color-hover-dark Input text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Input/props/","title":"Input properties","text":""},{"location":"old-guides/V3/components/atoms/Input/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Input/props/#props-table","title":"Props table","text":"Parameter Type Default value string / placeholder string / readOnly boolean false onChange (newValue: string) => void () => {}"},{"location":"old-guides/V3/components/atoms/Input/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Input/props/#value","title":"value","text":"Type Default string / text input value
"},{"location":"old-guides/V3/components/atoms/Input/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set
"},{"location":"old-guides/V3/components/atoms/Input/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter
"},{"location":"old-guides/V3/components/atoms/Input/props/#onchange","title":"onChange","text":"Type Default (newValue: string) => void () => {} Callback triggered when Input component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Label/","title":"Label page","text":"A text wrapper, with many options to customize its content
"},{"location":"old-guides/V3/components/atoms/Label/css-vars/","title":"Label CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Label/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Label/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-label-text-color / / --mbx-label-text-color-light --mbx-label-text-color --mbx-text-color-light --mbx-label-text-color-dark --mbx-label-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/atoms/Label/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Label/css-vars/#-mbx-label-text-color","title":"--mbx-label-text-color","text":"Fallback Default / / Fallback value for mbx-label-text-color-light and mbx-label-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Label/css-vars/#-mbx-label-text-color-light","title":"--mbx-label-text-color-light","text":"Fallback Default --mbx-label-text-color --mbx-text-color-light Label text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Label/css-vars/#-mbx-label-text-color-dark","title":"--mbx-label-text-color-dark","text":"Fallback Default --mbx-label-text-color --mbx-text-color-dark Label text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Label/props/","title":"Label properties","text":""},{"location":"old-guides/V3/components/atoms/Label/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Label/props/#props-table","title":"Props table","text":"Parameter Type Default children string | string[] /"},{"location":"old-guides/V3/components/atoms/Label/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Label/props/#children","title":"children","text":"Type Default string | string[] / text content to show (string arrays are accepted)
"},{"location":"old-guides/V3/components/atoms/Link/","title":"Link page","text":"A re-defined <a> component, designed to be better used with links
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/","title":"Link CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Link/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-link-color / / --mbx-link-color-light --mbx-link-color --mbx-text-color-light --mbx-link-color-dark --mbx-link-color --mbx-text-color-dark --mbx-link-color-hover / / --mbx-link-color-hover-light --mbx-link-color-hover --mbx-link-color-light --mbx-link-color-hover-dark --mbx-link-color-hover --mbx-link-color-dark"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color","title":"--mbx-link-color","text":"Fallback Default / / Fallback value for mbx-link-color-light and mbx-link-color-dark
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-light","title":"--mbx-link-color-light","text":"Fallback Default --mbx-link-color --mbx-text-color-light Link text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-dark","title":"--mbx-link-color-dark","text":"Fallback Default --mbx-link-color --mbx-text-color-dark Link text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-hover","title":"--mbx-link-color-hover","text":"Fallback Default / / Fallback value for mbx-link-color-hover-light and mbx-link-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-hover-light","title":"--mbx-link-color-hover-light","text":"Fallback Default --mbx-link-color-hover --mbx-link-color-light Link text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-hover-dark","title":"--mbx-link-color-hover-dark","text":"Fallback Default --mbx-link-color-hover --mbx-link-color-dark Link text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Link/props/","title":"Link properties","text":""},{"location":"old-guides/V3/components/atoms/Link/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Link/props/#props-table","title":"Props table","text":"Parameter Type Default to string / underline boolean true newTab string false children JSX.Element | string /"},{"location":"old-guides/V3/components/atoms/Link/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Link/props/#to","title":"to","text":"Type Default string / Link url
"},{"location":"old-guides/V3/components/atoms/Link/props/#underline","title":"underline","text":"Type Default boolean true if true, the link will be displayed underlined (default=true)
"},{"location":"old-guides/V3/components/atoms/Link/props/#newtab","title":"newTab","text":"Type Default string false f true, the link will be opened in a new tab
"},{"location":"old-guides/V3/components/atoms/Link/props/#children","title":"children","text":"Type Default JSX.Element | string / Link content
"},{"location":"old-guides/V3/components/atoms/PackageVersion/","title":"PackageVersion page","text":"A tiny and smart component, to show a package version from many sources (like NPM registry or directly from Github repo). Can be easily integrated into more complex components.
"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/","title":"PackageVersion CSS variables","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-packageversion-text-color / / --mbx-packageversion-text-color-light --mbx-packageversion-text-color --mbx-label-text-color-light --mbx-packageversion-text-color-dark --mbx-packageversion-text-color --mbx-label-text-color-dark"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color","title":"--mbx-packageversion-text-color","text":"Fallback Default / / Fallback value for mbx-packageversion-text-color-light and mbx-packageversion-text-color-dark
"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color-light","title":"--mbx-packageversion-text-color-light","text":"Fallback Default --mbx-packageversion-text-color --mbx-label-text-color-light PackageVersion text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color-dark","title":"--mbx-packageversion-text-color-dark","text":"Fallback Default --mbx-packageversion-text-color --mbx-label-text-color-dark PackageVersion text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/","title":"PackageVersion properties","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#props-table","title":"Props table","text":"Parameter Type Default name () => void / source npm | github-release | github / user string / branch string /"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#name","title":"name","text":"Type Default () => void / Library name (it is used as repo name when source = github)
"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#source","title":"source","text":"Type Default npm | github-release | github / Package location (actually, NPM, Github and Github release are supported)
"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#user","title":"user","text":"Type Default string / Library owner (it is used as repo owner username when source = github or source = github-release)
"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#branch","title":"branch","text":"Type Default string / Github repo default branch (used when source = github)
"},{"location":"old-guides/V3/components/atoms/RadioButton/","title":"RadioButton page","text":"A single radio button component. Optionally, can prevent user to deselect it
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/","title":"RadioButton CSS variables","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-radio-background / / --mbx-radio-background-light --mbx-radio-background radial-gradient(#f1f1f1 20%, #e4e4e4 30%, #bebebe 55%, #f0f0f0 20%) --mbx-radio-background-dark --mbx-radio-background radial-gradient(closest-side, #2d3748 20%, #232b38 30%, #1d1f44 55%, #191f29 20%) --mbx-radio-background-hover / / --mbx-radio-background-hover-light --mbx-radio-background-hover --mbx-radio-background-light --mbx-radio-background-hover-dark --mbx-radio-background-hover --mbx-radio-background-dark --mbx-radio-icon-background / / --mbx-radio-icon-background-light --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #2d3748, #191f29) --mbx-radio-icon-background-dark --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #dbe0e6, #949494)"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background","title":"--mbx-radio-background","text":"Fallback Default / / Fallback value for mbx-radio-background-light and mbx-radio-background-dark
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-light","title":"--mbx-radio-background-light","text":"Fallback Default --mbx-radio-background radial-gradient(#f1f1f1 20%, #e4e4e4 30%, #bebebe 55%, #f0f0f0 20%) RadioButton background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-dark","title":"--mbx-radio-background-dark","text":"Fallback Default --mbx-radio-background radial-gradient(closest-side, #2d3748 20%, #232b38 30%, #1d1f44 55%, #191f29 20%) RadioButton background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover","title":"--mbx-radio-background-hover","text":"Fallback Default / / Fallback value for mbx-radio-background-hover-light and mbx-radio-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover-light","title":"--mbx-radio-background-hover-light","text":"Fallback Default --mbx-radio-background-hover --mbx-radio-background-light RadioButton background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover-dark","title":"--mbx-radio-background-hover-dark","text":"Fallback Default --mbx-radio-background-hover --mbx-radio-background-dark RadioButton background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background","title":"--mbx-radio-icon-background","text":"Fallback Default / / Fallback value for mbx-radio-icon-background-light and mbx-radio-icon-background-dark
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background-light","title":"--mbx-radio-icon-background-light","text":"Fallback Default --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #2d3748, #191f29) RadioButton icon background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background-dark","title":"--mbx-radio-icon-background-dark","text":"Fallback Default --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #dbe0e6, #949494) RadioButton icon background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/RadioButton/props/","title":"RadioButton properties","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean false deselectable boolean false onChange (newValue: boolean) => void () => {}"},{"location":"old-guides/V3/components/atoms/RadioButton/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/props/#value","title":"value","text":"Type Default boolean false actual radio button value (radio icon visiblity)
"},{"location":"old-guides/V3/components/atoms/RadioButton/props/#deselectable","title":"deselectable","text":"Type Default boolean false if false, the button can be selected only once (the value can't change then)
"},{"location":"old-guides/V3/components/atoms/RadioButton/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when RadioButton component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Rater/","title":"Rater page","text":"A modern rater component, to let the user leave a review within your app
"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/","title":"Rater CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-rater-background / / --mbx-rater-background-light --mbx-rater-background --mbx-background-light --mbx-rater-background-dark --mbx-rater-background --mbx-background-dark"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#-mbx-rater-background","title":"--mbx-rater-background","text":"Fallback Default / / Fallback value for mbx-rater-background-light and mbx-rater-background-dark
"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#-mbx-rater-background-light","title":"--mbx-rater-background-light","text":"Fallback Default --mbx-rater-background --mbx-background-light Rater background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#-mbx-rater-background-dark","title":"--mbx-rater-background-dark","text":"Fallback Default --mbx-rater-background --mbx-background-dark Rater background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Rater/props/","title":"Rater properties","text":""},{"location":"old-guides/V3/components/atoms/Rater/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Rater/props/#props-table","title":"Props table","text":"Parameter Type Default value number 0 max number 5 readOnly boolean false type star|circle 'star' vertical boolean false onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/atoms/Rater/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Rater/props/#value","title":"value","text":"Type Default number 0 actual vote
"},{"location":"old-guides/V3/components/atoms/Rater/props/#max","title":"max","text":"Type Default number 5 max vote (max number of icons displayed)
"},{"location":"old-guides/V3/components/atoms/Rater/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, the rate can't be changed by clicking on the icons
"},{"location":"old-guides/V3/components/atoms/Rater/props/#type","title":"type","text":"Type Default star|circle 'star' vote icons type
"},{"location":"old-guides/V3/components/atoms/Rater/props/#vertical","title":"vertical","text":"Type Default boolean false if true, rate icons will be showed vertically
"},{"location":"old-guides/V3/components/atoms/Rater/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} callback triggered when user select a vote
"},{"location":"old-guides/V3/components/atoms/Selector/","title":"Selector page","text":"A re-defined select component
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/","title":"Selector CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-selector-background / / --mbx-selector-background-light --mbx-selector-background --mbx-background-light --mbx-selector-background-dark --mbx-selector-background --mbx-background-dark)) --mbx-selector-text-color / / --mbx-selector-text-color-light --mbx-selector-text-color --mbx-text-color-light --mbx-selector-text-color-dark --mbx-selector-text-color [--mbx-text-color-dark --mbx-selector-background-hover / / --mbx-selector-background-hover-light --mbx-selector-background-hover --mbx-selector-background-light --mbx-selector-background-hover-dark --mbx-selector-background-hover --mbx-selector-background-dark --mbx-selector-text-color-hover / / --mbx-selector-text-color-hover-light --mbx-selector-text-color-hover --mbx-text-color-hover-light --mbx-selector-text-color-hover-dark --mbx-selector-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background","title":"--mbx-selector-background","text":"Fallback Default / / Fallback value for mbx-selector-background-light and mbx-selector-background-dark
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-light","title":"--mbx-selector-background-light","text":"Fallback Default --mbx-selector-background --mbx-background-light Selector background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-dark","title":"--mbx-selector-background-dark","text":"Fallback Default --mbx-selector-background --mbx-background-dark)) Selector background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color","title":"--mbx-selector-text-color","text":"Fallback Default / / Fallback value for mbx-selector-text-color-light and mbx-selector-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-light","title":"--mbx-selector-text-color-light","text":"Fallback Default --mbx-selector-text-color --mbx-text-color-light Selector text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-dark","title":"--mbx-selector-text-color-dark","text":"Fallback Default --mbx-selector-text-color [--mbx-text-color-dark Selector text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-hover","title":"--mbx-selector-background-hover","text":"Fallback Default / / Fallback value for mbx-selector-background-hover-light and mbx-selector-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-hover-light","title":"--mbx-selector-background-hover-light","text":"Fallback Default --mbx-selector-background-hover --mbx-selector-background-light Selector background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-hover-dark","title":"--mbx-selector-background-hover-dark","text":"Fallback Default --mbx-selector-background-hover --mbx-selector-background-dark Selector background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover","title":"--mbx-selector-text-color-hover","text":"Fallback Default / / Fallback value for mbx-selector-text-color-hover-light and mbx-selector-text-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover-light","title":"--mbx-selector-text-color-hover-light","text":"Fallback Default --mbx-selector-text-color-hover --mbx-text-color-hover-light Selector text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover-dark","title":"--mbx-selector-text-color-hover-dark","text":"Fallback Default --mbx-selector-text-color-hover --mbx-text-color-hover-dark Selector text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Selector/props/","title":"Selector properties","text":""},{"location":"old-guides/V3/components/atoms/Selector/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Selector/props/#props-table","title":"Props table","text":"Parameter Type Default value number 0 elements string[] [] optionClassName string / onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/atoms/Selector/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Selector/props/#value","title":"value","text":"Type Default number 0 option index actually displayed
"},{"location":"old-guides/V3/components/atoms/Selector/props/#elements","title":"elements","text":"Type Default string[] [] selector options array, every element must be a string
"},{"location":"old-guides/V3/components/atoms/Selector/props/#optionclassname","title":"optionClassName","text":"Type Default string / className applied on every options inside the selector
"},{"location":"old-guides/V3/components/atoms/Selector/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Selector component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Slider/","title":"Slider page","text":"A modern range input component, to control a value using a simple slider
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/","title":"Slider CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-slider-background / / --mbx-slider-background-light --mbx-slider-background --mbx-background-light --mbx-slider-background-dark --mbx-slider-background --mbx-background-dark --mbx-slider-thumb-color / / --mbx-slider-thumb-color-light --mbx-slider-thumb-color radial-gradient(#2d3748, #1d232e) --mbx-slider-thumb-color-dark --mbx-slider-thumb-color radial-gradient(#e3e4e9, #9b9999) --mbx-slider-thumb-color-hover / / --mbx-slider-thumb-color-hover-light --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-light --mbx-slider-thumb-color-hover-dark --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-dark"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-background","title":"--mbx-slider-background","text":"Fallback Default / / Fallback value for mbx-slider-background-light and mbx-slider-background-dark
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-background-light","title":"--mbx-slider-background-light","text":"Fallback Default --mbx-slider-background --mbx-background-light Slider background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-background-dark","title":"--mbx-slider-background-dark","text":"Fallback Default --mbx-slider-background --mbx-background-dark Slider background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color","title":"--mbx-slider-thumb-color","text":"Fallback Default / / Fallback value for mbx-slider-thumb-color-light and mbx-slider-thumb-color-dark
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-light","title":"--mbx-slider-thumb-color-light","text":"Fallback Default --mbx-slider-thumb-color radial-gradient(#2d3748, #1d232e) Slider thumb color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-dark","title":"--mbx-slider-thumb-color-dark","text":"Fallback Default --mbx-slider-thumb-color radial-gradient(#e3e4e9, #9b9999) Slider thumb color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover","title":"--mbx-slider-thumb-color-hover","text":"Fallback Default / / Fallback value for mbx-slider-thumb-color-hover-light and mbx-slider-thumb-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover-light","title":"--mbx-slider-thumb-color-hover-light","text":"Fallback Default --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-light Slider thumb color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover-dark","title":"--mbx-slider-thumb-color-hover-dark","text":"Fallback Default --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-dark Slider thumb color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Slider/props/","title":"Slider properties","text":""},{"location":"old-guides/V3/components/atoms/Slider/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Slider/props/#props-table","title":"Props table","text":"Parameter Type Default value number / min number / max number / readOnly boolean / onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/atoms/Slider/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Slider/props/#value","title":"value","text":"Type Default number / Actual slider value
"},{"location":"old-guides/V3/components/atoms/Slider/props/#min","title":"min","text":"Type Default number / Min allowed value
"},{"location":"old-guides/V3/components/atoms/Slider/props/#max","title":"max","text":"Type Default number / Max allowed value
"},{"location":"old-guides/V3/components/atoms/Slider/props/#readonly","title":"readOnly","text":"Type Default boolean / if true, component value can only be set with value parameter
"},{"location":"old-guides/V3/components/atoms/Slider/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Slider component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Spinner/","title":"Spinner page","text":"A smart status indicator, optionally with custom images showed for every state (defaults are loading,success and error)
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/","title":"Spinner CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-spinner-success-color / / --mbx-spinner-success-color-light --mbx-spinner-success-color #05bc29 --mbx-spinner-success-color-dark --mbx-spinner-success-color #05bc29 --mbx-spinner-error-color / / --mbx-spinner-error-color-light --mbx-spinner-error-color #ff0000 --mbx-spinner-error-color-dark --mbx-spinner-error-color #ff0000 --mbx-spinner-loading-color / / --mbx-spinner-loading-color-light --mbx-spinner-loading-color #202020 --mbx-spinner-loading-color-dark --mbx-spinner-loading-color #202020"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-success-color","title":"--mbx-spinner-success-color","text":"Fallback Default / / Fallback value for --mbx-spinner-success-color-light and --mbx-spinner-success-color-dark
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-success-color-light","title":"--mbx-spinner-success-color-light","text":"Fallback Default --mbx-spinner-success-color #05bc29 Spinner success color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-success-color-dark","title":"--mbx-spinner-success-color-dark","text":"Fallback Default --mbx-spinner-success-color #05bc29 Spinner success color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-error-color","title":"--mbx-spinner-error-color","text":"Fallback Default / / Fallback value for --mbx-spinner-error-color-light and --mbx-spinner-error-color-dark
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-error-color-light","title":"--mbx-spinner-error-color-light","text":"Fallback Default --mbx-spinner-error-color #ff0000 Spinner error color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-error-color-dark","title":"--mbx-spinner-error-color-dark","text":"Fallback Default --mbx-spinner-error-color #ff0000 Spinner error color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color","title":"--mbx-spinner-loading-color","text":"Fallback Default / / Fallback value for --mbx-spinner-loading-color-light and --mbx-spinner-loading-color-dark
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color-light","title":"--mbx-spinner-loading-color-light","text":"Fallback Default --mbx-spinner-loading-color #202020 Spinner loading color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color-dark","title":"--mbx-spinner-loading-color-dark","text":"Fallback Default --mbx-spinner-loading-color #202020 Spinner loading color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Spinner/props/","title":"Spinner properties","text":""},{"location":"old-guides/V3/components/atoms/Spinner/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Spinner/props/#props-table","title":"Props table","text":"Parameter Type Default value number 'loading' statuses Record /"},{"location":"old-guides/V3/components/atoms/Spinner/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Spinner/props/#value","title":"value","text":"Type Default number 'loading' Spinner status
"},{"location":"old-guides/V3/components/atoms/Spinner/props/#statuses","title":"statuses","text":"Type Default Record / Custom statuses, to map every icon with a specific status
"},{"location":"old-guides/V3/components/atoms/Toggle/","title":"Toggle page","text":"A compact Toggle switcher, customized to reflect its actual status
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/","title":"Toggle CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-toggle-background / / --mbx-toggle-background-light --mbx-toggle-background --mbx-background-light --mbx-toggle-background-dark --mbx-toggle-background --mbx-background-dark --mbx-toggle-icon-on-internal-color / / --mbx-toggle-icon-on-internal-color-light --mbx-toggle-icon-on-internal-color #ffffff --mbx-toggle-icon-on-internal-color-dark --mbx-toggle-icon-on-internal-color #ffffff --mbx-toggle-icon-on-external-color / / --mbx-toggle-icon-on-external-color-light --mbx-toggle-icon-on-external-color #adadad --mbx-toggle-icon-on-external-color-dark --mbx-toggle-icon-on-external-color #adadad --mbx-toggle-icon-off-internal-color / / --mbx-toggle-icon-off-internal-color-light --mbx-toggle-icon-off-internal-color #a5a5a5 --mbx-toggle-icon-off-internal-color-dark --mbx-toggle-icon-off-internal-color #a5a5a5 --mbx-toggle-icon-off-external-color / / --mbx-toggle-icon-off-external-color-light --mbx-toggle-icon-off-external-color #a7a3a3 --mbx-toggle-icon-off-external-color-dark --mbx-toggle-icon-off-external-color #a7a3a3"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-background","title":"--mbx-toggle-background","text":"Fallback Default / / Fallback value for --mbx-toggle-background-light and --mbx-toggle-background-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-background-light","title":"--mbx-toggle-background-light","text":"Fallback Default --mbx-toggle-background --mbx-background-light Toggle background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-background-dark","title":"--mbx-toggle-background-dark","text":"Fallback Default --mbx-toggle-background --mbx-background-dark Toggle background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color","title":"--mbx-toggle-icon-on-internal-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-on-internal-color-light and --mbx-toggle-icon-on-internal-color-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color-light","title":"--mbx-toggle-icon-on-internal-color-light","text":"Fallback Default --mbx-toggle-icon-on-internal-color #ffffff Toggle icon internal color, when dark mode is off and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color-dark","title":"--mbx-toggle-icon-on-internal-color-dark","text":"Fallback Default --mbx-toggle-icon-on-internal-color #ffffff Toggle icon internal color, when dark mode is off and toggle status is on
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color","title":"--mbx-toggle-icon-on-external-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-on-external-color-light and --mbx-toggle-icon-on-external-color-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color-light","title":"--mbx-toggle-icon-on-external-color-light","text":"Fallback Default --mbx-toggle-icon-on-external-color #adadad Toggle icon external color, when dark mode is off and toggle status is on
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color-dark","title":"--mbx-toggle-icon-on-external-color-dark","text":"Fallback Default --mbx-toggle-icon-on-external-color #adadad Toggle icon external color, when dark mode is on and toggle status is on
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color","title":"--mbx-toggle-icon-off-internal-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-off-internal-color-light and --mbx-toggle-icon-off-internal-color-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color-light","title":"--mbx-toggle-icon-off-internal-color-light","text":"Fallback Default --mbx-toggle-icon-off-internal-color #a5a5a5 Toggle icon internal color, when dark mode is off and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color-dark","title":"--mbx-toggle-icon-off-internal-color-dark","text":"Fallback Default --mbx-toggle-icon-off-internal-color #a5a5a5 Toggle icon internal color, when dark mode is on and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color","title":"--mbx-toggle-icon-off-external-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-off-external-color-light and --mbx-toggle-icon-off-external-color-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color-light","title":"--mbx-toggle-icon-off-external-color-light","text":"Fallback Default --mbx-toggle-icon-off-external-color #a7a3a3 Toggle icon external color, when dark mode is off and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color-dark","title":"--mbx-toggle-icon-off-external-color-dark","text":"Fallback Default --mbx-toggle-icon-off-external-color #a7a3a3 Toggle icon external color, when dark mode is on and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/props/","title":"Toggle properties","text":""},{"location":"old-guides/V3/components/atoms/Toggle/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Toggle/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean / onIcon JSX.Element / icon JSX.Element / offIcon JSX.Element / onChange (newValue: boolean) => void () => {}"},{"location":"old-guides/V3/components/atoms/Toggle/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Toggle/props/#value","title":"value","text":"Type Default boolean / toggle status (true - on/false - off)
"},{"location":"old-guides/V3/components/atoms/Toggle/props/#onicon","title":"onIcon","text":"Type Default JSX.Element / custom toggle on icon (value === true)
"},{"location":"old-guides/V3/components/atoms/Toggle/props/#icon","title":"icon","text":"Type Default JSX.Element / custom toggle icon, used as a default icon
"},{"location":"old-guides/V3/components/atoms/Toggle/props/#officon","title":"offIcon","text":"Type Default JSX.Element / custom toggle off icon (value === false)
"},{"location":"old-guides/V3/components/atoms/Toggle/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when Toggle component input value is changed by the user
"},{"location":"old-guides/V3/components/molecules/","title":"MoBrix-ui molecules","text":""},{"location":"old-guides/V3/components/molecules/#summary","title":"Summary","text":" - Card
- Carousel
- Container
- DismissableCard
- Dropdown
- ExpandableContainer
- FormField
- List
- Modal
- Popup
- RadioButtonGroup
- Review
- Table
- TabViewer
"},{"location":"old-guides/V3/components/molecules/Card/","title":"Card page","text":"A Card component. Its UI depends on given parameters (header, body and footer)
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/","title":"Card CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Card/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-card-background / / --mbx-card-background-light --mbx-card-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-card-background-dark --mbx-card-background linear-gradient(to right, #2d3748, #1d232e) --mbx-card-text-color / / --mbx-card-text-color-light --mbx-card-text-color --mbx-text-color-light --mbx-card-text-color-dark --mbx-card-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-background","title":"--mbx-card-background","text":"Fallback Default / / Fallback value for --mbx-card-background-light and --mbx-card-background-dark
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-background-light","title":"--mbx-card-background-light","text":"Fallback Default --mbx-card-background linear-gradient(to right, #fff, #ededee, #e6e7e7) Card background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-background-dark","title":"--mbx-card-background-dark","text":"Fallback Default --mbx-card-background linear-gradient(to right, #2d3748, #1d232e) Card background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-text-color","title":"--mbx-card-text-color","text":"Fallback Default / / Fallback value for --mbx-card-text-color-light and --mbx-card-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-text-color-light","title":"--mbx-card-text-color-light","text":"Fallback Default --mbx-card-text-color --mbx-text-color-light Card text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-text-color-dark","title":"--mbx-card-text-color-dark","text":"Fallback Default --mbx-card-text-color --mbx-text-color-dark Card text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Card/props/","title":"Card properties","text":""},{"location":"old-guides/V3/components/molecules/Card/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Card/props/#props-table","title":"Props table","text":"Parameter Type Default header JSX.Element | string / body JSX.Element | string / footer JSX.Element | string / headerClassName string / bodyClassName string / footerClassName string / headerProps Record / bodyProps Record / footerProps Record / noDivider boolean / noTopDivider boolean / noBottomDivider boolean / children JSX.Element | string /"},{"location":"old-guides/V3/components/molecules/Card/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Card/props/#header","title":"header","text":"Type Default JSX.Element | string / Card header content
"},{"location":"old-guides/V3/components/molecules/Card/props/#body","title":"body","text":"Type Default JSX.Element | string / Card body content
"},{"location":"old-guides/V3/components/molecules/Card/props/#footer","title":"footer","text":"Type Default JSX.Element | string / Card footer content
"},{"location":"old-guides/V3/components/molecules/Card/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on the Card header
"},{"location":"old-guides/V3/components/molecules/Card/props/#bodyclassname","title":"bodyClassName","text":"Type Default string / Custom classname applied on the Card body
"},{"location":"old-guides/V3/components/molecules/Card/props/#footerclassname","title":"footerClassName","text":"Type Default string / Custom classname applied on the Card footer
"},{"location":"old-guides/V3/components/molecules/Card/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on the Card header
"},{"location":"old-guides/V3/components/molecules/Card/props/#bodyprops","title":"bodyProps","text":"Type Default Record / Custom props applied on the Card body
"},{"location":"old-guides/V3/components/molecules/Card/props/#footerprops","title":"footerProps","text":"Type Default Record / Custom props applied on the Card footer
"},{"location":"old-guides/V3/components/molecules/Card/props/#nodivider","title":"noDivider","text":"Type Default boolean / If true, hide all dividers
"},{"location":"old-guides/V3/components/molecules/Card/props/#notopdivider","title":"noTopDivider","text":"Type Default boolean / If true, hide the top divider, between header and body
"},{"location":"old-guides/V3/components/molecules/Card/props/#nobottomdivider","title":"noBottomDivider","text":"Type Default boolean / If true, hide the top divider, between body and footer
"},{"location":"old-guides/V3/components/molecules/Card/props/#children","title":"children","text":"Type Default JSX.Element | string / Card content
"},{"location":"old-guides/V3/components/molecules/Carousel/","title":"Carousel page","text":"A compact carousel, to show any component (or image) into a slide, with dots and arrow button to go next/previous
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/","title":"Carousel CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-carousel-background / / --mbx-carousel-background-light --mbx-carousel-background --mbx-background-light --mbx-carousel-background-dark --mbx-carousel-background --mbx-background-dark --mbx-carousel-arrow-color / / --mbx-carousel-arrow-color-light --mbx-carousel-arrow-color #252525 --mbx-carousel-arrow-color-dark --mbx-carousel-arrow-color #e2e2e2 --mbx-carousel-arrow-color-hover / / --mbx-carousel-arrow-color-hover-light --mbx-carousel-arrow-color-hover #287dfd --mbx-carousel-arrow-color-hover-dark --mbx-carousel-arrow-color-hover #ff8007 --mbx-carousel-dot-empty-background / / --mbx-carousel-dot-empty-background-light --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) --mbx-carousel-dot-empty-background-dark --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) --mbx-carousel-dot-full-background / / --mbx-carousel-dot-full-background-light --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) --mbx-carousel-dot-full-background-dark --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4)"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-background","title":"--mbx-carousel-background","text":"Fallback Default / / Fallback value for --mbx-carousel-background-light and --mbx-carousel-background-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-background-light","title":"--mbx-carousel-background-light","text":"Fallback Default --mbx-carousel-background --mbx-background-light Carousel background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-background-dark","title":"--mbx-carousel-background-dark","text":"Fallback Default --mbx-carousel-background --mbx-background-dark Carousel background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color","title":"--mbx-carousel-arrow-color","text":"Fallback Default / / Fallback value for --mbx-carousel-arrow-color-light and --mbx-carousel-arrow-color-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-light","title":"--mbx-carousel-arrow-color-light","text":"Fallback Default --mbx-carousel-arrow-color #252525 Carousel arrow color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-dark","title":"--mbx-carousel-arrow-color-dark","text":"Fallback Default --mbx-carousel-arrow-color #e2e2e2 Carousel arrow color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-hover","title":"--mbx-carousel-arrow-color-hover","text":"Fallback Default / / Fallback value for --mbx-carousel-arrow-color-hover-light and --mbx-carousel-arrow-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-hover-light","title":"--mbx-carousel-arrow-color-hover-light","text":"Fallback Default --mbx-carousel-arrow-color-hover #287dfd Carousel arrow color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-hover-dark","title":"--mbx-carousel-arrow-color-hover-dark","text":"Fallback Default --mbx-carousel-arrow-color-hover #ff8007 Carousel arrow color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background","title":"--mbx-carousel-dot-empty-background","text":"Fallback Default / / Fallback value for --mbx-carousel-dot-empty-background-light and --mbx-carousel-dot-empty-background-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background-light","title":"--mbx-carousel-dot-empty-background-light","text":"Fallback Default --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) Carousel empty dot background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background-dark","title":"--mbx-carousel-dot-empty-background-dark","text":"Fallback Default --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) Carousel empty dot background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background","title":"--mbx-carousel-dot-full-background","text":"Fallback Default / / Fallback value for --mbx-carousel-dot-full-background-light and --mbx-carousel-dot-full-background-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background-light","title":"--mbx-carousel-dot-full-background-light","text":"Fallback Default --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) Carousel full dot background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background-dark","title":"--mbx-carousel-dot-full-background-dark","text":"Fallback Default --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) Carousel full dot background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Carousel/props/","title":"Carousel properties","text":""},{"location":"old-guides/V3/components/molecules/Carousel/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Carousel/props/#props-table","title":"Props table","text":"Parameter Type Default elements (JSX.Element | string)[] [] onChange (newValue: number) => void () => {} value number 0 arrowClassName string / dotClassName string /"},{"location":"old-guides/V3/components/molecules/Carousel/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Carousel/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] [] Carousel elements
"},{"location":"old-guides/V3/components/molecules/Carousel/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Carousel component input value is changed by the user
"},{"location":"old-guides/V3/components/molecules/Carousel/props/#value","title":"value","text":"Type Default number 0 Initial element to show (as index)
"},{"location":"old-guides/V3/components/molecules/Carousel/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the Carousel arrows
"},{"location":"old-guides/V3/components/molecules/Carousel/props/#dotclassname","title":"dotClassName","text":"Type Default string / Custom classname applied on every Carousel dot
"},{"location":"old-guides/V3/components/molecules/Container/","title":"Container page","text":"A simple but smart container, enhanced with MoBrix-ui common props
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/","title":"Container CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Container/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-container-background / / --mbx-container-background-light --mbx-container-background --mbx-background-light --mbx-container-background-dark --mbx-container-background --mbx-background-dark --mbx-container-text-color / / --mbx-container-text-color-light --mbx-container-text-color --mbx-text-color-light --mbx-container-text-color-dark --mbx-container-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-background","title":"--mbx-container-background","text":"Fallback Default / / Fallback value for --mbx-container-background-light and --mbx-container-background-dark
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-background-light","title":"--mbx-container-background-light","text":"Fallback Default --mbx-container-background --mbx-background-light Container background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-background-dark","title":"--mbx-container-background-dark","text":"Fallback Default --mbx-container-background --mbx-background-dark Container background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-text-color","title":"--mbx-container-text-color","text":"Fallback Default / / Fallback value for --mbx-container-text-color-light and --mbx-container-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-text-color-light","title":"--mbx-container-text-color-light","text":"Fallback Default --mbx-container-text-color --mbx-text-color-light Container text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-text-color-dark","title":"--mbx-container-text-color-dark","text":"Fallback Default --mbx-container-text-color --mbx-text-color-dark Container text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Container/props/","title":"Container properties","text":""},{"location":"old-guides/V3/components/molecules/Container/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Container/props/#props-table","title":"Props table","text":"Parameter Type Default children any / wrapper div | header | footer div"},{"location":"old-guides/V3/components/molecules/Container/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Container/props/#children","title":"children","text":"Type Default any / content to render inside Container
"},{"location":"old-guides/V3/components/molecules/Container/props/#wrapper","title":"wrapper","text":"Type Default div | header | footer div component wrapper type
"},{"location":"old-guides/V3/components/molecules/DismissableCard/","title":"DismissableCard page","text":"A standard Card with a dismiss function
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/","title":"DismissableCard CSS variables","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-dismissablecard-background / / --mbx-dismissablecard-background-light --mbx-dismissablecard-background --mbx-card-background-light --mbx-dismissablecard-background-dark --mbx-dismissablecard-background --mbx-card-background-dark --mbx-dismissablecard-text-color / / --mbx-dismissablecard-text-color-light --mbx-dismissablecard-text-color --mbx-card-text-color-light --mbx-dismissablecard-text-color-dark --mbx-dismissablecard-text-color --mbx-card-text-color-dark --mbx-dismissablecard-x-color / / --mbx-dismissablecard-x-color-light --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-light --mbx-dismissablecard-x-color-dark --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-dark --mbx-dismissablecard-x-color-hover / / --mbx-dismissablecard-x-color-hover-light --mbx-dismissablecard-x-color-hover red --mbx-dismissablecard-x-color-hover-dark --mbx-dismissablecard-x-color-hover red"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background","title":"--mbx-dismissablecard-background","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-background-light and --mbx-dismissablecard-background-dark
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background-light","title":"--mbx-dismissablecard-background-light","text":"Fallback Default --mbx-dismissablecard-background --mbx-card-background-light DismissableCard background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background-dark","title":"--mbx-dismissablecard-background-dark","text":"Fallback Default --mbx-dismissablecard-background --mbx-card-background-dark DismissableCard background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color","title":"--mbx-dismissablecard-text-color","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-text-color-light and --mbx-dismissablecard-text-color-dark
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color-light","title":"--mbx-dismissablecard-text-color-light","text":"Fallback Default --mbx-dismissablecard-text-color --mbx-card-text-color-light DismissableCard text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color-dark","title":"--mbx-dismissablecard-text-color-dark","text":"Fallback Default --mbx-dismissablecard-text-color --mbx-card-text-color-dark DismissableCard text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color","title":"--mbx-dismissablecard-x-color","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-x-color-light and --mbx-dismissablecard-x-color-dark
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-light","title":"--mbx-dismissablecard-x-color-light","text":"Fallback Default --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-light DismissableCard x icon color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-dark","title":"--mbx-dismissablecard-x-color-dark","text":"Fallback Default --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-dark DismissableCard x icon color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover","title":"--mbx-dismissablecard-x-color-hover","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-x-color-hover-light and --mbx-dismissablecard-x-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover-light","title":"--mbx-dismissablecard-x-color-hover-light","text":"Fallback Default --mbx-dismissablecard-x-color-hover red DismissableCard x icon color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover-dark","title":"--mbx-dismissablecard-x-color-hover-dark","text":"Fallback Default --mbx-dismissablecard-x-color-hover red DismissableCard x icon color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/","title":"DismissableCard properties","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} alwaysVisible boolean false header JSX.Element | string / body JSX.Element | string / footer JSX.Element | string / noDivider boolean / noTopDivider boolean / noBottomDivider boolean / children JSX.Element | string / headerClassName string / bodyClassName string / footerClassName string / headerProps Record / bodyProps Record / footerProps Record /"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#onclose","title":"onClose","text":"Type Default () => void () => {} Callback triggered when the X icon is clicked
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#alwaysvisible","title":"alwaysVisible","text":"Type Default boolean false If true, the DismissableCard won't disappear if the X icon is clicked (can be hidden with hide shared prop)
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#header","title":"header","text":"Type Default JSX.Element | string / Card header content - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#body","title":"body","text":"Type Default JSX.Element | string / Card body content - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#footer","title":"footer","text":"Type Default JSX.Element | string / Card footer content - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#nodivider","title":"noDivider","text":"Type Default boolean / If true, hide all dividers - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#notopdivider","title":"noTopDivider","text":"Type Default boolean / If true, hide the top divider, between header and body - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#nobottomdivider","title":"noBottomDivider","text":"Type Default boolean / If true, hide the top divider, between body and footer - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#children","title":"children","text":"Type Default JSX.Element | string / Card content - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on the Card header - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#bodyclassname","title":"bodyClassName","text":"Type Default string / Custom classname applied on the Card body - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#footerclassname","title":"footerClassName","text":"Type Default string / Custom classname applied on the Card footer - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on the Card header - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#bodyprops","title":"bodyProps","text":"Type Default Record / Custom props applied on the Card body - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#footerprops","title":"footerProps","text":"Type Default Record / Custom props applied on the Card footer - extended from Card component
"},{"location":"old-guides/V3/components/molecules/Dropdown/","title":"Dropdown page","text":"Show a list of elements in a dropdown menu (with fade-in and out effects). Can be easily customized and every element style and behaviour (with a callback) can be customized too.
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/","title":"Dropdown CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-dropdown-background / / --mbx-dropdown-background-light --mbx-dropdown-background --mbx-background-light --mbx-dropdown-background-dark --mbx-dropdown-background --mbx-background-dark --mbx-dropdown-text-color / / --mbx-dropdown-text-color-light --mbx-dropdown-text-color --mbx-text-color-light --mbx-dropdown-text-color-dark --mbx-dropdown-text-color --mbx-text-color-dark --mbx-dropdown-background-hover / / --mbx-dropdown-background-hover-light --mbx-dropdown-background --mbx-background-hover-light --mbx-dropdown-background-hover-dark --mbx-dropdown-background --mbx-background-hover-dark --mbx-dropdown-text-color-hover / / --mbx-dropdown-text-color-hover-light --mbx-dropdown-text-color-hover --mbx-text-color-hover-light --mbx-dropdown-text-color-hover-dark --mbx-dropdown-text-color-hover --mbx-text-color-hover-light --mbx-dropdown-arrow-color / / --mbx-dropdown-arrow-color-light --mbx-dropdown-arrow-color --mbx-dropdown-text-color-light --mbx-dropdown-arrow-color-dark --mbx-dropdown-arrow-color --mbx-dropdown-text-color-dark --mbx-dropdown-arrow-color-hover / / --mbx-dropdown-arrow-color-hover-light --mbx-dropdown-arrow-color-hover --mbx-dropdown-arrow-color-light --mbx-dropdown-arrow-color-hover-dark --mbx-dropdown-arrow-color-hover --mbx-dropdown-arrow-color-dark"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background","title":"--mbx-dropdown-background","text":"Fallback Default / / Fallback value for --mbx-dropdown-background-light and --mbx-dropdown-background-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-light","title":"--mbx-dropdown-background-light","text":"Fallback Default --mbx-dropdown-background --mbx-background-light Dropdown background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-dark","title":"--mbx-dropdown-background-dark","text":"Fallback Default --mbx-dropdown-background --mbx-background-dark Dropdown background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color","title":"--mbx-dropdown-text-color","text":"Fallback Default / / Fallback value for --mbx-dropdown-text-color-light and --mbx-dropdown-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-light","title":"--mbx-dropdown-text-color-light","text":"Fallback Default --mbx-dropdown-text-color --mbx-text-color-light Dropdown text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-dark","title":"--mbx-dropdown-text-color-dark","text":"Fallback Default --mbx-dropdown-text-color --mbx-text-color-dark Dropdown text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover","title":"--mbx-dropdown-background-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-background-hover-light and --mbx-dropdown-background-hover-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover-light","title":"--mbx-dropdown-background-hover-light","text":"Fallback Default --mbx-dropdown-background --mbx-background-hover-light Dropdown background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover-dark","title":"--mbx-dropdown-background-hover-dark","text":"Fallback Default --mbx-dropdown-background --mbx-background-hover-dark Dropdown background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover","title":"--mbx-dropdown-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-text-color-hover-light and --mbx-dropdown-text-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover-light","title":"--mbx-dropdown-text-color-hover-light","text":"Fallback Default --mbx-dropdown-text-color-hover --mbx-text-color-hover-light Dropdown text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover-dark","title":"--mbx-dropdown-text-color-hover-dark","text":"Fallback Default --mbx-dropdown-text-color-hover --mbx-text-color-hover-light Dropdown text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color","title":"--mbx-dropdown-arrow-color","text":"Fallback Default / / Fallback value for --mbx-dropdown-arrow-color-light and --mbx-dropdown-arrow-color-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-light","title":"--mbx-dropdown-arrow-color-light","text":"Fallback Default --mbx-dropdown-arrow-color --mbx-dropdown-text-color-light Dropdown arrow color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-dark","title":"--mbx-dropdown-arrow-color-dark","text":"Fallback Default --mbx-dropdown-arrow-color --mbx-dropdown-text-color-dark Dropdown arrow color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-hover","title":"--mbx-dropdown-arrow-color-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-arrow-color-hover-light and --mbx-dropdown-arrow-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-hover-light","title":"--mbx-dropdown-arrow-color-hover-light","text":"Fallback Default --mbx-dropdown-arrow-color-hover --mbx-dropdown-arrow-color-light Dropdown arrow color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-hover-dark","title":"--mbx-dropdown-arrow-color-hover-dark","text":"Fallback Default --mbx-dropdown-arrow-color-hover --mbx-dropdown-arrow-color-dark Dropdown arrow color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/props/","title":"Dropdown properties","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/props/#props-table","title":"Props table","text":"Parameter Type Default value number / elements (JSX.Element | string)[] [] hideArrow boolean false onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/molecules/Dropdown/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/props/#value","title":"value","text":"Type Default number / actual selected element (as index). If not set, default value will be used.
"},{"location":"old-guides/V3/components/molecules/Dropdown/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] [] Dropdown content elements
"},{"location":"old-guides/V3/components/molecules/Dropdown/props/#hidearrow","title":"hideArrow","text":"Type Default boolean false If true, hide the arrow icon near selected element
"},{"location":"old-guides/V3/components/molecules/Dropdown/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when selecting new element from dropdown
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/","title":"ExpandableContainer page","text":"An exapandable container, to hide/show some content on demand.
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/","title":"ExpandableContainer CSS variables","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-expandablecontainer-background / / --mbx-expandablecontainer-background-light --mbx-expandablecontainer-background mbx-container-background-light --mbx-expandablecontainer-background-dark --mbx-expandablecontainer-background mbx-container-background-dark --mbx-expandablecontainer-text-color / / --mbx-expandablecontainer-text-color-light --mbx-expandablecontainer-text-color mbx-container-text-color-light --mbx-expandablecontainer-text-color-dark --mbx-expandablecontainer-text-color mbx-container-text-color-dark --mbx-expandablecontainer-arrow-color / / --mbx-expandablecontainer-arrow-color-light --mbx-expandablecontainer-arrow-color --mbx-expandablecontainer-text-color-light --mbx-expandablecontainer-arrow-color-dark --mbx-expandablecontainer-arrow-color --mbx-expandablecontainer-text-color-dark --mbx-expandablecontainer-arrow-color-hover / / --mbx-expandablecontainer-arrow-color-hover-light --mbx-expandablecontainer-arrow-color-hover --mbx-expandablecontainer-arrow-color-lrrowight --mbx-expandablecontainer-arrow-color-hover-dark --mbx-expandablecontainer-arrow-color-hover --mbx-expandablecontainer-a-color-dark"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background","title":"--mbx-expandablecontainer-background","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-background-light and --mbx-expandablecontainer-background-dark
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background-light","title":"--mbx-expandablecontainer-background-light","text":"Fallback Default --mbx-expandablecontainer-background mbx-container-background-light ExpandableContainer background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background-dark","title":"--mbx-expandablecontainer-background-dark","text":"Fallback Default --mbx-expandablecontainer-background mbx-container-background-dark ExpandableContainer background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color","title":"--mbx-expandablecontainer-text-color","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-text-color-light and --mbx-expandablecontainer-text-color-dark
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color-light","title":"--mbx-expandablecontainer-text-color-light","text":"Fallback Default --mbx-expandablecontainer-text-color mbx-container-text-color-light ExpandableContainer text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color-dark","title":"--mbx-expandablecontainer-text-color-dark","text":"Fallback Default --mbx-expandablecontainer-text-color mbx-container-text-color-dark ExpandableContainer text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color","title":"--mbx-expandablecontainer-arrow-color","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-arrow-color-light and --mbx-expandablecontainer-arrow-color-dark
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-light","title":"--mbx-expandablecontainer-arrow-color-light","text":"Fallback Default --mbx-expandablecontainer-arrow-color --mbx-expandablecontainer-text-color-light ExpandableContainer arrow color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-dark","title":"--mbx-expandablecontainer-arrow-color-dark","text":"Fallback Default --mbx-expandablecontainer-arrow-color --mbx-expandablecontainer-text-color-dark ExpandableContainer arrow color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-hover","title":"--mbx-expandablecontainer-arrow-color-hover","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-arrow-color-hover-light and --mbx-expandablecontainer-arrow-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-hover-light","title":"--mbx-expandablecontainer-arrow-color-hover-light","text":"Fallback Default --mbx-expandablecontainer-arrow-color-hover --mbx-expandablecontainer-arrow-color-lrrowight ExpandableContainer arrow color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-hover-dark","title":"--mbx-expandablecontainer-arrow-color-hover-dark","text":"Fallback Default --mbx-expandablecontainer-arrow-color-hover --mbx-expandablecontainer-a-color-dark ExpandableContainer arrow color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/","title":"ExpandableContainer properties","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#props-table","title":"Props table","text":"Parameter Type Default children any / wrapper div | header | footer div expanded boolean / compact boolean / onChange (newValue: boolean) => void () => {}"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#children","title":"children","text":"Type Default any / content to render inside Container - extended from Container component
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#wrapper","title":"wrapper","text":"Type Default div | header | footer div component wrapper type - extended from Container component
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#expanded","title":"expanded","text":"Type Default boolean / Extra content showed only when container is expanded (compact === true)
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#compact","title":"compact","text":"Type Default boolean / if true, shows the whole container content
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when ExpandableContainer component input value is changed by the user
"},{"location":"old-guides/V3/components/molecules/FormField/","title":"FormField page","text":"A single form field. Depending on its type, a different input component is used inside
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/","title":"FormField CSS variables","text":""},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-formfield-background / / --mbx-formfield-background-dark --mbx-formfield-background --mbx-background-dark --mbx-formfield-background-light --mbx-formfield-background --mbx-background-light --mbx-formfield-text-color / / --mbx-formfield-text-color-light --mbx-formfield-text-color --mbx-text-color-light --mbx-formfield-text-color-dark --mbx-formfield-text-color --mbx-text-color-dark --mbx-formfield-background-hover / / --mbx-formfield-background-hover-light --mbx-formfield-background-hover --mbx-background-hover-light --mbx-formfield-background-hover-dark --mbx-formfield-background-hover --mbx-background-hover-light --mbx-formfield-text-color-hover / / --mbx-formfield-text-color-hover-light --mbx-formfield-text-color-hover --mbx-text-color-hover-light --mbx-formfield-text-color-hover-dark --mbx-formfield-text-color-hover --mbx-text-color-hover-dark --mbx-formfield-error-border / / --mbx-formfield-error-border-light --mbx-formfield-error-border red --mbx-formfield-error-border-dark --mbx-formfield-error-border red --mbx-formfield-error-text / / --mbx-formfield-error-text-light --mbx-formfield-error-text red --mbx-formfield-error-text-dark --mbx-formfield-error-text red"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background","title":"--mbx-formfield-background","text":"Fallback Default / / Fallback value for --mbx-formfield-background-light and --mbx-formfield-background-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-dark","title":"--mbx-formfield-background-dark","text":"Fallback Default --mbx-formfield-background --mbx-background-dark FormField background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-light","title":"--mbx-formfield-background-light","text":"Fallback Default --mbx-formfield-background --mbx-background-light FormField background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color","title":"--mbx-formfield-text-color","text":"Fallback Default / / Fallback value for --mbx-formfield-text-color-light and --mbx-formfield-text-color-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-light","title":"--mbx-formfield-text-color-light","text":"Fallback Default --mbx-formfield-text-color --mbx-text-color-light FormField text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-dark","title":"--mbx-formfield-text-color-dark","text":"Fallback Default --mbx-formfield-text-color --mbx-text-color-dark FormField text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-hover","title":"--mbx-formfield-background-hover","text":"Fallback Default / / Fallback value for --mbx-formfield-background-hover-light and --mbx-formfield-background-hover-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-hover-light","title":"--mbx-formfield-background-hover-light","text":"Fallback Default --mbx-formfield-background-hover --mbx-background-hover-light FormField background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-hover-dark","title":"--mbx-formfield-background-hover-dark","text":"Fallback Default --mbx-formfield-background-hover --mbx-background-hover-light FormField background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover","title":"--mbx-formfield-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-formfield-text-color-hover-light and --mbx-formfield-text-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover-light","title":"--mbx-formfield-text-color-hover-light","text":"Fallback Default --mbx-formfield-text-color-hover --mbx-text-color-hover-light FormField text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover-dark","title":"--mbx-formfield-text-color-hover-dark","text":"Fallback Default --mbx-formfield-text-color-hover --mbx-text-color-hover-dark FormField text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-border","title":"--mbx-formfield-error-border","text":"Fallback Default / / Fallback value for --mbx-formfield-error-border-light and --mbx-formfield-error-border-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-border-light","title":"--mbx-formfield-error-border-light","text":"Fallback Default --mbx-formfield-error-border red FormField error box border color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-border-dark","title":"--mbx-formfield-error-border-dark","text":"Fallback Default --mbx-formfield-error-border red FormField error box border color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-text","title":"--mbx-formfield-error-text","text":"Fallback Default / / Fallback value for --mbx-formfield-error-text-light and --mbx-formfield-error-text-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-text-light","title":"--mbx-formfield-error-text-light","text":"Fallback Default --mbx-formfield-error-text red FormField error box text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-text-dark","title":"--mbx-formfield-error-text-dark","text":"Fallback Default --mbx-formfield-error-text red FormField error box text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/FormField/props/","title":"FormField properties","text":""},{"location":"old-guides/V3/components/molecules/FormField/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/FormField/props/#props-table","title":"Props table","text":"Parameter Type Default value / / type boolean | text | numeric | radio | checkbox | toggle | rater | slider | input | counter 'text' placeholder string / required boolean / validate (fieldValue: any) => boolean () => \u02da{} header JSX.Element | string / headerClassName string / headerProps Record / errorLabel JSX.Element | string /"},{"location":"old-guides/V3/components/molecules/FormField/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/FormField/props/#value","title":"value","text":"Type Default / / FormField input content
"},{"location":"old-guides/V3/components/molecules/FormField/props/#type","title":"type","text":"Type Default boolean | text | numeric | radio | checkbox | toggle | rater | slider | input | counter 'text' The field type. It determines the UI component to be used to render it. Allowed types are:
boolean (rendered as a CheckBox)numeric (rendered as a Counter)text (rendered as a Input)radio (rendered as a RadioButton)checkbox (rendered as a CheckBox)toggle (rendered as a Toggle)rater (rendered as a Rater)slider (rendered as a Slider)input (rendered as a Input)counter (rendered as a Counter)
"},{"location":"old-guides/V3/components/molecules/FormField/props/#placeholder","title":"placeholder","text":"Type Default string /"},{"location":"old-guides/V3/components/molecules/FormField/props/#required","title":"required","text":"Type Default boolean / If true, the field switch to error state if its value is empty
"},{"location":"old-guides/V3/components/molecules/FormField/props/#validate","title":"validate","text":"Type Default (fieldValue: any) => boolean () => \u02da{} Custom validation function called on submit
"},{"location":"old-guides/V3/components/molecules/FormField/props/#header","title":"header","text":"Type Default JSX.Element | string / Form field header
"},{"location":"old-guides/V3/components/molecules/FormField/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on every header element
"},{"location":"old-guides/V3/components/molecules/FormField/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on every header element (including MoBrix-ui shared props)
"},{"location":"old-guides/V3/components/molecules/FormField/props/#errorlabel","title":"errorLabel","text":"Type Default JSX.Element | string / Custom error box content, displayed when FormField is in error state
"},{"location":"old-guides/V3/components/molecules/List/","title":"List page","text":"A custom bullet list, that support any type of elements
"},{"location":"old-guides/V3/components/molecules/List/css-vars/","title":"List CSS variables","text":""},{"location":"old-guides/V3/components/molecules/List/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-list-text-color / / --mbx-list-text-color-light --mbx-list-text-color --mbx-text-color-light --mbx-list-text-color-dark --mbx-list-text-color --mbx-text-color-dark --mbx-list-text-color-hover / / --mbx-list-text-color-hover-light --mbx-list-text-color-hover --mbx-text-color-hover-light --mbx-list-text-color-hover-dark --mbx-list-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/molecules/List/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color","title":"--mbx-list-text-color","text":"Fallback Default / / Fallback value for --mbx-list-text-color-light and --mbx-list-text-color-dark
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-light","title":"--mbx-list-text-color-light","text":"Fallback Default --mbx-list-text-color --mbx-text-color-light List element text color when dark is off
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-dark","title":"--mbx-list-text-color-dark","text":"Fallback Default --mbx-list-text-color --mbx-text-color-dark List element text color when dark is on
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-hover","title":"--mbx-list-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-list-text-color-hover-light and --mbx-list-text-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-hover-light","title":"--mbx-list-text-color-hover-light","text":"Fallback Default --mbx-list-text-color-hover --mbx-text-color-hover-light List element text color when dark is off, on hover
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-hover-dark","title":"--mbx-list-text-color-hover-dark","text":"Fallback Default --mbx-list-text-color-hover --mbx-text-color-hover-dark List element text color when dark is on, on hover
"},{"location":"old-guides/V3/components/molecules/List/props/","title":"List properties","text":""},{"location":"old-guides/V3/components/molecules/List/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/List/props/#props-table","title":"Props table","text":"Parameter Type Default elements (JSX.Element | string)[] / onClick () => void () => {}"},{"location":"old-guides/V3/components/molecules/List/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/List/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] / List elements
"},{"location":"old-guides/V3/components/molecules/List/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when a list element is clicked
"},{"location":"old-guides/V3/components/molecules/Modal/","title":"Modal page","text":"A Modal component, with an optional close button
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/","title":"Modal CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-modal-background / / --mbx-modal-background-light --mbx-modal-background rgba(0, 0, 0, 0.8) --mbx-modal-background-dark --mbx-modal-background rgba(0, 0, 0, 0.8) --mbx-modal-x-color / / --mbx-modal-x-color-light --mbx-modal-x-color white --mbx-modal-x-color-dark --mbx-modal-x-color white --mbx-modal-x-color-hover / / --mbx-modal-x-color-hover-light --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-light --mbx-modal-x-color-hover-dark --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-dark"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-background","title":"--mbx-modal-background","text":"Fallback Default / / Fallback value for --mbx-modal-background-light and --mbx-modal-background-dark
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-background-light","title":"--mbx-modal-background-light","text":"Fallback Default --mbx-modal-background rgba(0, 0, 0, 0.8) Modal background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-background-dark","title":"--mbx-modal-background-dark","text":"Fallback Default --mbx-modal-background rgba(0, 0, 0, 0.8) Modal background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color","title":"--mbx-modal-x-color","text":"Fallback Default / / Fallback value for --mbx-modal-x-color-light and --mbx-modal-x-color-dark
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-light","title":"--mbx-modal-x-color-light","text":"Fallback Default --mbx-modal-x-color white Modal x icon color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-dark","title":"--mbx-modal-x-color-dark","text":"Fallback Default --mbx-modal-x-color white Modal x icon color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover","title":"--mbx-modal-x-color-hover","text":"Fallback Default / / Fallback value for --mbx-modal-x-color-hover-light and --mbx-modal-x-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover-light","title":"--mbx-modal-x-color-hover-light","text":"Fallback Default --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-light Modal x icon color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover-dark","title":"--mbx-modal-x-color-hover-dark","text":"Fallback Default --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-dark Modal x icon color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Modal/props/","title":"Modal properties","text":""},{"location":"old-guides/V3/components/molecules/Modal/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Modal/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} children JSX.Element | string /"},{"location":"old-guides/V3/components/molecules/Modal/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Modal/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Modal is closed
"},{"location":"old-guides/V3/components/molecules/Modal/props/#children","title":"children","text":"Type Default JSX.Element | string / Modal content
"},{"location":"old-guides/V3/components/molecules/Popup/","title":"Popup page","text":"A Popup container, displayed upon every other component, overlayed
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/","title":"Popup CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-popup-background / / --mbx-popup-background-light --mbx-popup-background --mbx-background-light --mbx-popup-background-dark --mbx-popup-background --mbx-background-dark --mbx-popup-text-color / / --mbx-popup-text-color-light --mbx-popup-text-color --mbx-text-color-light --mbx-popup-text-color-dark --mbx-popup-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-background","title":"--mbx-popup-background","text":"Fallback Default / / Fallback value for --mbx-popup-background-light and --mbx-popup-background-dark
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-background-light","title":"--mbx-popup-background-light","text":"Fallback Default --mbx-popup-background --mbx-background-light Popup background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-background-dark","title":"--mbx-popup-background-dark","text":"Fallback Default --mbx-popup-background --mbx-background-dark Popup background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-text-color","title":"--mbx-popup-text-color","text":"Fallback Default / / Fallback value for and
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-text-color-light","title":"--mbx-popup-text-color-light","text":"Fallback Default --mbx-popup-text-color --mbx-text-color-light Popup text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-text-color-dark","title":"--mbx-popup-text-color-dark","text":"Fallback Default --mbx-popup-text-color --mbx-text-color-dark Popup text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Popup/props/","title":"Popup properties","text":""},{"location":"old-guides/V3/components/molecules/Popup/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Popup/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} children JSX.Element | string /"},{"location":"old-guides/V3/components/molecules/Popup/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Popup/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Popup is closed
"},{"location":"old-guides/V3/components/molecules/Popup/props/#children","title":"children","text":"Type Default JSX.Element | string / Popup content
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/","title":"RadioButtonGroup page","text":"A flexible and fully customizable radio buttons group
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/","title":"RadioButtonGroup CSS variables","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-radiogroup-background / / --mbx-radiogroup-background-light --mbx-radiogroup-background --mbx-background-light --mbx-radiogroup-background-dark --mbx-radiogroup-background --mbx-background-dark --mbx-radiogroup-text-color / / --mbx-radiogroup-text-color-light --mbx-radiogroup-text-color --mbx-text-color-light --mbx-radiogroup-text-color-dark --mbx-radiogroup-text-color --mbx-text-color-dark --mbx-radiogroup-radio-background / / --mbx-radiogroup-radio-background-light --mbx-radiogroup-radio-background --mbx-radio-background-light --mbx-radiogroup-radio-background-dark --mbx-radiogroup-radio-background --mbx-radio-background-dark --mbx-radiogroup-radio-background-hover / / --mbx-radiogroup-radio-background-hover-light --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-light --mbx-radiogroup-radio-background-hover-dark --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-dark --mbx-radiogroup-radio-icon-background / / --mbx-radiogroup-radio-icon-background-light --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-light --mbx-radiogroup-radio-icon-background-dark --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-dark"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background","title":"--mbx-radiogroup-background","text":"Fallback Default / / Fallback value for --mbx-radiogroup-background-light and --mbx-radiogroup-background-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background-light","title":"--mbx-radiogroup-background-light","text":"Fallback Default --mbx-radiogroup-background --mbx-background-light RadioGroup background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background-dark","title":"--mbx-radiogroup-background-dark","text":"Fallback Default --mbx-radiogroup-background --mbx-background-dark RadioGroup background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color","title":"--mbx-radiogroup-text-color","text":"Fallback Default / / Fallback value for --mbx-radiogroup-text-color-light and --mbx-radiogroup-text-color-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color-light","title":"--mbx-radiogroup-text-color-light","text":"Fallback Default --mbx-radiogroup-text-color --mbx-text-color-light RadioGroup text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color-dark","title":"--mbx-radiogroup-text-color-dark","text":"Fallback Default --mbx-radiogroup-text-color --mbx-text-color-dark RadioGroup text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background","title":"--mbx-radiogroup-radio-background","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-background-light and mbx-radiogroup-radio-background-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-light","title":"--mbx-radiogroup-radio-background-light","text":"Fallback Default --mbx-radiogroup-radio-background --mbx-radio-background-light Internal RadioButton background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-dark","title":"--mbx-radiogroup-radio-background-dark","text":"Fallback Default --mbx-radiogroup-radio-background --mbx-radio-background-dark Internal RadioButton background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover","title":"--mbx-radiogroup-radio-background-hover","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-background-hover-light and mbx-radiogroup-radio-background-hover-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover-light","title":"--mbx-radiogroup-radio-background-hover-light","text":"Fallback Default --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-light Internal RadioButton background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover-dark","title":"--mbx-radiogroup-radio-background-hover-dark","text":"Fallback Default --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-dark Internal RadioButton background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background","title":"--mbx-radiogroup-radio-icon-background","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-icon-background-light and mbx-radiogroup-radio-icon-background-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background-light","title":"--mbx-radiogroup-radio-icon-background-light","text":"Fallback Default --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-light Internal RadioButton icon background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background-dark","title":"--mbx-radiogroup-radio-icon-background-dark","text":"Fallback Default --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-dark Internal RadioButton icon background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/","title":"RadioButtonGroup properties","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#props-table","title":"Props table","text":"Parameter Type Default value number / buttons { component: JSX.Element, text: string, textPosition: top | bottom | left | right }[] / elementClassName string / radioProps RadioButtonProps / defaultPosition top | bottom | left | right left horizontal boolean false onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#value","title":"value","text":"Type Default number / Selected RadioButton (as index)
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#buttons","title":"buttons","text":"Type Default { component: JSX.Element, text: string, textPosition: top | bottom | left | right }[] / Radio elements array. Every element UI can be driven with attributes. A radio element can contain 3 fields:
- -
component: custom component rendered before radio button - -
text: custom radio text showed near the radio button - -
textPosition: custom text position "},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#elementclassname","title":"elementClassName","text":"Type Default string / Classname applied on every radio element
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#radioprops","title":"radioProps","text":"Type Default RadioButtonProps / RadioButton props applied on every RadioButton element
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#defaultposition","title":"defaultPosition","text":"Type Default top | bottom | left | right left Default text position for RadioButton elements (when textPosition is not provided)
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#horizontal","title":"horizontal","text":"Type Default boolean false If true, the RadioButton elements are displayed horizontally
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when a RadioButton is clicked by the user, giving its index as parameter
"},{"location":"old-guides/V3/components/molecules/Review/","title":"Review page","text":"A smart review container, useful to show reviews on your web app with custom data inside. Optionally, an external link can be set to redirect user to the platform where the review is located
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/","title":"Review CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Review/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-review-background / / --mbx-review-background-light --mbx-review-background --mbx-background-light --mbx-review-background-dark --mbx-review-background --mbx-background-dark --mbx-review-text-color / / --mbx-review-text-color-light --mbx-review-text-color --mbx-text-color-light --mbx-review-text-color-dark --mbx-review-text-color --mbx-text-color-dark --mbx-review-link-color / / --mbx-review-link-color-light --mbx-review-link-color #615f5f --mbx-review-link-color-dark --mbx-review-link-color white --mbx-review-github-color / / --mbx-review-github-color-light --mbx-review-github-color #615f5f --mbx-review-github-color-dark --mbx-review-github-color white"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-background","title":"--mbx-review-background","text":"Fallback Default / / Fallback value for --mbx-review-background-light and --mbx-review-background-dark
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-background-light","title":"--mbx-review-background-light","text":"Fallback Default --mbx-review-background --mbx-background-light Review background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-background-dark","title":"--mbx-review-background-dark","text":"Fallback Default --mbx-review-background --mbx-background-dark Review background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-text-color","title":"--mbx-review-text-color","text":"Fallback Default / / Fallback value for --mbx-review-text-color-light and --mbx-review-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-text-color-light","title":"--mbx-review-text-color-light","text":"Fallback Default --mbx-review-text-color --mbx-text-color-light Review text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-text-color-dark","title":"--mbx-review-text-color-dark","text":"Fallback Default --mbx-review-text-color --mbx-text-color-dark Review text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-link-color","title":"--mbx-review-link-color","text":"Fallback Default / / Fallback value for --mbx-review-link-color-light and --mbx-review-link-color-dark
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-link-color-light","title":"--mbx-review-link-color-light","text":"Fallback Default --mbx-review-link-color #615f5f Review link color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-link-color-dark","title":"--mbx-review-link-color-dark","text":"Fallback Default --mbx-review-link-color white Review link color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-github-color","title":"--mbx-review-github-color","text":"Fallback Default / / Fallback value for --mbx-review-github-color-light and --mbx-review-github-color-dark
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-github-color-light","title":"--mbx-review-github-color-light","text":"Fallback Default --mbx-review-github-color #615f5f Review github icon color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-github-color-dark","title":"--mbx-review-github-color-dark","text":"Fallback Default --mbx-review-github-color white Review github icon color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Review/props/","title":"Review properties","text":""},{"location":"old-guides/V3/components/molecules/Review/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Review/props/#props-table","title":"Props table","text":"Parameter Type Default user string / description string / icon JSX.Element / url string / logo default | link | facebook | twitter | google | linkedin | github / max number 5 vertical boolean false rate number 0 rateType star|circle 'star'"},{"location":"old-guides/V3/components/molecules/Review/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Review/props/#user","title":"user","text":"Type Default string / Username displayed above the review description, at the right of the icon
"},{"location":"old-guides/V3/components/molecules/Review/props/#description","title":"description","text":"Type Default string / Review description displayed below the review username, at the top of the rate
"},{"location":"old-guides/V3/components/molecules/Review/props/#icon","title":"icon","text":"Type Default JSX.Element / Icon showed inside the component
"},{"location":"old-guides/V3/components/molecules/Review/props/#url","title":"url","text":"Type Default string / Review external url. If set, an icon will be showed at the top right of the review
"},{"location":"old-guides/V3/components/molecules/Review/props/#logo","title":"logo","text":"Type Default default | link | facebook | twitter | google | linkedin | github / Social icon type, showed at the top right of the container. Supports popular web services like Facebook, Twitter, Google and so on. Proviced icon list will grow up time by time and will be updated with the latest web services, to keep it usable for the future.
"},{"location":"old-guides/V3/components/molecules/Review/props/#max","title":"max","text":"Type Default number 5 max vote (max number of icons displayed) - extended from Rater component
"},{"location":"old-guides/V3/components/molecules/Review/props/#vertical","title":"vertical","text":"Type Default boolean false if true, rate icons will be showed vertically - extended from Rater component
"},{"location":"old-guides/V3/components/molecules/Review/props/#rate","title":"rate","text":"Type Default number 0 actual vote - extended from Rater component
"},{"location":"old-guides/V3/components/molecules/Review/props/#ratetype","title":"rateType","text":"Type Default star|circle 'star' vote icons type - extended from Rater component
"},{"location":"old-guides/V3/components/molecules/TabViewer/","title":"TabViewer page","text":"A Tab viewer component, to organize elements with tabs and show them on demand
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/","title":"TabViewer CSS variables","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-tabviewer-background / / --mbx-tabviewer-background-light --mbx-tabviewer-background linear-gradient(to right, #cccccc, #c7c7c7) --mbx-tabviewer-background-dark --mbx-tabviewer-background linear-gradient(to right, #2d3748, #1d232e) --mbx-tabviewer-text-color / / --mbx-tabviewer-text-color-light --mbx-tabviewer-text-color --mbx-text-color-light --mbx-tabviewer-text-color-dark --mbx-tabviewer-text-color --mbx-text-color-dark --mbx-tabviewer-inactive-background / / --mbx-tabviewer-inactive-background-light --mbx-tabviewer-inactive-background linear-gradient(to right, #a1a0a0, #797979) --mbx-tabviewer-inactive-background-dark --mbx-tabviewer-inactive-background linear-gradient(to right, #3e4b63, #3f4858) --mbx-tabviewer-inactive-text-color / / --mbx-tabviewer-inactive-text-color-light --mbx-tabviewer-inactive-text-color #c2c2c2 --mbx-tabviewer-inactive-text-color-dark --mbx-tabviewer-inactive-text-color #c2c2c2 --mbx-tabviewer-inactive-background-hover / / --mbx-tabviewer-inactive-background-hover-light --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #b6b4b4, #999797) --mbx-tabviewer-inactive-background-hover-dark --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #566888, #3c465a) --mbx-tabviewer-inactive-text-color-hover / / --mbx-tabviewer-inactive-text-color-hover-light --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-light --mbx-tabviewer-inactive-text-color-hover-dark --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background","title":"--mbx-tabviewer-background","text":"Fallback Default / / Fallback value for --mbx-tabviewer-background-light and --mbx-tabviewer-background-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background-light","title":"--mbx-tabviewer-background-light","text":"Fallback Default --mbx-tabviewer-background linear-gradient(to right, #cccccc, #c7c7c7) TabViewer background when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background-dark","title":"--mbx-tabviewer-background-dark","text":"Fallback Default --mbx-tabviewer-background linear-gradient(to right, #2d3748, #1d232e) TabViewer background when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color","title":"--mbx-tabviewer-text-color","text":"Fallback Default / / Fallback value for --mbx-tabviewer-text-color-light and --mbx-tabviewer-text-color-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color-light","title":"--mbx-tabviewer-text-color-light","text":"Fallback Default --mbx-tabviewer-text-color --mbx-text-color-light TabViewer text color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color-dark","title":"--mbx-tabviewer-text-color-dark","text":"Fallback Default --mbx-tabviewer-text-color --mbx-text-color-dark TabViewer text color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background","title":"--mbx-tabviewer-inactive-background","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-background-light and --mbx-tabviewer-inactive-background-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-light","title":"--mbx-tabviewer-inactive-background-light","text":"Fallback Default --mbx-tabviewer-inactive-background linear-gradient(to right, #a1a0a0, #797979) TabViewer inactive tab background when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-dark","title":"--mbx-tabviewer-inactive-background-dark","text":"Fallback Default --mbx-tabviewer-inactive-background linear-gradient(to right, #3e4b63, #3f4858) TabViewer inactive tab background when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color","title":"--mbx-tabviewer-inactive-text-color","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-text-color-light and --mbx-tabviewer-inactive-text-color-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-light","title":"--mbx-tabviewer-inactive-text-color-light","text":"Fallback Default --mbx-tabviewer-inactive-text-color #c2c2c2 TabViewer inactive tab text color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-dark","title":"--mbx-tabviewer-inactive-text-color-dark","text":"Fallback Default --mbx-tabviewer-inactive-text-color #c2c2c2 TabViewer inactive tab text color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover","title":"--mbx-tabviewer-inactive-background-hover","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-background-hover-light and --mbx-tabviewer-inactive-background-hover-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover-light","title":"--mbx-tabviewer-inactive-background-hover-light","text":"Fallback Default --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #b6b4b4, #999797) TabViewer inactive tab background when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover-dark","title":"--mbx-tabviewer-inactive-background-hover-dark","text":"Fallback Default --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #566888, #3c465a) TabViewer inactive tab background when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover","title":"--mbx-tabviewer-inactive-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-text-color-hover-light and --mbx-tabviewer-inactive-text-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover-light","title":"--mbx-tabviewer-inactive-text-color-hover-light","text":"Fallback Default --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-light TabViewer inactive tab text color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover-dark","title":"--mbx-tabviewer-inactive-text-color-hover-dark","text":"Fallback Default --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-dark TabViewer inactive tab text color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/","title":"TabViewer properties","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/props/#props-table","title":"Props table","text":"Parameter Type Default selected / / tabs {label: string; content: JSX.Element;}[] / tabProps Record / tabSelectedProps Record / tabUnselectedProps Record / tabViewProps Record / tabClassName Record / tabSelectedClassName Record / tabUnselectedClassName Record / tabViewClassName Record / onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/props/#selected","title":"selected","text":"Type Default / /"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabs","title":"tabs","text":"Type Default {label: string; content: JSX.Element;}[] / tabs array. Every tab object contains 3 fields:
label: tab label displayed on topcontent: tab content element
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabprops","title":"tabProps","text":"Type Default Record / Custom props applied on every tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabselectedprops","title":"tabSelectedProps","text":"Type Default Record / Custom props applied on every selected tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabunselectedprops","title":"tabUnselectedProps","text":"Type Default Record / Custom props applied on every unselected tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabviewprops","title":"tabViewProps","text":"Type Default Record / Custom props applied on the tab view panel
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabclassname","title":"tabClassName","text":"Type Default Record / Custom props applied on every tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabselectedclassname","title":"tabSelectedClassName","text":"Type Default Record / Custom props applied on every selected tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabunselectedclassname","title":"tabUnselectedClassName","text":"Type Default Record / Custom props applied on every unselected tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabviewclassname","title":"tabViewClassName","text":"Type Default Record / Custom props applied on the tab view panel
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when a tab is selected, giving its index as parameter
"},{"location":"old-guides/V3/components/molecules/Table/","title":"Table page","text":"A re-invented Table component. It follows a CSV-like format for its content.
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/","title":"Table CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Table/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-table-background / / --mbx-table-background-light --mbx-table-background --mbx-background-light --mbx-table-background-dark --mbx-table-background --mbx-background-dark --mbx-table-text-color / / --mbx-table-text-color-light --mbx-table-text-color --mbx-text-color-light --mbx-table-text-color-dark --mbx-table-text-color --mbx-text-color-dark --mbx-table-header-background / / --mbx-table-header-background-light --mbx-table-header-background linear-gradient(to right, #354155, #2b3546) --mbx-table-header-background-dark --mbx-table-header-background linear-gradient(to right, #4b5b77, #3e4c64) --mbx-table-header-text-color / / --mbx-table-header-text-color-light --mbx-table-header-text-color whitesmoke --mbx-table-header-text-color-dark --mbx-table-header-text-color rgb(255, 255, 255) --mbx-table-border-color / / --mbx-table-border-color-light --mbx-table-border-color darkslategrey --mbx-table-border-color-dark --mbx-table-border-color rgb(219, 219, 219)"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-background","title":"--mbx-table-background","text":"Fallback Default / / Fallback value for --mbx-table-background-light and --mbx-table-background-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-background-light","title":"--mbx-table-background-light","text":"Fallback Default --mbx-table-background --mbx-background-light Table background when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-background-dark","title":"--mbx-table-background-dark","text":"Fallback Default --mbx-table-background --mbx-background-dark Table background when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-text-color","title":"--mbx-table-text-color","text":"Fallback Default / / Fallback value for --mbx-table-text-color-light and --mbx-table-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-text-color-light","title":"--mbx-table-text-color-light","text":"Fallback Default --mbx-table-text-color --mbx-text-color-light Table text color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-text-color-dark","title":"--mbx-table-text-color-dark","text":"Fallback Default --mbx-table-text-color --mbx-text-color-dark Table text color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-background","title":"--mbx-table-header-background","text":"Fallback Default / / Fallback value for --mbx-table-header-background-light and --mbx-table-header-background-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-background-light","title":"--mbx-table-header-background-light","text":"Fallback Default --mbx-table-header-background linear-gradient(to right, #354155, #2b3546) Table header background when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-background-dark","title":"--mbx-table-header-background-dark","text":"Fallback Default --mbx-table-header-background linear-gradient(to right, #4b5b77, #3e4c64) Table header background when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-text-color","title":"--mbx-table-header-text-color","text":"Fallback Default / / Fallback value for --mbx-table-header-text-color-light and --mbx-table-header-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-text-color-light","title":"--mbx-table-header-text-color-light","text":"Fallback Default --mbx-table-header-text-color whitesmoke Table header text color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-text-color-dark","title":"--mbx-table-header-text-color-dark","text":"Fallback Default --mbx-table-header-text-color rgb(255, 255, 255) Table header text color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-border-color","title":"--mbx-table-border-color","text":"Fallback Default / / Fallback value for --mbx-table-border-color-light and --mbx-table-border-color-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-border-color-light","title":"--mbx-table-border-color-light","text":"Fallback Default --mbx-table-border-color darkslategrey Table border color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-border-color-dark","title":"--mbx-table-border-color-dark","text":"Fallback Default --mbx-table-border-color rgb(219, 219, 219) Table border color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/props/","title":"Table properties","text":""},{"location":"old-guides/V3/components/molecules/Table/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Table/props/#props-table","title":"Props table","text":"Parameter Type Default headers boolean / rows (JSX.Element | string)[][] / headerClassName string / headersProps Record / cellClassName string / cellProps Record / rowClassName string / rowProps Record / onClick (row: number, column: number) => void () => {} propsCallback (row: number, column: number) => Record () => ({})"},{"location":"old-guides/V3/components/molecules/Table/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Table/props/#headers","title":"headers","text":"Type Default boolean /"},{"location":"old-guides/V3/components/molecules/Table/props/#rows","title":"rows","text":"Type Default (JSX.Element | string)[][] / Table elements
"},{"location":"old-guides/V3/components/molecules/Table/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom className applied on every Table header element
"},{"location":"old-guides/V3/components/molecules/Table/props/#headersprops","title":"headersProps","text":"Type Default Record / Custom props applied on every Table header element
"},{"location":"old-guides/V3/components/molecules/Table/props/#cellclassname","title":"cellClassName","text":"Type Default string / Custom className applied on every Table cell element
"},{"location":"old-guides/V3/components/molecules/Table/props/#cellprops","title":"cellProps","text":"Type Default Record / Custom props applied on every Table cell element
"},{"location":"old-guides/V3/components/molecules/Table/props/#rowclassname","title":"rowClassName","text":"Type Default string / Custom className applied on every Table row element
"},{"location":"old-guides/V3/components/molecules/Table/props/#rowprops","title":"rowProps","text":"Type Default Record / Custom props applied on every Table row element
"},{"location":"old-guides/V3/components/molecules/Table/props/#onclick","title":"onClick","text":"Type Default (row: number, column: number) => void () => {} Callback triggered when a Table cell is clicked
"},{"location":"old-guides/V3/components/molecules/Table/props/#propscallback","title":"propsCallback","text":"Type Default (row: number, column: number) => Record () => ({}) A function to add custom props depending on Table row and column
"},{"location":"old-guides/V3/components/organisms/","title":"MoBrix-ui organisms","text":""},{"location":"old-guides/V3/components/organisms/#summary","title":"Summary","text":" - Calendar
- DatePicker
- Drawer
- Form
"},{"location":"old-guides/V3/components/organisms/Calendar/","title":"Calendar page","text":"A ready to use Calendar, designed for a lot of scenarios.
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/","title":"Calendar CSS variables","text":""},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-calendar-background / / --mbx-calendar-background-light --mbx-calendar-background --mbx-background-light --mbx-calendar-background-dark --mbx-calendar-background --mbx-background-dark --mbx-calendar-text-color / / --mbx-calendar-text-color-light --mbx-calendar-text-color --mbx-text-color-light --mbx-calendar-text-color-dark --mbx-calendar-text-color --mbx-text-color-dark --mbx-calendar-selected-background / / --mbx-calendar-selected-background-light --mbx-calendar-selected-background --mbx-calendar-background-dark --mbx-calendar-selected-background-dark --mbx-calendar-selected-background --mbx-calendar-background-light --mbx-calendar-selected-text-color / / --mbx-calendar-selected-text-color-light --mbx-calendar-selected-text-color --mbx-calendar-text-color-dark --mbx-calendar-selected-text-color-dark --mbx-calendar-selected-text-color --mbx-calendar-text-color-light --mbx-calendar-background-hover / / --mbx-calendar-background-hover-light --mbx-calendar-background-hover --mbx-calendar-selected-background-light --mbx-calendar-background-hover-dark --mbx-calendar-background-hover --mbx-calendar-selected-background-dark --mbx-calendar-text-color-hover / / --mbx-calendar-text-color-hover-light --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-light --mbx-calendar-text-color-hover-dark --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-dark --mbx-calendar-arrow / / --mbx-calendar-arrow-light --mbx-calendar-arrow --mbx-calendar-text-color-light --mbx-calendar-arrow-dark --mbx-calendar-arrow --mbx-calendar-text-color-dark --mbx-calendar-arrow-hover / / --mbx-calendar-arrow-hover-light --mbx-calendar-arrow-hover --mbx-text-color-light --mbx-calendar-arrow-hover-dark --mbx-calendar-arrow-hover --mbx-text-color-dark --mbx-calendar-today-color / / --mbx-calendar-today-color-light --mbx-calendar-today-color red --mbx-calendar-today-color-dark --mbx-calendar-today-color red"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background","title":"--mbx-calendar-background","text":"Fallback Default / / Fallback value for --mbx-calendar-background-light and --mbx-calendar-background-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-light","title":"--mbx-calendar-background-light","text":"Fallback Default --mbx-calendar-background --mbx-background-light Calendar background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-dark","title":"--mbx-calendar-background-dark","text":"Fallback Default --mbx-calendar-background --mbx-background-dark Calendar background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color","title":"--mbx-calendar-text-color","text":"Fallback Default / / Fallback value for --mbx-calendar-text-color-light and --mbx-calendar-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-light","title":"--mbx-calendar-text-color-light","text":"Fallback Default --mbx-calendar-text-color --mbx-text-color-light Calendar text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-dark","title":"--mbx-calendar-text-color-dark","text":"Fallback Default --mbx-calendar-text-color --mbx-text-color-dark Calendar text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background","title":"--mbx-calendar-selected-background","text":"Fallback Default / / Fallback value for --mbx-calendar-selected-background-light and --mbx-calendar-selected-background-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background-light","title":"--mbx-calendar-selected-background-light","text":"Fallback Default --mbx-calendar-selected-background --mbx-calendar-background-dark Calendar selected cell background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background-dark","title":"--mbx-calendar-selected-background-dark","text":"Fallback Default --mbx-calendar-selected-background --mbx-calendar-background-light Calendar selected cell background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color","title":"--mbx-calendar-selected-text-color","text":"Fallback Default / / Fallback value for --mbx-calendar-selected-text-color-light and --mbx-calendar-selected-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color-light","title":"--mbx-calendar-selected-text-color-light","text":"Fallback Default --mbx-calendar-selected-text-color --mbx-calendar-text-color-dark Calendar selected cell text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color-dark","title":"--mbx-calendar-selected-text-color-dark","text":"Fallback Default --mbx-calendar-selected-text-color --mbx-calendar-text-color-light Calendar selected cell text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover","title":"--mbx-calendar-background-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-background-hover-light and --mbx-calendar-background-hover-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover-light","title":"--mbx-calendar-background-hover-light","text":"Fallback Default --mbx-calendar-background-hover --mbx-calendar-selected-background-light Calendar background when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover-dark","title":"--mbx-calendar-background-hover-dark","text":"Fallback Default --mbx-calendar-background-hover --mbx-calendar-selected-background-dark Calendar background when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover","title":"--mbx-calendar-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-text-color-hover-light and --mbx-calendar-text-color-hover-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover-light","title":"--mbx-calendar-text-color-hover-light","text":"Fallback Default --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-light Calendar text color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover-dark","title":"--mbx-calendar-text-color-hover-dark","text":"Fallback Default --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-dark Calendar text color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow","title":"--mbx-calendar-arrow","text":"Fallback Default / / Fallback value for --mbx-calendar-arrow-light and --mbx-calendar-arrow-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-light","title":"--mbx-calendar-arrow-light","text":"Fallback Default --mbx-calendar-arrow --mbx-calendar-text-color-light Calendar arrow color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-dark","title":"--mbx-calendar-arrow-dark","text":"Fallback Default --mbx-calendar-arrow --mbx-calendar-text-color-dark Calendar arrow color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover","title":"--mbx-calendar-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-arrow-hover-light and --mbx-calendar-arrow-hover-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover-light","title":"--mbx-calendar-arrow-hover-light","text":"Fallback Default --mbx-calendar-arrow-hover --mbx-text-color-light Calendar arrow color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover-dark","title":"--mbx-calendar-arrow-hover-dark","text":"Fallback Default --mbx-calendar-arrow-hover --mbx-text-color-dark Calendar arrow color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-today-color","title":"--mbx-calendar-today-color","text":"Fallback Default / / Fallback value for --mbx-calendar-today-color-light and --mbx-calendar-today-color-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-today-color-light","title":"--mbx-calendar-today-color-light","text":"Fallback Default --mbx-calendar-today-color red Calendar today color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-today-color-dark","title":"--mbx-calendar-today-color-dark","text":"Fallback Default --mbx-calendar-today-color red Calendar today color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/props/","title":"Calendar properties","text":""},{"location":"old-guides/V3/components/organisms/Calendar/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/organisms/Calendar/props/#props-table","title":"Props table","text":"Parameter Type Default value CalendarDate Today date hideArrows boolean / days string[] English week labels months string[] English months labels onViewChange (date: CalendarDate) => void / startYear number Today year startMonth number Today month fromToday boolean true dayLabel string true labelClassName string / labelProps Record / onChange (newValue: CalendarDate) => void () => {} arrowClassName string /"},{"location":"old-guides/V3/components/organisms/Calendar/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/organisms/Calendar/props/#value","title":"value","text":"Type Default CalendarDate Today date Actual selected date
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#hidearrows","title":"hideArrows","text":"Type Default boolean / If true, hide arrow buttons near the date label
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#days","title":"days","text":"Type Default string[] English week labels Custom days labels
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#months","title":"months","text":"Type Default string[] English months labels Custom months labels
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#onviewchange","title":"onViewChange","text":"Type Default (date: CalendarDate) => void / Callback triggered when the Calendar view (the displayed month) is changed
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#startyear","title":"startYear","text":"Type Default number Today year Initial displayed year
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#startmonth","title":"startMonth","text":"Type Default number Today month Initial displayed month
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#fromtoday","title":"fromToday","text":"Type Default boolean true If false, prevent the user to select a date lower than today date
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#daylabel","title":"dayLabel","text":"Type Default string true Show/hide actual day label on top of the calendar
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#labelclassname","title":"labelClassName","text":"Type Default string / Custom className applied on the day label component
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#labelprops","title":"labelProps","text":"Type Default Record / Custom props applied on the day label component
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#onchange","title":"onChange","text":"Type Default (newValue: CalendarDate) => void () => {} Callback triggered when Calendar component input value is changed by the user
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button
"},{"location":"old-guides/V3/components/organisms/DatePicker/","title":"DatePicker page","text":"A smart date-picker, with an internal Calendar accessible to choose a date
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/","title":"DatePicker CSS variables","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-datepicker-background / / --mbx-datepicker-background-light --mbx-datepicker-background --mbx-background-light --mbx-datepicker-background-dark --mbx-datepicker-background --mbx-background-dark --mbx-datepicker-text-color / / --mbx-datepicker-text-color-light --mbx-datepicker-text-color --mbx-text-color-light --mbx-datepicker-text-color-dark --mbx-datepicker-text-color --mbx-text-color-dark --mbx-datepicker-icon / / --mbx-datepicker-icon-light --mbx-datepicker-icon --mbx-datepicker-text-color-light --mbx-datepicker-icon-dark --mbx-datepicker-icon --mbx-datepicker-text-color-dark --mbx-datepicker-icon-hover / / --mbx-datepicker-icon-hover-light --mbx-datepicker-icon-hover blue --mbx-datepicker-icon-hover-dark --mbx-datepicker-icon-hover orange --mbx-datepicker-calendar-background / / --mbx-datepicker-calendar-background-light --mbx-datepicker-calendar-background --mbx-calendar-background-light --mbx-datepicker-calendar-background-dark --mbx-datepicker-calendar-background --mbx-calendar-background-dark --mbx-datepicker-calendar-text-color / / --mbx-datepicker-calendar-text-color-light --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-light --mbx-datepicker-calendar-text-color-dark --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-dark --mbx-datepicker-calendar-background-hover / / --mbx-datepicker-calendar-background-hover-light --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-light --mbx-datepicker-calendar-background-hover-dark --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-dark --mbx-datepicker-calendar-text-color-hover / / --mbx-datepicker-calendar-text-color-hover-light --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-light --mbx-datepicker-calendar-text-color-hover-dark --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-dark --mbx-datepicker-calendar-arrow / / --mbx-datepicker-calendar-arrow-light --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-light --mbx-datepicker-calendar-arrow-dark --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-dark --mbx-datepicker-calendar-arrow-hover / / --mbx-datepicker-calendar-arrow-hover-light --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-light --mbx-datepicker-calendar-arrow-hover-dark --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-dark --mbx-datepicker-calendar-selected-background / / --mbx-datepicker-calendar-selected-background-light --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-light --mbx-datepicker-calendar-selected-background-dark --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-dark --mbx-datepicker-calendar-selected-text-color / / --mbx-datepicker-calendar-selected-text-color-light --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-light --mbx-datepicker-calendar-selected-text-color-dark --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-dark --mbx-datepicker-calendar-today-color / / --mbx-datepicker-calendar-today-color-light --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-light --mbx-datepicker-calendar-today-color-dark --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-dark --mbx-datepicker-modal-background / / --mbx-datepicker-modal-background-light --mbx-datepicker-modal-background --mbx-modal-background-light --mbx-datepicker-modal-background-dark --mbx-datepicker-modal-background --mbx-modal-background-dark --mbx-datepicker-modal-x-color / / --mbx-datepicker-modal-x-color-light --mbx-datepicker-modal-x-color --mbx-modal-x-color-light --mbx-datepicker-modal-x-color-dark --mbx-datepicker-modal-x-color --mbx-modal-x-color-dark --mbx-datepicker-modal-x-color-hover / / --mbx-datepicker-modal-x-color-hover-light --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-light --mbx-datepicker-modal-x-color-hover-dark --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-dark"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-background","title":"--mbx-datepicker-background","text":"Fallback Default / / Fallback value for --mbx-datepicker-background-light and --mbx-datepicker-background-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-background-light","title":"--mbx-datepicker-background-light","text":"Fallback Default --mbx-datepicker-background --mbx-background-light DatePicker background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-background-dark","title":"--mbx-datepicker-background-dark","text":"Fallback Default --mbx-datepicker-background --mbx-background-dark DatePicker background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color","title":"--mbx-datepicker-text-color","text":"Fallback Default / / Fallback value for --mbx-datepicker-text-color-light and --mbx-datepicker-text-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color-light","title":"--mbx-datepicker-text-color-light","text":"Fallback Default --mbx-datepicker-text-color --mbx-text-color-light DatePicker text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color-dark","title":"--mbx-datepicker-text-color-dark","text":"Fallback Default --mbx-datepicker-text-color --mbx-text-color-dark DatePicker text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon","title":"--mbx-datepicker-icon","text":"Fallback Default / / Fallback value for --mbx-datepicker-icon-light and --mbx-datepicker-icon-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-light","title":"--mbx-datepicker-icon-light","text":"Fallback Default --mbx-datepicker-icon --mbx-datepicker-text-color-light DatePicker calendar icon color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-dark","title":"--mbx-datepicker-icon-dark","text":"Fallback Default --mbx-datepicker-icon --mbx-datepicker-text-color-dark DatePicker calendar icon color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover","title":"--mbx-datepicker-icon-hover","text":"Fallback Default / / Fallback value for --mbx-datepicker-icon-hover-light and --mbx-datepicker-icon-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover-light","title":"--mbx-datepicker-icon-hover-light","text":"Fallback Default --mbx-datepicker-icon-hover blue DatePicker calendar icon color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover-dark","title":"--mbx-datepicker-icon-hover-dark","text":"Fallback Default --mbx-datepicker-icon-hover orange DatePicker calendar icon color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background","title":"--mbx-datepicker-calendar-background","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-background-light and --mbx-datepicker-calendar-background-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-light","title":"--mbx-datepicker-calendar-background-light","text":"Fallback Default --mbx-datepicker-calendar-background --mbx-calendar-background-light Extended from Calendar - Calendar background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-dark","title":"--mbx-datepicker-calendar-background-dark","text":"Fallback Default --mbx-datepicker-calendar-background --mbx-calendar-background-dark Extended from Calendar - Calendar background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color","title":"--mbx-datepicker-calendar-text-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-text-color-light and --mbx-datepicker-calendar-text-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-light","title":"--mbx-datepicker-calendar-text-color-light","text":"Fallback Default --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-light Extended from Calendar - Calendar text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-dark","title":"--mbx-datepicker-calendar-text-color-dark","text":"Fallback Default --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-dark Extended from Calendar - Calendar text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover","title":"--mbx-datepicker-calendar-background-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-background-hover-light and --mbx-datepicker-calendar-background-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover-light","title":"--mbx-datepicker-calendar-background-hover-light","text":"Fallback Default --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-light Extended from Calendar - Calendar background when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover-dark","title":"--mbx-datepicker-calendar-background-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-dark Extended from Calendar - Calendar background when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover","title":"--mbx-datepicker-calendar-text-color-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-text-color-hover-light and --mbx-datepicker-calendar-text-color-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover-light","title":"--mbx-datepicker-calendar-text-color-hover-light","text":"Fallback Default --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-light Extended from Calendar - Calendar text color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover-dark","title":"--mbx-datepicker-calendar-text-color-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-dark Extended from Calendar - Calendar text color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow","title":"--mbx-datepicker-calendar-arrow","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-arrow-light and --mbx-datepicker-calendar-arrow-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-light","title":"--mbx-datepicker-calendar-arrow-light","text":"Fallback Default --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-light Extended from Calendar - Calendar arrow color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-dark","title":"--mbx-datepicker-calendar-arrow-dark","text":"Fallback Default --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-dark Extended from Calendar - Calendar arrow color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover","title":"--mbx-datepicker-calendar-arrow-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-arrow-hover-light and --mbx-datepicker-calendar-arrow-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover-light","title":"--mbx-datepicker-calendar-arrow-hover-light","text":"Fallback Default --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-light Extended from Calendar - Calendar arrow color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover-dark","title":"--mbx-datepicker-calendar-arrow-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-dark Extended from Calendar - Calendar arrow color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background","title":"--mbx-datepicker-calendar-selected-background","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-selected-background-light and --mbx-datepicker-calendar-selected-background-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background-light","title":"--mbx-datepicker-calendar-selected-background-light","text":"Fallback Default --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-light Extended from Calendar - Calendar selected cell background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background-dark","title":"--mbx-datepicker-calendar-selected-background-dark","text":"Fallback Default --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-dark Extended from Calendar - Calendar selected cell background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color","title":"--mbx-datepicker-calendar-selected-text-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-selected-text-color-light and --mbx-datepicker-calendar-selected-text-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color-light","title":"--mbx-datepicker-calendar-selected-text-color-light","text":"Fallback Default --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-light Extended from Calendar - Calendar selected cell text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color-dark","title":"--mbx-datepicker-calendar-selected-text-color-dark","text":"Fallback Default --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-dark Extended from Calendar - Calendar selected cell text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color","title":"--mbx-datepicker-calendar-today-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-today-color-light and --mbx-datepicker-calendar-today-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color-light","title":"--mbx-datepicker-calendar-today-color-light","text":"Fallback Default --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-light Extended from Calendar - Calendar today color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color-dark","title":"--mbx-datepicker-calendar-today-color-dark","text":"Fallback Default --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-dark Extended from Calendar - Calendar today color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background","title":"--mbx-datepicker-modal-background","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-background-light and --mbx-datepicker-modal-background-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background-light","title":"--mbx-datepicker-modal-background-light","text":"Fallback Default --mbx-datepicker-modal-background --mbx-modal-background-light Extended from Modal - Modal background when dark mode is off
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background-dark","title":"--mbx-datepicker-modal-background-dark","text":"Fallback Default --mbx-datepicker-modal-background --mbx-modal-background-dark Extended from Modal - Modal background when dark mode is on
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color","title":"--mbx-datepicker-modal-x-color","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-x-color-light and --mbx-datepicker-modal-x-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-light","title":"--mbx-datepicker-modal-x-color-light","text":"Fallback Default --mbx-datepicker-modal-x-color --mbx-modal-x-color-light Extended from Modal - Modal x icon color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-dark","title":"--mbx-datepicker-modal-x-color-dark","text":"Fallback Default --mbx-datepicker-modal-x-color --mbx-modal-x-color-dark Extended from Modal - Modal x icon color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover","title":"--mbx-datepicker-modal-x-color-hover","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-x-color-hover-light and --mbx-datepicker-modal-x-color-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover-light","title":"--mbx-datepicker-modal-x-color-hover-light","text":"Fallback Default --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-light Extended from Modal - Modal x icon color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover-dark","title":"--mbx-datepicker-modal-x-color-hover-dark","text":"Fallback Default --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-dark Extended from Modal - Modal x icon color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/","title":"DatePicker properties","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/props/#props-table","title":"Props table","text":"Parameter Type Default value CalendarDate Today date hideArrows boolean / days string[] English week labels months string[] English months labels onViewChange (date: CalendarDate) => void / startYear number Today year startMonth number Today month fromToday boolean true dayLabel string true labelClassName string / labelProps Record / onChange (newValue: CalendarDate) => void () => {} onClose () => void () => {} arrowClassName string /"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/props/#value","title":"value","text":"Type Default CalendarDate Today date Actual selected date - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#hidearrows","title":"hideArrows","text":"Type Default boolean / If true, hide arrow buttons near the date label - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#days","title":"days","text":"Type Default string[] English week labels Custom days labels - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#months","title":"months","text":"Type Default string[] English months labels Custom months labels - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#onviewchange","title":"onViewChange","text":"Type Default (date: CalendarDate) => void / Callback triggered when the Calendar view (the displayed month) is changed - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#startyear","title":"startYear","text":"Type Default number Today year Initial displayed year - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#startmonth","title":"startMonth","text":"Type Default number Today month Initial displayed month - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#fromtoday","title":"fromToday","text":"Type Default boolean true If false, prevent the user to select a date lower than today date - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#daylabel","title":"dayLabel","text":"Type Default string true Show/hide actual day label on top of the calendar - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#labelclassname","title":"labelClassName","text":"Type Default string / Custom className applied on the day label component - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#labelprops","title":"labelProps","text":"Type Default Record / Custom props applied on the day label component - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#onchange","title":"onChange","text":"Type Default (newValue: CalendarDate) => void () => {} Callback triggered when Calendar component input value is changed by the user - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#onclose","title":"onClose","text":"Type Default () => void () => {} Callback triggered when DatePicker modal is closed
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/Drawer/","title":"Drawer page","text":"A modern drawer, easy to integrate and to customize
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/","title":"Drawer CSS variables","text":""},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-drawer-background / / --mbx-drawer-background-light --mbx-drawer-background --mbx-background-light --mbx-drawer-background-dark --mbx-drawer-background --mbx-background-dark --mbx-drawer-text-color / / --mbx-drawer-text-color-light --mbx-drawer-text-color --mbx-text-color-light --mbx-drawer-text-color-dark --mbx-drawer-text-color --mbx-text-color-dark --mbx-drawer-arrow / / --mbx-drawer-arrow-light --mbx-drawer-arrow --mbx-drawer-text-color-light --mbx-drawer-arrow-dark --mbx-drawer-arrow --mbx-drawer-text-color-dark --mbx-drawer-arrow-hover / / --mbx-drawer-arrow-hover-light --mbx-drawer-arrow-hover / --mbx-drawer-arrow-hover-dark --mbx-drawer-arrow-hover /"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-background","title":"--mbx-drawer-background","text":"Fallback Default / / Fallback value for --mbx-drawer-background-light and --mbx-drawer-background-dark
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-background-light","title":"--mbx-drawer-background-light","text":"Fallback Default --mbx-drawer-background --mbx-background-light Drawer background when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-background-dark","title":"--mbx-drawer-background-dark","text":"Fallback Default --mbx-drawer-background --mbx-background-dark Drawer background when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-text-color","title":"--mbx-drawer-text-color","text":"Fallback Default / / Fallback value for --mbx-drawer-text-color-light and --mbx-drawer-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-text-color-light","title":"--mbx-drawer-text-color-light","text":"Fallback Default --mbx-drawer-text-color --mbx-text-color-light Drawer text color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-text-color-dark","title":"--mbx-drawer-text-color-dark","text":"Fallback Default --mbx-drawer-text-color --mbx-text-color-dark Drawer text color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow","title":"--mbx-drawer-arrow","text":"Fallback Default / / Fallback value for --mbx-drawer-arrow-light and --mbx-drawer-arrow-dark
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-light","title":"--mbx-drawer-arrow-light","text":"Fallback Default --mbx-drawer-arrow --mbx-drawer-text-color-light Drawer arrow color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-dark","title":"--mbx-drawer-arrow-dark","text":"Fallback Default --mbx-drawer-arrow --mbx-drawer-text-color-dark Drawer arrow color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover","title":"--mbx-drawer-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-drawer-arrow-hover-light and --mbx-drawer-arrow-hover-dark
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover-light","title":"--mbx-drawer-arrow-hover-light","text":"Fallback Default --mbx-drawer-arrow-hover / Drawer arrow color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover-dark","title":"--mbx-drawer-arrow-hover-dark","text":"Fallback Default --mbx-drawer-arrow-hover / Drawer arrow color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/organisms/Drawer/props/","title":"Drawer properties","text":""},{"location":"old-guides/V3/components/organisms/Drawer/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/organisms/Drawer/props/#props-table","title":"Props table","text":"Parameter Type Default position left | right | top | bottom | top-left | top-right | bottom-left | bottom-right left onClose () => void () => {} children (JSX.Element | string) | (JSX.Element|string`)[] / closeOnClickOutside boolean true arrowClassName string /"},{"location":"old-guides/V3/components/organisms/Drawer/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/organisms/Drawer/props/#position","title":"position","text":"Type Default left | right | top | bottom | top-left | top-right | bottom-left | bottom-right left Drawer position, relative to the entire window
"},{"location":"old-guides/V3/components/organisms/Drawer/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Drawer is closed
"},{"location":"old-guides/V3/components/organisms/Drawer/props/#children","title":"children","text":"Type Default (JSX.Element | string) | (JSX.Element|string`)[] / Drawer content
"},{"location":"old-guides/V3/components/organisms/Drawer/props/#closeonclickoutside","title":"closeOnClickOutside","text":"Type Default boolean true If false, the drawer won't be closed when clicking outside of it
"},{"location":"old-guides/V3/components/organisms/Drawer/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button
"},{"location":"old-guides/V3/components/organisms/Form/","title":"Form page","text":"A totally configurable Form, with a submit button to let the user submit data from your web-app
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/","title":"Form CSS variables","text":""},{"location":"old-guides/V3/components/organisms/Form/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-form-background-light --mbx-form-background --mbx-background-light --mbx-form-background / / --mbx-form-background-dark --mbx-form-background --mbx-background-dark --mbx-form-text-color / / --mbx-form-text-color-light --mbx-form-text-color --mbx-text-color-light --mbx-form-text-color-dark --mbx-form-text-color --mbx-text-color-dark --mbx-form-submit-background / / --mbx-form-submit-background-light --mbx-form-submit-background mbx-button-background-light --mbx-form-submit-background-dark --mbx-form-submit-background mbx-button-background-dark --mbx-form-submit-text-color / / --mbx-form-submit-text-color-light --mbx-form-submit-text-color mbx-button-text-color-light --mbx-form-submit-text-color-dark --mbx-form-submit-text-color mbx-button-text-color-dark --mbx-form-formfield-background / / --mbx-form-formfield-background-dark --mbx-form-formfield-background --mbx-formfield-background-dark --mbx-form-formfield-background-light --mbx-form-formfield-background --mbx-formfield-background-light --mbx-form-formfield-text-color / / --mbx-form-formfield-text-color-light --mbx-form-formfield-text-color --mbx-formfield-text-color-light --mbx-form-formfield-text-color-dark --mbx-form-formfield-text-color --mbx-formfield-text-color-dark --mbx-form-formfield-background-hover / / --mbx-form-formfield-background-hover-light --mbx-form-formfield-background-hover --mbx-formfield-background-hover-light --mbx-form-formfield-background-hover-dark --mbx-form-formfield-background-hover --mbx-formfield-background-hover-dark --mbx-form-formfield-text-color-hover / / --mbx-form-formfield-text-color-hover-light --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-light --mbx-form-formfield-text-color-hover-dark --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-dark --mbx-form-formfield-error-border / / --mbx-form-formfield-error-border-light --mbx-form-formfield-error-border --mbx-formfield-error-border-light --mbx-form-formfield-error-border-dark --mbx-form-formfield-error-border --mbx-formfield-error-border-dark --mbx-form-formfield-error-text / / --mbx-form-formfield-error-text-light --mbx-form-formfield-error-text --mbx-formfield-error-text-light --mbx-form-formfield-error-text-dark --mbx-form-formfield-error-text --mbx-formfield-error-text-dark"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-background-light","title":"--mbx-form-background-light","text":"Fallback Default --mbx-form-background --mbx-background-light Form background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-background","title":"--mbx-form-background","text":"Fallback Default / / Fallback value for and
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-background-dark","title":"--mbx-form-background-dark","text":"Fallback Default --mbx-form-background --mbx-background-dark Form background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-text-color","title":"--mbx-form-text-color","text":"Fallback Default / / Fallback value for and
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-text-color-light","title":"--mbx-form-text-color-light","text":"Fallback Default --mbx-form-text-color --mbx-text-color-light Form text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-text-color-dark","title":"--mbx-form-text-color-dark","text":"Fallback Default --mbx-form-text-color --mbx-text-color-dark Form text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-background","title":"--mbx-form-submit-background","text":"Fallback Default / / Fallback value for --mbx-form-submit-background-light and --mbx-form-submit-background-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-background-light","title":"--mbx-form-submit-background-light","text":"Fallback Default --mbx-form-submit-background mbx-button-background-light Form submit button background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-background-dark","title":"--mbx-form-submit-background-dark","text":"Fallback Default --mbx-form-submit-background mbx-button-background-dark Form submit button background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-text-color","title":"--mbx-form-submit-text-color","text":"Fallback Default / / Fallback value for --mbx-form-submit-text-color-light and --mbx-form-submit-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-text-color-light","title":"--mbx-form-submit-text-color-light","text":"Fallback Default --mbx-form-submit-text-color mbx-button-text-color-light Form submit button text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-text-color-dark","title":"--mbx-form-submit-text-color-dark","text":"Fallback Default --mbx-form-submit-text-color mbx-button-text-color-dark Form submit button text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background","title":"--mbx-form-formfield-background","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-background-light and --mbx-form-formfield-background-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-dark","title":"--mbx-form-formfield-background-dark","text":"Fallback Default --mbx-form-formfield-background --mbx-formfield-background-dark Extended from FormField - FormField background when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-light","title":"--mbx-form-formfield-background-light","text":"Fallback Default --mbx-form-formfield-background --mbx-formfield-background-light Extended from FormField - FormField background when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color","title":"--mbx-form-formfield-text-color","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-text-color-light and --mbx-form-formfield-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-light","title":"--mbx-form-formfield-text-color-light","text":"Fallback Default --mbx-form-formfield-text-color --mbx-formfield-text-color-light Extended from FormField - FormField text color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-dark","title":"--mbx-form-formfield-text-color-dark","text":"Fallback Default --mbx-form-formfield-text-color --mbx-formfield-text-color-dark Extended from FormField - FormField text color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover","title":"--mbx-form-formfield-background-hover","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-background-hover-light and --mbx-form-formfield-background-hover-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover-light","title":"--mbx-form-formfield-background-hover-light","text":"Fallback Default --mbx-form-formfield-background-hover --mbx-formfield-background-hover-light Extended from FormField - FormField background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover-dark","title":"--mbx-form-formfield-background-hover-dark","text":"Fallback Default --mbx-form-formfield-background-hover --mbx-formfield-background-hover-dark Extended from FormField - FormField background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover","title":"--mbx-form-formfield-text-color-hover","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-text-color-hover-light and --mbx-form-formfield-text-color-hover-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover-light","title":"--mbx-form-formfield-text-color-hover-light","text":"Fallback Default --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-light Extended from FormField - FormField text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover-dark","title":"--mbx-form-formfield-text-color-hover-dark","text":"Fallback Default --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-dark Extended from FormField - FormField text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-border","title":"--mbx-form-formfield-error-border","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-error-border-light and --mbx-form-formfield-error-border-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-border-light","title":"--mbx-form-formfield-error-border-light","text":"Fallback Default --mbx-form-formfield-error-border --mbx-formfield-error-border-light Extended from FormField - FormField error box border color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-border-dark","title":"--mbx-form-formfield-error-border-dark","text":"Fallback Default --mbx-form-formfield-error-border --mbx-formfield-error-border-dark Extended from FormField - FormField error box border color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-text","title":"--mbx-form-formfield-error-text","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-error-text-light and --mbx-form-formfield-error-text-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-text-light","title":"--mbx-form-formfield-error-text-light","text":"Fallback Default --mbx-form-formfield-error-text --mbx-formfield-error-text-light Extended from FormField - FormField error box text color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-text-dark","title":"--mbx-form-formfield-error-text-dark","text":"Fallback Default --mbx-form-formfield-error-text --mbx-formfield-error-text-dark Extended from FormField - FormField error box text color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Form/props/","title":"Form properties","text":""},{"location":"old-guides/V3/components/organisms/Form/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/organisms/Form/props/#props-table","title":"Props table","text":"Parameter Type Default title string / fields Record {} onSubmit (values: Record) => void / submitLabel string | JSX.Element / fieldClassName string / children JSX.Element /"},{"location":"old-guides/V3/components/organisms/Form/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/organisms/Form/props/#title","title":"title","text":"Type Default string / Form title
"},{"location":"old-guides/V3/components/organisms/Form/props/#fields","title":"fields","text":"Type Default Record {} Form fields object. Every key is the field unique ID, and will be used on submit when returning their values
"},{"location":"old-guides/V3/components/organisms/Form/props/#onsubmit","title":"onSubmit","text":"Type Default (values: Record) => void / Custom callback triggered when clicking on submit button. Gives the fields values as input parameter
"},{"location":"old-guides/V3/components/organisms/Form/props/#submitlabel","title":"submitLabel","text":"Type Default string | JSX.Element / Custom submit button label
"},{"location":"old-guides/V3/components/organisms/Form/props/#fieldclassname","title":"fieldClassName","text":"Type Default string / Custom classname applied on every field
"},{"location":"old-guides/V3/components/organisms/Form/props/#children","title":"children","text":"Type Default JSX.Element / Form content
"},{"location":"shared/","title":"MoBrix-ui shared page","text":""},{"location":"shared/css-vars/","title":"MoBrix-ui shared CSS variables","text":""},{"location":"shared/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"shared/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-background / / --mbx-background-light --mbx-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-background-dark --mbx-background linear-gradient(to right, #2d3748, #1d232e) --mbx-background-color / / --mbx-background-color-light --mbx-background-color #e9e9e9 --mbx-background-color-dark --mbx-background-color #1d232e --mbx-background-color-hover / / --mbx-background-color-hover-light --mbx-background-color-hover #dfeaf8 --mbx-background-color-hover-dark --mbx-background-color-hover #3a3552 --mbx-background-hover / / --mbx-background-hover-light --mbx-background-hover linear-gradient(to right, #ececec, #e1e1e6, #dbdddd) --mbx-background-hover-dark --mbx-background-hover linear-gradient(to right, #364257, #252d3b) --mbx-text-color / / --mbx-text-color-light --mbx-text-color #1b1b1b --mbx-text-color-dark --mbx-text-color white --mbx-text-color-hover / / --mbx-text-color-hover-light --mbx-text-color-hover #413c5c --mbx-text-color-hover-dark --mbx-text-color-hover #dfeaf8 --mbx-shadow / / --mbx-shadow-light --mbx-shadow #464545 --mbx-shadow-dark --mbx-shadow #464545 --mbx-focus-color / / --mbx-focus-color-light --mbx-focus-color #7785ff --mbx-focus-color-dark --mbx-focus-color #fb7a10"},{"location":"shared/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"shared/css-vars/#-mbx-background","title":"--mbx-background","text":"Fallback Default / / Fallback value for --mbx-background-light and --mbx-background-dark variables
"},{"location":"shared/css-vars/#-mbx-background-light","title":"--mbx-background-light","text":"Fallback Default --mbx-background linear-gradient(to right, #fff, #ededee, #e6e7e7) Global MoBrix-ui background, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-background-dark","title":"--mbx-background-dark","text":"Fallback Default --mbx-background linear-gradient(to right, #2d3748, #1d232e) Global MoBrix-ui background, when dark mode is on
"},{"location":"shared/css-vars/#-mbx-background-color","title":"--mbx-background-color","text":"Fallback Default / / Fallback value for --mbx-background-color-light and --mbx-background-color-dark variables
"},{"location":"shared/css-vars/#-mbx-background-color-light","title":"--mbx-background-color-light","text":"Fallback Default --mbx-background-color #e9e9e9 Global MoBrix-ui background color, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-background-color-dark","title":"--mbx-background-color-dark","text":"Fallback Default --mbx-background-color #1d232e Global MoBrix-ui background color, when dark mode is on
"},{"location":"shared/css-vars/#-mbx-background-color-hover","title":"--mbx-background-color-hover","text":"Fallback Default / / Fallback value for --mbx-background-color-hover-light and --mbx-background-color-hover-dark variables
"},{"location":"shared/css-vars/#-mbx-background-color-hover-light","title":"--mbx-background-color-hover-light","text":"Fallback Default --mbx-background-color-hover #dfeaf8 Global MoBrix-ui background color, when dark mode is off, on hover
"},{"location":"shared/css-vars/#-mbx-background-color-hover-dark","title":"--mbx-background-color-hover-dark","text":"Fallback Default --mbx-background-color-hover #3a3552 Global MoBrix-ui background color, when dark mode is on, on hover
"},{"location":"shared/css-vars/#-mbx-background-hover","title":"--mbx-background-hover","text":"Fallback Default / / Fallback value for --mbx-background-hover-light and --mbx-background-hover-dark variables
"},{"location":"shared/css-vars/#-mbx-background-hover-light","title":"--mbx-background-hover-light","text":"Fallback Default --mbx-background-hover linear-gradient(to right, #ececec, #e1e1e6, #dbdddd) Global MoBrix-ui background, when dark mode is off, on hover
"},{"location":"shared/css-vars/#-mbx-background-hover-dark","title":"--mbx-background-hover-dark","text":"Fallback Default --mbx-background-hover linear-gradient(to right, #364257, #252d3b) Global MoBrix-ui background, when dark mode is on, on hover
"},{"location":"shared/css-vars/#-mbx-text-color","title":"--mbx-text-color","text":"Fallback Default / / Fallback value for --mbx-text-color-light and --mbx-text-color-dark variables
"},{"location":"shared/css-vars/#-mbx-text-color-light","title":"--mbx-text-color-light","text":"Fallback Default --mbx-text-color #1b1b1b Global MoBrix-ui text color, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-text-color-dark","title":"--mbx-text-color-dark","text":"Fallback Default --mbx-text-color white Global MoBrix-ui text color, when dark mode is on
"},{"location":"shared/css-vars/#-mbx-text-color-hover","title":"--mbx-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-text-color-hover-light and --mbx-text-color-hover-dark variables
"},{"location":"shared/css-vars/#-mbx-text-color-hover-light","title":"--mbx-text-color-hover-light","text":"Fallback Default --mbx-text-color-hover #413c5c Global MoBrix-ui text color, when dark mode is off, on hover
"},{"location":"shared/css-vars/#-mbx-text-color-hover-dark","title":"--mbx-text-color-hover-dark","text":"Fallback Default --mbx-text-color-hover #dfeaf8 Global MoBrix-ui text color, when dark mode is on, on hover
"},{"location":"shared/css-vars/#-mbx-shadow","title":"--mbx-shadow","text":"Fallback Default / / Fallback value for --mbx-shadow-light and --mbx-shadow-dark variables
"},{"location":"shared/css-vars/#-mbx-shadow-light","title":"--mbx-shadow-light","text":"Fallback Default --mbx-shadow #464545 Global MoBrix-ui shadow color, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-shadow-dark","title":"--mbx-shadow-dark","text":"Fallback Default --mbx-shadow #464545 Global MoBrix-ui shadow color, when dark mode is on
"},{"location":"shared/css-vars/#-mbx-focus-color","title":"--mbx-focus-color","text":"Fallback Default / / Fallback value for --mbx-focus-color-light and --mbx-focus-color-dark variables
"},{"location":"shared/css-vars/#-mbx-focus-color-light","title":"--mbx-focus-color-light","text":"Fallback Default --mbx-focus-color #7785ff Global MoBrix-ui focus color, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-focus-color-dark","title":"--mbx-focus-color-dark","text":"Fallback Default --mbx-focus-color #fb7a10 Global MoBrix-ui focus color, when dark mode is on
"},{"location":"shared/props/","title":"MoBrix-ui shared properties","text":""},{"location":"shared/props/#summary","title":"Summary","text":""},{"location":"shared/props/#props-table","title":"Props table","text":"Parameter Type Default key string / className string / dark boolean false hide boolean false id string / shadow boolean true style CSSProperties / unstyled boolean false animated boolean true animation fade-in | slide-in-left | slide-in-right | slide-in-top | shake / background boolean true hover boolean true active boolean false disabled boolean false onKeyDown (keyEvent : any) => void / onFocus () => void / onFocusLost () => void / props Record / a11y boolean true a11yLabel string / tabIndex number | string /"},{"location":"shared/props/#props-list","title":"Props list","text":""},{"location":"shared/props/#key","title":"key","text":"Type Default string / React key, the standard key parameter
"},{"location":"shared/props/#classname","title":"className","text":"Type Default string / custom className applied on main container
"},{"location":"shared/props/#dark","title":"dark","text":"Type Default boolean false Enable/disable dark mode
"},{"location":"shared/props/#hide","title":"hide","text":"Type Default boolean false Hide/show component
"},{"location":"shared/props/#id","title":"id","text":"Type Default string / id parameter (for styling/testing purpose, to easily find the component into the DOM)
"},{"location":"shared/props/#shadow","title":"shadow","text":"Type Default boolean true Enable/disable shadow behind component
"},{"location":"shared/props/#style","title":"style","text":"Type Default CSSProperties / Css inline properties applied on main container
"},{"location":"shared/props/#unstyled","title":"unstyled","text":"Type Default boolean false If true, no standard MoBrix-ui styles will be applied on the components (useful for example, with image buttons)
"},{"location":"shared/props/#animated","title":"animated","text":"Type Default boolean true Enable/disable component animations
"},{"location":"shared/props/#animation","title":"animation","text":"Type Default fade-in | slide-in-left | slide-in-right | slide-in-top | shake / If animated=true, this parameter specifies which animation is used when component is rendered
"},{"location":"shared/props/#background","title":"background","text":"Type Default boolean true Enable/disable component background
"},{"location":"shared/props/#hover","title":"hover","text":"Type Default boolean true Enable/disable component hover standard styles
"},{"location":"shared/props/#active","title":"active","text":"Type Default boolean false Enable/disable component click standard styles
"},{"location":"shared/props/#disabled","title":"disabled","text":"Type Default boolean false If true, disable the component. The effect may vary depending on the component type
"},{"location":"shared/props/#onkeydown","title":"onKeyDown","text":"Type Default (keyEvent : any) => void / Custom callback triggered when a key is pressed while using the component (for example, when writing text inside an Input component).
"},{"location":"shared/props/#onfocus","title":"onFocus","text":"Type Default () => void / Custom callback triggered when the component get the focus (for example, through tab key)
"},{"location":"shared/props/#onfocuslost","title":"onFocusLost","text":"Type Default () => void / Custom callback triggered when the component lose the focus (for example, when user clicks outside it)
"},{"location":"shared/props/#props","title":"props","text":"Type Default Record / Custom additional properties, applied to the component
"},{"location":"shared/props/#a11y","title":"a11y","text":"Type Default boolean true Enable/disable accessibility features
"},{"location":"shared/props/#a11ylabel","title":"a11yLabel","text":"Type Default string / If a11y = true, is used as aria-label accessibility parameter
"},{"location":"shared/props/#tabindex","title":"tabIndex","text":"Type Default number | string / Regular tabIndex a11y parameter. If a11y = true, this parameter is passed as tabIndex prop to the component (if not set, its value will be 0). If a11y = false, it is set to -1 (so the component is not focusable through tab key`)
"}]}
\ No newline at end of file
+{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"MoBrix-ui","text":"Smart React components for every app, easily customizable for every purpose.
"},{"location":"#note-for-older-mobrix-ui-version","title":"Note for older MoBrix-ui version","text":"If you still want to use older MoBrix-ui versions, read the old versions guide .
(Upgrade it to v4.X.X if possible!)
"},{"location":"#mobrix-ui-philosophy","title":"MoBrix-ui philosophy","text":"This library is built upon few (but important) concepts:
- Small library size, to not impact on final app bundle size
- Few dependencies, to not introduce a bunch of additional packages (that could also introduce bugs or version conflicts with pre-existent packages)
- Let the user customize every part as desired, but with default values set otherwise, to make every component ready to be used without so many parameters
- Every component should be integrable into every react app, so their behaviour must be customizable too (with callbacks, for example)
The same concepts are also the base of another project I maintain, MoBrix-engine (check it out, it is also the base of MoBrix-ui guide page !)
"},{"location":"#components-building-process","title":"Components building process","text":"This library use a standardized process to build every component. As result, every component has a shared initial logic, shared CSS styles and shared properties. Some properties are shared between all components, for a smoother dev experience. In addition, this makes every single component easily re-usable.
"},{"location":"#shared-properties","title":"Shared Properties","text":"MoBrix-ui components shares some properties:
Parameter Type Default key string / className string / dark boolean false hide boolean false id string / shadow boolean true style CSSProperties / unstyled boolean false animated boolean true animation fade-in | slide-in-left | slide-in-right | slide-in-top | shake / background boolean true hover boolean true active boolean false disabled boolean false onKeyDown (keyEvent : any) => void / onFocus () => void / onFocusLost () => void / props Record / a11y boolean true a11yLabel string / tabIndex number | string / Check out the complete components list for more details
"},{"location":"#css-variables","title":"CSS variables","text":"MoBrix-ui is globally configurable, with CSS variables. By defining some specific custom CSS variables into your app css, you'll change the UI of all components:
Css variable Fallback Default --mbx-background / / --mbx-background-light --mbx-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-background-dark --mbx-background linear-gradient(to right, #2d3748, #1d232e) --mbx-background-color / / --mbx-background-color-light --mbx-background-color #e9e9e9 --mbx-background-color-dark --mbx-background-color #1d232e --mbx-background-color-hover / / --mbx-background-color-hover-light --mbx-background-color-hover #dfeaf8 --mbx-background-color-hover-dark --mbx-background-color-hover #3a3552 --mbx-background-hover / / --mbx-background-hover-light --mbx-background-hover linear-gradient(to right, #ececec, #e1e1e6, #dbdddd) --mbx-background-hover-dark --mbx-background-hover linear-gradient(to right, #364257, #252d3b) --mbx-text-color / / --mbx-text-color-light --mbx-text-color #1b1b1b --mbx-text-color-dark --mbx-text-color white --mbx-text-color-hover / / --mbx-text-color-hover-light --mbx-text-color-hover #413c5c --mbx-text-color-hover-dark --mbx-text-color-hover #dfeaf8 --mbx-shadow / / --mbx-shadow-light --mbx-shadow #464545 --mbx-shadow-dark --mbx-shadow #464545 --mbx-focus-color / / --mbx-focus-color-light --mbx-focus-color #7785ff --mbx-focus-color-dark --mbx-focus-color #fb7a10 Check out the complete components list for more details
"},{"location":"#reactive-components","title":"Reactive components","text":"Some components are designed with a specific structure, to sync their internal state with an external input value. This kind of component handle internally their actual value, using the value parameter as starting point. This let the component to be driven in 2 different way:
-
Internally, Its internal value, when using the component without changing its value parameter from code
-
External, passing the value parameter
So, we have 2 scenarios:
-
If you change the component value using the component (without changing the value parameter), it will be updated internally.
-
If you change the passed value parameter, the component will sync its value with the given one.
A clear example is the Input component. When changing the value parameter, the component will sync its actual value.
"},{"location":"#getting-started","title":"Getting started","text":""},{"location":"#installation","title":"Installation","text":"If you want to use this library inside your project, just install it:
\nnpm i mobrix-ui\n\n
"},{"location":"#usage","title":"Usage","text":"After installation, you can use every MoBrix-ui component in your app. Run this example to see them in action:
import { Card, Container, Link } from \"mobrix-ui\";\nimport { render } from \"react-dom\";\n\nrender(\n <Container animated>\n <Card\n dark={true}\n body={<p>This page is entirely made with MoBrix-ui components !</p>}\n footer={\n <Link to=\"https://cianciarusocataldo.github.io/mobrix-ui\">\n MoBrix-ui page\n </Link>\n }\n />\n </Container>,\n document.getElementById(\"root\"),\n);\n
If you want to customize the UI globally, initialize the dedicated CSS variables:
* {\n --mbx-ui-text-color: #f5f5f5;\n --mbx-ui-background-color: #1b1b1b;\n}\n
"},{"location":"#tests","title":"Tests","text":"Unit tests for every component are located inside tests folder. The test script is executed with pre-defined test command:
npm run test\n
"},{"location":"#authors","title":"Authors","text":""},{"location":"Changelog/","title":"MoBrix-ui changelog","text":""},{"location":"Changelog/#versions","title":"Versions","text":" - 4.0.0
- 3.14.0
- 3.13.0
- 3.12.0
- 3.11.0
- 3.10.0
- 3.9.0
- 3.8.0
- 3.7.0
- 3.6.0
- 3.5.0
- 3.4.0
- 3.3.0
- 3.2.0
- 3.1.0
- 3.0.0
- 2.1.0
- 2.0.0
- 1.2.0
- 1.1.0
- 1.0.0
"},{"location":"Changelog/#changes","title":"Changes","text":""},{"location":"Changelog/#400","title":"4.0.0","text":" - Css totally re-defined and cleaned up, with more efficent rules and with less data as possible, to keep a smooth dev experience
- Refactoring
- Bundle size reduced
- New
underline prop for Link component highlight property removed from CodeBox componentReview logo now can be customized, wihout choosing a predefined type (logo property now accept a standard JSX.Element)- UI re-designed for all components
- New
Password component, a modern password field - Css vars naming changed, to simplify overall dev experience and to optimize bundle size and to avoid redundancy:
arrow instead of arrow-coloricon instead of icon-colortext instead of text-color
"},{"location":"Changelog/#3140","title":"3.14.0","text":" - Styles optimized
- Big Clean-up, bundle size reduced
- Code refactoring, with more efficent naming
- More styles unified to
data-mbx-scl Card and DismissableCard better styled- New
size prop to specify Divider component height
"},{"location":"Changelog/#3130","title":"3.13.0","text":" - Styles optimized
- Unified shared classes, to optimize bundle size
- Clean-up
- New
fillOnFocus feature, to fill icons when focused (similar to textcolorOnFocus feature)
"},{"location":"Changelog/#3120","title":"3.12.0","text":" PackageVersion component improved, now it auto-updates itself when any relevant prop is changed (like a MoBrix-ui Reactive component)- Clean-up
Drawer component height fix and close button fixList component hover fix, now disabled when onClick is not set- New
opacityOnActive feature, to reduce opacity when a component is clicked (lower than opacityOnHover feature)
"},{"location":"Changelog/#3110","title":"3.11.0","text":" PackageVersion component- Clean-up
"},{"location":"Changelog/#3100","title":"3.10.0","text":" data-mb-enabled migrated to data-mbx-attributes field. If the component is disabled, the data-mbx-attributes contains disabled stringdata-mbx-a11y migrated to data-mbx-attributes field. If a11y = true, the data-mbx-attributes contains a11y stringdata-mbx-animated migrated to data-mbx-attributes field. If animated = true, the data-mbx-attributes contains animated stringdata-mbx-animation migrated to data-mbx-features field. If animated = true and animation prop is set, the data-mbx-features contains it (with anim- prefix, ex. anim-fade-in)data-mbx-a11y-dark removed- Clean-up
"},{"location":"Changelog/#390","title":"3.9.0","text":" arrowClassName parameter for Calendar, Carousel and Drawer components- css variables splitted into full theme (for future v4 updates)
- Opacity reduced on hover instead of specific hover colors, to optimize overall library size and in preparation for v4 update
data-mbx-features field, to easily handle multiple features through css selectorsdata-mbx-hover, data-mbx-shadow, data-mbx-background and data-mbx-dark unified in a single field, data-mbx-attributes
"},{"location":"Changelog/#380","title":"3.8.0","text":" - Ui improvements and fix
- Refactoring
- Bundle size reduced
- New shared property,
animation, to customize components animation when they are rendered - New global css variables, to customize shadow colors:
--mbx-shadow--mbx-shadow-light--mbx-shadow-dark
"},{"location":"Changelog/#370","title":"3.7.0","text":" CodeBox component refactoring:noCopyButton properties removedcopyButton properties used instead (enable/disable copy button)- Multiline strings are now supported
- Clean-up
"},{"location":"Changelog/#360","title":"3.6.0","text":" Image component- Clean-up
- Better automatic release system
- Docs updated
"},{"location":"Changelog/#350","title":"3.5.0","text":" - Clean-up
- Refactoring
- Reduced bundle size
- Comments generator fix
- New automatic release creation system
- New automatic publish system
"},{"location":"Changelog/#340","title":"3.4.0","text":" EmbeddedVideo component- Clean-up
"},{"location":"Changelog/#330","title":"3.3.0","text":" - Slider fix
- IconButton highlight fix on mobile
- All components now use new building functions (
buildMbxReactiveComponent and buildMbxStandardComponent)
"},{"location":"Changelog/#320","title":"3.2.0","text":" - New DatePicker css vars, to customize its internal modal
--mbx-datepicker-modal-background-light,--mbx-datepicker-modal-background-dark,--mbx-datepicker-modal-x-color-light,--mbx-datepicker-modal-x-color-dark,--mbx-datepicker-modal-x-color-hover-light,--mbx-datepicker-modal-x-color-hover-dark- Clean-up
- New CI workflow to publish MoBrix-ui package to github registry
- Automatic css variables docs generation
"},{"location":"Changelog/#310","title":"3.1.0","text":" - New Card properties (
headerClassName, headerProps, bodyClassName, bodyProps, footerClassName, footerProps) - Clean-up
- Minor improvements
"},{"location":"Changelog/#300","title":"3.0.0","text":" - No more external dependencies
- Totally re-designed css variables system, to fully customize every component at once
- Docs and comments generator
- Global refactoring and huge clean-up
"},{"location":"Changelog/#210","title":"2.1.0","text":" TabViewer component- Minor fixes
"},{"location":"Changelog/#200","title":"2.0.0","text":" Calendar componentDatePicker componentPopup componentSelector componentSlider componentRadioButtonGroup componentRadioButton componentReactive components replace old Box Components, mantaining only the automatic input value sync with actual value set- Better overall performance
- Huge cleanup
- Deep refactoring
- Minor fixes
"},{"location":"Changelog/#120","title":"1.2.0","text":" Carousel arrow fixExpandableContainer arrow fixFacebookButtons component
"},{"location":"Changelog/#110","title":"1.1.0","text":" readonly support for Rater componentReview component- Clean-up
"},{"location":"Changelog/#100","title":"1.0.0","text":" - MoBrix-ui-components library setup
"},{"location":"License/","title":"License","text":"MIT License
Copyright (c) 2024 Cataldo Cianciaruso
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
"},{"location":"components/","title":"MoBrix-ui components","text":""},{"location":"components/#summary","title":"Summary","text":"Atoms
-
Button
-
CheckBox
-
CodeBox
-
Counter
-
Divider
-
EmbeddedVideo
-
IconButton
-
Image
-
Input
-
Label
-
Link
-
PackageVersion
-
Password
-
RadioButton
-
Rater
-
Selector
-
Slider
-
Spinner
-
Toggle
Molecules
-
Card
-
Carousel
-
Container
-
DismissableCard
-
Dropdown
-
ExpandableContainer
-
FormField
-
List
-
Modal
-
Popup
-
RadioButtonGroup
-
Review
-
Table
-
TabViewer
Organisms
-
Calendar
-
DatePicker
-
Drawer
-
Form
"},{"location":"components/atoms/","title":"MoBrix-ui atoms","text":""},{"location":"components/atoms/#summary","title":"Summary","text":" - Button
- CheckBox
- CodeBox
- Counter
- Divider
- EmbeddedVideo
- IconButton
- Image
- Input
- Label
- Link
- PackageVersion
- Password
- RadioButton
- Rater
- Selector
- Slider
- Spinner
- Toggle
"},{"location":"components/atoms/Button/","title":"Button page","text":"A tiny and smart button component.
"},{"location":"components/atoms/Button/css-vars/","title":"Button CSS variables","text":""},{"location":"components/atoms/Button/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Button/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-button-background / / --mbx-button-background-light --mbx-button-background --mbx-background-light --mbx-button-background-dark --mbx-button-background --mbx-background-dark --mbx-button-text-color / / --mbx-button-text-color-light --mbx-button-text-color --mbx-text-color-light --mbx-button-text-color-dark --mbx-button-text-color --mbx-text-color-dark --mbx-button-background-hover / / --mbx-button-background-hover-light --mbx-button-background-hover --mbx-background-hover-light --mbx-button-background-hover-dark --mbx-button-background-hover --mbx-background-hover-dark --mbx-button-text-color-hover / / --mbx-button-text-color-hover-light --mbx-button-text-color-hover --mbx-text-color-hover-light --mbx-button-text-color-hover-dark --mbx-button-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/atoms/Button/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Button/css-vars/#-mbx-button-background","title":"--mbx-button-background","text":"Fallback Default / / Fallback value for mbx-button-background-light and mbx-button-background-dark
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-light","title":"--mbx-button-background-light","text":"Fallback Default --mbx-button-background --mbx-background-light Button background when dark mode is off
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-dark","title":"--mbx-button-background-dark","text":"Fallback Default --mbx-button-background --mbx-background-dark Button background when dark mode is on
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color","title":"--mbx-button-text-color","text":"Fallback Default / / Fallback value for mbx-button-text-color-light and mbx-button-text-color-dark
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-light","title":"--mbx-button-text-color-light","text":"Fallback Default --mbx-button-text-color --mbx-text-color-light Button text color when dark mode is off
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-dark","title":"--mbx-button-text-color-dark","text":"Fallback Default --mbx-button-text-color --mbx-text-color-dark Button text color when dark mode is on
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-hover","title":"--mbx-button-background-hover","text":"Fallback Default / / Fallback value for mbx-button-background-hover-light and mbx-button-background-hover-dark
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-hover-light","title":"--mbx-button-background-hover-light","text":"Fallback Default --mbx-button-background-hover --mbx-background-hover-light Button background when dark mode is off, on hover
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-background-hover-dark","title":"--mbx-button-background-hover-dark","text":"Fallback Default --mbx-button-background-hover --mbx-background-hover-dark Button background when dark mode is on, on hover
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-hover","title":"--mbx-button-text-color-hover","text":"Fallback Default / / Fallback value for mbx-button-text-color-hover-light and mbx-button-text-color-hover-dark
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-hover-light","title":"--mbx-button-text-color-hover-light","text":"Fallback Default --mbx-button-text-color-hover --mbx-text-color-hover-light Button text color when dark mode is off, on hover
"},{"location":"components/atoms/Button/css-vars/#-mbx-button-text-color-hover-dark","title":"--mbx-button-text-color-hover-dark","text":"Fallback Default --mbx-button-text-color-hover --mbx-text-color-hover-dark Button text color when dark mode is on, on hover
"},{"location":"components/atoms/Button/props/","title":"Button properties","text":""},{"location":"components/atoms/Button/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Button/props/#props-table","title":"Props table","text":"Parameter Type Default onMouseEnter () => void / onMouseLeave () => void / onClick () => void () => {} children JSX.Element | string /"},{"location":"components/atoms/Button/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Button/props/#onmouseenter","title":"onMouseEnter","text":"Type Default () => void / This callback is triggered everytime the cursor enter the button area
"},{"location":"components/atoms/Button/props/#onmouseleave","title":"onMouseLeave","text":"Type Default () => void / This callback is triggered everytime the cursor exit the button area
"},{"location":"components/atoms/Button/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when Button component is clicked
"},{"location":"components/atoms/Button/props/#children","title":"children","text":"Type Default JSX.Element | string / Button content
"},{"location":"components/atoms/CheckBox/","title":"CheckBox page","text":"A checkbox element, totally customizable.
"},{"location":"components/atoms/CheckBox/css-vars/","title":"CheckBox CSS variables","text":""},{"location":"components/atoms/CheckBox/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/CheckBox/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-checkbox-background / / --mbx-checkbox-background-light --mbx-checkbox-background --mbx-background-light --mbx-checkbox-background-dark --mbx-checkbox-background --mbx-background-dark --mbx-checkbox-background-hover / / --mbx-checkbox-background-hover-light --mbx-checkbox-background-hover --mbx-background-hover-light --mbx-checkbox-background-hover-dark --mbx-checkbox-background-hover --mbx-background-hover-dark --mbx-checkbox-tick-color / / --mbx-checkbox-tick-color-light --mbx-checkbox-tick-color rgb(37, 99, 235) --mbx-checkbox-tick-color-dark --mbx-checkbox-tick-color white"},{"location":"components/atoms/CheckBox/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background","title":"--mbx-checkbox-background","text":"Fallback Default / / Fallback value for mbx-checkbox-background-light and mbx-checkbox-background-dark
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-light","title":"--mbx-checkbox-background-light","text":"Fallback Default --mbx-checkbox-background --mbx-background-light CheckBox background when dark mode is off
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-dark","title":"--mbx-checkbox-background-dark","text":"Fallback Default --mbx-checkbox-background --mbx-background-dark CheckBox background when dark mode is on
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover","title":"--mbx-checkbox-background-hover","text":"Fallback Default / / Fallback value for mbx-checkbox-background-hover-light and mbx-checkbox-background-hover-dark
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover-light","title":"--mbx-checkbox-background-hover-light","text":"Fallback Default --mbx-checkbox-background-hover --mbx-background-hover-light CheckBox background when dark mode is off, on hover
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover-dark","title":"--mbx-checkbox-background-hover-dark","text":"Fallback Default --mbx-checkbox-background-hover --mbx-background-hover-dark CheckBox background when dark mode is on, on hover
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color","title":"--mbx-checkbox-tick-color","text":"Fallback Default / / Fallback value for mbx-checkbox-tick-color-light and mbx-checkbox-tick-color-dark
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color-light","title":"--mbx-checkbox-tick-color-light","text":"Fallback Default --mbx-checkbox-tick-color rgb(37, 99, 235) CheckBox tick color when dark mode is off
"},{"location":"components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color-dark","title":"--mbx-checkbox-tick-color-dark","text":"Fallback Default --mbx-checkbox-tick-color white CheckBox tick color when dark mode is on
"},{"location":"components/atoms/CheckBox/props/","title":"CheckBox properties","text":""},{"location":"components/atoms/CheckBox/props/#summary","title":"Summary","text":""},{"location":"components/atoms/CheckBox/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean false icon JSX.Element Internal tick icon onChange (newValue: boolean) => void () => {}"},{"location":"components/atoms/CheckBox/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/CheckBox/props/#value","title":"value","text":"Type Default boolean false Checkbox initial value (checked / unchecked)
"},{"location":"components/atoms/CheckBox/props/#icon","title":"icon","text":"Type Default JSX.Element Internal tick icon custom tick icon (if not set, the default one will be used)
"},{"location":"components/atoms/CheckBox/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when CheckBox component input value is changed by the user
"},{"location":"components/atoms/CodeBox/","title":"CodeBox page","text":"A smart code box, to display code text as a compiler. Supports code highlight, with a selectable environment, and multiline strings
"},{"location":"components/atoms/CodeBox/css-vars/","title":"CodeBox CSS variables","text":""},{"location":"components/atoms/CodeBox/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/CodeBox/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-codebox-background / / --mbx-codebox-background-light --mbx-codebox-background --mbx-background-light --mbx-codebox-background-dark --mbx-codebox-background --mbx-background-dark --mbx-codebox-text-color / / --mbx-codebox-text-color-light --mbx-codebox-text-color --mbx-text-color-light --mbx-codebox-text-color-dark --mbx-codebox-text-color --mbx-text-color-dark"},{"location":"components/atoms/CodeBox/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-background","title":"--mbx-codebox-background","text":"Fallback Default / / Fallback value for mbx-codebox-background-light and mbx-codebox-background-dark
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-background-light","title":"--mbx-codebox-background-light","text":"Fallback Default --mbx-codebox-background --mbx-background-light CodeBox background when dark mode is off
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-background-dark","title":"--mbx-codebox-background-dark","text":"Fallback Default --mbx-codebox-background --mbx-background-dark CodeBox background when dark mode is on
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color","title":"--mbx-codebox-text-color","text":"Fallback Default / / Fallback value for mbx-codebox-text-color-light and mbx-codebox-text-color-dark
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color-light","title":"--mbx-codebox-text-color-light","text":"Fallback Default --mbx-codebox-text-color --mbx-text-color-light CodeBox text-color when dark mode is off
"},{"location":"components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color-dark","title":"--mbx-codebox-text-color-dark","text":"Fallback Default --mbx-codebox-text-color --mbx-text-color-dark CodeBox text-color when dark mode is on
"},{"location":"components/atoms/CodeBox/props/","title":"CodeBox properties","text":""},{"location":"components/atoms/CodeBox/props/#summary","title":"Summary","text":""},{"location":"components/atoms/CodeBox/props/#props-table","title":"Props table","text":"Parameter Type Default value string / environment javascript | python | terminal | common 'terminal' copyButton boolean true"},{"location":"components/atoms/CodeBox/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/CodeBox/props/#value","title":"value","text":"Type Default string / code to display - multiline string is supported
"},{"location":"components/atoms/CodeBox/props/#environment","title":"environment","text":"Type Default javascript | python | terminal | common 'terminal' environment for text highlight feature, default to 'terminal' (only enabled when 'highlight' is true)
"},{"location":"components/atoms/CodeBox/props/#copybutton","title":"copyButton","text":"Type Default boolean true Enable/disable the copy button
"},{"location":"components/atoms/Counter/","title":"Counter page","text":"A flexible numeric input element
"},{"location":"components/atoms/Counter/css-vars/","title":"Counter CSS variables","text":""},{"location":"components/atoms/Counter/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Counter/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-counterbox-background / / --mbx-counterbox-background-light --mbx-counterbox-background --mbx-background-color-light --mbx-counterbox-background-dark --mbx-counterbox-background --mbx-background-color-dark --mbx-counterbox-text-color / / --mbx-counterbox-text-color-light --mbx-counterbox-text-color --mbx-text-color-light --mbx-counterbox-text-color-dark --mbx-counterbox-text-color --mbx-text-color-dark --mbx-counterbox-background-hover / / --mbx-counterbox-background-hover-light --mbx-counterbox-background-hover --mbx-background-color-hover-light --mbx-counterbox-background-hover-dark --mbx-counterbox-background-hover --mbx-background-color-hover-dark --mbx-counterbox-text-color-hover / / --mbx-counterbox-text-color-hover-light --mbx-counterbox-text-color-hover --mbx-text-color-hover-light --mbx-counterbox-text-color-hover-dark --mbx-counterbox-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/atoms/Counter/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background","title":"--mbx-counterbox-background","text":"Fallback Default / / Fallback value for mbx-counterbox-background-light and mbx-counterbox-background-dark
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-light","title":"--mbx-counterbox-background-light","text":"Fallback Default --mbx-counterbox-background --mbx-background-color-light Counter background when dark mode is off
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-dark","title":"--mbx-counterbox-background-dark","text":"Fallback Default --mbx-counterbox-background --mbx-background-color-dark Counter background when dark mode is on
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color","title":"--mbx-counterbox-text-color","text":"Fallback Default / / Fallback value for mbx-counterbox-text-color-light and mbx-counterbox-text-color-dark
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-light","title":"--mbx-counterbox-text-color-light","text":"Fallback Default --mbx-counterbox-text-color --mbx-text-color-light Counter text color when dark mode is off
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-dark","title":"--mbx-counterbox-text-color-dark","text":"Fallback Default --mbx-counterbox-text-color --mbx-text-color-dark Counter text color when dark mode is on
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover","title":"--mbx-counterbox-background-hover","text":"Fallback Default / / Fallback value for mbx-counterbox-background-hover-light and mbx-counterbox-background-hover-dark
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover-light","title":"--mbx-counterbox-background-hover-light","text":"Fallback Default --mbx-counterbox-background-hover --mbx-background-color-hover-light Counter background when dark mode is off, on hover
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover-dark","title":"--mbx-counterbox-background-hover-dark","text":"Fallback Default --mbx-counterbox-background-hover --mbx-background-color-hover-dark Counter background when dark mode is on, on hover
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover","title":"--mbx-counterbox-text-color-hover","text":"Fallback Default / / Fallback value for mbx-counterbox-text-color-hover-light and mbx-counterbox-text-color-hover-dark
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover-light","title":"--mbx-counterbox-text-color-hover-light","text":"Fallback Default --mbx-counterbox-text-color-hover --mbx-text-color-hover-light Counter text color when dark mode is off, on hover
"},{"location":"components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover-dark","title":"--mbx-counterbox-text-color-hover-dark","text":"Fallback Default --mbx-counterbox-text-color-hover --mbx-text-color-hover-dark Counter text color when dark mode is on, on hover
"},{"location":"components/atoms/Counter/props/","title":"Counter properties","text":""},{"location":"components/atoms/Counter/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Counter/props/#props-table","title":"Props table","text":"Parameter Type Default value number / placeholder string / readOnly boolean false min number / max number / onChange (newValue: number) => void () => {}"},{"location":"components/atoms/Counter/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Counter/props/#value","title":"value","text":"Type Default number / numeric input value
"},{"location":"components/atoms/Counter/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set
"},{"location":"components/atoms/Counter/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter
"},{"location":"components/atoms/Counter/props/#min","title":"min","text":"Type Default number / min allowed value
"},{"location":"components/atoms/Counter/props/#max","title":"max","text":"Type Default number / max allowed value
"},{"location":"components/atoms/Counter/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Counter component input value is changed by the user
"},{"location":"components/atoms/Divider/","title":"Divider page","text":"A simple divider, useful to separate sections and paragraphs
"},{"location":"components/atoms/Divider/css-vars/","title":"Divider CSS variables","text":""},{"location":"components/atoms/Divider/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Divider/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-divider-color / / --mbx-divider-color-light --mbx-divider-color --mbx-text-color-light --mbx-divider-color-dark --mbx-divider-color --mbx-text-color-dark"},{"location":"components/atoms/Divider/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Divider/css-vars/#-mbx-divider-color","title":"--mbx-divider-color","text":"Fallback Default / / Fallback value for --mbx-divider-color-light and --mbx-divider-color-dark
"},{"location":"components/atoms/Divider/css-vars/#-mbx-divider-color-light","title":"--mbx-divider-color-light","text":"Fallback Default --mbx-divider-color --mbx-text-color-light Divider color when dark mode is off
"},{"location":"components/atoms/Divider/css-vars/#-mbx-divider-color-dark","title":"--mbx-divider-color-dark","text":"Fallback Default --mbx-divider-color --mbx-text-color-dark Divider color when dark mode is on
"},{"location":"components/atoms/Divider/props/","title":"Divider properties","text":""},{"location":"components/atoms/Divider/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Divider/props/#props-table","title":"Props table","text":"Parameter Type Default size string 2px"},{"location":"components/atoms/Divider/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Divider/props/#size","title":"size","text":"Type Default string 2px Divider size. Can be used any unit (like rem, em or pixels, for example 4px)
"},{"location":"components/atoms/EmbeddedVideo/","title":"EmbeddedVideo page","text":"A wrapper to easily serve embedded videos from supported sources (Youtube, Dailymotion and Facebook watch for now) - https://www.youtube-nocookie.com/ is used for youtube videos to prevent cookies
"},{"location":"components/atoms/EmbeddedVideo/css-vars/","title":"EmbeddedVideo CSS variables","text":""},{"location":"components/atoms/EmbeddedVideo/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/EmbeddedVideo/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"components/atoms/EmbeddedVideo/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/EmbeddedVideo/props/","title":"EmbeddedVideo properties","text":""},{"location":"components/atoms/EmbeddedVideo/props/#summary","title":"Summary","text":""},{"location":"components/atoms/EmbeddedVideo/props/#props-table","title":"Props table","text":"Parameter Type Default url string /"},{"location":"components/atoms/EmbeddedVideo/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/EmbeddedVideo/props/#url","title":"url","text":"Type Default string / External video url to embed
"},{"location":"components/atoms/IconButton/","title":"IconButton page","text":"An empty button, without additional styles, to make an icon clickable
"},{"location":"components/atoms/IconButton/css-vars/","title":"IconButton CSS variables","text":""},{"location":"components/atoms/IconButton/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/IconButton/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"components/atoms/IconButton/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/IconButton/props/","title":"IconButton properties","text":""},{"location":"components/atoms/IconButton/props/#summary","title":"Summary","text":""},{"location":"components/atoms/IconButton/props/#props-table","title":"Props table","text":"Parameter Type Default children JSX.Element | string / onMouseEnter () => void / onMouseLeave () => void / onClick () => void () => {}"},{"location":"components/atoms/IconButton/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/IconButton/props/#children","title":"children","text":"Type Default JSX.Element | string / Button content - extended from Button component
"},{"location":"components/atoms/IconButton/props/#onmouseenter","title":"onMouseEnter","text":"Type Default () => void / This callback is triggered everytime the cursor enter the button area - extended from Button component
"},{"location":"components/atoms/IconButton/props/#onmouseleave","title":"onMouseLeave","text":"Type Default () => void / This callback is triggered everytime the cursor exit the button area - extended from Button component
"},{"location":"components/atoms/IconButton/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when Button component is clicked - extended from Button component
"},{"location":"components/atoms/Image/","title":"Image page","text":"An Image component, enhanced by MoBrix-ui system
"},{"location":"components/atoms/Image/css-vars/","title":"Image CSS variables","text":""},{"location":"components/atoms/Image/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Image/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"components/atoms/Image/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Image/props/","title":"Image properties","text":""},{"location":"components/atoms/Image/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Image/props/#props-table","title":"Props table","text":"Parameter Type Default src string / width number / height number / alt string /"},{"location":"components/atoms/Image/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Image/props/#src","title":"src","text":"Type Default string / Image src attribute
"},{"location":"components/atoms/Image/props/#width","title":"width","text":"Type Default number / Image width attribute
"},{"location":"components/atoms/Image/props/#height","title":"height","text":"Type Default number / Image height attribute
"},{"location":"components/atoms/Image/props/#alt","title":"alt","text":"Type Default string / Image alt attribute
"},{"location":"components/atoms/Input/","title":"Input page","text":"A flexible text input element
"},{"location":"components/atoms/Input/css-vars/","title":"Input CSS variables","text":""},{"location":"components/atoms/Input/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Input/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-inputbox-background / / --mbx-inputbox-background-light --mbx-inputbox-background --mbx-background-color-light --mbx-inputbox-background-dark --mbx-inputbox-background --mbx-background-color-dark --mbx-inputbox-text-color / / --mbx-inputbox-text-color-light --mbx-inputbox-text-color --mbx-text-color-light --mbx-inputbox-text-color-dark --mbx-inputbox-text-color --mbx-text-color-dark --mbx-inputbox-background-hover / / --mbx-inputbox-background-hover-light --mbx-inputbox-background-hover --mbx-background-color-hover-light --mbx-inputbox-background-hover-dark --mbx-inputbox-background-hover --mbx-background-color-hover-dark --mbx-inputbox-text-color-hover / / --mbx-inputbox-text-color-hover-light --mbx-inputbox-text-color-hover --mbx-text-color-hover-light --mbx-inputbox-text-color-hover-dark --mbx-inputbox-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/atoms/Input/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background","title":"--mbx-inputbox-background","text":"Fallback Default / / Fallback value for mbx-inputbox-background-light and mbx-inputbox-background-dark
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-light","title":"--mbx-inputbox-background-light","text":"Fallback Default --mbx-inputbox-background --mbx-background-color-light Input background when dark mode is off
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-dark","title":"--mbx-inputbox-background-dark","text":"Fallback Default --mbx-inputbox-background --mbx-background-color-dark Input background when dark mode is on
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color","title":"--mbx-inputbox-text-color","text":"Fallback Default / / Fallback value for mbx-inputbox-text-color-light and mbx-inputbox-text-color-dark
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-light","title":"--mbx-inputbox-text-color-light","text":"Fallback Default --mbx-inputbox-text-color --mbx-text-color-light Input text color when dark mode is off
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-dark","title":"--mbx-inputbox-text-color-dark","text":"Fallback Default --mbx-inputbox-text-color --mbx-text-color-dark Input text color when dark mode is on
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-hover","title":"--mbx-inputbox-background-hover","text":"Fallback Default / / Fallback value for mbx-inputbox-background-hover-light and mbx-inputbox-background-hover-dark
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-hover-light","title":"--mbx-inputbox-background-hover-light","text":"Fallback Default --mbx-inputbox-background-hover --mbx-background-color-hover-light Input background when dark mode is off, on hover
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-background-hover-dark","title":"--mbx-inputbox-background-hover-dark","text":"Fallback Default --mbx-inputbox-background-hover --mbx-background-color-hover-dark Input background when dark mode is on, on hover
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover","title":"--mbx-inputbox-text-color-hover","text":"Fallback Default / / Fallback value for mbx-inputbox-text-color-hover-light and mbx-inputbox-text-color-hover-dark
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover-light","title":"--mbx-inputbox-text-color-hover-light","text":"Fallback Default --mbx-inputbox-text-color-hover --mbx-text-color-hover-light Input text color when dark mode is off, on hover
"},{"location":"components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover-dark","title":"--mbx-inputbox-text-color-hover-dark","text":"Fallback Default --mbx-inputbox-text-color-hover --mbx-text-color-hover-dark Input text color when dark mode is on, on hover
"},{"location":"components/atoms/Input/props/","title":"Input properties","text":""},{"location":"components/atoms/Input/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Input/props/#props-table","title":"Props table","text":"Parameter Type Default value string / placeholder string / readOnly boolean false onChange (newValue: string) => void () => {}"},{"location":"components/atoms/Input/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Input/props/#value","title":"value","text":"Type Default string / text input value
"},{"location":"components/atoms/Input/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set
"},{"location":"components/atoms/Input/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter
"},{"location":"components/atoms/Input/props/#onchange","title":"onChange","text":"Type Default (newValue: string) => void () => {} Callback triggered when Input component input value is changed by the user
"},{"location":"components/atoms/Label/","title":"Label page","text":"A text wrapper, with many options to customize its content
"},{"location":"components/atoms/Label/css-vars/","title":"Label CSS variables","text":""},{"location":"components/atoms/Label/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Label/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-label-text-color / / --mbx-label-text-color-light --mbx-label-text-color --mbx-text-color-light --mbx-label-text-color-dark --mbx-label-text-color --mbx-text-color-dark"},{"location":"components/atoms/Label/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Label/css-vars/#-mbx-label-text-color","title":"--mbx-label-text-color","text":"Fallback Default / / Fallback value for mbx-label-text-color-light and mbx-label-text-color-dark
"},{"location":"components/atoms/Label/css-vars/#-mbx-label-text-color-light","title":"--mbx-label-text-color-light","text":"Fallback Default --mbx-label-text-color --mbx-text-color-light Label text color when dark mode is off
"},{"location":"components/atoms/Label/css-vars/#-mbx-label-text-color-dark","title":"--mbx-label-text-color-dark","text":"Fallback Default --mbx-label-text-color --mbx-text-color-dark Label text color when dark mode is on
"},{"location":"components/atoms/Label/props/","title":"Label properties","text":""},{"location":"components/atoms/Label/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Label/props/#props-table","title":"Props table","text":"Parameter Type Default children string | string[] /"},{"location":"components/atoms/Label/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Label/props/#children","title":"children","text":"Type Default string | string[] / text content to show (string arrays are accepted)
"},{"location":"components/atoms/Link/","title":"Link page","text":"A re-defined <a> component, designed to be better used with links
"},{"location":"components/atoms/Link/css-vars/","title":"Link CSS variables","text":""},{"location":"components/atoms/Link/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Link/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-link-color / / --mbx-link-color-light --mbx-link-color --mbx-text-color-light --mbx-link-color-dark --mbx-link-color --mbx-text-color-dark --mbx-link-color-hover / / --mbx-link-color-hover-light --mbx-link-color-hover --mbx-link-color-light --mbx-link-color-hover-dark --mbx-link-color-hover --mbx-link-color-dark"},{"location":"components/atoms/Link/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Link/css-vars/#-mbx-link-color","title":"--mbx-link-color","text":"Fallback Default / / Fallback value for mbx-link-color-light and mbx-link-color-dark
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-light","title":"--mbx-link-color-light","text":"Fallback Default --mbx-link-color --mbx-text-color-light Link text color when dark mode is off
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-dark","title":"--mbx-link-color-dark","text":"Fallback Default --mbx-link-color --mbx-text-color-dark Link text color when dark mode is on
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-hover","title":"--mbx-link-color-hover","text":"Fallback Default / / Fallback value for mbx-link-color-hover-light and mbx-link-color-hover-dark
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-hover-light","title":"--mbx-link-color-hover-light","text":"Fallback Default --mbx-link-color-hover --mbx-link-color-light Link text color when dark mode is off, on hover
"},{"location":"components/atoms/Link/css-vars/#-mbx-link-color-hover-dark","title":"--mbx-link-color-hover-dark","text":"Fallback Default --mbx-link-color-hover --mbx-link-color-dark Link text color when dark mode is on, on hover
"},{"location":"components/atoms/Link/props/","title":"Link properties","text":""},{"location":"components/atoms/Link/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Link/props/#props-table","title":"Props table","text":"Parameter Type Default to string / underline boolean true newTab string false children JSX.Element | string /"},{"location":"components/atoms/Link/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Link/props/#to","title":"to","text":"Type Default string / Link url
"},{"location":"components/atoms/Link/props/#underline","title":"underline","text":"Type Default boolean true if true, the link will be displayed underlined (default=true)
"},{"location":"components/atoms/Link/props/#newtab","title":"newTab","text":"Type Default string false f true, the link will be opened in a new tab
"},{"location":"components/atoms/Link/props/#children","title":"children","text":"Type Default JSX.Element | string / Link content
"},{"location":"components/atoms/PackageVersion/","title":"PackageVersion page","text":"A tiny and smart component, to show a package version from many sources (like NPM registry or directly from Github repo). Can be easily integrated into more complex components.
"},{"location":"components/atoms/PackageVersion/css-vars/","title":"PackageVersion CSS variables","text":""},{"location":"components/atoms/PackageVersion/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/PackageVersion/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-packageversion-text-color / / --mbx-packageversion-text-color-light --mbx-packageversion-text-color --mbx-label-text-color-light --mbx-packageversion-text-color-dark --mbx-packageversion-text-color --mbx-label-text-color-dark"},{"location":"components/atoms/PackageVersion/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color","title":"--mbx-packageversion-text-color","text":"Fallback Default / / Fallback value for mbx-packageversion-text-color-light and mbx-packageversion-text-color-dark
"},{"location":"components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color-light","title":"--mbx-packageversion-text-color-light","text":"Fallback Default --mbx-packageversion-text-color --mbx-label-text-color-light PackageVersion text color when dark mode is off
"},{"location":"components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color-dark","title":"--mbx-packageversion-text-color-dark","text":"Fallback Default --mbx-packageversion-text-color --mbx-label-text-color-dark PackageVersion text color when dark mode is on
"},{"location":"components/atoms/PackageVersion/props/","title":"PackageVersion properties","text":""},{"location":"components/atoms/PackageVersion/props/#summary","title":"Summary","text":""},{"location":"components/atoms/PackageVersion/props/#props-table","title":"Props table","text":"Parameter Type Default name () => void / source npm | github-release | github / user string / branch string /"},{"location":"components/atoms/PackageVersion/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/PackageVersion/props/#name","title":"name","text":"Type Default () => void / Library name (it is used as repo name when source = github)
"},{"location":"components/atoms/PackageVersion/props/#source","title":"source","text":"Type Default npm | github-release | github / Package location (actually, NPM, Github and Github release are supported)
"},{"location":"components/atoms/PackageVersion/props/#user","title":"user","text":"Type Default string / Library owner (it is used as repo owner username when source = github or source = github-release)
"},{"location":"components/atoms/PackageVersion/props/#branch","title":"branch","text":"Type Default string / Github repo default branch (used when source = github)
"},{"location":"components/atoms/Password/","title":"Password page","text":"A modern password input field
"},{"location":"components/atoms/Password/css-vars/","title":"Password CSS variables","text":""},{"location":"components/atoms/Password/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Password/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-password-background / / --mbx-password-background-light --mbx-password-background --mbx-background-color-light --mbx-password-background-dark --mbx-password-background --mbx-background-color-dark --mbx-password-text-color / / --mbx-password-text-color-light --mbx-password-text-color --mbx-text-color-light --mbx-password-text-color-dark --mbx-password-text-color --mbx-text-color-dark --mbx-password-background-hover / / --mbx-password-background-hover-light --mbx-password-background-hover --mbx-background-color-hover-light --mbx-password-background-hover-dark --mbx-password-background-hover --mbx-background-color-hover-dark --mbx-password-text-color-hover / / --mbx-password-text-color-hover-light --mbx-password-text-color-hover --mbx-text-color-hover-light --mbx-password-text-color-hover-dark --mbx-password-text-color-hover --mbx-text-color-hover-dark --mbx-password-icon / / --mbx-password-icon-light --mbx-password-icon --mbx-password-text-color-light --mbx-password-icon-dark --mbx-password-icon --mbx-password-text-color-dark --mbx-password-icon-hover / / --mbx-password-icon-hover-light --mbx-password-icon-hover --mbx-password-text-color-light --mbx-password-icon-hover-dark --mbx-password-icon-hover --mbx-password-text-color-dark"},{"location":"components/atoms/Password/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Password/css-vars/#-mbx-password-background","title":"--mbx-password-background","text":"Fallback Default / / Fallback value for mbx-password-background-light and mbx-password-background-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-light","title":"--mbx-password-background-light","text":"Fallback Default --mbx-password-background --mbx-background-color-light Password background when dark mode is off
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-dark","title":"--mbx-password-background-dark","text":"Fallback Default --mbx-password-background --mbx-background-color-dark Password background when dark mode is on
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color","title":"--mbx-password-text-color","text":"Fallback Default / / Fallback value for mbx-password-text-color-light and mbx-password-text-color-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-light","title":"--mbx-password-text-color-light","text":"Fallback Default --mbx-password-text-color --mbx-text-color-light Password text color when dark mode is off
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-dark","title":"--mbx-password-text-color-dark","text":"Fallback Default --mbx-password-text-color --mbx-text-color-dark Password text color when dark mode is on
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-hover","title":"--mbx-password-background-hover","text":"Fallback Default / / Fallback value for mbx-password-background-hover-light and mbx-password-background-hover-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-hover-light","title":"--mbx-password-background-hover-light","text":"Fallback Default --mbx-password-background-hover --mbx-background-color-hover-light Password background when dark mode is off, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-background-hover-dark","title":"--mbx-password-background-hover-dark","text":"Fallback Default --mbx-password-background-hover --mbx-background-color-hover-dark Password background when dark mode is on, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-hover","title":"--mbx-password-text-color-hover","text":"Fallback Default / / Fallback value for mbx-password-text-color-hover-light and mbx-password-text-color-hover-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-hover-light","title":"--mbx-password-text-color-hover-light","text":"Fallback Default --mbx-password-text-color-hover --mbx-text-color-hover-light Password text color when dark mode is off, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-text-color-hover-dark","title":"--mbx-password-text-color-hover-dark","text":"Fallback Default --mbx-password-text-color-hover --mbx-text-color-hover-dark Password text color when dark mode is on, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon","title":"--mbx-password-icon","text":"Fallback Default / / Fallback value for --mbx-password-icon-light and --mbx-password-icon-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-light","title":"--mbx-password-icon-light","text":"Fallback Default --mbx-password-icon --mbx-password-text-color-light Password eye icon color when dark mode is off
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-dark","title":"--mbx-password-icon-dark","text":"Fallback Default --mbx-password-icon --mbx-password-text-color-dark Password eye icon color when dark mode is on
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-hover","title":"--mbx-password-icon-hover","text":"Fallback Default / / Fallback value for --mbx-password-icon-hover-light and --mbx-password-icon-hover-dark
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-hover-light","title":"--mbx-password-icon-hover-light","text":"Fallback Default --mbx-password-icon-hover --mbx-password-text-color-light Password eye icon color when dark mode is off, on hover
"},{"location":"components/atoms/Password/css-vars/#-mbx-password-icon-hover-dark","title":"--mbx-password-icon-hover-dark","text":"Fallback Default --mbx-password-icon-hover --mbx-password-text-color-dark Password eye icon color when dark mode is on, on hover
"},{"location":"components/atoms/Password/props/","title":"Password properties","text":""},{"location":"components/atoms/Password/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Password/props/#props-table","title":"Props table","text":"Parameter Type Default value string / placeholder string / readOnly boolean false onChange (newValue: string) => void () => {} show boolean false"},{"location":"components/atoms/Password/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Password/props/#value","title":"value","text":"Type Default string / text input value - extended from Input component
"},{"location":"components/atoms/Password/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set - extended from Input component
"},{"location":"components/atoms/Password/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter - extended from Input component
"},{"location":"components/atoms/Password/props/#onchange","title":"onChange","text":"Type Default (newValue: string) => void () => {} Callback triggered when Input component input value is changed by the user - extended from Input component
"},{"location":"components/atoms/Password/props/#show","title":"show","text":"Type Default boolean false Show/hide the password
"},{"location":"components/atoms/RadioButton/","title":"RadioButton page","text":"A single radio button component. Optionally, can prevent user to deselect it
"},{"location":"components/atoms/RadioButton/css-vars/","title":"RadioButton CSS variables","text":""},{"location":"components/atoms/RadioButton/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/RadioButton/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-radio-background / / --mbx-radio-background-light --mbx-radio-background radial-gradient(#f1f1f1 20%, #e4e4e4 30%, #bebebe 55%, #f0f0f0 20%) --mbx-radio-background-dark --mbx-radio-background radial-gradient(closest-side, #2d3748 20%, #232b38 30%, #1d1f44 55%, #191f29 20%) --mbx-radio-background-hover / / --mbx-radio-background-hover-light --mbx-radio-background-hover --mbx-radio-background-light --mbx-radio-background-hover-dark --mbx-radio-background-hover --mbx-radio-background-dark --mbx-radio-icon-background / / --mbx-radio-icon-background-light --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #2d3748, #191f29) --mbx-radio-icon-background-dark --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #dbe0e6, #949494)"},{"location":"components/atoms/RadioButton/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background","title":"--mbx-radio-background","text":"Fallback Default / / Fallback value for mbx-radio-background-light and mbx-radio-background-dark
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-light","title":"--mbx-radio-background-light","text":"Fallback Default --mbx-radio-background radial-gradient(#f1f1f1 20%, #e4e4e4 30%, #bebebe 55%, #f0f0f0 20%) RadioButton background when dark mode is off
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-dark","title":"--mbx-radio-background-dark","text":"Fallback Default --mbx-radio-background radial-gradient(closest-side, #2d3748 20%, #232b38 30%, #1d1f44 55%, #191f29 20%) RadioButton background when dark mode is on
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover","title":"--mbx-radio-background-hover","text":"Fallback Default / / Fallback value for mbx-radio-background-hover-light and mbx-radio-background-hover-dark
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover-light","title":"--mbx-radio-background-hover-light","text":"Fallback Default --mbx-radio-background-hover --mbx-radio-background-light RadioButton background when dark mode is off, on hover
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover-dark","title":"--mbx-radio-background-hover-dark","text":"Fallback Default --mbx-radio-background-hover --mbx-radio-background-dark RadioButton background when dark mode is on, on hover
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background","title":"--mbx-radio-icon-background","text":"Fallback Default / / Fallback value for mbx-radio-icon-background-light and mbx-radio-icon-background-dark
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background-light","title":"--mbx-radio-icon-background-light","text":"Fallback Default --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #2d3748, #191f29) RadioButton icon background when dark mode is off
"},{"location":"components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background-dark","title":"--mbx-radio-icon-background-dark","text":"Fallback Default --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #dbe0e6, #949494) RadioButton icon background when dark mode is on
"},{"location":"components/atoms/RadioButton/props/","title":"RadioButton properties","text":""},{"location":"components/atoms/RadioButton/props/#summary","title":"Summary","text":""},{"location":"components/atoms/RadioButton/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean false deselectable boolean false onChange (newValue: boolean) => void () => {}"},{"location":"components/atoms/RadioButton/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/RadioButton/props/#value","title":"value","text":"Type Default boolean false actual radio button value (radio icon visiblity)
"},{"location":"components/atoms/RadioButton/props/#deselectable","title":"deselectable","text":"Type Default boolean false if false, the button can be selected only once (the value can't change then)
"},{"location":"components/atoms/RadioButton/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when RadioButton component input value is changed by the user
"},{"location":"components/atoms/Rater/","title":"Rater page","text":"A modern rater component, to let the user leave a review within your app
"},{"location":"components/atoms/Rater/css-vars/","title":"Rater CSS variables","text":""},{"location":"components/atoms/Rater/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Rater/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-rater-background / / --mbx-rater-background-light --mbx-rater-background --mbx-background-light --mbx-rater-background-dark --mbx-rater-background --mbx-background-dark"},{"location":"components/atoms/Rater/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Rater/css-vars/#-mbx-rater-background","title":"--mbx-rater-background","text":"Fallback Default / / Fallback value for mbx-rater-background-light and mbx-rater-background-dark
"},{"location":"components/atoms/Rater/css-vars/#-mbx-rater-background-light","title":"--mbx-rater-background-light","text":"Fallback Default --mbx-rater-background --mbx-background-light Rater background when dark mode is off
"},{"location":"components/atoms/Rater/css-vars/#-mbx-rater-background-dark","title":"--mbx-rater-background-dark","text":"Fallback Default --mbx-rater-background --mbx-background-dark Rater background when dark mode is on
"},{"location":"components/atoms/Rater/props/","title":"Rater properties","text":""},{"location":"components/atoms/Rater/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Rater/props/#props-table","title":"Props table","text":"Parameter Type Default value number 0 max number 5 readOnly boolean false type star|circle 'star' vertical boolean false onChange (newValue: number) => void () => {}"},{"location":"components/atoms/Rater/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Rater/props/#value","title":"value","text":"Type Default number 0 actual vote
"},{"location":"components/atoms/Rater/props/#max","title":"max","text":"Type Default number 5 max vote (max number of icons displayed)
"},{"location":"components/atoms/Rater/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, the rate can't be changed by clicking on the icons
"},{"location":"components/atoms/Rater/props/#type","title":"type","text":"Type Default star|circle 'star' vote icons type
"},{"location":"components/atoms/Rater/props/#vertical","title":"vertical","text":"Type Default boolean false if true, rate icons will be displayed vertically
"},{"location":"components/atoms/Rater/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} callback triggered when user select a vote
"},{"location":"components/atoms/Selector/","title":"Selector page","text":"A re-defined select component
"},{"location":"components/atoms/Selector/css-vars/","title":"Selector CSS variables","text":""},{"location":"components/atoms/Selector/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Selector/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-selector-background / / --mbx-selector-background-light --mbx-selector-background --mbx-background-light --mbx-selector-background-dark --mbx-selector-background --mbx-background-dark)) --mbx-selector-text-color / / --mbx-selector-text-color-light --mbx-selector-text-color --mbx-text-color-light --mbx-selector-text-color-dark --mbx-selector-text-color [--mbx-text-color-dark --mbx-selector-background-hover / / --mbx-selector-background-hover-light --mbx-selector-background-hover --mbx-selector-background-light --mbx-selector-background-hover-dark --mbx-selector-background-hover --mbx-selector-background-dark --mbx-selector-text-color-hover / / --mbx-selector-text-color-hover-light --mbx-selector-text-color-hover --mbx-text-color-hover-light --mbx-selector-text-color-hover-dark --mbx-selector-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/atoms/Selector/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background","title":"--mbx-selector-background","text":"Fallback Default / / Fallback value for mbx-selector-background-light and mbx-selector-background-dark
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-light","title":"--mbx-selector-background-light","text":"Fallback Default --mbx-selector-background --mbx-background-light Selector background when dark mode is off
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-dark","title":"--mbx-selector-background-dark","text":"Fallback Default --mbx-selector-background --mbx-background-dark)) Selector background when dark mode is on
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color","title":"--mbx-selector-text-color","text":"Fallback Default / / Fallback value for mbx-selector-text-color-light and mbx-selector-text-color-dark
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-light","title":"--mbx-selector-text-color-light","text":"Fallback Default --mbx-selector-text-color --mbx-text-color-light Selector text color when dark mode is off
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-dark","title":"--mbx-selector-text-color-dark","text":"Fallback Default --mbx-selector-text-color [--mbx-text-color-dark Selector text color when dark mode is on
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-hover","title":"--mbx-selector-background-hover","text":"Fallback Default / / Fallback value for mbx-selector-background-hover-light and mbx-selector-background-hover-dark
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-hover-light","title":"--mbx-selector-background-hover-light","text":"Fallback Default --mbx-selector-background-hover --mbx-selector-background-light Selector background when dark mode is off, on hover
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-background-hover-dark","title":"--mbx-selector-background-hover-dark","text":"Fallback Default --mbx-selector-background-hover --mbx-selector-background-dark Selector background when dark mode is on, on hover
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover","title":"--mbx-selector-text-color-hover","text":"Fallback Default / / Fallback value for mbx-selector-text-color-hover-light and mbx-selector-text-color-hover-dark
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover-light","title":"--mbx-selector-text-color-hover-light","text":"Fallback Default --mbx-selector-text-color-hover --mbx-text-color-hover-light Selector text color when dark mode is off, on hover
"},{"location":"components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover-dark","title":"--mbx-selector-text-color-hover-dark","text":"Fallback Default --mbx-selector-text-color-hover --mbx-text-color-hover-dark Selector text color when dark mode is on, on hover
"},{"location":"components/atoms/Selector/props/","title":"Selector properties","text":""},{"location":"components/atoms/Selector/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Selector/props/#props-table","title":"Props table","text":"Parameter Type Default value number 0 elements string[] [] optionClassName string / onChange (newValue: number) => void () => {}"},{"location":"components/atoms/Selector/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Selector/props/#value","title":"value","text":"Type Default number 0 option index actually displayed
"},{"location":"components/atoms/Selector/props/#elements","title":"elements","text":"Type Default string[] [] selector options array, every element must be a string
"},{"location":"components/atoms/Selector/props/#optionclassname","title":"optionClassName","text":"Type Default string / className applied on every options inside the selector
"},{"location":"components/atoms/Selector/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Selector component input value is changed by the user
"},{"location":"components/atoms/Slider/","title":"Slider page","text":"A modern range input component, to control a value using a simple slider
"},{"location":"components/atoms/Slider/css-vars/","title":"Slider CSS variables","text":""},{"location":"components/atoms/Slider/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Slider/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-slider-background / / --mbx-slider-background-light --mbx-slider-background --mbx-background-light --mbx-slider-background-dark --mbx-slider-background --mbx-background-dark --mbx-slider-thumb-color / / --mbx-slider-thumb-color-light --mbx-slider-thumb-color radial-gradient(#2d3748, #1d232e) --mbx-slider-thumb-color-dark --mbx-slider-thumb-color radial-gradient(#e3e4e9, #9b9999) --mbx-slider-thumb-color-hover / / --mbx-slider-thumb-color-hover-light --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-light --mbx-slider-thumb-color-hover-dark --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-dark"},{"location":"components/atoms/Slider/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-background","title":"--mbx-slider-background","text":"Fallback Default / / Fallback value for mbx-slider-background-light and mbx-slider-background-dark
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-background-light","title":"--mbx-slider-background-light","text":"Fallback Default --mbx-slider-background --mbx-background-light Slider background when dark mode is off
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-background-dark","title":"--mbx-slider-background-dark","text":"Fallback Default --mbx-slider-background --mbx-background-dark Slider background when dark mode is on
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color","title":"--mbx-slider-thumb-color","text":"Fallback Default / / Fallback value for mbx-slider-thumb-color-light and mbx-slider-thumb-color-dark
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-light","title":"--mbx-slider-thumb-color-light","text":"Fallback Default --mbx-slider-thumb-color radial-gradient(#2d3748, #1d232e) Slider thumb color when dark mode is off
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-dark","title":"--mbx-slider-thumb-color-dark","text":"Fallback Default --mbx-slider-thumb-color radial-gradient(#e3e4e9, #9b9999) Slider thumb color when dark mode is on
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover","title":"--mbx-slider-thumb-color-hover","text":"Fallback Default / / Fallback value for mbx-slider-thumb-color-hover-light and mbx-slider-thumb-color-hover-dark
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover-light","title":"--mbx-slider-thumb-color-hover-light","text":"Fallback Default --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-light Slider thumb color when dark mode is off, on hover
"},{"location":"components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover-dark","title":"--mbx-slider-thumb-color-hover-dark","text":"Fallback Default --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-dark Slider thumb color when dark mode is on, on hover
"},{"location":"components/atoms/Slider/props/","title":"Slider properties","text":""},{"location":"components/atoms/Slider/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Slider/props/#props-table","title":"Props table","text":"Parameter Type Default value number / min number / max number / readOnly boolean / onChange (newValue: number) => void () => {}"},{"location":"components/atoms/Slider/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Slider/props/#value","title":"value","text":"Type Default number / Actual slider value
"},{"location":"components/atoms/Slider/props/#min","title":"min","text":"Type Default number / Min allowed value
"},{"location":"components/atoms/Slider/props/#max","title":"max","text":"Type Default number / Max allowed value
"},{"location":"components/atoms/Slider/props/#readonly","title":"readOnly","text":"Type Default boolean / if true, component value can only be set with value parameter
"},{"location":"components/atoms/Slider/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Slider component input value is changed by the user
"},{"location":"components/atoms/Spinner/","title":"Spinner page","text":"A smart status indicator, optionally with custom images showed for every state (defaults are loading,success and error)
"},{"location":"components/atoms/Spinner/css-vars/","title":"Spinner CSS variables","text":""},{"location":"components/atoms/Spinner/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Spinner/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-spinner-success-color / / --mbx-spinner-success-color-light --mbx-spinner-success-color #05bc29 --mbx-spinner-success-color-dark --mbx-spinner-success-color #05bc29 --mbx-spinner-error-color / / --mbx-spinner-error-color-light --mbx-spinner-error-color #ff0000 --mbx-spinner-error-color-dark --mbx-spinner-error-color #ff0000 --mbx-spinner-loading-color / / --mbx-spinner-loading-color-light --mbx-spinner-loading-color #202020 --mbx-spinner-loading-color-dark --mbx-spinner-loading-color #202020"},{"location":"components/atoms/Spinner/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-success-color","title":"--mbx-spinner-success-color","text":"Fallback Default / / Fallback value for --mbx-spinner-success-color-light and --mbx-spinner-success-color-dark
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-success-color-light","title":"--mbx-spinner-success-color-light","text":"Fallback Default --mbx-spinner-success-color #05bc29 Spinner success color when dark mode is off
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-success-color-dark","title":"--mbx-spinner-success-color-dark","text":"Fallback Default --mbx-spinner-success-color #05bc29 Spinner success color when dark mode is on
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-error-color","title":"--mbx-spinner-error-color","text":"Fallback Default / / Fallback value for --mbx-spinner-error-color-light and --mbx-spinner-error-color-dark
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-error-color-light","title":"--mbx-spinner-error-color-light","text":"Fallback Default --mbx-spinner-error-color #ff0000 Spinner error color when dark mode is off
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-error-color-dark","title":"--mbx-spinner-error-color-dark","text":"Fallback Default --mbx-spinner-error-color #ff0000 Spinner error color when dark mode is on
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color","title":"--mbx-spinner-loading-color","text":"Fallback Default / / Fallback value for --mbx-spinner-loading-color-light and --mbx-spinner-loading-color-dark
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color-light","title":"--mbx-spinner-loading-color-light","text":"Fallback Default --mbx-spinner-loading-color #202020 Spinner loading color when dark mode is off
"},{"location":"components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color-dark","title":"--mbx-spinner-loading-color-dark","text":"Fallback Default --mbx-spinner-loading-color #202020 Spinner loading color when dark mode is on
"},{"location":"components/atoms/Spinner/props/","title":"Spinner properties","text":""},{"location":"components/atoms/Spinner/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Spinner/props/#props-table","title":"Props table","text":"Parameter Type Default value number 'loading' statuses Record /"},{"location":"components/atoms/Spinner/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Spinner/props/#value","title":"value","text":"Type Default number 'loading' Spinner status
"},{"location":"components/atoms/Spinner/props/#statuses","title":"statuses","text":"Type Default Record / Custom statuses, to map every icon with a specific status
"},{"location":"components/atoms/Toggle/","title":"Toggle page","text":"A compact Toggle switcher, customized to reflect its actual status
"},{"location":"components/atoms/Toggle/css-vars/","title":"Toggle CSS variables","text":""},{"location":"components/atoms/Toggle/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/atoms/Toggle/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-toggle-background / / --mbx-toggle-background-light --mbx-toggle-background --mbx-background-light --mbx-toggle-background-dark --mbx-toggle-background --mbx-background-dark --mbx-toggle-icon-on-internal-color / / --mbx-toggle-icon-on-internal-color-light --mbx-toggle-icon-on-internal-color #ffffff --mbx-toggle-icon-on-internal-color-dark --mbx-toggle-icon-on-internal-color #ffffff --mbx-toggle-icon-on-external-color / / --mbx-toggle-icon-on-external-color-light --mbx-toggle-icon-on-external-color #adadad --mbx-toggle-icon-on-external-color-dark --mbx-toggle-icon-on-external-color #adadad --mbx-toggle-icon-off-internal-color / / --mbx-toggle-icon-off-internal-color-light --mbx-toggle-icon-off-internal-color #a5a5a5 --mbx-toggle-icon-off-internal-color-dark --mbx-toggle-icon-off-internal-color #a5a5a5 --mbx-toggle-icon-off-external-color / / --mbx-toggle-icon-off-external-color-light --mbx-toggle-icon-off-external-color #a7a3a3 --mbx-toggle-icon-off-external-color-dark --mbx-toggle-icon-off-external-color #a7a3a3"},{"location":"components/atoms/Toggle/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-background","title":"--mbx-toggle-background","text":"Fallback Default / / Fallback value for --mbx-toggle-background-light and --mbx-toggle-background-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-background-light","title":"--mbx-toggle-background-light","text":"Fallback Default --mbx-toggle-background --mbx-background-light Toggle background when dark mode is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-background-dark","title":"--mbx-toggle-background-dark","text":"Fallback Default --mbx-toggle-background --mbx-background-dark Toggle background when dark mode is on
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color","title":"--mbx-toggle-icon-on-internal-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-on-internal-color-light and --mbx-toggle-icon-on-internal-color-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color-light","title":"--mbx-toggle-icon-on-internal-color-light","text":"Fallback Default --mbx-toggle-icon-on-internal-color #ffffff Toggle icon internal color, when dark mode is off and toggle status is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color-dark","title":"--mbx-toggle-icon-on-internal-color-dark","text":"Fallback Default --mbx-toggle-icon-on-internal-color #ffffff Toggle icon internal color, when dark mode is off and toggle status is on
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color","title":"--mbx-toggle-icon-on-external-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-on-external-color-light and --mbx-toggle-icon-on-external-color-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color-light","title":"--mbx-toggle-icon-on-external-color-light","text":"Fallback Default --mbx-toggle-icon-on-external-color #adadad Toggle icon external color, when dark mode is off and toggle status is on
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color-dark","title":"--mbx-toggle-icon-on-external-color-dark","text":"Fallback Default --mbx-toggle-icon-on-external-color #adadad Toggle icon external color, when dark mode is on and toggle status is on
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color","title":"--mbx-toggle-icon-off-internal-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-off-internal-color-light and --mbx-toggle-icon-off-internal-color-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color-light","title":"--mbx-toggle-icon-off-internal-color-light","text":"Fallback Default --mbx-toggle-icon-off-internal-color #a5a5a5 Toggle icon internal color, when dark mode is off and toggle status is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color-dark","title":"--mbx-toggle-icon-off-internal-color-dark","text":"Fallback Default --mbx-toggle-icon-off-internal-color #a5a5a5 Toggle icon internal color, when dark mode is on and toggle status is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color","title":"--mbx-toggle-icon-off-external-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-off-external-color-light and --mbx-toggle-icon-off-external-color-dark
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color-light","title":"--mbx-toggle-icon-off-external-color-light","text":"Fallback Default --mbx-toggle-icon-off-external-color #a7a3a3 Toggle icon external color, when dark mode is off and toggle status is off
"},{"location":"components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color-dark","title":"--mbx-toggle-icon-off-external-color-dark","text":"Fallback Default --mbx-toggle-icon-off-external-color #a7a3a3 Toggle icon external color, when dark mode is on and toggle status is off
"},{"location":"components/atoms/Toggle/props/","title":"Toggle properties","text":""},{"location":"components/atoms/Toggle/props/#summary","title":"Summary","text":""},{"location":"components/atoms/Toggle/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean / onIcon JSX.Element / icon JSX.Element / offIcon JSX.Element / onChange (newValue: boolean) => void () => {}"},{"location":"components/atoms/Toggle/props/#props-list","title":"Props list","text":""},{"location":"components/atoms/Toggle/props/#value","title":"value","text":"Type Default boolean / toggle status (true - on/false - off)
"},{"location":"components/atoms/Toggle/props/#onicon","title":"onIcon","text":"Type Default JSX.Element / custom toggle on icon (value === true)
"},{"location":"components/atoms/Toggle/props/#icon","title":"icon","text":"Type Default JSX.Element / custom toggle icon, used as a default icon
"},{"location":"components/atoms/Toggle/props/#officon","title":"offIcon","text":"Type Default JSX.Element / custom toggle off icon (value === false)
"},{"location":"components/atoms/Toggle/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when Toggle component input value is changed by the user
"},{"location":"components/molecules/","title":"MoBrix-ui molecules","text":""},{"location":"components/molecules/#summary","title":"Summary","text":" - Card
- Carousel
- Container
- DismissableCard
- Dropdown
- ExpandableContainer
- FormField
- List
- Modal
- Popup
- RadioButtonGroup
- Review
- Table
- TabViewer
"},{"location":"components/molecules/Card/","title":"Card page","text":"A Card component. Its UI depends on given parameters (header, body and footer)
"},{"location":"components/molecules/Card/css-vars/","title":"Card CSS variables","text":""},{"location":"components/molecules/Card/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Card/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-card-background / / --mbx-card-background-light --mbx-card-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-card-background-dark --mbx-card-background linear-gradient(to right, #2d3748, #1d232e) --mbx-card-text-color / / --mbx-card-text-color-light --mbx-card-text-color --mbx-text-color-light --mbx-card-text-color-dark --mbx-card-text-color --mbx-text-color-dark"},{"location":"components/molecules/Card/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Card/css-vars/#-mbx-card-background","title":"--mbx-card-background","text":"Fallback Default / / Fallback value for --mbx-card-background-light and --mbx-card-background-dark
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-background-light","title":"--mbx-card-background-light","text":"Fallback Default --mbx-card-background linear-gradient(to right, #fff, #ededee, #e6e7e7) Card background when dark mode is off
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-background-dark","title":"--mbx-card-background-dark","text":"Fallback Default --mbx-card-background linear-gradient(to right, #2d3748, #1d232e) Card background when dark mode is on
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-text-color","title":"--mbx-card-text-color","text":"Fallback Default / / Fallback value for --mbx-card-text-color-light and --mbx-card-text-color-dark
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-text-color-light","title":"--mbx-card-text-color-light","text":"Fallback Default --mbx-card-text-color --mbx-text-color-light Card text color when dark mode is off
"},{"location":"components/molecules/Card/css-vars/#-mbx-card-text-color-dark","title":"--mbx-card-text-color-dark","text":"Fallback Default --mbx-card-text-color --mbx-text-color-dark Card text color when dark mode is on
"},{"location":"components/molecules/Card/props/","title":"Card properties","text":""},{"location":"components/molecules/Card/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Card/props/#props-table","title":"Props table","text":"Parameter Type Default header JSX.Element | string / body JSX.Element | string / footer JSX.Element | string / headerClassName string / bodyClassName string / footerClassName string / headerProps Record / bodyProps Record / footerProps Record / noDivider boolean / noTopDivider boolean / noBottomDivider boolean / dividerSize string 1px children JSX.Element | string /"},{"location":"components/molecules/Card/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Card/props/#header","title":"header","text":"Type Default JSX.Element | string / Card header content
"},{"location":"components/molecules/Card/props/#body","title":"body","text":"Type Default JSX.Element | string / Card body content
"},{"location":"components/molecules/Card/props/#footer","title":"footer","text":"Type Default JSX.Element | string / Card footer content
"},{"location":"components/molecules/Card/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on the Card header
"},{"location":"components/molecules/Card/props/#bodyclassname","title":"bodyClassName","text":"Type Default string / Custom classname applied on the Card body
"},{"location":"components/molecules/Card/props/#footerclassname","title":"footerClassName","text":"Type Default string / Custom classname applied on the Card footer
"},{"location":"components/molecules/Card/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on the Card header
"},{"location":"components/molecules/Card/props/#bodyprops","title":"bodyProps","text":"Type Default Record / Custom props applied on the Card body
"},{"location":"components/molecules/Card/props/#footerprops","title":"footerProps","text":"Type Default Record / Custom props applied on the Card footer
"},{"location":"components/molecules/Card/props/#nodivider","title":"noDivider","text":"Type Default boolean / If true, hide all dividers
"},{"location":"components/molecules/Card/props/#notopdivider","title":"noTopDivider","text":"Type Default boolean / If true, hide the top divider, between header and body
"},{"location":"components/molecules/Card/props/#nobottomdivider","title":"noBottomDivider","text":"Type Default boolean / If true, hide the top divider, between body and footer
"},{"location":"components/molecules/Card/props/#dividersize","title":"dividerSize","text":"Type Default string 1px Set the size of the top and the bottom divider
"},{"location":"components/molecules/Card/props/#children","title":"children","text":"Type Default JSX.Element | string / Card content
"},{"location":"components/molecules/Carousel/","title":"Carousel page","text":"A compact carousel, to show any component (or image) into a slide, with dots and arrow button to go next/previous
"},{"location":"components/molecules/Carousel/css-vars/","title":"Carousel CSS variables","text":""},{"location":"components/molecules/Carousel/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Carousel/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-carousel-background / / --mbx-carousel-background-light --mbx-carousel-background --mbx-background-light --mbx-carousel-background-dark --mbx-carousel-background --mbx-background-dark --mbx-carousel-arrow / / --mbx-carousel-arrow-light --mbx-carousel-arrow #252525 --mbx-carousel-arrow-dark --mbx-carousel-arrow #e2e2e2 --mbx-carousel-arrow-hover / / --mbx-carousel-arrow-hover-light --mbx-carousel-arrow-hover #287dfd --mbx-carousel-arrow-hover-dark --mbx-carousel-arrow-hover #ff8007 --mbx-carousel-dot-empty-background / / --mbx-carousel-dot-empty-background-light --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) --mbx-carousel-dot-empty-background-dark --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) --mbx-carousel-dot-full-background / / --mbx-carousel-dot-full-background-light --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) --mbx-carousel-dot-full-background-dark --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4)"},{"location":"components/molecules/Carousel/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-background","title":"--mbx-carousel-background","text":"Fallback Default / / Fallback value for --mbx-carousel-background-light and --mbx-carousel-background-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-background-light","title":"--mbx-carousel-background-light","text":"Fallback Default --mbx-carousel-background --mbx-background-light Carousel background when dark mode is off
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-background-dark","title":"--mbx-carousel-background-dark","text":"Fallback Default --mbx-carousel-background --mbx-background-dark Carousel background when dark mode is on
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow","title":"--mbx-carousel-arrow","text":"Fallback Default / / Fallback value for --mbx-carousel-arrow-light and --mbx-carousel-arrow-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-light","title":"--mbx-carousel-arrow-light","text":"Fallback Default --mbx-carousel-arrow #252525 Carousel arrow color when dark mode is off
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-dark","title":"--mbx-carousel-arrow-dark","text":"Fallback Default --mbx-carousel-arrow #e2e2e2 Carousel arrow color when dark mode is on
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-hover","title":"--mbx-carousel-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-carousel-arrow-hover-light and --mbx-carousel-arrow-hover-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-hover-light","title":"--mbx-carousel-arrow-hover-light","text":"Fallback Default --mbx-carousel-arrow-hover #287dfd Carousel arrow color when dark mode is off, on hover
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-hover-dark","title":"--mbx-carousel-arrow-hover-dark","text":"Fallback Default --mbx-carousel-arrow-hover #ff8007 Carousel arrow color when dark mode is on, on hover
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background","title":"--mbx-carousel-dot-empty-background","text":"Fallback Default / / Fallback value for --mbx-carousel-dot-empty-background-light and --mbx-carousel-dot-empty-background-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background-light","title":"--mbx-carousel-dot-empty-background-light","text":"Fallback Default --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) Carousel empty dot background when dark mode is off
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background-dark","title":"--mbx-carousel-dot-empty-background-dark","text":"Fallback Default --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) Carousel empty dot background when dark mode is on
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background","title":"--mbx-carousel-dot-full-background","text":"Fallback Default / / Fallback value for --mbx-carousel-dot-full-background-light and --mbx-carousel-dot-full-background-dark
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background-light","title":"--mbx-carousel-dot-full-background-light","text":"Fallback Default --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) Carousel full dot background when dark mode is off
"},{"location":"components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background-dark","title":"--mbx-carousel-dot-full-background-dark","text":"Fallback Default --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) Carousel full dot background when dark mode is on
"},{"location":"components/molecules/Carousel/props/","title":"Carousel properties","text":""},{"location":"components/molecules/Carousel/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Carousel/props/#props-table","title":"Props table","text":"Parameter Type Default elements (JSX.Element | string)[] [] onChange (newValue: number) => void () => {} value number 0 arrowClassName string / dotClassName string /"},{"location":"components/molecules/Carousel/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Carousel/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] [] Carousel elements
"},{"location":"components/molecules/Carousel/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Carousel component input value is changed by the user
"},{"location":"components/molecules/Carousel/props/#value","title":"value","text":"Type Default number 0 Initial element to show (as index)
"},{"location":"components/molecules/Carousel/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the Carousel arrows
"},{"location":"components/molecules/Carousel/props/#dotclassname","title":"dotClassName","text":"Type Default string / Custom classname applied on every Carousel dot
"},{"location":"components/molecules/Container/","title":"Container page","text":"A simple but smart container, enhanced with MoBrix-ui common props
"},{"location":"components/molecules/Container/css-vars/","title":"Container CSS variables","text":""},{"location":"components/molecules/Container/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Container/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-container-background / / --mbx-container-background-light --mbx-container-background --mbx-background-light --mbx-container-background-dark --mbx-container-background --mbx-background-dark --mbx-container-text-color / / --mbx-container-text-color-light --mbx-container-text-color --mbx-text-color-light --mbx-container-text-color-dark --mbx-container-text-color --mbx-text-color-dark"},{"location":"components/molecules/Container/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Container/css-vars/#-mbx-container-background","title":"--mbx-container-background","text":"Fallback Default / / Fallback value for --mbx-container-background-light and --mbx-container-background-dark
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-background-light","title":"--mbx-container-background-light","text":"Fallback Default --mbx-container-background --mbx-background-light Container background when dark mode is off
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-background-dark","title":"--mbx-container-background-dark","text":"Fallback Default --mbx-container-background --mbx-background-dark Container background when dark mode is on
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-text-color","title":"--mbx-container-text-color","text":"Fallback Default / / Fallback value for --mbx-container-text-color-light and --mbx-container-text-color-dark
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-text-color-light","title":"--mbx-container-text-color-light","text":"Fallback Default --mbx-container-text-color --mbx-text-color-light Container text color when dark mode is off
"},{"location":"components/molecules/Container/css-vars/#-mbx-container-text-color-dark","title":"--mbx-container-text-color-dark","text":"Fallback Default --mbx-container-text-color --mbx-text-color-dark Container text color when dark mode is on
"},{"location":"components/molecules/Container/props/","title":"Container properties","text":""},{"location":"components/molecules/Container/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Container/props/#props-table","title":"Props table","text":"Parameter Type Default children any / wrapper div | header | footer div"},{"location":"components/molecules/Container/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Container/props/#children","title":"children","text":"Type Default any / content to render inside Container
"},{"location":"components/molecules/Container/props/#wrapper","title":"wrapper","text":"Type Default div | header | footer div component wrapper type
"},{"location":"components/molecules/DismissableCard/","title":"DismissableCard page","text":"A standard Card with a dismiss function
"},{"location":"components/molecules/DismissableCard/css-vars/","title":"DismissableCard CSS variables","text":""},{"location":"components/molecules/DismissableCard/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/DismissableCard/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-dismissablecard-background / / --mbx-dismissablecard-background-light --mbx-dismissablecard-background --mbx-card-background-light --mbx-dismissablecard-background-dark --mbx-dismissablecard-background --mbx-card-background-dark --mbx-dismissablecard-text-color / / --mbx-dismissablecard-text-color-light --mbx-dismissablecard-text-color --mbx-card-text-color-light --mbx-dismissablecard-text-color-dark --mbx-dismissablecard-text-color --mbx-card-text-color-dark --mbx-dismissablecard-x-color / / --mbx-dismissablecard-x-color-light --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-light --mbx-dismissablecard-x-color-dark --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-dark --mbx-dismissablecard-x-color-hover / / --mbx-dismissablecard-x-color-hover-light --mbx-dismissablecard-x-color-hover red --mbx-dismissablecard-x-color-hover-dark --mbx-dismissablecard-x-color-hover red"},{"location":"components/molecules/DismissableCard/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background","title":"--mbx-dismissablecard-background","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-background-light and --mbx-dismissablecard-background-dark
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background-light","title":"--mbx-dismissablecard-background-light","text":"Fallback Default --mbx-dismissablecard-background --mbx-card-background-light DismissableCard background when dark mode is off
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background-dark","title":"--mbx-dismissablecard-background-dark","text":"Fallback Default --mbx-dismissablecard-background --mbx-card-background-dark DismissableCard background when dark mode is on
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color","title":"--mbx-dismissablecard-text-color","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-text-color-light and --mbx-dismissablecard-text-color-dark
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color-light","title":"--mbx-dismissablecard-text-color-light","text":"Fallback Default --mbx-dismissablecard-text-color --mbx-card-text-color-light DismissableCard text color when dark mode is off
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color-dark","title":"--mbx-dismissablecard-text-color-dark","text":"Fallback Default --mbx-dismissablecard-text-color --mbx-card-text-color-dark DismissableCard text color when dark mode is on
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color","title":"--mbx-dismissablecard-x-color","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-x-color-light and --mbx-dismissablecard-x-color-dark
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-light","title":"--mbx-dismissablecard-x-color-light","text":"Fallback Default --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-light DismissableCard x icon color when dark mode is off
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-dark","title":"--mbx-dismissablecard-x-color-dark","text":"Fallback Default --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-dark DismissableCard x icon color when dark mode is on
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover","title":"--mbx-dismissablecard-x-color-hover","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-x-color-hover-light and --mbx-dismissablecard-x-color-hover-dark
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover-light","title":"--mbx-dismissablecard-x-color-hover-light","text":"Fallback Default --mbx-dismissablecard-x-color-hover red DismissableCard x icon color when dark mode is off, on hover
"},{"location":"components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover-dark","title":"--mbx-dismissablecard-x-color-hover-dark","text":"Fallback Default --mbx-dismissablecard-x-color-hover red DismissableCard x icon color when dark mode is on, on hover
"},{"location":"components/molecules/DismissableCard/props/","title":"DismissableCard properties","text":""},{"location":"components/molecules/DismissableCard/props/#summary","title":"Summary","text":""},{"location":"components/molecules/DismissableCard/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} alwaysVisible boolean false header JSX.Element | string / body JSX.Element | string / footer JSX.Element | string / noDivider boolean / noTopDivider boolean / noBottomDivider boolean / children JSX.Element | string / headerClassName string / bodyClassName string / footerClassName string / headerProps Record / bodyProps Record / footerProps Record / dividerSize string 1px"},{"location":"components/molecules/DismissableCard/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/DismissableCard/props/#onclose","title":"onClose","text":"Type Default () => void () => {} Callback triggered when the X icon is clicked
"},{"location":"components/molecules/DismissableCard/props/#alwaysvisible","title":"alwaysVisible","text":"Type Default boolean false If true, the DismissableCard won't disappear if the X icon is clicked (can be hidden with hide shared prop)
"},{"location":"components/molecules/DismissableCard/props/#header","title":"header","text":"Type Default JSX.Element | string / Card header content - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#body","title":"body","text":"Type Default JSX.Element | string / Card body content - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#footer","title":"footer","text":"Type Default JSX.Element | string / Card footer content - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#nodivider","title":"noDivider","text":"Type Default boolean / If true, hide all dividers - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#notopdivider","title":"noTopDivider","text":"Type Default boolean / If true, hide the top divider, between header and body - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#nobottomdivider","title":"noBottomDivider","text":"Type Default boolean / If true, hide the top divider, between body and footer - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#children","title":"children","text":"Type Default JSX.Element | string / Card content - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on the Card header - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#bodyclassname","title":"bodyClassName","text":"Type Default string / Custom classname applied on the Card body - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#footerclassname","title":"footerClassName","text":"Type Default string / Custom classname applied on the Card footer - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on the Card header - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#bodyprops","title":"bodyProps","text":"Type Default Record / Custom props applied on the Card body - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#footerprops","title":"footerProps","text":"Type Default Record / Custom props applied on the Card footer - extended from Card component
"},{"location":"components/molecules/DismissableCard/props/#dividersize","title":"dividerSize","text":"Type Default string 1px Set the size of the top and the bottom divider - extended from Card component
"},{"location":"components/molecules/Dropdown/","title":"Dropdown page","text":"Show a list of elements in a dropdown menu (with fade-in and out effects). Can be easily customized and every element style and behaviour (with a callback) can be customized too.
"},{"location":"components/molecules/Dropdown/css-vars/","title":"Dropdown CSS variables","text":""},{"location":"components/molecules/Dropdown/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Dropdown/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-dropdown-background / / --mbx-dropdown-background-light --mbx-dropdown-background --mbx-background-light --mbx-dropdown-background-dark --mbx-dropdown-background --mbx-background-dark --mbx-dropdown-text-color / / --mbx-dropdown-text-color-light --mbx-dropdown-text-color --mbx-text-color-light --mbx-dropdown-text-color-dark --mbx-dropdown-text-color --mbx-text-color-dark --mbx-dropdown-background-hover / / --mbx-dropdown-background-hover-light --mbx-dropdown-background --mbx-background-hover-light --mbx-dropdown-background-hover-dark --mbx-dropdown-background --mbx-background-hover-dark --mbx-dropdown-text-color-hover / / --mbx-dropdown-text-color-hover-light --mbx-dropdown-text-color-hover --mbx-text-color-hover-light --mbx-dropdown-text-color-hover-dark --mbx-dropdown-text-color-hover --mbx-text-color-hover-light --mbx-dropdown-arrow / / --mbx-dropdown-arrow-light --mbx-dropdown-arrow --mbx-dropdown-text-color-light --mbx-dropdown-arrow-dark --mbx-dropdown-arrow --mbx-dropdown-text-color-dark --mbx-dropdown-arrow-hover / / --mbx-dropdown-arrow-hover-light --mbx-dropdown-arrow-hover --mbx-dropdown-arrow-light --mbx-dropdown-arrow-hover-dark --mbx-dropdown-arrow-hover --mbx-dropdown-arrow-dark"},{"location":"components/molecules/Dropdown/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background","title":"--mbx-dropdown-background","text":"Fallback Default / / Fallback value for --mbx-dropdown-background-light and --mbx-dropdown-background-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-light","title":"--mbx-dropdown-background-light","text":"Fallback Default --mbx-dropdown-background --mbx-background-light Dropdown background when dark mode is off
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-dark","title":"--mbx-dropdown-background-dark","text":"Fallback Default --mbx-dropdown-background --mbx-background-dark Dropdown background when dark mode is on
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color","title":"--mbx-dropdown-text-color","text":"Fallback Default / / Fallback value for --mbx-dropdown-text-color-light and --mbx-dropdown-text-color-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-light","title":"--mbx-dropdown-text-color-light","text":"Fallback Default --mbx-dropdown-text-color --mbx-text-color-light Dropdown text color when dark mode is off
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-dark","title":"--mbx-dropdown-text-color-dark","text":"Fallback Default --mbx-dropdown-text-color --mbx-text-color-dark Dropdown text color when dark mode is on
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover","title":"--mbx-dropdown-background-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-background-hover-light and --mbx-dropdown-background-hover-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover-light","title":"--mbx-dropdown-background-hover-light","text":"Fallback Default --mbx-dropdown-background --mbx-background-hover-light Dropdown background when dark mode is off, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover-dark","title":"--mbx-dropdown-background-hover-dark","text":"Fallback Default --mbx-dropdown-background --mbx-background-hover-dark Dropdown background when dark mode is on, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover","title":"--mbx-dropdown-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-text-color-hover-light and --mbx-dropdown-text-color-hover-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover-light","title":"--mbx-dropdown-text-color-hover-light","text":"Fallback Default --mbx-dropdown-text-color-hover --mbx-text-color-hover-light Dropdown text color when dark mode is off, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover-dark","title":"--mbx-dropdown-text-color-hover-dark","text":"Fallback Default --mbx-dropdown-text-color-hover --mbx-text-color-hover-light Dropdown text color when dark mode is on, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow","title":"--mbx-dropdown-arrow","text":"Fallback Default / / Fallback value for --mbx-dropdown-arrow-light and --mbx-dropdown-arrow-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-light","title":"--mbx-dropdown-arrow-light","text":"Fallback Default --mbx-dropdown-arrow --mbx-dropdown-text-color-light Dropdown arrow color when dark mode is off
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-dark","title":"--mbx-dropdown-arrow-dark","text":"Fallback Default --mbx-dropdown-arrow --mbx-dropdown-text-color-dark Dropdown arrow color when dark mode is on
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-hover","title":"--mbx-dropdown-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-arrow-hover-light and --mbx-dropdown-arrow-hover-dark
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-hover-light","title":"--mbx-dropdown-arrow-hover-light","text":"Fallback Default --mbx-dropdown-arrow-hover --mbx-dropdown-arrow-light Dropdown arrow color when dark mode is off, on hover
"},{"location":"components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-hover-dark","title":"--mbx-dropdown-arrow-hover-dark","text":"Fallback Default --mbx-dropdown-arrow-hover --mbx-dropdown-arrow-dark Dropdown arrow color when dark mode is on, on hover
"},{"location":"components/molecules/Dropdown/props/","title":"Dropdown properties","text":""},{"location":"components/molecules/Dropdown/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Dropdown/props/#props-table","title":"Props table","text":"Parameter Type Default value number / elements (JSX.Element | string)[] [] hideArrow boolean false onChange (newValue: number) => void () => {}"},{"location":"components/molecules/Dropdown/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Dropdown/props/#value","title":"value","text":"Type Default number / actual selected element (as index). If not set, default value will be used.
"},{"location":"components/molecules/Dropdown/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] [] Dropdown content elements
"},{"location":"components/molecules/Dropdown/props/#hidearrow","title":"hideArrow","text":"Type Default boolean false If true, hide the arrow icon near selected element
"},{"location":"components/molecules/Dropdown/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when selecting new element from dropdown
"},{"location":"components/molecules/ExpandableContainer/","title":"ExpandableContainer page","text":"An exapandable container, to hide/show some content on demand.
"},{"location":"components/molecules/ExpandableContainer/css-vars/","title":"ExpandableContainer CSS variables","text":""},{"location":"components/molecules/ExpandableContainer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/ExpandableContainer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-expandablecontainer-background / / --mbx-expandablecontainer-background-light --mbx-expandablecontainer-background mbx-container-background-light --mbx-expandablecontainer-background-dark --mbx-expandablecontainer-background mbx-container-background-dark --mbx-expandablecontainer-text-color / / --mbx-expandablecontainer-text-color-light --mbx-expandablecontainer-text-color mbx-container-text-color-light --mbx-expandablecontainer-text-color-dark --mbx-expandablecontainer-text-color mbx-container-text-color-dark --mbx-expandablecontainer-arrow / / --mbx-expandablecontainer-arrow-light --mbx-expandablecontainer-arrow --mbx-expandablecontainer-text-color-light --mbx-expandablecontainer-arrow-dark --mbx-expandablecontainer-arrow --mbx-expandablecontainer-text-color-dark --mbx-expandablecontainer-arrow-hover / / --mbx-expandablecontainer-arrow-hover-light --mbx-expandablecontainer-arrow-hover --mbx-expandablecontainer-arrow-lrrowight --mbx-expandablecontainer-arrow-hover-dark --mbx-expandablecontainer-arrow-hover --mbx-expandablecontainer-a-color-dark"},{"location":"components/molecules/ExpandableContainer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background","title":"--mbx-expandablecontainer-background","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-background-light and --mbx-expandablecontainer-background-dark
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background-light","title":"--mbx-expandablecontainer-background-light","text":"Fallback Default --mbx-expandablecontainer-background mbx-container-background-light ExpandableContainer background when dark mode is off
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background-dark","title":"--mbx-expandablecontainer-background-dark","text":"Fallback Default --mbx-expandablecontainer-background mbx-container-background-dark ExpandableContainer background when dark mode is on
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color","title":"--mbx-expandablecontainer-text-color","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-text-color-light and --mbx-expandablecontainer-text-color-dark
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color-light","title":"--mbx-expandablecontainer-text-color-light","text":"Fallback Default --mbx-expandablecontainer-text-color mbx-container-text-color-light ExpandableContainer text color when dark mode is off
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color-dark","title":"--mbx-expandablecontainer-text-color-dark","text":"Fallback Default --mbx-expandablecontainer-text-color mbx-container-text-color-dark ExpandableContainer text color when dark mode is on
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow","title":"--mbx-expandablecontainer-arrow","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-arrow-light and --mbx-expandablecontainer-arrow-dark
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-light","title":"--mbx-expandablecontainer-arrow-light","text":"Fallback Default --mbx-expandablecontainer-arrow --mbx-expandablecontainer-text-color-light ExpandableContainer arrow color when dark mode is off
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-dark","title":"--mbx-expandablecontainer-arrow-dark","text":"Fallback Default --mbx-expandablecontainer-arrow --mbx-expandablecontainer-text-color-dark ExpandableContainer arrow color when dark mode is on
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-hover","title":"--mbx-expandablecontainer-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-arrow-hover-light and --mbx-expandablecontainer-arrow-hover-dark
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-hover-light","title":"--mbx-expandablecontainer-arrow-hover-light","text":"Fallback Default --mbx-expandablecontainer-arrow-hover --mbx-expandablecontainer-arrow-lrrowight ExpandableContainer arrow color when dark mode is off, on hover
"},{"location":"components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-hover-dark","title":"--mbx-expandablecontainer-arrow-hover-dark","text":"Fallback Default --mbx-expandablecontainer-arrow-hover --mbx-expandablecontainer-a-color-dark ExpandableContainer arrow color when dark mode is on, on hover
"},{"location":"components/molecules/ExpandableContainer/props/","title":"ExpandableContainer properties","text":""},{"location":"components/molecules/ExpandableContainer/props/#summary","title":"Summary","text":""},{"location":"components/molecules/ExpandableContainer/props/#props-table","title":"Props table","text":"Parameter Type Default children any / wrapper div | header | footer div expanded boolean / compact boolean / onChange (newValue: boolean) => void () => {}"},{"location":"components/molecules/ExpandableContainer/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/ExpandableContainer/props/#children","title":"children","text":"Type Default any / content to render inside Container - extended from Container component
"},{"location":"components/molecules/ExpandableContainer/props/#wrapper","title":"wrapper","text":"Type Default div | header | footer div component wrapper type - extended from Container component
"},{"location":"components/molecules/ExpandableContainer/props/#expanded","title":"expanded","text":"Type Default boolean / Extra content showed only when container is expanded (compact === true)
"},{"location":"components/molecules/ExpandableContainer/props/#compact","title":"compact","text":"Type Default boolean / if true, shows the whole container content
"},{"location":"components/molecules/ExpandableContainer/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when ExpandableContainer component input value is changed by the user
"},{"location":"components/molecules/FormField/","title":"FormField page","text":"A single form field. Depending on its type, a different input component is used inside
"},{"location":"components/molecules/FormField/css-vars/","title":"FormField CSS variables","text":""},{"location":"components/molecules/FormField/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/FormField/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-formfield-background / / --mbx-formfield-background-dark --mbx-formfield-background --mbx-background-dark --mbx-formfield-background-light --mbx-formfield-background --mbx-background-light --mbx-formfield-text-color / / --mbx-formfield-text-color-light --mbx-formfield-text-color --mbx-text-color-light --mbx-formfield-text-color-dark --mbx-formfield-text-color --mbx-text-color-dark --mbx-formfield-background-hover / / --mbx-formfield-background-hover-light --mbx-formfield-background-hover --mbx-background-hover-light --mbx-formfield-background-hover-dark --mbx-formfield-background-hover --mbx-background-hover-light --mbx-formfield-text-color-hover / / --mbx-formfield-text-color-hover-light --mbx-formfield-text-color-hover --mbx-text-color-hover-light --mbx-formfield-text-color-hover-dark --mbx-formfield-text-color-hover --mbx-text-color-hover-dark --mbx-formfield-error-border / / --mbx-formfield-error-border-light --mbx-formfield-error-border red --mbx-formfield-error-border-dark --mbx-formfield-error-border red --mbx-formfield-error-text / / --mbx-formfield-error-text-light --mbx-formfield-error-text red --mbx-formfield-error-text-dark --mbx-formfield-error-text red"},{"location":"components/molecules/FormField/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background","title":"--mbx-formfield-background","text":"Fallback Default / / Fallback value for --mbx-formfield-background-light and --mbx-formfield-background-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-dark","title":"--mbx-formfield-background-dark","text":"Fallback Default --mbx-formfield-background --mbx-background-dark FormField background when dark mode is off
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-light","title":"--mbx-formfield-background-light","text":"Fallback Default --mbx-formfield-background --mbx-background-light FormField background when dark mode is on
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color","title":"--mbx-formfield-text-color","text":"Fallback Default / / Fallback value for --mbx-formfield-text-color-light and --mbx-formfield-text-color-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-light","title":"--mbx-formfield-text-color-light","text":"Fallback Default --mbx-formfield-text-color --mbx-text-color-light FormField text color when dark mode is off
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-dark","title":"--mbx-formfield-text-color-dark","text":"Fallback Default --mbx-formfield-text-color --mbx-text-color-dark FormField text color when dark mode is on
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-hover","title":"--mbx-formfield-background-hover","text":"Fallback Default / / Fallback value for --mbx-formfield-background-hover-light and --mbx-formfield-background-hover-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-hover-light","title":"--mbx-formfield-background-hover-light","text":"Fallback Default --mbx-formfield-background-hover --mbx-background-hover-light FormField background when dark mode is off, on hover
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-background-hover-dark","title":"--mbx-formfield-background-hover-dark","text":"Fallback Default --mbx-formfield-background-hover --mbx-background-hover-light FormField background when dark mode is on, on hover
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover","title":"--mbx-formfield-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-formfield-text-color-hover-light and --mbx-formfield-text-color-hover-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover-light","title":"--mbx-formfield-text-color-hover-light","text":"Fallback Default --mbx-formfield-text-color-hover --mbx-text-color-hover-light FormField text color when dark mode is off, on hover
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover-dark","title":"--mbx-formfield-text-color-hover-dark","text":"Fallback Default --mbx-formfield-text-color-hover --mbx-text-color-hover-dark FormField text color when dark mode is on, on hover
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-border","title":"--mbx-formfield-error-border","text":"Fallback Default / / Fallback value for --mbx-formfield-error-border-light and --mbx-formfield-error-border-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-border-light","title":"--mbx-formfield-error-border-light","text":"Fallback Default --mbx-formfield-error-border red FormField error box border color when dark mode is off
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-border-dark","title":"--mbx-formfield-error-border-dark","text":"Fallback Default --mbx-formfield-error-border red FormField error box border color when dark mode is on
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-text","title":"--mbx-formfield-error-text","text":"Fallback Default / / Fallback value for --mbx-formfield-error-text-light and --mbx-formfield-error-text-dark
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-text-light","title":"--mbx-formfield-error-text-light","text":"Fallback Default --mbx-formfield-error-text red FormField error box text color when dark mode is off
"},{"location":"components/molecules/FormField/css-vars/#-mbx-formfield-error-text-dark","title":"--mbx-formfield-error-text-dark","text":"Fallback Default --mbx-formfield-error-text red FormField error box text color when dark mode is on
"},{"location":"components/molecules/FormField/props/","title":"FormField properties","text":""},{"location":"components/molecules/FormField/props/#summary","title":"Summary","text":""},{"location":"components/molecules/FormField/props/#props-table","title":"Props table","text":"Parameter Type Default value / / type boolean | text | numeric | radio | checkbox | toggle | rater | slider | input | counter | password 'text' placeholder string / required boolean / validate (fieldValue: any) => boolean () => \u02da{} header JSX.Element | string / headerClassName string / headerProps Record / errorLabel JSX.Element | string /"},{"location":"components/molecules/FormField/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/FormField/props/#value","title":"value","text":"Type Default / / FormField input content
"},{"location":"components/molecules/FormField/props/#type","title":"type","text":"Type Default boolean | text | numeric | radio | checkbox | toggle | rater | slider | input | counter | password 'text' The field type. It determines the UI component to be used to render it. Allowed types are:
boolean (rendered as a CheckBox)numeric (rendered as a Counter)text (rendered as a Input)radio (rendered as a RadioButton)checkbox (rendered as a CheckBox)toggle (rendered as a Toggle)rater (rendered as a Rater)slider (rendered as a Slider)input (rendered as a Input)counter (rendered as a Counter)password (rendered as a Password)
"},{"location":"components/molecules/FormField/props/#placeholder","title":"placeholder","text":"Type Default string /"},{"location":"components/molecules/FormField/props/#required","title":"required","text":"Type Default boolean / If true, the field switch to error state if its value is empty
"},{"location":"components/molecules/FormField/props/#validate","title":"validate","text":"Type Default (fieldValue: any) => boolean () => \u02da{} Custom validation function called on submit
"},{"location":"components/molecules/FormField/props/#header","title":"header","text":"Type Default JSX.Element | string / Form field header
"},{"location":"components/molecules/FormField/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on every header element
"},{"location":"components/molecules/FormField/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on every header element (including MoBrix-ui shared props)
"},{"location":"components/molecules/FormField/props/#errorlabel","title":"errorLabel","text":"Type Default JSX.Element | string / Custom error box content, displayed when FormField is in error state
"},{"location":"components/molecules/List/","title":"List page","text":"A custom bullet list, that support any type of elements
"},{"location":"components/molecules/List/css-vars/","title":"List CSS variables","text":""},{"location":"components/molecules/List/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/List/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-list-text-color / / --mbx-list-text-color-light --mbx-list-text-color --mbx-text-color-light --mbx-list-text-color-dark --mbx-list-text-color --mbx-text-color-dark --mbx-list-text-color-hover / / --mbx-list-text-color-hover-light --mbx-list-text-color-hover --mbx-text-color-hover-light --mbx-list-text-color-hover-dark --mbx-list-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/molecules/List/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color","title":"--mbx-list-text-color","text":"Fallback Default / / Fallback value for --mbx-list-text-color-light and --mbx-list-text-color-dark
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-light","title":"--mbx-list-text-color-light","text":"Fallback Default --mbx-list-text-color --mbx-text-color-light List element text color when dark is off
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-dark","title":"--mbx-list-text-color-dark","text":"Fallback Default --mbx-list-text-color --mbx-text-color-dark List element text color when dark is on
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-hover","title":"--mbx-list-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-list-text-color-hover-light and --mbx-list-text-color-hover-dark
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-hover-light","title":"--mbx-list-text-color-hover-light","text":"Fallback Default --mbx-list-text-color-hover --mbx-text-color-hover-light List element text color when dark is off, on hover
"},{"location":"components/molecules/List/css-vars/#-mbx-list-text-color-hover-dark","title":"--mbx-list-text-color-hover-dark","text":"Fallback Default --mbx-list-text-color-hover --mbx-text-color-hover-dark List element text color when dark is on, on hover
"},{"location":"components/molecules/List/props/","title":"List properties","text":""},{"location":"components/molecules/List/props/#summary","title":"Summary","text":""},{"location":"components/molecules/List/props/#props-table","title":"Props table","text":"Parameter Type Default elements (JSX.Element | string)[] / onClick () => void () => {}"},{"location":"components/molecules/List/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/List/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] / List elements
"},{"location":"components/molecules/List/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when a list element is clicked
"},{"location":"components/molecules/Modal/","title":"Modal page","text":"A Modal component, with an optional close button
"},{"location":"components/molecules/Modal/css-vars/","title":"Modal CSS variables","text":""},{"location":"components/molecules/Modal/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Modal/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-modal-background / / --mbx-modal-background-light --mbx-modal-background rgba(0, 0, 0, 0.8) --mbx-modal-background-dark --mbx-modal-background rgba(0, 0, 0, 0.8) --mbx-modal-x-color / / --mbx-modal-x-color-light --mbx-modal-x-color white --mbx-modal-x-color-dark --mbx-modal-x-color white --mbx-modal-x-color-hover / / --mbx-modal-x-color-hover-light --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-light --mbx-modal-x-color-hover-dark --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-dark"},{"location":"components/molecules/Modal/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-background","title":"--mbx-modal-background","text":"Fallback Default / / Fallback value for --mbx-modal-background-light and --mbx-modal-background-dark
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-background-light","title":"--mbx-modal-background-light","text":"Fallback Default --mbx-modal-background rgba(0, 0, 0, 0.8) Modal background when dark mode is off
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-background-dark","title":"--mbx-modal-background-dark","text":"Fallback Default --mbx-modal-background rgba(0, 0, 0, 0.8) Modal background when dark mode is on
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color","title":"--mbx-modal-x-color","text":"Fallback Default / / Fallback value for --mbx-modal-x-color-light and --mbx-modal-x-color-dark
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-light","title":"--mbx-modal-x-color-light","text":"Fallback Default --mbx-modal-x-color white Modal x icon color when dark mode is off
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-dark","title":"--mbx-modal-x-color-dark","text":"Fallback Default --mbx-modal-x-color white Modal x icon color when dark mode is on
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover","title":"--mbx-modal-x-color-hover","text":"Fallback Default / / Fallback value for --mbx-modal-x-color-hover-light and --mbx-modal-x-color-hover-dark
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover-light","title":"--mbx-modal-x-color-hover-light","text":"Fallback Default --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-light Modal x icon color when dark mode is off, on hover
"},{"location":"components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover-dark","title":"--mbx-modal-x-color-hover-dark","text":"Fallback Default --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-dark Modal x icon color when dark mode is on, on hover
"},{"location":"components/molecules/Modal/props/","title":"Modal properties","text":""},{"location":"components/molecules/Modal/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Modal/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} children JSX.Element | string /"},{"location":"components/molecules/Modal/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Modal/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Modal is closed
"},{"location":"components/molecules/Modal/props/#children","title":"children","text":"Type Default JSX.Element | string / Modal content
"},{"location":"components/molecules/Popup/","title":"Popup page","text":"A Popup container, displayed upon every other component, overlayed
"},{"location":"components/molecules/Popup/css-vars/","title":"Popup CSS variables","text":""},{"location":"components/molecules/Popup/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Popup/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-popup-background / / --mbx-popup-background-light --mbx-popup-background --mbx-background-light --mbx-popup-background-dark --mbx-popup-background --mbx-background-dark --mbx-popup-text-color / / --mbx-popup-text-color-light --mbx-popup-text-color --mbx-text-color-light --mbx-popup-text-color-dark --mbx-popup-text-color --mbx-text-color-dark"},{"location":"components/molecules/Popup/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-background","title":"--mbx-popup-background","text":"Fallback Default / / Fallback value for --mbx-popup-background-light and --mbx-popup-background-dark
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-background-light","title":"--mbx-popup-background-light","text":"Fallback Default --mbx-popup-background --mbx-background-light Popup background when dark mode is off
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-background-dark","title":"--mbx-popup-background-dark","text":"Fallback Default --mbx-popup-background --mbx-background-dark Popup background when dark mode is on
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-text-color","title":"--mbx-popup-text-color","text":"Fallback Default / / Fallback value for and
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-text-color-light","title":"--mbx-popup-text-color-light","text":"Fallback Default --mbx-popup-text-color --mbx-text-color-light Popup text color when dark mode is off
"},{"location":"components/molecules/Popup/css-vars/#-mbx-popup-text-color-dark","title":"--mbx-popup-text-color-dark","text":"Fallback Default --mbx-popup-text-color --mbx-text-color-dark Popup text color when dark mode is on
"},{"location":"components/molecules/Popup/props/","title":"Popup properties","text":""},{"location":"components/molecules/Popup/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Popup/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} children JSX.Element | string /"},{"location":"components/molecules/Popup/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Popup/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Popup is closed
"},{"location":"components/molecules/Popup/props/#children","title":"children","text":"Type Default JSX.Element | string / Popup content
"},{"location":"components/molecules/RadioButtonGroup/","title":"RadioButtonGroup page","text":"A flexible and fully customizable radio buttons group
"},{"location":"components/molecules/RadioButtonGroup/css-vars/","title":"RadioButtonGroup CSS variables","text":""},{"location":"components/molecules/RadioButtonGroup/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-radiogroup-background / / --mbx-radiogroup-background-light --mbx-radiogroup-background --mbx-background-light --mbx-radiogroup-background-dark --mbx-radiogroup-background --mbx-background-dark --mbx-radiogroup-text-color / / --mbx-radiogroup-text-color-light --mbx-radiogroup-text-color --mbx-text-color-light --mbx-radiogroup-text-color-dark --mbx-radiogroup-text-color --mbx-text-color-dark --mbx-radiogroup-radio-background / / --mbx-radiogroup-radio-background-light --mbx-radiogroup-radio-background --mbx-radio-background-light --mbx-radiogroup-radio-background-dark --mbx-radiogroup-radio-background --mbx-radio-background-dark --mbx-radiogroup-radio-background-hover / / --mbx-radiogroup-radio-background-hover-light --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-light --mbx-radiogroup-radio-background-hover-dark --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-dark --mbx-radiogroup-radio-icon-background / / --mbx-radiogroup-radio-icon-background-light --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-light --mbx-radiogroup-radio-icon-background-dark --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-dark"},{"location":"components/molecules/RadioButtonGroup/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background","title":"--mbx-radiogroup-background","text":"Fallback Default / / Fallback value for --mbx-radiogroup-background-light and --mbx-radiogroup-background-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background-light","title":"--mbx-radiogroup-background-light","text":"Fallback Default --mbx-radiogroup-background --mbx-background-light RadioGroup background when dark mode is off
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background-dark","title":"--mbx-radiogroup-background-dark","text":"Fallback Default --mbx-radiogroup-background --mbx-background-dark RadioGroup background when dark mode is on
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color","title":"--mbx-radiogroup-text-color","text":"Fallback Default / / Fallback value for --mbx-radiogroup-text-color-light and --mbx-radiogroup-text-color-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color-light","title":"--mbx-radiogroup-text-color-light","text":"Fallback Default --mbx-radiogroup-text-color --mbx-text-color-light RadioGroup text color when dark mode is off
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color-dark","title":"--mbx-radiogroup-text-color-dark","text":"Fallback Default --mbx-radiogroup-text-color --mbx-text-color-dark RadioGroup text color when dark mode is on
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background","title":"--mbx-radiogroup-radio-background","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-background-light and mbx-radiogroup-radio-background-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-light","title":"--mbx-radiogroup-radio-background-light","text":"Fallback Default --mbx-radiogroup-radio-background --mbx-radio-background-light Internal RadioButton background when dark mode is off
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-dark","title":"--mbx-radiogroup-radio-background-dark","text":"Fallback Default --mbx-radiogroup-radio-background --mbx-radio-background-dark Internal RadioButton background when dark mode is on
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover","title":"--mbx-radiogroup-radio-background-hover","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-background-hover-light and mbx-radiogroup-radio-background-hover-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover-light","title":"--mbx-radiogroup-radio-background-hover-light","text":"Fallback Default --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-light Internal RadioButton background when dark mode is off, on hover
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover-dark","title":"--mbx-radiogroup-radio-background-hover-dark","text":"Fallback Default --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-dark Internal RadioButton background when dark mode is on, on hover
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background","title":"--mbx-radiogroup-radio-icon-background","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-icon-background-light and mbx-radiogroup-radio-icon-background-dark
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background-light","title":"--mbx-radiogroup-radio-icon-background-light","text":"Fallback Default --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-light Internal RadioButton icon background when dark mode is off
"},{"location":"components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background-dark","title":"--mbx-radiogroup-radio-icon-background-dark","text":"Fallback Default --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-dark Internal RadioButton icon background when dark mode is on
"},{"location":"components/molecules/RadioButtonGroup/props/","title":"RadioButtonGroup properties","text":""},{"location":"components/molecules/RadioButtonGroup/props/#summary","title":"Summary","text":""},{"location":"components/molecules/RadioButtonGroup/props/#props-table","title":"Props table","text":"Parameter Type Default value number / buttons { component: JSX.Element, text: string, textPosition: top | bottom | left | right }[] / elementClassName string / radioProps RadioButtonProps / defaultPosition top | bottom | left | right left horizontal boolean false onChange (newValue: number) => void () => {}"},{"location":"components/molecules/RadioButtonGroup/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/RadioButtonGroup/props/#value","title":"value","text":"Type Default number / Selected RadioButton (as index)
"},{"location":"components/molecules/RadioButtonGroup/props/#buttons","title":"buttons","text":"Type Default { component: JSX.Element, text: string, textPosition: top | bottom | left | right }[] / Radio elements array. Every element UI can be driven with attributes. A radio element can contain 3 fields:
- -
component: custom component rendered before radio button - -
text: custom radio text showed near the radio button - -
textPosition: custom text position "},{"location":"components/molecules/RadioButtonGroup/props/#elementclassname","title":"elementClassName","text":"Type Default string / Classname applied on every radio element
"},{"location":"components/molecules/RadioButtonGroup/props/#radioprops","title":"radioProps","text":"Type Default RadioButtonProps / RadioButton props applied on every RadioButton element
"},{"location":"components/molecules/RadioButtonGroup/props/#defaultposition","title":"defaultPosition","text":"Type Default top | bottom | left | right left Default text position for RadioButton elements (when textPosition is not provided)
"},{"location":"components/molecules/RadioButtonGroup/props/#horizontal","title":"horizontal","text":"Type Default boolean false If true, the RadioButton elements are displayed horizontally
"},{"location":"components/molecules/RadioButtonGroup/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when a RadioButton is clicked by the user, giving its index as parameter
"},{"location":"components/molecules/Review/","title":"Review page","text":"A smart review container, useful to show reviews on your web app with custom data inside. Optionally, an external link can be set to redirect user to the platform where the review is located
"},{"location":"components/molecules/Review/css-vars/","title":"Review CSS variables","text":""},{"location":"components/molecules/Review/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Review/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-review-background / / --mbx-review-background-light --mbx-review-background --mbx-background-light --mbx-review-background-dark --mbx-review-background --mbx-background-dark --mbx-review-text-color / / --mbx-review-text-color-light --mbx-review-text-color --mbx-text-color-light --mbx-review-text-color-dark --mbx-review-text-color --mbx-text-color-dark --mbx-review-icon / / --mbx-review-icon-light --mbx-review-icon #615f5f --mbx-review-icon-dark --mbx-review-icon white"},{"location":"components/molecules/Review/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Review/css-vars/#-mbx-review-background","title":"--mbx-review-background","text":"Fallback Default / / Fallback value for --mbx-review-background-light and --mbx-review-background-dark
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-background-light","title":"--mbx-review-background-light","text":"Fallback Default --mbx-review-background --mbx-background-light Review background when dark mode is off
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-background-dark","title":"--mbx-review-background-dark","text":"Fallback Default --mbx-review-background --mbx-background-dark Review background when dark mode is on
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-text-color","title":"--mbx-review-text-color","text":"Fallback Default / / Fallback value for --mbx-review-text-color-light and --mbx-review-text-color-dark
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-text-color-light","title":"--mbx-review-text-color-light","text":"Fallback Default --mbx-review-text-color --mbx-text-color-light Review text color when dark mode is off
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-text-color-dark","title":"--mbx-review-text-color-dark","text":"Fallback Default --mbx-review-text-color --mbx-text-color-dark Review text color when dark mode is on
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-icon","title":"--mbx-review-icon","text":"Fallback Default / / Fallback value for --mbx-review-github-color-light and --mbx-review-github-color-dark
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-icon-light","title":"--mbx-review-icon-light","text":"Fallback Default --mbx-review-icon #615f5f Review icon icon color when dark mode is on
"},{"location":"components/molecules/Review/css-vars/#-mbx-review-icon-dark","title":"--mbx-review-icon-dark","text":"Fallback Default --mbx-review-icon white Review icon icon color when dark mode is off
"},{"location":"components/molecules/Review/props/","title":"Review properties","text":""},{"location":"components/molecules/Review/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Review/props/#props-table","title":"Props table","text":"Parameter Type Default user string / description string / icon JSX.Element / url string / logo JSX.Element | string / max number 5 vertical boolean false rate number 0 rateType star|circle 'star'"},{"location":"components/molecules/Review/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Review/props/#user","title":"user","text":"Type Default string / Username displayed above the review description, at the right of the icon
"},{"location":"components/molecules/Review/props/#description","title":"description","text":"Type Default string / Review description displayed below the review username, at the top of the rate
"},{"location":"components/molecules/Review/props/#icon","title":"icon","text":"Type Default JSX.Element / Icon displayed inside the component
"},{"location":"components/molecules/Review/props/#url","title":"url","text":"Type Default string / Review external url. If set, an icon will be displayed at the top right of the review
"},{"location":"components/molecules/Review/props/#logo","title":"logo","text":"Type Default JSX.Element | string / Top icon, displayed at the top right of the container. If not provided, a default icon is displayed (if an url is provided too)
"},{"location":"components/molecules/Review/props/#max","title":"max","text":"Type Default number 5 max vote (max number of icons displayed) - extended from Rater component
"},{"location":"components/molecules/Review/props/#vertical","title":"vertical","text":"Type Default boolean false if true, rate icons will be displayed vertically - extended from Rater component
"},{"location":"components/molecules/Review/props/#rate","title":"rate","text":"Type Default number 0 actual vote - extended from Rater component
"},{"location":"components/molecules/Review/props/#ratetype","title":"rateType","text":"Type Default star|circle 'star' vote icons type - extended from Rater component
"},{"location":"components/molecules/TabViewer/","title":"TabViewer page","text":"A Tab viewer component, to organize elements with tabs and show them on demand
"},{"location":"components/molecules/TabViewer/css-vars/","title":"TabViewer CSS variables","text":""},{"location":"components/molecules/TabViewer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/TabViewer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-tabviewer-background / / --mbx-tabviewer-background-light --mbx-tabviewer-background linear-gradient(to right, #cccccc, #c7c7c7) --mbx-tabviewer-background-dark --mbx-tabviewer-background linear-gradient(to right, #2d3748, #1d232e) --mbx-tabviewer-text-color / / --mbx-tabviewer-text-color-light --mbx-tabviewer-text-color --mbx-text-color-light --mbx-tabviewer-text-color-dark --mbx-tabviewer-text-color --mbx-text-color-dark --mbx-tabviewer-inactive-background / / --mbx-tabviewer-inactive-background-light --mbx-tabviewer-inactive-background linear-gradient(to right, #a1a0a0, #797979) --mbx-tabviewer-inactive-background-dark --mbx-tabviewer-inactive-background linear-gradient(to right, #3e4b63, #3f4858) --mbx-tabviewer-inactive-text-color / / --mbx-tabviewer-inactive-text-color-light --mbx-tabviewer-inactive-text-color #c2c2c2 --mbx-tabviewer-inactive-text-color-dark --mbx-tabviewer-inactive-text-color #c2c2c2 --mbx-tabviewer-inactive-background-hover / / --mbx-tabviewer-inactive-background-hover-light --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #b6b4b4, #999797) --mbx-tabviewer-inactive-background-hover-dark --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #566888, #3c465a) --mbx-tabviewer-inactive-text-color-hover / / --mbx-tabviewer-inactive-text-color-hover-light --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-light --mbx-tabviewer-inactive-text-color-hover-dark --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-dark"},{"location":"components/molecules/TabViewer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background","title":"--mbx-tabviewer-background","text":"Fallback Default / / Fallback value for --mbx-tabviewer-background-light and --mbx-tabviewer-background-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background-light","title":"--mbx-tabviewer-background-light","text":"Fallback Default --mbx-tabviewer-background linear-gradient(to right, #cccccc, #c7c7c7) TabViewer background when dark mode is `off'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background-dark","title":"--mbx-tabviewer-background-dark","text":"Fallback Default --mbx-tabviewer-background linear-gradient(to right, #2d3748, #1d232e) TabViewer background when dark mode is `on'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color","title":"--mbx-tabviewer-text-color","text":"Fallback Default / / Fallback value for --mbx-tabviewer-text-color-light and --mbx-tabviewer-text-color-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color-light","title":"--mbx-tabviewer-text-color-light","text":"Fallback Default --mbx-tabviewer-text-color --mbx-text-color-light TabViewer text color when dark mode is `off'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color-dark","title":"--mbx-tabviewer-text-color-dark","text":"Fallback Default --mbx-tabviewer-text-color --mbx-text-color-dark TabViewer text color when dark mode is `on'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background","title":"--mbx-tabviewer-inactive-background","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-background-light and --mbx-tabviewer-inactive-background-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-light","title":"--mbx-tabviewer-inactive-background-light","text":"Fallback Default --mbx-tabviewer-inactive-background linear-gradient(to right, #a1a0a0, #797979) TabViewer inactive tab background when dark mode is `off'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-dark","title":"--mbx-tabviewer-inactive-background-dark","text":"Fallback Default --mbx-tabviewer-inactive-background linear-gradient(to right, #3e4b63, #3f4858) TabViewer inactive tab background when dark mode is `on'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color","title":"--mbx-tabviewer-inactive-text-color","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-text-color-light and --mbx-tabviewer-inactive-text-color-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-light","title":"--mbx-tabviewer-inactive-text-color-light","text":"Fallback Default --mbx-tabviewer-inactive-text-color #c2c2c2 TabViewer inactive tab text color when dark mode is `off'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-dark","title":"--mbx-tabviewer-inactive-text-color-dark","text":"Fallback Default --mbx-tabviewer-inactive-text-color #c2c2c2 TabViewer inactive tab text color when dark mode is `on'
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover","title":"--mbx-tabviewer-inactive-background-hover","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-background-hover-light and --mbx-tabviewer-inactive-background-hover-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover-light","title":"--mbx-tabviewer-inactive-background-hover-light","text":"Fallback Default --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #b6b4b4, #999797) TabViewer inactive tab background when dark mode is `off', on hover
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover-dark","title":"--mbx-tabviewer-inactive-background-hover-dark","text":"Fallback Default --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #566888, #3c465a) TabViewer inactive tab background when dark mode is `on', on hover
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover","title":"--mbx-tabviewer-inactive-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-text-color-hover-light and --mbx-tabviewer-inactive-text-color-hover-dark
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover-light","title":"--mbx-tabviewer-inactive-text-color-hover-light","text":"Fallback Default --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-light TabViewer inactive tab text color when dark mode is `off', on hover
"},{"location":"components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover-dark","title":"--mbx-tabviewer-inactive-text-color-hover-dark","text":"Fallback Default --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-dark TabViewer inactive tab text color when dark mode is `on', on hover
"},{"location":"components/molecules/TabViewer/props/","title":"TabViewer properties","text":""},{"location":"components/molecules/TabViewer/props/#summary","title":"Summary","text":""},{"location":"components/molecules/TabViewer/props/#props-table","title":"Props table","text":"Parameter Type Default selected / / tabs {label: string; content: JSX.Element;}[] / tabProps Record / tabSelectedProps Record / tabUnselectedProps Record / tabViewProps Record / tabClassName Record / tabSelectedClassName Record / tabUnselectedClassName Record / tabViewClassName Record / onChange (newValue: number) => void () => {}"},{"location":"components/molecules/TabViewer/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/TabViewer/props/#selected","title":"selected","text":"Type Default / /"},{"location":"components/molecules/TabViewer/props/#tabs","title":"tabs","text":"Type Default {label: string; content: JSX.Element;}[] / tabs array. Every tab object contains 3 fields:
label: tab label displayed on topcontent: tab content element
"},{"location":"components/molecules/TabViewer/props/#tabprops","title":"tabProps","text":"Type Default Record / Custom props applied on every tab
"},{"location":"components/molecules/TabViewer/props/#tabselectedprops","title":"tabSelectedProps","text":"Type Default Record / Custom props applied on every selected tab
"},{"location":"components/molecules/TabViewer/props/#tabunselectedprops","title":"tabUnselectedProps","text":"Type Default Record / Custom props applied on every unselected tab
"},{"location":"components/molecules/TabViewer/props/#tabviewprops","title":"tabViewProps","text":"Type Default Record / Custom props applied on the tab view panel
"},{"location":"components/molecules/TabViewer/props/#tabclassname","title":"tabClassName","text":"Type Default Record / Custom props applied on every tab
"},{"location":"components/molecules/TabViewer/props/#tabselectedclassname","title":"tabSelectedClassName","text":"Type Default Record / Custom props applied on every selected tab
"},{"location":"components/molecules/TabViewer/props/#tabunselectedclassname","title":"tabUnselectedClassName","text":"Type Default Record / Custom props applied on every unselected tab
"},{"location":"components/molecules/TabViewer/props/#tabviewclassname","title":"tabViewClassName","text":"Type Default Record / Custom props applied on the tab view panel
"},{"location":"components/molecules/TabViewer/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when a tab is selected, giving its index as parameter
"},{"location":"components/molecules/Table/","title":"Table page","text":"A re-invented Table component. It follows a CSV-like format for its content.
"},{"location":"components/molecules/Table/css-vars/","title":"Table CSS variables","text":""},{"location":"components/molecules/Table/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/molecules/Table/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-table-background / / --mbx-table-background-light --mbx-table-background --mbx-background-light --mbx-table-background-dark --mbx-table-background --mbx-background-dark --mbx-table-text-color / / --mbx-table-text-color-light --mbx-table-text-color --mbx-text-color-light --mbx-table-text-color-dark --mbx-table-text-color --mbx-text-color-dark --mbx-table-header-background / / --mbx-table-header-background-light --mbx-table-header-background linear-gradient(to right, #354155, #2b3546) --mbx-table-header-background-dark --mbx-table-header-background linear-gradient(to right, #4b5b77, #3e4c64) --mbx-table-header-text-color / / --mbx-table-header-text-color-light --mbx-table-header-text-color whitesmoke --mbx-table-header-text-color-dark --mbx-table-header-text-color rgb(255, 255, 255) --mbx-table-border-color / / --mbx-table-border-color-light --mbx-table-border-color darkslategrey --mbx-table-border-color-dark --mbx-table-border-color rgb(219, 219, 219)"},{"location":"components/molecules/Table/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/molecules/Table/css-vars/#-mbx-table-background","title":"--mbx-table-background","text":"Fallback Default / / Fallback value for --mbx-table-background-light and --mbx-table-background-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-background-light","title":"--mbx-table-background-light","text":"Fallback Default --mbx-table-background --mbx-background-light Table background when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-background-dark","title":"--mbx-table-background-dark","text":"Fallback Default --mbx-table-background --mbx-background-dark Table background when dark mode is `on'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-text-color","title":"--mbx-table-text-color","text":"Fallback Default / / Fallback value for --mbx-table-text-color-light and --mbx-table-text-color-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-text-color-light","title":"--mbx-table-text-color-light","text":"Fallback Default --mbx-table-text-color --mbx-text-color-light Table text color when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-text-color-dark","title":"--mbx-table-text-color-dark","text":"Fallback Default --mbx-table-text-color --mbx-text-color-dark Table text color when dark mode is `on'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-background","title":"--mbx-table-header-background","text":"Fallback Default / / Fallback value for --mbx-table-header-background-light and --mbx-table-header-background-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-background-light","title":"--mbx-table-header-background-light","text":"Fallback Default --mbx-table-header-background linear-gradient(to right, #354155, #2b3546) Table header background when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-background-dark","title":"--mbx-table-header-background-dark","text":"Fallback Default --mbx-table-header-background linear-gradient(to right, #4b5b77, #3e4c64) Table header background when dark mode is `on'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-text-color","title":"--mbx-table-header-text-color","text":"Fallback Default / / Fallback value for --mbx-table-header-text-color-light and --mbx-table-header-text-color-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-text-color-light","title":"--mbx-table-header-text-color-light","text":"Fallback Default --mbx-table-header-text-color whitesmoke Table header text color when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-header-text-color-dark","title":"--mbx-table-header-text-color-dark","text":"Fallback Default --mbx-table-header-text-color rgb(255, 255, 255) Table header text color when dark mode is `on'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-border-color","title":"--mbx-table-border-color","text":"Fallback Default / / Fallback value for --mbx-table-border-color-light and --mbx-table-border-color-dark
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-border-color-light","title":"--mbx-table-border-color-light","text":"Fallback Default --mbx-table-border-color darkslategrey Table border color when dark mode is `off'
"},{"location":"components/molecules/Table/css-vars/#-mbx-table-border-color-dark","title":"--mbx-table-border-color-dark","text":"Fallback Default --mbx-table-border-color rgb(219, 219, 219) Table border color when dark mode is `on'
"},{"location":"components/molecules/Table/props/","title":"Table properties","text":""},{"location":"components/molecules/Table/props/#summary","title":"Summary","text":""},{"location":"components/molecules/Table/props/#props-table","title":"Props table","text":"Parameter Type Default headers boolean / rows (JSX.Element | string)[][] / headerClassName string / headersProps Record / cellClassName string / cellProps Record / rowClassName string / rowProps Record / onClick (row: number, column: number) => void () => {} propsCallback (row: number, column: number) => Record () => ({})"},{"location":"components/molecules/Table/props/#props-list","title":"Props list","text":""},{"location":"components/molecules/Table/props/#headers","title":"headers","text":"Type Default boolean /"},{"location":"components/molecules/Table/props/#rows","title":"rows","text":"Type Default (JSX.Element | string)[][] / Table elements
"},{"location":"components/molecules/Table/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom className applied on every Table header element
"},{"location":"components/molecules/Table/props/#headersprops","title":"headersProps","text":"Type Default Record / Custom props applied on every Table header element
"},{"location":"components/molecules/Table/props/#cellclassname","title":"cellClassName","text":"Type Default string / Custom className applied on every Table cell element
"},{"location":"components/molecules/Table/props/#cellprops","title":"cellProps","text":"Type Default Record / Custom props applied on every Table cell element
"},{"location":"components/molecules/Table/props/#rowclassname","title":"rowClassName","text":"Type Default string / Custom className applied on every Table row element
"},{"location":"components/molecules/Table/props/#rowprops","title":"rowProps","text":"Type Default Record / Custom props applied on every Table row element
"},{"location":"components/molecules/Table/props/#onclick","title":"onClick","text":"Type Default (row: number, column: number) => void () => {} Callback triggered when a Table cell is clicked
"},{"location":"components/molecules/Table/props/#propscallback","title":"propsCallback","text":"Type Default (row: number, column: number) => Record () => ({}) A function to add custom props depending on Table row and column
"},{"location":"components/organisms/","title":"MoBrix-ui organisms","text":""},{"location":"components/organisms/#summary","title":"Summary","text":" - Calendar
- DatePicker
- Drawer
- Form
"},{"location":"components/organisms/Calendar/","title":"Calendar page","text":"A ready to use Calendar, designed for a lot of scenarios.
"},{"location":"components/organisms/Calendar/css-vars/","title":"Calendar CSS variables","text":""},{"location":"components/organisms/Calendar/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/organisms/Calendar/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-calendar-background / / --mbx-calendar-background-light --mbx-calendar-background --mbx-background-light --mbx-calendar-background-dark --mbx-calendar-background --mbx-background-dark --mbx-calendar-text-color / / --mbx-calendar-text-color-light --mbx-calendar-text-color --mbx-text-color-light --mbx-calendar-text-color-dark --mbx-calendar-text-color --mbx-text-color-dark --mbx-calendar-selected-background / / --mbx-calendar-selected-background-light --mbx-calendar-selected-background --mbx-calendar-background-dark --mbx-calendar-selected-background-dark --mbx-calendar-selected-background --mbx-calendar-background-light --mbx-calendar-selected-text-color / / --mbx-calendar-selected-text-color-light --mbx-calendar-selected-text-color --mbx-calendar-text-color-dark --mbx-calendar-selected-text-color-dark --mbx-calendar-selected-text-color --mbx-calendar-text-color-light --mbx-calendar-background-hover / / --mbx-calendar-background-hover-light --mbx-calendar-background-hover --mbx-calendar-selected-background-light --mbx-calendar-background-hover-dark --mbx-calendar-background-hover --mbx-calendar-selected-background-dark --mbx-calendar-text-color-hover / / --mbx-calendar-text-color-hover-light --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-light --mbx-calendar-text-color-hover-dark --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-dark --mbx-calendar-arrow / / --mbx-calendar-arrow-light --mbx-calendar-arrow --mbx-calendar-text-color-light --mbx-calendar-arrow-dark --mbx-calendar-arrow --mbx-calendar-text-color-dark --mbx-calendar-arrow-hover / / --mbx-calendar-arrow-hover-light --mbx-calendar-arrow-hover --mbx-text-color-light --mbx-calendar-arrow-hover-dark --mbx-calendar-arrow-hover --mbx-text-color-dark --mbx-calendar-today-color / / --mbx-calendar-today-color-light --mbx-calendar-today-color red --mbx-calendar-today-color-dark --mbx-calendar-today-color red"},{"location":"components/organisms/Calendar/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background","title":"--mbx-calendar-background","text":"Fallback Default / / Fallback value for --mbx-calendar-background-light and --mbx-calendar-background-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-light","title":"--mbx-calendar-background-light","text":"Fallback Default --mbx-calendar-background --mbx-background-light Calendar background when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-dark","title":"--mbx-calendar-background-dark","text":"Fallback Default --mbx-calendar-background --mbx-background-dark Calendar background when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color","title":"--mbx-calendar-text-color","text":"Fallback Default / / Fallback value for --mbx-calendar-text-color-light and --mbx-calendar-text-color-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-light","title":"--mbx-calendar-text-color-light","text":"Fallback Default --mbx-calendar-text-color --mbx-text-color-light Calendar text color when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-dark","title":"--mbx-calendar-text-color-dark","text":"Fallback Default --mbx-calendar-text-color --mbx-text-color-dark Calendar text color when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background","title":"--mbx-calendar-selected-background","text":"Fallback Default / / Fallback value for --mbx-calendar-selected-background-light and --mbx-calendar-selected-background-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background-light","title":"--mbx-calendar-selected-background-light","text":"Fallback Default --mbx-calendar-selected-background --mbx-calendar-background-dark Calendar selected cell background when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background-dark","title":"--mbx-calendar-selected-background-dark","text":"Fallback Default --mbx-calendar-selected-background --mbx-calendar-background-light Calendar selected cell background when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color","title":"--mbx-calendar-selected-text-color","text":"Fallback Default / / Fallback value for --mbx-calendar-selected-text-color-light and --mbx-calendar-selected-text-color-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color-light","title":"--mbx-calendar-selected-text-color-light","text":"Fallback Default --mbx-calendar-selected-text-color --mbx-calendar-text-color-dark Calendar selected cell text color when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color-dark","title":"--mbx-calendar-selected-text-color-dark","text":"Fallback Default --mbx-calendar-selected-text-color --mbx-calendar-text-color-light Calendar selected cell text color when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover","title":"--mbx-calendar-background-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-background-hover-light and --mbx-calendar-background-hover-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover-light","title":"--mbx-calendar-background-hover-light","text":"Fallback Default --mbx-calendar-background-hover --mbx-calendar-selected-background-light Calendar background when dark mode is `off', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover-dark","title":"--mbx-calendar-background-hover-dark","text":"Fallback Default --mbx-calendar-background-hover --mbx-calendar-selected-background-dark Calendar background when dark mode is `on', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover","title":"--mbx-calendar-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-text-color-hover-light and --mbx-calendar-text-color-hover-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover-light","title":"--mbx-calendar-text-color-hover-light","text":"Fallback Default --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-light Calendar text color when dark mode is `off', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover-dark","title":"--mbx-calendar-text-color-hover-dark","text":"Fallback Default --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-dark Calendar text color when dark mode is `on', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow","title":"--mbx-calendar-arrow","text":"Fallback Default / / Fallback value for --mbx-calendar-arrow-light and --mbx-calendar-arrow-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-light","title":"--mbx-calendar-arrow-light","text":"Fallback Default --mbx-calendar-arrow --mbx-calendar-text-color-light Calendar arrow color when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-dark","title":"--mbx-calendar-arrow-dark","text":"Fallback Default --mbx-calendar-arrow --mbx-calendar-text-color-dark Calendar arrow color when dark mode is `on'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover","title":"--mbx-calendar-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-arrow-hover-light and --mbx-calendar-arrow-hover-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover-light","title":"--mbx-calendar-arrow-hover-light","text":"Fallback Default --mbx-calendar-arrow-hover --mbx-text-color-light Calendar arrow color when dark mode is `off', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover-dark","title":"--mbx-calendar-arrow-hover-dark","text":"Fallback Default --mbx-calendar-arrow-hover --mbx-text-color-dark Calendar arrow color when dark mode is `on', on hover
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-today-color","title":"--mbx-calendar-today-color","text":"Fallback Default / / Fallback value for --mbx-calendar-today-color-light and --mbx-calendar-today-color-dark
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-today-color-light","title":"--mbx-calendar-today-color-light","text":"Fallback Default --mbx-calendar-today-color red Calendar today color when dark mode is `off'
"},{"location":"components/organisms/Calendar/css-vars/#-mbx-calendar-today-color-dark","title":"--mbx-calendar-today-color-dark","text":"Fallback Default --mbx-calendar-today-color red Calendar today color when dark mode is `on'
"},{"location":"components/organisms/Calendar/props/","title":"Calendar properties","text":""},{"location":"components/organisms/Calendar/props/#summary","title":"Summary","text":""},{"location":"components/organisms/Calendar/props/#props-table","title":"Props table","text":"Parameter Type Default value CalendarDate Today date hideArrows boolean / days string[] English week labels months string[] English months labels onViewChange (date: CalendarDate) => void / startYear number Today year startMonth number Today month fromToday boolean true dayLabel string true labelClassName string / labelProps Record / onChange (newValue: CalendarDate) => void () => {} arrowClassName string /"},{"location":"components/organisms/Calendar/props/#props-list","title":"Props list","text":""},{"location":"components/organisms/Calendar/props/#value","title":"value","text":"Type Default CalendarDate Today date Actual selected date
"},{"location":"components/organisms/Calendar/props/#hidearrows","title":"hideArrows","text":"Type Default boolean / If true, hide arrow buttons near the date label
"},{"location":"components/organisms/Calendar/props/#days","title":"days","text":"Type Default string[] English week labels Custom days labels
"},{"location":"components/organisms/Calendar/props/#months","title":"months","text":"Type Default string[] English months labels Custom months labels
"},{"location":"components/organisms/Calendar/props/#onviewchange","title":"onViewChange","text":"Type Default (date: CalendarDate) => void / Callback triggered when the Calendar view (the displayed month) is changed
"},{"location":"components/organisms/Calendar/props/#startyear","title":"startYear","text":"Type Default number Today year Initial displayed year
"},{"location":"components/organisms/Calendar/props/#startmonth","title":"startMonth","text":"Type Default number Today month Initial displayed month
"},{"location":"components/organisms/Calendar/props/#fromtoday","title":"fromToday","text":"Type Default boolean true If false, prevent the user to select a date lower than today date
"},{"location":"components/organisms/Calendar/props/#daylabel","title":"dayLabel","text":"Type Default string true Show/hide actual day label on top of the calendar
"},{"location":"components/organisms/Calendar/props/#labelclassname","title":"labelClassName","text":"Type Default string / Custom className applied on the day label component
"},{"location":"components/organisms/Calendar/props/#labelprops","title":"labelProps","text":"Type Default Record / Custom props applied on the day label component
"},{"location":"components/organisms/Calendar/props/#onchange","title":"onChange","text":"Type Default (newValue: CalendarDate) => void () => {} Callback triggered when Calendar component input value is changed by the user
"},{"location":"components/organisms/Calendar/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button
"},{"location":"components/organisms/DatePicker/","title":"DatePicker page","text":"A smart date-picker, with an internal Calendar accessible to choose a date
"},{"location":"components/organisms/DatePicker/css-vars/","title":"DatePicker CSS variables","text":""},{"location":"components/organisms/DatePicker/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/organisms/DatePicker/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-datepicker-background / / --mbx-datepicker-background-light --mbx-datepicker-background --mbx-background-light --mbx-datepicker-background-dark --mbx-datepicker-background --mbx-background-dark --mbx-datepicker-text-color / / --mbx-datepicker-text-color-light --mbx-datepicker-text-color --mbx-text-color-light --mbx-datepicker-text-color-dark --mbx-datepicker-text-color --mbx-text-color-dark --mbx-datepicker-icon / / --mbx-datepicker-icon-light --mbx-datepicker-icon --mbx-datepicker-text-color-light --mbx-datepicker-icon-dark --mbx-datepicker-icon --mbx-datepicker-text-color-dark --mbx-datepicker-icon-hover / / --mbx-datepicker-icon-hover-light --mbx-datepicker-icon-hover blue --mbx-datepicker-icon-hover-dark --mbx-datepicker-icon-hover orange --mbx-datepicker-calendar-background / / --mbx-datepicker-calendar-background-light --mbx-datepicker-calendar-background --mbx-calendar-background-light --mbx-datepicker-calendar-background-dark --mbx-datepicker-calendar-background --mbx-calendar-background-dark --mbx-datepicker-calendar-text-color / / --mbx-datepicker-calendar-text-color-light --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-light --mbx-datepicker-calendar-text-color-dark --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-dark --mbx-datepicker-calendar-background-hover / / --mbx-datepicker-calendar-background-hover-light --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-light --mbx-datepicker-calendar-background-hover-dark --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-dark --mbx-datepicker-calendar-text-color-hover / / --mbx-datepicker-calendar-text-color-hover-light --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-light --mbx-datepicker-calendar-text-color-hover-dark --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-dark --mbx-datepicker-calendar-arrow / / --mbx-datepicker-calendar-arrow-light --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-light --mbx-datepicker-calendar-arrow-dark --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-dark --mbx-datepicker-calendar-arrow-hover / / --mbx-datepicker-calendar-arrow-hover-light --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-light --mbx-datepicker-calendar-arrow-hover-dark --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-dark --mbx-datepicker-calendar-selected-background / / --mbx-datepicker-calendar-selected-background-light --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-light --mbx-datepicker-calendar-selected-background-dark --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-dark --mbx-datepicker-calendar-selected-text-color / / --mbx-datepicker-calendar-selected-text-color-light --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-light --mbx-datepicker-calendar-selected-text-color-dark --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-dark --mbx-datepicker-calendar-today-color / / --mbx-datepicker-calendar-today-color-light --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-light --mbx-datepicker-calendar-today-color-dark --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-dark --mbx-datepicker-modal-background / / --mbx-datepicker-modal-background-light --mbx-datepicker-modal-background --mbx-modal-background-light --mbx-datepicker-modal-background-dark --mbx-datepicker-modal-background --mbx-modal-background-dark --mbx-datepicker-modal-x-color / / --mbx-datepicker-modal-x-color-light --mbx-datepicker-modal-x-color --mbx-modal-x-color-light --mbx-datepicker-modal-x-color-dark --mbx-datepicker-modal-x-color --mbx-modal-x-color-dark --mbx-datepicker-modal-x-color-hover / / --mbx-datepicker-modal-x-color-hover-light --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-light --mbx-datepicker-modal-x-color-hover-dark --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-dark"},{"location":"components/organisms/DatePicker/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-background","title":"--mbx-datepicker-background","text":"Fallback Default / / Fallback value for --mbx-datepicker-background-light and --mbx-datepicker-background-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-background-light","title":"--mbx-datepicker-background-light","text":"Fallback Default --mbx-datepicker-background --mbx-background-light DatePicker background when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-background-dark","title":"--mbx-datepicker-background-dark","text":"Fallback Default --mbx-datepicker-background --mbx-background-dark DatePicker background when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color","title":"--mbx-datepicker-text-color","text":"Fallback Default / / Fallback value for --mbx-datepicker-text-color-light and --mbx-datepicker-text-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color-light","title":"--mbx-datepicker-text-color-light","text":"Fallback Default --mbx-datepicker-text-color --mbx-text-color-light DatePicker text color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color-dark","title":"--mbx-datepicker-text-color-dark","text":"Fallback Default --mbx-datepicker-text-color --mbx-text-color-dark DatePicker text color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon","title":"--mbx-datepicker-icon","text":"Fallback Default / / Fallback value for --mbx-datepicker-icon-light and --mbx-datepicker-icon-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-light","title":"--mbx-datepicker-icon-light","text":"Fallback Default --mbx-datepicker-icon --mbx-datepicker-text-color-light DatePicker calendar icon color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-dark","title":"--mbx-datepicker-icon-dark","text":"Fallback Default --mbx-datepicker-icon --mbx-datepicker-text-color-dark DatePicker calendar icon color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover","title":"--mbx-datepicker-icon-hover","text":"Fallback Default / / Fallback value for --mbx-datepicker-icon-hover-light and --mbx-datepicker-icon-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover-light","title":"--mbx-datepicker-icon-hover-light","text":"Fallback Default --mbx-datepicker-icon-hover blue DatePicker calendar icon color when dark mode is `off', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover-dark","title":"--mbx-datepicker-icon-hover-dark","text":"Fallback Default --mbx-datepicker-icon-hover orange DatePicker calendar icon color when dark mode is `on', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background","title":"--mbx-datepicker-calendar-background","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-background-light and --mbx-datepicker-calendar-background-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-light","title":"--mbx-datepicker-calendar-background-light","text":"Fallback Default --mbx-datepicker-calendar-background --mbx-calendar-background-light Extended from Calendar - Calendar background when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-dark","title":"--mbx-datepicker-calendar-background-dark","text":"Fallback Default --mbx-datepicker-calendar-background --mbx-calendar-background-dark Extended from Calendar - Calendar background when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color","title":"--mbx-datepicker-calendar-text-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-text-color-light and --mbx-datepicker-calendar-text-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-light","title":"--mbx-datepicker-calendar-text-color-light","text":"Fallback Default --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-light Extended from Calendar - Calendar text color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-dark","title":"--mbx-datepicker-calendar-text-color-dark","text":"Fallback Default --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-dark Extended from Calendar - Calendar text color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover","title":"--mbx-datepicker-calendar-background-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-background-hover-light and --mbx-datepicker-calendar-background-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover-light","title":"--mbx-datepicker-calendar-background-hover-light","text":"Fallback Default --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-light Extended from Calendar - Calendar background when dark mode is `off', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover-dark","title":"--mbx-datepicker-calendar-background-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-dark Extended from Calendar - Calendar background when dark mode is `on', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover","title":"--mbx-datepicker-calendar-text-color-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-text-color-hover-light and --mbx-datepicker-calendar-text-color-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover-light","title":"--mbx-datepicker-calendar-text-color-hover-light","text":"Fallback Default --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-light Extended from Calendar - Calendar text color when dark mode is `off', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover-dark","title":"--mbx-datepicker-calendar-text-color-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-dark Extended from Calendar - Calendar text color when dark mode is `on', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow","title":"--mbx-datepicker-calendar-arrow","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-arrow-light and --mbx-datepicker-calendar-arrow-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-light","title":"--mbx-datepicker-calendar-arrow-light","text":"Fallback Default --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-light Extended from Calendar - Calendar arrow color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-dark","title":"--mbx-datepicker-calendar-arrow-dark","text":"Fallback Default --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-dark Extended from Calendar - Calendar arrow color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover","title":"--mbx-datepicker-calendar-arrow-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-arrow-hover-light and --mbx-datepicker-calendar-arrow-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover-light","title":"--mbx-datepicker-calendar-arrow-hover-light","text":"Fallback Default --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-light Extended from Calendar - Calendar arrow color when dark mode is `off', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover-dark","title":"--mbx-datepicker-calendar-arrow-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-dark Extended from Calendar - Calendar arrow color when dark mode is `on', on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background","title":"--mbx-datepicker-calendar-selected-background","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-selected-background-light and --mbx-datepicker-calendar-selected-background-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background-light","title":"--mbx-datepicker-calendar-selected-background-light","text":"Fallback Default --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-light Extended from Calendar - Calendar selected cell background when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background-dark","title":"--mbx-datepicker-calendar-selected-background-dark","text":"Fallback Default --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-dark Extended from Calendar - Calendar selected cell background when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color","title":"--mbx-datepicker-calendar-selected-text-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-selected-text-color-light and --mbx-datepicker-calendar-selected-text-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color-light","title":"--mbx-datepicker-calendar-selected-text-color-light","text":"Fallback Default --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-light Extended from Calendar - Calendar selected cell text color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color-dark","title":"--mbx-datepicker-calendar-selected-text-color-dark","text":"Fallback Default --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-dark Extended from Calendar - Calendar selected cell text color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color","title":"--mbx-datepicker-calendar-today-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-today-color-light and --mbx-datepicker-calendar-today-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color-light","title":"--mbx-datepicker-calendar-today-color-light","text":"Fallback Default --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-light Extended from Calendar - Calendar today color when dark mode is `off'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color-dark","title":"--mbx-datepicker-calendar-today-color-dark","text":"Fallback Default --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-dark Extended from Calendar - Calendar today color when dark mode is `on'
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background","title":"--mbx-datepicker-modal-background","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-background-light and --mbx-datepicker-modal-background-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background-light","title":"--mbx-datepicker-modal-background-light","text":"Fallback Default --mbx-datepicker-modal-background --mbx-modal-background-light Extended from Modal - Modal background when dark mode is off
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background-dark","title":"--mbx-datepicker-modal-background-dark","text":"Fallback Default --mbx-datepicker-modal-background --mbx-modal-background-dark Extended from Modal - Modal background when dark mode is on
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color","title":"--mbx-datepicker-modal-x-color","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-x-color-light and --mbx-datepicker-modal-x-color-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-light","title":"--mbx-datepicker-modal-x-color-light","text":"Fallback Default --mbx-datepicker-modal-x-color --mbx-modal-x-color-light Extended from Modal - Modal x icon color when dark mode is off
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-dark","title":"--mbx-datepicker-modal-x-color-dark","text":"Fallback Default --mbx-datepicker-modal-x-color --mbx-modal-x-color-dark Extended from Modal - Modal x icon color when dark mode is on
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover","title":"--mbx-datepicker-modal-x-color-hover","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-x-color-hover-light and --mbx-datepicker-modal-x-color-hover-dark
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover-light","title":"--mbx-datepicker-modal-x-color-hover-light","text":"Fallback Default --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-light Extended from Modal - Modal x icon color when dark mode is off, on hover
"},{"location":"components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover-dark","title":"--mbx-datepicker-modal-x-color-hover-dark","text":"Fallback Default --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-dark Extended from Modal - Modal x icon color when dark mode is on, on hover
"},{"location":"components/organisms/DatePicker/props/","title":"DatePicker properties","text":""},{"location":"components/organisms/DatePicker/props/#summary","title":"Summary","text":""},{"location":"components/organisms/DatePicker/props/#props-table","title":"Props table","text":"Parameter Type Default value CalendarDate Today date hideArrows boolean / days string[] English week labels months string[] English months labels onViewChange (date: CalendarDate) => void / startYear number Today year startMonth number Today month fromToday boolean true dayLabel string true labelClassName string / labelProps Record / onChange (newValue: CalendarDate) => void () => {} onClose () => void () => {} arrowClassName string /"},{"location":"components/organisms/DatePicker/props/#props-list","title":"Props list","text":""},{"location":"components/organisms/DatePicker/props/#value","title":"value","text":"Type Default CalendarDate Today date Actual selected date - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#hidearrows","title":"hideArrows","text":"Type Default boolean / If true, hide arrow buttons near the date label - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#days","title":"days","text":"Type Default string[] English week labels Custom days labels - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#months","title":"months","text":"Type Default string[] English months labels Custom months labels - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#onviewchange","title":"onViewChange","text":"Type Default (date: CalendarDate) => void / Callback triggered when the Calendar view (the displayed month) is changed - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#startyear","title":"startYear","text":"Type Default number Today year Initial displayed year - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#startmonth","title":"startMonth","text":"Type Default number Today month Initial displayed month - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#fromtoday","title":"fromToday","text":"Type Default boolean true If false, prevent the user to select a date lower than today date - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#daylabel","title":"dayLabel","text":"Type Default string true Show/hide actual day label on top of the calendar - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#labelclassname","title":"labelClassName","text":"Type Default string / Custom className applied on the day label component - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#labelprops","title":"labelProps","text":"Type Default Record / Custom props applied on the day label component - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#onchange","title":"onChange","text":"Type Default (newValue: CalendarDate) => void () => {} Callback triggered when Calendar component input value is changed by the user - extended from Calendar component
"},{"location":"components/organisms/DatePicker/props/#onclose","title":"onClose","text":"Type Default () => void () => {} Callback triggered when DatePicker modal is closed
"},{"location":"components/organisms/DatePicker/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button - extended from Calendar component
"},{"location":"components/organisms/Drawer/","title":"Drawer page","text":"A modern drawer, easy to integrate and to customize
"},{"location":"components/organisms/Drawer/css-vars/","title":"Drawer CSS variables","text":""},{"location":"components/organisms/Drawer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/organisms/Drawer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-drawer-background / / --mbx-drawer-background-light --mbx-drawer-background --mbx-background-light --mbx-drawer-background-dark --mbx-drawer-background --mbx-background-dark --mbx-drawer-text-color / / --mbx-drawer-text-color-light --mbx-drawer-text-color --mbx-text-color-light --mbx-drawer-text-color-dark --mbx-drawer-text-color --mbx-text-color-dark --mbx-drawer-arrow / / --mbx-drawer-arrow-light --mbx-drawer-arrow --mbx-drawer-text-color-light --mbx-drawer-arrow-dark --mbx-drawer-arrow --mbx-drawer-text-color-dark --mbx-drawer-arrow-hover / / --mbx-drawer-arrow-hover-light --mbx-drawer-arrow-hover / --mbx-drawer-arrow-hover-dark --mbx-drawer-arrow-hover /"},{"location":"components/organisms/Drawer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-background","title":"--mbx-drawer-background","text":"Fallback Default / / Fallback value for --mbx-drawer-background-light and --mbx-drawer-background-dark
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-background-light","title":"--mbx-drawer-background-light","text":"Fallback Default --mbx-drawer-background --mbx-background-light Drawer background when dark mode is off
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-background-dark","title":"--mbx-drawer-background-dark","text":"Fallback Default --mbx-drawer-background --mbx-background-dark Drawer background when dark mode is on
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-text-color","title":"--mbx-drawer-text-color","text":"Fallback Default / / Fallback value for --mbx-drawer-text-color-light and --mbx-drawer-text-color-dark
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-text-color-light","title":"--mbx-drawer-text-color-light","text":"Fallback Default --mbx-drawer-text-color --mbx-text-color-light Drawer text color when dark mode is off
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-text-color-dark","title":"--mbx-drawer-text-color-dark","text":"Fallback Default --mbx-drawer-text-color --mbx-text-color-dark Drawer text color when dark mode is on
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow","title":"--mbx-drawer-arrow","text":"Fallback Default / / Fallback value for --mbx-drawer-arrow-light and --mbx-drawer-arrow-dark
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-light","title":"--mbx-drawer-arrow-light","text":"Fallback Default --mbx-drawer-arrow --mbx-drawer-text-color-light Drawer arrow color when dark mode is off
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-dark","title":"--mbx-drawer-arrow-dark","text":"Fallback Default --mbx-drawer-arrow --mbx-drawer-text-color-dark Drawer arrow color when dark mode is on
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover","title":"--mbx-drawer-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-drawer-arrow-hover-light and --mbx-drawer-arrow-hover-dark
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover-light","title":"--mbx-drawer-arrow-hover-light","text":"Fallback Default --mbx-drawer-arrow-hover / Drawer arrow color when dark mode is off, on hover
"},{"location":"components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover-dark","title":"--mbx-drawer-arrow-hover-dark","text":"Fallback Default --mbx-drawer-arrow-hover / Drawer arrow color when dark mode is on, on hover
"},{"location":"components/organisms/Drawer/props/","title":"Drawer properties","text":""},{"location":"components/organisms/Drawer/props/#summary","title":"Summary","text":""},{"location":"components/organisms/Drawer/props/#props-table","title":"Props table","text":"Parameter Type Default position left | right | top | bottom | top-left | top-right | bottom-left | bottom-right left onClose () => void () => {} children (JSX.Element | string) | (JSX.Element|string`)[] / closeOnClickOutside boolean true arrowClassName string /"},{"location":"components/organisms/Drawer/props/#props-list","title":"Props list","text":""},{"location":"components/organisms/Drawer/props/#position","title":"position","text":"Type Default left | right | top | bottom | top-left | top-right | bottom-left | bottom-right left Drawer position, relative to the entire window
"},{"location":"components/organisms/Drawer/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Drawer is closed
"},{"location":"components/organisms/Drawer/props/#children","title":"children","text":"Type Default (JSX.Element | string) | (JSX.Element|string`)[] / Drawer content
"},{"location":"components/organisms/Drawer/props/#closeonclickoutside","title":"closeOnClickOutside","text":"Type Default boolean true If false, the drawer won't be closed when clicking outside of it
"},{"location":"components/organisms/Drawer/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button
"},{"location":"components/organisms/Form/","title":"Form page","text":"A totally configurable Form, with a submit button to let the user submit data from your web-app
"},{"location":"components/organisms/Form/css-vars/","title":"Form CSS variables","text":""},{"location":"components/organisms/Form/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"components/organisms/Form/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-form-background-light --mbx-form-background --mbx-background-light --mbx-form-background / / --mbx-form-background-dark --mbx-form-background --mbx-background-dark --mbx-form-text-color / / --mbx-form-text-color-light --mbx-form-text-color --mbx-text-color-light --mbx-form-text-color-dark --mbx-form-text-color --mbx-text-color-dark --mbx-form-submit-background / / --mbx-form-submit-background-light --mbx-form-submit-background mbx-button-background-light --mbx-form-submit-background-dark --mbx-form-submit-background mbx-button-background-dark --mbx-form-submit-text-color / / --mbx-form-submit-text-color-light --mbx-form-submit-text-color mbx-button-text-color-light --mbx-form-submit-text-color-dark --mbx-form-submit-text-color mbx-button-text-color-dark --mbx-form-formfield-background / / --mbx-form-formfield-background-dark --mbx-form-formfield-background --mbx-formfield-background-dark --mbx-form-formfield-background-light --mbx-form-formfield-background --mbx-formfield-background-light --mbx-form-formfield-text-color / / --mbx-form-formfield-text-color-light --mbx-form-formfield-text-color --mbx-formfield-text-color-light --mbx-form-formfield-text-color-dark --mbx-form-formfield-text-color --mbx-formfield-text-color-dark --mbx-form-formfield-background-hover / / --mbx-form-formfield-background-hover-light --mbx-form-formfield-background-hover --mbx-formfield-background-hover-light --mbx-form-formfield-background-hover-dark --mbx-form-formfield-background-hover --mbx-formfield-background-hover-dark --mbx-form-formfield-text-color-hover / / --mbx-form-formfield-text-color-hover-light --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-light --mbx-form-formfield-text-color-hover-dark --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-dark --mbx-form-formfield-error-border / / --mbx-form-formfield-error-border-light --mbx-form-formfield-error-border --mbx-formfield-error-border-light --mbx-form-formfield-error-border-dark --mbx-form-formfield-error-border --mbx-formfield-error-border-dark --mbx-form-formfield-error-text / / --mbx-form-formfield-error-text-light --mbx-form-formfield-error-text --mbx-formfield-error-text-light --mbx-form-formfield-error-text-dark --mbx-form-formfield-error-text --mbx-formfield-error-text-dark"},{"location":"components/organisms/Form/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"components/organisms/Form/css-vars/#-mbx-form-background-light","title":"--mbx-form-background-light","text":"Fallback Default --mbx-form-background --mbx-background-light Form background when dark mode is `off'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-background","title":"--mbx-form-background","text":"Fallback Default / / Fallback value for and
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-background-dark","title":"--mbx-form-background-dark","text":"Fallback Default --mbx-form-background --mbx-background-dark Form background when dark mode is `on'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-text-color","title":"--mbx-form-text-color","text":"Fallback Default / / Fallback value for and
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-text-color-light","title":"--mbx-form-text-color-light","text":"Fallback Default --mbx-form-text-color --mbx-text-color-light Form text color when dark mode is `off'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-text-color-dark","title":"--mbx-form-text-color-dark","text":"Fallback Default --mbx-form-text-color --mbx-text-color-dark Form text color when dark mode is `on'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-background","title":"--mbx-form-submit-background","text":"Fallback Default / / Fallback value for --mbx-form-submit-background-light and --mbx-form-submit-background-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-background-light","title":"--mbx-form-submit-background-light","text":"Fallback Default --mbx-form-submit-background mbx-button-background-light Form submit button background when dark mode is `off'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-background-dark","title":"--mbx-form-submit-background-dark","text":"Fallback Default --mbx-form-submit-background mbx-button-background-dark Form submit button background when dark mode is `on'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-text-color","title":"--mbx-form-submit-text-color","text":"Fallback Default / / Fallback value for --mbx-form-submit-text-color-light and --mbx-form-submit-text-color-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-text-color-light","title":"--mbx-form-submit-text-color-light","text":"Fallback Default --mbx-form-submit-text-color mbx-button-text-color-light Form submit button text color when dark mode is `off'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-submit-text-color-dark","title":"--mbx-form-submit-text-color-dark","text":"Fallback Default --mbx-form-submit-text-color mbx-button-text-color-dark Form submit button text color when dark mode is `on'
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background","title":"--mbx-form-formfield-background","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-background-light and --mbx-form-formfield-background-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-dark","title":"--mbx-form-formfield-background-dark","text":"Fallback Default --mbx-form-formfield-background --mbx-formfield-background-dark Extended from FormField - FormField background when dark mode is off
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-light","title":"--mbx-form-formfield-background-light","text":"Fallback Default --mbx-form-formfield-background --mbx-formfield-background-light Extended from FormField - FormField background when dark mode is on
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color","title":"--mbx-form-formfield-text-color","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-text-color-light and --mbx-form-formfield-text-color-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-light","title":"--mbx-form-formfield-text-color-light","text":"Fallback Default --mbx-form-formfield-text-color --mbx-formfield-text-color-light Extended from FormField - FormField text color when dark mode is off
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-dark","title":"--mbx-form-formfield-text-color-dark","text":"Fallback Default --mbx-form-formfield-text-color --mbx-formfield-text-color-dark Extended from FormField - FormField text color when dark mode is on
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover","title":"--mbx-form-formfield-background-hover","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-background-hover-light and --mbx-form-formfield-background-hover-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover-light","title":"--mbx-form-formfield-background-hover-light","text":"Fallback Default --mbx-form-formfield-background-hover --mbx-formfield-background-hover-light Extended from FormField - FormField background when dark mode is off, on hover
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover-dark","title":"--mbx-form-formfield-background-hover-dark","text":"Fallback Default --mbx-form-formfield-background-hover --mbx-formfield-background-hover-dark Extended from FormField - FormField background when dark mode is on, on hover
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover","title":"--mbx-form-formfield-text-color-hover","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-text-color-hover-light and --mbx-form-formfield-text-color-hover-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover-light","title":"--mbx-form-formfield-text-color-hover-light","text":"Fallback Default --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-light Extended from FormField - FormField text color when dark mode is off, on hover
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover-dark","title":"--mbx-form-formfield-text-color-hover-dark","text":"Fallback Default --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-dark Extended from FormField - FormField text color when dark mode is on, on hover
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-border","title":"--mbx-form-formfield-error-border","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-error-border-light and --mbx-form-formfield-error-border-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-border-light","title":"--mbx-form-formfield-error-border-light","text":"Fallback Default --mbx-form-formfield-error-border --mbx-formfield-error-border-light Extended from FormField - FormField error box border color when dark mode is off
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-border-dark","title":"--mbx-form-formfield-error-border-dark","text":"Fallback Default --mbx-form-formfield-error-border --mbx-formfield-error-border-dark Extended from FormField - FormField error box border color when dark mode is on
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-text","title":"--mbx-form-formfield-error-text","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-error-text-light and --mbx-form-formfield-error-text-dark
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-text-light","title":"--mbx-form-formfield-error-text-light","text":"Fallback Default --mbx-form-formfield-error-text --mbx-formfield-error-text-light Extended from FormField - FormField error box text color when dark mode is off
"},{"location":"components/organisms/Form/css-vars/#-mbx-form-formfield-error-text-dark","title":"--mbx-form-formfield-error-text-dark","text":"Fallback Default --mbx-form-formfield-error-text --mbx-formfield-error-text-dark Extended from FormField - FormField error box text color when dark mode is on
"},{"location":"components/organisms/Form/props/","title":"Form properties","text":""},{"location":"components/organisms/Form/props/#summary","title":"Summary","text":""},{"location":"components/organisms/Form/props/#props-table","title":"Props table","text":"Parameter Type Default title string / fields Record {} onSubmit (values: Record) => void / submitLabel string | JSX.Element / fieldClassName string / children JSX.Element /"},{"location":"components/organisms/Form/props/#props-list","title":"Props list","text":""},{"location":"components/organisms/Form/props/#title","title":"title","text":"Type Default string / Form title
"},{"location":"components/organisms/Form/props/#fields","title":"fields","text":"Type Default Record {} Form fields object. Every key is the field unique ID, and will be used on submit when returning their values
"},{"location":"components/organisms/Form/props/#onsubmit","title":"onSubmit","text":"Type Default (values: Record) => void / Custom callback triggered when clicking on submit button. Gives the fields values as input parameter
"},{"location":"components/organisms/Form/props/#submitlabel","title":"submitLabel","text":"Type Default string | JSX.Element / Custom submit button label
"},{"location":"components/organisms/Form/props/#fieldclassname","title":"fieldClassName","text":"Type Default string / Custom classname applied on every field
"},{"location":"components/organisms/Form/props/#children","title":"children","text":"Type Default JSX.Element / Form content
"},{"location":"old-guides/","title":"Old guides","text":" - MoBrix-ui v1.X.X
- MoBrix-ui v2.X.X
- MoBrix-ui v3.X.X
"},{"location":"old-guides/README_v1/","title":"MoBrix-ui - V1 guide","text":"React components for every app, easy to use and customize
"},{"location":"old-guides/README_v1/#summary","title":"Summary","text":" - MoBrix-ui philosophy
- Components building process
- Shared components properties
- Customizable UI
- Box components
- Getting started
- Installation
- Usage
- Tests
- Authors
- License
"},{"location":"old-guides/README_v1/#mobrix-ui-philosophy","title":"mobrix-ui philosophy","text":"This library is built upon few (but important) concepts:
- Small library size, to not impact on final app bundle size
- Few dependencies, to not introduce a bunch of additional packages (that could also introduce bugs or version conflicts with pre-existent packages)
- Let the user customize every part as desired, but with default values set otherwise, to make every component ready to be used without so many parameters
- Every component should be integrable into every react app, so their behaviour must be customizable too (with callbacks, for example)
The same concepts are also the base of another project I maintain, MoBrix-engine (check it out, it is also the base of MoBrix-ui guide page !)
"},{"location":"old-guides/README_v1/#components-building-process","title":"Components building process","text":"This library use a standardized process to build every component. As result, every component has a shared initial logic, shared CSS styles and shared properties.
"},{"location":"old-guides/README_v1/#shared-components-properties","title":"Shared components properties","text":"Some properties are shared between all components, for a smoother dev experience. In addition, this makes every single component easily re-usable. Let's see them in details:
Property Description className custom className applied on main container dark Enable/disable dark mode hide Hide/show component id data-id parameter (for testing purpose, to easily find the component into the DOM) shadow Enable/disable shadow behind component style Css inline properties applied on main container unstyled If true, no standard mobrix-ui styles will be applied on the components (useful for example, with image buttons) With these shared properties is possible to drive every component behaviour and UI with an external state management system
"},{"location":"old-guides/README_v1/#customizable-ui","title":"Customizable UI","text":"MoBrix-ui-components components UI is globally configurable, with CSS variables. By defining some specific custom CSS variables into your app css, you'll change the UI of all components:
CSS variable Description Default value Related CSS attribute --mobrix-ui-custom-background-dark Components background, when in dark-mode (dark is set to true). linear-gradient(to right, #2d3748, #1d232e) background-image --mobrix-ui-custom-background-color-dark Components background color, when in dark-mode (dark is set to true). #1d232e background-color --mobrix-ui-custom-text-color-dark Components text color, when in dark-mode (dark is set to true). white text-color --mobrix-ui-custom-background-light Components background, when not in dark-mode (dark is set to false). linear-gradient(to right, #fff, #eaebec) background-image --mobrix-ui-custom-background-color-light Components background color, when not in dark-mode (dark is set to false). #f5f5f5 background-color --mobrix-ui-custom-text-color-light Components text color, when not in dark-mode (dark is set to false). #1b1b1b text-color If you don't set these variables, the default values will be used.
"},{"location":"old-guides/README_v1/#box-components","title":"Box components","text":"Some components are designed with a specific structure, to better control and customize their look and feel. This type of components is called Box Component, for their particular structure. In addition to the shared properties, as they are part of MoBrix-ui, they accept 3 additional (and optional) properties:
label, a string or a component rendered above the final componentvalue, a specific property that drive the component UI, its type vary depends on component itself (for example, for the CheckBox component, it is the check status, as a boolean )defaultValue, the default value to use when value is not given or is undefined
"},{"location":"old-guides/README_v1/#getting-started","title":"Getting started","text":""},{"location":"old-guides/README_v1/#installation","title":"Installation","text":"If you want to use this library inside your project, just install it:
\nnpm i mobrix-ui\n\n
"},{"location":"old-guides/README_v1/#usage","title":"Usage","text":"After installation, you can use every MoBrix-ui component in your app. Run this example to see them in action:
import { Card, Container, Link } from \"mobrix-ui\";\nimport { render } from \"react-dom\";\n\nrender(\n <Container animated>\n <Card\n dark={true}\n body={<p>This page is entirely made with MoBrix-ui components !</p>}\n footer={\n <Link to=\"https://cianciarusocataldo.github.io/mobrix-ui\">\n MoBrix-ui page\n </Link>\n }\n />\n </Container>,\n document.getElementById(\"root\"),\n);\n
If you want to customize the UI globally, initialize the dedicated CSS variables:
* {\n --mobrix-ui-text-color: #f5f5f5;\n --mobrix-ui-background-color: #1b1b1b;\n}\n
"},{"location":"old-guides/README_v1/#tests","title":"Tests","text":"Unit tests for every component are located inside tests folder. The test script is executed with pre-defined test command:
npm run test\n
"},{"location":"old-guides/README_v1/#authors","title":"Authors","text":""},{"location":"old-guides/README_v1/#license","title":"License","text":"This project is licensed under the MIT License - see the LICENSE file for details
"},{"location":"old-guides/README_v2/","title":"MoBrix-ui - V2 guide","text":"React components for every app, easy to use and customize.
"},{"location":"old-guides/README_v2/#note-for-mobrix-ui-v1-user","title":"Note for MoBrix-ui v1 user","text":"MoBrix-ui v2 introduces some breaking changes that makes it not compatible with older MoBrix verions (using different lib versions in parallel is possible, but can cause some unexpected errors). If you are using MoBrix 1.X.X, please read the dedicated guide, or upgrade it to v2.X.X!
"},{"location":"old-guides/README_v2/#summary","title":"Summary","text":" - MoBrix-ui philosophy
- Components building process
- UI properties
- Accessibility properties
- CSS variables
- Reactive components
- Getting started
- Installation
- Usage
- Tests
- Authors
- License
"},{"location":"old-guides/README_v2/#mobrix-ui-philosophy","title":"MoBrix-ui philosophy","text":"This library is built upon few (but important) concepts:
- Small library size, to not impact on final app bundle size
- Few dependencies, to not introduce a bunch of additional packages (that could also introduce bugs or version conflicts with pre-existent packages)
- Let the user customize every part as desired, but with default values set otherwise, to make every component ready to be used without so many parameters
- Every component should be integrable into every react app, so their behaviour must be customizable too (with callbacks, for example)
The same concepts are also the base of another project I maintain, MoBrix-engine (check it out, it is also the base of MoBrix-ui guide page !)
"},{"location":"old-guides/README_v2/#components-building-process","title":"Components building process","text":"This library use a standardized process to build every component. As result, every component has a shared initial logic, shared CSS styles and shared properties. Some properties are shared between all components, for a smoother dev experience. In addition, this makes every single component easily re-usable.
"},{"location":"old-guides/README_v2/#ui-properties","title":"UI properties","text":"Property Type Description Default value className string custom className applied on main container \"\" dark boolean Enable/disable dark mode false hide boolean Hide/show component false id string data-id parameter (for testing purpose, to easily find the component into the DOM) / shadow boolean Enable/disable shadow behind component false style Record<string,any> Css inline properties applied on main container / unstyled boolean If true, no standard mobrix-ui styles will be applied on the components (useful for example, with image buttons) false animated boolean Enable/disable component animations false"},{"location":"old-guides/README_v2/#accessibility-properties","title":"Accessibility properties","text":"Some accessibility properties are shared between all components, for a better and smoother user experience, in any scenario:
Property Type Description Default value onFocus ( ) => void custom callback triggered when the component get the focus (for example, through tab key) / onFocusLost ( ) => void custom callback triggered when the component lose the focus (for example, when user clicks outside it) / a11y boolean Enable/disable accessibility features. true a11yLabel string If a11y = true, is used as aria-label accessibility parameter / a11yDark boolean If a11y = true, enable/disable dark mode for a11y styles. If not set, will be used the dark UI parameter same as dark or false onKeyDown (keyEvent : any) => void custom callback triggered when a key is pressed while using the component (for example, when writing text inside an Input component). / "},{"location":"old-guides/README_v2/#css-variables","title":"CSS variables","text":"MoBrix-ui is globally configurable, with CSS variables. By defining some specific custom CSS variables into your app css, you'll change the UI of all components:
CSS variable Description Default value Related CSS attribute --mobrix-ui-custom-background-dark Components background, when in dark-mode (dark is set to true). linear-gradient(to right, #2d3748, #1d232e) background-image --mobrix-ui-custom-background-color-dark Components background color, when in dark-mode (dark is set to true). #1d232e background-color --mobrix-ui-custom-text-color-dark Components text color, when in dark-mode (dark is set to true). white text-color --mobrix-ui-custom-background-light Components background, when not in dark-mode (dark is set to false). linear-gradient(to right, #fff, #eaebec) background-image --mobrix-ui-custom-background-color-light Components background color, when not in dark-mode (dark is set to false). #f5f5f5 background-color --mobrix-ui-custom-text-color-light Components text color, when not in dark-mode (dark is set to false). #1b1b1b text-color --mobrix-ui-custom-focus-color-light If a11yDark = false , this color is used to update UI when a component is focused (with a screen reader or by navigating with the Tab key) #7785ff box-shadow / color --mobrix-ui-custom-focus-color-dark If a11yDark = true , this color is used to update UI when a component is focused (with a screen reader or by navigating with the Tab key) #fb7a10 box-shadow / color "},{"location":"old-guides/README_v2/#reactive-components","title":"Reactive components","text":"Some components are designed with a specific structure, to sync their internal state with an external input value. This kind of component handle internally their actual value, using the value parameter as starting point. This let the component to be driven in 2 different way:
-
Internally, Its internal value, when using the component without changing its value parameter from code
-
External, passing the value parameter
So, we have 2 scenarios:
-
If you change the component value using the component(without changing the value parameter), it will be updated internally.
-
If you change the passed value parameter, the component will sync its value with the given one.
A clear example is the Input component. When changing the value parameter, the component will sync its actual value.
"},{"location":"old-guides/README_v2/#getting-started","title":"Getting started","text":""},{"location":"old-guides/README_v2/#installation","title":"Installation","text":"If you want to use this library inside your project, just install it:
\nnpm i mobrix-ui\n\n
"},{"location":"old-guides/README_v2/#usage","title":"Usage","text":"After installation, you can use every MoBrix-ui component in your app. Run this example to see them in action:
import { Card, Container, Link } from \"mobrix-ui\";\nimport { render } from \"react-dom\";\n\nrender(\n <Container animated>\n <Card\n dark={true}\n body={<p>This page is entirely made with MoBrix-ui components !</p>}\n footer={\n <Link to=\"https://cianciarusocataldo.github.io/mobrix-ui\">\n MoBrix-ui page\n </Link>\n }\n />\n </Container>,\n document.getElementById(\"root\"),\n);\n
If you want to customize the UI globally, initialize the dedicated CSS variables:
* {\n --mobrix-ui-text-color: #f5f5f5;\n --mobrix-ui-background-color: #1b1b1b;\n}\n
"},{"location":"old-guides/README_v2/#tests","title":"Tests","text":"Unit tests for every component are located inside tests folder. The test script is executed with pre-defined test command:
npm run test\n
"},{"location":"old-guides/README_v2/#authors","title":"Authors","text":""},{"location":"old-guides/README_v2/#license","title":"License","text":"This project is licensed under the MIT License - see the LICENSE file for details
"},{"location":"old-guides/V3/README_v3/","title":"MoBrix-ui - V3 guide","text":"Smart React components for every app, easily customizable for every purpose.
"},{"location":"old-guides/V3/README_v3/#note-for-older-mobrix-ui-version","title":"Note for older MoBrix-ui version","text":"MoBrix-ui v3 introduces some breaking changes that makes it not compatible with older MoBrix verions (using different lib versions in parallel is possible, but can cause some unexpected errors). If you are using MoBrix 2.X.X or lower, upgrade it to v3.X.X if possible! Please read the old versions guide if you want to use older MoBrix-ui versions.
"},{"location":"old-guides/V3/README_v3/#summary","title":"Summary","text":" - MoBrix-ui philosophy
- Components building process
- Shared Properties
- Accessibility properties
- CSS variables
- Reactive components
- Getting started
- Installation
- Usage
- Tests
- Authors
- License
Check out the official MoBrix-ui guide page for more details
"},{"location":"old-guides/V3/README_v3/#mobrix-ui-philosophy","title":"MoBrix-ui philosophy","text":"This library is built upon few (but important) concepts:
- Small library size, to not impact on final app bundle size
- Few dependencies, to not introduce a bunch of additional packages (that could also introduce bugs or version conflicts with pre-existent packages)
- Let the user customize every part as desired, but with default values set otherwise, to make every component ready to be used without so many parameters
- Every component should be integrable into every react app, so their behaviour must be customizable too (with callbacks, for example)
The same concepts are also the base of another project I maintain, MoBrix-engine (check it out, it is also the base of MoBrix-ui guide page !)
"},{"location":"old-guides/V3/README_v3/#components-building-process","title":"Components building process","text":"This library use a standardized process to build every component. As result, every component has a shared initial logic, shared CSS styles and shared properties. Some properties are shared between all components, for a smoother dev experience. In addition, this makes every single component easily re-usable.
"},{"location":"old-guides/V3/README_v3/#shared-properties","title":"Shared Properties","text":"MoBrix-ui components shares some properties:
Parameter Type Default key string / className string / dark boolean false hide boolean false id string / shadow boolean true style CSSProperties / unstyled boolean false animated boolean true animation fade-in | slide-in-left | slide-in-right | slide-in-top | shake / background boolean true hover boolean true disabled boolean false onKeyDown (keyEvent : any) => void / onFocus () => void / onFocusLost () => void / additionalProps Record / a11y boolean true a11yLabel string / tabIndex number | string / Check out the complete components list for more details
"},{"location":"old-guides/V3/README_v3/#css-variables","title":"CSS variables","text":"MoBrix-ui is globally configurable, with CSS variables. By defining some specific custom CSS variables into your app css, you'll change the UI of all components:
Css variable Fallback Default --mbx-background / / --mbx-background-light --mbx-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-background-dark --mbx-background linear-gradient(to right, #2d3748, #1d232e) --mbx-background-color / / --mbx-background-color-light --mbx-background-color #e9e9e9 --mbx-background-color-dark --mbx-background-color #1d232e --mbx-background-color-hover / / --mbx-background-color-hover-light --mbx-background-color-hover #dfeaf8 --mbx-background-color-hover-dark --mbx-background-color-hover #3a3552 --mbx-background-hover / / --mbx-background-hover-light --mbx-background-hover linear-gradient(to right, #ececec, #e1e1e6, #dbdddd) --mbx-background-hover-dark --mbx-background-hover linear-gradient(to right, #364257, #252d3b) --mbx-text-color / / --mbx-text-color-light --mbx-text-color #1b1b1b --mbx-text-color-dark --mbx-text-color white --mbx-text-color-hover / / --mbx-text-color-hover-light --mbx-text-color-hover #413c5c --mbx-text-color-hover-dark --mbx-text-color-hover #dfeaf8 --mbx-shadow / / --mbx-shadow-light --mbx-shadow #464545 --mbx-shadow-dark --mbx-shadow #464545 --mbx-focus-color / / --mbx-focus-color-light --mbx-focus-color #7785ff --mbx-focus-color-dark --mbx-focus-color #fb7a10 Check out the complete components list for more details
"},{"location":"old-guides/V3/README_v3/#reactive-components","title":"Reactive components","text":"Some components are designed with a specific structure, to sync their internal state with an external input value. This kind of component handle internally their actual value, using the value parameter as starting point. This let the component to be driven in 2 different way:
-
Internally, Its internal value, when using the component without changing its value parameter from code
-
External, passing the value parameter
So, we have 2 scenarios:
-
If you change the component value using the component (without changing the value parameter), it will be updated internally.
-
If you change the passed value parameter, the component will sync its value with the given one.
A clear example is the Input component. When changing the value parameter, the component will sync its actual value.
"},{"location":"old-guides/V3/README_v3/#getting-started","title":"Getting started","text":""},{"location":"old-guides/V3/README_v3/#installation","title":"Installation","text":"If you want to use this library inside your project, just install it:
\nnpm i mobrix-ui\n\n
"},{"location":"old-guides/V3/README_v3/#usage","title":"Usage","text":"After installation, you can use every MoBrix-ui component in your app. Run this example to see them in action:
import { Card, Container, Link } from \"mobrix-ui\";\nimport { render } from \"react-dom\";\n\nrender(\n <Container animated>\n <Card\n dark={true}\n body={<p>This page is entirely made with MoBrix-ui components !</p>}\n footer={\n <Link to=\"https://cianciarusocataldo.github.io/mobrix-ui\">\n MoBrix-ui page\n </Link>\n }\n />\n </Container>,\n document.getElementById(\"root\"),\n);\n
If you want to customize the UI globally, initialize the dedicated CSS variables:
* {\n --mbx-ui-text-color: #f5f5f5;\n --mbx-ui-background-color: #1b1b1b;\n}\n
"},{"location":"old-guides/V3/README_v3/#tests","title":"Tests","text":"Unit tests for every component are located inside tests folder. The test script is executed with pre-defined test command:
npm run test\n
"},{"location":"old-guides/V3/README_v3/#authors","title":"Authors","text":""},{"location":"old-guides/V3/README_v3/#_1","title":"MoBrix-ui - V3 guide","text":""},{"location":"old-guides/V3/README_v3/#license","title":"License","text":"This project is licensed under the MIT License - see the LICENSE file for details
"},{"location":"old-guides/V3/components/","title":"MoBrix-ui components","text":""},{"location":"old-guides/V3/components/#summary","title":"Summary","text":"Atoms
-
Button
-
CheckBox
-
CodeBox
-
Counter
-
Divider
-
EmbeddedVideo
-
IconButton
-
Image
-
Input
-
Label
-
Link
-
PackageVersion
-
RadioButton
-
Rater
-
Selector
-
Slider
-
Spinner
-
Toggle
Molecules
-
Card
-
Carousel
-
Container
-
DismissableCard
-
Dropdown
-
ExpandableContainer
-
FormField
-
List
-
Modal
-
Popup
-
RadioButtonGroup
-
Review
-
Table
-
TabViewer
Organisms
-
Calendar
-
DatePicker
-
Drawer
-
Form
"},{"location":"old-guides/V3/components/atoms/","title":"MoBrix-ui atoms","text":""},{"location":"old-guides/V3/components/atoms/#summary","title":"Summary","text":" - Button
- CheckBox
- CodeBox
- Counter
- Divider
- EmbeddedVideo
- IconButton
- Image
- Input
- Label
- Link
- PackageVersion
- RadioButton
- Rater
- Selector
- Slider
- Spinner
- Toggle
"},{"location":"old-guides/V3/components/atoms/Button/","title":"Button page","text":"A tiny and smart button component.
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/","title":"Button CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Button/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-button-background / / --mbx-button-background-light --mbx-button-background --mbx-background-light --mbx-button-background-dark --mbx-button-background --mbx-background-dark --mbx-button-text-color / / --mbx-button-text-color-light --mbx-button-text-color --mbx-text-color-light --mbx-button-text-color-dark --mbx-button-text-color --mbx-text-color-dark --mbx-button-background-hover / / --mbx-button-background-hover-light --mbx-button-background-hover --mbx-background-hover-light --mbx-button-background-hover-dark --mbx-button-background-hover --mbx-background-hover-dark --mbx-button-text-color-hover / / --mbx-button-text-color-hover-light --mbx-button-text-color-hover --mbx-text-color-hover-light --mbx-button-text-color-hover-dark --mbx-button-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background","title":"--mbx-button-background","text":"Fallback Default / / Fallback value for mbx-button-background-light and mbx-button-background-dark
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-light","title":"--mbx-button-background-light","text":"Fallback Default --mbx-button-background --mbx-background-light Button background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-dark","title":"--mbx-button-background-dark","text":"Fallback Default --mbx-button-background --mbx-background-dark Button background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color","title":"--mbx-button-text-color","text":"Fallback Default / / Fallback value for mbx-button-text-color-light and mbx-button-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-light","title":"--mbx-button-text-color-light","text":"Fallback Default --mbx-button-text-color --mbx-text-color-light Button text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-dark","title":"--mbx-button-text-color-dark","text":"Fallback Default --mbx-button-text-color --mbx-text-color-dark Button text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-hover","title":"--mbx-button-background-hover","text":"Fallback Default / / Fallback value for mbx-button-background-hover-light and mbx-button-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-hover-light","title":"--mbx-button-background-hover-light","text":"Fallback Default --mbx-button-background-hover --mbx-background-hover-light Button background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-background-hover-dark","title":"--mbx-button-background-hover-dark","text":"Fallback Default --mbx-button-background-hover --mbx-background-hover-dark Button background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-hover","title":"--mbx-button-text-color-hover","text":"Fallback Default / / Fallback value for mbx-button-text-color-hover-light and mbx-button-text-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-hover-light","title":"--mbx-button-text-color-hover-light","text":"Fallback Default --mbx-button-text-color-hover --mbx-text-color-hover-light Button text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Button/css-vars/#-mbx-button-text-color-hover-dark","title":"--mbx-button-text-color-hover-dark","text":"Fallback Default --mbx-button-text-color-hover --mbx-text-color-hover-dark Button text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Button/props/","title":"Button properties","text":""},{"location":"old-guides/V3/components/atoms/Button/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Button/props/#props-table","title":"Props table","text":"Parameter Type Default onMouseEnter () => void / onMouseLeave () => void / onClick () => void () => {} children JSX.Element | string /"},{"location":"old-guides/V3/components/atoms/Button/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Button/props/#onmouseenter","title":"onMouseEnter","text":"Type Default () => void / This callback is triggered everytime the cursor enter the button area
"},{"location":"old-guides/V3/components/atoms/Button/props/#onmouseleave","title":"onMouseLeave","text":"Type Default () => void / This callback is triggered everytime the cursor exit the button area
"},{"location":"old-guides/V3/components/atoms/Button/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when Button component is clicked
"},{"location":"old-guides/V3/components/atoms/Button/props/#children","title":"children","text":"Type Default JSX.Element | string / Button content
"},{"location":"old-guides/V3/components/atoms/CheckBox/","title":"CheckBox page","text":"A checkbox element, totally customizable.
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/","title":"CheckBox CSS variables","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-checkbox-background / / --mbx-checkbox-background-light --mbx-checkbox-background --mbx-background-light --mbx-checkbox-background-dark --mbx-checkbox-background --mbx-background-dark --mbx-checkbox-background-hover / / --mbx-checkbox-background-hover-light --mbx-checkbox-background-hover --mbx-background-hover-light --mbx-checkbox-background-hover-dark --mbx-checkbox-background-hover --mbx-background-hover-dark --mbx-checkbox-tick-color / / --mbx-checkbox-tick-color-light --mbx-checkbox-tick-color rgb(37, 99, 235) --mbx-checkbox-tick-color-dark --mbx-checkbox-tick-color white"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background","title":"--mbx-checkbox-background","text":"Fallback Default / / Fallback value for mbx-checkbox-background-light and mbx-checkbox-background-dark
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-light","title":"--mbx-checkbox-background-light","text":"Fallback Default --mbx-checkbox-background --mbx-background-light CheckBox background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-dark","title":"--mbx-checkbox-background-dark","text":"Fallback Default --mbx-checkbox-background --mbx-background-dark CheckBox background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover","title":"--mbx-checkbox-background-hover","text":"Fallback Default / / Fallback value for mbx-checkbox-background-hover-light and mbx-checkbox-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover-light","title":"--mbx-checkbox-background-hover-light","text":"Fallback Default --mbx-checkbox-background-hover --mbx-background-hover-light CheckBox background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-background-hover-dark","title":"--mbx-checkbox-background-hover-dark","text":"Fallback Default --mbx-checkbox-background-hover --mbx-background-hover-dark CheckBox background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color","title":"--mbx-checkbox-tick-color","text":"Fallback Default / / Fallback value for mbx-checkbox-tick-color-light and mbx-checkbox-tick-color-dark
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color-light","title":"--mbx-checkbox-tick-color-light","text":"Fallback Default --mbx-checkbox-tick-color rgb(37, 99, 235) CheckBox tick color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/CheckBox/css-vars/#-mbx-checkbox-tick-color-dark","title":"--mbx-checkbox-tick-color-dark","text":"Fallback Default --mbx-checkbox-tick-color white CheckBox tick color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/CheckBox/props/","title":"CheckBox properties","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean false icon JSX.Element Internal tick icon onChange (newValue: boolean) => void () => {}"},{"location":"old-guides/V3/components/atoms/CheckBox/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/CheckBox/props/#value","title":"value","text":"Type Default boolean false Checkbox initial value (checked / unchecked)
"},{"location":"old-guides/V3/components/atoms/CheckBox/props/#icon","title":"icon","text":"Type Default JSX.Element Internal tick icon custom tick icon (if not set, the default one will be used)
"},{"location":"old-guides/V3/components/atoms/CheckBox/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when CheckBox component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/CodeBox/","title":"CodeBox page","text":"A smart code box, to display code text as a compiler. Supports code highlight, with a selectable environment, and multiline strings
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/","title":"CodeBox CSS variables","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-codebox-background / / --mbx-codebox-background-light --mbx-codebox-background --mbx-background-light --mbx-codebox-background-dark --mbx-codebox-background --mbx-background-dark --mbx-codebox-text-color / / --mbx-codebox-text-color-light --mbx-codebox-text-color --mbx-text-color-light --mbx-codebox-text-color-dark --mbx-codebox-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-background","title":"--mbx-codebox-background","text":"Fallback Default / / Fallback value for mbx-codebox-background-light and mbx-codebox-background-dark
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-background-light","title":"--mbx-codebox-background-light","text":"Fallback Default --mbx-codebox-background --mbx-background-light CodeBox background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-background-dark","title":"--mbx-codebox-background-dark","text":"Fallback Default --mbx-codebox-background --mbx-background-dark CodeBox background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color","title":"--mbx-codebox-text-color","text":"Fallback Default / / Fallback value for mbx-codebox-text-color-light and mbx-codebox-text-color-dark
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color-light","title":"--mbx-codebox-text-color-light","text":"Fallback Default --mbx-codebox-text-color --mbx-text-color-light CodeBox text-color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/CodeBox/css-vars/#-mbx-codebox-text-color-dark","title":"--mbx-codebox-text-color-dark","text":"Fallback Default --mbx-codebox-text-color --mbx-text-color-dark CodeBox text-color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/CodeBox/props/","title":"CodeBox properties","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/props/#props-table","title":"Props table","text":"Parameter Type Default value string / highlight boolean true environment javascript | python | terminal | common 'terminal' copyButton boolean true"},{"location":"old-guides/V3/components/atoms/CodeBox/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/CodeBox/props/#value","title":"value","text":"Type Default string / code to display - multiline string is supported
"},{"location":"old-guides/V3/components/atoms/CodeBox/props/#highlight","title":"highlight","text":"Type Default boolean true Enable/disable text highlight, based on selected environment
"},{"location":"old-guides/V3/components/atoms/CodeBox/props/#environment","title":"environment","text":"Type Default javascript | python | terminal | common 'terminal' environment for text highlight feature, default to 'terminal' (only enabled when 'highlight' is true)
"},{"location":"old-guides/V3/components/atoms/CodeBox/props/#copybutton","title":"copyButton","text":"Type Default boolean true Enable/disable the copy button
"},{"location":"old-guides/V3/components/atoms/Counter/","title":"Counter page","text":"A flexible numeric input element
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/","title":"Counter CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-counterbox-background / / --mbx-counterbox-background-light --mbx-counterbox-background --mbx-background-color-light --mbx-counterbox-background-dark --mbx-counterbox-background --mbx-background-color-dark --mbx-counterbox-text-color / / --mbx-counterbox-text-color-light --mbx-counterbox-text-color --mbx-text-color-light --mbx-counterbox-text-color-dark --mbx-counterbox-text-color --mbx-text-color-dark --mbx-counterbox-background-hover / / --mbx-counterbox-background-hover-light --mbx-counterbox-background-hover --mbx-background-color-hover-light --mbx-counterbox-background-hover-dark --mbx-counterbox-background-hover --mbx-background-color-hover-dark --mbx-counterbox-text-color-hover / / --mbx-counterbox-text-color-hover-light --mbx-counterbox-text-color-hover --mbx-text-color-hover-light --mbx-counterbox-text-color-hover-dark --mbx-counterbox-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background","title":"--mbx-counterbox-background","text":"Fallback Default / / Fallback value for mbx-counterbox-background-light and mbx-counterbox-background-dark
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-light","title":"--mbx-counterbox-background-light","text":"Fallback Default --mbx-counterbox-background --mbx-background-color-light Counter background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-dark","title":"--mbx-counterbox-background-dark","text":"Fallback Default --mbx-counterbox-background --mbx-background-color-dark Counter background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color","title":"--mbx-counterbox-text-color","text":"Fallback Default / / Fallback value for mbx-counterbox-text-color-light and mbx-counterbox-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-light","title":"--mbx-counterbox-text-color-light","text":"Fallback Default --mbx-counterbox-text-color --mbx-text-color-light Counter text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-dark","title":"--mbx-counterbox-text-color-dark","text":"Fallback Default --mbx-counterbox-text-color --mbx-text-color-dark Counter text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover","title":"--mbx-counterbox-background-hover","text":"Fallback Default / / Fallback value for mbx-counterbox-background-hover-light and mbx-counterbox-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover-light","title":"--mbx-counterbox-background-hover-light","text":"Fallback Default --mbx-counterbox-background-hover --mbx-background-color-hover-light Counter background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-background-hover-dark","title":"--mbx-counterbox-background-hover-dark","text":"Fallback Default --mbx-counterbox-background-hover --mbx-background-color-hover-dark Counter background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover","title":"--mbx-counterbox-text-color-hover","text":"Fallback Default / / Fallback value for mbx-counterbox-text-color-hover-light and mbx-counterbox-text-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover-light","title":"--mbx-counterbox-text-color-hover-light","text":"Fallback Default --mbx-counterbox-text-color-hover --mbx-text-color-hover-light Counter text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Counter/css-vars/#-mbx-counterbox-text-color-hover-dark","title":"--mbx-counterbox-text-color-hover-dark","text":"Fallback Default --mbx-counterbox-text-color-hover --mbx-text-color-hover-dark Counter text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Counter/props/","title":"Counter properties","text":""},{"location":"old-guides/V3/components/atoms/Counter/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Counter/props/#props-table","title":"Props table","text":"Parameter Type Default value number / placeholder string / readOnly boolean false min number / max number / onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/atoms/Counter/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Counter/props/#value","title":"value","text":"Type Default number / numeric input value
"},{"location":"old-guides/V3/components/atoms/Counter/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set
"},{"location":"old-guides/V3/components/atoms/Counter/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter
"},{"location":"old-guides/V3/components/atoms/Counter/props/#min","title":"min","text":"Type Default number / min allowed value
"},{"location":"old-guides/V3/components/atoms/Counter/props/#max","title":"max","text":"Type Default number / max allowed value
"},{"location":"old-guides/V3/components/atoms/Counter/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Counter component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Divider/","title":"Divider page","text":"A simple divider, useful to separate sections and paragraphs
"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/","title":"Divider CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-divider-color / / --mbx-divider-color-light --mbx-divider-color --mbx-text-color-light --mbx-divider-color-dark --mbx-divider-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#-mbx-divider-color","title":"--mbx-divider-color","text":"Fallback Default / / Fallback value for --mbx-divider-color-light and --mbx-divider-color-dark
"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#-mbx-divider-color-light","title":"--mbx-divider-color-light","text":"Fallback Default --mbx-divider-color --mbx-text-color-light Divider color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Divider/css-vars/#-mbx-divider-color-dark","title":"--mbx-divider-color-dark","text":"Fallback Default --mbx-divider-color --mbx-text-color-dark Divider color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Divider/props/","title":"Divider properties","text":""},{"location":"old-guides/V3/components/atoms/Divider/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Divider/props/#props-table","title":"Props table","text":"Parameter Type Default size string 2px"},{"location":"old-guides/V3/components/atoms/Divider/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Divider/props/#size","title":"size","text":"Type Default string 2px Divider size. Can be used any unit (like rem, em or pixels, for example 4px)
"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/","title":"EmbeddedVideo page","text":"A wrapper to easily serve embedded videos from supported sources (Youtube, Dailymotion and Facebook watch for now) - https://www.youtube-nocookie.com/ is used for youtube videos to prevent cookies
"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/css-vars/","title":"EmbeddedVideo CSS variables","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/","title":"EmbeddedVideo properties","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/#props-table","title":"Props table","text":"Parameter Type Default url string /"},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/EmbeddedVideo/props/#url","title":"url","text":"Type Default string / External video url to embed
"},{"location":"old-guides/V3/components/atoms/IconButton/","title":"IconButton page","text":"An empty button, without additional styles, to make an icon clickable
"},{"location":"old-guides/V3/components/atoms/IconButton/css-vars/","title":"IconButton CSS variables","text":""},{"location":"old-guides/V3/components/atoms/IconButton/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/IconButton/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"old-guides/V3/components/atoms/IconButton/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/IconButton/props/","title":"IconButton properties","text":""},{"location":"old-guides/V3/components/atoms/IconButton/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/IconButton/props/#props-table","title":"Props table","text":"Parameter Type Default children JSX.Element | string / onMouseEnter () => void / onMouseLeave () => void / onClick () => void () => {}"},{"location":"old-guides/V3/components/atoms/IconButton/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/IconButton/props/#children","title":"children","text":"Type Default JSX.Element | string / Button content - extended from Button component
"},{"location":"old-guides/V3/components/atoms/IconButton/props/#onmouseenter","title":"onMouseEnter","text":"Type Default () => void / This callback is triggered everytime the cursor enter the button area - extended from Button component
"},{"location":"old-guides/V3/components/atoms/IconButton/props/#onmouseleave","title":"onMouseLeave","text":"Type Default () => void / This callback is triggered everytime the cursor exit the button area - extended from Button component
"},{"location":"old-guides/V3/components/atoms/IconButton/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when Button component is clicked - extended from Button component
"},{"location":"old-guides/V3/components/atoms/Image/","title":"Image page","text":"An Image component, enhanced by MoBrix-ui system
"},{"location":"old-guides/V3/components/atoms/Image/css-vars/","title":"Image CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Image/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Image/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default"},{"location":"old-guides/V3/components/atoms/Image/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Image/props/","title":"Image properties","text":""},{"location":"old-guides/V3/components/atoms/Image/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Image/props/#props-table","title":"Props table","text":"Parameter Type Default src string / width number / height number / alt string /"},{"location":"old-guides/V3/components/atoms/Image/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Image/props/#src","title":"src","text":"Type Default string / Image src attribute
"},{"location":"old-guides/V3/components/atoms/Image/props/#width","title":"width","text":"Type Default number / Image width attribute
"},{"location":"old-guides/V3/components/atoms/Image/props/#height","title":"height","text":"Type Default number / Image height attribute
"},{"location":"old-guides/V3/components/atoms/Image/props/#alt","title":"alt","text":"Type Default string / Image alt attribute
"},{"location":"old-guides/V3/components/atoms/Input/","title":"Input page","text":"A flexible text input element
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/","title":"Input CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Input/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-inputbox-background / / --mbx-inputbox-background-light --mbx-inputbox-background --mbx-background-color-light --mbx-inputbox-background-dark --mbx-inputbox-background --mbx-background-color-dark --mbx-inputbox-text-color / / --mbx-inputbox-text-color-light --mbx-inputbox-text-color --mbx-text-color-light --mbx-inputbox-text-color-dark --mbx-inputbox-text-color --mbx-text-color-dark --mbx-inputbox-background-hover / / --mbx-inputbox-background-hover-light --mbx-inputbox-background-hover --mbx-background-color-hover-light --mbx-inputbox-background-hover-dark --mbx-inputbox-background-hover --mbx-background-color-hover-dark --mbx-inputbox-text-color-hover / / --mbx-inputbox-text-color-hover-light --mbx-inputbox-text-color-hover --mbx-text-color-hover-light --mbx-inputbox-text-color-hover-dark --mbx-inputbox-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background","title":"--mbx-inputbox-background","text":"Fallback Default / / Fallback value for mbx-inputbox-background-light and mbx-inputbox-background-dark
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-light","title":"--mbx-inputbox-background-light","text":"Fallback Default --mbx-inputbox-background --mbx-background-color-light Input background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-dark","title":"--mbx-inputbox-background-dark","text":"Fallback Default --mbx-inputbox-background --mbx-background-color-dark Input background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color","title":"--mbx-inputbox-text-color","text":"Fallback Default / / Fallback value for mbx-inputbox-text-color-light and mbx-inputbox-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-light","title":"--mbx-inputbox-text-color-light","text":"Fallback Default --mbx-inputbox-text-color --mbx-text-color-light Input text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-dark","title":"--mbx-inputbox-text-color-dark","text":"Fallback Default --mbx-inputbox-text-color --mbx-text-color-dark Input text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-hover","title":"--mbx-inputbox-background-hover","text":"Fallback Default / / Fallback value for mbx-inputbox-background-hover-light and mbx-inputbox-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-hover-light","title":"--mbx-inputbox-background-hover-light","text":"Fallback Default --mbx-inputbox-background-hover --mbx-background-color-hover-light Input background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-background-hover-dark","title":"--mbx-inputbox-background-hover-dark","text":"Fallback Default --mbx-inputbox-background-hover --mbx-background-color-hover-dark Input background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover","title":"--mbx-inputbox-text-color-hover","text":"Fallback Default / / Fallback value for mbx-inputbox-text-color-hover-light and mbx-inputbox-text-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover-light","title":"--mbx-inputbox-text-color-hover-light","text":"Fallback Default --mbx-inputbox-text-color-hover --mbx-text-color-hover-light Input text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Input/css-vars/#-mbx-inputbox-text-color-hover-dark","title":"--mbx-inputbox-text-color-hover-dark","text":"Fallback Default --mbx-inputbox-text-color-hover --mbx-text-color-hover-dark Input text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Input/props/","title":"Input properties","text":""},{"location":"old-guides/V3/components/atoms/Input/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Input/props/#props-table","title":"Props table","text":"Parameter Type Default value string / placeholder string / readOnly boolean false onChange (newValue: string) => void () => {}"},{"location":"old-guides/V3/components/atoms/Input/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Input/props/#value","title":"value","text":"Type Default string / text input value
"},{"location":"old-guides/V3/components/atoms/Input/props/#placeholder","title":"placeholder","text":"Type Default string / label showed when no value is set
"},{"location":"old-guides/V3/components/atoms/Input/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, component value can only be set with value parameter
"},{"location":"old-guides/V3/components/atoms/Input/props/#onchange","title":"onChange","text":"Type Default (newValue: string) => void () => {} Callback triggered when Input component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Label/","title":"Label page","text":"A text wrapper, with many options to customize its content
"},{"location":"old-guides/V3/components/atoms/Label/css-vars/","title":"Label CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Label/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Label/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-label-text-color / / --mbx-label-text-color-light --mbx-label-text-color --mbx-text-color-light --mbx-label-text-color-dark --mbx-label-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/atoms/Label/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Label/css-vars/#-mbx-label-text-color","title":"--mbx-label-text-color","text":"Fallback Default / / Fallback value for mbx-label-text-color-light and mbx-label-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Label/css-vars/#-mbx-label-text-color-light","title":"--mbx-label-text-color-light","text":"Fallback Default --mbx-label-text-color --mbx-text-color-light Label text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Label/css-vars/#-mbx-label-text-color-dark","title":"--mbx-label-text-color-dark","text":"Fallback Default --mbx-label-text-color --mbx-text-color-dark Label text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Label/props/","title":"Label properties","text":""},{"location":"old-guides/V3/components/atoms/Label/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Label/props/#props-table","title":"Props table","text":"Parameter Type Default children string | string[] /"},{"location":"old-guides/V3/components/atoms/Label/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Label/props/#children","title":"children","text":"Type Default string | string[] / text content to show (string arrays are accepted)
"},{"location":"old-guides/V3/components/atoms/Link/","title":"Link page","text":"A re-defined <a> component, designed to be better used with links
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/","title":"Link CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Link/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-link-color / / --mbx-link-color-light --mbx-link-color --mbx-text-color-light --mbx-link-color-dark --mbx-link-color --mbx-text-color-dark --mbx-link-color-hover / / --mbx-link-color-hover-light --mbx-link-color-hover --mbx-link-color-light --mbx-link-color-hover-dark --mbx-link-color-hover --mbx-link-color-dark"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color","title":"--mbx-link-color","text":"Fallback Default / / Fallback value for mbx-link-color-light and mbx-link-color-dark
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-light","title":"--mbx-link-color-light","text":"Fallback Default --mbx-link-color --mbx-text-color-light Link text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-dark","title":"--mbx-link-color-dark","text":"Fallback Default --mbx-link-color --mbx-text-color-dark Link text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-hover","title":"--mbx-link-color-hover","text":"Fallback Default / / Fallback value for mbx-link-color-hover-light and mbx-link-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-hover-light","title":"--mbx-link-color-hover-light","text":"Fallback Default --mbx-link-color-hover --mbx-link-color-light Link text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Link/css-vars/#-mbx-link-color-hover-dark","title":"--mbx-link-color-hover-dark","text":"Fallback Default --mbx-link-color-hover --mbx-link-color-dark Link text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Link/props/","title":"Link properties","text":""},{"location":"old-guides/V3/components/atoms/Link/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Link/props/#props-table","title":"Props table","text":"Parameter Type Default to string / underline boolean true newTab string false children JSX.Element | string /"},{"location":"old-guides/V3/components/atoms/Link/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Link/props/#to","title":"to","text":"Type Default string / Link url
"},{"location":"old-guides/V3/components/atoms/Link/props/#underline","title":"underline","text":"Type Default boolean true if true, the link will be displayed underlined (default=true)
"},{"location":"old-guides/V3/components/atoms/Link/props/#newtab","title":"newTab","text":"Type Default string false f true, the link will be opened in a new tab
"},{"location":"old-guides/V3/components/atoms/Link/props/#children","title":"children","text":"Type Default JSX.Element | string / Link content
"},{"location":"old-guides/V3/components/atoms/PackageVersion/","title":"PackageVersion page","text":"A tiny and smart component, to show a package version from many sources (like NPM registry or directly from Github repo). Can be easily integrated into more complex components.
"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/","title":"PackageVersion CSS variables","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-packageversion-text-color / / --mbx-packageversion-text-color-light --mbx-packageversion-text-color --mbx-label-text-color-light --mbx-packageversion-text-color-dark --mbx-packageversion-text-color --mbx-label-text-color-dark"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color","title":"--mbx-packageversion-text-color","text":"Fallback Default / / Fallback value for mbx-packageversion-text-color-light and mbx-packageversion-text-color-dark
"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color-light","title":"--mbx-packageversion-text-color-light","text":"Fallback Default --mbx-packageversion-text-color --mbx-label-text-color-light PackageVersion text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/PackageVersion/css-vars/#-mbx-packageversion-text-color-dark","title":"--mbx-packageversion-text-color-dark","text":"Fallback Default --mbx-packageversion-text-color --mbx-label-text-color-dark PackageVersion text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/","title":"PackageVersion properties","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#props-table","title":"Props table","text":"Parameter Type Default name () => void / source npm | github-release | github / user string / branch string /"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#name","title":"name","text":"Type Default () => void / Library name (it is used as repo name when source = github)
"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#source","title":"source","text":"Type Default npm | github-release | github / Package location (actually, NPM, Github and Github release are supported)
"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#user","title":"user","text":"Type Default string / Library owner (it is used as repo owner username when source = github or source = github-release)
"},{"location":"old-guides/V3/components/atoms/PackageVersion/props/#branch","title":"branch","text":"Type Default string / Github repo default branch (used when source = github)
"},{"location":"old-guides/V3/components/atoms/RadioButton/","title":"RadioButton page","text":"A single radio button component. Optionally, can prevent user to deselect it
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/","title":"RadioButton CSS variables","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-radio-background / / --mbx-radio-background-light --mbx-radio-background radial-gradient(#f1f1f1 20%, #e4e4e4 30%, #bebebe 55%, #f0f0f0 20%) --mbx-radio-background-dark --mbx-radio-background radial-gradient(closest-side, #2d3748 20%, #232b38 30%, #1d1f44 55%, #191f29 20%) --mbx-radio-background-hover / / --mbx-radio-background-hover-light --mbx-radio-background-hover --mbx-radio-background-light --mbx-radio-background-hover-dark --mbx-radio-background-hover --mbx-radio-background-dark --mbx-radio-icon-background / / --mbx-radio-icon-background-light --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #2d3748, #191f29) --mbx-radio-icon-background-dark --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #dbe0e6, #949494)"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background","title":"--mbx-radio-background","text":"Fallback Default / / Fallback value for mbx-radio-background-light and mbx-radio-background-dark
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-light","title":"--mbx-radio-background-light","text":"Fallback Default --mbx-radio-background radial-gradient(#f1f1f1 20%, #e4e4e4 30%, #bebebe 55%, #f0f0f0 20%) RadioButton background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-dark","title":"--mbx-radio-background-dark","text":"Fallback Default --mbx-radio-background radial-gradient(closest-side, #2d3748 20%, #232b38 30%, #1d1f44 55%, #191f29 20%) RadioButton background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover","title":"--mbx-radio-background-hover","text":"Fallback Default / / Fallback value for mbx-radio-background-hover-light and mbx-radio-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover-light","title":"--mbx-radio-background-hover-light","text":"Fallback Default --mbx-radio-background-hover --mbx-radio-background-light RadioButton background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-background-hover-dark","title":"--mbx-radio-background-hover-dark","text":"Fallback Default --mbx-radio-background-hover --mbx-radio-background-dark RadioButton background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background","title":"--mbx-radio-icon-background","text":"Fallback Default / / Fallback value for mbx-radio-icon-background-light and mbx-radio-icon-background-dark
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background-light","title":"--mbx-radio-icon-background-light","text":"Fallback Default --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #2d3748, #191f29) RadioButton icon background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/RadioButton/css-vars/#-mbx-radio-icon-background-dark","title":"--mbx-radio-icon-background-dark","text":"Fallback Default --mbx-radio-icon-background radial-gradient(circle at 23px 23px, #dbe0e6, #949494) RadioButton icon background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/RadioButton/props/","title":"RadioButton properties","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean false deselectable boolean false onChange (newValue: boolean) => void () => {}"},{"location":"old-guides/V3/components/atoms/RadioButton/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/RadioButton/props/#value","title":"value","text":"Type Default boolean false actual radio button value (radio icon visiblity)
"},{"location":"old-guides/V3/components/atoms/RadioButton/props/#deselectable","title":"deselectable","text":"Type Default boolean false if false, the button can be selected only once (the value can't change then)
"},{"location":"old-guides/V3/components/atoms/RadioButton/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when RadioButton component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Rater/","title":"Rater page","text":"A modern rater component, to let the user leave a review within your app
"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/","title":"Rater CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-rater-background / / --mbx-rater-background-light --mbx-rater-background --mbx-background-light --mbx-rater-background-dark --mbx-rater-background --mbx-background-dark"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#-mbx-rater-background","title":"--mbx-rater-background","text":"Fallback Default / / Fallback value for mbx-rater-background-light and mbx-rater-background-dark
"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#-mbx-rater-background-light","title":"--mbx-rater-background-light","text":"Fallback Default --mbx-rater-background --mbx-background-light Rater background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Rater/css-vars/#-mbx-rater-background-dark","title":"--mbx-rater-background-dark","text":"Fallback Default --mbx-rater-background --mbx-background-dark Rater background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Rater/props/","title":"Rater properties","text":""},{"location":"old-guides/V3/components/atoms/Rater/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Rater/props/#props-table","title":"Props table","text":"Parameter Type Default value number 0 max number 5 readOnly boolean false type star|circle 'star' vertical boolean false onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/atoms/Rater/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Rater/props/#value","title":"value","text":"Type Default number 0 actual vote
"},{"location":"old-guides/V3/components/atoms/Rater/props/#max","title":"max","text":"Type Default number 5 max vote (max number of icons displayed)
"},{"location":"old-guides/V3/components/atoms/Rater/props/#readonly","title":"readOnly","text":"Type Default boolean false if true, the rate can't be changed by clicking on the icons
"},{"location":"old-guides/V3/components/atoms/Rater/props/#type","title":"type","text":"Type Default star|circle 'star' vote icons type
"},{"location":"old-guides/V3/components/atoms/Rater/props/#vertical","title":"vertical","text":"Type Default boolean false if true, rate icons will be showed vertically
"},{"location":"old-guides/V3/components/atoms/Rater/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} callback triggered when user select a vote
"},{"location":"old-guides/V3/components/atoms/Selector/","title":"Selector page","text":"A re-defined select component
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/","title":"Selector CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-selector-background / / --mbx-selector-background-light --mbx-selector-background --mbx-background-light --mbx-selector-background-dark --mbx-selector-background --mbx-background-dark)) --mbx-selector-text-color / / --mbx-selector-text-color-light --mbx-selector-text-color --mbx-text-color-light --mbx-selector-text-color-dark --mbx-selector-text-color [--mbx-text-color-dark --mbx-selector-background-hover / / --mbx-selector-background-hover-light --mbx-selector-background-hover --mbx-selector-background-light --mbx-selector-background-hover-dark --mbx-selector-background-hover --mbx-selector-background-dark --mbx-selector-text-color-hover / / --mbx-selector-text-color-hover-light --mbx-selector-text-color-hover --mbx-text-color-hover-light --mbx-selector-text-color-hover-dark --mbx-selector-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background","title":"--mbx-selector-background","text":"Fallback Default / / Fallback value for mbx-selector-background-light and mbx-selector-background-dark
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-light","title":"--mbx-selector-background-light","text":"Fallback Default --mbx-selector-background --mbx-background-light Selector background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-dark","title":"--mbx-selector-background-dark","text":"Fallback Default --mbx-selector-background --mbx-background-dark)) Selector background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color","title":"--mbx-selector-text-color","text":"Fallback Default / / Fallback value for mbx-selector-text-color-light and mbx-selector-text-color-dark
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-light","title":"--mbx-selector-text-color-light","text":"Fallback Default --mbx-selector-text-color --mbx-text-color-light Selector text color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-dark","title":"--mbx-selector-text-color-dark","text":"Fallback Default --mbx-selector-text-color [--mbx-text-color-dark Selector text color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-hover","title":"--mbx-selector-background-hover","text":"Fallback Default / / Fallback value for mbx-selector-background-hover-light and mbx-selector-background-hover-dark
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-hover-light","title":"--mbx-selector-background-hover-light","text":"Fallback Default --mbx-selector-background-hover --mbx-selector-background-light Selector background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-background-hover-dark","title":"--mbx-selector-background-hover-dark","text":"Fallback Default --mbx-selector-background-hover --mbx-selector-background-dark Selector background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover","title":"--mbx-selector-text-color-hover","text":"Fallback Default / / Fallback value for mbx-selector-text-color-hover-light and mbx-selector-text-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover-light","title":"--mbx-selector-text-color-hover-light","text":"Fallback Default --mbx-selector-text-color-hover --mbx-text-color-hover-light Selector text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Selector/css-vars/#-mbx-selector-text-color-hover-dark","title":"--mbx-selector-text-color-hover-dark","text":"Fallback Default --mbx-selector-text-color-hover --mbx-text-color-hover-dark Selector text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Selector/props/","title":"Selector properties","text":""},{"location":"old-guides/V3/components/atoms/Selector/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Selector/props/#props-table","title":"Props table","text":"Parameter Type Default value number 0 elements string[] [] optionClassName string / onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/atoms/Selector/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Selector/props/#value","title":"value","text":"Type Default number 0 option index actually displayed
"},{"location":"old-guides/V3/components/atoms/Selector/props/#elements","title":"elements","text":"Type Default string[] [] selector options array, every element must be a string
"},{"location":"old-guides/V3/components/atoms/Selector/props/#optionclassname","title":"optionClassName","text":"Type Default string / className applied on every options inside the selector
"},{"location":"old-guides/V3/components/atoms/Selector/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Selector component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Slider/","title":"Slider page","text":"A modern range input component, to control a value using a simple slider
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/","title":"Slider CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-slider-background / / --mbx-slider-background-light --mbx-slider-background --mbx-background-light --mbx-slider-background-dark --mbx-slider-background --mbx-background-dark --mbx-slider-thumb-color / / --mbx-slider-thumb-color-light --mbx-slider-thumb-color radial-gradient(#2d3748, #1d232e) --mbx-slider-thumb-color-dark --mbx-slider-thumb-color radial-gradient(#e3e4e9, #9b9999) --mbx-slider-thumb-color-hover / / --mbx-slider-thumb-color-hover-light --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-light --mbx-slider-thumb-color-hover-dark --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-dark"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-background","title":"--mbx-slider-background","text":"Fallback Default / / Fallback value for mbx-slider-background-light and mbx-slider-background-dark
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-background-light","title":"--mbx-slider-background-light","text":"Fallback Default --mbx-slider-background --mbx-background-light Slider background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-background-dark","title":"--mbx-slider-background-dark","text":"Fallback Default --mbx-slider-background --mbx-background-dark Slider background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color","title":"--mbx-slider-thumb-color","text":"Fallback Default / / Fallback value for mbx-slider-thumb-color-light and mbx-slider-thumb-color-dark
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-light","title":"--mbx-slider-thumb-color-light","text":"Fallback Default --mbx-slider-thumb-color radial-gradient(#2d3748, #1d232e) Slider thumb color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-dark","title":"--mbx-slider-thumb-color-dark","text":"Fallback Default --mbx-slider-thumb-color radial-gradient(#e3e4e9, #9b9999) Slider thumb color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover","title":"--mbx-slider-thumb-color-hover","text":"Fallback Default / / Fallback value for mbx-slider-thumb-color-hover-light and mbx-slider-thumb-color-hover-dark
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover-light","title":"--mbx-slider-thumb-color-hover-light","text":"Fallback Default --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-light Slider thumb color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/atoms/Slider/css-vars/#-mbx-slider-thumb-color-hover-dark","title":"--mbx-slider-thumb-color-hover-dark","text":"Fallback Default --mbx-slider-thumb-color-hover --mbx-slider-thumb-color-dark Slider thumb color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/atoms/Slider/props/","title":"Slider properties","text":""},{"location":"old-guides/V3/components/atoms/Slider/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Slider/props/#props-table","title":"Props table","text":"Parameter Type Default value number / min number / max number / readOnly boolean / onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/atoms/Slider/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Slider/props/#value","title":"value","text":"Type Default number / Actual slider value
"},{"location":"old-guides/V3/components/atoms/Slider/props/#min","title":"min","text":"Type Default number / Min allowed value
"},{"location":"old-guides/V3/components/atoms/Slider/props/#max","title":"max","text":"Type Default number / Max allowed value
"},{"location":"old-guides/V3/components/atoms/Slider/props/#readonly","title":"readOnly","text":"Type Default boolean / if true, component value can only be set with value parameter
"},{"location":"old-guides/V3/components/atoms/Slider/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Slider component input value is changed by the user
"},{"location":"old-guides/V3/components/atoms/Spinner/","title":"Spinner page","text":"A smart status indicator, optionally with custom images showed for every state (defaults are loading,success and error)
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/","title":"Spinner CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-spinner-success-color / / --mbx-spinner-success-color-light --mbx-spinner-success-color #05bc29 --mbx-spinner-success-color-dark --mbx-spinner-success-color #05bc29 --mbx-spinner-error-color / / --mbx-spinner-error-color-light --mbx-spinner-error-color #ff0000 --mbx-spinner-error-color-dark --mbx-spinner-error-color #ff0000 --mbx-spinner-loading-color / / --mbx-spinner-loading-color-light --mbx-spinner-loading-color #202020 --mbx-spinner-loading-color-dark --mbx-spinner-loading-color #202020"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-success-color","title":"--mbx-spinner-success-color","text":"Fallback Default / / Fallback value for --mbx-spinner-success-color-light and --mbx-spinner-success-color-dark
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-success-color-light","title":"--mbx-spinner-success-color-light","text":"Fallback Default --mbx-spinner-success-color #05bc29 Spinner success color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-success-color-dark","title":"--mbx-spinner-success-color-dark","text":"Fallback Default --mbx-spinner-success-color #05bc29 Spinner success color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-error-color","title":"--mbx-spinner-error-color","text":"Fallback Default / / Fallback value for --mbx-spinner-error-color-light and --mbx-spinner-error-color-dark
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-error-color-light","title":"--mbx-spinner-error-color-light","text":"Fallback Default --mbx-spinner-error-color #ff0000 Spinner error color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-error-color-dark","title":"--mbx-spinner-error-color-dark","text":"Fallback Default --mbx-spinner-error-color #ff0000 Spinner error color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color","title":"--mbx-spinner-loading-color","text":"Fallback Default / / Fallback value for --mbx-spinner-loading-color-light and --mbx-spinner-loading-color-dark
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color-light","title":"--mbx-spinner-loading-color-light","text":"Fallback Default --mbx-spinner-loading-color #202020 Spinner loading color when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Spinner/css-vars/#-mbx-spinner-loading-color-dark","title":"--mbx-spinner-loading-color-dark","text":"Fallback Default --mbx-spinner-loading-color #202020 Spinner loading color when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Spinner/props/","title":"Spinner properties","text":""},{"location":"old-guides/V3/components/atoms/Spinner/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Spinner/props/#props-table","title":"Props table","text":"Parameter Type Default value number 'loading' statuses Record /"},{"location":"old-guides/V3/components/atoms/Spinner/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Spinner/props/#value","title":"value","text":"Type Default number 'loading' Spinner status
"},{"location":"old-guides/V3/components/atoms/Spinner/props/#statuses","title":"statuses","text":"Type Default Record / Custom statuses, to map every icon with a specific status
"},{"location":"old-guides/V3/components/atoms/Toggle/","title":"Toggle page","text":"A compact Toggle switcher, customized to reflect its actual status
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/","title":"Toggle CSS variables","text":""},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-toggle-background / / --mbx-toggle-background-light --mbx-toggle-background --mbx-background-light --mbx-toggle-background-dark --mbx-toggle-background --mbx-background-dark --mbx-toggle-icon-on-internal-color / / --mbx-toggle-icon-on-internal-color-light --mbx-toggle-icon-on-internal-color #ffffff --mbx-toggle-icon-on-internal-color-dark --mbx-toggle-icon-on-internal-color #ffffff --mbx-toggle-icon-on-external-color / / --mbx-toggle-icon-on-external-color-light --mbx-toggle-icon-on-external-color #adadad --mbx-toggle-icon-on-external-color-dark --mbx-toggle-icon-on-external-color #adadad --mbx-toggle-icon-off-internal-color / / --mbx-toggle-icon-off-internal-color-light --mbx-toggle-icon-off-internal-color #a5a5a5 --mbx-toggle-icon-off-internal-color-dark --mbx-toggle-icon-off-internal-color #a5a5a5 --mbx-toggle-icon-off-external-color / / --mbx-toggle-icon-off-external-color-light --mbx-toggle-icon-off-external-color #a7a3a3 --mbx-toggle-icon-off-external-color-dark --mbx-toggle-icon-off-external-color #a7a3a3"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-background","title":"--mbx-toggle-background","text":"Fallback Default / / Fallback value for --mbx-toggle-background-light and --mbx-toggle-background-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-background-light","title":"--mbx-toggle-background-light","text":"Fallback Default --mbx-toggle-background --mbx-background-light Toggle background when dark mode is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-background-dark","title":"--mbx-toggle-background-dark","text":"Fallback Default --mbx-toggle-background --mbx-background-dark Toggle background when dark mode is on
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color","title":"--mbx-toggle-icon-on-internal-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-on-internal-color-light and --mbx-toggle-icon-on-internal-color-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color-light","title":"--mbx-toggle-icon-on-internal-color-light","text":"Fallback Default --mbx-toggle-icon-on-internal-color #ffffff Toggle icon internal color, when dark mode is off and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-internal-color-dark","title":"--mbx-toggle-icon-on-internal-color-dark","text":"Fallback Default --mbx-toggle-icon-on-internal-color #ffffff Toggle icon internal color, when dark mode is off and toggle status is on
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color","title":"--mbx-toggle-icon-on-external-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-on-external-color-light and --mbx-toggle-icon-on-external-color-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color-light","title":"--mbx-toggle-icon-on-external-color-light","text":"Fallback Default --mbx-toggle-icon-on-external-color #adadad Toggle icon external color, when dark mode is off and toggle status is on
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-on-external-color-dark","title":"--mbx-toggle-icon-on-external-color-dark","text":"Fallback Default --mbx-toggle-icon-on-external-color #adadad Toggle icon external color, when dark mode is on and toggle status is on
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color","title":"--mbx-toggle-icon-off-internal-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-off-internal-color-light and --mbx-toggle-icon-off-internal-color-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color-light","title":"--mbx-toggle-icon-off-internal-color-light","text":"Fallback Default --mbx-toggle-icon-off-internal-color #a5a5a5 Toggle icon internal color, when dark mode is off and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-internal-color-dark","title":"--mbx-toggle-icon-off-internal-color-dark","text":"Fallback Default --mbx-toggle-icon-off-internal-color #a5a5a5 Toggle icon internal color, when dark mode is on and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color","title":"--mbx-toggle-icon-off-external-color","text":"Fallback Default / / Fallback value for --mbx-toggle-icon-off-external-color-light and --mbx-toggle-icon-off-external-color-dark
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color-light","title":"--mbx-toggle-icon-off-external-color-light","text":"Fallback Default --mbx-toggle-icon-off-external-color #a7a3a3 Toggle icon external color, when dark mode is off and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/css-vars/#-mbx-toggle-icon-off-external-color-dark","title":"--mbx-toggle-icon-off-external-color-dark","text":"Fallback Default --mbx-toggle-icon-off-external-color #a7a3a3 Toggle icon external color, when dark mode is on and toggle status is off
"},{"location":"old-guides/V3/components/atoms/Toggle/props/","title":"Toggle properties","text":""},{"location":"old-guides/V3/components/atoms/Toggle/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/atoms/Toggle/props/#props-table","title":"Props table","text":"Parameter Type Default value boolean / onIcon JSX.Element / icon JSX.Element / offIcon JSX.Element / onChange (newValue: boolean) => void () => {}"},{"location":"old-guides/V3/components/atoms/Toggle/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/atoms/Toggle/props/#value","title":"value","text":"Type Default boolean / toggle status (true - on/false - off)
"},{"location":"old-guides/V3/components/atoms/Toggle/props/#onicon","title":"onIcon","text":"Type Default JSX.Element / custom toggle on icon (value === true)
"},{"location":"old-guides/V3/components/atoms/Toggle/props/#icon","title":"icon","text":"Type Default JSX.Element / custom toggle icon, used as a default icon
"},{"location":"old-guides/V3/components/atoms/Toggle/props/#officon","title":"offIcon","text":"Type Default JSX.Element / custom toggle off icon (value === false)
"},{"location":"old-guides/V3/components/atoms/Toggle/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when Toggle component input value is changed by the user
"},{"location":"old-guides/V3/components/molecules/","title":"MoBrix-ui molecules","text":""},{"location":"old-guides/V3/components/molecules/#summary","title":"Summary","text":" - Card
- Carousel
- Container
- DismissableCard
- Dropdown
- ExpandableContainer
- FormField
- List
- Modal
- Popup
- RadioButtonGroup
- Review
- Table
- TabViewer
"},{"location":"old-guides/V3/components/molecules/Card/","title":"Card page","text":"A Card component. Its UI depends on given parameters (header, body and footer)
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/","title":"Card CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Card/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-card-background / / --mbx-card-background-light --mbx-card-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-card-background-dark --mbx-card-background linear-gradient(to right, #2d3748, #1d232e) --mbx-card-text-color / / --mbx-card-text-color-light --mbx-card-text-color --mbx-text-color-light --mbx-card-text-color-dark --mbx-card-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-background","title":"--mbx-card-background","text":"Fallback Default / / Fallback value for --mbx-card-background-light and --mbx-card-background-dark
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-background-light","title":"--mbx-card-background-light","text":"Fallback Default --mbx-card-background linear-gradient(to right, #fff, #ededee, #e6e7e7) Card background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-background-dark","title":"--mbx-card-background-dark","text":"Fallback Default --mbx-card-background linear-gradient(to right, #2d3748, #1d232e) Card background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-text-color","title":"--mbx-card-text-color","text":"Fallback Default / / Fallback value for --mbx-card-text-color-light and --mbx-card-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-text-color-light","title":"--mbx-card-text-color-light","text":"Fallback Default --mbx-card-text-color --mbx-text-color-light Card text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Card/css-vars/#-mbx-card-text-color-dark","title":"--mbx-card-text-color-dark","text":"Fallback Default --mbx-card-text-color --mbx-text-color-dark Card text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Card/props/","title":"Card properties","text":""},{"location":"old-guides/V3/components/molecules/Card/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Card/props/#props-table","title":"Props table","text":"Parameter Type Default header JSX.Element | string / body JSX.Element | string / footer JSX.Element | string / headerClassName string / bodyClassName string / footerClassName string / headerProps Record / bodyProps Record / footerProps Record / noDivider boolean / noTopDivider boolean / noBottomDivider boolean / children JSX.Element | string /"},{"location":"old-guides/V3/components/molecules/Card/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Card/props/#header","title":"header","text":"Type Default JSX.Element | string / Card header content
"},{"location":"old-guides/V3/components/molecules/Card/props/#body","title":"body","text":"Type Default JSX.Element | string / Card body content
"},{"location":"old-guides/V3/components/molecules/Card/props/#footer","title":"footer","text":"Type Default JSX.Element | string / Card footer content
"},{"location":"old-guides/V3/components/molecules/Card/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on the Card header
"},{"location":"old-guides/V3/components/molecules/Card/props/#bodyclassname","title":"bodyClassName","text":"Type Default string / Custom classname applied on the Card body
"},{"location":"old-guides/V3/components/molecules/Card/props/#footerclassname","title":"footerClassName","text":"Type Default string / Custom classname applied on the Card footer
"},{"location":"old-guides/V3/components/molecules/Card/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on the Card header
"},{"location":"old-guides/V3/components/molecules/Card/props/#bodyprops","title":"bodyProps","text":"Type Default Record / Custom props applied on the Card body
"},{"location":"old-guides/V3/components/molecules/Card/props/#footerprops","title":"footerProps","text":"Type Default Record / Custom props applied on the Card footer
"},{"location":"old-guides/V3/components/molecules/Card/props/#nodivider","title":"noDivider","text":"Type Default boolean / If true, hide all dividers
"},{"location":"old-guides/V3/components/molecules/Card/props/#notopdivider","title":"noTopDivider","text":"Type Default boolean / If true, hide the top divider, between header and body
"},{"location":"old-guides/V3/components/molecules/Card/props/#nobottomdivider","title":"noBottomDivider","text":"Type Default boolean / If true, hide the top divider, between body and footer
"},{"location":"old-guides/V3/components/molecules/Card/props/#children","title":"children","text":"Type Default JSX.Element | string / Card content
"},{"location":"old-guides/V3/components/molecules/Carousel/","title":"Carousel page","text":"A compact carousel, to show any component (or image) into a slide, with dots and arrow button to go next/previous
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/","title":"Carousel CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-carousel-background / / --mbx-carousel-background-light --mbx-carousel-background --mbx-background-light --mbx-carousel-background-dark --mbx-carousel-background --mbx-background-dark --mbx-carousel-arrow-color / / --mbx-carousel-arrow-color-light --mbx-carousel-arrow-color #252525 --mbx-carousel-arrow-color-dark --mbx-carousel-arrow-color #e2e2e2 --mbx-carousel-arrow-color-hover / / --mbx-carousel-arrow-color-hover-light --mbx-carousel-arrow-color-hover #287dfd --mbx-carousel-arrow-color-hover-dark --mbx-carousel-arrow-color-hover #ff8007 --mbx-carousel-dot-empty-background / / --mbx-carousel-dot-empty-background-light --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) --mbx-carousel-dot-empty-background-dark --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) --mbx-carousel-dot-full-background / / --mbx-carousel-dot-full-background-light --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) --mbx-carousel-dot-full-background-dark --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4)"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-background","title":"--mbx-carousel-background","text":"Fallback Default / / Fallback value for --mbx-carousel-background-light and --mbx-carousel-background-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-background-light","title":"--mbx-carousel-background-light","text":"Fallback Default --mbx-carousel-background --mbx-background-light Carousel background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-background-dark","title":"--mbx-carousel-background-dark","text":"Fallback Default --mbx-carousel-background --mbx-background-dark Carousel background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color","title":"--mbx-carousel-arrow-color","text":"Fallback Default / / Fallback value for --mbx-carousel-arrow-color-light and --mbx-carousel-arrow-color-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-light","title":"--mbx-carousel-arrow-color-light","text":"Fallback Default --mbx-carousel-arrow-color #252525 Carousel arrow color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-dark","title":"--mbx-carousel-arrow-color-dark","text":"Fallback Default --mbx-carousel-arrow-color #e2e2e2 Carousel arrow color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-hover","title":"--mbx-carousel-arrow-color-hover","text":"Fallback Default / / Fallback value for --mbx-carousel-arrow-color-hover-light and --mbx-carousel-arrow-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-hover-light","title":"--mbx-carousel-arrow-color-hover-light","text":"Fallback Default --mbx-carousel-arrow-color-hover #287dfd Carousel arrow color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-arrow-color-hover-dark","title":"--mbx-carousel-arrow-color-hover-dark","text":"Fallback Default --mbx-carousel-arrow-color-hover #ff8007 Carousel arrow color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background","title":"--mbx-carousel-dot-empty-background","text":"Fallback Default / / Fallback value for --mbx-carousel-dot-empty-background-light and --mbx-carousel-dot-empty-background-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background-light","title":"--mbx-carousel-dot-empty-background-light","text":"Fallback Default --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) Carousel empty dot background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-empty-background-dark","title":"--mbx-carousel-dot-empty-background-dark","text":"Fallback Default --mbx-carousel-dot-empty-background radial-gradient(#000000, #181818, #282828, #3a3a3a, #4c4c4c, #6b6a6a, #858383) Carousel empty dot background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background","title":"--mbx-carousel-dot-full-background","text":"Fallback Default / / Fallback value for --mbx-carousel-dot-full-background-light and --mbx-carousel-dot-full-background-dark
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background-light","title":"--mbx-carousel-dot-full-background-light","text":"Fallback Default --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) Carousel full dot background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Carousel/css-vars/#-mbx-carousel-dot-full-background-dark","title":"--mbx-carousel-dot-full-background-dark","text":"Fallback Default --mbx-carousel-dot-full-background linear-gradient(to top, #ff8007, #fd8616, #fd9b3f, #fd9c40, #fcbb7f, #fad6b4) Carousel full dot background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Carousel/props/","title":"Carousel properties","text":""},{"location":"old-guides/V3/components/molecules/Carousel/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Carousel/props/#props-table","title":"Props table","text":"Parameter Type Default elements (JSX.Element | string)[] [] onChange (newValue: number) => void () => {} value number 0 arrowClassName string / dotClassName string /"},{"location":"old-guides/V3/components/molecules/Carousel/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Carousel/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] [] Carousel elements
"},{"location":"old-guides/V3/components/molecules/Carousel/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when Carousel component input value is changed by the user
"},{"location":"old-guides/V3/components/molecules/Carousel/props/#value","title":"value","text":"Type Default number 0 Initial element to show (as index)
"},{"location":"old-guides/V3/components/molecules/Carousel/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the Carousel arrows
"},{"location":"old-guides/V3/components/molecules/Carousel/props/#dotclassname","title":"dotClassName","text":"Type Default string / Custom classname applied on every Carousel dot
"},{"location":"old-guides/V3/components/molecules/Container/","title":"Container page","text":"A simple but smart container, enhanced with MoBrix-ui common props
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/","title":"Container CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Container/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-container-background / / --mbx-container-background-light --mbx-container-background --mbx-background-light --mbx-container-background-dark --mbx-container-background --mbx-background-dark --mbx-container-text-color / / --mbx-container-text-color-light --mbx-container-text-color --mbx-text-color-light --mbx-container-text-color-dark --mbx-container-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-background","title":"--mbx-container-background","text":"Fallback Default / / Fallback value for --mbx-container-background-light and --mbx-container-background-dark
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-background-light","title":"--mbx-container-background-light","text":"Fallback Default --mbx-container-background --mbx-background-light Container background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-background-dark","title":"--mbx-container-background-dark","text":"Fallback Default --mbx-container-background --mbx-background-dark Container background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-text-color","title":"--mbx-container-text-color","text":"Fallback Default / / Fallback value for --mbx-container-text-color-light and --mbx-container-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-text-color-light","title":"--mbx-container-text-color-light","text":"Fallback Default --mbx-container-text-color --mbx-text-color-light Container text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Container/css-vars/#-mbx-container-text-color-dark","title":"--mbx-container-text-color-dark","text":"Fallback Default --mbx-container-text-color --mbx-text-color-dark Container text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Container/props/","title":"Container properties","text":""},{"location":"old-guides/V3/components/molecules/Container/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Container/props/#props-table","title":"Props table","text":"Parameter Type Default children any / wrapper div | header | footer div"},{"location":"old-guides/V3/components/molecules/Container/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Container/props/#children","title":"children","text":"Type Default any / content to render inside Container
"},{"location":"old-guides/V3/components/molecules/Container/props/#wrapper","title":"wrapper","text":"Type Default div | header | footer div component wrapper type
"},{"location":"old-guides/V3/components/molecules/DismissableCard/","title":"DismissableCard page","text":"A standard Card with a dismiss function
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/","title":"DismissableCard CSS variables","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-dismissablecard-background / / --mbx-dismissablecard-background-light --mbx-dismissablecard-background --mbx-card-background-light --mbx-dismissablecard-background-dark --mbx-dismissablecard-background --mbx-card-background-dark --mbx-dismissablecard-text-color / / --mbx-dismissablecard-text-color-light --mbx-dismissablecard-text-color --mbx-card-text-color-light --mbx-dismissablecard-text-color-dark --mbx-dismissablecard-text-color --mbx-card-text-color-dark --mbx-dismissablecard-x-color / / --mbx-dismissablecard-x-color-light --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-light --mbx-dismissablecard-x-color-dark --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-dark --mbx-dismissablecard-x-color-hover / / --mbx-dismissablecard-x-color-hover-light --mbx-dismissablecard-x-color-hover red --mbx-dismissablecard-x-color-hover-dark --mbx-dismissablecard-x-color-hover red"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background","title":"--mbx-dismissablecard-background","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-background-light and --mbx-dismissablecard-background-dark
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background-light","title":"--mbx-dismissablecard-background-light","text":"Fallback Default --mbx-dismissablecard-background --mbx-card-background-light DismissableCard background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-background-dark","title":"--mbx-dismissablecard-background-dark","text":"Fallback Default --mbx-dismissablecard-background --mbx-card-background-dark DismissableCard background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color","title":"--mbx-dismissablecard-text-color","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-text-color-light and --mbx-dismissablecard-text-color-dark
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color-light","title":"--mbx-dismissablecard-text-color-light","text":"Fallback Default --mbx-dismissablecard-text-color --mbx-card-text-color-light DismissableCard text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-text-color-dark","title":"--mbx-dismissablecard-text-color-dark","text":"Fallback Default --mbx-dismissablecard-text-color --mbx-card-text-color-dark DismissableCard text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color","title":"--mbx-dismissablecard-x-color","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-x-color-light and --mbx-dismissablecard-x-color-dark
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-light","title":"--mbx-dismissablecard-x-color-light","text":"Fallback Default --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-light DismissableCard x icon color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-dark","title":"--mbx-dismissablecard-x-color-dark","text":"Fallback Default --mbx-dismissablecard-x-color --mbx-dismissablecard-text-color-dark DismissableCard x icon color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover","title":"--mbx-dismissablecard-x-color-hover","text":"Fallback Default / / Fallback value for --mbx-dismissablecard-x-color-hover-light and --mbx-dismissablecard-x-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover-light","title":"--mbx-dismissablecard-x-color-hover-light","text":"Fallback Default --mbx-dismissablecard-x-color-hover red DismissableCard x icon color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/DismissableCard/css-vars/#-mbx-dismissablecard-x-color-hover-dark","title":"--mbx-dismissablecard-x-color-hover-dark","text":"Fallback Default --mbx-dismissablecard-x-color-hover red DismissableCard x icon color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/","title":"DismissableCard properties","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} alwaysVisible boolean false header JSX.Element | string / body JSX.Element | string / footer JSX.Element | string / noDivider boolean / noTopDivider boolean / noBottomDivider boolean / children JSX.Element | string / headerClassName string / bodyClassName string / footerClassName string / headerProps Record / bodyProps Record / footerProps Record /"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#onclose","title":"onClose","text":"Type Default () => void () => {} Callback triggered when the X icon is clicked
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#alwaysvisible","title":"alwaysVisible","text":"Type Default boolean false If true, the DismissableCard won't disappear if the X icon is clicked (can be hidden with hide shared prop)
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#header","title":"header","text":"Type Default JSX.Element | string / Card header content - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#body","title":"body","text":"Type Default JSX.Element | string / Card body content - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#footer","title":"footer","text":"Type Default JSX.Element | string / Card footer content - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#nodivider","title":"noDivider","text":"Type Default boolean / If true, hide all dividers - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#notopdivider","title":"noTopDivider","text":"Type Default boolean / If true, hide the top divider, between header and body - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#nobottomdivider","title":"noBottomDivider","text":"Type Default boolean / If true, hide the top divider, between body and footer - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#children","title":"children","text":"Type Default JSX.Element | string / Card content - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on the Card header - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#bodyclassname","title":"bodyClassName","text":"Type Default string / Custom classname applied on the Card body - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#footerclassname","title":"footerClassName","text":"Type Default string / Custom classname applied on the Card footer - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on the Card header - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#bodyprops","title":"bodyProps","text":"Type Default Record / Custom props applied on the Card body - extended from Card component
"},{"location":"old-guides/V3/components/molecules/DismissableCard/props/#footerprops","title":"footerProps","text":"Type Default Record / Custom props applied on the Card footer - extended from Card component
"},{"location":"old-guides/V3/components/molecules/Dropdown/","title":"Dropdown page","text":"Show a list of elements in a dropdown menu (with fade-in and out effects). Can be easily customized and every element style and behaviour (with a callback) can be customized too.
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/","title":"Dropdown CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-dropdown-background / / --mbx-dropdown-background-light --mbx-dropdown-background --mbx-background-light --mbx-dropdown-background-dark --mbx-dropdown-background --mbx-background-dark --mbx-dropdown-text-color / / --mbx-dropdown-text-color-light --mbx-dropdown-text-color --mbx-text-color-light --mbx-dropdown-text-color-dark --mbx-dropdown-text-color --mbx-text-color-dark --mbx-dropdown-background-hover / / --mbx-dropdown-background-hover-light --mbx-dropdown-background --mbx-background-hover-light --mbx-dropdown-background-hover-dark --mbx-dropdown-background --mbx-background-hover-dark --mbx-dropdown-text-color-hover / / --mbx-dropdown-text-color-hover-light --mbx-dropdown-text-color-hover --mbx-text-color-hover-light --mbx-dropdown-text-color-hover-dark --mbx-dropdown-text-color-hover --mbx-text-color-hover-light --mbx-dropdown-arrow-color / / --mbx-dropdown-arrow-color-light --mbx-dropdown-arrow-color --mbx-dropdown-text-color-light --mbx-dropdown-arrow-color-dark --mbx-dropdown-arrow-color --mbx-dropdown-text-color-dark --mbx-dropdown-arrow-color-hover / / --mbx-dropdown-arrow-color-hover-light --mbx-dropdown-arrow-color-hover --mbx-dropdown-arrow-color-light --mbx-dropdown-arrow-color-hover-dark --mbx-dropdown-arrow-color-hover --mbx-dropdown-arrow-color-dark"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background","title":"--mbx-dropdown-background","text":"Fallback Default / / Fallback value for --mbx-dropdown-background-light and --mbx-dropdown-background-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-light","title":"--mbx-dropdown-background-light","text":"Fallback Default --mbx-dropdown-background --mbx-background-light Dropdown background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-dark","title":"--mbx-dropdown-background-dark","text":"Fallback Default --mbx-dropdown-background --mbx-background-dark Dropdown background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color","title":"--mbx-dropdown-text-color","text":"Fallback Default / / Fallback value for --mbx-dropdown-text-color-light and --mbx-dropdown-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-light","title":"--mbx-dropdown-text-color-light","text":"Fallback Default --mbx-dropdown-text-color --mbx-text-color-light Dropdown text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-dark","title":"--mbx-dropdown-text-color-dark","text":"Fallback Default --mbx-dropdown-text-color --mbx-text-color-dark Dropdown text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover","title":"--mbx-dropdown-background-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-background-hover-light and --mbx-dropdown-background-hover-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover-light","title":"--mbx-dropdown-background-hover-light","text":"Fallback Default --mbx-dropdown-background --mbx-background-hover-light Dropdown background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-background-hover-dark","title":"--mbx-dropdown-background-hover-dark","text":"Fallback Default --mbx-dropdown-background --mbx-background-hover-dark Dropdown background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover","title":"--mbx-dropdown-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-text-color-hover-light and --mbx-dropdown-text-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover-light","title":"--mbx-dropdown-text-color-hover-light","text":"Fallback Default --mbx-dropdown-text-color-hover --mbx-text-color-hover-light Dropdown text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-text-color-hover-dark","title":"--mbx-dropdown-text-color-hover-dark","text":"Fallback Default --mbx-dropdown-text-color-hover --mbx-text-color-hover-light Dropdown text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color","title":"--mbx-dropdown-arrow-color","text":"Fallback Default / / Fallback value for --mbx-dropdown-arrow-color-light and --mbx-dropdown-arrow-color-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-light","title":"--mbx-dropdown-arrow-color-light","text":"Fallback Default --mbx-dropdown-arrow-color --mbx-dropdown-text-color-light Dropdown arrow color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-dark","title":"--mbx-dropdown-arrow-color-dark","text":"Fallback Default --mbx-dropdown-arrow-color --mbx-dropdown-text-color-dark Dropdown arrow color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-hover","title":"--mbx-dropdown-arrow-color-hover","text":"Fallback Default / / Fallback value for --mbx-dropdown-arrow-color-hover-light and --mbx-dropdown-arrow-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-hover-light","title":"--mbx-dropdown-arrow-color-hover-light","text":"Fallback Default --mbx-dropdown-arrow-color-hover --mbx-dropdown-arrow-color-light Dropdown arrow color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/css-vars/#-mbx-dropdown-arrow-color-hover-dark","title":"--mbx-dropdown-arrow-color-hover-dark","text":"Fallback Default --mbx-dropdown-arrow-color-hover --mbx-dropdown-arrow-color-dark Dropdown arrow color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Dropdown/props/","title":"Dropdown properties","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/props/#props-table","title":"Props table","text":"Parameter Type Default value number / elements (JSX.Element | string)[] [] hideArrow boolean false onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/molecules/Dropdown/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Dropdown/props/#value","title":"value","text":"Type Default number / actual selected element (as index). If not set, default value will be used.
"},{"location":"old-guides/V3/components/molecules/Dropdown/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] [] Dropdown content elements
"},{"location":"old-guides/V3/components/molecules/Dropdown/props/#hidearrow","title":"hideArrow","text":"Type Default boolean false If true, hide the arrow icon near selected element
"},{"location":"old-guides/V3/components/molecules/Dropdown/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when selecting new element from dropdown
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/","title":"ExpandableContainer page","text":"An exapandable container, to hide/show some content on demand.
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/","title":"ExpandableContainer CSS variables","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-expandablecontainer-background / / --mbx-expandablecontainer-background-light --mbx-expandablecontainer-background mbx-container-background-light --mbx-expandablecontainer-background-dark --mbx-expandablecontainer-background mbx-container-background-dark --mbx-expandablecontainer-text-color / / --mbx-expandablecontainer-text-color-light --mbx-expandablecontainer-text-color mbx-container-text-color-light --mbx-expandablecontainer-text-color-dark --mbx-expandablecontainer-text-color mbx-container-text-color-dark --mbx-expandablecontainer-arrow-color / / --mbx-expandablecontainer-arrow-color-light --mbx-expandablecontainer-arrow-color --mbx-expandablecontainer-text-color-light --mbx-expandablecontainer-arrow-color-dark --mbx-expandablecontainer-arrow-color --mbx-expandablecontainer-text-color-dark --mbx-expandablecontainer-arrow-color-hover / / --mbx-expandablecontainer-arrow-color-hover-light --mbx-expandablecontainer-arrow-color-hover --mbx-expandablecontainer-arrow-color-lrrowight --mbx-expandablecontainer-arrow-color-hover-dark --mbx-expandablecontainer-arrow-color-hover --mbx-expandablecontainer-a-color-dark"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background","title":"--mbx-expandablecontainer-background","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-background-light and --mbx-expandablecontainer-background-dark
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background-light","title":"--mbx-expandablecontainer-background-light","text":"Fallback Default --mbx-expandablecontainer-background mbx-container-background-light ExpandableContainer background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-background-dark","title":"--mbx-expandablecontainer-background-dark","text":"Fallback Default --mbx-expandablecontainer-background mbx-container-background-dark ExpandableContainer background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color","title":"--mbx-expandablecontainer-text-color","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-text-color-light and --mbx-expandablecontainer-text-color-dark
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color-light","title":"--mbx-expandablecontainer-text-color-light","text":"Fallback Default --mbx-expandablecontainer-text-color mbx-container-text-color-light ExpandableContainer text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-text-color-dark","title":"--mbx-expandablecontainer-text-color-dark","text":"Fallback Default --mbx-expandablecontainer-text-color mbx-container-text-color-dark ExpandableContainer text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color","title":"--mbx-expandablecontainer-arrow-color","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-arrow-color-light and --mbx-expandablecontainer-arrow-color-dark
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-light","title":"--mbx-expandablecontainer-arrow-color-light","text":"Fallback Default --mbx-expandablecontainer-arrow-color --mbx-expandablecontainer-text-color-light ExpandableContainer arrow color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-dark","title":"--mbx-expandablecontainer-arrow-color-dark","text":"Fallback Default --mbx-expandablecontainer-arrow-color --mbx-expandablecontainer-text-color-dark ExpandableContainer arrow color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-hover","title":"--mbx-expandablecontainer-arrow-color-hover","text":"Fallback Default / / Fallback value for --mbx-expandablecontainer-arrow-color-hover-light and --mbx-expandablecontainer-arrow-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-hover-light","title":"--mbx-expandablecontainer-arrow-color-hover-light","text":"Fallback Default --mbx-expandablecontainer-arrow-color-hover --mbx-expandablecontainer-arrow-color-lrrowight ExpandableContainer arrow color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/css-vars/#-mbx-expandablecontainer-arrow-color-hover-dark","title":"--mbx-expandablecontainer-arrow-color-hover-dark","text":"Fallback Default --mbx-expandablecontainer-arrow-color-hover --mbx-expandablecontainer-a-color-dark ExpandableContainer arrow color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/","title":"ExpandableContainer properties","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#props-table","title":"Props table","text":"Parameter Type Default children any / wrapper div | header | footer div expanded boolean / compact boolean / onChange (newValue: boolean) => void () => {}"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#children","title":"children","text":"Type Default any / content to render inside Container - extended from Container component
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#wrapper","title":"wrapper","text":"Type Default div | header | footer div component wrapper type - extended from Container component
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#expanded","title":"expanded","text":"Type Default boolean / Extra content showed only when container is expanded (compact === true)
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#compact","title":"compact","text":"Type Default boolean / if true, shows the whole container content
"},{"location":"old-guides/V3/components/molecules/ExpandableContainer/props/#onchange","title":"onChange","text":"Type Default (newValue: boolean) => void () => {} Callback triggered when ExpandableContainer component input value is changed by the user
"},{"location":"old-guides/V3/components/molecules/FormField/","title":"FormField page","text":"A single form field. Depending on its type, a different input component is used inside
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/","title":"FormField CSS variables","text":""},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-formfield-background / / --mbx-formfield-background-dark --mbx-formfield-background --mbx-background-dark --mbx-formfield-background-light --mbx-formfield-background --mbx-background-light --mbx-formfield-text-color / / --mbx-formfield-text-color-light --mbx-formfield-text-color --mbx-text-color-light --mbx-formfield-text-color-dark --mbx-formfield-text-color --mbx-text-color-dark --mbx-formfield-background-hover / / --mbx-formfield-background-hover-light --mbx-formfield-background-hover --mbx-background-hover-light --mbx-formfield-background-hover-dark --mbx-formfield-background-hover --mbx-background-hover-light --mbx-formfield-text-color-hover / / --mbx-formfield-text-color-hover-light --mbx-formfield-text-color-hover --mbx-text-color-hover-light --mbx-formfield-text-color-hover-dark --mbx-formfield-text-color-hover --mbx-text-color-hover-dark --mbx-formfield-error-border / / --mbx-formfield-error-border-light --mbx-formfield-error-border red --mbx-formfield-error-border-dark --mbx-formfield-error-border red --mbx-formfield-error-text / / --mbx-formfield-error-text-light --mbx-formfield-error-text red --mbx-formfield-error-text-dark --mbx-formfield-error-text red"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background","title":"--mbx-formfield-background","text":"Fallback Default / / Fallback value for --mbx-formfield-background-light and --mbx-formfield-background-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-dark","title":"--mbx-formfield-background-dark","text":"Fallback Default --mbx-formfield-background --mbx-background-dark FormField background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-light","title":"--mbx-formfield-background-light","text":"Fallback Default --mbx-formfield-background --mbx-background-light FormField background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color","title":"--mbx-formfield-text-color","text":"Fallback Default / / Fallback value for --mbx-formfield-text-color-light and --mbx-formfield-text-color-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-light","title":"--mbx-formfield-text-color-light","text":"Fallback Default --mbx-formfield-text-color --mbx-text-color-light FormField text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-dark","title":"--mbx-formfield-text-color-dark","text":"Fallback Default --mbx-formfield-text-color --mbx-text-color-dark FormField text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-hover","title":"--mbx-formfield-background-hover","text":"Fallback Default / / Fallback value for --mbx-formfield-background-hover-light and --mbx-formfield-background-hover-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-hover-light","title":"--mbx-formfield-background-hover-light","text":"Fallback Default --mbx-formfield-background-hover --mbx-background-hover-light FormField background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-background-hover-dark","title":"--mbx-formfield-background-hover-dark","text":"Fallback Default --mbx-formfield-background-hover --mbx-background-hover-light FormField background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover","title":"--mbx-formfield-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-formfield-text-color-hover-light and --mbx-formfield-text-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover-light","title":"--mbx-formfield-text-color-hover-light","text":"Fallback Default --mbx-formfield-text-color-hover --mbx-text-color-hover-light FormField text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-text-color-hover-dark","title":"--mbx-formfield-text-color-hover-dark","text":"Fallback Default --mbx-formfield-text-color-hover --mbx-text-color-hover-dark FormField text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-border","title":"--mbx-formfield-error-border","text":"Fallback Default / / Fallback value for --mbx-formfield-error-border-light and --mbx-formfield-error-border-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-border-light","title":"--mbx-formfield-error-border-light","text":"Fallback Default --mbx-formfield-error-border red FormField error box border color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-border-dark","title":"--mbx-formfield-error-border-dark","text":"Fallback Default --mbx-formfield-error-border red FormField error box border color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-text","title":"--mbx-formfield-error-text","text":"Fallback Default / / Fallback value for --mbx-formfield-error-text-light and --mbx-formfield-error-text-dark
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-text-light","title":"--mbx-formfield-error-text-light","text":"Fallback Default --mbx-formfield-error-text red FormField error box text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/FormField/css-vars/#-mbx-formfield-error-text-dark","title":"--mbx-formfield-error-text-dark","text":"Fallback Default --mbx-formfield-error-text red FormField error box text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/FormField/props/","title":"FormField properties","text":""},{"location":"old-guides/V3/components/molecules/FormField/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/FormField/props/#props-table","title":"Props table","text":"Parameter Type Default value / / type boolean | text | numeric | radio | checkbox | toggle | rater | slider | input | counter 'text' placeholder string / required boolean / validate (fieldValue: any) => boolean () => \u02da{} header JSX.Element | string / headerClassName string / headerProps Record / errorLabel JSX.Element | string /"},{"location":"old-guides/V3/components/molecules/FormField/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/FormField/props/#value","title":"value","text":"Type Default / / FormField input content
"},{"location":"old-guides/V3/components/molecules/FormField/props/#type","title":"type","text":"Type Default boolean | text | numeric | radio | checkbox | toggle | rater | slider | input | counter 'text' The field type. It determines the UI component to be used to render it. Allowed types are:
boolean (rendered as a CheckBox)numeric (rendered as a Counter)text (rendered as a Input)radio (rendered as a RadioButton)checkbox (rendered as a CheckBox)toggle (rendered as a Toggle)rater (rendered as a Rater)slider (rendered as a Slider)input (rendered as a Input)counter (rendered as a Counter)
"},{"location":"old-guides/V3/components/molecules/FormField/props/#placeholder","title":"placeholder","text":"Type Default string /"},{"location":"old-guides/V3/components/molecules/FormField/props/#required","title":"required","text":"Type Default boolean / If true, the field switch to error state if its value is empty
"},{"location":"old-guides/V3/components/molecules/FormField/props/#validate","title":"validate","text":"Type Default (fieldValue: any) => boolean () => \u02da{} Custom validation function called on submit
"},{"location":"old-guides/V3/components/molecules/FormField/props/#header","title":"header","text":"Type Default JSX.Element | string / Form field header
"},{"location":"old-guides/V3/components/molecules/FormField/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom classname applied on every header element
"},{"location":"old-guides/V3/components/molecules/FormField/props/#headerprops","title":"headerProps","text":"Type Default Record / Custom props applied on every header element (including MoBrix-ui shared props)
"},{"location":"old-guides/V3/components/molecules/FormField/props/#errorlabel","title":"errorLabel","text":"Type Default JSX.Element | string / Custom error box content, displayed when FormField is in error state
"},{"location":"old-guides/V3/components/molecules/List/","title":"List page","text":"A custom bullet list, that support any type of elements
"},{"location":"old-guides/V3/components/molecules/List/css-vars/","title":"List CSS variables","text":""},{"location":"old-guides/V3/components/molecules/List/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-list-text-color / / --mbx-list-text-color-light --mbx-list-text-color --mbx-text-color-light --mbx-list-text-color-dark --mbx-list-text-color --mbx-text-color-dark --mbx-list-text-color-hover / / --mbx-list-text-color-hover-light --mbx-list-text-color-hover --mbx-text-color-hover-light --mbx-list-text-color-hover-dark --mbx-list-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/molecules/List/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color","title":"--mbx-list-text-color","text":"Fallback Default / / Fallback value for --mbx-list-text-color-light and --mbx-list-text-color-dark
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-light","title":"--mbx-list-text-color-light","text":"Fallback Default --mbx-list-text-color --mbx-text-color-light List element text color when dark is off
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-dark","title":"--mbx-list-text-color-dark","text":"Fallback Default --mbx-list-text-color --mbx-text-color-dark List element text color when dark is on
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-hover","title":"--mbx-list-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-list-text-color-hover-light and --mbx-list-text-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-hover-light","title":"--mbx-list-text-color-hover-light","text":"Fallback Default --mbx-list-text-color-hover --mbx-text-color-hover-light List element text color when dark is off, on hover
"},{"location":"old-guides/V3/components/molecules/List/css-vars/#-mbx-list-text-color-hover-dark","title":"--mbx-list-text-color-hover-dark","text":"Fallback Default --mbx-list-text-color-hover --mbx-text-color-hover-dark List element text color when dark is on, on hover
"},{"location":"old-guides/V3/components/molecules/List/props/","title":"List properties","text":""},{"location":"old-guides/V3/components/molecules/List/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/List/props/#props-table","title":"Props table","text":"Parameter Type Default elements (JSX.Element | string)[] / onClick () => void () => {}"},{"location":"old-guides/V3/components/molecules/List/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/List/props/#elements","title":"elements","text":"Type Default (JSX.Element | string)[] / List elements
"},{"location":"old-guides/V3/components/molecules/List/props/#onclick","title":"onClick","text":"Type Default () => void () => {} Callback triggered when a list element is clicked
"},{"location":"old-guides/V3/components/molecules/Modal/","title":"Modal page","text":"A Modal component, with an optional close button
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/","title":"Modal CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-modal-background / / --mbx-modal-background-light --mbx-modal-background rgba(0, 0, 0, 0.8) --mbx-modal-background-dark --mbx-modal-background rgba(0, 0, 0, 0.8) --mbx-modal-x-color / / --mbx-modal-x-color-light --mbx-modal-x-color white --mbx-modal-x-color-dark --mbx-modal-x-color white --mbx-modal-x-color-hover / / --mbx-modal-x-color-hover-light --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-light --mbx-modal-x-color-hover-dark --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-dark"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-background","title":"--mbx-modal-background","text":"Fallback Default / / Fallback value for --mbx-modal-background-light and --mbx-modal-background-dark
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-background-light","title":"--mbx-modal-background-light","text":"Fallback Default --mbx-modal-background rgba(0, 0, 0, 0.8) Modal background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-background-dark","title":"--mbx-modal-background-dark","text":"Fallback Default --mbx-modal-background rgba(0, 0, 0, 0.8) Modal background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color","title":"--mbx-modal-x-color","text":"Fallback Default / / Fallback value for --mbx-modal-x-color-light and --mbx-modal-x-color-dark
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-light","title":"--mbx-modal-x-color-light","text":"Fallback Default --mbx-modal-x-color white Modal x icon color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-dark","title":"--mbx-modal-x-color-dark","text":"Fallback Default --mbx-modal-x-color white Modal x icon color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover","title":"--mbx-modal-x-color-hover","text":"Fallback Default / / Fallback value for --mbx-modal-x-color-hover-light and --mbx-modal-x-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover-light","title":"--mbx-modal-x-color-hover-light","text":"Fallback Default --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-light Modal x icon color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/Modal/css-vars/#-mbx-modal-x-color-hover-dark","title":"--mbx-modal-x-color-hover-dark","text":"Fallback Default --mbx-modal-x-color-hover --mbx-dismissablecard-x-color-hover-dark Modal x icon color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/Modal/props/","title":"Modal properties","text":""},{"location":"old-guides/V3/components/molecules/Modal/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Modal/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} children JSX.Element | string /"},{"location":"old-guides/V3/components/molecules/Modal/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Modal/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Modal is closed
"},{"location":"old-guides/V3/components/molecules/Modal/props/#children","title":"children","text":"Type Default JSX.Element | string / Modal content
"},{"location":"old-guides/V3/components/molecules/Popup/","title":"Popup page","text":"A Popup container, displayed upon every other component, overlayed
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/","title":"Popup CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-popup-background / / --mbx-popup-background-light --mbx-popup-background --mbx-background-light --mbx-popup-background-dark --mbx-popup-background --mbx-background-dark --mbx-popup-text-color / / --mbx-popup-text-color-light --mbx-popup-text-color --mbx-text-color-light --mbx-popup-text-color-dark --mbx-popup-text-color --mbx-text-color-dark"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-background","title":"--mbx-popup-background","text":"Fallback Default / / Fallback value for --mbx-popup-background-light and --mbx-popup-background-dark
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-background-light","title":"--mbx-popup-background-light","text":"Fallback Default --mbx-popup-background --mbx-background-light Popup background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-background-dark","title":"--mbx-popup-background-dark","text":"Fallback Default --mbx-popup-background --mbx-background-dark Popup background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-text-color","title":"--mbx-popup-text-color","text":"Fallback Default / / Fallback value for and
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-text-color-light","title":"--mbx-popup-text-color-light","text":"Fallback Default --mbx-popup-text-color --mbx-text-color-light Popup text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Popup/css-vars/#-mbx-popup-text-color-dark","title":"--mbx-popup-text-color-dark","text":"Fallback Default --mbx-popup-text-color --mbx-text-color-dark Popup text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Popup/props/","title":"Popup properties","text":""},{"location":"old-guides/V3/components/molecules/Popup/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Popup/props/#props-table","title":"Props table","text":"Parameter Type Default onClose () => void () => {} children JSX.Element | string /"},{"location":"old-guides/V3/components/molecules/Popup/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Popup/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Popup is closed
"},{"location":"old-guides/V3/components/molecules/Popup/props/#children","title":"children","text":"Type Default JSX.Element | string / Popup content
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/","title":"RadioButtonGroup page","text":"A flexible and fully customizable radio buttons group
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/","title":"RadioButtonGroup CSS variables","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-radiogroup-background / / --mbx-radiogroup-background-light --mbx-radiogroup-background --mbx-background-light --mbx-radiogroup-background-dark --mbx-radiogroup-background --mbx-background-dark --mbx-radiogroup-text-color / / --mbx-radiogroup-text-color-light --mbx-radiogroup-text-color --mbx-text-color-light --mbx-radiogroup-text-color-dark --mbx-radiogroup-text-color --mbx-text-color-dark --mbx-radiogroup-radio-background / / --mbx-radiogroup-radio-background-light --mbx-radiogroup-radio-background --mbx-radio-background-light --mbx-radiogroup-radio-background-dark --mbx-radiogroup-radio-background --mbx-radio-background-dark --mbx-radiogroup-radio-background-hover / / --mbx-radiogroup-radio-background-hover-light --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-light --mbx-radiogroup-radio-background-hover-dark --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-dark --mbx-radiogroup-radio-icon-background / / --mbx-radiogroup-radio-icon-background-light --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-light --mbx-radiogroup-radio-icon-background-dark --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-dark"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background","title":"--mbx-radiogroup-background","text":"Fallback Default / / Fallback value for --mbx-radiogroup-background-light and --mbx-radiogroup-background-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background-light","title":"--mbx-radiogroup-background-light","text":"Fallback Default --mbx-radiogroup-background --mbx-background-light RadioGroup background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-background-dark","title":"--mbx-radiogroup-background-dark","text":"Fallback Default --mbx-radiogroup-background --mbx-background-dark RadioGroup background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color","title":"--mbx-radiogroup-text-color","text":"Fallback Default / / Fallback value for --mbx-radiogroup-text-color-light and --mbx-radiogroup-text-color-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color-light","title":"--mbx-radiogroup-text-color-light","text":"Fallback Default --mbx-radiogroup-text-color --mbx-text-color-light RadioGroup text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-text-color-dark","title":"--mbx-radiogroup-text-color-dark","text":"Fallback Default --mbx-radiogroup-text-color --mbx-text-color-dark RadioGroup text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background","title":"--mbx-radiogroup-radio-background","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-background-light and mbx-radiogroup-radio-background-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-light","title":"--mbx-radiogroup-radio-background-light","text":"Fallback Default --mbx-radiogroup-radio-background --mbx-radio-background-light Internal RadioButton background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-dark","title":"--mbx-radiogroup-radio-background-dark","text":"Fallback Default --mbx-radiogroup-radio-background --mbx-radio-background-dark Internal RadioButton background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover","title":"--mbx-radiogroup-radio-background-hover","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-background-hover-light and mbx-radiogroup-radio-background-hover-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover-light","title":"--mbx-radiogroup-radio-background-hover-light","text":"Fallback Default --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-light Internal RadioButton background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-background-hover-dark","title":"--mbx-radiogroup-radio-background-hover-dark","text":"Fallback Default --mbx-radiogroup-radio-background-hover --mbx-radio-background-hover-dark Internal RadioButton background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background","title":"--mbx-radiogroup-radio-icon-background","text":"Fallback Default / / Fallback value for mbx-radiogroup-radio-icon-background-light and mbx-radiogroup-radio-icon-background-dark
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background-light","title":"--mbx-radiogroup-radio-icon-background-light","text":"Fallback Default --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-light Internal RadioButton icon background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/css-vars/#-mbx-radiogroup-radio-icon-background-dark","title":"--mbx-radiogroup-radio-icon-background-dark","text":"Fallback Default --mbx-radiogroup-radio-icon-background --mbx-radio-icon-background-dark Internal RadioButton icon background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/","title":"RadioButtonGroup properties","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#props-table","title":"Props table","text":"Parameter Type Default value number / buttons { component: JSX.Element, text: string, textPosition: top | bottom | left | right }[] / elementClassName string / radioProps RadioButtonProps / defaultPosition top | bottom | left | right left horizontal boolean false onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#value","title":"value","text":"Type Default number / Selected RadioButton (as index)
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#buttons","title":"buttons","text":"Type Default { component: JSX.Element, text: string, textPosition: top | bottom | left | right }[] / Radio elements array. Every element UI can be driven with attributes. A radio element can contain 3 fields:
- -
component: custom component rendered before radio button - -
text: custom radio text showed near the radio button - -
textPosition: custom text position "},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#elementclassname","title":"elementClassName","text":"Type Default string / Classname applied on every radio element
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#radioprops","title":"radioProps","text":"Type Default RadioButtonProps / RadioButton props applied on every RadioButton element
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#defaultposition","title":"defaultPosition","text":"Type Default top | bottom | left | right left Default text position for RadioButton elements (when textPosition is not provided)
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#horizontal","title":"horizontal","text":"Type Default boolean false If true, the RadioButton elements are displayed horizontally
"},{"location":"old-guides/V3/components/molecules/RadioButtonGroup/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when a RadioButton is clicked by the user, giving its index as parameter
"},{"location":"old-guides/V3/components/molecules/Review/","title":"Review page","text":"A smart review container, useful to show reviews on your web app with custom data inside. Optionally, an external link can be set to redirect user to the platform where the review is located
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/","title":"Review CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Review/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-review-background / / --mbx-review-background-light --mbx-review-background --mbx-background-light --mbx-review-background-dark --mbx-review-background --mbx-background-dark --mbx-review-text-color / / --mbx-review-text-color-light --mbx-review-text-color --mbx-text-color-light --mbx-review-text-color-dark --mbx-review-text-color --mbx-text-color-dark --mbx-review-link-color / / --mbx-review-link-color-light --mbx-review-link-color #615f5f --mbx-review-link-color-dark --mbx-review-link-color white --mbx-review-github-color / / --mbx-review-github-color-light --mbx-review-github-color #615f5f --mbx-review-github-color-dark --mbx-review-github-color white"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-background","title":"--mbx-review-background","text":"Fallback Default / / Fallback value for --mbx-review-background-light and --mbx-review-background-dark
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-background-light","title":"--mbx-review-background-light","text":"Fallback Default --mbx-review-background --mbx-background-light Review background when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-background-dark","title":"--mbx-review-background-dark","text":"Fallback Default --mbx-review-background --mbx-background-dark Review background when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-text-color","title":"--mbx-review-text-color","text":"Fallback Default / / Fallback value for --mbx-review-text-color-light and --mbx-review-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-text-color-light","title":"--mbx-review-text-color-light","text":"Fallback Default --mbx-review-text-color --mbx-text-color-light Review text color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-text-color-dark","title":"--mbx-review-text-color-dark","text":"Fallback Default --mbx-review-text-color --mbx-text-color-dark Review text color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-link-color","title":"--mbx-review-link-color","text":"Fallback Default / / Fallback value for --mbx-review-link-color-light and --mbx-review-link-color-dark
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-link-color-light","title":"--mbx-review-link-color-light","text":"Fallback Default --mbx-review-link-color #615f5f Review link color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-link-color-dark","title":"--mbx-review-link-color-dark","text":"Fallback Default --mbx-review-link-color white Review link color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-github-color","title":"--mbx-review-github-color","text":"Fallback Default / / Fallback value for --mbx-review-github-color-light and --mbx-review-github-color-dark
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-github-color-light","title":"--mbx-review-github-color-light","text":"Fallback Default --mbx-review-github-color #615f5f Review github icon color when dark mode is on
"},{"location":"old-guides/V3/components/molecules/Review/css-vars/#-mbx-review-github-color-dark","title":"--mbx-review-github-color-dark","text":"Fallback Default --mbx-review-github-color white Review github icon color when dark mode is off
"},{"location":"old-guides/V3/components/molecules/Review/props/","title":"Review properties","text":""},{"location":"old-guides/V3/components/molecules/Review/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Review/props/#props-table","title":"Props table","text":"Parameter Type Default user string / description string / icon JSX.Element / url string / logo default | link | facebook | twitter | google | linkedin | github / max number 5 vertical boolean false rate number 0 rateType star|circle 'star'"},{"location":"old-guides/V3/components/molecules/Review/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Review/props/#user","title":"user","text":"Type Default string / Username displayed above the review description, at the right of the icon
"},{"location":"old-guides/V3/components/molecules/Review/props/#description","title":"description","text":"Type Default string / Review description displayed below the review username, at the top of the rate
"},{"location":"old-guides/V3/components/molecules/Review/props/#icon","title":"icon","text":"Type Default JSX.Element / Icon showed inside the component
"},{"location":"old-guides/V3/components/molecules/Review/props/#url","title":"url","text":"Type Default string / Review external url. If set, an icon will be showed at the top right of the review
"},{"location":"old-guides/V3/components/molecules/Review/props/#logo","title":"logo","text":"Type Default default | link | facebook | twitter | google | linkedin | github / Social icon type, showed at the top right of the container. Supports popular web services like Facebook, Twitter, Google and so on. Proviced icon list will grow up time by time and will be updated with the latest web services, to keep it usable for the future.
"},{"location":"old-guides/V3/components/molecules/Review/props/#max","title":"max","text":"Type Default number 5 max vote (max number of icons displayed) - extended from Rater component
"},{"location":"old-guides/V3/components/molecules/Review/props/#vertical","title":"vertical","text":"Type Default boolean false if true, rate icons will be showed vertically - extended from Rater component
"},{"location":"old-guides/V3/components/molecules/Review/props/#rate","title":"rate","text":"Type Default number 0 actual vote - extended from Rater component
"},{"location":"old-guides/V3/components/molecules/Review/props/#ratetype","title":"rateType","text":"Type Default star|circle 'star' vote icons type - extended from Rater component
"},{"location":"old-guides/V3/components/molecules/TabViewer/","title":"TabViewer page","text":"A Tab viewer component, to organize elements with tabs and show them on demand
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/","title":"TabViewer CSS variables","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-tabviewer-background / / --mbx-tabviewer-background-light --mbx-tabviewer-background linear-gradient(to right, #cccccc, #c7c7c7) --mbx-tabviewer-background-dark --mbx-tabviewer-background linear-gradient(to right, #2d3748, #1d232e) --mbx-tabviewer-text-color / / --mbx-tabviewer-text-color-light --mbx-tabviewer-text-color --mbx-text-color-light --mbx-tabviewer-text-color-dark --mbx-tabviewer-text-color --mbx-text-color-dark --mbx-tabviewer-inactive-background / / --mbx-tabviewer-inactive-background-light --mbx-tabviewer-inactive-background linear-gradient(to right, #a1a0a0, #797979) --mbx-tabviewer-inactive-background-dark --mbx-tabviewer-inactive-background linear-gradient(to right, #3e4b63, #3f4858) --mbx-tabviewer-inactive-text-color / / --mbx-tabviewer-inactive-text-color-light --mbx-tabviewer-inactive-text-color #c2c2c2 --mbx-tabviewer-inactive-text-color-dark --mbx-tabviewer-inactive-text-color #c2c2c2 --mbx-tabviewer-inactive-background-hover / / --mbx-tabviewer-inactive-background-hover-light --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #b6b4b4, #999797) --mbx-tabviewer-inactive-background-hover-dark --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #566888, #3c465a) --mbx-tabviewer-inactive-text-color-hover / / --mbx-tabviewer-inactive-text-color-hover-light --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-light --mbx-tabviewer-inactive-text-color-hover-dark --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-dark"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background","title":"--mbx-tabviewer-background","text":"Fallback Default / / Fallback value for --mbx-tabviewer-background-light and --mbx-tabviewer-background-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background-light","title":"--mbx-tabviewer-background-light","text":"Fallback Default --mbx-tabviewer-background linear-gradient(to right, #cccccc, #c7c7c7) TabViewer background when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-background-dark","title":"--mbx-tabviewer-background-dark","text":"Fallback Default --mbx-tabviewer-background linear-gradient(to right, #2d3748, #1d232e) TabViewer background when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color","title":"--mbx-tabviewer-text-color","text":"Fallback Default / / Fallback value for --mbx-tabviewer-text-color-light and --mbx-tabviewer-text-color-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color-light","title":"--mbx-tabviewer-text-color-light","text":"Fallback Default --mbx-tabviewer-text-color --mbx-text-color-light TabViewer text color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-text-color-dark","title":"--mbx-tabviewer-text-color-dark","text":"Fallback Default --mbx-tabviewer-text-color --mbx-text-color-dark TabViewer text color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background","title":"--mbx-tabviewer-inactive-background","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-background-light and --mbx-tabviewer-inactive-background-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-light","title":"--mbx-tabviewer-inactive-background-light","text":"Fallback Default --mbx-tabviewer-inactive-background linear-gradient(to right, #a1a0a0, #797979) TabViewer inactive tab background when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-dark","title":"--mbx-tabviewer-inactive-background-dark","text":"Fallback Default --mbx-tabviewer-inactive-background linear-gradient(to right, #3e4b63, #3f4858) TabViewer inactive tab background when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color","title":"--mbx-tabviewer-inactive-text-color","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-text-color-light and --mbx-tabviewer-inactive-text-color-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-light","title":"--mbx-tabviewer-inactive-text-color-light","text":"Fallback Default --mbx-tabviewer-inactive-text-color #c2c2c2 TabViewer inactive tab text color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-dark","title":"--mbx-tabviewer-inactive-text-color-dark","text":"Fallback Default --mbx-tabviewer-inactive-text-color #c2c2c2 TabViewer inactive tab text color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover","title":"--mbx-tabviewer-inactive-background-hover","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-background-hover-light and --mbx-tabviewer-inactive-background-hover-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover-light","title":"--mbx-tabviewer-inactive-background-hover-light","text":"Fallback Default --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #b6b4b4, #999797) TabViewer inactive tab background when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-background-hover-dark","title":"--mbx-tabviewer-inactive-background-hover-dark","text":"Fallback Default --mbx-tabviewer-inactive-background-hover linear-gradient(to right, #566888, #3c465a) TabViewer inactive tab background when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover","title":"--mbx-tabviewer-inactive-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-tabviewer-inactive-text-color-hover-light and --mbx-tabviewer-inactive-text-color-hover-dark
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover-light","title":"--mbx-tabviewer-inactive-text-color-hover-light","text":"Fallback Default --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-light TabViewer inactive tab text color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/molecules/TabViewer/css-vars/#-mbx-tabviewer-inactive-text-color-hover-dark","title":"--mbx-tabviewer-inactive-text-color-hover-dark","text":"Fallback Default --mbx-tabviewer-inactive-text-color-hover --mbx-text-color-hover-dark TabViewer inactive tab text color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/","title":"TabViewer properties","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/props/#props-table","title":"Props table","text":"Parameter Type Default selected / / tabs {label: string; content: JSX.Element;}[] / tabProps Record / tabSelectedProps Record / tabUnselectedProps Record / tabViewProps Record / tabClassName Record / tabSelectedClassName Record / tabUnselectedClassName Record / tabViewClassName Record / onChange (newValue: number) => void () => {}"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/TabViewer/props/#selected","title":"selected","text":"Type Default / /"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabs","title":"tabs","text":"Type Default {label: string; content: JSX.Element;}[] / tabs array. Every tab object contains 3 fields:
label: tab label displayed on topcontent: tab content element
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabprops","title":"tabProps","text":"Type Default Record / Custom props applied on every tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabselectedprops","title":"tabSelectedProps","text":"Type Default Record / Custom props applied on every selected tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabunselectedprops","title":"tabUnselectedProps","text":"Type Default Record / Custom props applied on every unselected tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabviewprops","title":"tabViewProps","text":"Type Default Record / Custom props applied on the tab view panel
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabclassname","title":"tabClassName","text":"Type Default Record / Custom props applied on every tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabselectedclassname","title":"tabSelectedClassName","text":"Type Default Record / Custom props applied on every selected tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabunselectedclassname","title":"tabUnselectedClassName","text":"Type Default Record / Custom props applied on every unselected tab
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#tabviewclassname","title":"tabViewClassName","text":"Type Default Record / Custom props applied on the tab view panel
"},{"location":"old-guides/V3/components/molecules/TabViewer/props/#onchange","title":"onChange","text":"Type Default (newValue: number) => void () => {} Callback triggered when a tab is selected, giving its index as parameter
"},{"location":"old-guides/V3/components/molecules/Table/","title":"Table page","text":"A re-invented Table component. It follows a CSV-like format for its content.
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/","title":"Table CSS variables","text":""},{"location":"old-guides/V3/components/molecules/Table/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-table-background / / --mbx-table-background-light --mbx-table-background --mbx-background-light --mbx-table-background-dark --mbx-table-background --mbx-background-dark --mbx-table-text-color / / --mbx-table-text-color-light --mbx-table-text-color --mbx-text-color-light --mbx-table-text-color-dark --mbx-table-text-color --mbx-text-color-dark --mbx-table-header-background / / --mbx-table-header-background-light --mbx-table-header-background linear-gradient(to right, #354155, #2b3546) --mbx-table-header-background-dark --mbx-table-header-background linear-gradient(to right, #4b5b77, #3e4c64) --mbx-table-header-text-color / / --mbx-table-header-text-color-light --mbx-table-header-text-color whitesmoke --mbx-table-header-text-color-dark --mbx-table-header-text-color rgb(255, 255, 255) --mbx-table-border-color / / --mbx-table-border-color-light --mbx-table-border-color darkslategrey --mbx-table-border-color-dark --mbx-table-border-color rgb(219, 219, 219)"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-background","title":"--mbx-table-background","text":"Fallback Default / / Fallback value for --mbx-table-background-light and --mbx-table-background-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-background-light","title":"--mbx-table-background-light","text":"Fallback Default --mbx-table-background --mbx-background-light Table background when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-background-dark","title":"--mbx-table-background-dark","text":"Fallback Default --mbx-table-background --mbx-background-dark Table background when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-text-color","title":"--mbx-table-text-color","text":"Fallback Default / / Fallback value for --mbx-table-text-color-light and --mbx-table-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-text-color-light","title":"--mbx-table-text-color-light","text":"Fallback Default --mbx-table-text-color --mbx-text-color-light Table text color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-text-color-dark","title":"--mbx-table-text-color-dark","text":"Fallback Default --mbx-table-text-color --mbx-text-color-dark Table text color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-background","title":"--mbx-table-header-background","text":"Fallback Default / / Fallback value for --mbx-table-header-background-light and --mbx-table-header-background-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-background-light","title":"--mbx-table-header-background-light","text":"Fallback Default --mbx-table-header-background linear-gradient(to right, #354155, #2b3546) Table header background when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-background-dark","title":"--mbx-table-header-background-dark","text":"Fallback Default --mbx-table-header-background linear-gradient(to right, #4b5b77, #3e4c64) Table header background when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-text-color","title":"--mbx-table-header-text-color","text":"Fallback Default / / Fallback value for --mbx-table-header-text-color-light and --mbx-table-header-text-color-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-text-color-light","title":"--mbx-table-header-text-color-light","text":"Fallback Default --mbx-table-header-text-color whitesmoke Table header text color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-header-text-color-dark","title":"--mbx-table-header-text-color-dark","text":"Fallback Default --mbx-table-header-text-color rgb(255, 255, 255) Table header text color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-border-color","title":"--mbx-table-border-color","text":"Fallback Default / / Fallback value for --mbx-table-border-color-light and --mbx-table-border-color-dark
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-border-color-light","title":"--mbx-table-border-color-light","text":"Fallback Default --mbx-table-border-color darkslategrey Table border color when dark mode is `off'
"},{"location":"old-guides/V3/components/molecules/Table/css-vars/#-mbx-table-border-color-dark","title":"--mbx-table-border-color-dark","text":"Fallback Default --mbx-table-border-color rgb(219, 219, 219) Table border color when dark mode is `on'
"},{"location":"old-guides/V3/components/molecules/Table/props/","title":"Table properties","text":""},{"location":"old-guides/V3/components/molecules/Table/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/molecules/Table/props/#props-table","title":"Props table","text":"Parameter Type Default headers boolean / rows (JSX.Element | string)[][] / headerClassName string / headersProps Record / cellClassName string / cellProps Record / rowClassName string / rowProps Record / onClick (row: number, column: number) => void () => {} propsCallback (row: number, column: number) => Record () => ({})"},{"location":"old-guides/V3/components/molecules/Table/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/molecules/Table/props/#headers","title":"headers","text":"Type Default boolean /"},{"location":"old-guides/V3/components/molecules/Table/props/#rows","title":"rows","text":"Type Default (JSX.Element | string)[][] / Table elements
"},{"location":"old-guides/V3/components/molecules/Table/props/#headerclassname","title":"headerClassName","text":"Type Default string / Custom className applied on every Table header element
"},{"location":"old-guides/V3/components/molecules/Table/props/#headersprops","title":"headersProps","text":"Type Default Record / Custom props applied on every Table header element
"},{"location":"old-guides/V3/components/molecules/Table/props/#cellclassname","title":"cellClassName","text":"Type Default string / Custom className applied on every Table cell element
"},{"location":"old-guides/V3/components/molecules/Table/props/#cellprops","title":"cellProps","text":"Type Default Record / Custom props applied on every Table cell element
"},{"location":"old-guides/V3/components/molecules/Table/props/#rowclassname","title":"rowClassName","text":"Type Default string / Custom className applied on every Table row element
"},{"location":"old-guides/V3/components/molecules/Table/props/#rowprops","title":"rowProps","text":"Type Default Record / Custom props applied on every Table row element
"},{"location":"old-guides/V3/components/molecules/Table/props/#onclick","title":"onClick","text":"Type Default (row: number, column: number) => void () => {} Callback triggered when a Table cell is clicked
"},{"location":"old-guides/V3/components/molecules/Table/props/#propscallback","title":"propsCallback","text":"Type Default (row: number, column: number) => Record () => ({}) A function to add custom props depending on Table row and column
"},{"location":"old-guides/V3/components/organisms/","title":"MoBrix-ui organisms","text":""},{"location":"old-guides/V3/components/organisms/#summary","title":"Summary","text":" - Calendar
- DatePicker
- Drawer
- Form
"},{"location":"old-guides/V3/components/organisms/Calendar/","title":"Calendar page","text":"A ready to use Calendar, designed for a lot of scenarios.
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/","title":"Calendar CSS variables","text":""},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-calendar-background / / --mbx-calendar-background-light --mbx-calendar-background --mbx-background-light --mbx-calendar-background-dark --mbx-calendar-background --mbx-background-dark --mbx-calendar-text-color / / --mbx-calendar-text-color-light --mbx-calendar-text-color --mbx-text-color-light --mbx-calendar-text-color-dark --mbx-calendar-text-color --mbx-text-color-dark --mbx-calendar-selected-background / / --mbx-calendar-selected-background-light --mbx-calendar-selected-background --mbx-calendar-background-dark --mbx-calendar-selected-background-dark --mbx-calendar-selected-background --mbx-calendar-background-light --mbx-calendar-selected-text-color / / --mbx-calendar-selected-text-color-light --mbx-calendar-selected-text-color --mbx-calendar-text-color-dark --mbx-calendar-selected-text-color-dark --mbx-calendar-selected-text-color --mbx-calendar-text-color-light --mbx-calendar-background-hover / / --mbx-calendar-background-hover-light --mbx-calendar-background-hover --mbx-calendar-selected-background-light --mbx-calendar-background-hover-dark --mbx-calendar-background-hover --mbx-calendar-selected-background-dark --mbx-calendar-text-color-hover / / --mbx-calendar-text-color-hover-light --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-light --mbx-calendar-text-color-hover-dark --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-dark --mbx-calendar-arrow / / --mbx-calendar-arrow-light --mbx-calendar-arrow --mbx-calendar-text-color-light --mbx-calendar-arrow-dark --mbx-calendar-arrow --mbx-calendar-text-color-dark --mbx-calendar-arrow-hover / / --mbx-calendar-arrow-hover-light --mbx-calendar-arrow-hover --mbx-text-color-light --mbx-calendar-arrow-hover-dark --mbx-calendar-arrow-hover --mbx-text-color-dark --mbx-calendar-today-color / / --mbx-calendar-today-color-light --mbx-calendar-today-color red --mbx-calendar-today-color-dark --mbx-calendar-today-color red"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background","title":"--mbx-calendar-background","text":"Fallback Default / / Fallback value for --mbx-calendar-background-light and --mbx-calendar-background-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-light","title":"--mbx-calendar-background-light","text":"Fallback Default --mbx-calendar-background --mbx-background-light Calendar background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-dark","title":"--mbx-calendar-background-dark","text":"Fallback Default --mbx-calendar-background --mbx-background-dark Calendar background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color","title":"--mbx-calendar-text-color","text":"Fallback Default / / Fallback value for --mbx-calendar-text-color-light and --mbx-calendar-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-light","title":"--mbx-calendar-text-color-light","text":"Fallback Default --mbx-calendar-text-color --mbx-text-color-light Calendar text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-dark","title":"--mbx-calendar-text-color-dark","text":"Fallback Default --mbx-calendar-text-color --mbx-text-color-dark Calendar text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background","title":"--mbx-calendar-selected-background","text":"Fallback Default / / Fallback value for --mbx-calendar-selected-background-light and --mbx-calendar-selected-background-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background-light","title":"--mbx-calendar-selected-background-light","text":"Fallback Default --mbx-calendar-selected-background --mbx-calendar-background-dark Calendar selected cell background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-background-dark","title":"--mbx-calendar-selected-background-dark","text":"Fallback Default --mbx-calendar-selected-background --mbx-calendar-background-light Calendar selected cell background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color","title":"--mbx-calendar-selected-text-color","text":"Fallback Default / / Fallback value for --mbx-calendar-selected-text-color-light and --mbx-calendar-selected-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color-light","title":"--mbx-calendar-selected-text-color-light","text":"Fallback Default --mbx-calendar-selected-text-color --mbx-calendar-text-color-dark Calendar selected cell text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-selected-text-color-dark","title":"--mbx-calendar-selected-text-color-dark","text":"Fallback Default --mbx-calendar-selected-text-color --mbx-calendar-text-color-light Calendar selected cell text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover","title":"--mbx-calendar-background-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-background-hover-light and --mbx-calendar-background-hover-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover-light","title":"--mbx-calendar-background-hover-light","text":"Fallback Default --mbx-calendar-background-hover --mbx-calendar-selected-background-light Calendar background when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-background-hover-dark","title":"--mbx-calendar-background-hover-dark","text":"Fallback Default --mbx-calendar-background-hover --mbx-calendar-selected-background-dark Calendar background when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover","title":"--mbx-calendar-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-text-color-hover-light and --mbx-calendar-text-color-hover-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover-light","title":"--mbx-calendar-text-color-hover-light","text":"Fallback Default --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-light Calendar text color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-text-color-hover-dark","title":"--mbx-calendar-text-color-hover-dark","text":"Fallback Default --mbx-calendar-text-color-hover --mbx-calendar-selected-text-color-dark Calendar text color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow","title":"--mbx-calendar-arrow","text":"Fallback Default / / Fallback value for --mbx-calendar-arrow-light and --mbx-calendar-arrow-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-light","title":"--mbx-calendar-arrow-light","text":"Fallback Default --mbx-calendar-arrow --mbx-calendar-text-color-light Calendar arrow color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-dark","title":"--mbx-calendar-arrow-dark","text":"Fallback Default --mbx-calendar-arrow --mbx-calendar-text-color-dark Calendar arrow color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover","title":"--mbx-calendar-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-calendar-arrow-hover-light and --mbx-calendar-arrow-hover-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover-light","title":"--mbx-calendar-arrow-hover-light","text":"Fallback Default --mbx-calendar-arrow-hover --mbx-text-color-light Calendar arrow color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-arrow-hover-dark","title":"--mbx-calendar-arrow-hover-dark","text":"Fallback Default --mbx-calendar-arrow-hover --mbx-text-color-dark Calendar arrow color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-today-color","title":"--mbx-calendar-today-color","text":"Fallback Default / / Fallback value for --mbx-calendar-today-color-light and --mbx-calendar-today-color-dark
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-today-color-light","title":"--mbx-calendar-today-color-light","text":"Fallback Default --mbx-calendar-today-color red Calendar today color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Calendar/css-vars/#-mbx-calendar-today-color-dark","title":"--mbx-calendar-today-color-dark","text":"Fallback Default --mbx-calendar-today-color red Calendar today color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Calendar/props/","title":"Calendar properties","text":""},{"location":"old-guides/V3/components/organisms/Calendar/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/organisms/Calendar/props/#props-table","title":"Props table","text":"Parameter Type Default value CalendarDate Today date hideArrows boolean / days string[] English week labels months string[] English months labels onViewChange (date: CalendarDate) => void / startYear number Today year startMonth number Today month fromToday boolean true dayLabel string true labelClassName string / labelProps Record / onChange (newValue: CalendarDate) => void () => {} arrowClassName string /"},{"location":"old-guides/V3/components/organisms/Calendar/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/organisms/Calendar/props/#value","title":"value","text":"Type Default CalendarDate Today date Actual selected date
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#hidearrows","title":"hideArrows","text":"Type Default boolean / If true, hide arrow buttons near the date label
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#days","title":"days","text":"Type Default string[] English week labels Custom days labels
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#months","title":"months","text":"Type Default string[] English months labels Custom months labels
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#onviewchange","title":"onViewChange","text":"Type Default (date: CalendarDate) => void / Callback triggered when the Calendar view (the displayed month) is changed
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#startyear","title":"startYear","text":"Type Default number Today year Initial displayed year
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#startmonth","title":"startMonth","text":"Type Default number Today month Initial displayed month
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#fromtoday","title":"fromToday","text":"Type Default boolean true If false, prevent the user to select a date lower than today date
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#daylabel","title":"dayLabel","text":"Type Default string true Show/hide actual day label on top of the calendar
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#labelclassname","title":"labelClassName","text":"Type Default string / Custom className applied on the day label component
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#labelprops","title":"labelProps","text":"Type Default Record / Custom props applied on the day label component
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#onchange","title":"onChange","text":"Type Default (newValue: CalendarDate) => void () => {} Callback triggered when Calendar component input value is changed by the user
"},{"location":"old-guides/V3/components/organisms/Calendar/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button
"},{"location":"old-guides/V3/components/organisms/DatePicker/","title":"DatePicker page","text":"A smart date-picker, with an internal Calendar accessible to choose a date
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/","title":"DatePicker CSS variables","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-datepicker-background / / --mbx-datepicker-background-light --mbx-datepicker-background --mbx-background-light --mbx-datepicker-background-dark --mbx-datepicker-background --mbx-background-dark --mbx-datepicker-text-color / / --mbx-datepicker-text-color-light --mbx-datepicker-text-color --mbx-text-color-light --mbx-datepicker-text-color-dark --mbx-datepicker-text-color --mbx-text-color-dark --mbx-datepicker-icon / / --mbx-datepicker-icon-light --mbx-datepicker-icon --mbx-datepicker-text-color-light --mbx-datepicker-icon-dark --mbx-datepicker-icon --mbx-datepicker-text-color-dark --mbx-datepicker-icon-hover / / --mbx-datepicker-icon-hover-light --mbx-datepicker-icon-hover blue --mbx-datepicker-icon-hover-dark --mbx-datepicker-icon-hover orange --mbx-datepicker-calendar-background / / --mbx-datepicker-calendar-background-light --mbx-datepicker-calendar-background --mbx-calendar-background-light --mbx-datepicker-calendar-background-dark --mbx-datepicker-calendar-background --mbx-calendar-background-dark --mbx-datepicker-calendar-text-color / / --mbx-datepicker-calendar-text-color-light --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-light --mbx-datepicker-calendar-text-color-dark --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-dark --mbx-datepicker-calendar-background-hover / / --mbx-datepicker-calendar-background-hover-light --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-light --mbx-datepicker-calendar-background-hover-dark --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-dark --mbx-datepicker-calendar-text-color-hover / / --mbx-datepicker-calendar-text-color-hover-light --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-light --mbx-datepicker-calendar-text-color-hover-dark --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-dark --mbx-datepicker-calendar-arrow / / --mbx-datepicker-calendar-arrow-light --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-light --mbx-datepicker-calendar-arrow-dark --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-dark --mbx-datepicker-calendar-arrow-hover / / --mbx-datepicker-calendar-arrow-hover-light --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-light --mbx-datepicker-calendar-arrow-hover-dark --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-dark --mbx-datepicker-calendar-selected-background / / --mbx-datepicker-calendar-selected-background-light --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-light --mbx-datepicker-calendar-selected-background-dark --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-dark --mbx-datepicker-calendar-selected-text-color / / --mbx-datepicker-calendar-selected-text-color-light --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-light --mbx-datepicker-calendar-selected-text-color-dark --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-dark --mbx-datepicker-calendar-today-color / / --mbx-datepicker-calendar-today-color-light --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-light --mbx-datepicker-calendar-today-color-dark --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-dark --mbx-datepicker-modal-background / / --mbx-datepicker-modal-background-light --mbx-datepicker-modal-background --mbx-modal-background-light --mbx-datepicker-modal-background-dark --mbx-datepicker-modal-background --mbx-modal-background-dark --mbx-datepicker-modal-x-color / / --mbx-datepicker-modal-x-color-light --mbx-datepicker-modal-x-color --mbx-modal-x-color-light --mbx-datepicker-modal-x-color-dark --mbx-datepicker-modal-x-color --mbx-modal-x-color-dark --mbx-datepicker-modal-x-color-hover / / --mbx-datepicker-modal-x-color-hover-light --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-light --mbx-datepicker-modal-x-color-hover-dark --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-dark"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-background","title":"--mbx-datepicker-background","text":"Fallback Default / / Fallback value for --mbx-datepicker-background-light and --mbx-datepicker-background-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-background-light","title":"--mbx-datepicker-background-light","text":"Fallback Default --mbx-datepicker-background --mbx-background-light DatePicker background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-background-dark","title":"--mbx-datepicker-background-dark","text":"Fallback Default --mbx-datepicker-background --mbx-background-dark DatePicker background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color","title":"--mbx-datepicker-text-color","text":"Fallback Default / / Fallback value for --mbx-datepicker-text-color-light and --mbx-datepicker-text-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color-light","title":"--mbx-datepicker-text-color-light","text":"Fallback Default --mbx-datepicker-text-color --mbx-text-color-light DatePicker text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-text-color-dark","title":"--mbx-datepicker-text-color-dark","text":"Fallback Default --mbx-datepicker-text-color --mbx-text-color-dark DatePicker text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon","title":"--mbx-datepicker-icon","text":"Fallback Default / / Fallback value for --mbx-datepicker-icon-light and --mbx-datepicker-icon-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-light","title":"--mbx-datepicker-icon-light","text":"Fallback Default --mbx-datepicker-icon --mbx-datepicker-text-color-light DatePicker calendar icon color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-dark","title":"--mbx-datepicker-icon-dark","text":"Fallback Default --mbx-datepicker-icon --mbx-datepicker-text-color-dark DatePicker calendar icon color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover","title":"--mbx-datepicker-icon-hover","text":"Fallback Default / / Fallback value for --mbx-datepicker-icon-hover-light and --mbx-datepicker-icon-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover-light","title":"--mbx-datepicker-icon-hover-light","text":"Fallback Default --mbx-datepicker-icon-hover blue DatePicker calendar icon color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-icon-hover-dark","title":"--mbx-datepicker-icon-hover-dark","text":"Fallback Default --mbx-datepicker-icon-hover orange DatePicker calendar icon color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background","title":"--mbx-datepicker-calendar-background","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-background-light and --mbx-datepicker-calendar-background-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-light","title":"--mbx-datepicker-calendar-background-light","text":"Fallback Default --mbx-datepicker-calendar-background --mbx-calendar-background-light Extended from Calendar - Calendar background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-dark","title":"--mbx-datepicker-calendar-background-dark","text":"Fallback Default --mbx-datepicker-calendar-background --mbx-calendar-background-dark Extended from Calendar - Calendar background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color","title":"--mbx-datepicker-calendar-text-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-text-color-light and --mbx-datepicker-calendar-text-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-light","title":"--mbx-datepicker-calendar-text-color-light","text":"Fallback Default --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-light Extended from Calendar - Calendar text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-dark","title":"--mbx-datepicker-calendar-text-color-dark","text":"Fallback Default --mbx-datepicker-calendar-text-color --mbx-calendar-text-color-dark Extended from Calendar - Calendar text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover","title":"--mbx-datepicker-calendar-background-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-background-hover-light and --mbx-datepicker-calendar-background-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover-light","title":"--mbx-datepicker-calendar-background-hover-light","text":"Fallback Default --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-light Extended from Calendar - Calendar background when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-background-hover-dark","title":"--mbx-datepicker-calendar-background-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-background-hover --mbx-calendar-background-hover-dark Extended from Calendar - Calendar background when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover","title":"--mbx-datepicker-calendar-text-color-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-text-color-hover-light and --mbx-datepicker-calendar-text-color-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover-light","title":"--mbx-datepicker-calendar-text-color-hover-light","text":"Fallback Default --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-light Extended from Calendar - Calendar text color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-text-color-hover-dark","title":"--mbx-datepicker-calendar-text-color-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-text-color-hover --mbx-calendar-text-color-hover-dark Extended from Calendar - Calendar text color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow","title":"--mbx-datepicker-calendar-arrow","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-arrow-light and --mbx-datepicker-calendar-arrow-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-light","title":"--mbx-datepicker-calendar-arrow-light","text":"Fallback Default --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-light Extended from Calendar - Calendar arrow color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-dark","title":"--mbx-datepicker-calendar-arrow-dark","text":"Fallback Default --mbx-datepicker-calendar-arrow --mbx-calendar-arrow-dark Extended from Calendar - Calendar arrow color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover","title":"--mbx-datepicker-calendar-arrow-hover","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-arrow-hover-light and --mbx-datepicker-calendar-arrow-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover-light","title":"--mbx-datepicker-calendar-arrow-hover-light","text":"Fallback Default --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-light Extended from Calendar - Calendar arrow color when dark mode is `off', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-arrow-hover-dark","title":"--mbx-datepicker-calendar-arrow-hover-dark","text":"Fallback Default --mbx-datepicker-calendar-arrow-hover --mbx-calendar-arrow-hover-dark Extended from Calendar - Calendar arrow color when dark mode is `on', on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background","title":"--mbx-datepicker-calendar-selected-background","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-selected-background-light and --mbx-datepicker-calendar-selected-background-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background-light","title":"--mbx-datepicker-calendar-selected-background-light","text":"Fallback Default --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-light Extended from Calendar - Calendar selected cell background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-background-dark","title":"--mbx-datepicker-calendar-selected-background-dark","text":"Fallback Default --mbx-datepicker-calendar-selected-background --mbx-calendar-selected-background-dark Extended from Calendar - Calendar selected cell background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color","title":"--mbx-datepicker-calendar-selected-text-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-selected-text-color-light and --mbx-datepicker-calendar-selected-text-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color-light","title":"--mbx-datepicker-calendar-selected-text-color-light","text":"Fallback Default --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-light Extended from Calendar - Calendar selected cell text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-selected-text-color-dark","title":"--mbx-datepicker-calendar-selected-text-color-dark","text":"Fallback Default --mbx-datepicker-calendar-selected-text-color --mbx-calendar-selected-text-color-dark Extended from Calendar - Calendar selected cell text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color","title":"--mbx-datepicker-calendar-today-color","text":"Fallback Default / / Extended from Calendar - Fallback value for --mbx-datepicker-calendar-today-color-light and --mbx-datepicker-calendar-today-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color-light","title":"--mbx-datepicker-calendar-today-color-light","text":"Fallback Default --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-light Extended from Calendar - Calendar today color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-calendar-today-color-dark","title":"--mbx-datepicker-calendar-today-color-dark","text":"Fallback Default --mbx-datepicker-calendar-today-color --mbx-calendar-today-color-dark Extended from Calendar - Calendar today color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background","title":"--mbx-datepicker-modal-background","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-background-light and --mbx-datepicker-modal-background-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background-light","title":"--mbx-datepicker-modal-background-light","text":"Fallback Default --mbx-datepicker-modal-background --mbx-modal-background-light Extended from Modal - Modal background when dark mode is off
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-background-dark","title":"--mbx-datepicker-modal-background-dark","text":"Fallback Default --mbx-datepicker-modal-background --mbx-modal-background-dark Extended from Modal - Modal background when dark mode is on
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color","title":"--mbx-datepicker-modal-x-color","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-x-color-light and --mbx-datepicker-modal-x-color-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-light","title":"--mbx-datepicker-modal-x-color-light","text":"Fallback Default --mbx-datepicker-modal-x-color --mbx-modal-x-color-light Extended from Modal - Modal x icon color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-dark","title":"--mbx-datepicker-modal-x-color-dark","text":"Fallback Default --mbx-datepicker-modal-x-color --mbx-modal-x-color-dark Extended from Modal - Modal x icon color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover","title":"--mbx-datepicker-modal-x-color-hover","text":"Fallback Default / / Extended from Modal - Fallback value for --mbx-datepicker-modal-x-color-hover-light and --mbx-datepicker-modal-x-color-hover-dark
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover-light","title":"--mbx-datepicker-modal-x-color-hover-light","text":"Fallback Default --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-light Extended from Modal - Modal x icon color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/css-vars/#-mbx-datepicker-modal-x-color-hover-dark","title":"--mbx-datepicker-modal-x-color-hover-dark","text":"Fallback Default --mbx-datepicker-modal-x-color-hover --mbx-modal-x-color-hover-dark Extended from Modal - Modal x icon color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/","title":"DatePicker properties","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/props/#props-table","title":"Props table","text":"Parameter Type Default value CalendarDate Today date hideArrows boolean / days string[] English week labels months string[] English months labels onViewChange (date: CalendarDate) => void / startYear number Today year startMonth number Today month fromToday boolean true dayLabel string true labelClassName string / labelProps Record / onChange (newValue: CalendarDate) => void () => {} onClose () => void () => {} arrowClassName string /"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/organisms/DatePicker/props/#value","title":"value","text":"Type Default CalendarDate Today date Actual selected date - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#hidearrows","title":"hideArrows","text":"Type Default boolean / If true, hide arrow buttons near the date label - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#days","title":"days","text":"Type Default string[] English week labels Custom days labels - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#months","title":"months","text":"Type Default string[] English months labels Custom months labels - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#onviewchange","title":"onViewChange","text":"Type Default (date: CalendarDate) => void / Callback triggered when the Calendar view (the displayed month) is changed - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#startyear","title":"startYear","text":"Type Default number Today year Initial displayed year - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#startmonth","title":"startMonth","text":"Type Default number Today month Initial displayed month - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#fromtoday","title":"fromToday","text":"Type Default boolean true If false, prevent the user to select a date lower than today date - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#daylabel","title":"dayLabel","text":"Type Default string true Show/hide actual day label on top of the calendar - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#labelclassname","title":"labelClassName","text":"Type Default string / Custom className applied on the day label component - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#labelprops","title":"labelProps","text":"Type Default Record / Custom props applied on the day label component - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#onchange","title":"onChange","text":"Type Default (newValue: CalendarDate) => void () => {} Callback triggered when Calendar component input value is changed by the user - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#onclose","title":"onClose","text":"Type Default () => void () => {} Callback triggered when DatePicker modal is closed
"},{"location":"old-guides/V3/components/organisms/DatePicker/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button - extended from Calendar component
"},{"location":"old-guides/V3/components/organisms/Drawer/","title":"Drawer page","text":"A modern drawer, easy to integrate and to customize
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/","title":"Drawer CSS variables","text":""},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-drawer-background / / --mbx-drawer-background-light --mbx-drawer-background --mbx-background-light --mbx-drawer-background-dark --mbx-drawer-background --mbx-background-dark --mbx-drawer-text-color / / --mbx-drawer-text-color-light --mbx-drawer-text-color --mbx-text-color-light --mbx-drawer-text-color-dark --mbx-drawer-text-color --mbx-text-color-dark --mbx-drawer-arrow / / --mbx-drawer-arrow-light --mbx-drawer-arrow --mbx-drawer-text-color-light --mbx-drawer-arrow-dark --mbx-drawer-arrow --mbx-drawer-text-color-dark --mbx-drawer-arrow-hover / / --mbx-drawer-arrow-hover-light --mbx-drawer-arrow-hover / --mbx-drawer-arrow-hover-dark --mbx-drawer-arrow-hover /"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-background","title":"--mbx-drawer-background","text":"Fallback Default / / Fallback value for --mbx-drawer-background-light and --mbx-drawer-background-dark
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-background-light","title":"--mbx-drawer-background-light","text":"Fallback Default --mbx-drawer-background --mbx-background-light Drawer background when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-background-dark","title":"--mbx-drawer-background-dark","text":"Fallback Default --mbx-drawer-background --mbx-background-dark Drawer background when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-text-color","title":"--mbx-drawer-text-color","text":"Fallback Default / / Fallback value for --mbx-drawer-text-color-light and --mbx-drawer-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-text-color-light","title":"--mbx-drawer-text-color-light","text":"Fallback Default --mbx-drawer-text-color --mbx-text-color-light Drawer text color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-text-color-dark","title":"--mbx-drawer-text-color-dark","text":"Fallback Default --mbx-drawer-text-color --mbx-text-color-dark Drawer text color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow","title":"--mbx-drawer-arrow","text":"Fallback Default / / Fallback value for --mbx-drawer-arrow-light and --mbx-drawer-arrow-dark
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-light","title":"--mbx-drawer-arrow-light","text":"Fallback Default --mbx-drawer-arrow --mbx-drawer-text-color-light Drawer arrow color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-dark","title":"--mbx-drawer-arrow-dark","text":"Fallback Default --mbx-drawer-arrow --mbx-drawer-text-color-dark Drawer arrow color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover","title":"--mbx-drawer-arrow-hover","text":"Fallback Default / / Fallback value for --mbx-drawer-arrow-hover-light and --mbx-drawer-arrow-hover-dark
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover-light","title":"--mbx-drawer-arrow-hover-light","text":"Fallback Default --mbx-drawer-arrow-hover / Drawer arrow color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/organisms/Drawer/css-vars/#-mbx-drawer-arrow-hover-dark","title":"--mbx-drawer-arrow-hover-dark","text":"Fallback Default --mbx-drawer-arrow-hover / Drawer arrow color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/organisms/Drawer/props/","title":"Drawer properties","text":""},{"location":"old-guides/V3/components/organisms/Drawer/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/organisms/Drawer/props/#props-table","title":"Props table","text":"Parameter Type Default position left | right | top | bottom | top-left | top-right | bottom-left | bottom-right left onClose () => void () => {} children (JSX.Element | string) | (JSX.Element|string`)[] / closeOnClickOutside boolean true arrowClassName string /"},{"location":"old-guides/V3/components/organisms/Drawer/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/organisms/Drawer/props/#position","title":"position","text":"Type Default left | right | top | bottom | top-left | top-right | bottom-left | bottom-right left Drawer position, relative to the entire window
"},{"location":"old-guides/V3/components/organisms/Drawer/props/#onclose","title":"onClose","text":"Type Default () => void () => {} callback triggered when Drawer is closed
"},{"location":"old-guides/V3/components/organisms/Drawer/props/#children","title":"children","text":"Type Default (JSX.Element | string) | (JSX.Element|string`)[] / Drawer content
"},{"location":"old-guides/V3/components/organisms/Drawer/props/#closeonclickoutside","title":"closeOnClickOutside","text":"Type Default boolean true If false, the drawer won't be closed when clicking outside of it
"},{"location":"old-guides/V3/components/organisms/Drawer/props/#arrowclassname","title":"arrowClassName","text":"Type Default string / Custom classname applied on the arrow button
"},{"location":"old-guides/V3/components/organisms/Form/","title":"Form page","text":"A totally configurable Form, with a submit button to let the user submit data from your web-app
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/","title":"Form CSS variables","text":""},{"location":"old-guides/V3/components/organisms/Form/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-form-background-light --mbx-form-background --mbx-background-light --mbx-form-background / / --mbx-form-background-dark --mbx-form-background --mbx-background-dark --mbx-form-text-color / / --mbx-form-text-color-light --mbx-form-text-color --mbx-text-color-light --mbx-form-text-color-dark --mbx-form-text-color --mbx-text-color-dark --mbx-form-submit-background / / --mbx-form-submit-background-light --mbx-form-submit-background mbx-button-background-light --mbx-form-submit-background-dark --mbx-form-submit-background mbx-button-background-dark --mbx-form-submit-text-color / / --mbx-form-submit-text-color-light --mbx-form-submit-text-color mbx-button-text-color-light --mbx-form-submit-text-color-dark --mbx-form-submit-text-color mbx-button-text-color-dark --mbx-form-formfield-background / / --mbx-form-formfield-background-dark --mbx-form-formfield-background --mbx-formfield-background-dark --mbx-form-formfield-background-light --mbx-form-formfield-background --mbx-formfield-background-light --mbx-form-formfield-text-color / / --mbx-form-formfield-text-color-light --mbx-form-formfield-text-color --mbx-formfield-text-color-light --mbx-form-formfield-text-color-dark --mbx-form-formfield-text-color --mbx-formfield-text-color-dark --mbx-form-formfield-background-hover / / --mbx-form-formfield-background-hover-light --mbx-form-formfield-background-hover --mbx-formfield-background-hover-light --mbx-form-formfield-background-hover-dark --mbx-form-formfield-background-hover --mbx-formfield-background-hover-dark --mbx-form-formfield-text-color-hover / / --mbx-form-formfield-text-color-hover-light --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-light --mbx-form-formfield-text-color-hover-dark --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-dark --mbx-form-formfield-error-border / / --mbx-form-formfield-error-border-light --mbx-form-formfield-error-border --mbx-formfield-error-border-light --mbx-form-formfield-error-border-dark --mbx-form-formfield-error-border --mbx-formfield-error-border-dark --mbx-form-formfield-error-text / / --mbx-form-formfield-error-text-light --mbx-form-formfield-error-text --mbx-formfield-error-text-light --mbx-form-formfield-error-text-dark --mbx-form-formfield-error-text --mbx-formfield-error-text-dark"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-background-light","title":"--mbx-form-background-light","text":"Fallback Default --mbx-form-background --mbx-background-light Form background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-background","title":"--mbx-form-background","text":"Fallback Default / / Fallback value for and
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-background-dark","title":"--mbx-form-background-dark","text":"Fallback Default --mbx-form-background --mbx-background-dark Form background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-text-color","title":"--mbx-form-text-color","text":"Fallback Default / / Fallback value for and
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-text-color-light","title":"--mbx-form-text-color-light","text":"Fallback Default --mbx-form-text-color --mbx-text-color-light Form text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-text-color-dark","title":"--mbx-form-text-color-dark","text":"Fallback Default --mbx-form-text-color --mbx-text-color-dark Form text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-background","title":"--mbx-form-submit-background","text":"Fallback Default / / Fallback value for --mbx-form-submit-background-light and --mbx-form-submit-background-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-background-light","title":"--mbx-form-submit-background-light","text":"Fallback Default --mbx-form-submit-background mbx-button-background-light Form submit button background when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-background-dark","title":"--mbx-form-submit-background-dark","text":"Fallback Default --mbx-form-submit-background mbx-button-background-dark Form submit button background when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-text-color","title":"--mbx-form-submit-text-color","text":"Fallback Default / / Fallback value for --mbx-form-submit-text-color-light and --mbx-form-submit-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-text-color-light","title":"--mbx-form-submit-text-color-light","text":"Fallback Default --mbx-form-submit-text-color mbx-button-text-color-light Form submit button text color when dark mode is `off'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-submit-text-color-dark","title":"--mbx-form-submit-text-color-dark","text":"Fallback Default --mbx-form-submit-text-color mbx-button-text-color-dark Form submit button text color when dark mode is `on'
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background","title":"--mbx-form-formfield-background","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-background-light and --mbx-form-formfield-background-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-dark","title":"--mbx-form-formfield-background-dark","text":"Fallback Default --mbx-form-formfield-background --mbx-formfield-background-dark Extended from FormField - FormField background when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-light","title":"--mbx-form-formfield-background-light","text":"Fallback Default --mbx-form-formfield-background --mbx-formfield-background-light Extended from FormField - FormField background when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color","title":"--mbx-form-formfield-text-color","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-text-color-light and --mbx-form-formfield-text-color-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-light","title":"--mbx-form-formfield-text-color-light","text":"Fallback Default --mbx-form-formfield-text-color --mbx-formfield-text-color-light Extended from FormField - FormField text color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-dark","title":"--mbx-form-formfield-text-color-dark","text":"Fallback Default --mbx-form-formfield-text-color --mbx-formfield-text-color-dark Extended from FormField - FormField text color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover","title":"--mbx-form-formfield-background-hover","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-background-hover-light and --mbx-form-formfield-background-hover-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover-light","title":"--mbx-form-formfield-background-hover-light","text":"Fallback Default --mbx-form-formfield-background-hover --mbx-formfield-background-hover-light Extended from FormField - FormField background when dark mode is off, on hover
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-background-hover-dark","title":"--mbx-form-formfield-background-hover-dark","text":"Fallback Default --mbx-form-formfield-background-hover --mbx-formfield-background-hover-dark Extended from FormField - FormField background when dark mode is on, on hover
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover","title":"--mbx-form-formfield-text-color-hover","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-text-color-hover-light and --mbx-form-formfield-text-color-hover-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover-light","title":"--mbx-form-formfield-text-color-hover-light","text":"Fallback Default --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-light Extended from FormField - FormField text color when dark mode is off, on hover
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-text-color-hover-dark","title":"--mbx-form-formfield-text-color-hover-dark","text":"Fallback Default --mbx-form-formfield-text-color-hover --mbx-formfield-text-color-hover-dark Extended from FormField - FormField text color when dark mode is on, on hover
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-border","title":"--mbx-form-formfield-error-border","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-error-border-light and --mbx-form-formfield-error-border-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-border-light","title":"--mbx-form-formfield-error-border-light","text":"Fallback Default --mbx-form-formfield-error-border --mbx-formfield-error-border-light Extended from FormField - FormField error box border color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-border-dark","title":"--mbx-form-formfield-error-border-dark","text":"Fallback Default --mbx-form-formfield-error-border --mbx-formfield-error-border-dark Extended from FormField - FormField error box border color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-text","title":"--mbx-form-formfield-error-text","text":"Fallback Default / / Extended from FormField - Fallback value for --mbx-form-formfield-error-text-light and --mbx-form-formfield-error-text-dark
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-text-light","title":"--mbx-form-formfield-error-text-light","text":"Fallback Default --mbx-form-formfield-error-text --mbx-formfield-error-text-light Extended from FormField - FormField error box text color when dark mode is off
"},{"location":"old-guides/V3/components/organisms/Form/css-vars/#-mbx-form-formfield-error-text-dark","title":"--mbx-form-formfield-error-text-dark","text":"Fallback Default --mbx-form-formfield-error-text --mbx-formfield-error-text-dark Extended from FormField - FormField error box text color when dark mode is on
"},{"location":"old-guides/V3/components/organisms/Form/props/","title":"Form properties","text":""},{"location":"old-guides/V3/components/organisms/Form/props/#summary","title":"Summary","text":""},{"location":"old-guides/V3/components/organisms/Form/props/#props-table","title":"Props table","text":"Parameter Type Default title string / fields Record {} onSubmit (values: Record) => void / submitLabel string | JSX.Element / fieldClassName string / children JSX.Element /"},{"location":"old-guides/V3/components/organisms/Form/props/#props-list","title":"Props list","text":""},{"location":"old-guides/V3/components/organisms/Form/props/#title","title":"title","text":"Type Default string / Form title
"},{"location":"old-guides/V3/components/organisms/Form/props/#fields","title":"fields","text":"Type Default Record {} Form fields object. Every key is the field unique ID, and will be used on submit when returning their values
"},{"location":"old-guides/V3/components/organisms/Form/props/#onsubmit","title":"onSubmit","text":"Type Default (values: Record) => void / Custom callback triggered when clicking on submit button. Gives the fields values as input parameter
"},{"location":"old-guides/V3/components/organisms/Form/props/#submitlabel","title":"submitLabel","text":"Type Default string | JSX.Element / Custom submit button label
"},{"location":"old-guides/V3/components/organisms/Form/props/#fieldclassname","title":"fieldClassName","text":"Type Default string / Custom classname applied on every field
"},{"location":"old-guides/V3/components/organisms/Form/props/#children","title":"children","text":"Type Default JSX.Element / Form content
"},{"location":"shared/","title":"MoBrix-ui shared page","text":""},{"location":"shared/css-vars/","title":"MoBrix-ui shared CSS variables","text":""},{"location":"shared/css-vars/#summary","title":"Summary","text":" - CSS Variables table
- CSS Variables list
"},{"location":"shared/css-vars/#css-variables-table","title":"CSS Variables table","text":"Css variable Fallback Default --mbx-background / / --mbx-background-light --mbx-background linear-gradient(to right, #fff, #ededee, #e6e7e7) --mbx-background-dark --mbx-background linear-gradient(to right, #2d3748, #1d232e) --mbx-background-color / / --mbx-background-color-light --mbx-background-color #e9e9e9 --mbx-background-color-dark --mbx-background-color #1d232e --mbx-background-color-hover / / --mbx-background-color-hover-light --mbx-background-color-hover #dfeaf8 --mbx-background-color-hover-dark --mbx-background-color-hover #3a3552 --mbx-background-hover / / --mbx-background-hover-light --mbx-background-hover linear-gradient(to right, #ececec, #e1e1e6, #dbdddd) --mbx-background-hover-dark --mbx-background-hover linear-gradient(to right, #364257, #252d3b) --mbx-text-color / / --mbx-text-color-light --mbx-text-color #1b1b1b --mbx-text-color-dark --mbx-text-color white --mbx-text-color-hover / / --mbx-text-color-hover-light --mbx-text-color-hover #413c5c --mbx-text-color-hover-dark --mbx-text-color-hover #dfeaf8 --mbx-shadow / / --mbx-shadow-light --mbx-shadow #464545 --mbx-shadow-dark --mbx-shadow #464545 --mbx-focus-color / / --mbx-focus-color-light --mbx-focus-color #7785ff --mbx-focus-color-dark --mbx-focus-color #fb7a10"},{"location":"shared/css-vars/#css-variables-list","title":"CSS Variables list","text":""},{"location":"shared/css-vars/#-mbx-background","title":"--mbx-background","text":"Fallback Default / / Fallback value for --mbx-background-light and --mbx-background-dark variables
"},{"location":"shared/css-vars/#-mbx-background-light","title":"--mbx-background-light","text":"Fallback Default --mbx-background linear-gradient(to right, #fff, #ededee, #e6e7e7) Global MoBrix-ui background, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-background-dark","title":"--mbx-background-dark","text":"Fallback Default --mbx-background linear-gradient(to right, #2d3748, #1d232e) Global MoBrix-ui background, when dark mode is on
"},{"location":"shared/css-vars/#-mbx-background-color","title":"--mbx-background-color","text":"Fallback Default / / Fallback value for --mbx-background-color-light and --mbx-background-color-dark variables
"},{"location":"shared/css-vars/#-mbx-background-color-light","title":"--mbx-background-color-light","text":"Fallback Default --mbx-background-color #e9e9e9 Global MoBrix-ui background color, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-background-color-dark","title":"--mbx-background-color-dark","text":"Fallback Default --mbx-background-color #1d232e Global MoBrix-ui background color, when dark mode is on
"},{"location":"shared/css-vars/#-mbx-background-color-hover","title":"--mbx-background-color-hover","text":"Fallback Default / / Fallback value for --mbx-background-color-hover-light and --mbx-background-color-hover-dark variables
"},{"location":"shared/css-vars/#-mbx-background-color-hover-light","title":"--mbx-background-color-hover-light","text":"Fallback Default --mbx-background-color-hover #dfeaf8 Global MoBrix-ui background color, when dark mode is off, on hover
"},{"location":"shared/css-vars/#-mbx-background-color-hover-dark","title":"--mbx-background-color-hover-dark","text":"Fallback Default --mbx-background-color-hover #3a3552 Global MoBrix-ui background color, when dark mode is on, on hover
"},{"location":"shared/css-vars/#-mbx-background-hover","title":"--mbx-background-hover","text":"Fallback Default / / Fallback value for --mbx-background-hover-light and --mbx-background-hover-dark variables
"},{"location":"shared/css-vars/#-mbx-background-hover-light","title":"--mbx-background-hover-light","text":"Fallback Default --mbx-background-hover linear-gradient(to right, #ececec, #e1e1e6, #dbdddd) Global MoBrix-ui background, when dark mode is off, on hover
"},{"location":"shared/css-vars/#-mbx-background-hover-dark","title":"--mbx-background-hover-dark","text":"Fallback Default --mbx-background-hover linear-gradient(to right, #364257, #252d3b) Global MoBrix-ui background, when dark mode is on, on hover
"},{"location":"shared/css-vars/#-mbx-text-color","title":"--mbx-text-color","text":"Fallback Default / / Fallback value for --mbx-text-color-light and --mbx-text-color-dark variables
"},{"location":"shared/css-vars/#-mbx-text-color-light","title":"--mbx-text-color-light","text":"Fallback Default --mbx-text-color #1b1b1b Global MoBrix-ui text color, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-text-color-dark","title":"--mbx-text-color-dark","text":"Fallback Default --mbx-text-color white Global MoBrix-ui text color, when dark mode is on
"},{"location":"shared/css-vars/#-mbx-text-color-hover","title":"--mbx-text-color-hover","text":"Fallback Default / / Fallback value for --mbx-text-color-hover-light and --mbx-text-color-hover-dark variables
"},{"location":"shared/css-vars/#-mbx-text-color-hover-light","title":"--mbx-text-color-hover-light","text":"Fallback Default --mbx-text-color-hover #413c5c Global MoBrix-ui text color, when dark mode is off, on hover
"},{"location":"shared/css-vars/#-mbx-text-color-hover-dark","title":"--mbx-text-color-hover-dark","text":"Fallback Default --mbx-text-color-hover #dfeaf8 Global MoBrix-ui text color, when dark mode is on, on hover
"},{"location":"shared/css-vars/#-mbx-shadow","title":"--mbx-shadow","text":"Fallback Default / / Fallback value for --mbx-shadow-light and --mbx-shadow-dark variables
"},{"location":"shared/css-vars/#-mbx-shadow-light","title":"--mbx-shadow-light","text":"Fallback Default --mbx-shadow #464545 Global MoBrix-ui shadow color, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-shadow-dark","title":"--mbx-shadow-dark","text":"Fallback Default --mbx-shadow #464545 Global MoBrix-ui shadow color, when dark mode is on
"},{"location":"shared/css-vars/#-mbx-focus-color","title":"--mbx-focus-color","text":"Fallback Default / / Fallback value for --mbx-focus-color-light and --mbx-focus-color-dark variables
"},{"location":"shared/css-vars/#-mbx-focus-color-light","title":"--mbx-focus-color-light","text":"Fallback Default --mbx-focus-color #7785ff Global MoBrix-ui focus color, when dark mode is off
"},{"location":"shared/css-vars/#-mbx-focus-color-dark","title":"--mbx-focus-color-dark","text":"Fallback Default --mbx-focus-color #fb7a10 Global MoBrix-ui focus color, when dark mode is on
"},{"location":"shared/props/","title":"MoBrix-ui shared properties","text":""},{"location":"shared/props/#summary","title":"Summary","text":""},{"location":"shared/props/#props-table","title":"Props table","text":"Parameter Type Default key string / className string / dark boolean false hide boolean false id string / shadow boolean true style CSSProperties / unstyled boolean false animated boolean true animation fade-in | slide-in-left | slide-in-right | slide-in-top | shake / background boolean true hover boolean true active boolean false disabled boolean false onKeyDown (keyEvent : any) => void / onFocus () => void / onFocusLost () => void / props Record / a11y boolean true a11yLabel string / tabIndex number | string /"},{"location":"shared/props/#props-list","title":"Props list","text":""},{"location":"shared/props/#key","title":"key","text":"Type Default string / React key, the standard key parameter
"},{"location":"shared/props/#classname","title":"className","text":"Type Default string / custom className applied on main container
"},{"location":"shared/props/#dark","title":"dark","text":"Type Default boolean false Enable/disable dark mode
"},{"location":"shared/props/#hide","title":"hide","text":"Type Default boolean false Hide/show component
"},{"location":"shared/props/#id","title":"id","text":"Type Default string / id parameter (for styling/testing purpose, to easily find the component into the DOM)
"},{"location":"shared/props/#shadow","title":"shadow","text":"Type Default boolean true Enable/disable shadow behind component
"},{"location":"shared/props/#style","title":"style","text":"Type Default CSSProperties / Css inline properties applied on main container
"},{"location":"shared/props/#unstyled","title":"unstyled","text":"Type Default boolean false If true, no standard MoBrix-ui styles will be applied on the components (useful for example, with image buttons)
"},{"location":"shared/props/#animated","title":"animated","text":"Type Default boolean true Enable/disable component animations
"},{"location":"shared/props/#animation","title":"animation","text":"Type Default fade-in | slide-in-left | slide-in-right | slide-in-top | shake / If animated=true, this parameter specifies which animation is used when component is rendered
"},{"location":"shared/props/#background","title":"background","text":"Type Default boolean true Enable/disable component background
"},{"location":"shared/props/#hover","title":"hover","text":"Type Default boolean true Enable/disable component hover standard styles
"},{"location":"shared/props/#active","title":"active","text":"Type Default boolean false Enable/disable component click standard styles
"},{"location":"shared/props/#disabled","title":"disabled","text":"Type Default boolean false If true, disable the component. The effect may vary depending on the component type
"},{"location":"shared/props/#onkeydown","title":"onKeyDown","text":"Type Default (keyEvent : any) => void / Custom callback triggered when a key is pressed while using the component (for example, when writing text inside an Input component).
"},{"location":"shared/props/#onfocus","title":"onFocus","text":"Type Default () => void / Custom callback triggered when the component get the focus (for example, through tab key)
"},{"location":"shared/props/#onfocuslost","title":"onFocusLost","text":"Type Default () => void / Custom callback triggered when the component lose the focus (for example, when user clicks outside it)
"},{"location":"shared/props/#props","title":"props","text":"Type Default Record / Custom additional properties, applied to the component
"},{"location":"shared/props/#a11y","title":"a11y","text":"Type Default boolean true Enable/disable accessibility features
"},{"location":"shared/props/#a11ylabel","title":"a11yLabel","text":"Type Default string / If a11y = true, is used as aria-label accessibility parameter
"},{"location":"shared/props/#tabindex","title":"tabIndex","text":"Type Default number | string / Regular tabIndex a11y parameter. If a11y = true, this parameter is passed as tabIndex prop to the component (if not set, its value will be 0). If a11y = false, it is set to -1 (so the component is not focusable through tab key`)
"}]}
\ No newline at end of file
diff --git a/playground/public/docs/sitemap.xml.gz b/playground/public/docs/sitemap.xml.gz
index 8a6e7bf1..2b8f47b6 100644
Binary files a/playground/public/docs/sitemap.xml.gz and b/playground/public/docs/sitemap.xml.gz differ
diff --git a/src/components/atoms/Password/styles.css b/src/components/atoms/Password/styles.css
index 54dce442..5e3fc83b 100644
--- a/src/components/atoms/Password/styles.css
+++ b/src/components/atoms/Password/styles.css
@@ -41,19 +41,19 @@
--mbx-trdur: 0.1s;
width: fit-content;
--mbx-icon-light: var(
- --mbx-password-icon-color-light,
- var(--mbx-password-icon-color, var(--mbx-psw-txt))
+ --mbx-password-icon-light,
+ var(--mbx-password-icon, var(--mbx-psw-txt))
);
--mbx-icon-dark: var(
- --mbx-password-icon-color-dark,
- var(--mbx-password-icon-color, var(--mbx-psw-txt))
+ --mbx-password-icon-dark,
+ var(--mbx-password-icon, var(--mbx-psw-txt))
);
--mbx-icon-hover-light: var(
- --mbx-password-icon-color-hover-light,
- var(--mbx-password-icon-color-hover, var(--mbx-psw-txt))
+ --mbx-password-icon-hover-light,
+ var(--mbx-password-icon-hover, var(--mbx-psw-txt))
);
--mbx-icon-hover-dark: var(
- --mbx-password-icon-color-hover-dark,
- var(--mbx-password-icon-color-hover, var(--mbx-psw-txt))
+ --mbx-password-icon-hover-dark,
+ var(--mbx-password-icon-hover, var(--mbx-psw-txt))
);
}
diff --git a/src/components/molecules/Review/styles.css b/src/components/molecules/Review/styles.css
index d86097f1..d17d7bfb 100644
--- a/src/components/molecules/Review/styles.css
+++ b/src/components/molecules/Review/styles.css
@@ -51,11 +51,11 @@
[data-mbx-id="rev"] [data-mbx-img] {
--mbx-icon-light: var(
- --mbx-review-icon-color-light,
- var(--mbx-review-icon-color, #615f5f)
+ --mbx-review-icon-light,
+ var(--mbx-review-icon, #615f5f)
);
--mbx-icon-dark: var(
- --mbx-review-icon-color-dark,
- var(--mbx-review-icon-color, white)
+ --mbx-review-icon-dark,
+ var(--mbx-review-icon, white)
);
}