├── .gitignore
├── .npmignore
├── README.md
├── README.txt
├── app
├── .npmignore
├── demo
│ ├── App.tsx
│ └── index.tsx
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── free
│ │ ├── components
│ │ │ ├── Accordion
│ │ │ │ ├── Accordion.tsx
│ │ │ │ ├── AccordionContext.tsx
│ │ │ │ ├── AccordionItem
│ │ │ │ │ ├── AccordionItem.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Badge
│ │ │ │ ├── Badge.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Button
│ │ │ │ ├── Button.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── ButtonGroup
│ │ │ │ ├── ButtonGroup.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Card
│ │ │ │ ├── Card.tsx
│ │ │ │ ├── CardBody
│ │ │ │ │ ├── CardBody.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CardFooter
│ │ │ │ │ ├── CardFooter.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CardGroup
│ │ │ │ │ ├── CardGroup.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CardHeader
│ │ │ │ │ ├── CardHeader.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CardImage
│ │ │ │ │ ├── CardImage.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CardLink
│ │ │ │ │ ├── CardLink.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CardOverlay
│ │ │ │ │ ├── CardOverlay.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CardSubTitle
│ │ │ │ │ ├── CardSubTitle.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CardText
│ │ │ │ │ ├── CardText.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CardTitle
│ │ │ │ │ ├── CardTitle.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Carousel
│ │ │ │ ├── Carousel.tsx
│ │ │ │ ├── CarouselCaption
│ │ │ │ │ ├── CarouselCaption.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CarouselControls
│ │ │ │ │ ├── CarouselControls.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CarouselIndicators
│ │ │ │ │ ├── CarouselIndicators.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── CarouselItem
│ │ │ │ │ ├── CarouselItem.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── types.tsx
│ │ │ │ └── utils
│ │ │ │ │ ├── CarouselContext.tsx
│ │ │ │ │ └── utils.ts
│ │ │ ├── Collapse
│ │ │ │ ├── Collapse.tsx
│ │ │ │ ├── hooks
│ │ │ │ │ └── useHeight.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Dropdown
│ │ │ │ ├── Dropdown.tsx
│ │ │ │ ├── DropdownBody
│ │ │ │ │ └── DropdownBody.tsx
│ │ │ │ ├── DropdownItem
│ │ │ │ │ ├── DropdownItem.tsx
│ │ │ │ │ ├── style.css
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── DropdownMenu
│ │ │ │ │ ├── DropdownMenu.tsx
│ │ │ │ │ ├── style.css
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── DropdownToggle
│ │ │ │ │ ├── DropdownToggle.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── ItemChild
│ │ │ │ │ ├── ItemChild.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── contexts
│ │ │ │ │ ├── DropdownContext.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── helpers
│ │ │ │ │ ├── skipNextChild.ts
│ │ │ │ │ └── typeguards.ts
│ │ │ │ ├── hooks
│ │ │ │ │ ├── useClickOutside.tsx
│ │ │ │ │ ├── useDropdownContext.tsx
│ │ │ │ │ ├── useFade.tsx
│ │ │ │ │ └── useKeyboard.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── ListGroup
│ │ │ │ ├── ListGroup.tsx
│ │ │ │ ├── ListGroupItem
│ │ │ │ │ ├── ListGroupItem.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Modal
│ │ │ │ ├── Modal.tsx
│ │ │ │ ├── ModalBody
│ │ │ │ │ ├── ModalBody.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── ModalContent
│ │ │ │ │ ├── ModalContent.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── ModalDialog
│ │ │ │ │ ├── ModalDialog.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── ModalFooter
│ │ │ │ │ ├── ModalFooter.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── ModalHeader
│ │ │ │ │ ├── ModalHeader.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── ModalTitle
│ │ │ │ │ ├── ModalTitle.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── hooks
│ │ │ │ │ └── useAnimationPositionValues.tsx
│ │ │ │ ├── types.ts
│ │ │ │ ├── types.tsx
│ │ │ │ └── utils
│ │ │ │ │ └── utils.ts
│ │ │ ├── Popover
│ │ │ │ ├── Popover.tsx
│ │ │ │ ├── PopoverBody
│ │ │ │ │ ├── PopoverBody.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── PopoverHeader
│ │ │ │ │ ├── PopoverHeader.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Progress
│ │ │ │ ├── Progress.tsx
│ │ │ │ ├── ProgressBar
│ │ │ │ │ ├── ProgressBar.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Spinner
│ │ │ │ ├── Spinner.tsx
│ │ │ │ └── types.tsx
│ │ │ └── Tooltip
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── types.tsx
│ │ ├── data
│ │ │ └── Tables
│ │ │ │ ├── Table.tsx
│ │ │ │ ├── TableBody
│ │ │ │ ├── TableBody.tsx
│ │ │ │ └── types.tsx
│ │ │ │ ├── TableHead
│ │ │ │ ├── TableHead.tsx
│ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ ├── forms
│ │ │ ├── Checkbox
│ │ │ │ ├── Checkbox.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── File
│ │ │ │ ├── File.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Input
│ │ │ │ ├── Input.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── InputGroup
│ │ │ │ ├── InputGroup.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── InputTemplate
│ │ │ │ ├── InputTemplate.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Radio
│ │ │ │ ├── Radio.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Range
│ │ │ │ ├── Range.tsx
│ │ │ │ ├── RangeThumb
│ │ │ │ │ └── RangeThumb.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Switch
│ │ │ │ ├── Switch.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── TextArea
│ │ │ │ ├── TextArea.tsx
│ │ │ │ └── types.tsx
│ │ │ └── Validation
│ │ │ │ ├── Validation.tsx
│ │ │ │ ├── ValidationItem
│ │ │ │ ├── ValidationItem.tsx
│ │ │ │ ├── index.d.ts
│ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ ├── layout
│ │ │ ├── Column
│ │ │ │ ├── Column.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Container
│ │ │ │ ├── Container.tsx
│ │ │ │ └── types.tsx
│ │ │ └── Row
│ │ │ │ ├── Row.tsx
│ │ │ │ └── types.tsx
│ │ ├── methods
│ │ │ └── Ripple
│ │ │ │ ├── Ripple.tsx
│ │ │ │ ├── RippleWave
│ │ │ │ ├── RippleWave.tsx
│ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ ├── navigation
│ │ │ ├── Breadcrumb
│ │ │ │ ├── Breadcrumb.tsx
│ │ │ │ ├── BreadcrumbItem
│ │ │ │ │ ├── BreadcrumbItem.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Footer
│ │ │ │ ├── Footer.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Navbar
│ │ │ │ ├── Navbar.tsx
│ │ │ │ ├── NavbarBrand
│ │ │ │ │ ├── NavbarBrand.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── NavbarItem
│ │ │ │ │ ├── NavbarItem.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── NavbarLink
│ │ │ │ │ ├── NavLink.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── NavbarNav
│ │ │ │ │ ├── NavbarNav.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── NavbarToggler
│ │ │ │ │ ├── NavbarToggler.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Pagination
│ │ │ │ ├── Pagination.tsx
│ │ │ │ ├── PaginationItem
│ │ │ │ │ ├── PaginationItem.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── PaginationLink
│ │ │ │ │ ├── PaginationLink.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ │ ├── Scrollspy
│ │ │ │ ├── Scrollspy.tsx
│ │ │ │ ├── ScrollspyContext.tsx
│ │ │ │ ├── ScrollspyLink
│ │ │ │ │ ├── ScrollspyLink.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ ├── ScrollspySubList
│ │ │ │ │ ├── ScrollspySubList.tsx
│ │ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ │ └── Tabs
│ │ │ │ ├── Tabs.tsx
│ │ │ │ ├── TabsContent
│ │ │ │ ├── TabsContent.tsx
│ │ │ │ └── types.tsx
│ │ │ │ ├── TabsItem
│ │ │ │ ├── TabsItem.tsx
│ │ │ │ └── types.tsx
│ │ │ │ ├── TabsLink
│ │ │ │ ├── TabsLink.tsx
│ │ │ │ └── types.tsx
│ │ │ │ ├── TabsPane
│ │ │ │ ├── TabsPane.tsx
│ │ │ │ └── types.tsx
│ │ │ │ └── types.tsx
│ │ └── styles
│ │ │ ├── Icon
│ │ │ ├── Icon.tsx
│ │ │ └── types.tsx
│ │ │ └── Typography
│ │ │ ├── Typography.tsx
│ │ │ └── types.tsx
│ ├── index.tsx
│ ├── types
│ │ ├── animation.ts
│ │ ├── baseComponent.ts
│ │ ├── colors.ts
│ │ ├── placement.ts
│ │ └── size.ts
│ └── utils
│ │ ├── ClientOnly.tsx
│ │ ├── Portal.tsx
│ │ └── hooks.tsx
├── tsconfig.json
└── webpack.config.js
├── dist
├── css
│ ├── mdb.dark.min.css
│ ├── mdb.dark.min.css.map
│ ├── mdb.dark.rtl.min.css
│ ├── mdb.min.css
│ ├── mdb.min.css.map
│ └── mdb.rtl.min.css
├── mdb-react-ui-kit.cjs
├── mdb-react-ui-kit.esm.js
├── scss
│ ├── bootstrap-rtl-fix
│ │ ├── _accordion.scss
│ │ ├── _alert.scss
│ │ ├── _badge.scss
│ │ ├── _breadcrumb.scss
│ │ ├── _button-group.scss
│ │ ├── _buttons.scss
│ │ ├── _card.scss
│ │ ├── _carousel.scss
│ │ ├── _close.scss
│ │ ├── _containers.scss
│ │ ├── _dropdown.scss
│ │ ├── _forms.scss
│ │ ├── _functions.scss
│ │ ├── _grid.scss
│ │ ├── _helpers.scss
│ │ ├── _images.scss
│ │ ├── _list-group.scss
│ │ ├── _maps.scss
│ │ ├── _mixins.scss
│ │ ├── _modal.scss
│ │ ├── _nav.scss
│ │ ├── _navbar.scss
│ │ ├── _offcanvas.scss
│ │ ├── _pagination.scss
│ │ ├── _placeholders.scss
│ │ ├── _popover.scss
│ │ ├── _progress.scss
│ │ ├── _reboot.scss
│ │ ├── _root.scss
│ │ ├── _spinners.scss
│ │ ├── _tables.scss
│ │ ├── _toasts.scss
│ │ ├── _tooltip.scss
│ │ ├── _transitions.scss
│ │ ├── _type.scss
│ │ ├── _utilities.scss
│ │ ├── _variables.scss
│ │ ├── bootstrap-grid.scss
│ │ ├── bootstrap-reboot.scss
│ │ ├── bootstrap-utilities.scss
│ │ ├── bootstrap.scss
│ │ ├── forms
│ │ │ ├── _floating-labels.scss
│ │ │ ├── _form-check.scss
│ │ │ ├── _form-control.scss
│ │ │ ├── _form-range.scss
│ │ │ ├── _form-select.scss
│ │ │ ├── _form-text.scss
│ │ │ ├── _input-group.scss
│ │ │ ├── _labels.scss
│ │ │ └── _validation.scss
│ │ ├── helpers
│ │ │ ├── _clearfix.scss
│ │ │ ├── _color-bg.scss
│ │ │ ├── _colored-links.scss
│ │ │ ├── _position.scss
│ │ │ ├── _ratio.scss
│ │ │ ├── _stacks.scss
│ │ │ ├── _stretched-link.scss
│ │ │ ├── _text-truncation.scss
│ │ │ ├── _visually-hidden.scss
│ │ │ └── _vr.scss
│ │ ├── mixins
│ │ │ ├── _alert.scss
│ │ │ ├── _backdrop.scss
│ │ │ ├── _banner.scss
│ │ │ ├── _border-radius.scss
│ │ │ ├── _box-shadow.scss
│ │ │ ├── _breakpoints.scss
│ │ │ ├── _buttons.scss
│ │ │ ├── _caret.scss
│ │ │ ├── _clearfix.scss
│ │ │ ├── _color-scheme.scss
│ │ │ ├── _container.scss
│ │ │ ├── _deprecate.scss
│ │ │ ├── _forms.scss
│ │ │ ├── _gradients.scss
│ │ │ ├── _grid.scss
│ │ │ ├── _image.scss
│ │ │ ├── _list-group.scss
│ │ │ ├── _lists.scss
│ │ │ ├── _pagination.scss
│ │ │ ├── _reset-text.scss
│ │ │ ├── _resize.scss
│ │ │ ├── _table-variants.scss
│ │ │ ├── _text-truncate.scss
│ │ │ ├── _transition.scss
│ │ │ ├── _utilities.scss
│ │ │ └── _visually-hidden.scss
│ │ ├── utilities
│ │ │ └── _api.scss
│ │ └── vendor
│ │ │ └── _rfs.scss
│ ├── bootstrap
│ │ ├── _accordion.scss
│ │ ├── _alert.scss
│ │ ├── _badge.scss
│ │ ├── _breadcrumb.scss
│ │ ├── _button-group.scss
│ │ ├── _buttons.scss
│ │ ├── _card.scss
│ │ ├── _carousel.scss
│ │ ├── _close.scss
│ │ ├── _containers.scss
│ │ ├── _dropdown.scss
│ │ ├── _forms.scss
│ │ ├── _functions.scss
│ │ ├── _grid.scss
│ │ ├── _helpers.scss
│ │ ├── _images.scss
│ │ ├── _list-group.scss
│ │ ├── _maps.scss
│ │ ├── _mixins.scss
│ │ ├── _modal.scss
│ │ ├── _nav.scss
│ │ ├── _navbar.scss
│ │ ├── _offcanvas.scss
│ │ ├── _pagination.scss
│ │ ├── _placeholders.scss
│ │ ├── _popover.scss
│ │ ├── _progress.scss
│ │ ├── _reboot.scss
│ │ ├── _root.scss
│ │ ├── _spinners.scss
│ │ ├── _tables.scss
│ │ ├── _toasts.scss
│ │ ├── _tooltip.scss
│ │ ├── _transitions.scss
│ │ ├── _type.scss
│ │ ├── _utilities.scss
│ │ ├── _variables.scss
│ │ ├── bootstrap-grid.scss
│ │ ├── bootstrap-reboot.scss
│ │ ├── bootstrap-utilities.scss
│ │ ├── bootstrap.scss
│ │ ├── forms
│ │ │ ├── _floating-labels.scss
│ │ │ ├── _form-check.scss
│ │ │ ├── _form-control.scss
│ │ │ ├── _form-range.scss
│ │ │ ├── _form-select.scss
│ │ │ ├── _form-text.scss
│ │ │ ├── _input-group.scss
│ │ │ ├── _labels.scss
│ │ │ └── _validation.scss
│ │ ├── helpers
│ │ │ ├── _clearfix.scss
│ │ │ ├── _color-bg.scss
│ │ │ ├── _colored-links.scss
│ │ │ ├── _position.scss
│ │ │ ├── _ratio.scss
│ │ │ ├── _stacks.scss
│ │ │ ├── _stretched-link.scss
│ │ │ ├── _text-truncation.scss
│ │ │ ├── _visually-hidden.scss
│ │ │ └── _vr.scss
│ │ ├── mixins
│ │ │ ├── _alert.scss
│ │ │ ├── _backdrop.scss
│ │ │ ├── _banner.scss
│ │ │ ├── _border-radius.scss
│ │ │ ├── _box-shadow.scss
│ │ │ ├── _breakpoints.scss
│ │ │ ├── _buttons.scss
│ │ │ ├── _caret.scss
│ │ │ ├── _clearfix.scss
│ │ │ ├── _color-scheme.scss
│ │ │ ├── _container.scss
│ │ │ ├── _deprecate.scss
│ │ │ ├── _forms.scss
│ │ │ ├── _gradients.scss
│ │ │ ├── _grid.scss
│ │ │ ├── _image.scss
│ │ │ ├── _list-group.scss
│ │ │ ├── _lists.scss
│ │ │ ├── _pagination.scss
│ │ │ ├── _reset-text.scss
│ │ │ ├── _resize.scss
│ │ │ ├── _table-variants.scss
│ │ │ ├── _text-truncate.scss
│ │ │ ├── _transition.scss
│ │ │ ├── _utilities.scss
│ │ │ └── _visually-hidden.scss
│ │ ├── utilities
│ │ │ └── _api.scss
│ │ └── vendor
│ │ │ └── _rfs.scss
│ ├── custom
│ │ ├── _skin.scss
│ │ ├── _styles.scss
│ │ └── _variables.scss
│ ├── free
│ │ ├── _accordion.scss
│ │ ├── _alert.scss
│ │ ├── _badge.scss
│ │ ├── _breadcrumb.scss
│ │ ├── _button-group.scss
│ │ ├── _buttons.scss
│ │ ├── _card.scss
│ │ ├── _carousel.scss
│ │ ├── _close.scss
│ │ ├── _colors.scss
│ │ ├── _deprecated.scss
│ │ ├── _dropdown.scss
│ │ ├── _flag.scss
│ │ ├── _functions.scss
│ │ ├── _images.scss
│ │ ├── _list-group.scss
│ │ ├── _mixins.scss
│ │ ├── _modal.scss
│ │ ├── _nav.scss
│ │ ├── _navbar.scss
│ │ ├── _pagination.scss
│ │ ├── _popover.scss
│ │ ├── _progress.scss
│ │ ├── _range.scss
│ │ ├── _reboot.scss
│ │ ├── _ripple.scss
│ │ ├── _root.scss
│ │ ├── _scrollspy.scss
│ │ ├── _shadows.scss
│ │ ├── _tables.scss
│ │ ├── _toasts.scss
│ │ ├── _tooltip.scss
│ │ ├── _type.scss
│ │ ├── _utilities.scss
│ │ ├── _variables.scss
│ │ ├── forms
│ │ │ ├── _form-check.scss
│ │ │ ├── _form-control.scss
│ │ │ ├── _form-file.scss
│ │ │ ├── _form-range.scss
│ │ │ ├── _form-select.scss
│ │ │ ├── _input-group.scss
│ │ │ └── _validation.scss
│ │ └── mixins
│ │ │ ├── _buttons.scss
│ │ │ ├── _ripple.scss
│ │ │ └── _table-variants.scss
│ ├── mdb.core.scss
│ ├── mdb.dark.free.scss
│ └── mdb.free.scss
└── types
│ ├── free
│ ├── components
│ │ ├── Accordion
│ │ │ ├── Accordion.d.ts
│ │ │ ├── AccordionContext.d.ts
│ │ │ ├── AccordionItem
│ │ │ │ ├── AccordionItem.d.ts
│ │ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ │ ├── Badge
│ │ │ ├── Badge.d.ts
│ │ │ └── types.d.ts
│ │ ├── Button
│ │ │ ├── Button.d.ts
│ │ │ └── types.d.ts
│ │ ├── ButtonGroup
│ │ │ ├── ButtonGroup.d.ts
│ │ │ └── types.d.ts
│ │ ├── Card
│ │ │ ├── Card.d.ts
│ │ │ ├── CardBody
│ │ │ │ ├── CardBody.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CardFooter
│ │ │ │ ├── CardFooter.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CardGroup
│ │ │ │ ├── CardGroup.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CardHeader
│ │ │ │ ├── CardHeader.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CardImage
│ │ │ │ ├── CardImage.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CardLink
│ │ │ │ ├── CardLink.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CardOverlay
│ │ │ │ ├── CardOverlay.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CardSubTitle
│ │ │ │ ├── CardSubTitle.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CardText
│ │ │ │ ├── CardText.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CardTitle
│ │ │ │ ├── CardTitle.d.ts
│ │ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ │ ├── Carousel
│ │ │ ├── Carousel.d.ts
│ │ │ ├── CarouselCaption
│ │ │ │ ├── CarouselCaption.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CarouselControls
│ │ │ │ ├── CarouselControls.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CarouselIndicators
│ │ │ │ ├── CarouselIndicators.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── CarouselItem
│ │ │ │ ├── CarouselItem.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── types.d.ts
│ │ │ └── utils
│ │ │ │ ├── CarouselContext.d.ts
│ │ │ │ └── utils.d.ts
│ │ ├── Collapse
│ │ │ ├── Collapse.d.ts
│ │ │ ├── hooks
│ │ │ │ └── useHeight.d.ts
│ │ │ └── types.d.ts
│ │ ├── Dropdown
│ │ │ ├── Dropdown.d.ts
│ │ │ ├── DropdownBody
│ │ │ │ └── DropdownBody.d.ts
│ │ │ ├── DropdownItem
│ │ │ │ ├── DropdownItem.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── DropdownMenu
│ │ │ │ ├── DropdownMenu.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── DropdownToggle
│ │ │ │ ├── DropdownToggle.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── ItemChild
│ │ │ │ ├── ItemChild.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── contexts
│ │ │ │ ├── DropdownContext.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── helpers
│ │ │ │ ├── skipNextChild.d.ts
│ │ │ │ └── typeguards.d.ts
│ │ │ ├── hooks
│ │ │ │ ├── useClickOutside.d.ts
│ │ │ │ ├── useDropdownContext.d.ts
│ │ │ │ ├── useFade.d.ts
│ │ │ │ └── useKeyboard.d.ts
│ │ │ └── types.d.ts
│ │ ├── ListGroup
│ │ │ ├── ListGroup.d.ts
│ │ │ ├── ListGroupItem
│ │ │ │ ├── ListGroupItem.d.ts
│ │ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ │ ├── Modal
│ │ │ ├── Modal.d.ts
│ │ │ ├── ModalBody
│ │ │ │ ├── ModalBody.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── ModalContent
│ │ │ │ ├── ModalContent.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── ModalDialog
│ │ │ │ ├── ModalDialog.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── ModalFooter
│ │ │ │ ├── ModalFooter.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── ModalHeader
│ │ │ │ ├── ModalHeader.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── ModalTitle
│ │ │ │ ├── ModalTitle.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── hooks
│ │ │ │ └── useAnimationPositionValues.d.ts
│ │ │ ├── types.d.ts
│ │ │ └── utils
│ │ │ │ └── utils.d.ts
│ │ ├── Popover
│ │ │ ├── Popover.d.ts
│ │ │ ├── PopoverBody
│ │ │ │ ├── PopoverBody.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── PopoverHeader
│ │ │ │ ├── PopoverHeader.d.ts
│ │ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ │ ├── Progress
│ │ │ ├── Progress.d.ts
│ │ │ ├── ProgressBar
│ │ │ │ ├── ProgressBar.d.ts
│ │ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ │ ├── Spinner
│ │ │ ├── Spinner.d.ts
│ │ │ └── types.d.ts
│ │ └── Tooltip
│ │ │ ├── Tooltip.d.ts
│ │ │ └── types.d.ts
│ ├── data
│ │ └── Tables
│ │ │ ├── Table.d.ts
│ │ │ ├── TableBody
│ │ │ ├── TableBody.d.ts
│ │ │ └── types.d.ts
│ │ │ ├── TableHead
│ │ │ ├── TableHead.d.ts
│ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ ├── forms
│ │ ├── Checkbox
│ │ │ ├── Checkbox.d.ts
│ │ │ └── types.d.ts
│ │ ├── File
│ │ │ ├── File.d.ts
│ │ │ └── types.d.ts
│ │ ├── Input
│ │ │ ├── Input.d.ts
│ │ │ └── types.d.ts
│ │ ├── InputGroup
│ │ │ ├── InputGroup.d.ts
│ │ │ └── types.d.ts
│ │ ├── InputTemplate
│ │ │ ├── InputTemplate.d.ts
│ │ │ └── types.d.ts
│ │ ├── Radio
│ │ │ ├── Radio.d.ts
│ │ │ └── types.d.ts
│ │ ├── Range
│ │ │ ├── Range.d.ts
│ │ │ ├── RangeThumb
│ │ │ │ └── RangeThumb.d.ts
│ │ │ └── types.d.ts
│ │ ├── Switch
│ │ │ ├── Switch.d.ts
│ │ │ └── types.d.ts
│ │ ├── TextArea
│ │ │ ├── TextArea.d.ts
│ │ │ └── types.d.ts
│ │ └── Validation
│ │ │ ├── Validation.d.ts
│ │ │ ├── ValidationItem
│ │ │ ├── ValidationItem.d.ts
│ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ ├── layout
│ │ ├── Column
│ │ │ ├── Column.d.ts
│ │ │ └── types.d.ts
│ │ ├── Container
│ │ │ ├── Container.d.ts
│ │ │ └── types.d.ts
│ │ └── Row
│ │ │ ├── Row.d.ts
│ │ │ └── types.d.ts
│ ├── methods
│ │ └── Ripple
│ │ │ ├── Ripple.d.ts
│ │ │ ├── RippleWave
│ │ │ ├── RippleWave.d.ts
│ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ ├── navigation
│ │ ├── Breadcrumb
│ │ │ ├── Breadcrumb.d.ts
│ │ │ ├── BreadcrumbItem
│ │ │ │ ├── BreadcrumbItem.d.ts
│ │ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ │ ├── Footer
│ │ │ ├── Footer.d.ts
│ │ │ └── types.d.ts
│ │ ├── Navbar
│ │ │ ├── Navbar.d.ts
│ │ │ ├── NavbarBrand
│ │ │ │ ├── NavbarBrand.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── NavbarItem
│ │ │ │ ├── NavbarItem.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── NavbarLink
│ │ │ │ ├── NavLink.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── NavbarNav
│ │ │ │ ├── NavbarNav.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── NavbarToggler
│ │ │ │ ├── NavbarToggler.d.ts
│ │ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ │ ├── Pagination
│ │ │ ├── Pagination.d.ts
│ │ │ ├── PaginationItem
│ │ │ │ ├── PaginationItem.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── PaginationLink
│ │ │ │ ├── PaginationLink.d.ts
│ │ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ │ ├── Scrollspy
│ │ │ ├── Scrollspy.d.ts
│ │ │ ├── ScrollspyContext.d.ts
│ │ │ ├── ScrollspyLink
│ │ │ │ ├── ScrollspyLink.d.ts
│ │ │ │ └── types.d.ts
│ │ │ ├── ScrollspySubList
│ │ │ │ ├── ScrollspySubList.d.ts
│ │ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ │ └── Tabs
│ │ │ ├── Tabs.d.ts
│ │ │ ├── TabsContent
│ │ │ ├── TabsContent.d.ts
│ │ │ └── types.d.ts
│ │ │ ├── TabsItem
│ │ │ ├── TabsItem.d.ts
│ │ │ └── types.d.ts
│ │ │ ├── TabsLink
│ │ │ ├── TabsLink.d.ts
│ │ │ └── types.d.ts
│ │ │ ├── TabsPane
│ │ │ ├── TabsPane.d.ts
│ │ │ └── types.d.ts
│ │ │ └── types.d.ts
│ └── styles
│ │ ├── Icon
│ │ ├── Icon.d.ts
│ │ └── types.d.ts
│ │ └── Typography
│ │ ├── Typography.d.ts
│ │ └── types.d.ts
│ ├── index-free.d.ts
│ ├── pro
│ └── styles
│ │ ├── Animation
│ │ └── types.d.ts
│ │ └── useAnimatedRef
│ │ └── types.d.ts
│ ├── types
│ ├── baseComponent.d.ts
│ ├── colors.d.ts
│ ├── placement.d.ts
│ └── size.d.ts
│ └── utils
│ ├── ClientOnly.d.ts
│ ├── Portal.d.ts
│ └── hooks.d.ts
├── license.txt
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | mdb-react-ui-kit-*
3 | .eslintcache
4 |
5 | package-lock.json
6 | yarn.lock
7 |
8 | demo/node_modules
9 | demo/yarn.lock
10 | demo/package-lock.json
11 | demo/.eslintcache
12 |
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 |
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 |
23 | /coverage
24 |
25 | /build
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | mdb-react-ui-kit-*
3 | demo*
4 | app*
5 | build*
--------------------------------------------------------------------------------
/README.txt:
--------------------------------------------------------------------------------
1 | MDB 5 React
2 |
3 | Version: FREE 8.0.0
4 |
5 | Documentation:
6 | https://mdbootstrap.com/docs/b5/react/
7 |
8 | Installation:
9 | https://mdbootstrap.com/docs/b5/react/getting-started/installation/
10 |
11 | CLI & hosting:
12 | https://mdbootstrap.com/docs/standard/cli/
13 |
14 | Support:
15 | https://mdbootstrap.com/support/cat/react/
16 |
--------------------------------------------------------------------------------
/app/.npmignore:
--------------------------------------------------------------------------------
1 | publish*
2 | src*
3 | node_modules*
4 | docs*
5 | public*
--------------------------------------------------------------------------------
/app/demo/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import '../../dist/css/mdb.min.css';
4 | import App from './App';
5 |
6 | const container = document.getElementById("root");
7 | const root = createRoot(container!);
8 |
9 | root.render(
10 |
11 |
12 |
13 | );
14 |
--------------------------------------------------------------------------------
/app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdbootstrap/mdb-react-ui-kit/741f6d5741b83ecbda820eda73b80b366ed2f7bf/app/public/favicon.ico
--------------------------------------------------------------------------------
/app/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "mdb-react-ui-kit-demo",
3 | "name": "MDBReact5",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/app/src/free/components/Accordion/AccordionContext.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 |
5 | interface AccordionProps {
6 | activeItem?: number | number[];
7 | setActiveItem: React.SetStateAction;
8 | alwaysOpen?: boolean;
9 | initialActive?: number | number[];
10 | onChange?: (id: number | number[]) => void;
11 | }
12 |
13 | const AccordionContext = React.createContext({
14 | activeItem: 0,
15 | setActiveItem: null,
16 | alwaysOpen: false,
17 | initialActive: 0,
18 | });
19 |
20 | export { AccordionContext };
21 |
--------------------------------------------------------------------------------
/app/src/free/components/Accordion/AccordionItem/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../../types/baseComponent';
3 |
4 | interface AccordionItemProps extends BaseComponent {
5 | bodyClassName?: string;
6 | bodyStyle?: React.CSSProperties;
7 | collapseId: number;
8 | headerClassName?: string;
9 | headerStyle?: React.CSSProperties;
10 | headerTitle?: React.ReactNode;
11 | btnClassName?: React.ReactNode;
12 | ref?: React.ForwardedRef;
13 | tag?: React.ComponentProps;
14 | }
15 |
16 | export type { AccordionItemProps };
17 |
--------------------------------------------------------------------------------
/app/src/free/components/Accordion/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../types/baseComponent';
3 |
4 | interface AccordionProps extends BaseComponent {
5 | alwaysOpen?: boolean;
6 | borderless?: boolean;
7 | flush?: boolean;
8 | active?: number | number[];
9 | initialActive?: number | number[];
10 | onChange?: (id: number | number[]) => void;
11 | ref?: React.ForwardedRef;
12 | tag?: React.ComponentProps;
13 | }
14 |
15 | export type { AccordionProps };
16 |
--------------------------------------------------------------------------------
/app/src/free/components/Badge/Badge.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { BadgeProps } from './types';
4 |
5 | const MDBBadge: React.FC = React.forwardRef(
6 | ({ className, color = 'primary', pill, light, dot, tag: Tag = 'span', children, notification, ...props }, ref) => {
7 | const classes = clsx(
8 | 'badge',
9 | light ? color && `badge-${color}` : color && `bg-${color}`,
10 | dot && 'badge-dot',
11 | pill && 'rounded-pill',
12 | notification && 'badge-notification',
13 | className
14 | );
15 |
16 | return (
17 |
18 | {children}
19 |
20 | );
21 | }
22 | );
23 |
24 | MDBBadge.displayName = 'MDBBadge';
25 | export default MDBBadge;
26 |
--------------------------------------------------------------------------------
/app/src/free/components/Badge/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../types/baseComponent';
3 | import { backgroundColor } from '../../../types/colors';
4 |
5 | interface BadgeProps extends BaseComponent {
6 | color?: backgroundColor;
7 | dot?: boolean;
8 | notification?: boolean;
9 | pill?: boolean;
10 | ref?: React.ForwardedRef;
11 | tag?: React.ComponentProps;
12 | }
13 |
14 | export type { BadgeProps };
15 |
--------------------------------------------------------------------------------
/app/src/free/components/ButtonGroup/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 | import { size } from '../../../types/size';
3 |
4 | interface ButtonGroupProps extends BaseComponent {
5 | ref?: React.ForwardedRef;
6 | size?: size;
7 | shadow?: '0' | '1' | '2' | '3' | '4' | '5';
8 | toolbar?: boolean;
9 | vertical?: boolean;
10 | tag?: React.ComponentProps;
11 | }
12 |
13 | export type { ButtonGroupProps };
14 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/Card.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardProps } from './types';
4 |
5 | const MDBCard: React.FC = React.forwardRef(
6 | ({ className, children, border, background, tag: Tag = 'div', shadow, alignment, ...props }, ref) => {
7 | const classes = clsx(
8 | 'card',
9 | border && `border border-${border}`,
10 | background && `bg-${background}`,
11 | shadow && `shadow-${shadow}`,
12 | alignment && `text-${alignment}`,
13 | className
14 | );
15 |
16 | return (
17 |
18 | {children}
19 |
20 | );
21 | }
22 | );
23 |
24 | MDBCard.displayName = 'MDBCard';
25 | export default MDBCard;
26 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardBody/CardBody.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardBodyProps } from './types';
4 |
5 | const MDBCardBody: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx('card-body', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBCardBody.displayName = 'MDBCardBody';
18 | export default MDBCardBody;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardBody/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface CardBodyProps extends BaseComponent {
4 | tag?: React.ComponentProps;
5 | ref?: React.ForwardedRef;
6 | }
7 |
8 | export type { CardBodyProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardFooter/CardFooter.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardFooterProps } from './types';
4 |
5 | const MDBCardFooter: React.FC = React.forwardRef(
6 | ({ className, children, border, background, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx('card-footer', border && `border-${border}`, background && `bg-${background}`, className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBCardFooter.displayName = 'MDBCardFooter';
18 | export default MDBCardFooter;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardFooter/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 | import { backgroundColor } from '../../../../types/colors';
3 |
4 | interface CardFooterProps extends BaseComponent {
5 | border?: string;
6 | background?: backgroundColor;
7 | ref?: React.ForwardedRef;
8 | tag?: React.ComponentProps;
9 | }
10 |
11 | export type { CardFooterProps };
12 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardGroup/CardGroup.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardGroupProps } from './types';
4 |
5 | const MDBCardGroup: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx('card-group', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBCardGroup.displayName = 'MDBCardGroup';
18 | export default MDBCardGroup;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardGroup/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface CardGroupProps extends BaseComponent {
4 | tag?: React.ComponentProps;
5 | ref?: React.ForwardedRef;
6 | }
7 |
8 | export type { CardGroupProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardHeader/CardHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardHeaderProps } from './types';
4 |
5 | const MDBCardHeader: React.FC = React.forwardRef(
6 | ({ className, children, border, background, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx('card-header', border && `border-${border}`, background && `bg-${background}`, className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBCardHeader.displayName = 'MDBCardHeader';
18 | export default MDBCardHeader;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardHeader/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 | import { backgroundColor } from '../../../../types/colors';
3 |
4 | interface CardHeaderProps extends BaseComponent {
5 | border?: string;
6 | background?: backgroundColor;
7 | ref?: React.ForwardedRef;
8 | tag?: React.ComponentProps;
9 | }
10 |
11 | export type { CardHeaderProps };
12 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardImage/CardImage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardImageProps } from './types';
4 |
5 | const MDBCardImage: React.FC = ({ className, children, overlay, position, fluid, ...props }) => {
6 | const classes = clsx(position && `card-img-${position}`, fluid && 'img-fluid', overlay && 'card-img', className);
7 |
8 | return (
9 | ![]()
10 | {children}
11 |
12 | );
13 | };
14 |
15 | export default MDBCardImage;
16 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardImage/types.tsx:
--------------------------------------------------------------------------------
1 | interface CardImageProps extends React.ImgHTMLAttributes {
2 | position?: string;
3 | overlay?: boolean;
4 | fluid?: boolean;
5 | }
6 |
7 | export type { CardImageProps };
8 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardLink/CardLink.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardLinkProps } from './types';
4 |
5 | const MDBCardLink: React.FC = ({ className, children, ...props }) => {
6 | const classes = clsx('card-link', className);
7 |
8 | return (
9 |
10 | {children}
11 |
12 | );
13 | };
14 |
15 | export default MDBCardLink;
16 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardLink/types.tsx:
--------------------------------------------------------------------------------
1 | type CardLinkProps = React.AnchorHTMLAttributes;
2 |
3 | export type { CardLinkProps };
4 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardOverlay/CardOverlay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardOverlayProps } from './types';
4 |
5 | const MDBCardOverlay: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx('card-img-overlay', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBCardOverlay.displayName = 'MDBCardOverlay';
18 | export default MDBCardOverlay;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardOverlay/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface CardOverlayProps extends BaseComponent {
4 | tag?: React.ComponentProps;
5 | ref?: React.ForwardedRef;
6 | }
7 |
8 | export type { CardOverlayProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardSubTitle/CardSubTitle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardSubTitleProps } from './types';
4 |
5 | const MDBCardSubTitle: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'p', ...props }, ref) => {
7 | const classes = clsx('card-subtitle', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBCardSubTitle.displayName = 'MDBCardSubTitle';
18 | export default MDBCardSubTitle;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardSubTitle/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface CardSubTitleProps extends BaseComponent {
4 | tag?: React.ComponentProps;
5 | ref?: React.ForwardedRef;
6 | }
7 |
8 | export type { CardSubTitleProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardText/CardText.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardTextProps } from './types';
4 |
5 | const MDBCardText: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'p', ...props }, ref) => {
7 | const classes = clsx('card-text', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBCardText.displayName = 'MDBCardText';
18 | export default MDBCardText;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardText/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface CardTextProps extends BaseComponent {
4 | tag?: React.ComponentProps;
5 | ref?: React.ForwardedRef;
6 | }
7 |
8 | export type { CardTextProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardTitle/CardTitle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { CardTitleProps } from './types';
4 |
5 | const MDBCardTitle: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'h5', ...props }, ref) => {
7 | const classes = clsx('card-title', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBCardTitle.displayName = 'MDBCardTitle';
18 | export default MDBCardTitle;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/CardTitle/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface CardTitleProps extends BaseComponent {
4 | tag?: React.ComponentProps;
5 | ref?: React.ForwardedRef;
6 | }
7 |
8 | export type { CardTitleProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Card/types.tsx:
--------------------------------------------------------------------------------
1 | import { backgroundColor } from '../../../types/colors';
2 | import { BaseComponent } from '../../../types/baseComponent';
3 |
4 | interface CardProps extends BaseComponent {
5 | alignment?: string;
6 | border?: string;
7 | background?: backgroundColor;
8 | shadow?: '0' | '1' | '2' | '3' | '4' | '5';
9 | ref?: React.ForwardedRef;
10 | tag?: React.ComponentProps;
11 | }
12 |
13 | export type { CardProps };
14 |
--------------------------------------------------------------------------------
/app/src/free/components/Carousel/CarouselCaption/CarouselCaption.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CarouselCaptionProps } from './types';
3 | import clsx from 'clsx';
4 |
5 | const MDBCarouselCaption: React.FC = ({ className, children, ...props }) => {
6 | const classes = clsx('carousel-caption d-none d-md-block', className);
7 |
8 | return (
9 |
10 | {children}
11 |
12 | );
13 | };
14 |
15 | export default MDBCarouselCaption;
16 |
--------------------------------------------------------------------------------
/app/src/free/components/Carousel/CarouselCaption/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | type CarouselCaptionProps = BaseComponent & {
4 | className?: string;
5 | children?: React.ReactNode;
6 | };
7 |
8 | export { CarouselCaptionProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Carousel/CarouselControls/CarouselControls.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CarouselControlsProps } from './types';
3 |
4 | const CarouselControls: React.FC = ({ move }) => (
5 | <>
6 | move('prev')}>
7 |
8 | Previous
9 |
10 | move('next')}>
11 |
12 | Next
13 |
14 |
15 | );
16 |
17 | export default CarouselControls;
18 |
--------------------------------------------------------------------------------
/app/src/free/components/Carousel/CarouselControls/types.tsx:
--------------------------------------------------------------------------------
1 | type CarouselControlsProps = {
2 | move: (direction: 'prev' | 'next') => void;
3 | };
4 |
5 | export type { CarouselControlsProps };
6 |
--------------------------------------------------------------------------------
/app/src/free/components/Carousel/CarouselIndicators/CarouselIndicators.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import clsx from 'clsx';
4 | import React, { useContext } from 'react';
5 | import { CarouselContext } from '../utils/CarouselContext';
6 | import type { CarouselIndicatorsProps } from './types';
7 |
8 | const CarouselIndicators: React.FC = ({ imagesCount, to }) => {
9 | const { active } = useContext(CarouselContext);
10 |
11 | return (
12 |
13 | {Array.from(Array(imagesCount)).map((item, i) => (
14 | - to(i)} />
15 | ))}
16 |
17 | );
18 | };
19 |
20 | export default CarouselIndicators;
21 |
--------------------------------------------------------------------------------
/app/src/free/components/Carousel/CarouselIndicators/types.tsx:
--------------------------------------------------------------------------------
1 | type CarouselIndicatorsProps = {
2 | imagesCount: number;
3 | to: (id: number) => void;
4 | };
5 |
6 | export type { CarouselIndicatorsProps };
7 |
--------------------------------------------------------------------------------
/app/src/free/components/Carousel/CarouselItem/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | type CarouselItemProps = BaseComponent & {
4 | itemId: number;
5 | interval?: number;
6 | };
7 |
8 | export type { CarouselItemProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Carousel/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 |
3 | interface CarouselProps extends BaseComponent {
4 | dark?: boolean;
5 | fade?: boolean;
6 | interval?: number;
7 | keyboard?: boolean;
8 | onSlide?: () => void;
9 | pause?: boolean;
10 | showControls?: boolean;
11 | showIndicators?: boolean;
12 | touch?: boolean;
13 | carouselInnerClassName?: string;
14 | }
15 |
16 | export type { CarouselProps };
17 |
--------------------------------------------------------------------------------
/app/src/free/components/Carousel/utils/CarouselContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | interface CarouselContextProps {
4 | active: number;
5 | }
6 |
7 | const CarouselContext = createContext({
8 | active: 0,
9 | });
10 |
11 | export { CarouselContext };
12 |
--------------------------------------------------------------------------------
/app/src/free/components/Collapse/types.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentProps, HTMLAttributes, RefObject } from 'react';
2 |
3 | interface CollapseProps extends HTMLAttributes {
4 | collapseRef?: RefObject;
5 | open?: boolean;
6 | tag?: ComponentProps;
7 | navbar?: boolean;
8 | direction?: 'vertical' | 'horizontal';
9 | onOpen?: () => any;
10 | onClose?: () => any;
11 | }
12 |
13 | export type { CollapseProps };
14 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/Dropdown.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { DropdownProvider } from './contexts/DropdownContext';
5 | import { DropdownBody } from './DropdownBody/DropdownBody';
6 | import type { DropdownProps } from './types';
7 |
8 | const MDBDropdown = ({ animation, onClose, onOpen, wrapper = true, ...props }: DropdownProps) => {
9 | return (
10 |
11 |
12 |
13 | );
14 | };
15 |
16 | export default MDBDropdown;
17 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/DropdownBody/DropdownBody.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import clsx from 'clsx';
4 | import React from 'react';
5 | import { useClickOutside } from '../hooks/useClickOutside';
6 | import { DropdownProps } from '../types';
7 |
8 | export const DropdownBody = ({
9 | className,
10 | tag: Tag = 'div',
11 | group,
12 | children,
13 | dropup,
14 | dropright,
15 | dropleft,
16 | wrapper,
17 | ...props
18 | }: DropdownProps) => {
19 | useClickOutside();
20 |
21 | const classes = clsx(
22 | group ? 'btn-group' : 'dropdown',
23 | dropup && 'dropup',
24 | dropright && 'dropend',
25 | dropleft && 'dropstart',
26 | className
27 | );
28 |
29 | return wrapper ? (
30 |
31 | {children}
32 |
33 | ) : (
34 | <>{children}
35 | );
36 | };
37 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/DropdownItem/style.css:
--------------------------------------------------------------------------------
1 | .dropdown-menu .active:not(.form-control) {
2 | color: #16181b;
3 | background-color: #eee;
4 | }
5 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/DropdownItem/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 | import { ReactNode, ComponentProps } from 'react';
3 |
4 | export interface DropdownItemProps extends BaseComponent {
5 | tag?: ComponentProps;
6 | childTag?: ComponentProps;
7 | children?: ReactNode;
8 | divider?: boolean;
9 | header?: boolean;
10 | link?: boolean;
11 | href?: string;
12 | disabled?: boolean;
13 | className?: string;
14 | preventCloseOnClick?: boolean;
15 | }
16 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/DropdownMenu/style.css:
--------------------------------------------------------------------------------
1 | .dropdown-menu [data-active='true'] a.dropdown-item,
2 | .dropdown-menu .dropdown-item:focus,
3 | .dropdown-menu li:focus .dropdown-item :not(.disabled) {
4 | color: #16181b;
5 | background-color: #eee;
6 | }
7 |
8 | .dropdown-menu li:focus {
9 | outline: none;
10 | }
11 |
12 | .dropdown-menu.dropdown-menu-dark [data-active='true'] a.dropdown-item,
13 | .dropdown-menu.dropdown-menu-dark .dropdown-item:focus,
14 | .dropdown-menu.dropdown-menu-dark li:focus .dropdown-item {
15 | color: #fff;
16 | background-color: #1266f1;
17 | }
18 |
19 | .btn-group.dropstart > .dropdown-menu {
20 | right: 0 !important;
21 | }
22 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/DropdownMenu/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 | import { ReactElement, ComponentProps } from 'react';
3 |
4 | export interface DropdownMenuProps extends BaseComponent {
5 | appendToBody?: boolean;
6 | dark?: boolean;
7 | responsive?:
8 | | ''
9 | | 'start'
10 | | 'end'
11 | | 'sm-start'
12 | | 'md-start'
13 | | 'lg-start'
14 | | 'xl-start'
15 | | 'xxl-start'
16 | | 'sm-end'
17 | | 'md-end'
18 | | 'lg-end'
19 | | 'xl-end'
20 | | 'xxl-end';
21 | tag?: ComponentProps;
22 | children: ReactElement[] | ReactElement;
23 | alwaysOpen?: boolean;
24 | }
25 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/DropdownToggle/types.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentProps } from 'react';
2 | import { BaseComponent } from '../../../../types/baseComponent';
3 |
4 | export interface DropdownToggleProps extends BaseComponent {
5 | split?: boolean;
6 | tag?: ComponentProps;
7 | }
8 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/ItemChild/types.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode, ComponentProps } from 'react';
2 |
3 | export interface ItemChildProps {
4 | childTag?: ComponentProps;
5 | children?: ReactNode;
6 | disabled?: boolean;
7 | link?: boolean;
8 | divider?: boolean;
9 | header?: boolean;
10 | href?: string;
11 | }
12 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/helpers/skipNextChild.ts:
--------------------------------------------------------------------------------
1 | import { ReactElement } from 'react';
2 |
3 | export const skipNextChild = (idx: number, children: ReactElement[], dir: 'up' | 'down') => {
4 | if (dir === 'up') {
5 | if (idx <= 0) {
6 | return (
7 | children[children.length - 1].props.divider === true || children[children.length - 1].props.disabled === true
8 | );
9 | }
10 |
11 | return children[idx - 1].props.divider === true || children[idx - 1].props.disabled === true;
12 | }
13 |
14 | if (idx === children.length - 1) {
15 | return children[0].props.divider === true || children[0].props.disabled === true;
16 | }
17 |
18 | return children[idx + 1].props.divider === true || children[idx + 1].props.disabled === true;
19 | };
20 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/helpers/typeguards.ts:
--------------------------------------------------------------------------------
1 | export const isHtmlElement = (el: Element | null): el is HTMLElement => {
2 | return el instanceof HTMLElement;
3 | };
4 |
5 | export const isNode = (target: EventTarget | null): target is Node => {
6 | return target instanceof Node;
7 | };
8 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/hooks/useDropdownContext.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useContext } from 'react';
4 | import { DropdownContext } from '../contexts/DropdownContext';
5 |
6 | export const useDropdownContext = () => {
7 | const ctx = useContext(DropdownContext);
8 |
9 | if (!ctx) {
10 | throw new Error('Missing context data');
11 | }
12 |
13 | return ctx;
14 | };
15 |
--------------------------------------------------------------------------------
/app/src/free/components/Dropdown/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 | import { ReactNode, ComponentProps, SyntheticEvent } from 'react';
3 |
4 | export interface DropdownProps extends BaseComponent {
5 | animation?: boolean;
6 | group?: boolean;
7 | isOpen?: boolean;
8 | options?: Record;
9 | dropup?: boolean;
10 | dropright?: boolean;
11 | dropleft?: boolean;
12 | children?: ReactNode;
13 | tag?: ComponentProps;
14 | onClose?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
15 | onOpen?: (e: MouseEvent | SyntheticEvent | KeyboardEvent) => any;
16 | wrapper?: boolean;
17 | }
18 |
--------------------------------------------------------------------------------
/app/src/free/components/ListGroup/ListGroupItem/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { backgroundColor } from '../../../../types/colors';
3 | import { BaseComponent } from '../../../../types/baseComponent';
4 |
5 | interface ListGroupItemProps extends BaseComponent {
6 | action?: boolean;
7 | color?: backgroundColor;
8 | disabled?: boolean;
9 | noBorders?: boolean;
10 | tag?: React.ComponentProps;
11 | }
12 |
13 | export type { ListGroupItemProps };
14 |
--------------------------------------------------------------------------------
/app/src/free/components/ListGroup/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../types/baseComponent';
3 |
4 | interface ListGroupProps extends BaseComponent {
5 | horizontal?: boolean;
6 | horizontalSize?: string;
7 | light?: boolean;
8 | numbered?: boolean;
9 | ref?: React.ForwardedRef;
10 | small?: boolean;
11 | tag?: React.ComponentProps;
12 | }
13 |
14 | export type { ListGroupProps };
15 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalBody/ModalBody.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { ModalBodyProps } from './types';
4 |
5 | const MDBModalBody: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx('modal-body', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBModalBody.displayName = 'MDBModalBody';
18 | export default MDBModalBody;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalBody/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface ModalBodyProps extends BaseComponent {
4 | ref?: React.ForwardedRef;
5 | tag?: React.ComponentProps;
6 | }
7 |
8 | export type { ModalBodyProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalContent/ModalContent.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { ModalContentProps } from './types';
4 |
5 | const MDBModalContent: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx('modal-content', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBModalContent.displayName = 'MDBModalContent';
18 | export default MDBModalContent;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalContent/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface ModalContentProps extends BaseComponent {
4 | ref?: React.ForwardedRef;
5 | tag?: React.ComponentProps;
6 | }
7 |
8 | export type { ModalContentProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalDialog/ModalDialog.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { ModalDialogProps } from './types';
4 |
5 | const MDBModalDialog: React.FC = React.forwardRef(
6 | ({ className, centered, children, size, scrollable, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx(
8 | 'modal-dialog',
9 | scrollable && 'modal-dialog-scrollable',
10 | centered && 'modal-dialog-centered',
11 | size && `modal-${size}`,
12 | className
13 | );
14 |
15 | return (
16 |
17 | {children}
18 |
19 | );
20 | }
21 | );
22 |
23 | MDBModalDialog.displayName = 'MDBModalDialog';
24 | export default MDBModalDialog;
25 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalDialog/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface ModalDialogProps extends BaseComponent {
4 | centered?: boolean;
5 | size?:
6 | | 'sm'
7 | | 'lg'
8 | | 'xl'
9 | | 'fullscreen'
10 | | 'fullscreen-sm-down'
11 | | 'fullscreen-md-down'
12 | | 'fullscreen-lg-down'
13 | | 'fullscreen-xl-down'
14 | | 'fullscreen-xxl-down';
15 | scrollable?: boolean;
16 | ref?: React.ForwardedRef;
17 | tag?: React.ComponentProps;
18 | }
19 |
20 | export type { ModalDialogProps };
21 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalFooter/ModalFooter.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { ModalFooterProps } from './types';
4 |
5 | const MDBModalFooter: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx('modal-footer', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBModalFooter.displayName = 'MDBModalFooter';
18 | export default MDBModalFooter;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalFooter/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface ModalFooterProps extends BaseComponent {
4 | ref?: React.ForwardedRef;
5 | tag?: React.ComponentProps;
6 | }
7 |
8 | export type { ModalFooterProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalHeader/ModalHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { ModalHeaderProps } from './types';
4 |
5 | const MDBModalHeader: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx('modal-header', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBModalHeader.displayName = 'MDBModalHeader';
18 | export default MDBModalHeader;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalHeader/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface ModalHeaderProps extends BaseComponent {
4 | ref?: React.ForwardedRef;
5 | tag?: React.ComponentProps;
6 | }
7 |
8 | export type { ModalHeaderProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalTitle/ModalTitle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { ModalTitleProps } from './types';
4 |
5 | const MDBModalTitle: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'h5', ...props }, ref) => {
7 | const classes = clsx('modal-title', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBModalTitle.displayName = 'MDBModalTitle';
18 | export default MDBModalTitle;
19 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/ModalTitle/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface ModalTitleProps extends BaseComponent {
4 | ref?: React.ForwardedRef;
5 | tag?: React.ComponentProps;
6 | }
7 |
8 | export type { ModalTitleProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/hooks/useAnimationPositionValues.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react';
2 |
3 | const useAnimationPositionValues = (animationDirection: string) => {
4 | const getAnimationValue = useCallback(() => {
5 | if (animationDirection === 'top') {
6 | return { top: -50, left: 0 };
7 | } else if (animationDirection === 'bottom') {
8 | return { top: 50, left: 0 };
9 | } else if (animationDirection === 'left') {
10 | return { top: 0, left: -50 };
11 | } else if (animationDirection === 'right') {
12 | return { top: 0, left: 50 };
13 | }
14 | return { top: 0, left: 0 };
15 | }, [animationDirection]);
16 |
17 | return getAnimationValue();
18 | };
19 |
20 | export default useAnimationPositionValues;
21 |
--------------------------------------------------------------------------------
/app/src/free/components/Modal/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 |
3 | interface ModalProps extends BaseComponent {
4 | animationDirection?: 'top' | 'bottom' | 'right' | 'left';
5 | appendToBody?: boolean;
6 | backdrop?: boolean;
7 | closeOnEsc?: boolean;
8 | leaveHiddenModal?: boolean;
9 | modalRef?: React.RefObject;
10 | onClose?: () => void;
11 | onClosePrevented?: () => any;
12 | onOpen?: () => void;
13 | open?: boolean;
14 | setOpen?: React.SetStateAction;
15 | staticBackdrop?: boolean;
16 | nonInvasive?: boolean;
17 | tag?: React.ComponentProps;
18 | }
19 |
20 | export type { ModalProps };
21 |
--------------------------------------------------------------------------------
/app/src/free/components/Popover/PopoverBody/PopoverBody.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { PopoverBodyProps } from './types';
4 |
5 | const MDBPopoverBody: React.FC = ({
6 | className,
7 | children,
8 | tag: Tag = 'div',
9 | ...props
10 | }): JSX.Element => {
11 | const classes = clsx('popover-body', className);
12 |
13 | return (
14 |
15 | {children}
16 |
17 | );
18 | };
19 |
20 | export default MDBPopoverBody;
21 |
--------------------------------------------------------------------------------
/app/src/free/components/Popover/PopoverBody/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface PopoverBodyProps extends BaseComponent {
4 | tag?: React.ComponentProps;
5 | }
6 |
7 | export type { PopoverBodyProps };
8 |
--------------------------------------------------------------------------------
/app/src/free/components/Popover/PopoverHeader/PopoverHeader.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { PopoverHeaderProps } from './types';
4 |
5 | const MDBPopoverHeader: React.FC = ({
6 | className,
7 | children,
8 | tag: Tag = 'h3',
9 | ...props
10 | }): JSX.Element => {
11 | const classes = clsx('popover-header', className);
12 | return (
13 |
14 | {children}
15 |
16 | );
17 | };
18 |
19 | export default MDBPopoverHeader;
20 |
--------------------------------------------------------------------------------
/app/src/free/components/Popover/PopoverHeader/types.tsx:
--------------------------------------------------------------------------------
1 | interface PopoverHeaderProps extends React.AllHTMLAttributes {
2 | tag?: React.ComponentProps;
3 | }
4 |
5 | export type { PopoverHeaderProps };
6 |
--------------------------------------------------------------------------------
/app/src/free/components/Popover/types.tsx:
--------------------------------------------------------------------------------
1 | import { placement } from '../../../types/placement';
2 | import { ButtonProps } from '../Button/types';
3 |
4 | interface PopoverProps extends ButtonProps {
5 | btnChildren?: React.ReactNode;
6 | btnClassName?: string;
7 | dismiss?: boolean;
8 | open?: boolean;
9 | options?: Record;
10 | placement?: placement;
11 | poperStyle?: React.CSSProperties;
12 | popperTag?: React.ComponentProps;
13 | tag?: React.ComponentProps;
14 | disablePortal?: boolean;
15 | onOpen?: () => void;
16 | onClose?: () => void;
17 | }
18 |
19 | export type { PopoverProps };
20 |
--------------------------------------------------------------------------------
/app/src/free/components/Progress/ProgressBar/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 | import { backgroundColor } from '../../../../types/colors';
3 |
4 | interface ProgressBarProps extends BaseComponent {
5 | animated?: boolean;
6 | bgColor?: backgroundColor;
7 | ref?: React.ForwardedRef;
8 | striped?: boolean;
9 | tag?: React.ComponentProps;
10 | valuemax?: string | number;
11 | valuemin?: string | number;
12 | valuenow?: string | number;
13 | width?: string | number;
14 | [rest: string]: any;
15 | }
16 |
17 | export type { ProgressBarProps };
18 |
--------------------------------------------------------------------------------
/app/src/free/components/Progress/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 |
3 | interface ProgressProps extends BaseComponent {
4 | height?: number | string;
5 | ref?: React.ForwardedRef;
6 | tag?: React.ComponentProps;
7 | }
8 |
9 | export type { ProgressProps };
10 |
--------------------------------------------------------------------------------
/app/src/free/components/Spinner/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { SpinnerProps } from './types';
4 |
5 | const MDBSpinner: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'div', color, grow, size, ...props }, ref) => {
7 | const classes = clsx(
8 | `${grow ? 'spinner-grow' : 'spinner-border'}`,
9 | color && `text-${color}`,
10 | `${size ? (grow ? 'spinner-grow-' + size : 'spinner-border-' + size) : ''}`,
11 | className
12 | );
13 |
14 | return (
15 |
16 | {children}
17 |
18 | );
19 | }
20 | );
21 |
22 | MDBSpinner.displayName = 'MDBSpinner';
23 | export default MDBSpinner;
24 |
--------------------------------------------------------------------------------
/app/src/free/components/Spinner/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 | import { textColor } from '../../../types/colors';
3 | import { size } from '../../../types/size';
4 |
5 | interface SpinnerProps extends BaseComponent {
6 | color?: textColor;
7 | grow?: boolean;
8 | size?: size;
9 | ref?: React.ForwardedRef;
10 | tag?: React.ComponentProps;
11 | }
12 |
13 | export type { SpinnerProps };
14 |
--------------------------------------------------------------------------------
/app/src/free/components/Tooltip/types.tsx:
--------------------------------------------------------------------------------
1 | import { SyntheticEvent } from 'react';
2 | import { BaseComponent } from '../../../types/baseComponent';
3 | import { placement } from '../../../types/placement';
4 |
5 | interface TooltipProps extends BaseComponent {
6 | disableMouseDown?: boolean;
7 | options?: Record;
8 | placement?: placement;
9 | tag?: React.ComponentProps;
10 | tooltipTag?: React.ComponentProps;
11 | title?: React.ReactNode;
12 | wrapperProps?: Record;
13 | wrapperClass?: string;
14 | onOpen?: (e: SyntheticEvent) => any;
15 | onClose?: (e: SyntheticEvent) => any;
16 | onMouseEnter?: (e: SyntheticEvent) => any;
17 | onMouseLeave?: (e: SyntheticEvent) => any;
18 | }
19 |
20 | export type { TooltipProps };
21 |
--------------------------------------------------------------------------------
/app/src/free/data/Tables/TableBody/TableBody.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { TableBodyProps } from './types';
4 |
5 | const MDBTableBody: React.FC = ({ className, children, ...props }) => {
6 | const classes = clsx(className);
7 |
8 | return (
9 |
10 | {children}
11 |
12 | );
13 | };
14 |
15 | export default MDBTableBody;
16 |
--------------------------------------------------------------------------------
/app/src/free/data/Tables/TableBody/types.tsx:
--------------------------------------------------------------------------------
1 | type TableBodyProps = React.HTMLAttributes;
2 |
3 | export type { TableBodyProps };
4 |
--------------------------------------------------------------------------------
/app/src/free/data/Tables/TableHead/TableHead.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { TableHeadProps } from './types';
4 |
5 | const MDBTableHead: React.FC = ({ className, children, dark, light, ...props }) => {
6 | const classes = clsx(dark && 'table-dark', light && 'table-light', className);
7 |
8 | return (
9 |
10 | {children}
11 |
12 | );
13 | };
14 |
15 | export default MDBTableHead;
16 |
--------------------------------------------------------------------------------
/app/src/free/data/Tables/TableHead/types.tsx:
--------------------------------------------------------------------------------
1 | interface TableHeadProps extends React.HTMLAttributes {
2 | dark?: boolean;
3 | light?: boolean;
4 | }
5 |
6 | export type { TableHeadProps };
7 |
--------------------------------------------------------------------------------
/app/src/free/data/Tables/types.tsx:
--------------------------------------------------------------------------------
1 | import { backgroundColor, textColor } from '../../../types/colors';
2 |
3 | interface TableProps extends Omit, 'align'> {
4 | align?: 'top' | 'middle' | 'bottom';
5 | borderColor?: textColor;
6 | color?: backgroundColor;
7 | bordered?: boolean;
8 | borderless?: boolean;
9 | small?: boolean;
10 | hover?: boolean;
11 | classNameResponsive?: string;
12 | striped?: boolean;
13 | responsive?: string | boolean;
14 | }
15 |
16 | export type { TableProps };
17 |
--------------------------------------------------------------------------------
/app/src/free/forms/Checkbox/Checkbox.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import InputTemplate from '../InputTemplate/InputTemplate';
3 | import type { CheckboxProps } from './types';
4 |
5 | const MDBCheckbox: React.FC = ({ ...props }) => {
6 | return ;
7 | };
8 |
9 | export default MDBCheckbox;
10 |
--------------------------------------------------------------------------------
/app/src/free/forms/Checkbox/types.tsx:
--------------------------------------------------------------------------------
1 | import { InputTemplateProps } from '../InputTemplate/types';
2 |
3 | type CheckboxProps = Omit;
4 |
5 | export type { CheckboxProps };
6 |
--------------------------------------------------------------------------------
/app/src/free/forms/File/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface FileProps extends Omit, 'type' | 'size'> {
4 | label?: React.ReactNode;
5 | labelClass?: string;
6 | labelStyle?: React.CSSProperties;
7 | inputRef?: React.MutableRefObject;
8 | size?: string;
9 | }
10 |
11 | export type { FileProps };
12 |
--------------------------------------------------------------------------------
/app/src/free/forms/Input/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type InputELement = Omit, 'size'>;
4 |
5 | type InputProps = InputELement & {
6 | contrast?: boolean;
7 | label?: React.ReactNode;
8 | labelStyle?: React.CSSProperties;
9 | labelClass?: string;
10 | labelRef?: React.RefObject;
11 | ref?: React.Ref;
12 | readonly?: boolean;
13 | size?: string;
14 | wrapperTag?: React.ComponentProps;
15 | wrapperClass?: string;
16 | wrapperStyle?: React.CSSProperties;
17 | showCounter?: boolean;
18 | };
19 |
20 | export type { InputProps };
21 |
--------------------------------------------------------------------------------
/app/src/free/forms/InputGroup/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type InputGroupProps = Omit, HTMLDivElement>, 'ref'> & {
4 | noWrap?: boolean;
5 | noBorder?: boolean;
6 | ref?: React.ForwardedRef;
7 | size?: string;
8 | tag?: React.ComponentProps;
9 | textTag?: React.ComponentProps;
10 | textClass?: string;
11 | textBefore?: React.ReactNode | Array;
12 | textAfter?: React.ReactNode | Array;
13 | textProps?: Record;
14 | };
15 |
16 | export type { InputGroupProps };
17 |
--------------------------------------------------------------------------------
/app/src/free/forms/InputTemplate/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface InputTemplateProps extends React.InputHTMLAttributes {
4 | btn?: boolean;
5 | btnColor?: string;
6 | disableWrapper?: boolean;
7 | inputRef?: React.MutableRefObject;
8 | label?: React.ReactNode;
9 | labelClass?: string;
10 | labelStyle?: React.CSSProperties;
11 | inline?: boolean;
12 | toggleSwitch?: boolean;
13 | wrapperTag?: React.ComponentProps;
14 | wrapperClass?: string;
15 | wrapperStyle?: React.CSSProperties;
16 | }
17 |
18 | export type { InputTemplateProps };
19 |
--------------------------------------------------------------------------------
/app/src/free/forms/Radio/Radio.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { RadioProps } from './types';
3 | import InputTemplate from '../InputTemplate/InputTemplate';
4 |
5 | const MDBRadio: React.FC = ({ ...props }) => {
6 | return ;
7 | };
8 |
9 | export default MDBRadio;
10 |
--------------------------------------------------------------------------------
/app/src/free/forms/Radio/types.tsx:
--------------------------------------------------------------------------------
1 | import { InputTemplateProps } from '../InputTemplate/types';
2 |
3 | type RadioProps = Omit;
4 |
5 | export type { RadioProps };
6 |
--------------------------------------------------------------------------------
/app/src/free/forms/Range/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface RangeProps extends Omit, 'type'> {
4 | disableTooltip?: boolean;
5 | label?: string;
6 | labelId?: string;
7 | labelClass?: string;
8 | step?: string;
9 | inputRef?: React.MutableRefObject;
10 | }
11 |
12 | export type { RangeProps };
13 |
--------------------------------------------------------------------------------
/app/src/free/forms/Switch/Switch.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import InputTemplate from '../InputTemplate/InputTemplate';
3 | import type { SwitchProps } from './types';
4 |
5 | const MDBSwitch: React.FC = ({ ...props }) => {
6 | return ;
7 | };
8 |
9 | export default MDBSwitch;
10 |
--------------------------------------------------------------------------------
/app/src/free/forms/Switch/types.tsx:
--------------------------------------------------------------------------------
1 | import { InputTemplateProps } from '../InputTemplate/types';
2 |
3 | type SwitchProps = Omit;
4 |
5 | export type { SwitchProps };
6 |
--------------------------------------------------------------------------------
/app/src/free/forms/TextArea/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type TextAreaElement = Omit, 'size' | 'value' | 'defaultValue'>;
4 |
5 | type TextAreaProps = TextAreaElement & {
6 | contrast?: boolean;
7 | defaultValue?: string;
8 | label?: React.ReactNode;
9 | labelStyle?: React.CSSProperties;
10 | labelClass?: string;
11 | labelRef?: React.MutableRefObject;
12 | inputRef?: React.MutableRefObject;
13 | readonly?: boolean;
14 | size?: string;
15 | textarea?: boolean;
16 | value?: string;
17 | wrapperTag?: React.ComponentProps;
18 | wrapperClass?: string;
19 | wrapperStyle?: Record;
20 | };
21 |
22 | export type { TextAreaProps };
23 |
--------------------------------------------------------------------------------
/app/src/free/forms/Validation/ValidationItem/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { ValidationItemProps } from './types';
3 |
4 | declare const MDBValidationItem: React.FunctionComponent;
5 |
6 | export default MDBValidationItem;
7 |
--------------------------------------------------------------------------------
/app/src/free/forms/Validation/ValidationItem/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../../types/baseComponent';
3 |
4 | interface ValidationItemProps extends BaseComponent {
5 | tag?: React.ComponentProps;
6 | invalid?: boolean;
7 | feedback?: React.ReactNode;
8 | tooltip?: boolean;
9 | }
10 |
11 | export type { ValidationItemProps };
12 |
--------------------------------------------------------------------------------
/app/src/free/forms/Validation/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type ValidationProps = React.FormHTMLAttributes & {
4 | isValidated?: boolean;
5 | ref?: React.Ref;
6 | };
7 |
8 | export type { ValidationProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/layout/Column/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 |
3 | interface ColumnProps extends BaseComponent {
4 | center?: boolean;
5 | end?: boolean;
6 | lg?: string | number;
7 | md?: string | number;
8 | offsetSm?: string | number;
9 | offsetMd?: string | number;
10 | offsetLg?: string | number;
11 | order?: string | number;
12 | size?: string | number;
13 | sm?: string | number;
14 | start?: boolean;
15 | tag?: React.ComponentProps;
16 | xl?: string | number;
17 | xxl?: string | number;
18 | xs?: string | number;
19 | }
20 |
21 | export type { ColumnProps };
22 |
--------------------------------------------------------------------------------
/app/src/free/layout/Container/Container.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import { ContainerProps } from './types';
4 |
5 | const MDBContainer: React.FC = React.forwardRef(
6 | ({ breakpoint, fluid, children, className, tag: Tag = 'div', ...props }, ref) => {
7 | const classes = clsx(`${fluid ? 'container-fluid' : `container${breakpoint ? '-' + breakpoint : ''}`}`, className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBContainer.displayName = 'MDBContainer';
18 | export default MDBContainer;
19 |
--------------------------------------------------------------------------------
/app/src/free/layout/Container/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 |
3 | interface ContainerProps extends BaseComponent {
4 | breakpoint?: string;
5 | fluid?: boolean;
6 | tag?: React.ComponentProps;
7 | }
8 |
9 | export type { ContainerProps };
10 |
--------------------------------------------------------------------------------
/app/src/free/layout/Row/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 |
3 | interface RowProps extends BaseComponent {
4 | around?: boolean;
5 | between?: boolean;
6 | bottom?: boolean;
7 | center?: boolean;
8 | end?: boolean;
9 | evenly?: boolean;
10 | middle?: boolean;
11 | start?: boolean;
12 | tag?: React.ComponentProps;
13 | top?: boolean;
14 | }
15 |
16 | export type { RowProps };
17 |
--------------------------------------------------------------------------------
/app/src/free/methods/Ripple/RippleWave/RippleWave.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import clsx from 'clsx';
4 | import React, { useState, useEffect } from 'react';
5 | import type { RippleWaveProps } from './types';
6 |
7 | const MDBRippleWave: React.FC = ({ ...props }) => {
8 | const [isActive, setIsActive] = useState(false);
9 |
10 | const rippleClasses = clsx('ripple-wave', isActive && 'active');
11 |
12 | useEffect(() => {
13 | const secondTimer: ReturnType = setTimeout(() => {
14 | setIsActive(true);
15 | }, 50);
16 |
17 | return () => {
18 | clearTimeout(secondTimer);
19 | };
20 | }, []);
21 |
22 | return ;
23 | };
24 |
25 | export default MDBRippleWave;
26 |
--------------------------------------------------------------------------------
/app/src/free/methods/Ripple/RippleWave/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type RippleWaveProps = {
4 | [rest: string]: any;
5 | };
6 |
7 | export type { RippleWaveProps };
8 |
--------------------------------------------------------------------------------
/app/src/free/methods/Ripple/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface RippleProps extends React.AllHTMLAttributes {
4 | rippleUnbound?: boolean;
5 | rippleColor?: string;
6 | rippleRadius?: number;
7 | rippleDuration?: number;
8 | rippleCentered?: boolean;
9 | ref?: React.ForwardedRef;
10 | rippleTag?: React.ComponentProps;
11 | }
12 |
13 | export type { RippleProps };
14 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Breadcrumb/Breadcrumb.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import { BreadcrumbProps } from './types';
4 |
5 | const MDBBreadcrumb: React.FC = React.forwardRef(
6 | ({ className, color, uppercase, bold, children, ...props }, ref) => {
7 | const classes = clsx(
8 | 'breadcrumb',
9 | bold && 'font-weight-bold',
10 | color && `text-${color}`,
11 | uppercase && 'text-uppercase',
12 | className
13 | );
14 |
15 | return (
16 |
21 | );
22 | }
23 | );
24 |
25 | MDBBreadcrumb.displayName = 'MDBBreadcrumb';
26 | export default MDBBreadcrumb;
27 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { BreadcrumbItemProp } from './types';
4 |
5 | const MDBBreadcrumbItem: React.FC = React.forwardRef(
6 | ({ className, active, current = 'page', children, ...props }, ref) => {
7 | const classes = clsx('breadcrumb-item', active && 'active', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBBreadcrumbItem.displayName = 'MDBBreadcrumbItem';
18 | export default MDBBreadcrumbItem;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Breadcrumb/BreadcrumbItem/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface BreadcrumbItemProp extends BaseComponent {
4 | active?: boolean;
5 | current?: 'page' | 'step' | 'location';
6 | ref?: React.Ref;
7 | }
8 |
9 | export type { BreadcrumbItemProp };
10 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Breadcrumb/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 | import { textColor } from '../../../types/colors';
3 |
4 | interface BreadcrumbProps extends BaseComponent {
5 | bold?: boolean;
6 | tag?: React.ComponentProps;
7 | color?: textColor;
8 | uppercase?: boolean;
9 | ref?: React.Ref;
10 | }
11 |
12 | export type { BreadcrumbProps };
13 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Footer/Footer.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { FooterProps } from './types';
4 |
5 | const MDBFooter: React.FC = React.forwardRef(
6 | ({ children, bgColor, color, className, ...props }, ref) => {
7 | const classes = clsx(bgColor && `bg-${bgColor}`, color && `text-${color}`, className);
8 |
9 | return (
10 |
13 | );
14 | }
15 | );
16 |
17 | MDBFooter.displayName = 'MDBFooter';
18 | export default MDBFooter;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Footer/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 | import { backgroundColor, textColor } from '../../../types/colors';
3 |
4 | interface FooterProps extends BaseComponent {
5 | color?: textColor;
6 | tag?: React.ComponentProps;
7 | bgColor?: backgroundColor;
8 | ref?: React.Ref;
9 | }
10 |
11 | export type { FooterProps };
12 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarBrand/NavbarBrand.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { NavbarBrandProps } from './types';
4 |
5 | const MDBNavbarBrand: React.FC = React.forwardRef(
6 | ({ className, children, tag: Tag = 'a', ...props }, ref) => {
7 | const classes = clsx('navbar-brand', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBNavbarBrand.displayName = 'MDBNavbarBrand';
18 | export default MDBNavbarBrand;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarBrand/types.tsx:
--------------------------------------------------------------------------------
1 | interface NavbarBrandProps extends React.AllHTMLAttributes {
2 | tag?: React.ComponentProps;
3 | ref?: React.Ref;
4 | }
5 |
6 | export type { NavbarBrandProps };
7 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarItem/NavbarItem.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { NavbarItemProps } from './types';
4 |
5 | const MDBNavbarItem: React.FC = React.forwardRef(
6 | ({ children, className, active, text, tag: Tag = 'li', ...props }, ref) => {
7 | const classes = clsx('nav-item', active && 'active', text && 'navbar-text', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBNavbarItem.displayName = 'MDBNavbarItem';
18 | export default MDBNavbarItem;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarItem/types.tsx:
--------------------------------------------------------------------------------
1 | interface NavbarItemProps extends React.AllHTMLAttributes {
2 | active?: boolean;
3 | text?: boolean;
4 | tag?: React.ComponentProps;
5 | ref?: React.Ref;
6 | }
7 |
8 | export type { NavbarItemProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarLink/NavLink.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { NavbarLinkProps } from './types';
4 |
5 | const MDBNavbarLink: React.FC = React.forwardRef(
6 | ({ children, className = '', disabled = false, active = false, tag: Tag = 'a', ...props }, ref) => {
7 | const classes = clsx('nav-link', disabled ? 'disabled' : active ? 'active' : '', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBNavbarLink.displayName = 'MDBNavbarLink';
18 | export default MDBNavbarLink;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarLink/types.tsx:
--------------------------------------------------------------------------------
1 | interface NavbarLinkProps extends React.AllHTMLAttributes {
2 | tag?: React.ComponentProps;
3 | active?: boolean;
4 | disabled?: boolean;
5 | ref?: React.Ref;
6 | }
7 |
8 | export type { NavbarLinkProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarNav/NavbarNav.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { NavbarNavProps } from './types';
4 |
5 | const MDBNavbarNav: React.FC = React.forwardRef(
6 | ({ children, className, right, fullWidth = true, left, tag: Tag = 'ul', ...props }, ref) => {
7 | const classes = clsx('navbar-nav', fullWidth && 'w-100', right && 'ms-auto', left && 'me-auto', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBNavbarNav.displayName = 'MDBNavbarNav';
18 | export default MDBNavbarNav;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarNav/types.tsx:
--------------------------------------------------------------------------------
1 | interface NavbarNavProps extends React.AllHTMLAttributes {
2 | tag?: React.ComponentProps;
3 | right?: boolean;
4 | fullWidth?: boolean;
5 | left?: boolean;
6 | ref?: React.Ref;
7 | }
8 |
9 | export type { NavbarNavProps };
10 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarToggler/NavbarToggler.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import clsx from 'clsx';
3 | import type { NavbarTogglerProps } from './types';
4 |
5 | const MDBNavbarToggler: React.FC = React.forwardRef(
6 | ({ children, className, tag: Tag = 'button', ...props }, ref) => {
7 | const classes = clsx('navbar-toggler', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBNavbarToggler.displayName = 'MDBNavbarToggler';
18 | export default MDBNavbarToggler;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/NavbarToggler/types.tsx:
--------------------------------------------------------------------------------
1 | interface NavbarTogglerProps extends React.AllHTMLAttributes {
2 | tag?: React.ComponentProps;
3 | ref?: React.Ref;
4 | }
5 |
6 | export type { NavbarTogglerProps };
7 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Navbar/types.tsx:
--------------------------------------------------------------------------------
1 | interface NavbarProps extends Omit, 'scrolling'> {
2 | tag?: React.ComponentProps;
3 | light?: boolean;
4 | dark?: boolean;
5 | color?:
6 | | 'primary'
7 | | 'secondary'
8 | | 'success'
9 | | 'info'
10 | | 'warning'
11 | | 'danger'
12 | | 'light'
13 | | 'dark'
14 | | 'body'
15 | | 'muted'
16 | | 'white'
17 | | 'black-50'
18 | | 'white-50';
19 | expand?: string | boolean;
20 | bgColor?: 'white' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark';
21 | fixed?: string;
22 | sticky?: boolean;
23 | transparent?: boolean;
24 | scrollingNavbarOffset?: number;
25 | scrolling?: boolean;
26 | ref?: React.Ref;
27 | }
28 |
29 | export type { NavbarProps };
30 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Pagination/Pagination.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { PaginationProps } from './types';
4 |
5 | const MDBPagination: React.FC = React.forwardRef(
6 | ({ children, size, circle, center, end, start, className, ...props }, ref) => {
7 | const classes = clsx(
8 | 'pagination',
9 | center && 'justify-content-center',
10 | circle && 'pagination-circle',
11 | end && 'justify-content-end',
12 | size && `pagination-${size}`,
13 | start && 'justify-content-start',
14 | className
15 | );
16 |
17 | return (
18 |
21 | );
22 | }
23 | );
24 |
25 | MDBPagination.displayName = 'MDBPagination';
26 | export default MDBPagination;
27 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Pagination/PaginationItem/PaginationItem.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { PaginationItemProps } from './types';
4 |
5 | const MDBPaginationItem: React.FC = React.forwardRef(
6 | ({ children, className, active, disabled, ...props }, ref) => {
7 | const classes = clsx('page-item', active && 'active', disabled && 'disabled', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBPaginationItem.displayName = 'MDBPaginationItem';
18 | export default MDBPaginationItem;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Pagination/PaginationItem/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface PaginationItemProps extends BaseComponent {
4 | active?: boolean;
5 | disabled?: boolean;
6 | ref?: React.Ref;
7 | }
8 |
9 | export type { PaginationItemProps };
10 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Pagination/PaginationLink/PaginationLink.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { PaginationLinkProps } from './types';
4 |
5 | const MDBPaginationLink: React.FC = React.forwardRef(
6 | ({ children, className, tag: Tag = 'a', ...props }, ref) => {
7 | const classes = clsx('page-link', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBPaginationLink.displayName = 'MDBPaginationLink';
18 | export default MDBPaginationLink;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Pagination/PaginationLink/types.tsx:
--------------------------------------------------------------------------------
1 | interface PaginationLinkProps extends React.AnchorHTMLAttributes {
2 | ref?: React.Ref;
3 | tag?: React.ComponentProps;
4 | }
5 |
6 | export type { PaginationLinkProps };
7 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Pagination/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 | import { size } from '../../../types/size';
3 |
4 | interface PaginationProps extends BaseComponent {
5 | center?: boolean;
6 | end?: boolean;
7 | start?: boolean;
8 | size?: size;
9 | circle?: boolean;
10 | ref?: React.Ref;
11 | }
12 |
13 | export type { PaginationProps };
14 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Scrollspy/ScrollspyContext.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface ScrollspyContextProps {
4 | activeElement?: HTMLElement | null;
5 | setTargets?: React.SetStateAction;
6 | }
7 |
8 | const ScrollspyContext = React.createContext({
9 | activeElement: null,
10 | setTargets: null,
11 | });
12 |
13 | export { ScrollspyContext };
14 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Scrollspy/ScrollspyLink/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../../types/baseComponent';
3 |
4 | interface ScrollspyNavLinkProps extends BaseComponent {
5 | collapsible?: boolean;
6 | onActivate?: (id?: string) => void;
7 | subsections?: Array>;
8 | targetRef: React.MutableRefObject;
9 | }
10 |
11 | export type { ScrollspyNavLinkProps };
12 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Scrollspy/ScrollspySubList/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../../types/baseComponent';
3 |
4 | interface ScrollspySubListProps extends BaseComponent {
5 | collapsible?: Array>;
6 | }
7 |
8 | export type { ScrollspySubListProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Scrollspy/types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../types/baseComponent';
3 |
4 | interface ScrollspyProps extends BaseComponent {
5 | container?: Window | React.MutableRefObject;
6 | offset?: number;
7 | }
8 |
9 | export type { ScrollspyProps };
10 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Tabs/Tabs.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { TabsProps } from './types';
4 |
5 | const MDBTabs: React.FC = React.forwardRef(
6 | ({ className, fill, pills, justify, children, ...props }, ref) => {
7 | const classes = clsx(
8 | 'nav',
9 | pills ? 'nav-pills' : 'nav-tabs',
10 | fill && 'nav-fill',
11 | justify && 'nav-justified',
12 | className
13 | );
14 |
15 | return (
16 |
19 | );
20 | }
21 | );
22 |
23 | MDBTabs.displayName = 'MDBTabs';
24 | export default MDBTabs;
25 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Tabs/TabsContent/TabsContent.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { TabsContentProps } from './types';
4 |
5 | const MDBTabsContent: React.FC = React.forwardRef(
6 | ({ className, tag: Tag = 'div', children, ...props }, ref) => {
7 | const classes = clsx('tab-content', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBTabsContent.displayName = 'MDBTabsContent';
18 | export default MDBTabsContent;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Tabs/TabsContent/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface TabsContentProps extends BaseComponent {
4 | tag?: React.ComponentProps;
5 | ref?: React.Ref;
6 | }
7 |
8 | export type { TabsContentProps };
9 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Tabs/TabsItem/TabsItem.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import React from 'react';
3 | import type { TabsItemProps } from './types';
4 |
5 | const MDBTabsItem: React.FC = React.forwardRef(
6 | ({ className, children, style, tag: Tag = 'li', ...props }, ref) => {
7 | const classes = clsx('nav-item', className);
8 |
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 | );
16 |
17 | MDBTabsItem.displayName = 'MDBTabsItem';
18 | export default MDBTabsItem;
19 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Tabs/TabsItem/types.tsx:
--------------------------------------------------------------------------------
1 | interface TabsItemProps extends React.LiHTMLAttributes {
2 | ref?: React.Ref;
3 | tag?: React.ComponentProps;
4 | }
5 |
6 | export type { TabsItemProps };
7 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Tabs/TabsLink/TabsLink.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import clsx from 'clsx';
4 | import React, { useEffect } from 'react';
5 | import type { TabsLinkProps } from './types';
6 |
7 | const MDBTabsLink: React.FC = React.forwardRef(
8 | ({ className, color, active, onOpen, onClose, children, ...props }, ref) => {
9 | const classes = clsx('nav-link', active && 'active', color && `bg-${color}`, className);
10 |
11 | useEffect(() => {
12 | if (active) {
13 | onOpen?.();
14 | } else {
15 | onClose?.();
16 | }
17 | // eslint-disable-next-line
18 | }, [active]);
19 |
20 | return (
21 |
22 | {children}
23 |
24 | );
25 | }
26 | );
27 |
28 | MDBTabsLink.displayName = 'MDBTabsLink';
29 | export default MDBTabsLink;
30 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Tabs/TabsLink/types.tsx:
--------------------------------------------------------------------------------
1 | interface TabsLinkProps extends React.AnchorHTMLAttributes {
2 | active?: boolean;
3 | color?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark';
4 | ref?: React.Ref;
5 | onOpen?: () => any;
6 | onClose?: () => any;
7 | }
8 |
9 | export type { TabsLinkProps };
10 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Tabs/TabsPane/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../../types/baseComponent';
2 |
3 | interface TabsPaneProps extends BaseComponent {
4 | open?: boolean;
5 | tag?: React.ComponentProps;
6 | ref?: React.Ref;
7 | }
8 |
9 | export type { TabsPaneProps };
10 |
--------------------------------------------------------------------------------
/app/src/free/navigation/Tabs/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 |
3 | interface TabsProps extends BaseComponent {
4 | fill?: boolean;
5 | justify?: boolean;
6 | pills?: boolean;
7 | ref?: React.Ref;
8 | }
9 |
10 | export type { TabsProps };
11 |
--------------------------------------------------------------------------------
/app/src/free/styles/Typography/types.tsx:
--------------------------------------------------------------------------------
1 | import { BaseComponent } from '../../../types/baseComponent';
2 | import { textColor, backgroundColor } from '../../../types/colors';
3 |
4 | type TypographyProps = BaseComponent & {
5 | blockquote?: boolean;
6 | color?: textColor;
7 | listUnStyled?: boolean;
8 | listInLine?: boolean;
9 | note?: boolean;
10 | noteColor?: backgroundColor;
11 | ref?: React.ForwardedRef;
12 | tag?: React.ComponentProps;
13 | variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
14 | };
15 |
16 | export type { TypographyProps };
17 |
--------------------------------------------------------------------------------
/app/src/types/baseComponent.ts:
--------------------------------------------------------------------------------
1 | export type BaseComponent = Pick<
2 | React.HTMLAttributes,
3 | | 'className'
4 | | 'id'
5 | | 'style'
6 | | 'onClick'
7 | | 'onMouseUp'
8 | | 'onMouseMove'
9 | | 'onMouseDown'
10 | | 'onMouseEnter'
11 | | 'onMouseLeave'
12 | | 'onMouseOver'
13 | | 'onMouseOut'
14 | | 'onKeyDown'
15 | | 'onKeyUp'
16 | | 'onTouchStart'
17 | | 'onTouchMove'
18 | | 'onTouchEnd'
19 | | 'onScroll'
20 | | 'onDrop'
21 | | 'children'
22 | > & {
23 | [rest: string]: any;
24 | };
25 |
--------------------------------------------------------------------------------
/app/src/types/colors.ts:
--------------------------------------------------------------------------------
1 | export type backgroundColor =
2 | | 'primary'
3 | | 'secondary'
4 | | 'success'
5 | | 'danger'
6 | | 'warning'
7 | | 'info'
8 | | 'light'
9 | | 'dark'
10 | | 'white'
11 | | 'transparent';
12 |
13 | export type textColor =
14 | | 'primary'
15 | | 'secondary'
16 | | 'success'
17 | | 'info'
18 | | 'warning'
19 | | 'danger'
20 | | 'light'
21 | | 'dark'
22 | | 'body'
23 | | 'muted'
24 | | 'white'
25 | | 'black-50'
26 | | 'white-50';
27 |
--------------------------------------------------------------------------------
/app/src/types/placement.ts:
--------------------------------------------------------------------------------
1 | export type placement =
2 | | 'top'
3 | | 'auto'
4 | | 'auto-start'
5 | | 'auto-end'
6 | | 'bottom'
7 | | 'right'
8 | | 'left'
9 | | 'top-start'
10 | | 'top-end'
11 | | 'bottom-start'
12 | | 'bottom-end'
13 | | 'right-start'
14 | | 'right-end'
15 | | 'left-start'
16 | | 'left-end';
17 |
--------------------------------------------------------------------------------
/app/src/types/size.ts:
--------------------------------------------------------------------------------
1 | export type size = 'sm' | 'lg';
2 |
--------------------------------------------------------------------------------
/app/src/utils/ClientOnly.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 |
3 | interface MDBClientOnlyProps {
4 | children?: React.ReactNode | React.ReactNode[];
5 | }
6 |
7 | /**
8 | * `MDBClientOnly` is used to render components only on the client side and avoid SSR related issues.
9 | * Example usage:
10 | * ```jsx
11 | *
12 | * ...
13 | *
14 | * ```
15 | */
16 | const MDBClientOnly = ({ children }: MDBClientOnlyProps) => {
17 | const [isClient, setIsClient] = useState(false);
18 |
19 | useEffect(() => {
20 | setIsClient(true);
21 | }, []);
22 |
23 | return <>{isClient ? children : null};
24 | };
25 |
26 | export default MDBClientOnly;
27 |
--------------------------------------------------------------------------------
/app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowSyntheticDefaultImports": true,
4 | "baseUrl": ".",
5 | "declaration": true,
6 | "esModuleInterop": true,
7 | "experimentalDecorators": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "jsx": "react",
10 | "lib": ["dom", "ESNext"],
11 | "module": "commonjs",
12 | "moduleResolution": "node",
13 | "noErrorTruncation": true,
14 | "noImplicitAny": true,
15 | "removeComments": true,
16 | "sourceMap": false,
17 | "strict": true,
18 | "target": "es5",
19 | "typeRoots": ["../dist/index.d.ts", "./node_modules/@types"],
20 | "paths": {
21 | "mdb-react-ui-kit": ["../dist/index.d.ts"]
22 | }
23 | },
24 | "exclude": ["dist", "node_modules", "src/__tests__", "coverage"]
25 | }
26 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/_forms.scss:
--------------------------------------------------------------------------------
1 | @import 'forms/labels';
2 | @import 'forms/form-text';
3 | @import 'forms/form-control';
4 | @import 'forms/form-select';
5 | @import 'forms/form-check';
6 | @import 'forms/form-range';
7 | @import 'forms/floating-labels';
8 | @import 'forms/input-group';
9 | @import 'forms/validation';
10 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/_grid.scss:
--------------------------------------------------------------------------------
1 | // Row
2 | //
3 | // Rows contain your columns.
4 |
5 | @if $enable-grid-classes {
6 | .row {
7 | @include make-row();
8 |
9 | > * {
10 | @include make-col-ready();
11 | }
12 | }
13 | }
14 |
15 | @if $enable-cssgrid {
16 | .grid {
17 | display: grid;
18 | grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
19 | grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
20 | gap: var(--#{$prefix}gap, #{$grid-gutter-width});
21 |
22 | @include make-cssgrid();
23 | }
24 | }
25 |
26 | // Columns
27 | //
28 | // Common styles for small and large grid columns
29 |
30 | @if $enable-grid-classes {
31 | @include make-grid-columns();
32 | }
33 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/_helpers.scss:
--------------------------------------------------------------------------------
1 | @import 'helpers/clearfix';
2 | @import 'helpers/color-bg';
3 | @import 'helpers/colored-links';
4 | @import 'helpers/ratio';
5 | @import 'helpers/position';
6 | @import 'helpers/stacks';
7 | @import 'helpers/visually-hidden';
8 | @import 'helpers/stretched-link';
9 | @import 'helpers/text-truncation';
10 | @import 'helpers/vr';
11 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/_transitions.scss:
--------------------------------------------------------------------------------
1 | .fade {
2 | @include transition($transition-fade);
3 |
4 | &:not(.show) {
5 | opacity: 0;
6 | }
7 | }
8 |
9 | // scss-docs-start collapse-classes
10 | .collapse {
11 | &:not(.show) {
12 | display: none;
13 | }
14 | }
15 |
16 | .collapsing {
17 | height: 0;
18 | overflow: hidden;
19 | @include transition($transition-collapse);
20 |
21 | &.collapse-horizontal {
22 | width: 0;
23 | height: auto;
24 | @include transition($transition-collapse-width);
25 | }
26 | }
27 | // scss-docs-end collapse-classes
28 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/bootstrap-reboot.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins/banner';
2 | @include bsBanner(Reboot);
3 |
4 | @import 'functions';
5 | @import 'variables';
6 | @import 'maps';
7 | @import 'mixins';
8 | @import 'root';
9 | @import 'reboot';
10 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/bootstrap-utilities.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins/banner';
2 | @include bsBanner(Utilities);
3 |
4 | // Configuration
5 | @import 'functions';
6 | @import 'variables';
7 | @import 'maps';
8 | @import 'mixins';
9 | @import 'utilities';
10 |
11 | // Layout & components
12 | @import 'root';
13 |
14 | // Helpers
15 | @import 'helpers';
16 |
17 | // Utilities
18 | @import 'utilities/api';
19 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/forms/_form-text.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Form text
3 | //
4 |
5 | .form-text {
6 | margin-top: $form-text-margin-top;
7 | @include font-size($form-text-font-size);
8 | font-style: $form-text-font-style;
9 | font-weight: $form-text-font-weight;
10 | color: $form-text-color;
11 | }
12 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/forms/_validation.scss:
--------------------------------------------------------------------------------
1 | // Form validation
2 | //
3 | // Provide feedback to users when form field values are valid or invalid. Works
4 | // primarily for client-side validation via scoped `:invalid` and `:valid`
5 | // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
6 | // server-side validation.
7 |
8 | // scss-docs-start form-validation-states-loop
9 | @each $state, $data in $form-validation-states {
10 | @include form-validation-state($state, $data...);
11 | }
12 | // scss-docs-end form-validation-states-loop
13 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_clearfix.scss:
--------------------------------------------------------------------------------
1 | .clearfix {
2 | @include clearfix();
3 | }
4 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_color-bg.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable function-name-case
2 |
3 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
4 | @each $color, $value in $theme-colors {
5 | $color-rgb: to-rgb($value);
6 | .text-bg-#{$color} {
7 | color: color-contrast($value) if($enable-important-utilities, !important, null);
8 | background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1))
9 | if($enable-important-utilities, !important, null);
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_colored-links.scss:
--------------------------------------------------------------------------------
1 | @each $color, $value in $theme-colors {
2 | .link-#{$color} {
3 | color: $value !important; // stylelint-disable-line declaration-no-important
4 |
5 | @if $link-shade-percentage != 0 {
6 | &:hover,
7 | &:focus {
8 | color: if(
9 | color-contrast($value) == $color-contrast-light,
10 | shade-color($value, $link-shade-percentage),
11 | tint-color($value, $link-shade-percentage)
12 | ) !important; // stylelint-disable-line declaration-no-important
13 | }
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_position.scss:
--------------------------------------------------------------------------------
1 | // Shorthand
2 |
3 | .fixed-top {
4 | position: fixed;
5 | top: 0;
6 | right: 0;
7 | left: 0;
8 | z-index: $zindex-fixed;
9 | }
10 |
11 | .fixed-bottom {
12 | position: fixed;
13 | right: 0;
14 | bottom: 0;
15 | left: 0;
16 | z-index: $zindex-fixed;
17 | }
18 |
19 | // Responsive sticky top and bottom
20 | @each $breakpoint in map-keys($grid-breakpoints) {
21 | @include media-breakpoint-up($breakpoint) {
22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
23 |
24 | .sticky#{$infix}-top {
25 | position: sticky;
26 | top: 0;
27 | z-index: $zindex-sticky;
28 | }
29 |
30 | .sticky#{$infix}-bottom {
31 | position: sticky;
32 | bottom: 0;
33 | z-index: $zindex-sticky;
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_ratio.scss:
--------------------------------------------------------------------------------
1 | // Credit: Nicolas Gallagher and SUIT CSS.
2 |
3 | .ratio {
4 | position: relative;
5 | width: 100%;
6 |
7 | &::before {
8 | display: block;
9 | padding-top: var(--#{$prefix}aspect-ratio);
10 | content: '';
11 | }
12 |
13 | > * {
14 | position: absolute;
15 | top: 0;
16 | left: 0;
17 | width: 100%;
18 | height: 100%;
19 | }
20 | }
21 |
22 | @each $key, $ratio in $aspect-ratios {
23 | .ratio-#{$key} {
24 | --#{$prefix}aspect-ratio: #{$ratio};
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_stacks.scss:
--------------------------------------------------------------------------------
1 | // scss-docs-start stacks
2 | .hstack {
3 | display: flex;
4 | flex-direction: row;
5 | align-items: center;
6 | align-self: stretch;
7 | }
8 |
9 | .vstack {
10 | display: flex;
11 | flex: 1 1 auto;
12 | flex-direction: column;
13 | align-self: stretch;
14 | }
15 | // scss-docs-end stacks
16 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_stretched-link.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Stretched link
3 | //
4 |
5 | .stretched-link {
6 | &::#{$stretched-link-pseudo-element} {
7 | position: absolute;
8 | top: 0;
9 | right: 0;
10 | bottom: 0;
11 | left: 0;
12 | z-index: $stretched-link-z-index;
13 | content: '';
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_text-truncation.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Text truncation
3 | //
4 |
5 | .text-truncate {
6 | @include text-truncate();
7 | }
8 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_visually-hidden.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Visually hidden
3 | //
4 |
5 | .visually-hidden,
6 | .visually-hidden-focusable:not(:focus):not(:focus-within) {
7 | @include visually-hidden();
8 | }
9 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/helpers/_vr.scss:
--------------------------------------------------------------------------------
1 | .vr {
2 | display: inline-block;
3 | align-self: stretch;
4 | width: 1px;
5 | min-height: 1em;
6 | background-color: currentcolor;
7 | opacity: $hr-opacity;
8 | }
9 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_alert.scss:
--------------------------------------------------------------------------------
1 | // scss-docs-start alert-variant-mixin
2 | @mixin alert-variant($background, $border, $color) {
3 | --#{$prefix}alert-color: #{$color};
4 | --#{$prefix}alert-bg: #{$background};
5 | --#{$prefix}alert-border-color: #{$border};
6 |
7 | @if $enable-gradients {
8 | background-image: var(--#{$prefix}gradient);
9 | }
10 |
11 | .alert-link {
12 | color: shade-color($color, 20%);
13 | }
14 | }
15 | // scss-docs-end alert-variant-mixin
16 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_backdrop.scss:
--------------------------------------------------------------------------------
1 | // Shared between modals and offcanvases
2 | @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | z-index: $zindex;
7 | width: 100vw;
8 | height: 100vh;
9 | background-color: $backdrop-bg;
10 |
11 | // Fade for backdrop
12 | &.fade {
13 | opacity: 0;
14 | }
15 | &.show {
16 | opacity: $backdrop-opacity;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_banner.scss:
--------------------------------------------------------------------------------
1 | @mixin bsBanner($file) {
2 | /*!
3 | * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
4 | * Copyright 2011-2022 The Bootstrap Authors
5 | * Copyright 2011-2022 Twitter, Inc.
6 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
7 | */
8 | }
9 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | @mixin box-shadow($shadow...) {
2 | @if $enable-shadows {
3 | $result: ();
4 |
5 | @each $value in $shadow {
6 | @if $value != null {
7 | $result: append($result, $value, 'comma');
8 | }
9 | @if $value == none and length($shadow) > 1 {
10 | @warn "The keyword 'none' must be used as a single argument.";
11 | }
12 | }
13 |
14 | @if (length($result) > 0) {
15 | box-shadow: $result;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_clearfix.scss:
--------------------------------------------------------------------------------
1 | // scss-docs-start clearfix
2 | @mixin clearfix() {
3 | &::after {
4 | display: block;
5 | clear: both;
6 | content: '';
7 | }
8 | }
9 | // scss-docs-end clearfix
10 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_color-scheme.scss:
--------------------------------------------------------------------------------
1 | // scss-docs-start mixin-color-scheme
2 | @mixin color-scheme($name) {
3 | @media (prefers-color-scheme: #{$name}) {
4 | @content;
5 | }
6 | }
7 | // scss-docs-end mixin-color-scheme
8 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_container.scss:
--------------------------------------------------------------------------------
1 | // Container mixins
2 |
3 | @mixin make-container($gutter: $container-padding-x) {
4 | --#{$prefix}gutter-x: #{$gutter};
5 | --#{$prefix}gutter-y: 0;
6 | width: 100%;
7 | padding-right: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
8 | padding-left: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
9 | margin-right: auto;
10 | margin-left: auto;
11 | }
12 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_deprecate.scss:
--------------------------------------------------------------------------------
1 | // Deprecate mixin
2 | //
3 | // This mixin can be used to deprecate mixins or functions.
4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) {
8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_image.scss:
--------------------------------------------------------------------------------
1 | // Image Mixins
2 | // - Responsive image
3 | // - Retina image
4 |
5 | // Responsive image
6 | //
7 | // Keep images from scaling beyond the width of their parents.
8 |
9 | @mixin img-fluid {
10 | // Part 1: Set a maximum relative to the parent
11 | max-width: 100%;
12 | // Part 2: Override the height to auto, otherwise images will be stretched
13 | // when setting a width and height attribute on the img element.
14 | height: auto;
15 | }
16 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_list-group.scss:
--------------------------------------------------------------------------------
1 | // List Groups
2 |
3 | // scss-docs-start list-group-mixin
4 | @mixin list-group-item-variant($state, $background, $color) {
5 | .list-group-item-#{$state} {
6 | color: $color;
7 | background-color: $background;
8 |
9 | &.list-group-item-action {
10 | &:hover,
11 | &:focus {
12 | color: $color;
13 | background-color: shade-color($background, 10%);
14 | }
15 |
16 | &.active {
17 | color: $white;
18 | background-color: $color;
19 | border-color: $color;
20 | }
21 | }
22 | }
23 | }
24 | // scss-docs-end list-group-mixin
25 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_lists.scss:
--------------------------------------------------------------------------------
1 | // Lists
2 |
3 | // Unstyled keeps list items block level, just removes default browser padding and list-style
4 | @mixin list-unstyled {
5 | padding-left: 0;
6 | list-style: none;
7 | }
8 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_pagination.scss:
--------------------------------------------------------------------------------
1 | // Pagination
2 |
3 | // scss-docs-start pagination-mixin
4 | @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
5 | --#{$prefix}pagination-padding-x: #{$padding-x};
6 | --#{$prefix}pagination-padding-y: #{$padding-y};
7 | @include rfs($font-size, --#{$prefix}pagination-font-size);
8 | --#{$prefix}pagination-border-radius: #{$border-radius};
9 | }
10 | // scss-docs-end pagination-mixin
11 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_reset-text.scss:
--------------------------------------------------------------------------------
1 | @mixin reset-text {
2 | font-family: $font-family-base;
3 | // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
4 | font-style: normal;
5 | font-weight: $font-weight-normal;
6 | line-height: $line-height-base;
7 | text-align: left; // Fallback for where `start` is not supported
8 | text-align: start;
9 | text-decoration: none;
10 | text-shadow: none;
11 | text-transform: none;
12 | letter-spacing: normal;
13 | word-break: normal;
14 | white-space: normal;
15 | word-spacing: normal;
16 | line-break: auto;
17 | }
18 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_resize.scss:
--------------------------------------------------------------------------------
1 | // Resize anything
2 |
3 | @mixin resizable($direction) {
4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
5 | resize: $direction; // Options: horizontal, vertical, both
6 | }
7 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_text-truncate.scss:
--------------------------------------------------------------------------------
1 | // Text truncate
2 | // Requires inline-block or block for proper styling
3 |
4 | @mixin text-truncate() {
5 | overflow: hidden;
6 | text-overflow: ellipsis;
7 | white-space: nowrap;
8 | }
9 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap-rtl-fix/mixins/_transition.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable property-disallowed-list
2 | @mixin transition($transition...) {
3 | @if length($transition) == 0 {
4 | $transition: $transition-base;
5 | }
6 |
7 | @if length($transition) > 1 {
8 | @each $value in $transition {
9 | @if $value == null or $value == none {
10 | @warn "The keyword 'none' or 'null' must be used as a single argument.";
11 | }
12 | }
13 | }
14 |
15 | @if $enable-transitions {
16 | @if nth($transition, 1) != null {
17 | transition: $transition;
18 | }
19 |
20 | @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
21 | @media (prefers-reduced-motion: reduce) {
22 | transition: none;
23 | }
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/_forms.scss:
--------------------------------------------------------------------------------
1 | @import 'forms/labels';
2 | @import 'forms/form-text';
3 | @import 'forms/form-control';
4 | @import 'forms/form-select';
5 | @import 'forms/form-check';
6 | @import 'forms/form-range';
7 | @import 'forms/floating-labels';
8 | @import 'forms/input-group';
9 | @import 'forms/validation';
10 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/_grid.scss:
--------------------------------------------------------------------------------
1 | // Row
2 | //
3 | // Rows contain your columns.
4 |
5 | @if $enable-grid-classes {
6 | .row {
7 | @include make-row();
8 |
9 | > * {
10 | @include make-col-ready();
11 | }
12 | }
13 | }
14 |
15 | @if $enable-cssgrid {
16 | .grid {
17 | display: grid;
18 | grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
19 | grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
20 | gap: var(--#{$prefix}gap, #{$grid-gutter-width});
21 |
22 | @include make-cssgrid();
23 | }
24 | }
25 |
26 | // Columns
27 | //
28 | // Common styles for small and large grid columns
29 |
30 | @if $enable-grid-classes {
31 | @include make-grid-columns();
32 | }
33 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/_helpers.scss:
--------------------------------------------------------------------------------
1 | @import 'helpers/clearfix';
2 | @import 'helpers/color-bg';
3 | @import 'helpers/colored-links';
4 | @import 'helpers/ratio';
5 | @import 'helpers/position';
6 | @import 'helpers/stacks';
7 | @import 'helpers/visually-hidden';
8 | @import 'helpers/stretched-link';
9 | @import 'helpers/text-truncation';
10 | @import 'helpers/vr';
11 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/_transitions.scss:
--------------------------------------------------------------------------------
1 | .fade {
2 | @include transition($transition-fade);
3 |
4 | &:not(.show) {
5 | opacity: 0;
6 | }
7 | }
8 |
9 | // scss-docs-start collapse-classes
10 | .collapse {
11 | &:not(.show) {
12 | display: none;
13 | }
14 | }
15 |
16 | .collapsing {
17 | height: 0;
18 | overflow: hidden;
19 | @include transition($transition-collapse);
20 |
21 | &.collapse-horizontal {
22 | width: 0;
23 | height: auto;
24 | @include transition($transition-collapse-width);
25 | }
26 | }
27 | // scss-docs-end collapse-classes
28 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/bootstrap-reboot.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins/banner';
2 | @include bsBanner(Reboot);
3 |
4 | @import 'functions';
5 | @import 'variables';
6 | @import 'maps';
7 | @import 'mixins';
8 | @import 'root';
9 | @import 'reboot';
10 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/bootstrap-utilities.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins/banner';
2 | @include bsBanner(Utilities);
3 |
4 | // Configuration
5 | @import 'functions';
6 | @import 'variables';
7 | @import 'maps';
8 | @import 'mixins';
9 | @import 'utilities';
10 |
11 | // Layout & components
12 | @import 'root';
13 |
14 | // Helpers
15 | @import 'helpers';
16 |
17 | // Utilities
18 | @import 'utilities/api';
19 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/forms/_form-text.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Form text
3 | //
4 |
5 | .form-text {
6 | margin-top: $form-text-margin-top;
7 | @include font-size($form-text-font-size);
8 | font-style: $form-text-font-style;
9 | font-weight: $form-text-font-weight;
10 | color: $form-text-color;
11 | }
12 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/forms/_validation.scss:
--------------------------------------------------------------------------------
1 | // Form validation
2 | //
3 | // Provide feedback to users when form field values are valid or invalid. Works
4 | // primarily for client-side validation via scoped `:invalid` and `:valid`
5 | // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
6 | // server-side validation.
7 |
8 | // scss-docs-start form-validation-states-loop
9 | @each $state, $data in $form-validation-states {
10 | @include form-validation-state($state, $data...);
11 | }
12 | // scss-docs-end form-validation-states-loop
13 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_clearfix.scss:
--------------------------------------------------------------------------------
1 | .clearfix {
2 | @include clearfix();
3 | }
4 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_color-bg.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable function-name-case
2 |
3 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
4 | @each $color, $value in $theme-colors {
5 | $color-rgb: to-rgb($value);
6 | .text-bg-#{$color} {
7 | color: color-contrast($value) if($enable-important-utilities, !important, null);
8 | background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1))
9 | if($enable-important-utilities, !important, null);
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_colored-links.scss:
--------------------------------------------------------------------------------
1 | @each $color, $value in $theme-colors {
2 | .link-#{$color} {
3 | color: $value !important; // stylelint-disable-line declaration-no-important
4 |
5 | @if $link-shade-percentage != 0 {
6 | &:hover,
7 | &:focus {
8 | color: if(
9 | color-contrast($value) == $color-contrast-light,
10 | shade-color($value, $link-shade-percentage),
11 | tint-color($value, $link-shade-percentage)
12 | ) !important; // stylelint-disable-line declaration-no-important
13 | }
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_position.scss:
--------------------------------------------------------------------------------
1 | // Shorthand
2 |
3 | .fixed-top {
4 | position: fixed;
5 | top: 0;
6 | right: 0;
7 | left: 0;
8 | z-index: $zindex-fixed;
9 | }
10 |
11 | .fixed-bottom {
12 | position: fixed;
13 | right: 0;
14 | bottom: 0;
15 | left: 0;
16 | z-index: $zindex-fixed;
17 | }
18 |
19 | // Responsive sticky top and bottom
20 | @each $breakpoint in map-keys($grid-breakpoints) {
21 | @include media-breakpoint-up($breakpoint) {
22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
23 |
24 | .sticky#{$infix}-top {
25 | position: sticky;
26 | top: 0;
27 | z-index: $zindex-sticky;
28 | }
29 |
30 | .sticky#{$infix}-bottom {
31 | position: sticky;
32 | bottom: 0;
33 | z-index: $zindex-sticky;
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_ratio.scss:
--------------------------------------------------------------------------------
1 | // Credit: Nicolas Gallagher and SUIT CSS.
2 |
3 | .ratio {
4 | position: relative;
5 | width: 100%;
6 |
7 | &::before {
8 | display: block;
9 | padding-top: var(--#{$prefix}aspect-ratio);
10 | content: '';
11 | }
12 |
13 | > * {
14 | position: absolute;
15 | top: 0;
16 | left: 0;
17 | width: 100%;
18 | height: 100%;
19 | }
20 | }
21 |
22 | @each $key, $ratio in $aspect-ratios {
23 | .ratio-#{$key} {
24 | --#{$prefix}aspect-ratio: #{$ratio};
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_stacks.scss:
--------------------------------------------------------------------------------
1 | // scss-docs-start stacks
2 | .hstack {
3 | display: flex;
4 | flex-direction: row;
5 | align-items: center;
6 | align-self: stretch;
7 | }
8 |
9 | .vstack {
10 | display: flex;
11 | flex: 1 1 auto;
12 | flex-direction: column;
13 | align-self: stretch;
14 | }
15 | // scss-docs-end stacks
16 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_stretched-link.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Stretched link
3 | //
4 |
5 | .stretched-link {
6 | &::#{$stretched-link-pseudo-element} {
7 | position: absolute;
8 | top: 0;
9 | right: 0;
10 | bottom: 0;
11 | left: 0;
12 | z-index: $stretched-link-z-index;
13 | content: '';
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_text-truncation.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Text truncation
3 | //
4 |
5 | .text-truncate {
6 | @include text-truncate();
7 | }
8 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_visually-hidden.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Visually hidden
3 | //
4 |
5 | .visually-hidden,
6 | .visually-hidden-focusable:not(:focus):not(:focus-within) {
7 | @include visually-hidden();
8 | }
9 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/helpers/_vr.scss:
--------------------------------------------------------------------------------
1 | .vr {
2 | display: inline-block;
3 | align-self: stretch;
4 | width: 1px;
5 | min-height: 1em;
6 | background-color: currentcolor;
7 | opacity: $hr-opacity;
8 | }
9 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_alert.scss:
--------------------------------------------------------------------------------
1 | // scss-docs-start alert-variant-mixin
2 | @mixin alert-variant($background, $border, $color) {
3 | --#{$prefix}alert-color: #{$color};
4 | --#{$prefix}alert-bg: #{$background};
5 | --#{$prefix}alert-border-color: #{$border};
6 |
7 | @if $enable-gradients {
8 | background-image: var(--#{$prefix}gradient);
9 | }
10 |
11 | .alert-link {
12 | color: shade-color($color, 20%);
13 | }
14 | }
15 | // scss-docs-end alert-variant-mixin
16 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_backdrop.scss:
--------------------------------------------------------------------------------
1 | // Shared between modals and offcanvases
2 | @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
3 | position: fixed;
4 | top: 0;
5 | left: 0;
6 | z-index: $zindex;
7 | width: 100vw;
8 | height: 100vh;
9 | background-color: $backdrop-bg;
10 |
11 | // Fade for backdrop
12 | &.fade {
13 | opacity: 0;
14 | }
15 | &.show {
16 | opacity: $backdrop-opacity;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_banner.scss:
--------------------------------------------------------------------------------
1 | @mixin bsBanner($file) {
2 | /*!
3 | * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
4 | * Copyright 2011-2022 The Bootstrap Authors
5 | * Copyright 2011-2022 Twitter, Inc.
6 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
7 | */
8 | }
9 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_box-shadow.scss:
--------------------------------------------------------------------------------
1 | @mixin box-shadow($shadow...) {
2 | @if $enable-shadows {
3 | $result: ();
4 |
5 | @each $value in $shadow {
6 | @if $value != null {
7 | $result: append($result, $value, 'comma');
8 | }
9 | @if $value == none and length($shadow) > 1 {
10 | @warn "The keyword 'none' must be used as a single argument.";
11 | }
12 | }
13 |
14 | @if (length($result) > 0) {
15 | box-shadow: $result;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_clearfix.scss:
--------------------------------------------------------------------------------
1 | // scss-docs-start clearfix
2 | @mixin clearfix() {
3 | &::after {
4 | display: block;
5 | clear: both;
6 | content: '';
7 | }
8 | }
9 | // scss-docs-end clearfix
10 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_color-scheme.scss:
--------------------------------------------------------------------------------
1 | // scss-docs-start mixin-color-scheme
2 | @mixin color-scheme($name) {
3 | @media (prefers-color-scheme: #{$name}) {
4 | @content;
5 | }
6 | }
7 | // scss-docs-end mixin-color-scheme
8 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_container.scss:
--------------------------------------------------------------------------------
1 | // Container mixins
2 |
3 | @mixin make-container($gutter: $container-padding-x) {
4 | --#{$prefix}gutter-x: #{$gutter};
5 | --#{$prefix}gutter-y: 0;
6 | width: 100%;
7 | padding-right: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
8 | padding-left: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
9 | margin-right: auto;
10 | margin-left: auto;
11 | }
12 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_deprecate.scss:
--------------------------------------------------------------------------------
1 | // Deprecate mixin
2 | //
3 | // This mixin can be used to deprecate mixins or functions.
4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) {
8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_image.scss:
--------------------------------------------------------------------------------
1 | // Image Mixins
2 | // - Responsive image
3 | // - Retina image
4 |
5 | // Responsive image
6 | //
7 | // Keep images from scaling beyond the width of their parents.
8 |
9 | @mixin img-fluid {
10 | // Part 1: Set a maximum relative to the parent
11 | max-width: 100%;
12 | // Part 2: Override the height to auto, otherwise images will be stretched
13 | // when setting a width and height attribute on the img element.
14 | height: auto;
15 | }
16 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_list-group.scss:
--------------------------------------------------------------------------------
1 | // List Groups
2 |
3 | // scss-docs-start list-group-mixin
4 | @mixin list-group-item-variant($state, $background, $color) {
5 | .list-group-item-#{$state} {
6 | color: $color;
7 | background-color: $background;
8 |
9 | &.list-group-item-action {
10 | &:hover,
11 | &:focus {
12 | color: $color;
13 | background-color: shade-color($background, 10%);
14 | }
15 |
16 | &.active {
17 | color: $white;
18 | background-color: $color;
19 | border-color: $color;
20 | }
21 | }
22 | }
23 | }
24 | // scss-docs-end list-group-mixin
25 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_lists.scss:
--------------------------------------------------------------------------------
1 | // Lists
2 |
3 | // Unstyled keeps list items block level, just removes default browser padding and list-style
4 | @mixin list-unstyled {
5 | padding-left: 0;
6 | list-style: none;
7 | }
8 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_pagination.scss:
--------------------------------------------------------------------------------
1 | // Pagination
2 |
3 | // scss-docs-start pagination-mixin
4 | @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
5 | --#{$prefix}pagination-padding-x: #{$padding-x};
6 | --#{$prefix}pagination-padding-y: #{$padding-y};
7 | @include rfs($font-size, --#{$prefix}pagination-font-size);
8 | --#{$prefix}pagination-border-radius: #{$border-radius};
9 | }
10 | // scss-docs-end pagination-mixin
11 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_reset-text.scss:
--------------------------------------------------------------------------------
1 | @mixin reset-text {
2 | font-family: $font-family-base;
3 | // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
4 | font-style: normal;
5 | font-weight: $font-weight-normal;
6 | line-height: $line-height-base;
7 | text-align: left; // Fallback for where `start` is not supported
8 | text-align: start;
9 | text-decoration: none;
10 | text-shadow: none;
11 | text-transform: none;
12 | letter-spacing: normal;
13 | word-break: normal;
14 | white-space: normal;
15 | word-spacing: normal;
16 | line-break: auto;
17 | }
18 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_resize.scss:
--------------------------------------------------------------------------------
1 | // Resize anything
2 |
3 | @mixin resizable($direction) {
4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
5 | resize: $direction; // Options: horizontal, vertical, both
6 | }
7 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_text-truncate.scss:
--------------------------------------------------------------------------------
1 | // Text truncate
2 | // Requires inline-block or block for proper styling
3 |
4 | @mixin text-truncate() {
5 | overflow: hidden;
6 | text-overflow: ellipsis;
7 | white-space: nowrap;
8 | }
9 |
--------------------------------------------------------------------------------
/dist/scss/bootstrap/mixins/_transition.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable property-disallowed-list
2 | @mixin transition($transition...) {
3 | @if length($transition) == 0 {
4 | $transition: $transition-base;
5 | }
6 |
7 | @if length($transition) > 1 {
8 | @each $value in $transition {
9 | @if $value == null or $value == none {
10 | @warn "The keyword 'none' or 'null' must be used as a single argument.";
11 | }
12 | }
13 | }
14 |
15 | @if $enable-transitions {
16 | @if nth($transition, 1) != null {
17 | transition: $transition;
18 | }
19 |
20 | @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none {
21 | @media (prefers-reduced-motion: reduce) {
22 | transition: none;
23 | }
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/dist/scss/custom/_skin.scss:
--------------------------------------------------------------------------------
1 | // Your custom skin
2 |
--------------------------------------------------------------------------------
/dist/scss/custom/_styles.scss:
--------------------------------------------------------------------------------
1 | // Your custom styles
2 |
--------------------------------------------------------------------------------
/dist/scss/custom/_variables.scss:
--------------------------------------------------------------------------------
1 | // Your custom variables
2 |
--------------------------------------------------------------------------------
/dist/scss/free/_close.scss:
--------------------------------------------------------------------------------
1 | // transparent background and border properties included for button version.
2 | // iOS requires the button element instead of an anchor tag.
3 | // If you want the anchor version, it requires `href="#"`.
4 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
5 |
6 | .btn-close {
7 | &:focus {
8 | box-shadow: none;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/dist/scss/free/_colors.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Color styles
3 | //
4 |
5 | @each $color, $value in $theme-colors {
6 | .bg-#{$color} {
7 | --#{$prefix}-bg-opacity: 1;
8 |
9 | background-color: rgba($value, var(--#{$prefix}-bg-opacity));
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/dist/scss/free/_deprecated.scss:
--------------------------------------------------------------------------------
1 | // To be removed
2 |
3 | hr.divider-horizontal:not([size]) {
4 | height: 2px;
5 | }
6 |
7 | .divider-horizontal {
8 | opacity: 1;
9 | background-color: #f5f5f5;
10 | height: 2px;
11 | }
12 |
13 | .divider-vertical {
14 | opacity: 1;
15 | background-color: #f5f5f5;
16 | display: inline-block;
17 | width: 2px;
18 | margin: 0 1rem;
19 | }
20 |
21 | hr.divider-horizontal-blurry {
22 | background-image: linear-gradient(90deg, transparent, hsl(0, 0%, 40%), transparent);
23 | background-color: transparent;
24 | }
25 |
26 | hr.divider-vertical-blurry {
27 | background-image: linear-gradient(180deg, transparent, hsl(0, 0%, 40%), transparent);
28 | background-color: transparent;
29 | width: 1px;
30 | top: 0;
31 | right: 0;
32 | }
33 |
--------------------------------------------------------------------------------
/dist/scss/free/_functions.scss:
--------------------------------------------------------------------------------
1 | // Functions
2 |
3 | // Dynamically change text color based on background color
4 |
5 | @function set-notification-text-color($color) {
6 | @if (lightness($color) > 70) {
7 | @return $gray-800;
8 | } @else {
9 | @return $white;
10 | }
11 | }
12 |
13 | @function color-level($color: $primary, $level: 0) {
14 | $color-base: if($level > 0, $black, $white);
15 | $level: abs($level);
16 |
17 | @return mix($color-base, $color, $level);
18 | }
19 |
--------------------------------------------------------------------------------
/dist/scss/free/_mixins.scss:
--------------------------------------------------------------------------------
1 | // Toggles
2 | //
3 | // Used in conjunction with global variables to enable certain theme features.
4 |
5 | // Components
6 | @import './mixins/buttons';
7 | @import './mixins/ripple';
8 | @import './mixins/table-variants';
9 |
--------------------------------------------------------------------------------
/dist/scss/free/_modal.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Modal styles
3 | //
4 |
5 | .modal-content {
6 | // scss-docs-start modal-css-vars
7 | --#{$prefix}modal-box-shadow: #{$modal-box-shadow};
8 | // scss-docs-end modal-css-vars
9 |
10 | border: 0;
11 | box-shadow: var(--#{$prefix}modal-box-shadow);
12 | }
13 |
--------------------------------------------------------------------------------
/dist/scss/free/_popover.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Popover styles
3 | //
4 |
5 | .popover {
6 | // scss-docs-start popover-css-vars
7 | --#{$prefix}popover-border-bottom-width: #{$popover-border-bottom-width};
8 | // scss-docs-end popover-css-vars
9 |
10 | .popover-arrow {
11 | display: none;
12 | }
13 | }
14 |
15 | .popover-header {
16 | border-bottom: var(--#{$prefix}popover-border-bottom-width) solid var(--#{$prefix}popover-border-color);
17 | }
18 |
--------------------------------------------------------------------------------
/dist/scss/free/_progress.scss:
--------------------------------------------------------------------------------
1 | // Progress
2 |
3 | .progress {
4 | border-radius: 0;
5 | box-shadow: none;
6 | }
7 |
--------------------------------------------------------------------------------
/dist/scss/free/_root.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --mdb-font-roboto: #{inspect($font-family-roboto)};
3 | --mdb-bg-opacity: 1;
4 | }
5 |
--------------------------------------------------------------------------------
/dist/scss/free/_shadows.scss:
--------------------------------------------------------------------------------
1 | // Shadows
2 |
--------------------------------------------------------------------------------
/dist/scss/free/_tooltip.scss:
--------------------------------------------------------------------------------
1 | // Tooltip
2 |
3 | .tooltip {
4 | --#{$prefix}tooltip-font-size: #{$tooltip-font-size};
5 |
6 | &.show {
7 | opacity: 1;
8 | }
9 |
10 | .tooltip-arrow {
11 | display: none;
12 | }
13 | }
14 |
15 | .tooltip-inner {
16 | font-size: var(--#{$prefix}tooltip-font-size);
17 | }
18 |
--------------------------------------------------------------------------------
/dist/scss/free/_type.scss:
--------------------------------------------------------------------------------
1 | // Type
2 | .note {
3 | --#{$prefix}note-padding: #{$note-padding};
4 | --#{$prefix}note-border-width: #{$note-border-width};
5 | --#{$prefix}note-border-radius: #{$note-border-radius};
6 | --#{$prefix}note-strong-font-weight: #{$note-strong-font-weight};
7 |
8 | padding: var(--#{$prefix}note-padding);
9 | border-left: var(--#{$prefix}note-border-width) solid;
10 | border-radius: var(--#{$prefix}note-border-radius);
11 | strong {
12 | font-weight: var(--#{$prefix}note-strong-font-weight);
13 | }
14 | }
15 |
16 | @each $color, $value in $note {
17 | .note-#{$color} {
18 | background-color: map-get($value, background-color);
19 | border-color: map-get($value, border-color);
20 | }
21 | }
22 |
23 | .w-responsive {
24 | @media (min-width: 1199px) {
25 | width: 75%;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/dist/scss/free/forms/_form-file.scss:
--------------------------------------------------------------------------------
1 | .form-control {
2 | &[type='file'] {
3 | &::-webkit-file-upload-button {
4 | background-color: transparent;
5 | }
6 | }
7 | &:hover {
8 | &:not(:disabled):not([readonly])::-webkit-file-upload-button {
9 | background-color: transparent;
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/dist/scss/free/forms/_form-select.scss:
--------------------------------------------------------------------------------
1 | // Select
2 |
3 | .select-input {
4 | &.form-control {
5 | &[readonly]:not([disabled]) {
6 | background-color: transparent;
7 | }
8 | }
9 | }
10 |
11 | .form-select {
12 | transition: $form-select-transition;
13 | }
14 |
15 | .form-select:focus {
16 | border-color: $form-select-focus-border-color;
17 | outline: 0;
18 | box-shadow: $form-select-focus-border-box-shadow;
19 | }
20 |
--------------------------------------------------------------------------------
/dist/scss/free/mixins/_ripple.scss:
--------------------------------------------------------------------------------
1 | @mixin ripple-variant($color_value) {
2 | $gradient: rgba(
3 | $color: $color_value,
4 | $alpha: 0.2,
5 | )
6 | 0,
7 | rgba(
8 | $color: $color_value,
9 | $alpha: 0.3,
10 | )
11 | 40%,
12 | rgba(
13 | $color: $color_value,
14 | $alpha: 0.4,
15 | )
16 | 50%,
17 | rgba(
18 | $color: $color_value,
19 | $alpha: 0.5,
20 | )
21 | 60%,
22 | rgba(
23 | $color: $color_value,
24 | $alpha: 0,
25 | )
26 | 70%;
27 | background-image: radial-gradient(circle, $gradient);
28 | }
29 |
--------------------------------------------------------------------------------
/dist/scss/free/mixins/_table-variants.scss:
--------------------------------------------------------------------------------
1 | // Deprecated
2 |
3 | // scss-docs-start table-variant
4 | // @mixin table-variant-mdb($state, $background) {
5 | // .table-#{$state} {
6 | // background-color: $background;
7 | // }
8 | // }
9 | // scss-docs-end table-variant
10 |
--------------------------------------------------------------------------------
/dist/scss/mdb.dark.free.scss:
--------------------------------------------------------------------------------
1 | // MDB FREE
2 | @import './mdb.free';
3 |
4 | // THEMING
5 | @import './pro/theme/free/theming';
6 |
7 | // DARK SKIN
8 | $my-theme-primary: #3b71ca;
9 | $my-theme-secondary: #e3ebf7;
10 | $my-dark-theme: mdb-dark-theme($my-theme-primary, $my-theme-secondary);
11 | @include mdb-theme($my-dark-theme);
12 |
--------------------------------------------------------------------------------
/dist/types/free/components/Accordion/Accordion.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { AccordionProps } from './types';
3 | declare const MDBAccordion: React.FC;
4 | export default MDBAccordion;
5 |
--------------------------------------------------------------------------------
/dist/types/free/components/Accordion/AccordionContext.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | interface AccordionProps {
3 | activeItem?: number | number[];
4 | setActiveItem: React.SetStateAction;
5 | alwaysOpen?: boolean;
6 | initialActive?: number | number[];
7 | onChange?: (id: number | number[]) => void;
8 | }
9 | declare const AccordionContext: React.Context;
10 | export { AccordionContext };
11 |
--------------------------------------------------------------------------------
/dist/types/free/components/Accordion/AccordionItem/AccordionItem.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { AccordionItemProps } from './types';
3 | declare const MDBAccordionItem: React.FC;
4 | export default MDBAccordionItem;
5 |
--------------------------------------------------------------------------------
/dist/types/free/components/Accordion/AccordionItem/types.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../../types/baseComponent';
3 | interface AccordionItemProps extends BaseComponent {
4 | bodyClassName?: string;
5 | bodyStyle?: React.CSSProperties;
6 | collapseId: number;
7 | headerClassName?: string;
8 | headerStyle?: React.CSSProperties;
9 | headerTitle?: React.ReactNode;
10 | btnClassName?: React.ReactNode;
11 | ref?: React.ForwardedRef;
12 | tag?: React.ComponentProps;
13 | }
14 | export type { AccordionItemProps };
15 |
--------------------------------------------------------------------------------
/dist/types/free/components/Accordion/types.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../types/baseComponent';
3 | interface AccordionProps extends BaseComponent {
4 | alwaysOpen?: boolean;
5 | borderless?: boolean;
6 | flush?: boolean;
7 | active?: number | number[];
8 | initialActive?: number | number[];
9 | onChange?: (id: number | number[]) => void;
10 | ref?: React.ForwardedRef;
11 | tag?: React.ComponentProps;
12 | }
13 | export type { AccordionProps };
14 |
--------------------------------------------------------------------------------
/dist/types/free/components/Badge/Badge.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { BadgeProps } from './types';
3 | declare const MDBBadge: React.FC;
4 | export default MDBBadge;
5 |
--------------------------------------------------------------------------------
/dist/types/free/components/Badge/types.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseComponent } from '../../../types/baseComponent';
3 | import { backgroundColor } from '../../../types/colors';
4 | interface BadgeProps extends BaseComponent {
5 | color?: backgroundColor;
6 | dot?: boolean;
7 | notification?: boolean;
8 | pill?: boolean;
9 | ref?: React.ForwardedRef;
10 | tag?: React.ComponentProps;
11 | }
12 | export type { BadgeProps };
13 |
--------------------------------------------------------------------------------
/dist/types/free/components/Button/Button.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { ButtonProps } from './types';
3 | declare const MDBBtn: React.FC;
4 | export default MDBBtn;
5 |
--------------------------------------------------------------------------------
/dist/types/free/components/ButtonGroup/ButtonGroup.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import type { ButtonGroupProps } from './types';
3 | declare const MDBBtnGroup: React.FC;
4 | export default MDBBtnGroup;
5 |
--------------------------------------------------------------------------------
/dist/types/free/components/ButtonGroup/types.d.ts:
--------------------------------------------------------------------------------
1 | ///