├── .editorconfig ├── .gitattributes ├── .github ├── CODE_OF_CONDUCT.md ├── COMMIT_CONVENTION.md ├── CONTRIBUTING.md ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── SUPPORT.md └── workflows │ ├── daily-project-check.yml │ ├── project-check.yml │ └── stale.yml ├── .gitignore ├── .gitmodules ├── .prettierignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── eslint.config.mjs ├── lerna.json ├── package.json ├── packages ├── coreui-react │ ├── LICENSE │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── rollup.config.mjs │ ├── src │ │ ├── components │ │ │ ├── accordion │ │ │ │ ├── CAccordion.tsx │ │ │ │ ├── CAccordionBody.tsx │ │ │ │ ├── CAccordionButton.tsx │ │ │ │ ├── CAccordionContext.ts │ │ │ │ ├── CAccordionHeader.tsx │ │ │ │ ├── CAccordionItem.tsx │ │ │ │ ├── CAccordionItemContext.ts │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CAccordion.spec.tsx │ │ │ │ │ ├── CAccordionBody.spec.tsx │ │ │ │ │ ├── CAccordionButton.spec.tsx │ │ │ │ │ ├── CAccordionHeader.spec.tsx │ │ │ │ │ ├── CAccordionItem.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CAccordion.spec.tsx.snap │ │ │ │ │ │ ├── CAccordionBody.spec.tsx.snap │ │ │ │ │ │ ├── CAccordionButton.spec.tsx.snap │ │ │ │ │ │ ├── CAccordionHeader.spec.tsx.snap │ │ │ │ │ │ └── CAccordionItem.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── alert │ │ │ │ ├── CAlert.tsx │ │ │ │ ├── CAlertHeading.tsx │ │ │ │ ├── CAlertLink.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CAlert.spec.tsx │ │ │ │ │ ├── CAlertHeading.spec.tsx │ │ │ │ │ ├── CAlertLink.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CAlert.spec.tsx.snap │ │ │ │ │ │ ├── CAlertHeading.spec.tsx.snap │ │ │ │ │ │ └── CAlertLink.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── avatar │ │ │ │ ├── CAvatar.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CAvatar.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CAvatar.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── backdrop │ │ │ │ ├── CBackdrop.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CBackdrop.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CBackdrop.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── badge │ │ │ │ ├── CBadge.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CBadge.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CBadge.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── breadcrumb │ │ │ │ ├── CBreadcrumb.tsx │ │ │ │ ├── CBreadcrumbItem.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CBreadcrumb.spec.tsx │ │ │ │ │ ├── CBreadcrumbItem.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CBreadcrumb.spec.tsx.snap │ │ │ │ │ │ └── CBreadcrumbItem.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── button-group │ │ │ │ ├── CButtonGroup.tsx │ │ │ │ ├── CButtonToolbar.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CButtonGroup.spec.tsx │ │ │ │ │ ├── CButtonToolbar.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CButtonGroup.spec.tsx.snap │ │ │ │ │ │ └── CButtonToolbar.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── button │ │ │ │ ├── CButton.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CButton.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CButton.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── callout │ │ │ │ ├── CCallout.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CCallout.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CCallout.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── card │ │ │ │ ├── CCard.tsx │ │ │ │ ├── CCardBody.tsx │ │ │ │ ├── CCardFooter.tsx │ │ │ │ ├── CCardGroup.tsx │ │ │ │ ├── CCardHeader.tsx │ │ │ │ ├── CCardImage.tsx │ │ │ │ ├── CCardImageOverlay.tsx │ │ │ │ ├── CCardLink.tsx │ │ │ │ ├── CCardSubtitle.tsx │ │ │ │ ├── CCardText.tsx │ │ │ │ ├── CCardTitle.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CCard.spec.tsx │ │ │ │ │ ├── CCardBody.spec.tsx │ │ │ │ │ ├── CCardFooter.spec.tsx │ │ │ │ │ ├── CCardGroup.spec.tsx │ │ │ │ │ ├── CCardHeader.spec.tsx │ │ │ │ │ ├── CCardImage.spec.tsx │ │ │ │ │ ├── CCardImageOverlay.spec.tsx │ │ │ │ │ ├── CCardLink.spec.tsx │ │ │ │ │ ├── CCardSubtitle.spec.tsx │ │ │ │ │ ├── CCardText.spec.tsx │ │ │ │ │ ├── CCardTitle.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CCard.spec.tsx.snap │ │ │ │ │ │ ├── CCardBody.spec.tsx.snap │ │ │ │ │ │ ├── CCardFooter.spec.tsx.snap │ │ │ │ │ │ ├── CCardGroup.spec.tsx.snap │ │ │ │ │ │ ├── CCardHeader.spec.tsx.snap │ │ │ │ │ │ ├── CCardImage.spec.tsx.snap │ │ │ │ │ │ ├── CCardImageOverlay.spec.tsx.snap │ │ │ │ │ │ ├── CCardLink.spec.tsx.snap │ │ │ │ │ │ ├── CCardSubtitle.spec.tsx.snap │ │ │ │ │ │ ├── CCardText.spec.tsx.snap │ │ │ │ │ │ └── CCardTitle.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── carousel │ │ │ │ ├── CCarousel.tsx │ │ │ │ ├── CCarouselCaption.tsx │ │ │ │ ├── CCarouselContext.ts │ │ │ │ ├── CCarouselItem.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CCarousel.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CCarousel.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── close-button │ │ │ │ ├── CCloseButton.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CCloseButton.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CCloseButton.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── collapse │ │ │ │ ├── CCollapse.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CCollapse.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CCollapse.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── conditional-portal │ │ │ │ ├── CConditionalPortal.tsx │ │ │ │ └── index.ts │ │ │ ├── dropdown │ │ │ │ ├── CDropdown.tsx │ │ │ │ ├── CDropdownContext.ts │ │ │ │ ├── CDropdownDivider.tsx │ │ │ │ ├── CDropdownHeader.tsx │ │ │ │ ├── CDropdownItem.tsx │ │ │ │ ├── CDropdownItemPlain.tsx │ │ │ │ ├── CDropdownMenu.tsx │ │ │ │ ├── CDropdownToggle.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CDropdown.spec.tsx │ │ │ │ │ ├── CDropdownDivider.spec.tsx │ │ │ │ │ ├── CDropdownHeader.spec.tsx │ │ │ │ │ ├── CDropdownItem.spec.tsx │ │ │ │ │ ├── CDropdownItemPlain.spec.tsx │ │ │ │ │ ├── CDropdownMenu.spec.tsx │ │ │ │ │ ├── CDropdownToggle.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CDropdown.spec.tsx.snap │ │ │ │ │ │ ├── CDropdownDivider.spec.tsx.snap │ │ │ │ │ │ ├── CDropdownHeader.spec.tsx.snap │ │ │ │ │ │ ├── CDropdownItem.spec.tsx.snap │ │ │ │ │ │ ├── CDropdownItemPlain.spec.tsx.snap │ │ │ │ │ │ ├── CDropdownMenu.spec.tsx.snap │ │ │ │ │ │ └── CDropdownToggle.spec.tsx.snap │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── utils.ts │ │ │ ├── footer │ │ │ │ ├── CFooter.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CFooter.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CFooter.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── form │ │ │ │ ├── CForm.tsx │ │ │ │ ├── CFormCheck.tsx │ │ │ │ ├── CFormControlValidation.tsx │ │ │ │ ├── CFormControlWrapper.tsx │ │ │ │ ├── CFormFeedback.tsx │ │ │ │ ├── CFormFloating.tsx │ │ │ │ ├── CFormInput.tsx │ │ │ │ ├── CFormLabel.tsx │ │ │ │ ├── CFormRange.tsx │ │ │ │ ├── CFormSelect.tsx │ │ │ │ ├── CFormSwitch.tsx │ │ │ │ ├── CFormText.tsx │ │ │ │ ├── CFormTextarea.tsx │ │ │ │ ├── CInputGroup.tsx │ │ │ │ ├── CInputGroupText.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CForm.spec.tsx │ │ │ │ │ ├── CFormCheck.spec.tsx │ │ │ │ │ ├── CFormControl.spec.tsx │ │ │ │ │ ├── CFormFeedback.spec.tsx │ │ │ │ │ ├── CFormFloating.spec.tsx │ │ │ │ │ ├── CFormInput.spec.tsx │ │ │ │ │ ├── CFormLabel.spec.tsx │ │ │ │ │ ├── CFormRange.spec.tsx │ │ │ │ │ ├── CFormSelect.spec.tsx │ │ │ │ │ ├── CFormSwitch.spec.tsx │ │ │ │ │ ├── CFormText.spec.tsx │ │ │ │ │ ├── CFormTextarea.spec.tsx │ │ │ │ │ ├── CInputGroup.spec.tsx │ │ │ │ │ ├── CInputGroupText.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CForm.spec.tsx.snap │ │ │ │ │ │ ├── CFormCheck.spec.tsx.snap │ │ │ │ │ │ ├── CFormControl.spec.tsx.snap │ │ │ │ │ │ ├── CFormFeedback.spec.tsx.snap │ │ │ │ │ │ ├── CFormFloating.spec.tsx.snap │ │ │ │ │ │ ├── CFormInput.spec.tsx.snap │ │ │ │ │ │ ├── CFormLabel.spec.tsx.snap │ │ │ │ │ │ ├── CFormRange.spec.tsx.snap │ │ │ │ │ │ ├── CFormSelect.spec.tsx.snap │ │ │ │ │ │ ├── CFormSwitch.spec.tsx.snap │ │ │ │ │ │ ├── CFormText.spec.tsx.snap │ │ │ │ │ │ ├── CFormTextarea.spec.tsx.snap │ │ │ │ │ │ ├── CInputGroup.spec.tsx.snap │ │ │ │ │ │ └── CInputGroupText.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── grid │ │ │ │ ├── CCol.tsx │ │ │ │ ├── CContainer.tsx │ │ │ │ ├── CRow.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CCol.spec.tsx │ │ │ │ │ ├── CContainer.spec.tsx │ │ │ │ │ ├── CRow.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CCol.spec.tsx.snap │ │ │ │ │ │ ├── CContainer.spec.tsx.snap │ │ │ │ │ │ └── CRow.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── header │ │ │ │ ├── CHeader.tsx │ │ │ │ ├── CHeaderBrand.tsx │ │ │ │ ├── CHeaderDivider.tsx │ │ │ │ ├── CHeaderNav.tsx │ │ │ │ ├── CHeaderText.tsx │ │ │ │ ├── CHeaderToggler.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CHeader.spec.tsx │ │ │ │ │ ├── CHeaderBrand.spec.tsx │ │ │ │ │ ├── CHeaderDivider.spec.tsx │ │ │ │ │ ├── CHeaderNav.spec.tsx │ │ │ │ │ ├── CHeaderText.spec.tsx │ │ │ │ │ ├── CHeaderToggler.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CHeader.spec.tsx.snap │ │ │ │ │ │ ├── CHeaderBrand.spec.tsx.snap │ │ │ │ │ │ ├── CHeaderDivider.spec.tsx.snap │ │ │ │ │ │ ├── CHeaderNav.spec.tsx.snap │ │ │ │ │ │ ├── CHeaderText.spec.tsx.snap │ │ │ │ │ │ └── CHeaderToggler.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── image │ │ │ │ ├── CImage.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CImage.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CImage.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── link │ │ │ │ ├── CLink.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CLink.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CLink.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── list-group │ │ │ │ ├── CListGroup.tsx │ │ │ │ ├── CListGroupItem.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CListGroup.spec.tsx │ │ │ │ │ ├── CListGroupItem.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CListGroup.spec.tsx.snap │ │ │ │ │ │ └── CListGroupItem.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── modal │ │ │ │ ├── CModal.tsx │ │ │ │ ├── CModalBody.tsx │ │ │ │ ├── CModalContent.tsx │ │ │ │ ├── CModalContext.ts │ │ │ │ ├── CModalDialog.tsx │ │ │ │ ├── CModalFooter.tsx │ │ │ │ ├── CModalHeader.tsx │ │ │ │ ├── CModalTitle.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CModal.spec.tsx │ │ │ │ │ ├── CModalBody.spec.tsx │ │ │ │ │ ├── CModalContent.spec.tsx │ │ │ │ │ ├── CModalDialog.spec.tsx │ │ │ │ │ ├── CModalFooter.spec.tsx │ │ │ │ │ ├── CModalHeader.spec.tsx │ │ │ │ │ ├── CModalTitle.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CModal.spec.tsx.snap │ │ │ │ │ │ ├── CModalBody.spec.tsx.snap │ │ │ │ │ │ ├── CModalContent.spec.tsx.snap │ │ │ │ │ │ ├── CModalDialog.spec.tsx.snap │ │ │ │ │ │ ├── CModalFooter.spec.tsx.snap │ │ │ │ │ │ ├── CModalHeader.spec.tsx.snap │ │ │ │ │ │ └── CModalTitle.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── nav │ │ │ │ ├── CNav.tsx │ │ │ │ ├── CNavGroup.tsx │ │ │ │ ├── CNavGroupItems.tsx │ │ │ │ ├── CNavItem.tsx │ │ │ │ ├── CNavLink.tsx │ │ │ │ ├── CNavTitle.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CNav.spec.tsx │ │ │ │ │ ├── CNavGroup.spec.tsx │ │ │ │ │ ├── CNavGroupItems.spec.tsx │ │ │ │ │ ├── CNavItem.spec.tsx │ │ │ │ │ ├── CNavLink.spec.tsx │ │ │ │ │ ├── CNavTitle.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CNav.spec.tsx.snap │ │ │ │ │ │ ├── CNavGroup.spec.tsx.snap │ │ │ │ │ │ ├── CNavGroupItems.spec.tsx.snap │ │ │ │ │ │ ├── CNavItem.spec.tsx.snap │ │ │ │ │ │ ├── CNavLink.spec.tsx.snap │ │ │ │ │ │ └── CNavTitle.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── navbar │ │ │ │ ├── CNavbar.tsx │ │ │ │ ├── CNavbarBrand.tsx │ │ │ │ ├── CNavbarNav.tsx │ │ │ │ ├── CNavbarText.tsx │ │ │ │ ├── CNavbarToggler.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CNavbar.spec.tsx │ │ │ │ │ ├── CNavbarBrand.spec.tsx │ │ │ │ │ ├── CNavbarNav.spec.tsx │ │ │ │ │ ├── CNavbarText.spec.tsx │ │ │ │ │ ├── CNavbarToggler.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CNavbar.spec.tsx.snap │ │ │ │ │ │ ├── CNavbarBrand.spec.tsx.snap │ │ │ │ │ │ ├── CNavbarNav.spec.tsx.snap │ │ │ │ │ │ ├── CNavbarText.spec.tsx.snap │ │ │ │ │ │ └── CNavbarToggler.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── offcanvas │ │ │ │ ├── COffcanvas.tsx │ │ │ │ ├── COffcanvasBody.tsx │ │ │ │ ├── COffcanvasHeader.tsx │ │ │ │ ├── COffcanvasTitle.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── COffcanvas.spec.tsx │ │ │ │ │ ├── COffcanvasBody.spec.tsx │ │ │ │ │ ├── COffcanvasHeader.spec.tsx │ │ │ │ │ ├── COffcanvasTitle.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── COffcanvas.spec.tsx.snap │ │ │ │ │ │ ├── COffcanvasBody.spec.tsx.snap │ │ │ │ │ │ ├── COffcanvasHeader.spec.tsx.snap │ │ │ │ │ │ └── COffcanvasTitle.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── pagination │ │ │ │ ├── CPagination.tsx │ │ │ │ ├── CPaginationItem.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CPagination.spec.tsx │ │ │ │ │ ├── CPaginationItem.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CPagination.spec.tsx.snap │ │ │ │ │ │ └── CPaginationItem.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── placeholder │ │ │ │ ├── CPlaceholder.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CPlaceholder.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CPlaceholder.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── popover │ │ │ │ ├── CPopover.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CPopover.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CPopover.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── progress │ │ │ │ ├── CProgress.tsx │ │ │ │ ├── CProgressBar.tsx │ │ │ │ ├── CProgressStacked.tsx │ │ │ │ ├── CProgressStackedContext.ts │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CProgress.spec.tsx │ │ │ │ │ ├── CProgressBar.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CProgress.spec.tsx.snap │ │ │ │ │ │ └── CProgressBar.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── sidebar │ │ │ │ ├── CSidebar.tsx │ │ │ │ ├── CSidebarBrand.tsx │ │ │ │ ├── CSidebarFooter.tsx │ │ │ │ ├── CSidebarHeader.tsx │ │ │ │ ├── CSidebarNav.tsx │ │ │ │ ├── CSidebarNavContext.ts │ │ │ │ ├── CSidebarToggler.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CSidebar.spec.tsx │ │ │ │ │ ├── CSidebarBrand.spec.tsx │ │ │ │ │ ├── CSidebarFooter.spec.tsx │ │ │ │ │ ├── CSidebarHeader.spec.tsx │ │ │ │ │ ├── CSidebarNav.spec.tsx │ │ │ │ │ ├── CSidebarToggler.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CSidebar.spec.tsx.snap │ │ │ │ │ │ ├── CSidebarBrand.spec.tsx.snap │ │ │ │ │ │ ├── CSidebarFooter.spec.tsx.snap │ │ │ │ │ │ ├── CSidebarHeader.spec.tsx.snap │ │ │ │ │ │ ├── CSidebarNav.spec.tsx.snap │ │ │ │ │ │ └── CSidebarToggler.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── spinner │ │ │ │ ├── CSpinner.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CSpinner.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CSpinner.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── table │ │ │ │ ├── CTable.tsx │ │ │ │ ├── CTableBody.tsx │ │ │ │ ├── CTableCaption.tsx │ │ │ │ ├── CTableDataCell.tsx │ │ │ │ ├── CTableFoot.tsx │ │ │ │ ├── CTableHead.tsx │ │ │ │ ├── CTableHeaderCell.tsx │ │ │ │ ├── CTableResponsiveWrapper.tsx │ │ │ │ ├── CTableRow.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CTable.spec.tsx │ │ │ │ │ ├── CTableBody.spec.tsx │ │ │ │ │ ├── CTableCaption.spec.tsx │ │ │ │ │ ├── CTableDataCell.spec.tsx │ │ │ │ │ ├── CTableFoot.spec.tsx │ │ │ │ │ ├── CTableHead.spec.tsx │ │ │ │ │ ├── CTableHeaderCell.spec.tsx │ │ │ │ │ ├── CTableRow.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CTable.spec.tsx.snap │ │ │ │ │ │ ├── CTableBody.spec.tsx.snap │ │ │ │ │ │ ├── CTableCaption.spec.tsx.snap │ │ │ │ │ │ ├── CTableDataCell.spec.tsx.snap │ │ │ │ │ │ ├── CTableFoot.spec.tsx.snap │ │ │ │ │ │ ├── CTableHead.spec.tsx.snap │ │ │ │ │ │ ├── CTableHeaderCell.spec.tsx.snap │ │ │ │ │ │ └── CTableRow.spec.tsx.snap │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── utils.ts │ │ │ ├── tabs │ │ │ │ ├── CTab.tsx │ │ │ │ ├── CTabContent.tsx │ │ │ │ ├── CTabList.tsx │ │ │ │ ├── CTabPane.tsx │ │ │ │ ├── CTabPanel.tsx │ │ │ │ ├── CTabs.tsx │ │ │ │ ├── CTabsContext.ts │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CTabContent.spec.tsx │ │ │ │ │ ├── CTabPane.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CTabContent.spec.tsx.snap │ │ │ │ │ │ └── CTabPane.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── toast │ │ │ │ ├── CToast.tsx │ │ │ │ ├── CToastBody.tsx │ │ │ │ ├── CToastClose.tsx │ │ │ │ ├── CToastContext.ts │ │ │ │ ├── CToastHeader.tsx │ │ │ │ ├── CToaster.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CToast.spec.tsx │ │ │ │ │ ├── CToastBody.spec.tsx │ │ │ │ │ ├── CToastHeader.spec.tsx │ │ │ │ │ ├── CToaster.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ ├── CToast.spec.tsx.snap │ │ │ │ │ │ ├── CToastBody.spec.tsx.snap │ │ │ │ │ │ ├── CToastHeader.spec.tsx.snap │ │ │ │ │ │ └── CToaster.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ ├── tooltip │ │ │ │ ├── CTooltip.tsx │ │ │ │ ├── __tests__ │ │ │ │ │ ├── CTooltip.spec.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── CTooltip.spec.tsx.snap │ │ │ │ └── index.ts │ │ │ └── widgets │ │ │ │ ├── CWidgetStatsA.tsx │ │ │ │ ├── CWidgetStatsB.tsx │ │ │ │ ├── CWidgetStatsC.tsx │ │ │ │ ├── CWidgetStatsD.tsx │ │ │ │ ├── CWidgetStatsE.tsx │ │ │ │ ├── CWidgetStatsF.tsx │ │ │ │ ├── __tests__ │ │ │ │ ├── CWidgetStatsA.spec.tsx │ │ │ │ ├── CWidgetStatsB.spec.tsx │ │ │ │ ├── CWidgetStatsC.spec.tsx │ │ │ │ ├── CWidgetStatsD.spec.tsx │ │ │ │ ├── CWidgetStatsE.spec.tsx │ │ │ │ ├── CWidgetStatsF.spec.tsx │ │ │ │ └── __snapshots__ │ │ │ │ │ ├── CWidgetStatsA.spec.tsx.snap │ │ │ │ │ ├── CWidgetStatsB.spec.tsx.snap │ │ │ │ │ ├── CWidgetStatsC.spec.tsx.snap │ │ │ │ │ ├── CWidgetStatsD.spec.tsx.snap │ │ │ │ │ ├── CWidgetStatsE.spec.tsx.snap │ │ │ │ │ └── CWidgetStatsF.spec.tsx.snap │ │ │ │ └── index.ts │ │ ├── helpers │ │ │ ├── index.ts │ │ │ └── polymorphicComponent.ts │ │ ├── hooks │ │ │ ├── index.ts │ │ │ ├── useClipboard.ts │ │ │ ├── useColorModes.ts │ │ │ ├── useForkedRef.ts │ │ │ └── usePopper.ts │ │ ├── index.ts │ │ ├── props.ts │ │ ├── types.ts │ │ └── utils │ │ │ ├── executeAfterTransition.ts │ │ │ ├── getNextActiveElement.ts │ │ │ ├── getRTLPlacement.ts │ │ │ ├── getTransitionDurationFromElement.ts │ │ │ ├── index.ts │ │ │ ├── isInViewport.ts │ │ │ ├── isRTL.ts │ │ │ └── mergeClassNames.ts │ └── tsconfig.json ├── docs │ ├── build │ │ └── api.mjs │ ├── content │ │ ├── api │ │ │ ├── CAccordion.api.mdx │ │ │ ├── CAccordionBody.api.mdx │ │ │ ├── CAccordionButton.api.mdx │ │ │ ├── CAccordionHeader.api.mdx │ │ │ ├── CAccordionItem.api.mdx │ │ │ ├── CAlert.api.mdx │ │ │ ├── CAlertHeading.api.mdx │ │ │ ├── CAlertLink.api.mdx │ │ │ ├── CAvatar.api.mdx │ │ │ ├── CBackdrop.api.mdx │ │ │ ├── CBadge.api.mdx │ │ │ ├── CBreadcrumb.api.mdx │ │ │ ├── CBreadcrumbItem.api.mdx │ │ │ ├── CButton.api.mdx │ │ │ ├── CButtonGroup.api.mdx │ │ │ ├── CButtonToolbar.api.mdx │ │ │ ├── CCallout.api.mdx │ │ │ ├── CCard.api.mdx │ │ │ ├── CCardBody.api.mdx │ │ │ ├── CCardFooter.api.mdx │ │ │ ├── CCardGroup.api.mdx │ │ │ ├── CCardHeader.api.mdx │ │ │ ├── CCardImage.api.mdx │ │ │ ├── CCardImageOverlay.api.mdx │ │ │ ├── CCardLink.api.mdx │ │ │ ├── CCardSubtitle.api.mdx │ │ │ ├── CCardText.api.mdx │ │ │ ├── CCardTitle.api.mdx │ │ │ ├── CCarousel.api.mdx │ │ │ ├── CCarouselCaption.api.mdx │ │ │ ├── CCarouselItem.api.mdx │ │ │ ├── CChart.api.mdx │ │ │ ├── CCharts.api.mdx │ │ │ ├── CCloseButton.api.mdx │ │ │ ├── CCol.api.mdx │ │ │ ├── CCollapse.api.mdx │ │ │ ├── CConditionalPortal.api.mdx │ │ │ ├── CContainer.api.mdx │ │ │ ├── CDropdown.api.mdx │ │ │ ├── CDropdownDivider.api.mdx │ │ │ ├── CDropdownHeader.api.mdx │ │ │ ├── CDropdownItem.api.mdx │ │ │ ├── CDropdownItemPlain.api.mdx │ │ │ ├── CDropdownMenu.api.mdx │ │ │ ├── CDropdownToggle.api.mdx │ │ │ ├── CFooter.api.mdx │ │ │ ├── CForm.api.mdx │ │ │ ├── CFormCheck.api.mdx │ │ │ ├── CFormControlValidation.api.mdx │ │ │ ├── CFormControlWrapper.api.mdx │ │ │ ├── CFormFeedback.api.mdx │ │ │ ├── CFormFloating.api.mdx │ │ │ ├── CFormInput.api.mdx │ │ │ ├── CFormLabel.api.mdx │ │ │ ├── CFormRange.api.mdx │ │ │ ├── CFormSelect.api.mdx │ │ │ ├── CFormSwitch.api.mdx │ │ │ ├── CFormText.api.mdx │ │ │ ├── CFormTextarea.api.mdx │ │ │ ├── CHeader.api.mdx │ │ │ ├── CHeaderBrand.api.mdx │ │ │ ├── CHeaderDivider.api.mdx │ │ │ ├── CHeaderNav.api.mdx │ │ │ ├── CHeaderText.api.mdx │ │ │ ├── CHeaderToggler.api.mdx │ │ │ ├── CIcon.api.mdx │ │ │ ├── CIconSvg.api.mdx │ │ │ ├── CImage.api.mdx │ │ │ ├── CInputGroup.api.mdx │ │ │ ├── CInputGroupText.api.mdx │ │ │ ├── CLink.api.mdx │ │ │ ├── CListGroup.api.mdx │ │ │ ├── CListGroupItem.api.mdx │ │ │ ├── CModal.api.mdx │ │ │ ├── CModalBody.api.mdx │ │ │ ├── CModalContent.api.mdx │ │ │ ├── CModalDialog.api.mdx │ │ │ ├── CModalFooter.api.mdx │ │ │ ├── CModalHeader.api.mdx │ │ │ ├── CModalTitle.api.mdx │ │ │ ├── CNav.api.mdx │ │ │ ├── CNavGroup.api.mdx │ │ │ ├── CNavGroupItems.api.mdx │ │ │ ├── CNavItem.api.mdx │ │ │ ├── CNavLink.api.mdx │ │ │ ├── CNavTitle.api.mdx │ │ │ ├── CNavbar.api.mdx │ │ │ ├── CNavbarBrand.api.mdx │ │ │ ├── CNavbarNav.api.mdx │ │ │ ├── CNavbarText.api.mdx │ │ │ ├── CNavbarToggler.api.mdx │ │ │ ├── COffcanvas.api.mdx │ │ │ ├── COffcanvasBody.api.mdx │ │ │ ├── COffcanvasHeader.api.mdx │ │ │ ├── COffcanvasTitle.api.mdx │ │ │ ├── CPagination.api.mdx │ │ │ ├── CPaginationItem.api.mdx │ │ │ ├── CPlaceholder.api.mdx │ │ │ ├── CPopover.api.mdx │ │ │ ├── CProgress.api.mdx │ │ │ ├── CProgressBar.api.mdx │ │ │ ├── CProgressStacked.api.mdx │ │ │ ├── CRow.api.mdx │ │ │ ├── CSidebar.api.mdx │ │ │ ├── CSidebarBrand.api.mdx │ │ │ ├── CSidebarFooter.api.mdx │ │ │ ├── CSidebarHeader.api.mdx │ │ │ ├── CSidebarNav.api.mdx │ │ │ ├── CSidebarToggler.api.mdx │ │ │ ├── CSpinner.api.mdx │ │ │ ├── CTab.api.mdx │ │ │ ├── CTabContent.api.mdx │ │ │ ├── CTabList.api.mdx │ │ │ ├── CTabPane.api.mdx │ │ │ ├── CTabPanel.api.mdx │ │ │ ├── CTable.api.mdx │ │ │ ├── CTableBody.api.mdx │ │ │ ├── CTableCaption.api.mdx │ │ │ ├── CTableDataCell.api.mdx │ │ │ ├── CTableFoot.api.mdx │ │ │ ├── CTableHead.api.mdx │ │ │ ├── CTableHeaderCell.api.mdx │ │ │ ├── CTableResponsiveWrapper.api.mdx │ │ │ ├── CTableRow.api.mdx │ │ │ ├── CTabs.api.mdx │ │ │ ├── CToast.api.mdx │ │ │ ├── CToastBody.api.mdx │ │ │ ├── CToastClose.api.mdx │ │ │ ├── CToastHeader.api.mdx │ │ │ ├── CToaster.api.mdx │ │ │ ├── CTooltip.api.mdx │ │ │ ├── CWidgetStatsA.api.mdx │ │ │ ├── CWidgetStatsB.api.mdx │ │ │ ├── CWidgetStatsC.api.mdx │ │ │ ├── CWidgetStatsD.api.mdx │ │ │ ├── CWidgetStatsE.api.mdx │ │ │ └── CWidgetStatsF.api.mdx │ │ ├── components │ │ │ ├── accordion │ │ │ │ ├── accessibility.mdx │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── AccordionAlwaysOpenExample.tsx │ │ │ │ │ ├── AccordionExample.tsx │ │ │ │ │ └── AccordionFlushExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── alert │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── AlertAdditionalContentExample.tsx │ │ │ │ │ ├── AlertDismissingExample.tsx │ │ │ │ │ ├── AlertExample.tsx │ │ │ │ │ ├── AlertIcons1Example.tsx │ │ │ │ │ ├── AlertIcons2Example.tsx │ │ │ │ │ ├── AlertLinkColorExample.tsx │ │ │ │ │ ├── AlertLiveExample.tsx │ │ │ │ │ └── AlertSolidExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── avatar │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── AvatarIcon.tsx │ │ │ │ │ ├── AvatarImage.tsx │ │ │ │ │ ├── AvatarLetter.tsx │ │ │ │ │ ├── AvatarRounded.tsx │ │ │ │ │ ├── AvatarSizes.tsx │ │ │ │ │ ├── AvatarSquare.tsx │ │ │ │ │ └── AvatarWithStatus.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── badge │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── Badge2Example.tsx │ │ │ │ │ ├── Badge3Example.tsx │ │ │ │ │ ├── BadgeContextual2Variations.tsx │ │ │ │ │ ├── BadgeContextualVariations.tsx │ │ │ │ │ ├── BadgeExample.tsx │ │ │ │ │ ├── BadgePillExample.tsx │ │ │ │ │ ├── BadgePositioned2Example.tsx │ │ │ │ │ └── BadgePositionedExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── breadcrumb │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── BreadcrumbDividers2Example.jsx │ │ │ │ │ ├── BreadcrumbDividers2Example.tsx │ │ │ │ │ ├── BreadcrumbDividers3Example.jsx │ │ │ │ │ ├── BreadcrumbDividers3Example.tsx │ │ │ │ │ ├── BreadcrumbDividersExample.jsx │ │ │ │ │ ├── BreadcrumbDividersExample.tsx │ │ │ │ │ └── BreadcrumbExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── button-group │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── ButtonGroup2Example.tsx │ │ │ │ │ ├── ButtonGroupCheckboxAndRadio2Example.tsx │ │ │ │ │ ├── ButtonGroupCheckboxAndRadioExample.tsx │ │ │ │ │ ├── ButtonGroupExample.tsx │ │ │ │ │ ├── ButtonGroupMixedStylesExample.tsx │ │ │ │ │ ├── ButtonGroupNestingExample.tsx │ │ │ │ │ ├── ButtonGroupOutlinedStylesExample.tsx │ │ │ │ │ ├── ButtonGroupSizingExample.tsx │ │ │ │ │ ├── ButtonGroupVerticalExample.tsx │ │ │ │ │ ├── ButtonToolbar2Example.tsx │ │ │ │ │ └── ButtonToolbarExample.tsx │ │ │ │ └── index.mdx │ │ │ ├── button │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── ButtonBlock2Example.tsx │ │ │ │ │ ├── ButtonBlock3Example.tsx │ │ │ │ │ ├── ButtonBlock4Example.tsx │ │ │ │ │ ├── ButtonBlockExample.tsx │ │ │ │ │ ├── ButtonComponentsExample.tsx │ │ │ │ │ ├── ButtonDisabled2Example.tsx │ │ │ │ │ ├── ButtonDisabledExample.tsx │ │ │ │ │ ├── ButtonExample.tsx │ │ │ │ │ ├── ButtonGhostBaseClassExample.tsx │ │ │ │ │ ├── ButtonGhostExample.tsx │ │ │ │ │ ├── ButtonOutlineBaseClassExample.tsx │ │ │ │ │ ├── ButtonOutlineExample.tsx │ │ │ │ │ ├── ButtonShapePillExample.tsx │ │ │ │ │ ├── ButtonShapeSquareExample.tsx │ │ │ │ │ ├── ButtonSizes2Example.tsx │ │ │ │ │ ├── ButtonSizes3Example.jsx │ │ │ │ │ ├── ButtonSizes3Example.tsx │ │ │ │ │ └── ButtonSizesExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── callout │ │ │ │ ├── api.mdx │ │ │ │ ├── examples │ │ │ │ │ └── CalloutExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── card │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── CardBodyExample.tsx │ │ │ │ │ ├── CardExample.tsx │ │ │ │ │ ├── CardGrid2Example.tsx │ │ │ │ │ ├── CardGrid3Example.tsx │ │ │ │ │ ├── CardGrid4Example.tsx │ │ │ │ │ ├── CardGridExample.tsx │ │ │ │ │ ├── CardGroups2Example.tsx │ │ │ │ │ ├── CardGroupsExample.tsx │ │ │ │ │ ├── CardHeader2Example.tsx │ │ │ │ │ ├── CardHeader3Example.tsx │ │ │ │ │ ├── CardHeaderAndFooterExample.tsx │ │ │ │ │ ├── CardHeaderExample.tsx │ │ │ │ │ ├── CardImageCapsExample.tsx │ │ │ │ │ ├── CardImageHorizontalExample.tsx │ │ │ │ │ ├── CardImageOverlaysExample.tsx │ │ │ │ │ ├── CardImagesExample.tsx │ │ │ │ │ ├── CardKitchenSinkExample.tsx │ │ │ │ │ ├── CardListGroups2Example.tsx │ │ │ │ │ ├── CardListGroups3Example.tsx │ │ │ │ │ ├── CardListGroupsExample.tsx │ │ │ │ │ ├── CardNavigation2Example.tsx │ │ │ │ │ ├── CardNavigationExample.tsx │ │ │ │ │ ├── CardSizing2Example.tsx │ │ │ │ │ ├── CardSizing3Example.tsx │ │ │ │ │ ├── CardSizingExample.tsx │ │ │ │ │ ├── CardStylesBackgroundAndColorExample.tsx │ │ │ │ │ ├── CardStylesBorderExample.tsx │ │ │ │ │ ├── CardStylesTopBorderExample.tsx │ │ │ │ │ ├── CardTextAlignmentExample.tsx │ │ │ │ │ └── CardTitleExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── carousel │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── CarouselCrossfadeExample.tsx │ │ │ │ │ ├── CarouselDarkVariantExample.tsx │ │ │ │ │ ├── CarouselSlidesOnlyExample.tsx │ │ │ │ │ ├── CarouselWithCaptionsExample.tsx │ │ │ │ │ ├── CarouselWithControlsExample.tsx │ │ │ │ │ └── CarouselWithIndicatorsExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── chart │ │ │ │ ├── api.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── ChartBarExample.jsx │ │ │ │ │ ├── ChartBarExample.tsx │ │ │ │ │ ├── ChartBubbleExample.jsx │ │ │ │ │ ├── ChartBubbleExample.tsx │ │ │ │ │ ├── ChartDoughnutAndPieExample.jsx │ │ │ │ │ ├── ChartDoughnutAndPieExample.tsx │ │ │ │ │ ├── ChartLineExample.jsx │ │ │ │ │ ├── ChartLineExample.tsx │ │ │ │ │ ├── ChartPolarAreaExample.jsx │ │ │ │ │ ├── ChartPolarAreaExample.tsx │ │ │ │ │ ├── ChartRadarExample.jsx │ │ │ │ │ ├── ChartRadarExample.tsx │ │ │ │ │ ├── ChartScatterExample.jsx │ │ │ │ │ └── ChartScatterExample.tsx │ │ │ │ └── index.mdx │ │ │ ├── close-button │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── CloseButtonDarkExample.tsx │ │ │ │ │ ├── CloseButtonDisabledExample.tsx │ │ │ │ │ └── CloseButtonExample.tsx │ │ │ │ └── index.mdx │ │ │ ├── collapse │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── CollapseExample.tsx │ │ │ │ │ ├── CollapseHorizontalExample.tsx │ │ │ │ │ └── CollapseMultipleTargetsExample.tsx │ │ │ │ └── index.mdx │ │ │ ├── dropdown │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── DropdownCenteredExample.tsx │ │ │ │ │ ├── DropdownDark2Example.tsx │ │ │ │ │ ├── DropdownDarkExample.tsx │ │ │ │ │ ├── DropdownDropendExample.tsx │ │ │ │ │ ├── DropdownDropstartExample.tsx │ │ │ │ │ ├── DropdownDropupCenteredExample.tsx │ │ │ │ │ ├── DropdownDropupExample.tsx │ │ │ │ │ ├── DropdownMenuAlignmentExample.tsx │ │ │ │ │ ├── DropdownMenuContentDividersExample.tsx │ │ │ │ │ ├── DropdownMenuContentFormsExample.tsx │ │ │ │ │ ├── DropdownMenuContentHeadersExample.tsx │ │ │ │ │ ├── DropdownMenuContentTextExample.tsx │ │ │ │ │ ├── DropdownMenuItems2Example.tsx │ │ │ │ │ ├── DropdownMenuItemsActiveExample.tsx │ │ │ │ │ ├── DropdownMenuItemsDisabledExample.tsx │ │ │ │ │ ├── DropdownMenuItemsExample.tsx │ │ │ │ │ ├── DropdownResponsiveAlignment2Example.tsx │ │ │ │ │ ├── DropdownResponsiveAlignmentExample.tsx │ │ │ │ │ ├── DropdownSingleButton2Example.tsx │ │ │ │ │ ├── DropdownSingleButton3Example.tsx │ │ │ │ │ ├── DropdownSingleButtonExample.tsx │ │ │ │ │ ├── DropdownSizingLargeExample.tsx │ │ │ │ │ ├── DropdownSizingSmallExample.tsx │ │ │ │ │ └── DropdownSplitButtonExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── footer.mdx │ │ │ ├── header.mdx │ │ │ ├── icon.mdx │ │ │ ├── image │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── ImageAligning2Example.tsx │ │ │ │ │ ├── ImageAligning3Example.tsx │ │ │ │ │ ├── ImageAligningExample.tsx │ │ │ │ │ ├── ImageResponsiveExample.tsx │ │ │ │ │ └── ImageThumbnailExample.tsx │ │ │ │ └── index.mdx │ │ │ ├── list-group │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── ListGroupActiveItemsExample.tsx │ │ │ │ │ ├── ListGroupCheckboxesAndRadios2Example.tsx │ │ │ │ │ ├── ListGroupCheckboxesAndRadios3Example.tsx │ │ │ │ │ ├── ListGroupCheckboxesAndRadiosExample.tsx │ │ │ │ │ ├── ListGroupContextualClasses2Example.tsx │ │ │ │ │ ├── ListGroupContextualClassesExample.tsx │ │ │ │ │ ├── ListGroupCustomContentExample.tsx │ │ │ │ │ ├── ListGroupDisabledItemsExample.tsx │ │ │ │ │ ├── ListGroupExample.tsx │ │ │ │ │ ├── ListGroupFlushExample.tsx │ │ │ │ │ ├── ListGroupHorizontalExample.jsx │ │ │ │ │ ├── ListGroupHorizontalExample.tsx │ │ │ │ │ ├── ListGroupLinksAndButtons2Example.tsx │ │ │ │ │ ├── ListGroupLinksAndButtonsExample.tsx │ │ │ │ │ └── ListGroupWithBadgesExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── modal │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── ModalFullscreenExample.tsx │ │ │ │ │ ├── ModalLiveDemoExample.tsx │ │ │ │ │ ├── ModalOptionalSizesExample.tsx │ │ │ │ │ ├── ModalScrollingLongContent2Example.tsx │ │ │ │ │ ├── ModalScrollingLongContentExample.tsx │ │ │ │ │ ├── ModalStaticBackdropExample.tsx │ │ │ │ │ ├── ModalToggleBetweenModalsExample.tsx │ │ │ │ │ ├── ModalTooltipsAndPopoversExample.tsx │ │ │ │ │ ├── ModalVerticallyCenteredExample.tsx │ │ │ │ │ └── ModalVerticallyCenteredScrollableExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── navbar │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── NavbarBrand2Example.tsx │ │ │ │ │ ├── NavbarBrand3Example.tsx │ │ │ │ │ ├── NavbarBrandExample.tsx │ │ │ │ │ ├── NavbarColorSchemesExample.tsx │ │ │ │ │ ├── NavbarContainers2Example.tsx │ │ │ │ │ ├── NavbarContainersExample.tsx │ │ │ │ │ ├── NavbarExample.tsx │ │ │ │ │ ├── NavbarForms2Example.tsx │ │ │ │ │ ├── NavbarForms3Example.tsx │ │ │ │ │ ├── NavbarForms4Example.tsx │ │ │ │ │ ├── NavbarFormsExample.tsx │ │ │ │ │ ├── NavbarNav2Example.tsx │ │ │ │ │ ├── NavbarNav3Example.tsx │ │ │ │ │ ├── NavbarNavExample.tsx │ │ │ │ │ ├── NavbarPlacementExample.tsx │ │ │ │ │ ├── NavbarPlacementFixedBottomExample.tsx │ │ │ │ │ ├── NavbarPlacementFixedTopExample.tsx │ │ │ │ │ ├── NavbarPlacementStickyTopExample.tsx │ │ │ │ │ ├── NavbarResponsiveExternalContentExample.tsx │ │ │ │ │ ├── NavbarResponsiveOffcanvas2Example.tsx │ │ │ │ │ ├── NavbarResponsiveOffcanvasExample.tsx │ │ │ │ │ ├── NavbarResponsiveToggler2Example.tsx │ │ │ │ │ ├── NavbarResponsiveToggler3Example.tsx │ │ │ │ │ ├── NavbarResponsiveTogglerExample.tsx │ │ │ │ │ └── NavbarText.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── navs-tabs │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── Nav2Example.tsx │ │ │ │ │ ├── NavEnclosedExample.tsx │ │ │ │ │ ├── NavEnclosedPillsExample.tsx │ │ │ │ │ ├── NavExample.tsx │ │ │ │ │ ├── NavFillAndJustify2Example.tsx │ │ │ │ │ ├── NavFillAndJustifyExample.tsx │ │ │ │ │ ├── NavHorizontalAlignment2Example.tsx │ │ │ │ │ ├── NavHorizontalAlignmentExample.tsx │ │ │ │ │ ├── NavPillsExample.tsx │ │ │ │ │ ├── NavPillsWithDropdownExample.tsx │ │ │ │ │ ├── NavTabPanes2Example.tsx │ │ │ │ │ ├── NavTabPanesExample.tsx │ │ │ │ │ ├── NavTabsExample.tsx │ │ │ │ │ ├── NavTabsWithDropdownExample.tsx │ │ │ │ │ ├── NavUnderlineBorderExample.tsx │ │ │ │ │ ├── NavUnderlineExample.tsx │ │ │ │ │ ├── NavVerticalExample.tsx │ │ │ │ │ └── NavWorkingWithFlexUtilitiesExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── offcanvas │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── OffcanvasBodyScrollingAndBackdropExample.tsx │ │ │ │ │ ├── OffcanvasBodyScrollingExample.tsx │ │ │ │ │ ├── OffcanvasDarkExample.tsx │ │ │ │ │ ├── OffcanvasExample.tsx │ │ │ │ │ ├── OffcanvasLiveExample.tsx │ │ │ │ │ ├── OffcanvasPlacementBottomExample.tsx │ │ │ │ │ ├── OffcanvasPlacementRightExample.tsx │ │ │ │ │ ├── OffcanvasPlacementTopExample.tsx │ │ │ │ │ ├── OffcanvasResponsiveExample.tsx │ │ │ │ │ └── OffcanvasStaticBackdropExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── pagination │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── PaginationAlignment2Example.tsx │ │ │ │ │ ├── PaginationAlignmentExample.tsx │ │ │ │ │ ├── PaginationDisabledAndActiveExample.tsx │ │ │ │ │ ├── PaginationExample.tsx │ │ │ │ │ ├── PaginationSizingLargeExample.tsx │ │ │ │ │ ├── PaginationSizingSmallExample.tsx │ │ │ │ │ └── PaginationWorkingWithIconsExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── placeholder │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── Placeholder2Example.tsx │ │ │ │ │ ├── PlaceholderAnimationExample.tsx │ │ │ │ │ ├── PlaceholderColorExample.tsx │ │ │ │ │ ├── PlaceholderExample.tsx │ │ │ │ │ ├── PlaceholderSizingExample.tsx │ │ │ │ │ └── PlaceholderWidthExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── popover │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── PopoverCustomPopoversExample.jsx │ │ │ │ │ ├── PopoverCustomPopoversExample.tsx │ │ │ │ │ ├── PopoverDisabledElementsExample.tsx │ │ │ │ │ ├── PopoverDismissExample.tsx │ │ │ │ │ ├── PopoverFourDirectionsExample.tsx │ │ │ │ │ └── PopoverLiveExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── progress │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── ProgressAnimatedStripedExample.tsx │ │ │ │ │ ├── ProgressBackgrounds2Example.tsx │ │ │ │ │ ├── ProgressBackgroundsExample.tsx │ │ │ │ │ ├── ProgressExample.tsx │ │ │ │ │ ├── ProgressHeight2Example.tsx │ │ │ │ │ ├── ProgressHeightExample.tsx │ │ │ │ │ ├── ProgressLabels2Example.tsx │ │ │ │ │ ├── ProgressLabelsExample.tsx │ │ │ │ │ ├── ProgressMultipleBarsExample.tsx │ │ │ │ │ └── ProgressStripedExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── sidebar │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── SidebarDarkExample.tsx │ │ │ │ │ ├── SidebarExample.tsx │ │ │ │ │ ├── SidebarNarrowExample.tsx │ │ │ │ │ └── SidebarUnfoldableExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── spinner │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── SpinnerBorderColorsExample.tsx │ │ │ │ │ ├── SpinnerBorderExample.tsx │ │ │ │ │ ├── SpinnerBorderMarginExample.tsx │ │ │ │ │ ├── SpinnerBorderPlacementFlex2Example.tsx │ │ │ │ │ ├── SpinnerBorderPlacementFlexExample.tsx │ │ │ │ │ ├── SpinnerBorderPlacementFloatsExample.tsx │ │ │ │ │ ├── SpinnerBorderPlacementTextAlignExample.tsx │ │ │ │ │ ├── SpinnerButtons2Example.tsx │ │ │ │ │ ├── SpinnerButtonsExample.tsx │ │ │ │ │ ├── SpinnerGrowColorsExample.tsx │ │ │ │ │ ├── SpinnerGrowExample.tsx │ │ │ │ │ ├── SpinnerSizeCustomExample.tsx │ │ │ │ │ └── SpinnerSizeSmallExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── table │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── TableExample.tsx │ │ │ │ │ └── TableVariantsExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── tabs │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── TabsControlledExample.jsx │ │ │ │ │ ├── TabsControlledExample.tsx │ │ │ │ │ ├── TabsEnclosedExample.tsx │ │ │ │ │ ├── TabsEnclosedPillsExample.tsx │ │ │ │ │ ├── TabsExample.tsx │ │ │ │ │ ├── TabsPillsExample.tsx │ │ │ │ │ ├── TabsUnderlineBorderExample.tsx │ │ │ │ │ ├── TabsUnderlineExample.tsx │ │ │ │ │ ├── TabsUnstyledExample.tsx │ │ │ │ │ ├── TabsUnstyledFillAndJustify2Example.tsx │ │ │ │ │ └── TabsUnstyledFillAndJustifyExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── toast │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── ToastColorSchemesExample.tsx │ │ │ │ │ ├── ToastCustomContent2Example.tsx │ │ │ │ │ ├── ToastCustomContentExample.tsx │ │ │ │ │ ├── ToastExample.tsx │ │ │ │ │ ├── ToastLiveExample.jsx │ │ │ │ │ ├── ToastLiveExample.tsx │ │ │ │ │ ├── ToastStackingExample.tsx │ │ │ │ │ └── ToastTranslucentExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── tooltip │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── TooltipCustomExample.jsx │ │ │ │ │ ├── TooltipCustomExample.tsx │ │ │ │ │ ├── TooltipDirectionsExample.tsx │ │ │ │ │ ├── TooltipDisabledElementsExample.tsx │ │ │ │ │ └── TooltipOnLinksExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ └── widgets │ │ │ │ ├── api.mdx │ │ │ │ ├── examples │ │ │ │ ├── WidgetStatsAExample.tsx │ │ │ │ ├── WidgetStatsBExample.tsx │ │ │ │ ├── WidgetStatsCExample.tsx │ │ │ │ ├── WidgetStatsDExample.jsx │ │ │ │ ├── WidgetStatsDExample.tsx │ │ │ │ ├── WidgetStatsEExample.tsx │ │ │ │ └── WidgetStatsFExample.tsx │ │ │ │ └── index.mdx │ │ ├── customize │ │ │ ├── css-variables.mdx │ │ │ ├── options.mdx │ │ │ └── sass.mdx │ │ ├── forms │ │ │ ├── checkbox │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── CheckboxDisabledExample.tsx │ │ │ │ │ ├── CheckboxExample.tsx │ │ │ │ │ ├── CheckboxIndeterminateExample.tsx │ │ │ │ │ ├── CheckboxInlineExample.tsx │ │ │ │ │ ├── CheckboxReverseExample.tsx │ │ │ │ │ ├── CheckboxStackedExample.tsx │ │ │ │ │ ├── CheckboxToggleButtonsExample.tsx │ │ │ │ │ ├── CheckboxToggleButtonsOutlinedStylesExample.tsx │ │ │ │ │ └── CheckboxWithoutLabelsExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── checks-radios.mdx │ │ │ ├── floating-labels │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── FloatingLabels2Example.tsx │ │ │ │ │ ├── FloatingLabelsExample.tsx │ │ │ │ │ ├── FloatingLabelsLayoutExample.tsx │ │ │ │ │ ├── FloatingLabelsSelectExample.tsx │ │ │ │ │ ├── FloatingLabelsTextarea2Example.tsx │ │ │ │ │ ├── FloatingLabelsTextareaExample.tsx │ │ │ │ │ └── FloatingLabelsValidationExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── form-control.mdx │ │ │ ├── input-group │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── InputGroupButtonAddonsExample.tsx │ │ │ │ │ ├── InputGroupButtonsWithDropdownsExample.tsx │ │ │ │ │ ├── InputGroupCheckboxesAndRadiosExample.tsx │ │ │ │ │ ├── InputGroupCustomFileInputExample.tsx │ │ │ │ │ ├── InputGroupCustomSelectExample.tsx │ │ │ │ │ ├── InputGroupExample.tsx │ │ │ │ │ ├── InputGroupMultipleAddonsExample.tsx │ │ │ │ │ ├── InputGroupMultipleInputsExample.tsx │ │ │ │ │ ├── InputGroupSegmentedButtonsExample.tsx │ │ │ │ │ ├── InputGroupSizingExample.tsx │ │ │ │ │ └── InputGroupWrappingExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── input-mask │ │ │ │ ├── examples │ │ │ │ │ ├── InputMaskCreditCardExample.tsx │ │ │ │ │ ├── InputMaskExample.tsx │ │ │ │ │ └── InputMaskPhoneExample.tsx │ │ │ │ └── index.mdx │ │ │ ├── input │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── FormInputColorExample.tsx │ │ │ │ │ ├── FormInputCustomClassNamesExample.tsx │ │ │ │ │ ├── FormInputDisabledExample.tsx │ │ │ │ │ ├── FormInputExample.tsx │ │ │ │ │ ├── FormInputFileExample.tsx │ │ │ │ │ ├── FormInputReadonlyExample.tsx │ │ │ │ │ ├── FormInputReadonlyPlainText2Example.tsx │ │ │ │ │ ├── FormInputReadonlyPlainTextExample.tsx │ │ │ │ │ └── FormInputSizingExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── layout │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── LayoutAutoSizing2Example.tsx │ │ │ │ │ ├── LayoutAutoSizingExample.tsx │ │ │ │ │ ├── LayoutColumnSizingExample.tsx │ │ │ │ │ ├── LayoutFormGridExample.tsx │ │ │ │ │ ├── LayoutGutters2Example.tsx │ │ │ │ │ ├── LayoutGuttersExample.tsx │ │ │ │ │ ├── LayoutHorizontalFormExample.tsx │ │ │ │ │ ├── LayoutHorizontalFormLabelSizingExample.tsx │ │ │ │ │ └── LayoutInlineFormsExample.tsx │ │ │ │ └── index.mdx │ │ │ ├── overview.mdx │ │ │ ├── radio │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── RadioDisabledExample.tsx │ │ │ │ │ ├── RadioExample.tsx │ │ │ │ │ ├── RadioInlineExample.tsx │ │ │ │ │ ├── RadioReverseExample.tsx │ │ │ │ │ ├── RadioStackedExample.tsx │ │ │ │ │ ├── RadioToggleButtonsExample.tsx │ │ │ │ │ ├── RadioToggleButtonsOutlinedStylesExample.tsx │ │ │ │ │ └── RadioWithoutLabelsExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── range │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── FormRangeDisabledExample.tsx │ │ │ │ │ ├── FormRangeExample.tsx │ │ │ │ │ ├── FormRangeMinAndMaxExample.tsx │ │ │ │ │ └── FormRangeStepsExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── select │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── FormSelectDisabledExample.tsx │ │ │ │ │ ├── FormSelectExample.tsx │ │ │ │ │ ├── FormSelectSizing2Example.tsx │ │ │ │ │ ├── FormSelectSizing3Example.tsx │ │ │ │ │ └── FormSelectSizingExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── switch │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── FormSwitchExample.tsx │ │ │ │ │ ├── FormSwitchReverseExample.tsx │ │ │ │ │ └── FormSwitchSizingExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ ├── textarea │ │ │ │ ├── api.mdx │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ │ ├── FormTextareaDisabledExample.tsx │ │ │ │ │ ├── FormTextareaExample.tsx │ │ │ │ │ └── FormTextareaReadonlyExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ │ └── validation │ │ │ │ ├── bootstrap.mdx │ │ │ │ ├── examples │ │ │ │ ├── ValidationBrowserDefaultsExample.tsx │ │ │ │ ├── ValidationCustomExample.tsx │ │ │ │ ├── ValidationExample.jsx │ │ │ │ ├── ValidationExample.tsx │ │ │ │ ├── ValidationSupportedElementsExample.tsx │ │ │ │ ├── ValidationTooltipsExample.jsx │ │ │ │ └── ValidationTooltipsExample.tsx │ │ │ │ ├── index.mdx │ │ │ │ └── styling.mdx │ │ ├── getting-started │ │ │ ├── accessibility.mdx │ │ │ └── introduction.mdx │ │ ├── layout │ │ │ ├── breakpoints.mdx │ │ │ ├── columns.mdx │ │ │ ├── containers.mdx │ │ │ ├── grid.mdx │ │ │ └── gutters.mdx │ │ ├── migration │ │ │ ├── v4.mdx │ │ │ └── v5.mdx │ │ └── templates │ │ │ ├── admin-dashboard.mdx │ │ │ ├── contents.mdx │ │ │ ├── customize.mdx │ │ │ ├── download.mdx │ │ │ └── installation.mdx │ ├── gatsby-browser.tsx │ ├── gatsby-config.mjs │ ├── gatsby-node.mjs │ ├── gatsby-ssr.tsx │ ├── package.json │ ├── src │ │ ├── AppContext.tsx │ │ ├── assets │ │ │ ├── coreui-react.svg │ │ │ └── images │ │ │ │ ├── brand │ │ │ │ └── icon.png │ │ │ │ ├── hex_bootstrap.png │ │ │ │ └── hex_react.png │ │ ├── components │ │ │ ├── Ads.tsx │ │ │ ├── Banner.tsx │ │ │ ├── Callout.tsx │ │ │ ├── ClassNamesDocs.tsx │ │ │ ├── CodeBlock.tsx │ │ │ ├── ComponentSubNav.tsx │ │ │ ├── Example.tsx │ │ │ ├── ExampleSnippet.tsx │ │ │ ├── ExampleSnippetLazy.tsx │ │ │ ├── Footer.tsx │ │ │ ├── Header.tsx │ │ │ ├── JSXDocs.tsx │ │ │ ├── ScssDocs.tsx │ │ │ ├── Seo.tsx │ │ │ ├── Sidebar.tsx │ │ │ ├── SidebarNav.tsx │ │ │ ├── Toc.tsx │ │ │ └── index.ts │ │ ├── data │ │ │ └── other_frameworks.json │ │ ├── hooks │ │ │ └── useStickyObserver.ts │ │ ├── images │ │ │ ├── gatsby-astronaut.png │ │ │ └── gatsby-icon.png │ │ ├── index.ts │ │ ├── nav.tsx │ │ ├── pages │ │ │ └── 404.tsx │ │ ├── styles │ │ │ ├── _ads.scss │ │ │ ├── _anchor.scss │ │ │ ├── _callouts.scss │ │ │ ├── _component-examples.scss │ │ │ ├── _component-sub-nav.scss │ │ │ ├── _footer.scss │ │ │ ├── _layout.scss │ │ │ ├── _prism.scss │ │ │ ├── _root.scss │ │ │ ├── _scrolling.scss │ │ │ ├── _sidebar.scss │ │ │ ├── _table-api.scss │ │ │ ├── _toc.scss │ │ │ ├── _variables.scss │ │ │ ├── bootstrap-examples.scss │ │ │ ├── search.scss │ │ │ └── styles.scss │ │ ├── templates │ │ │ ├── DefaultLayout.tsx │ │ │ ├── DocsLayout.tsx │ │ │ └── MdxLayout.tsx │ │ └── utils │ │ │ ├── codesandbox.ts │ │ │ ├── projectUtils.ts │ │ │ └── stackblitz.ts │ └── static │ │ ├── images │ │ ├── angular.jpg │ │ ├── avatars │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ ├── 7.jpg │ │ │ ├── 8.jpg │ │ │ └── 9.jpg │ │ ├── brand │ │ │ └── coreui-signet.svg │ │ ├── react.jpg │ │ ├── react400.jpg │ │ └── vue.jpg │ │ └── index.html ├── gatsby-remark-import-markdown │ ├── index.js │ └── package.json ├── gatsby-remark-jsx-preview │ ├── index.js │ └── package.json └── remark-code-tabs │ ├── index.js │ └── package.json ├── prettier.config.mjs └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = false 12 | insert_final_newline = false -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Enforce Unix newlines 2 | * text=auto eol=lf 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: "https://coreui.io/pricing/?support=true" 4 | open_collective: coreui 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for a new feature in CoreUI. 4 | title: '' 5 | labels: feature 6 | assignees: '' 7 | 8 | --- 9 | 10 | Before opening: 11 | 12 | - [Search for duplicate or closed issues](https://github.com/coreui/coreui-react/issues?utf8=%E2%9C%93&q=is%3Aissue) 13 | - Read the [contributing guidelines](https://github.com/coreui/coreui-react/blob/main/.github/CONTRIBUTING.md) 14 | 15 | Feature requests must include: 16 | 17 | - As much detail as possible for what we should add and why it's important to Bootstrap 18 | - Relevant links to prior art, screenshots, or live demos whenever possible 19 | -------------------------------------------------------------------------------- /.github/SUPPORT.md: -------------------------------------------------------------------------------- 1 | ### Bug reports 2 | 3 | See the [contributing guidelines](CONTRIBUTING.md) for sharing bug reports. 4 | 5 | ### How-to 6 | 7 | For general troubleshooting or help getting started: 8 | 9 | - Join [GitHub Discussions](https://github.com/coreui/coreui-react/discussions/). 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | coverage/ 3 | dist/ 4 | node_modules/ 5 | public/ 6 | yarn.lock 7 | 8 | # IDEs and editors 9 | .idea/ 10 | 11 | # Visual Studio Code 12 | .vscode/* 13 | !.vscode/settings.json 14 | !.vscode/tasks.json 15 | !.vscode/launch.json 16 | !.vscode/extensions.json 17 | .history/* 18 | 19 | # System files 20 | .DS_Store 21 | Thumbs.db 22 | 23 | # Numerous always-ignore extensions 24 | *.diff 25 | *.err 26 | *.log 27 | *.orig 28 | *.rej 29 | *.swo 30 | *.swp 31 | *.vi 32 | *.zip 33 | *~ -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "packages/coreui-react-chartjs"] 2 | path = packages/coreui-react-chartjs 3 | url = https://github.com/coreui/coreui-react-chartjs.git 4 | branch = main 5 | [submodule "packages/coreui-icons-react"] 6 | path = packages/coreui-icons-react 7 | url = https://github.com/coreui/coreui-icons-react.git 8 | branch = main 9 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode" 3 | } -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "packages": ["packages/*"], 4 | "version": "5.7.0", 5 | "$schema": "node_modules/lerna/schemas/lerna-schema.json" 6 | } 7 | -------------------------------------------------------------------------------- /packages/coreui-react/jest.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | 'use strict' 9 | 10 | module.exports = { 11 | preset: 'ts-jest', 12 | testEnvironment: 'jsdom', 13 | testPathIgnorePatterns: ['dist/'], 14 | } 15 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/accordion/CAccordionContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react' 2 | 3 | export interface CAccordionContextProps { 4 | _activeItemKey?: number | string 5 | alwaysOpen?: boolean 6 | setActiveKey: React.Dispatch> 7 | } 8 | 9 | export const CAccordionContext = createContext({} as CAccordionContextProps) 10 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/accordion/CAccordionItemContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react' 2 | 3 | export interface CAccordionItemContextProps { 4 | id: string 5 | setVisible: (a: boolean) => void 6 | visible?: boolean 7 | } 8 | 9 | export const CAccordionItemContext = createContext({} as CAccordionItemContextProps) 10 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/accordion/__tests__/CAccordionBody.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from '@testing-library/react' 3 | import '@testing-library/jest-dom' 4 | import { CAccordionBody } from '../index' 5 | 6 | test('loads and displays CAccordionBody component', async () => { 7 | const { container } = render(Test) 8 | expect(container).toMatchSnapshot() 9 | }) 10 | 11 | test('CAccordionBody customize', async () => { 12 | const { container } = render(Test) 13 | expect(container.firstChild?.firstChild).toHaveClass('accordion-body') 14 | expect(container).toMatchSnapshot() 15 | }) 16 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordion.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CAccordion customize 1`] = ` 4 |
5 |
8 | Test 9 |
10 |
11 | `; 12 | 13 | exports[`loads and displays CAccordion component 1`] = ` 14 |
15 |
18 | Test 19 |
20 |
21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionBody.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CAccordionBody customize 1`] = ` 4 |
5 |
8 |
11 | Test 12 |
13 |
14 |
15 | `; 16 | 17 | exports[`loads and displays CAccordionBody component 1`] = ` 18 |
19 |
22 |
25 | Test 26 |
27 |
28 |
29 | `; 30 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CAccordionButton customize 1`] = ` 4 |
5 | 11 |
12 | `; 13 | 14 | exports[`loads and displays CAccordionButton component 1`] = ` 15 |
16 | 22 |
23 | `; 24 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/accordion/__tests__/__snapshots__/CAccordionItem.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CAccordionItem customize 1`] = ` 4 |
5 |
8 | Test 9 |
10 |
11 | `; 12 | 13 | exports[`loads and displays CAccordionItem component 1`] = ` 14 |
15 |
18 | Test 19 |
20 |
21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/accordion/index.ts: -------------------------------------------------------------------------------- 1 | import { CAccordion } from './CAccordion' 2 | import { CAccordionBody } from './CAccordionBody' 3 | import { CAccordionButton } from './CAccordionButton' 4 | import { CAccordionHeader } from './CAccordionHeader' 5 | import { CAccordionItem } from './CAccordionItem' 6 | 7 | export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem } 8 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CAlert customize 1`] = ` 4 |
5 | 16 |
17 | `; 18 | 19 | exports[`loads and displays CAlert component 1`] = ` 20 |
21 | 27 |
28 | `; 29 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertHeading.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CAlertHeading customize 1`] = ` 4 |
5 |

8 | Test 9 |

10 |
11 | `; 12 | 13 | exports[`loads and displays CAlertHeading component 1`] = ` 14 |
15 |

18 | Test 19 |

20 |
21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/alert/__tests__/__snapshots__/CAlertLink.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CAlertLink customize 1`] = ` 4 |
5 | 9 | Test 10 | 11 |
12 | `; 13 | 14 | exports[`loads and displays CAlertLink component 1`] = ` 15 |
16 | 19 | Test 20 | 21 |
22 | `; 23 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/alert/index.ts: -------------------------------------------------------------------------------- 1 | import { CAlert } from './CAlert' 2 | import { CAlertHeading } from './CAlertHeading' 3 | import { CAlertLink } from './CAlertLink' 4 | 5 | export { CAlert, CAlertHeading, CAlertLink } 6 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/avatar/index.ts: -------------------------------------------------------------------------------- 1 | import { CAvatar } from './CAvatar' 2 | 3 | export { CAvatar } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CBackdrop customize 1`] = ` 4 |
5 |
8 | Test 9 |
10 |
11 | `; 12 | 13 | exports[`CBackdrop customize 2 1`] = ` 14 |
15 |
18 | Test 19 |
20 |
21 | `; 22 | 23 | exports[`loads and displays CBackdrop component 1`] = `
`; 24 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/backdrop/index.ts: -------------------------------------------------------------------------------- 1 | import { CBackdrop } from './CBackdrop' 2 | 3 | export { CBackdrop } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CBadge customize 1`] = ` 4 |
5 |
8 | Test 9 |
10 |
11 | `; 12 | 13 | exports[`loads and displays CBadge component 1`] = ` 14 |
15 | 18 | Test 19 | 20 |
21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/badge/index.ts: -------------------------------------------------------------------------------- 1 | import { CBadge } from './CBadge' 2 | 3 | export { CBadge } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CBreadcrumbItem customize 1`] = ` 4 |
5 |
  • 9 | Test 10 |
    • 11 |
    12 | `; 13 | 14 | exports[`loads and displays CBreadcrumbItem component 1`] = ` 15 |
    16 |
  • 19 | Test 20 |
    • 21 |
    22 | `; 23 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import { CBreadcrumb } from './CBreadcrumb' 2 | import { CBreadcrumbItem } from './CBreadcrumbItem' 3 | 4 | export { CBreadcrumb, CBreadcrumbItem } 5 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/button-group/index.ts: -------------------------------------------------------------------------------- 1 | import { CButtonToolbar } from './CButtonToolbar' 2 | import { CButtonGroup } from './CButtonGroup' 3 | 4 | export { CButtonToolbar, CButtonGroup } 5 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/button/index.ts: -------------------------------------------------------------------------------- 1 | import { CButton } from './CButton' 2 | 3 | export { CButton } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/callout/__tests__/__snapshots__/CCallout.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCallout customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCallout component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/callout/index.ts: -------------------------------------------------------------------------------- 1 | import { CCallout } from './CCallout' 2 | 3 | export { CCallout } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCard.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCard customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCard component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardBody.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCardBody customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCardBody component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardFooter.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCardFooter customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCardFooter component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardHeader.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCardHeader customize 1`] = ` 4 |
    5 |

    8 | Test 9 |

    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCardHeader component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImage.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCardImage customize 1`] = ` 4 |
    5 |
    8 |
    9 | `; 10 | 11 | exports[`loads and displays CCardImage component 1`] = ` 12 |
    13 | 16 |
    17 | `; 18 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCardImageOverlay customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCardImageOverlay component 1`] = ` 14 |
    15 |
    18 |
    19 | `; 20 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardLink.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCardLink customize 1`] = ` 4 |
    5 | 9 | Test 10 | 11 |
    12 | `; 13 | 14 | exports[`loads and displays CCardLink component 1`] = ` 15 |
    16 | 19 | Test 20 | 21 |
    22 | `; 23 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCardSubtitle customize 1`] = ` 4 |
    5 |

    8 | Test 9 |

    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCardSubtitle component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardText.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCardText customize 1`] = ` 4 |
    5 |

    8 | Test 9 |

    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCardText component 1`] = ` 14 |
    15 |

    18 | Test 19 |

    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/card/__tests__/__snapshots__/CCardTitle.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCardTitle customize 1`] = ` 4 |
    5 |

    8 | Test 9 |

    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCardTitle component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/carousel/CCarouselContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react' 2 | 3 | export interface CCarouselContextProps { 4 | setAnimating: (a: boolean) => void 5 | setCustomInterval: (a: boolean | number) => void 6 | } 7 | 8 | export const CCarouselContext = createContext({} as CCarouselContextProps) -------------------------------------------------------------------------------- /packages/coreui-react/src/components/carousel/index.ts: -------------------------------------------------------------------------------- 1 | import { CCarousel } from './CCarousel' 2 | import { CCarouselCaption } from './CCarouselCaption' 3 | import { CCarouselItem } from './CCarouselItem' 4 | 5 | export { CCarousel, CCarouselCaption, CCarouselItem } 6 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCloseButton customize 1`] = ` 4 |
    5 |
    12 | `; 13 | 14 | exports[`loads and displays CCloseButton component 1`] = ` 15 |
    16 |
    22 | `; 23 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/close-button/index.ts: -------------------------------------------------------------------------------- 1 | import { CCloseButton } from './CCloseButton' 2 | 3 | export { CCloseButton } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCollapse customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CCollapse component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import { CCollapse } from './CCollapse' 2 | 3 | export { CCollapse } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/conditional-portal/index.ts: -------------------------------------------------------------------------------- 1 | import { CConditionalPortal } from './CConditionalPortal' 2 | 3 | export { CConditionalPortal } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownDivider.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CDropdownDivider customize 1`] = ` 4 |
    5 |
    8 |
    9 | `; 10 | 11 | exports[`loads and displays CDropdownDivider component 1`] = ` 12 |
    13 |
    16 |
    17 | `; 18 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownHeader.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CDropdownHeader customize 1`] = ` 4 |
    5 |

    8 | Test 9 |

    10 |
    11 | `; 12 | 13 | exports[`loads and displays CDropdownHeader component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItem.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CDropdownItem customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CDropdownItem component 1`] = ` 14 |
    15 | 18 | Test 19 | 20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownItemPlain.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CDropdownItemPlain customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CDropdownItemPlain component 1`] = ` 14 |
    15 | 18 | Test 19 | 20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CDropdownMenu customize 1`] = ` 4 |
    5 |
    8 | 14 |
    15 |
    16 | `; 17 | 18 | exports[`loads and displays CDropdownMenu component 1`] = ` 19 |
    20 |
    26 | `; 27 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | import { CDropdown } from './CDropdown' 2 | import { CDropdownDivider } from './CDropdownDivider' 3 | import { CDropdownHeader } from './CDropdownHeader' 4 | import { CDropdownItem } from './CDropdownItem' 5 | import { CDropdownItemPlain } from './CDropdownItemPlain' 6 | import { CDropdownMenu } from './CDropdownMenu' 7 | import { CDropdownToggle } from './CDropdownToggle' 8 | 9 | export { 10 | CDropdown, 11 | CDropdownDivider, 12 | CDropdownHeader, 13 | CDropdownItem, 14 | CDropdownItemPlain, 15 | CDropdownMenu, 16 | CDropdownToggle, 17 | } 18 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/dropdown/types.ts: -------------------------------------------------------------------------------- 1 | export type Directions = 'start' | 'end' 2 | 3 | export type Breakpoints = 4 | | { xs: Directions } 5 | | { sm: Directions } 6 | | { md: Directions } 7 | | { lg: Directions } 8 | | { xl: Directions } 9 | | { xxl: Directions } 10 | 11 | export type Alignments = Directions | Breakpoints 12 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CFooter customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CFooter component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/footer/index.ts: -------------------------------------------------------------------------------- 1 | import { CFooter } from './CFooter' 2 | 3 | export { CFooter } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormControl.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CFormInput customize 1`] = ` 4 |
    5 | 12 |
    13 | `; 14 | 15 | exports[`loads and displays CFormInput component 1`] = ` 16 |
    17 | 21 |
    22 | `; 23 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormFeedback.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CFormFeedback customize one 1`] = ` 4 |
    5 |
    8 |
    9 | `; 10 | 11 | exports[`CFormFeedback customize two 1`] = ` 12 |
    13 |
    16 |
    17 | `; 18 | 19 | exports[`loads and displays CFormFeedback component 1`] = ` 20 |
    21 |
    24 |
    25 | `; 26 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormFloating.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CFormFloating customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CFormFloating component 1`] = ` 14 |
    15 |
    18 |
    19 | `; 20 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormLabel.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CFormLabel customize className 1`] = ` 4 |
    5 | 10 |
    11 | `; 12 | 13 | exports[`CFormLabel customize htmlFor 1`] = ` 14 |
    15 | 21 |
    22 | `; 23 | 24 | exports[`loads and displays CFormLabel component 1`] = ` 25 |
    26 | 31 |
    32 | `; 33 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormRange.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CFormRange customize 1`] = ` 4 |
    5 | 15 |
    16 | `; 17 | 18 | exports[`loads and displays CFormRange component 1`] = ` 19 |
    20 | 25 |
    26 | `; 27 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/form/__tests__/__snapshots__/CFormSelect.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CFormSelect customize 1`] = ` 4 |
    5 | 17 |
    18 | `; 19 | 20 | exports[`loads and displays CFormSelect component 1`] = ` 21 |
    22 | 13 |
    14 | `; 15 | 16 | exports[`loads and displays CFormTextarea component 1`] = ` 17 |
    18 | 23 |
    24 | `; 25 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/form/__tests__/__snapshots__/CInputGroup.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CInputGroup customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CInputGroup component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/form/__tests__/__snapshots__/CInputGroupText.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CInputGroupText customize 1`] = ` 4 |
    5 | 8 | Test 9 | 10 |
    11 | `; 12 | 13 | exports[`loads and displays CInputGroupText component 1`] = ` 14 |
    15 | 18 | Test 19 | 20 |
    21 | `; 22 | 23 | exports[`renders CInputGroupText component as a label 1`] = ` 24 |
    25 | 31 |
    32 | `; 33 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/grid/__tests__/__snapshots__/CCol.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CCol customize breakpoints are boolean 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`CCol customize breakpoints are numbers 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | 23 | exports[`CCol no-breakpoints 1`] = ` 24 |
    25 |
    28 | Test 29 |
    30 |
    31 | `; 32 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/grid/__tests__/__snapshots__/CContainer.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CContainer customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`CContainer customize fluid 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | 23 | exports[`loads and displays CContainer component 1`] = ` 24 |
    25 |
    28 | Test 29 |
    30 |
    31 | `; 32 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/grid/index.ts: -------------------------------------------------------------------------------- 1 | import { CCol } from './CCol' 2 | import { CContainer } from './CContainer' 3 | import { CRow } from './CRow' 4 | 5 | export { CCol, CContainer, CRow } 6 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeader.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CHeader customize 1`] = ` 4 |
    5 |
    8 |
    11 | Test 12 |
    13 |
    14 |
    15 | `; 16 | 17 | exports[`loads and displays CHeader component 1`] = ` 18 |
    19 |
    22 | Test 23 |
    24 |
    25 | `; 26 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderBrand.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CHeaderBrand customize 1`] = ` 4 |
    5 |

    8 | Test 9 |

    10 |
    11 | `; 12 | 13 | exports[`loads and displays CHeaderBrand component 1`] = ` 14 | 21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderDivider.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CHeaderDivider customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CHeaderDivider component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderNav.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CHeaderNav customize 1`] = ` 4 |
    5 | 11 |
    12 | `; 13 | 14 | exports[`loads and displays CHeaderNav component 1`] = ` 15 |
    16 | 22 |
    23 | `; 24 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderText.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CHeaderText customize 1`] = ` 4 |
    5 | 8 | Test 9 | 10 |
    11 | `; 12 | 13 | exports[`loads and displays CHeaderText component 1`] = ` 14 |
    15 | 18 | Test 19 | 20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/header/__tests__/__snapshots__/CHeaderToggler.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CHeaderToggler customize 1`] = ` 4 |
    5 | 11 |
    12 | `; 13 | 14 | exports[`loads and displays CHeaderToggler component 1`] = ` 15 |
    16 | 22 |
    23 | `; 24 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/header/index.ts: -------------------------------------------------------------------------------- 1 | import { CHeader } from './CHeader' 2 | import { CHeaderBrand } from './CHeaderBrand' 3 | import { CHeaderDivider } from './CHeaderDivider' 4 | import { CHeaderNav } from './CHeaderNav' 5 | import { CHeaderText } from './CHeaderText' 6 | import { CHeaderToggler } from './CHeaderToggler' 7 | 8 | export { CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler } 9 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/image/__tests__/__snapshots__/CImage.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CImage customize one 1`] = ` 4 |
    5 | 8 |
    9 | `; 10 | 11 | exports[`CImage customize two 1`] = ` 12 |
    13 | 16 |
    17 | `; 18 | 19 | exports[`loads and displays CImage component 1`] = ` 20 |
    21 | 22 |
    23 | `; 24 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/image/index.ts: -------------------------------------------------------------------------------- 1 | import { CImage } from './CImage' 2 | 3 | export { CImage } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/link/__tests__/__snapshots__/CLink.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CLink customize 1`] = ` 4 |
    5 | 13 |
    14 | `; 15 | 16 | exports[`loads and displays CLink component 1`] = ` 17 | 24 | `; 25 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/link/index.ts: -------------------------------------------------------------------------------- 1 | import { CLink } from './CLink' 2 | 3 | export { CLink } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CListGroupItem customize 1`] = ` 4 |
    5 | 13 |
    14 | `; 15 | 16 | exports[`loads and displays CListGroupItem component 1`] = ` 17 |
    18 |
  • 21 | Test 22 |
    • 23 |
    24 | `; 25 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/list-group/index.ts: -------------------------------------------------------------------------------- 1 | import { CListGroup } from './CListGroup' 2 | import { CListGroupItem } from './CListGroupItem' 3 | 4 | export { CListGroup, CListGroupItem } 5 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/modal/CModalContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react' 2 | 3 | export interface CModalContextProps { 4 | visible?: boolean 5 | setVisible: React.Dispatch> 6 | } 7 | 8 | export const CModalContext = createContext({} as CModalContextProps) 9 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CModal customize 1`] = `
    `; 4 | 5 | exports[`loads and displays CModal component 1`] = `
    `; 6 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalBody.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CModalBody customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CModalBody component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalContent.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CModalContent customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CModalContent component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalDialog.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CModalDialog customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CModalDialog component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CModalFooter customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CModalFooter component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CModalHeader customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    15 |
    16 | `; 17 | 18 | exports[`loads and displays CModalHeader component 1`] = ` 19 |
    20 |
    23 | Test 24 |
    30 |
    31 | `; 32 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CModalTitle customize 1`] = ` 4 |
    5 |

    8 | Test 9 |

    10 |
    11 | `; 12 | 13 | exports[`loads and displays CModalTitle component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/modal/index.ts: -------------------------------------------------------------------------------- 1 | import { CModal } from './CModal' 2 | import { CModalBody } from './CModalBody' 3 | import { CModalContent } from './CModalContent' 4 | import { CModalDialog } from './CModalDialog' 5 | import { CModalFooter } from './CModalFooter' 6 | import { CModalHeader } from './CModalHeader' 7 | import { CModalTitle } from './CModalTitle' 8 | 9 | export { CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle } 10 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CNavGroupItems customize 1`] = ` 4 |
    5 |
      8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CNavGroupItems component 1`] = ` 14 |
    15 |
      18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CNavTitle customize 1`] = ` 4 |
    5 |
  • 8 | Test 9 |
    • 10 |
    11 | `; 12 | 13 | exports[`loads and displays CNavTitle component 1`] = ` 14 |
    15 |
  • 18 | Test 19 |
    • 20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/nav/index.ts: -------------------------------------------------------------------------------- 1 | import { CNav } from './CNav' 2 | import { CNavGroupItems } from './CNavGroupItems' 3 | import { CNavGroup } from './CNavGroup' 4 | import { CNavItem } from './CNavItem' 5 | import { CNavLink } from './CNavLink' 6 | import { CNavTitle } from './CNavTitle' 7 | 8 | export { CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle } 9 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarBrand.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CNavbarBrand customize 1`] = ` 4 |
    5 |

    9 | Test 10 |

    11 |
    12 | `; 13 | 14 | exports[`CNavbarBrand witch href 1`] = ` 15 | 23 | `; 24 | 25 | exports[`loads and displays CNavbarBrand component 1`] = ` 26 |
    27 | 30 | Test 31 | 32 |
    33 | `; 34 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarNav.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CNavbarNav customize 1`] = ` 4 |
    5 | 11 |
    12 | `; 13 | 14 | exports[`loads and displays CNavbarNav component 1`] = ` 15 |
    16 | 22 |
    23 | `; 24 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/navbar/__tests__/__snapshots__/CNavbarText.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CNavbarText customize 1`] = ` 4 |
    5 | 8 | Test 9 | 10 |
    11 | `; 12 | 13 | exports[`loads and displays CNavbarText component 1`] = ` 14 |
    15 | 18 | Test 19 | 20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/navbar/index.ts: -------------------------------------------------------------------------------- 1 | import { CNavbar } from './CNavbar' 2 | import { CNavbarBrand } from './CNavbarBrand' 3 | import { CNavbarNav } from './CNavbarNav' 4 | import { CNavbarText } from './CNavbarText' 5 | import { CNavbarToggler } from './CNavbarToggler' 6 | 7 | export { CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler } 8 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasBody.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`COffcanvasBody customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays COffcanvasBody component 1`] = ` 14 |
    15 |
    18 |
    19 | `; 20 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasHeader.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`COffcanvasHeader customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays COffcanvasHeader component 1`] = ` 14 |
    15 |
    18 |
    19 | `; 20 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/offcanvas/__tests__/__snapshots__/COffcanvasTitle.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`COffcanvasTitle customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays COffcanvasTitle component 1`] = ` 14 |
    15 |
    18 |
    19 | `; 20 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/offcanvas/index.ts: -------------------------------------------------------------------------------- 1 | import { COffcanvas } from './COffcanvas' 2 | import { COffcanvasBody } from './COffcanvasBody' 3 | import { COffcanvasHeader } from './COffcanvasHeader' 4 | import { COffcanvasTitle } from './COffcanvasTitle' 5 | 6 | export { COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle } 7 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CPaginationItem customize 1`] = ` 4 |
    5 |
  • 9 |

    12 | Test 13 |

    14 |
    • 15 |
    16 | `; 17 | 18 | exports[`loads and displays CPaginationItem component 1`] = ` 19 |
    20 |
  • 23 | 26 | Test 27 | 28 |
    • 29 |
    30 | `; 31 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/pagination/index.ts: -------------------------------------------------------------------------------- 1 | import { CPagination } from './CPagination' 2 | import { CPaginationItem } from './CPaginationItem' 3 | 4 | export { CPagination, CPaginationItem } 5 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CPlaceholder customize 1`] = ` 4 |
    5 | 8 |
    9 | `; 10 | 11 | exports[`loads and displays CPlaceholder component 1`] = ` 12 |
    13 | 16 |
    17 | `; 18 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/placeholder/index.ts: -------------------------------------------------------------------------------- 1 | import { CPlaceholder } from './CPlaceholder' 2 | 3 | export { CPlaceholder } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`loads and displays CPopover component 1`] = ` 4 |
    5 | 11 |
    12 | `; 13 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/popover/index.ts: -------------------------------------------------------------------------------- 1 | import { CPopover } from './CPopover' 2 | 3 | export { CPopover } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/progress/CProgressStackedContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react' 2 | 3 | export interface CProgressStackedContextProps { 4 | stacked?: boolean 5 | } 6 | 7 | export const CProgressStackedContext = createContext({} as CProgressStackedContextProps) 8 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CProgressBar customize 1`] = ` 4 |
    5 |
    9 | Test 10 |
    11 |
    12 | `; 13 | 14 | exports[`loads and displays CProgressBar component 1`] = ` 15 |
    16 |
    20 | Test 21 |
    22 |
    23 | `; 24 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/progress/index.ts: -------------------------------------------------------------------------------- 1 | import { CProgress } from './CProgress' 2 | import { CProgressBar } from './CProgressBar' 3 | import { CProgressStacked } from './CProgressStacked' 4 | 5 | export { CProgress, CProgressBar, CProgressStacked } 6 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/sidebar/CSidebarNavContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react' 2 | 3 | export interface CSidebarNavContextProps { 4 | visibleGroup: string 5 | setVisibleGroup: React.Dispatch> 6 | } 7 | 8 | export const CSidebarNavContext = createContext({} as CSidebarNavContextProps) 9 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CSidebarBrand customize 1`] = ` 4 | 11 | `; 12 | 13 | exports[`loads and displays CSidebarBrand component 1`] = ` 14 | 22 | `; 23 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CSidebarFooter customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CSidebarFooter component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CSidebarHeader customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CSidebarHeader component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CSidebarNav customize 1`] = ` 4 |
    5 |
      8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CSidebarNav component 1`] = ` 14 |
    15 |
      18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CSidebarToggler customize 1`] = ` 4 |
    5 | 10 |
    11 | `; 12 | 13 | exports[`loads and displays CSidebarToggler component 1`] = ` 14 |
    15 |
    19 | `; 20 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/sidebar/index.ts: -------------------------------------------------------------------------------- 1 | import { CSidebar } from './CSidebar' 2 | import { CSidebarBrand } from './CSidebarBrand' 3 | import { CSidebarFooter } from './CSidebarFooter' 4 | import { CSidebarToggler } from './CSidebarToggler' 5 | import { CSidebarHeader } from './CSidebarHeader' 6 | import { CSidebarNav } from './CSidebarNav' 7 | 8 | export { CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav } 9 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CSpinner customize 1`] = ` 4 |
    5 | 15 |
    16 | `; 17 | 18 | exports[`loads and displays CSpinner component 1`] = ` 19 |
    20 | 30 |
    31 | `; 32 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/spinner/index.ts: -------------------------------------------------------------------------------- 1 | import { CSpinner } from './CSpinner' 2 | 3 | export { CSpinner } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/CTableCaption.tsx: -------------------------------------------------------------------------------- 1 | import React, { forwardRef, HTMLAttributes } from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | export const CTableCaption = forwardRef< 5 | HTMLTableCaptionElement, 6 | HTMLAttributes 7 | >(({ children, ...props }, ref) => { 8 | return ( 9 | 10 | {children} 11 | 12 | ) 13 | }) 14 | 15 | CTableCaption.propTypes = { 16 | children: PropTypes.node, 17 | } 18 | 19 | CTableCaption.displayName = 'CTableCaption' 20 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableBody.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CTableBody customize 1`] = ` 4 | 5 | 8 | 9 | 12 | 13 | 14 |
    10 | Test 11 |
    15 | `; 16 | 17 | exports[`loads and displays CTableBody component 1`] = ` 18 | 19 | 20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableCaption.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CTableCaption customize 1`] = ` 4 | 5 | 8 |
    6 | Test 7 |
    9 | `; 10 | 11 | exports[`loads and displays CTableCaption component 1`] = ` 12 | 13 |
    14 |
    15 | `; 16 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CTableDataCell customize 1`] = ` 4 | 5 | 6 | 7 | 12 | 13 | 14 |
    10 | Test 11 |
    15 | `; 16 | 17 | exports[`loads and displays CTableDataCell component 1`] = ` 18 | 19 | 20 | 21 | 23 | 24 |
    22 |
    25 | `; 26 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableFoot.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CTableFoot customize 1`] = ` 4 | 5 | 8 | 9 | 12 | 13 | 14 |
    10 | Test 11 |
    15 | `; 16 | 17 | exports[`loads and displays CTableFoot component 1`] = ` 18 | 19 | 20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableHead.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CTableHead customize 1`] = ` 4 | 5 | 8 | 9 | 12 | 13 | 14 |
    10 | Test 11 |
    15 | `; 16 | 17 | exports[`loads and displays CTableHead component 1`] = ` 18 | 19 | 20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CTableHeaderCell customize 1`] = ` 4 | 5 | 6 | 7 | 12 | 13 | 14 |
    10 | Test 11 |
    15 | `; 16 | 17 | exports[`loads and displays CTableHeaderCell component 1`] = ` 18 | 19 | 20 | 21 | 23 | 24 |
    22 |
    25 | `; 26 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/__tests__/__snapshots__/CTableRow.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CTableRow customize 1`] = ` 4 | 5 | 6 | 9 | 12 | 13 | 14 |
    10 | Test 11 |
    15 | `; 16 | 17 | exports[`loads and displays CTableRow component 1`] = ` 18 | 19 | 20 | 21 | 22 |
    23 | `; 24 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/index.ts: -------------------------------------------------------------------------------- 1 | import { CTable } from './CTable' 2 | import { CTableBody } from './CTableBody' 3 | import { CTableCaption } from './CTableCaption' 4 | import { CTableDataCell } from './CTableDataCell' 5 | import { CTableFoot } from './CTableFoot' 6 | import { CTableHead } from './CTableHead' 7 | import { CTableHeaderCell } from './CTableHeaderCell' 8 | import { CTableRow } from './CTableRow' 9 | 10 | export { 11 | CTable, 12 | CTableBody, 13 | CTableCaption, 14 | CTableDataCell, 15 | CTableFoot, 16 | CTableHead, 17 | CTableHeaderCell, 18 | CTableRow, 19 | } 20 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/table/types.ts: -------------------------------------------------------------------------------- 1 | import { CTableDataCellProps } from '../table/CTableDataCell' 2 | import { CTableHeaderCellProps } from '../table/CTableHeaderCell' 3 | import { CTableRowProps } from '../table/CTableRow' 4 | 5 | export type Column = { 6 | label?: string 7 | key: string 8 | _style?: any 9 | _props?: CTableHeaderCellProps 10 | } 11 | 12 | export type FooterItem = { 13 | label?: string 14 | _props?: CTableDataCellProps 15 | } 16 | 17 | export type Item = { 18 | [key: string]: number | string | any 19 | _props?: CTableRowProps 20 | } 21 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/tabs/CTabsContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react' 2 | 3 | export interface CTabsContextProps { 4 | _activeItemKey?: number | string 5 | setActiveItemKey: React.Dispatch> 6 | id?: string 7 | } 8 | 9 | export const CTabsContext = createContext({} as CTabsContextProps) -------------------------------------------------------------------------------- /packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabContent.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CTabContent customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CTabContent component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CTabPane customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CTabPane component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import { CTab } from './CTab' 2 | import { CTabContent } from './CTabContent' 3 | import { CTabPane } from './CTabPane' 4 | import { CTabPanel } from './CTabPanel' 5 | import { CTabList } from './CTabList' 6 | import { CTabs } from './CTabs' 7 | 8 | export { CTab, CTabContent, CTabList, CTabPane, CTabPanel, CTabs } 9 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/toast/CToastContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react' 2 | 3 | export interface CToastContextProps { 4 | visible?: boolean 5 | setVisible: React.Dispatch> 6 | } 7 | 8 | export const CToastContext = createContext({} as CToastContextProps) 9 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToast.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CToast customize 1`] = ` 4 |
    5 | 13 |
    14 | `; 15 | 16 | exports[`loads and displays CToast component 1`] = `
    `; 17 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToastBody.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CToastBody customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CToastBody component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CToastHeader customize 1`] = ` 4 |
    5 |
    8 | Test 9 |
    10 |
    11 | `; 12 | 13 | exports[`loads and displays CToastHeader component 1`] = ` 14 |
    15 |
    18 | Test 19 |
    20 |
    21 | `; 22 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CToaster customize 1`] = ` 4 |
    5 |
    8 | 14 |
    15 | `; 16 | 17 | exports[`loads and displays CToaster component 1`] = ` 18 |
    19 |
    22 | Test 23 |
    24 |
    25 | `; 26 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/toast/index.ts: -------------------------------------------------------------------------------- 1 | import { CToast } from './CToast' 2 | import { CToastBody } from './CToastBody' 3 | import { CToastClose } from './CToastClose' 4 | import { CToastHeader } from './CToastHeader' 5 | import { CToaster } from './CToaster' 6 | 7 | export { CToast, CToastBody, CToastClose, CToastHeader, CToaster } 8 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`loads and displays CTooltip component 1`] = ` 4 | 11 | `; 12 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | import { CTooltip } from './CTooltip' 2 | 3 | export { CTooltip } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/components/widgets/index.ts: -------------------------------------------------------------------------------- 1 | import { CWidgetStatsA } from './CWidgetStatsA' 2 | import { CWidgetStatsB } from './CWidgetStatsB' 3 | import { CWidgetStatsC } from './CWidgetStatsC' 4 | import { CWidgetStatsD } from './CWidgetStatsD' 5 | import { CWidgetStatsE } from './CWidgetStatsE' 6 | import { CWidgetStatsF } from './CWidgetStatsF' 7 | 8 | export { CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF } 9 | -------------------------------------------------------------------------------- /packages/coreui-react/src/helpers/index.ts: -------------------------------------------------------------------------------- 1 | import { PolymorphicRefForwardingComponent } from './polymorphicComponent' 2 | 3 | export { PolymorphicRefForwardingComponent } 4 | -------------------------------------------------------------------------------- /packages/coreui-react/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | import { useClipboard } from './useClipboard' 2 | import { useColorModes } from './useColorModes' 3 | import { useForkedRef } from './useForkedRef' 4 | import { usePopper } from './usePopper' 5 | 6 | export { useClipboard, useColorModes, useForkedRef, usePopper } 7 | -------------------------------------------------------------------------------- /packages/coreui-react/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components/' 2 | export * from './hooks/' 3 | -------------------------------------------------------------------------------- /packages/coreui-react/src/utils/getNextActiveElement.ts: -------------------------------------------------------------------------------- 1 | const getNextActiveElement = ( 2 | list: HTMLElement[], 3 | activeElement: HTMLElement, 4 | shouldGetNext: boolean, 5 | isCycleAllowed: boolean, 6 | ) => { 7 | const listLength = list.length 8 | let index = list.indexOf(activeElement) 9 | 10 | if (index === -1) { 11 | return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0] 12 | } 13 | 14 | index += shouldGetNext ? 1 : -1 15 | 16 | if (isCycleAllowed) { 17 | index = (index + listLength) % listLength 18 | } 19 | 20 | return list[Math.max(0, Math.min(index, listLength - 1))] 21 | } 22 | 23 | export default getNextActiveElement 24 | -------------------------------------------------------------------------------- /packages/coreui-react/src/utils/getRTLPlacement.ts: -------------------------------------------------------------------------------- 1 | import { Placement } from '@popperjs/core' 2 | import isRTL from './isRTL' 3 | 4 | const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => { 5 | switch (placement) { 6 | case 'right': { 7 | return isRTL(element) ? 'left' : 'right' 8 | } 9 | case 'left': { 10 | return isRTL(element) ? 'right' : 'left' 11 | } 12 | default: { 13 | return placement as Placement 14 | } 15 | } 16 | } 17 | 18 | export default getRTLPlacement 19 | -------------------------------------------------------------------------------- /packages/coreui-react/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | import executeAfterTransition from './executeAfterTransition' 2 | import getNextActiveElement from './getNextActiveElement' 3 | import getRTLPlacement from './getRTLPlacement' 4 | import getTransitionDurationFromElement from './getTransitionDurationFromElement' 5 | import isInViewport from './isInViewport' 6 | import isRTL from './isRTL' 7 | import mergeClassNames from './mergeClassNames' 8 | 9 | export { 10 | executeAfterTransition, 11 | getNextActiveElement, 12 | getRTLPlacement, 13 | getTransitionDurationFromElement, 14 | isInViewport, 15 | isRTL, 16 | mergeClassNames, 17 | } 18 | -------------------------------------------------------------------------------- /packages/coreui-react/src/utils/isInViewport.ts: -------------------------------------------------------------------------------- 1 | const isInViewport = (element: HTMLElement) => { 2 | const rect = element.getBoundingClientRect() 3 | return ( 4 | Math.floor(rect.top) >= 0 && 5 | Math.floor(rect.left) >= 0 && 6 | Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) && 7 | Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth) 8 | ) 9 | } 10 | 11 | export default isInViewport 12 | -------------------------------------------------------------------------------- /packages/coreui-react/src/utils/isRTL.ts: -------------------------------------------------------------------------------- 1 | const isRTL = (element?: HTMLElement | HTMLDivElement | null) => { 2 | if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') { 3 | return true 4 | } 5 | 6 | if (element) { 7 | return element.closest('[dir="rtl"]') !== null 8 | } 9 | 10 | return false 11 | } 12 | 13 | export default isRTL 14 | -------------------------------------------------------------------------------- /packages/coreui-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "include": ["src/**/*"] 4 | } -------------------------------------------------------------------------------- /packages/docs/content/api/CTableCaption.api.mdx: -------------------------------------------------------------------------------- 1 | 2 | ```jsx 3 | import { CTableCaption } from '@coreui/react' 4 | // or 5 | import CTableCaption from '@coreui/react/src/components/table/CTableCaption' 6 | ``` 7 | 8 | 9 | 10 |
    11 | -------------------------------------------------------------------------------- /packages/docs/content/components/alert/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Alert Component API 3 | name: Alert API 4 | description: Explore the API reference for the React Alert component and discover how to effectively utilize its props for customization. 5 | route: /components/alert/ 6 | --- 7 | 8 | import CAlertAPI from '../../api/CAlert.api.mdx' 9 | import CAlertHeadingAPI from '../../api/CAlertHeading.api.mdx' 10 | import CAlertLinkAPI from '../../api/CAlertLink.api.mdx' 11 | 12 | ## CAlert 13 | 14 | 15 | 16 | ## CAlertHeading 17 | 18 | 19 | 20 | ## CAlertLink 21 | 22 | 23 | -------------------------------------------------------------------------------- /packages/docs/content/components/alert/examples/AlertDismissingExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CAlert } from '@coreui/react' 3 | 4 | export const AlertDismissingExample = () => { 5 | return ( 6 | { 10 | alert('👋 Well, hi there! Thanks for dismissing me.') 11 | }} 12 | > 13 | Go right ahead and click that dimiss over there on the right. 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/docs/content/components/alert/examples/AlertLiveExample.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { CAlert, CButton } from '@coreui/react' 3 | 4 | export const AlertLiveExample = () => { 5 | const [visible, setVisible] = useState(false) 6 | return ( 7 | <> 8 | setVisible(false)}> 9 | A simple primary alert—check it out! 10 | 11 | setVisible(true)}> 12 | Show live alert 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/docs/content/components/avatar/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Avatar Component API 3 | name: Avatar API 4 | description: Explore the API reference for the React Avatar component and discover how to effectively utilize its props for customization. 5 | route: /components/avatar/ 6 | --- 7 | 8 | import CAvatarAPI from '../../api/CAvatar.api.mdx' 9 | 10 | ## CAvatar 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/avatar/examples/AvatarImage.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CAvatar } from '@coreui/react' 4 | 5 | export const AvatarImage = () => { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/docs/content/components/avatar/examples/AvatarLetter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CAvatar } from '@coreui/react' 3 | 4 | export const AvatarLetter = () => { 5 | return ( 6 | <> 7 | 8 | CUI 9 | 10 | CUI 11 | 12 | CUI 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/docs/content/components/avatar/examples/AvatarRounded.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CAvatar } from '@coreui/react' 3 | 4 | export const AvatarRounded = () => { 5 | return ( 6 | <> 7 | 8 | CUI 9 | 10 | 11 | CUI 12 | 13 | 14 | CUI 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/docs/content/components/avatar/examples/AvatarSizes.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CAvatar } from '@coreui/react' 3 | 4 | export const AvatarSizes = () => { 5 | return ( 6 | <> 7 | 8 | CUI 9 | 10 | 11 | CUI 12 | 13 | 14 | CUI 15 | 16 | CUI 17 | 18 | CUI 19 | 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /packages/docs/content/components/avatar/examples/AvatarSquare.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CAvatar } from '@coreui/react' 3 | 4 | export const AvatarSquare = () => { 5 | return ( 6 | <> 7 | 8 | CUI 9 | 10 | 11 | CUI 12 | 13 | 14 | CUI 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/docs/content/components/avatar/examples/AvatarWithStatus.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CAvatar } from '@coreui/react' 4 | 5 | export const AvatarWithStatus = () => { 6 | return ( 7 | <> 8 | 9 | 10 | CUI 11 | 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/badge/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Badge Component API 3 | name: Badge API 4 | description: Explore the API reference for the React Badge component and discover how to effectively utilize its props for customization. 5 | route: /components/badge/ 6 | --- 7 | 8 | import CBadgeAPI from '../../api/CBadge.api.mdx' 9 | 10 | ## CBadge 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/badge/examples/Badge2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBadge, CButton } from '@coreui/react' 3 | 4 | export const Badge2Example = () => { 5 | return ( 6 | 7 | Notifications 4 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /packages/docs/content/components/badge/examples/Badge3Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBadge, CButton } from '@coreui/react' 3 | 4 | export const Badge3Example = () => { 5 | return ( 6 | 7 | Profile 9 8 | unread messages 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/badge/examples/BadgeContextual2Variations.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBadge } from '@coreui/react' 3 | 4 | export const BadgeContextual2Variations = () => { 5 | return ( 6 | <> 7 | primary 8 | success 9 | danger 10 | warning 11 | info 12 | light 13 | dark 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/docs/content/components/badge/examples/BadgeContextualVariations.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBadge } from '@coreui/react' 3 | 4 | export const BadgeContextualVariations = () => { 5 | return ( 6 | <> 7 | primary 8 | success 9 | danger 10 | warning 11 | info 12 | light 13 | dark 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/docs/content/components/badge/examples/BadgeExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBadge } from '@coreui/react' 3 | 4 | export const BadgeExample = () => { 5 | return ( 6 | <> 7 |

    Example heading New

    8 |

    Example heading New

    9 |

    Example heading New

    10 |

    Example heading New

    11 |
    Example heading New
    12 |
    Example heading New
    13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/docs/content/components/badge/examples/BadgePositioned2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBadge, CButton } from '@coreui/react' 3 | 4 | export const BadgePositioned2Example = () => { 5 | return ( 6 | 7 | Profile 8 | 14 | New alerts 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/docs/content/components/breadcrumb/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Breadcrumb Component API 3 | name: Breadcrumb API 4 | description: Explore the API reference for the React Breadcrumb component and discover how to effectively utilize its props for customization. 5 | route: /components/breadcrumb/ 6 | --- 7 | 8 | import CBreadcrumbAPI from '../../api/CBreadcrumb.api.mdx' 9 | import CBreadcrumbItemAPI from '../../api/CBreadcrumbItem.api.mdx' 10 | 11 | ## CBreadcrumb 12 | 13 | 14 | 15 | ## CBreadcrumbItem 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers2Example.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' 3 | 4 | export const BreadcrumbDividers2Example = () => { 5 | return ( 6 | 11 | Home 12 | Library 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' 3 | 4 | export const BreadcrumbDividers3Example = () => { 5 | return ( 6 | 7 | Home 8 | Library 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/breadcrumb/examples/BreadcrumbDividers3Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' 3 | 4 | export const BreadcrumbDividers3Example = () => { 5 | return ( 6 | 7 | Home 8 | Library 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' 3 | 4 | export const BreadcrumbDividersExample = () => { 5 | return ( 6 | "' }}> 7 | Home 8 | Library 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/breadcrumb/examples/BreadcrumbDividersExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react' 3 | 4 | export const BreadcrumbDividersExample = () => { 5 | return ( 6 | "' } as React.CSSProperties}> 7 | Home 8 | Library 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/button-group/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Button Group Component API 3 | name: Button Group API 4 | description: Explore the API reference for the React Button Group component and discover how to effectively utilize its props for customization. 5 | route: /components/button-group/ 6 | --- 7 | 8 | import CButtonGroupAPI from '../../api/CButtonGroup.api.mdx' 9 | import CButtonToolbarAPI from '../../api/CButtonToolbar.api.mdx' 10 | 11 | ## CButtonGroup 12 | 13 | 14 | 15 | ## CButtonToolbar 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/docs/content/components/button-group/examples/ButtonGroup2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CButtonGroup } from '@coreui/react' 3 | 4 | export const ButtonGroup2Example = () => { 5 | return ( 6 | 7 | Active link 8 | Link 9 | Link 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/button-group/examples/ButtonGroupExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CButtonGroup } from '@coreui/react' 3 | 4 | export const ButtonGroupExample = () => { 5 | return ( 6 | 7 | Left 8 | Middle 9 | Right 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/button-group/examples/ButtonGroupMixedStylesExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CButtonGroup } from '@coreui/react' 3 | 4 | export const ButtonGroupMixedStylesExample = () => { 5 | return ( 6 | 7 | Left 8 | Middle 9 | Right 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/button-group/examples/ButtonGroupOutlinedStylesExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CButtonGroup } from '@coreui/react' 3 | 4 | export const ButtonGroupOutlinedStylesExample = () => { 5 | return ( 6 | 7 | Left 8 | Middle 9 | Right 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Button Component API 3 | name: Button API 4 | description: Explore the API reference for the React Button component and discover how to effectively utilize its props for customization. 5 | route: /components/button/ 6 | --- 7 | 8 | import CButtonAPI from '../../api/CButton.api.mdx' 9 | 10 | ## CButton 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonBlock2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonBlock2Example = () => { 5 | return ( 6 |
    7 | Button  8 | Button 9 |
    10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonBlock3Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonBlock3Example = () => { 5 | return ( 6 |
    7 | Button 8 | Button 9 |
    10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonBlock4Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonBlock4Example = () => { 5 | return ( 6 |
    7 | Button 8 | Button 9 |
    10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonBlockExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonBlockExample = () => { 5 | return ( 6 |
    7 | Button 8 | Button 9 |
    10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonComponentsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonComponentsExample = () => { 5 | return ( 6 | <> 7 | Link 8 | Button 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonDisabled2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonDisabled2Example = () => { 5 | return ( 6 | <> 7 | Primary link 8 | Link 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonDisabledExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonDisabledExample = () => { 5 | return ( 6 | <> 7 | Primary button 8 | Button 9 | Primary button 10 | Button 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonExample = () => { 5 | return ( 6 | <> 7 | Primary 8 | Secondary 9 | Success 10 | Danger 11 | Warning 12 | Info 13 | Light 14 | Dark 15 | Link 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonGhostBaseClassExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonGhostBaseClassExample = () => { 5 | return ( 6 | <> 7 | Base ghost button 8 | Active state 9 | Disabled state 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonOutlineBaseClassExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonOutlineBaseClassExample = () => { 5 | return ( 6 | <> 7 | Base outline button 8 | Active state 9 | Disabled state 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonSizes2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonSizes2Example = () => { 5 | return ( 6 | <> 7 | Small button 8 | Small button 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonSizes3Example.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonSizes3Example = () => { 5 | const customVars = { 6 | '--cui-btn-padding-y': '.25rem', 7 | '--cui-btn-padding-x': '.5rem', 8 | '--cui-btn-font-size': '.75rem', 9 | } 10 | 11 | return ( 12 | 13 | Custom button 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonSizes3Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonSizes3Example = () => { 5 | const customVars = { 6 | '--cui-btn-padding-y': '.25rem', 7 | '--cui-btn-padding-x': '.5rem', 8 | '--cui-btn-font-size': '.75rem', 9 | } as React.CSSProperties 10 | 11 | return ( 12 | 13 | Custom button 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/docs/content/components/button/examples/ButtonSizesExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton } from '@coreui/react' 3 | 4 | export const ButtonSizesExample = () => { 5 | return ( 6 | <> 7 | Large button 8 | Large button 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/callout/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Callout Component API 3 | name: Callout API 4 | description: Explore the API reference for the React Callout component and discover how to effectively utilize its props for customization. 5 | route: /components/callout/ 6 | --- 7 | 8 | import CCalloutAPI from '../../api/CCallout.api.mdx' 9 | 10 | ## CCallout 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/card/examples/CardBodyExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCard, CCardBody } from '@coreui/react' 3 | 4 | export const CardBodyExample = () => { 5 | return ( 6 | 7 | This is some text within a card body. 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /packages/docs/content/components/card/examples/CardHeader2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react' 3 | 4 | export const CardHeader2Example = () => { 5 | return ( 6 | 7 | Header 8 | 9 | Special title treatment 10 | 11 | With supporting text below as a natural lead-in to additional content. 12 | 13 | 14 | Go somewhere 15 | 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /packages/docs/content/components/card/examples/CardHeaderExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CCard, CCardBody, CCardHeader, CCardText, CCardTitle } from '@coreui/react' 3 | 4 | export const CardHeaderExample = () => { 5 | return ( 6 | 7 | Header 8 | 9 | Special title treatment 10 | 11 | With supporting text below as a natural lead-in to additional content. 12 | 13 | 14 | Go somewhere 15 | 16 | 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /packages/docs/content/components/card/examples/CardImagesExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CCard, CCardBody, CCardImage, CCardText } from '@coreui/react' 4 | 5 | export const CardImagesExample = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | Some quick example text to build on the card title and make up the bulk of the card's 12 | content. 13 | 14 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/docs/content/components/card/examples/CardListGroups2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCard, CCardHeader, CListGroup, CListGroupItem } from '@coreui/react' 3 | 4 | export const CardListGroups2Example = () => { 5 | return ( 6 | 7 | Header 8 | 9 | Cras justo odio 10 | Dapibus ac facilisis in 11 | Vestibulum at eros 12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/docs/content/components/card/examples/CardListGroups3Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCard, CCardFooter, CListGroup, CListGroupItem } from '@coreui/react' 3 | 4 | export const CardListGroups3Example = () => { 5 | return ( 6 | 7 | 8 | Cras justo odio 9 | Dapibus ac facilisis in 10 | Vestibulum at eros 11 | 12 | Footer 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/docs/content/components/card/examples/CardListGroupsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCard, CListGroup, CListGroupItem } from '@coreui/react' 3 | 4 | export const CardListGroupsExample = () => { 5 | return ( 6 | 7 | 8 | Cras justo odio 9 | Dapibus ac facilisis in 10 | Vestibulum at eros 11 | 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/card/examples/CardSizing3Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CCard, CCardBody, CCardText, CCardTitle } from '@coreui/react' 3 | 4 | export const CardSizing3Example = () => { 5 | return ( 6 | 7 | 8 | Special title treatment 9 | 10 | With supporting text below as a natural lead-in to additional content. 11 | 12 | Go somewhere 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/docs/content/components/carousel/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Carousel Component API 3 | name: Carousel API 4 | description: Explore the API reference for the React Carousel component and discover how to effectively utilize its props for customization. 5 | route: /components/carousel/ 6 | --- 7 | 8 | import CCarouselAPI from '../../api/CCarousel.api.mdx' 9 | import CCarouselCaptionAPI from '../../api/CCarouselCaption.api.mdx' 10 | import CCarouselItemAPI from '../../api/CCarouselItem.api.mdx' 11 | 12 | ## CCarousel 13 | 14 | 15 | 16 | ## CCarouselCaption 17 | 18 | 19 | 20 | ## CCarouselItem 21 | 22 | 23 | -------------------------------------------------------------------------------- /packages/docs/content/components/carousel/styling.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Carousel Component Styling 3 | name: Carousel Styling 4 | description: Learn how to customize the React Carousel component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design. 5 | route: /components/carousel/ 6 | --- 7 | 8 | ### SASS variables 9 | 10 | 11 | -------------------------------------------------------------------------------- /packages/docs/content/components/chart/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Chart.js Component API 3 | name: Chart.js API 4 | description: Explore the API reference for the React Chart.js component and discover how to effectively utilize its props for customization. 5 | route: /components/chart/ 6 | --- 7 | 8 | import CChartAPI from '../../api/CChart.api.mdx' 9 | 10 | ## CChart 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/close-button/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Close Button Component API 3 | name: Close Button API 4 | description: Explore the API reference for the React Close Button component and discover how to effectively utilize its props for customization. 5 | route: /components/close-button/ 6 | --- 7 | 8 | import CCloseButtonAPI from '../../api/CCloseButton.api.mdx' 9 | 10 | ## CCloseButton 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/close-button/examples/CloseButtonDarkExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCloseButton } from '@coreui/react' 3 | 4 | export const CloseButtonDarkExample = () => { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/close-button/examples/CloseButtonDisabledExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCloseButton } from '@coreui/react' 3 | 4 | export const CloseButtonDisabledExample = () => { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /packages/docs/content/components/close-button/examples/CloseButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CCloseButton } from '@coreui/react' 3 | 4 | export const CloseButtonExample = () => { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /packages/docs/content/components/collapse/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Collapse Component API 3 | name: Collapse API 4 | description: Explore the API reference for the React Collapse component and discover how to effectively utilize its props for customization. 5 | route: /components/collapse/ 6 | --- 7 | 8 | import CCollapseAPI from '../../api/CCollapse.api.mdx' 9 | 10 | ## CCollapse 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/dropdown/examples/DropdownMenuContentDividersExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CDropdownDivider, CDropdownItem, CDropdownMenu } from '@coreui/react' 3 | 4 | export const DropdownMenuContentDividersExample = () => { 5 | return ( 6 | 7 | Action 8 | Another action 9 | Something else here 10 | 11 | Separated link 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/dropdown/examples/DropdownMenuContentHeadersExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CDropdownHeader, CDropdownItem, CDropdownMenu } from '@coreui/react' 3 | 4 | export const DropdownMenuContentHeadersExample = () => { 5 | return ( 6 | 7 | Dropdown header 8 | Action 9 | Another action 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/dropdown/examples/DropdownMenuContentTextExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CDropdownMenu } from '@coreui/react' 3 | 4 | export const DropdownMenuContentTextExample = () => { 5 | return ( 6 | 7 |

    Some example text that's free-flowing within the dropdown menu.

    8 |

    And this is more example text.

    9 |     10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/dropdown/examples/DropdownMenuItems2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CDropdownItem, CDropdownItemPlain, CDropdownMenu } from '@coreui/react' 3 | 4 | export const DropdownMenuItems2Example = () => { 5 | return ( 6 | 7 | Dropdown item text 8 | Action 9 | Another action 10 | Something else here 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/docs/content/components/dropdown/examples/DropdownMenuItemsActiveExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CDropdownItem, CDropdownMenu } from '@coreui/react' 3 | 4 | export const DropdownMenuItemsActiveExample = () => { 5 | return ( 6 | 7 | Regular link 8 | 9 | Active link 10 | 11 | Another link 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/dropdown/examples/DropdownMenuItemsDisabledExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CDropdownItem, CDropdownMenu } from '@coreui/react' 3 | 4 | export const DropdownMenuItemsDisabledExample = () => { 5 | return ( 6 | 7 | Regular link 8 | Disabled link 9 | Another link 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/dropdown/examples/DropdownSingleButton2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react' 3 | 4 | export const DropdownSingleButton2Example = () => { 5 | return ( 6 | 7 | Dropdown button 8 | 9 | Action 10 | Another action 11 | Something else here 12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/docs/content/components/dropdown/examples/DropdownSingleButtonExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react' 3 | 4 | export const DropdownSingleButtonExample = () => { 5 | return ( 6 | 7 | Dropdown button 8 | 9 | Action 10 | Another action 11 | Something else here 12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/docs/content/components/image/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Image Component API 3 | name: Image API 4 | description: Explore the API reference for the React Image component and discover how to effectively utilize its props for customization. 5 | route: /components/image/ 6 | --- 7 | 8 | import CImageAPI from '../../api/CImage.api.mdx' 9 | 10 | ## CImage 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/image/examples/ImageAligning2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CImage } from '@coreui/react' 4 | 5 | export const ImageAligning2Example = () => { 6 | return ( 7 |
    8 | 9 |
    10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/image/examples/ImageAligning3Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CImage } from '@coreui/react' 4 | 5 | export const ImageAligning3Example = () => { 6 | return ( 7 |
    8 | 9 |
    10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/content/components/image/examples/ImageAligningExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CImage } from '@coreui/react' 4 | 5 | export const ImageAligningExample = () => { 6 | return ( 7 |
    8 | 9 | 10 |
    11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/image/examples/ImageResponsiveExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CImage } from '@coreui/react' 4 | 5 | export const ImageResponsiveExample = () => { 6 | return 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs/content/components/image/examples/ImageThumbnailExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CImage } from '@coreui/react' 4 | 5 | export const ImageThumbnailExample = () => { 6 | return 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs/content/components/list-group/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React List Group Component API 3 | name: List Group API 4 | description: Explore the API reference for the React List Group component and discover how to effectively utilize its props for customization. 5 | route: /components/list-group/ 6 | --- 7 | 8 | import CListGroupAPI from '../../api/CListGroup.api.mdx' 9 | import CListGroupItemAPI from '../../api/CListGroupItem.api.mdx' 10 | 11 | ## CListGroup 12 | 13 | 14 | 15 | ## CListGroupItem 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/docs/content/components/list-group/examples/ListGroupActiveItemsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CListGroup, CListGroupItem } from '@coreui/react' 3 | 4 | export const ListGroupActiveItemsExample = () => { 5 | return ( 6 | 7 | Cras justo odio 8 | Dapibus ac facilisis in 9 | Morbi leo risus 10 | Porta ac consectetur ac 11 | Vestibulum at eros 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/list-group/examples/ListGroupContextualClassesExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CListGroup, CListGroupItem } from '@coreui/react' 3 | 4 | export const ListGroupContextualClassesExample = () => { 5 | const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'] 6 | return ( 7 | 8 | Dapibus ac facilisis in 9 | {colors.map((color, index) => ( 10 | 11 | A simple {color} list group item 12 | 13 | ))} 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/docs/content/components/list-group/examples/ListGroupDisabledItemsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CListGroup, CListGroupItem } from '@coreui/react' 3 | 4 | export const ListGroupDisabledItemsExample = () => { 5 | return ( 6 | 7 | Cras justo odio 8 | Dapibus ac facilisis in 9 | Morbi leo risus 10 | Porta ac consectetur ac 11 | Vestibulum at eros 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/list-group/examples/ListGroupExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CListGroup, CListGroupItem } from '@coreui/react' 3 | 4 | export const ListGroupExample = () => { 5 | return ( 6 | 7 | Cras justo odio 8 | Dapibus ac facilisis in 9 | Morbi leo risus 10 | Porta ac consectetur ac 11 | Vestibulum at eros 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/list-group/examples/ListGroupFlushExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CListGroup, CListGroupItem } from '@coreui/react' 3 | 4 | export const ListGroupFlushExample = () => { 5 | return ( 6 | 7 | Cras justo odio 8 | Dapibus ac facilisis in 9 | Morbi leo risus 10 | Porta ac consectetur ac 11 | Vestibulum at eros 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarBrand2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' 4 | 5 | export const NavbarBrand2Example = () => { 6 | return ( 7 | 8 | 9 | 10 | CoreUI Signet 16 | 17 | 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarBrand3Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { withPrefix } from 'gatsby' 3 | import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' 4 | 5 | export const NavbarBrand3Example = () => { 6 | return ( 7 | 8 | 9 | 10 | CoreUI Signet{' '} 16 | CoreUI 17 | 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarContainers2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' 3 | 4 | export const NavbarContainers2Example = () => { 5 | return ( 6 | 7 | 8 | Navbar 9 | 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarContainersExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' 3 | 4 | export const NavbarContainersExample = () => { 5 | return ( 6 | 7 | 8 | 9 | Navbar 10 | 11 | 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarForms3Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CForm, CFormInput, CInputGroup, CInputGroupText, CNavbar } from '@coreui/react' 3 | 4 | export const NavbarForms3Example = () => { 5 | return ( 6 | 7 | 8 | 9 | @ 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarForms4Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CForm, CNavbar } from '@coreui/react' 3 | 4 | export const NavbarForms4Example = () => { 5 | return ( 6 | 7 | 8 | 9 | Main button 10 | 11 | 12 | Smaller button 13 | 14 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarFormsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CContainer, CForm, CFormInput, CNavbar } from '@coreui/react' 3 | 4 | export const NavbarFormsExample = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | Search 12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarPlacementExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' 3 | 4 | export const NavbarPlacementExample = () => { 5 | return ( 6 | 7 | 8 | Default 9 | 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarPlacementFixedBottomExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' 3 | 4 | export const NavbarPlacementFixedBottomExample = () => { 5 | return ( 6 | 7 | 8 | Fixed bottom 9 | 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarPlacementFixedTopExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' 3 | 4 | export const NavbarPlacementFixedTopExample = () => { 5 | return ( 6 | 7 | 8 | Fixed top 9 | 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarPlacementStickyTopExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CContainer, CNavbar, CNavbarBrand } from '@coreui/react' 3 | 4 | export const NavbarPlacementStickyTopExample = () => { 5 | return ( 6 | 7 | 8 | Sticky top 9 | 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/navbar/examples/NavbarText.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CContainer, CNavbar, CNavbarText } from '@coreui/react' 3 | 4 | export const NavbarText = () => { 5 | return ( 6 | 7 | 8 | Navbar text with an inline element 9 | 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/Nav2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavLink } from '@coreui/react' 3 | 4 | export const Nav2Example = () => { 5 | return ( 6 | 7 | Active 8 | Link 9 | Link 10 | Disabled 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavEnclosedExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavItem, CNavLink } from '@coreui/react' 3 | 4 | export const NavEnclosedExample = () => { 5 | return ( 6 | 7 | 8 | Active 9 | 10 | 11 | Link 12 | 13 | 14 | Link 15 | 16 | 17 | Disabled 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavEnclosedPillsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavItem, CNavLink } from '@coreui/react' 3 | 4 | export const NavEnclosedPillsExample = () => { 5 | return ( 6 | 7 | 8 | Active 9 | 10 | 11 | Link 12 | 13 | 14 | Link 15 | 16 | 17 | Disabled 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavItem, CNavLink } from '@coreui/react' 3 | 4 | export const NavExample = () => { 5 | return ( 6 | 7 | 8 | Active 9 | 10 | 11 | Link 12 | 13 | 14 | Link 15 | 16 | 17 | Disabled 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavFillAndJustifyExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavItem, CNavLink } from '@coreui/react' 3 | 4 | export const NavFillAndJustifyExample = () => { 5 | return ( 6 | 7 | 8 | Active 9 | 10 | 11 | Link 12 | 13 | 14 | Link 15 | 16 | 17 | Disabled 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavPillsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavItem, CNavLink } from '@coreui/react' 3 | 4 | export const NavPillsExample = () => { 5 | return ( 6 | 7 | 8 | Active 9 | 10 | 11 | Link 12 | 13 | 14 | Link 15 | 16 | 17 | Disabled 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavTabsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavItem, CNavLink } from '@coreui/react' 3 | 4 | export const NavTabsExample = () => { 5 | return ( 6 | 7 | 8 | Active 9 | 10 | 11 | Link 12 | 13 | 14 | Link 15 | 16 | 17 | Disabled 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavUnderlineBorderExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavItem, CNavLink } from '@coreui/react' 3 | 4 | export const NavUnderlineBorderExample = () => { 5 | return ( 6 | 7 | 8 | Active 9 | 10 | 11 | Link 12 | 13 | 14 | Link 15 | 16 | 17 | Disabled 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavUnderlineExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavItem, CNavLink } from '@coreui/react' 3 | 4 | export const NavUnderlineExample = () => { 5 | return ( 6 | 7 | 8 | Active 9 | 10 | 11 | Link 12 | 13 | 14 | Link 15 | 16 | 17 | Disabled 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavVerticalExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavItem, CNavLink } from '@coreui/react' 3 | 4 | export const NavVerticalExample = () => { 5 | return ( 6 | 7 | 8 | Active 9 | 10 | 11 | Link 12 | 13 | 14 | Link 15 | 16 | 17 | Disabled 18 | 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/docs/content/components/navs-tabs/examples/NavWorkingWithFlexUtilitiesExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CNav, CNavLink } from '@coreui/react' 3 | 4 | export const NavWorkingWithFlexUtilitiesExample = () => { 5 | return ( 6 | 7 | Active 8 | Link 9 | Link 10 | Disabled 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/docs/content/components/pagination/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Pagination Component API 3 | name: Pagination API 4 | description: Explore the API reference for the React Pagination component and discover how to effectively utilize its props for customization. 5 | route: /components/pagination/ 6 | --- 7 | 8 | import CPaginationAPI from '../../api/CPagination.api.mdx' 9 | import CPaginationItemAPI from '../../api/CPaginationItem.api.mdx' 10 | 11 | ## CPagination 12 | 13 | 14 | 15 | ## CPaginationItem 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/docs/content/components/pagination/examples/PaginationAlignment2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CPagination, CPaginationItem } from '@coreui/react' 3 | 4 | export const PaginationAlignment2Example = () => { 5 | return ( 6 | 7 | Previous 8 | 1 9 | 2 10 | 3 11 | Next 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/pagination/examples/PaginationAlignmentExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CPagination, CPaginationItem } from '@coreui/react' 3 | 4 | export const PaginationAlignmentExample = () => { 5 | return ( 6 | 7 | Previous 8 | 1 9 | 2 10 | 3 11 | Next 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/pagination/examples/PaginationExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CPagination, CPaginationItem } from '@coreui/react' 3 | 4 | export const PaginationExample = () => { 5 | return ( 6 | 7 | Previous 8 | 1 9 | 2 10 | 3 11 | Next 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/pagination/examples/PaginationSizingLargeExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CPagination, CPaginationItem } from '@coreui/react' 3 | 4 | export const PaginationSizingLargeExample = () => { 5 | return ( 6 | 7 | Previous 8 | 1 9 | 2 10 | 3 11 | Next 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/pagination/examples/PaginationSizingSmallExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CPagination, CPaginationItem } from '@coreui/react' 3 | 4 | export const PaginationSizingSmallExample = () => { 5 | return ( 6 | 7 | Previous 8 | 1 9 | 2 10 | 3 11 | Next 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/docs/content/components/placeholder/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Placeholder Component API 3 | name: Placeholder API 4 | description: Explore the API reference for the React Placeholder component and discover how to effectively utilize its props for customization. 5 | route: /components/placeholder/ 6 | --- 7 | 8 | import CPlaceholderAPI from '../../api/CPlaceholder.api.mdx' 9 | 10 | ## CPlaceholder 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/docs/content/components/placeholder/examples/Placeholder2Example.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CButton, CPlaceholder } from '@coreui/react' 3 | 4 | export const Placeholder2Example = () => { 5 | return ( 6 | <> 7 | 10 |