Showing preview only (1,849K chars total). Download the full file or copy to clipboard to get everything.
Repository: fabien-ml/hope-ui
Branch: main
Commit: e29e96e9dc3d
Files: 584
Total size: 1.6 MB
Directory structure:
gitextract__b_j4ttw/
├── .all-contributorsrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows/
│ └── build-test.yml
├── .gitignore
├── .husky/
│ ├── commit-msg
│ └── pre-commit
├── .prettierrc.json
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── ROADMAP.md
├── apps/
│ └── docs/
│ ├── .eslintrc.json
│ ├── README.md
│ ├── index.html
│ ├── package.json
│ ├── src/
│ │ ├── App.tsx
│ │ ├── components/
│ │ │ ├── AppNavLink.tsx
│ │ │ ├── BeatLoader.tsx
│ │ │ ├── Code.tsx
│ │ │ ├── CodeSnippet.tsx
│ │ │ ├── ColorScale.tsx
│ │ │ ├── ContextualNav.tsx
│ │ │ ├── Footer.tsx
│ │ │ ├── Header.tsx
│ │ │ ├── MainNavContent.tsx
│ │ │ ├── MainNavSubtitle.tsx
│ │ │ ├── MainNavTitle.tsx
│ │ │ ├── MainNavigation.tsx
│ │ │ ├── PageLayout.tsx
│ │ │ ├── PageTitle.tsx
│ │ │ ├── Preview.tsx
│ │ │ ├── PropsTable.tsx
│ │ │ ├── SectionSubtitle.tsx
│ │ │ ├── SectionTitle.tsx
│ │ │ └── StylePropsTable.tsx
│ │ ├── icons/
│ │ │ ├── IconAccessibility.tsx
│ │ │ ├── IconArrowLeft.tsx
│ │ │ ├── IconArrowRight.tsx
│ │ │ ├── IconCaretDown.tsx
│ │ │ ├── IconCheck.tsx
│ │ │ ├── IconChevronRight.tsx
│ │ │ ├── IconCircleDashed.tsx
│ │ │ ├── IconCode.tsx
│ │ │ ├── IconComponent.tsx
│ │ │ ├── IconEdit.tsx
│ │ │ ├── IconEmail.tsx
│ │ │ ├── IconExternalLink.tsx
│ │ │ ├── IconGear.tsx
│ │ │ ├── IconGithub.tsx
│ │ │ ├── IconHamburgerMenu.tsx
│ │ │ ├── IconMenu.tsx
│ │ │ ├── IconMinus.tsx
│ │ │ ├── IconMoon.tsx
│ │ │ ├── IconPalette.tsx
│ │ │ ├── IconPhone.tsx
│ │ │ ├── IconPlus.tsx
│ │ │ ├── IconQuestionMark.tsx
│ │ │ ├── IconRepeat.tsx
│ │ │ ├── IconRocket.tsx
│ │ │ ├── IconSearch.tsx
│ │ │ ├── IconStar.tsx
│ │ │ ├── IconSun.tsx
│ │ │ ├── IconTwitter.tsx
│ │ │ └── IconUser.tsx
│ │ ├── index.css
│ │ ├── index.tsx
│ │ └── pages/
│ │ ├── component-docs/
│ │ │ ├── data-display/
│ │ │ │ ├── accordion/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── avatar/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── badge/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── icon/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── image/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── kbd/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── list/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── table/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ └── tag/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── data-entry/
│ │ │ │ ├── checkbox/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── form-control/
│ │ │ │ │ ├── felte-example.tsx
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── input/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── radio/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── select/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── switch/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ └── textarea/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── feedback/
│ │ │ │ ├── alert/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── circular-progress/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── notification/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── progress/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── skeleton/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ └── spinner/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── general/
│ │ │ │ ├── button/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ └── icon-button/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── layout/
│ │ │ │ ├── aspect-ratio/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── box/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── center/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── container/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── divider/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── flex/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── grid/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── simple-grid/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ └── stack/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── navigation/
│ │ │ │ ├── anchor/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── breadcrumb/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ └── tabs/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── others/
│ │ │ │ └── close-button/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── overlay/
│ │ │ │ ├── drawer/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── menu/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── modal/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ ├── popover/
│ │ │ │ │ ├── index.tsx
│ │ │ │ │ └── snippets.ts
│ │ │ │ └── tooltip/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ └── typography/
│ │ │ ├── heading/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ └── text/
│ │ │ ├── index.tsx
│ │ │ └── snippets.ts
│ │ ├── features/
│ │ │ ├── create-styles/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── css-prop/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── global-styles/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── hope-factory/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ ├── responsive-styles/
│ │ │ │ ├── index.tsx
│ │ │ │ └── snippets.ts
│ │ │ └── style-props/
│ │ │ ├── index.tsx
│ │ │ └── snippets.ts
│ │ ├── getting-started/
│ │ │ ├── changelog/
│ │ │ │ └── index.tsx
│ │ │ └── installation/
│ │ │ ├── index.tsx
│ │ │ └── snippets.ts
│ │ ├── landing-page.tsx
│ │ ├── not-found.tsx
│ │ └── theming/
│ │ ├── color-mode/
│ │ │ ├── index.tsx
│ │ │ └── snippets.ts
│ │ ├── css-variables/
│ │ │ ├── index.tsx
│ │ │ └── snippets.ts
│ │ ├── customize-theme/
│ │ │ ├── index.tsx
│ │ │ └── snippets.ts
│ │ └── default-theme/
│ │ ├── index.tsx
│ │ └── snippets.ts
│ ├── tsconfig.json
│ └── vite.config.ts
├── commitlint.config.js
├── jest.config.js
├── jest.setup.ts
├── netlify.toml
├── package.json
├── packages/
│ └── solid/
│ ├── .browserslistrc
│ ├── .storybook/
│ │ ├── main.js
│ │ └── preview.js
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── dev/
│ │ ├── index.html
│ │ ├── index.tsx
│ │ └── vite.config.ts
│ ├── jest.config.js
│ ├── package.json
│ ├── src/
│ │ ├── color-mode.ts
│ │ ├── components/
│ │ │ ├── accordion/
│ │ │ │ ├── __tests__/
│ │ │ │ │ └── accordion.test.tsx
│ │ │ │ ├── accordion-button.tsx
│ │ │ │ ├── accordion-icon.tsx
│ │ │ │ ├── accordion-item.tsx
│ │ │ │ ├── accordion-panel.tsx
│ │ │ │ ├── accordion.styles.ts
│ │ │ │ ├── accordion.tsx
│ │ │ │ └── index.ts
│ │ │ ├── alert/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── alert-description.test.tsx
│ │ │ │ │ ├── alert-icon.test.tsx
│ │ │ │ │ ├── alert-title.test.tsx
│ │ │ │ │ └── alert.test.tsx
│ │ │ │ ├── alert-description.tsx
│ │ │ │ ├── alert-icon.tsx
│ │ │ │ ├── alert-title.tsx
│ │ │ │ ├── alert.stories.tsx
│ │ │ │ ├── alert.styles.ts
│ │ │ │ ├── alert.tsx
│ │ │ │ └── index.ts
│ │ │ ├── anchor/
│ │ │ │ ├── anchor.stories.tsx
│ │ │ │ ├── anchor.styles.ts
│ │ │ │ ├── anchor.test.tsx
│ │ │ │ ├── anchor.tsx
│ │ │ │ └── index.ts
│ │ │ ├── aspect-ratio/
│ │ │ │ ├── aspect-ratio.styles.ts
│ │ │ │ ├── aspect-ratio.test.tsx
│ │ │ │ ├── aspect-ratio.tsx
│ │ │ │ └── index.ts
│ │ │ ├── async-button/
│ │ │ │ ├── async-button.stories.tsx
│ │ │ │ ├── async-button.test.tsx
│ │ │ │ ├── async-button.tsx
│ │ │ │ └── index.ts
│ │ │ ├── avatar/
│ │ │ │ ├── avatar-badge.tsx
│ │ │ │ ├── avatar-excess.tsx
│ │ │ │ ├── avatar-group.tsx
│ │ │ │ ├── avatar-image.tsx
│ │ │ │ ├── avatar-initials.tsx
│ │ │ │ ├── avatar.styles.ts
│ │ │ │ ├── avatar.tsx
│ │ │ │ ├── avatar.utils.tsx
│ │ │ │ └── index.ts
│ │ │ ├── badge/
│ │ │ │ ├── badge.stories.tsx
│ │ │ │ ├── badge.styles.ts
│ │ │ │ ├── badge.test.tsx
│ │ │ │ ├── badge.tsx
│ │ │ │ └── index.ts
│ │ │ ├── box/
│ │ │ │ ├── box.test.tsx
│ │ │ │ ├── box.tsx
│ │ │ │ └── index.ts
│ │ │ ├── breadcrumb/
│ │ │ │ ├── breadcrumb-item.tsx
│ │ │ │ ├── breadcrumb-link.tsx
│ │ │ │ ├── breadcrumb-separator.tsx
│ │ │ │ ├── breadcrumb.styles.ts
│ │ │ │ ├── breadcrumb.tsx
│ │ │ │ └── index.ts
│ │ │ ├── button/
│ │ │ │ ├── button-group.tsx
│ │ │ │ ├── button-icon.tsx
│ │ │ │ ├── button-loader.tsx
│ │ │ │ ├── button.stories.tsx
│ │ │ │ ├── button.styles.ts
│ │ │ │ ├── button.test.tsx
│ │ │ │ ├── button.tsx
│ │ │ │ └── index.ts
│ │ │ ├── center/
│ │ │ │ ├── center.stories.tsx
│ │ │ │ ├── center.styles.ts
│ │ │ │ ├── center.test.tsx
│ │ │ │ ├── center.tsx
│ │ │ │ └── index.ts
│ │ │ ├── checkbox/
│ │ │ │ ├── checkbox-group.tsx
│ │ │ │ ├── checkbox-primitive-indicator.tsx
│ │ │ │ ├── checkbox-primitive.tsx
│ │ │ │ ├── checkbox.stories.tsx
│ │ │ │ ├── checkbox.styles.ts
│ │ │ │ ├── checkbox.tsx
│ │ │ │ └── index.ts
│ │ │ ├── circular-progress/
│ │ │ │ ├── circular-progress-indicator.tsx
│ │ │ │ ├── circular-progress-label.tsx
│ │ │ │ ├── circular-progress.styles.ts
│ │ │ │ ├── circular-progress.tsx
│ │ │ │ └── index.ts
│ │ │ ├── click-outside/
│ │ │ │ ├── click-outside.tsx
│ │ │ │ └── index.ts
│ │ │ ├── close-button/
│ │ │ │ ├── close-button.styles.ts
│ │ │ │ ├── close-button.tsx
│ │ │ │ └── index.ts
│ │ │ ├── collapse/
│ │ │ │ ├── collapse.styles.ts
│ │ │ │ ├── collapse.tsx
│ │ │ │ └── index.ts
│ │ │ ├── container/
│ │ │ │ ├── container.stories.tsx
│ │ │ │ ├── container.styles.ts
│ │ │ │ ├── container.test.tsx
│ │ │ │ ├── container.tsx
│ │ │ │ └── index.ts
│ │ │ ├── divider/
│ │ │ │ ├── divider.styles.ts
│ │ │ │ ├── divider.tsx
│ │ │ │ └── index.ts
│ │ │ ├── drawer/
│ │ │ │ ├── drawer-content.tsx
│ │ │ │ ├── drawer-overlay.tsx
│ │ │ │ ├── drawer.styles.ts
│ │ │ │ ├── drawer.tsx
│ │ │ │ └── index.ts
│ │ │ ├── factory.tsx
│ │ │ ├── flex/
│ │ │ │ ├── flex.test.tsx
│ │ │ │ ├── flex.tsx
│ │ │ │ └── index.ts
│ │ │ ├── form-control/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── form-control.test.tsx
│ │ │ │ │ ├── form-error-message.test.tsx
│ │ │ │ │ ├── form-helper-text.test.tsx
│ │ │ │ │ └── form-label.test.tsx
│ │ │ │ ├── form-control.stories.tsx
│ │ │ │ ├── form-control.styles.ts
│ │ │ │ ├── form-control.tsx
│ │ │ │ ├── form-error-message.tsx
│ │ │ │ ├── form-helper-text.tsx
│ │ │ │ ├── form-label.tsx
│ │ │ │ ├── index.ts
│ │ │ │ └── use-form-control.ts
│ │ │ ├── grid/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── grid-item.test.tsx
│ │ │ │ │ ├── grid.test.tsx
│ │ │ │ │ └── simple-grid.test.tsx
│ │ │ │ ├── grid-item.tsx
│ │ │ │ ├── grid.tsx
│ │ │ │ ├── index.ts
│ │ │ │ └── simple-grid.tsx
│ │ │ ├── heading/
│ │ │ │ ├── heading.styles.ts
│ │ │ │ ├── heading.test.tsx
│ │ │ │ ├── heading.tsx
│ │ │ │ └── index.ts
│ │ │ ├── icon/
│ │ │ │ ├── create-icon.tsx
│ │ │ │ ├── icon.styles.ts
│ │ │ │ ├── icon.test.tsx
│ │ │ │ ├── icon.tsx
│ │ │ │ └── index.ts
│ │ │ ├── icon-button/
│ │ │ │ ├── icon-button.stories.tsx
│ │ │ │ ├── icon-button.test.tsx
│ │ │ │ ├── icon-button.tsx
│ │ │ │ └── index.ts
│ │ │ ├── icons/
│ │ │ │ ├── IconCaretDown.tsx
│ │ │ │ ├── IconCheck.tsx
│ │ │ │ ├── IconCheckCircleSolid.tsx
│ │ │ │ ├── IconClose.tsx
│ │ │ │ ├── IconCloseSmall.tsx
│ │ │ │ ├── IconCrossCircle.tsx
│ │ │ │ ├── IconExclamationCircleSolid.tsx
│ │ │ │ ├── IconExclamationTriangleSolid.tsx
│ │ │ │ ├── IconInfoCircleSolid.tsx
│ │ │ │ ├── IconSelector.tsx
│ │ │ │ └── IconSpinner.tsx
│ │ │ ├── image/
│ │ │ │ ├── image.test.tsx
│ │ │ │ ├── image.tsx
│ │ │ │ ├── image.utils.ts
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ ├── input/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── input-addon.test.tsx
│ │ │ │ │ ├── input-element.test.tsx
│ │ │ │ │ ├── input-group.test.tsx
│ │ │ │ │ └── input.test.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── input-addon.tsx
│ │ │ │ ├── input-element.tsx
│ │ │ │ ├── input-group.tsx
│ │ │ │ ├── input.stories.tsx
│ │ │ │ ├── input.styles.ts
│ │ │ │ └── input.tsx
│ │ │ ├── kbd/
│ │ │ │ ├── index.ts
│ │ │ │ ├── kbd.styles.ts
│ │ │ │ └── kbd.tsx
│ │ │ ├── list/
│ │ │ │ ├── index.ts
│ │ │ │ ├── list-icon.tsx
│ │ │ │ ├── list-item.tsx
│ │ │ │ ├── list.styles.ts
│ │ │ │ └── list.tsx
│ │ │ ├── menu/
│ │ │ │ ├── index.ts
│ │ │ │ ├── menu-content.tsx
│ │ │ │ ├── menu-group.tsx
│ │ │ │ ├── menu-item.tsx
│ │ │ │ ├── menu-label.tsx
│ │ │ │ ├── menu-trigger.tsx
│ │ │ │ ├── menu.styles.ts
│ │ │ │ ├── menu.tsx
│ │ │ │ └── menu.utils.ts
│ │ │ ├── modal/
│ │ │ │ ├── create-modal.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── modal-body.tsx
│ │ │ │ ├── modal-close-button.tsx
│ │ │ │ ├── modal-content.tsx
│ │ │ │ ├── modal-footer.tsx
│ │ │ │ ├── modal-header.tsx
│ │ │ │ ├── modal-overlay.tsx
│ │ │ │ ├── modal.styles.ts
│ │ │ │ └── modal.tsx
│ │ │ ├── notification/
│ │ │ │ ├── index.ts
│ │ │ │ ├── notification-container.tsx
│ │ │ │ ├── notification-description.tsx
│ │ │ │ ├── notification-icon.tsx
│ │ │ │ ├── notification-title.tsx
│ │ │ │ ├── notification.events.ts
│ │ │ │ ├── notification.service.ts
│ │ │ │ ├── notification.styles.ts
│ │ │ │ ├── notification.tsx
│ │ │ │ ├── notification.types.ts
│ │ │ │ ├── notifications-provider.context.ts
│ │ │ │ └── notifications-provider.tsx
│ │ │ ├── popover/
│ │ │ │ ├── index.ts
│ │ │ │ ├── popover-anchor.tsx
│ │ │ │ ├── popover-arrow.tsx
│ │ │ │ ├── popover-body.tsx
│ │ │ │ ├── popover-close-button.tsx
│ │ │ │ ├── popover-content.tsx
│ │ │ │ ├── popover-footer.tsx
│ │ │ │ ├── popover-header.tsx
│ │ │ │ ├── popover-trigger.tsx
│ │ │ │ ├── popover.styles.ts
│ │ │ │ └── popover.tsx
│ │ │ ├── progress/
│ │ │ │ ├── index.ts
│ │ │ │ ├── progress-indicator.tsx
│ │ │ │ ├── progress-label.tsx
│ │ │ │ ├── progress.styles.ts
│ │ │ │ └── progress.tsx
│ │ │ ├── radio/
│ │ │ │ ├── index.ts
│ │ │ │ ├── radio-group.tsx
│ │ │ │ ├── radio.stories.tsx
│ │ │ │ ├── radio.styles.ts
│ │ │ │ └── radio.tsx
│ │ │ ├── select/
│ │ │ │ ├── index.ts
│ │ │ │ ├── select-content.tsx
│ │ │ │ ├── select-icon.tsx
│ │ │ │ ├── select-label.tsx
│ │ │ │ ├── select-listbox.tsx
│ │ │ │ ├── select-optgroup.tsx
│ │ │ │ ├── select-option-indicator.tsx
│ │ │ │ ├── select-option-text.tsx
│ │ │ │ ├── select-option.tsx
│ │ │ │ ├── select-placeholder.tsx
│ │ │ │ ├── select-tag-close-button.tsx
│ │ │ │ ├── select-tag.tsx
│ │ │ │ ├── select-trigger.tsx
│ │ │ │ ├── select-value.tsx
│ │ │ │ ├── select.styles.ts
│ │ │ │ ├── select.tsx
│ │ │ │ └── select.utils.ts
│ │ │ ├── simple-select/
│ │ │ │ ├── index.ts
│ │ │ │ ├── simple-option.tsx
│ │ │ │ └── simple-select.tsx
│ │ │ ├── skeleton/
│ │ │ │ ├── index.ts
│ │ │ │ ├── skeleton-circle.tsx
│ │ │ │ ├── skeleton-text.tsx
│ │ │ │ ├── skeleton.styles.ts
│ │ │ │ └── skeleton.tsx
│ │ │ ├── spacer/
│ │ │ │ ├── index.ts
│ │ │ │ ├── spacer.styles.ts
│ │ │ │ ├── spacer.test.tsx
│ │ │ │ └── spacer.tsx
│ │ │ ├── spinner/
│ │ │ │ ├── index.ts
│ │ │ │ ├── spinner.styles.ts
│ │ │ │ └── spinner.tsx
│ │ │ ├── stack/
│ │ │ │ ├── index.ts
│ │ │ │ ├── stack.styles.ts
│ │ │ │ ├── stack.test.tsx
│ │ │ │ └── stack.tsx
│ │ │ ├── storybook-utils.tsx
│ │ │ ├── switch/
│ │ │ │ ├── index.ts
│ │ │ │ ├── switch-primitive-thumb.tsx
│ │ │ │ ├── switch-primitive.tsx
│ │ │ │ ├── switch.stories.tsx
│ │ │ │ ├── switch.styles.ts
│ │ │ │ └── switch.tsx
│ │ │ ├── table/
│ │ │ │ ├── index.ts
│ │ │ │ ├── table-caption.tsx
│ │ │ │ ├── table.styles.ts
│ │ │ │ ├── table.tsx
│ │ │ │ ├── tbody.tsx
│ │ │ │ ├── td.tsx
│ │ │ │ ├── tfoot.tsx
│ │ │ │ ├── th.tsx
│ │ │ │ ├── thead.tsx
│ │ │ │ └── tr.tsx
│ │ │ ├── tabs/
│ │ │ │ ├── index.ts
│ │ │ │ ├── tab-list.tsx
│ │ │ │ ├── tab-panel.tsx
│ │ │ │ ├── tab.tsx
│ │ │ │ ├── tabs.styles.ts
│ │ │ │ └── tabs.tsx
│ │ │ ├── tag/
│ │ │ │ ├── __tests__/
│ │ │ │ │ ├── tag-close-button.test.tsx
│ │ │ │ │ ├── tag-icon.test.tsx
│ │ │ │ │ ├── tag-label.test.tsx
│ │ │ │ │ └── tag.test.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── tag-close-button.tsx
│ │ │ │ ├── tag-icon.tsx
│ │ │ │ ├── tag-label.tsx
│ │ │ │ ├── tag.stories.tsx
│ │ │ │ ├── tag.styles.ts
│ │ │ │ └── tag.tsx
│ │ │ ├── test-utils.tsx
│ │ │ ├── text/
│ │ │ │ ├── index.ts
│ │ │ │ ├── text.styles.ts
│ │ │ │ ├── text.test.tsx
│ │ │ │ └── text.tsx
│ │ │ ├── textarea/
│ │ │ │ ├── index.ts
│ │ │ │ ├── textarea.stories.tsx
│ │ │ │ ├── textarea.styles.ts
│ │ │ │ ├── textarea.test.tsx
│ │ │ │ └── textarea.tsx
│ │ │ ├── tooltip/
│ │ │ │ ├── index.ts
│ │ │ │ ├── tooltip.styles.ts
│ │ │ │ └── tooltip.tsx
│ │ │ └── types.ts
│ │ ├── hooks/
│ │ │ ├── create-disclosure/
│ │ │ │ └── index.ts
│ │ │ ├── create-queue/
│ │ │ │ ├── create-queue.test.ts
│ │ │ │ └── index.ts
│ │ │ ├── index.ts
│ │ │ ├── use-click-outside/
│ │ │ │ └── index.ts
│ │ │ └── use-event/
│ │ │ ├── __tests__/
│ │ │ │ └── index.spec.tsx
│ │ │ ├── index.ts
│ │ │ └── use-event.stories.tsx
│ │ ├── hope-provider.tsx
│ │ ├── index.ts
│ │ ├── style-config.types.ts
│ │ ├── styled-system/
│ │ │ ├── css-reset.ts
│ │ │ ├── index.ts
│ │ │ ├── keyframes.ts
│ │ │ ├── media.ts
│ │ │ ├── props/
│ │ │ │ ├── border.ts
│ │ │ │ ├── color.ts
│ │ │ │ ├── css.ts
│ │ │ │ ├── flexbox.ts
│ │ │ │ ├── grid.ts
│ │ │ │ ├── interactivity.ts
│ │ │ │ ├── layout.ts
│ │ │ │ ├── margin.ts
│ │ │ │ ├── padding.ts
│ │ │ │ ├── position.ts
│ │ │ │ ├── pseudo-selector.ts
│ │ │ │ ├── radii.ts
│ │ │ │ ├── shadow.ts
│ │ │ │ ├── size.ts
│ │ │ │ ├── transform.ts
│ │ │ │ ├── transition.ts
│ │ │ │ └── typography.ts
│ │ │ ├── stitches-utils/
│ │ │ │ ├── background.ts
│ │ │ │ ├── border.ts
│ │ │ │ ├── display.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── margin.ts
│ │ │ │ ├── padding.ts
│ │ │ │ ├── position.ts
│ │ │ │ ├── pseudo-selector.ts
│ │ │ │ ├── radii.ts
│ │ │ │ ├── shadow.ts
│ │ │ │ ├── size.ts
│ │ │ │ └── typography.ts
│ │ │ ├── stitches.config.ts
│ │ │ ├── system.ts
│ │ │ ├── tokens/
│ │ │ │ ├── colors.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── radii.ts
│ │ │ │ ├── shadows.ts
│ │ │ │ ├── sizes.ts
│ │ │ │ ├── space.ts
│ │ │ │ ├── typography.ts
│ │ │ │ └── z-indices.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ └── utils/
│ │ ├── assertion.ts
│ │ ├── css.ts
│ │ ├── dom.ts
│ │ ├── function.ts
│ │ ├── index.ts
│ │ ├── number.ts
│ │ ├── object.ts
│ │ ├── solid.ts
│ │ ├── tabbable.ts
│ │ └── types.ts
│ ├── tsconfig.build.json
│ ├── tsconfig.json
│ └── vite.config.ts
├── pnpm-workspace.yaml
├── tsconfig.eslint.json
├── tsconfig.json
├── turbo.json
└── vercel.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .all-contributorsrc
================================================
{
"files": [
"README.md"
],
"imageSize": 100,
"commit": false,
"contributors": [
{
"login": "fabien-ml",
"name": "Fabien MARIE-LOUISE",
"avatar_url": "https://avatars.githubusercontent.com/u/2832351?v=4",
"profile": "https://github.com/fabien-ml",
"contributions": [
"design",
"code",
"doc",
"maintenance"
]
},
{
"login": "bichikim",
"name": "Bichi Kim",
"avatar_url": "https://avatars.githubusercontent.com/u/13829322?v=4",
"profile": "https://github.com/bichikim",
"contributions": [
"code"
]
},
{
"login": "NurbekGithub",
"name": "Nurbek",
"avatar_url": "https://avatars.githubusercontent.com/u/24915724?v=4",
"profile": "https://github.com/NurbekGithub",
"contributions": [
"code"
]
}
],
"contributorsPerLine": 7,
"projectName": "hope-ui",
"projectOwner": "fabien-ml",
"repoType": "github",
"repoHost": "https://github.com",
"skipCi": true
}
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = LF
charset = utf-8
insert_final_newline = true
================================================
FILE: .eslintignore
================================================
node_modules/
# Ignore artifacts:
coverage/
dist/
public/
__mocks__/
commitlint.config.js
jest.config.js
*.d.ts
================================================
FILE: .eslintrc.json
================================================
{
"root": true,
"extends": [
"eslint:recommended",
"plugin:import/recommended",
"plugin:solid/recommended",
"plugin:jsx-a11y/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"plugins": ["solid", "jsx-a11y", "@typescript-eslint", "import", "simple-import-sort"],
"rules": {
"import/first": "warn",
"import/newline-after-import": "warn",
"import/no-duplicates": "error",
"import/no-named-as-default-member": "off",
"simple-import-sort/imports": "warn",
"simple-import-sort/exports": "warn",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-namespace": "off"
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"tsconfigRootDir": "./",
"project": ["./tsconfig.eslint.json", "./apps/*/tsconfig.json"],
"ecmaVersion": 2021,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
"typescript": {
"project": ["./tsconfig.eslint.json", "./apps/*/tsconfig.json"],
"alwaysTryTypes": true
}
}
}
}
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ""
labels: ""
assignees: ""
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ""
labels: ""
assignees: ""
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .github/workflows/build-test.yml
================================================
name: Build and Test Hope UI
# Controls when the action will run.
on:
# Triggers the workflow on push or pull request events but only for the main branch
push:
branches: [main, develop]
pull_request:
branches: [main]
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
build-test:
# The type of runner that the job will run on
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [16.x]
# Steps represent a sequence of tasks that will be executed as part of the job
steps:
# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- uses: actions/checkout@v2
- uses: pnpm/action-setup@v2.0.1
with:
version: 7.0.0-rc.2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: "pnpm"
- name: pnpm install, build and test
run: |
pnpm install
pnpm build
pnpm test
================================================
FILE: .gitignore
================================================
# Created by https://www.toptal.com/developers/gitignore/api/jetbrains,macos,node
# Edit at https://www.toptal.com/developers/gitignore?templates=jetbrains,macos,node
# Vercel
.vercel
# Turborepo
.turbo
build/**
dist/**
# Storybook
storybook-static
# Local .env files
*.local
# Vite
dist/
### JetBrains ###
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
# User-specific stuff
.idea
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/**/usage.statistics.xml
.idea/**/dictionaries
.idea/**/shelf
# Generated files
.idea/**/contentModel.xml
# Sensitive or high-churn files
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml
.idea/**/dbnavigator.xml
# File-based project format
*.iws
# IntelliJ
out/
# mpeltonen/sbt-idea plugin
.idea_modules/
# JIRA plugin
atlassian-ide-plugin.xml
# Cursive Clojure plugin
.idea/replstate.xml
# Editor-based Rest Client
.idea/httpRequests
### JetBrains Patch ###
# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
# *.iml
# modules.xml
# .idea/misc.xml
# *.ipr
# Sonarlint plugin
# https://plugins.jetbrains.com/plugin/7973-sonarlint
.idea/**/sonarlint/
# SonarQube Plugin
# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
.idea/**/sonarIssues.xml
# Markdown Navigator plugin
# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
.idea/**/markdown-navigator.xml
.idea/**/markdown-navigator-enh.xml
.idea/**/markdown-navigator/
# Cache file creation bug
# See https://youtrack.jetbrains.com/issue/JBR-2257
.idea/$CACHE_FILE$
# CodeStream plugin
# https://plugins.jetbrains.com/plugin/12206-codestream
.idea/codestream.xml
### macOS ###
# General
.DS_Store
.AppleDouble
.LSOverride
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul / jest
coverage
*.lcov
# Dependency directories
node_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# dotenv environment variables file
.env
.env.test
.env.production
# Next.js build output
.next
out
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# Yarn Integrity file
.yarn-integrity
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
# End of https://www.toptal.com/developers/gitignore/api/jetbrains,macos,node
================================================
FILE: .husky/commit-msg
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1
================================================
FILE: .husky/pre-commit
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
================================================
FILE: .prettierrc.json
================================================
{
"arrowParens": "avoid",
"printWidth": 100
}
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to Hope UI
Thank you for showing interest in contributing to Hope UI. All of your contributions are extremely valuable to the success of this project!
## Ways to contribute
- **Improve documentation** - fix incomplete or missing docs, bad wording, examples, or explanations.
- **Give feedback** - we are constantly working to make Hope UI a better experience, so please feel free to share what you like, dislike, or any improvements you'd like to see via [GitHub Discussions](https://github.com/fabien-ml/hope-ui/discussions).
- **Share Hope UI** - help us spread the word by sharing [Hope UI](https://hope-ui.com/), or even [Tweet about Hope UI directly](https://twitter.com/intent/tweet?text=Hope%20UI%20%E2%80%93%20a%20new%20SolidJS%20component%20library%20with%20over%2040%20components,%20style%20props%20API,%20native%20dark%20theme%20support%20and%20focuses%20on%20accessibility.%0A%0A%23https://hope-ui.com%0A%0A%23solidjs).
- **GitHub Issues** - work on an [outstanding issue](https://github.com/fabien-ml/hope-ui/labels/help%20wanted) to help us keep Hope UI a reliable UI solution.
- **Suggest New Features** - please feel free to dicuss any new features you'd like to see by creating a [GitHub issue](https://github.com/fabien-ml/hope-ui/labels/help%20wanted).
## Contributing workflow
- After deciding which [GitHub issue](https://github.com/fabien-ml/hope-ui/labels/help%20wanted) or feature you'd like to work on, create a local branch to track your changes
- If applicable, add unit tests while implementing your code
- Ensure that all commits follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
- It is highly recommended that you run the `pnpm test` command to ensure new contributions integrate with the old codebase before initiating a merge request
- Create a merge request and keep up-to-date with any feedback you receive from a maintainer
## Git branches
- **main**: the current version
- **develop**: contains the next version under development (you should create a PR to this branch)
## Get started with Hope UI locally
- Fork the [Hope UI repository](https://github.com/fabien-ml/hope-ui)
- Install the [editorconfig](https://editorconfig.org/) extension for your editor
- Install dependencies with pnpm – `pnpm install`
- Take an initial peek at our components by running `pnpm storybook`
### Project Structure
Hope UI is a monorepo separated in two main folders.
```
apps/
docs/ - Hope UI documentation website
packages/
design-system/ - Hope UI component library
primitives/ - Hope UI low level primitives for building components
```
## npm scripts
### Development scripts
- `dev:docs` – starts the docs development server
- `storybook` - starts the storybook development server
### Testing scripts
- `typecheck` – runs TypeScript typechecking with `tsc --noEmit` on all packages and docs
- `lint` – runs ESLint on all packages and docs
- `test` – runs tests with jest
================================================
FILE: LICENSE.md
================================================
MIT License
Copyright (c) 2022 Fabien MARIE-LOUISE
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://hope-ui.netlify.app">
<img
alt="Hope UI | The SolidJS component library you've hoped for."
src="./assets/banner.jpg"
/>
</a>
</p>
<p align="center">
<a href="https://lgtm.com/projects/g/fabien-ml/hope-ui/context:javascript">
<img src="https://img.shields.io/lgtm/grade/javascript/g/fabien-ml/hope-ui.svg?logo=lgtm&logoWidth=18" alt="Language grade: JavaScript"/>
</a>
<a href="LICENSE.md">
<img src="https://img.shields.io/github/license/fabien-ml/hope-ui" alt="MIT License"/>
</a>
<a href="https://www.npmjs.com/package/@hope-ui/solid">
<img src="https://img.shields.io/npm/v/@hope-ui/solid" alt="npm - @hope-ui/solid"/>
</a>
<a href="https://www.npmjs.com/package/@hope-ui/solid">
<img src="https://img.shields.io/npm/dm/@hope-ui/solid.svg" alt="npm - downloads" height="18">
</a>
</p>
# ⚠️ WARNING ⚠️
Hope UI is no longer maintained. Focus is on the developement of it's successor: https://github.com/kobaltedev/pigment.
## Documentation
For full documentation, visit [hope-ui.netlify.app](https://hope-ui.netlify.app).
## Acknowledgment
This project is inspired by :
- [Chakra UI](https://chakra-ui.com/)
- [Mantine](https://mantine.dev/)
## License
This project is licensed under the MIT License.
================================================
FILE: ROADMAP.md
================================================
# Components roadmap
### General
| | Development | A11y check | Tests | Storybook | Docs |
| ---------- | :---------: | :--------: | :---: | :-------: | :--: |
| Button | ✅ | ✅ | ✅ | ✅ | |
| IconButton | ✅ | ✅ | ✅ | ✅ | |
### Layout
| | Development | A11y check | Tests | Storybook | Docs |
| ----------- | :---------: | :--------: | :---: | :-------: | :--: |
| AspectRatio | ✅ | n/a | ✅ | | |
| Box | ✅ | n/a | ✅ | n/a | |
| Center | ✅ | n/a | ✅ | ✅ | |
| Container | ✅ | n/a | ✅ | ✅ | |
| Divider | ✅ | n/a | | | |
| Flex | ✅ | n/a | ✅ | | |
| Grid | ✅ | n/a | ✅ | | |
| SimpleGrid | ✅ | n/a | ✅ | | |
| Stack | ✅ | n/a | ✅ | | |
### Typography
| | Development | A11y check | Tests | Storybook | Docs |
| ------- | :---------: | :--------: | :---: | :-------: | :--: |
| Text | ✅ | ✅ | ✅ | n/a | |
| Heading | ✅ | ✅ | ✅ | n/a | |
### Data entry
| | Development | A11y check | Tests | Storybook | Docs |
| ---------------- | :---------: | :--------: | :---: | :-------: | :--: |
| AutoComplete | | | | | |
| Checkbox | ✅ | ✅ | | ✅ | |
| DatePicker | | | | | |
| FormControl | ✅ | ✅ | ✅ | ✅ | |
| FormLabel | ✅ | ✅ | ✅ | ✅ | |
| FormHelperText | ✅ | ✅ | ✅ | ✅ | |
| FormErrorMessage | ✅ | ✅ | ✅ | ✅ | |
| Input (Text) | ✅ | ✅ | ✅ | ✅ | |
| NumberInput | | | | | |
| PasswordInput | | | | | |
| RadioGroup | ✅ | ✅ | | ✅ | |
| Radio | ✅ | ✅ | | ✅ | |
| Select | ✅ | ✅ | | | |
| MultiSelect | ✅ | ✅ | | | |
| Slider | | | | | |
| Switch | ✅ | ✅ | | ✅ | |
| Textarea | ✅ | ✅ | ✅ | ✅ | |
| TimePicker | | | | | |
| UploadInput | | | | | |
### Data display
| | Development | A11y check | Tests | Storybook | Docs |
| --------- | :---------: | :--------: | :---: | :-------: | :--: |
| Accordion | ✅ | ✅ | | | |
| Avatar | ✅ | ✅ | | | |
| Badge | ✅ | ✅ | | | |
| Icon | ✅ | ✅ | ✅ | | |
| Kbd | ✅ | n/a | | | |
| Table | ✅ | ✅ | | | |
| Tag | ✅ | ✅ | ✅ | ✅ | |
| Timeline | | | | | |
### Navigation
| | Development | A11y check | Tests | Storybook | Docs |
| ---------- | :---------: | :--------: | :---: | :-------: | :--: |
| Anchor | ✅ | ✅ | ✅ | ✅ | |
| Breadcrumb | ✅ | ✅ | | | |
| Pagination | | | | | |
| Stepper | | | | | |
| Tabs | ✅ | ✅ | | | |
### Feedback
| | Development | A11y check | Tests | Storybook | Docs |
| -------------------- | :---------: | :--------: | :---: | :-------: | :--: |
| Alert | ✅ | ✅ | ✅ | ✅ | |
| CircularProgress | ✅ | ✅ | | | |
| Progress | ✅ | ✅ | | | |
| Spinner | ✅ | ✅ | | | |
| Skeleton | ✅ | n/a | | | |
| Notification (Toast) | ✅ | ✅ | | | |
### Overlay
| | Development | A11y check | Tests | Storybook | Docs |
| ------- | :---------: | :--------: | :---: | :-------: | :--: |
| Drawer | ✅ | ✅ | | | |
| Menu | ✅ | ✅ | | | |
| Modal | ✅ | ✅ | | | |
| Popover | ✅ | ✅ | | | |
| Tooltip | ✅ | ✅ | | | |
================================================
FILE: apps/docs/.eslintrc.json
================================================
{
"extends": "../../.eslintrc.json",
"parserOptions": {
"project": ["./tsconfig.json"]
}
}
================================================
FILE: apps/docs/README.md
================================================
## @hope-ui/docs
Documentation website of the Hope UI component library.
================================================
FILE: apps/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Hope UI | The SolidJS component library you've hoped for</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/src/index.tsx" type="module"></script>
</body>
</html>
================================================
FILE: apps/docs/package.json
================================================
{
"name": "@hope-ui/docs",
"version": "0.0.1",
"private": true,
"description": "Documentation of the Hope UI component library",
"author": "Fabien MARIE-LOUISE (https://github.com/fabien-ml)",
"scripts": {
"build": "vite build",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
"dev": "vite --host",
"serve": "vite preview --port 3000",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@felte/solid": "1.1.5",
"@felte/validator-yup": "1.0.3",
"@hope-ui/solid": "workspace:*",
"@stitches/core": "1.2.8",
"prism-themes": "1.9.0",
"prismjs": "1.27.0",
"solid-app-router": "0.2.1",
"solid-js": "1.4.0",
"solid-transition-group": "0.0.10",
"yup": "0.32.11"
}
}
================================================
FILE: apps/docs/src/App.tsx
================================================
import {
Anchor,
Box,
Center,
Container,
Flex,
hope,
HStack,
Progress,
ProgressIndicator,
Spinner,
} from "@hope-ui/solid";
import { Outlet, Route, Routes, useIsRouting } from "solid-app-router";
import { lazy, Suspense } from "solid-js";
import { Portal } from "solid-js/web";
import Header from "./components/Header";
import MainNavigation from "./components/MainNavigation";
const LandingPage = lazy(() => import("./pages/landing-page"));
const NotFound = lazy(() => import("./pages/not-found"));
const Installation = lazy(() => import("./pages/getting-started/installation"));
const Changelog = lazy(() => import("./pages/getting-started/changelog"));
const StyleProps = lazy(() => import("./pages/features/style-props"));
const CSSProp = lazy(() => import("./pages/features/css-prop"));
const CreateStyles = lazy(() => import("./pages/features/create-styles"));
const ResponsiveStyles = lazy(() => import("./pages/features/responsive-styles"));
const GlobalStyles = lazy(() => import("./pages/features/global-styles"));
const HopeFactory = lazy(() => import("./pages/features/hope-factory"));
const DefaultTheme = lazy(() => import("./pages/theming/default-theme"));
const CustomizeTheme = lazy(() => import("./pages/theming/customize-theme"));
const CSSVariables = lazy(() => import("./pages/theming/css-variables"));
const ColorMode = lazy(() => import("./pages/theming/color-mode"));
const ButtonDoc = lazy(() => import("./pages/component-docs/general/button"));
const IconButtonDoc = lazy(() => import("./pages/component-docs/general/icon-button"));
const AspectRatioDoc = lazy(() => import("./pages/component-docs/layout/aspect-ratio"));
const BoxDoc = lazy(() => import("./pages/component-docs/layout/box"));
const CenterDoc = lazy(() => import("./pages/component-docs/layout/center"));
const ContainerDoc = lazy(() => import("./pages/component-docs/layout/container"));
const DividerDoc = lazy(() => import("./pages/component-docs/layout/divider"));
const FlexDoc = lazy(() => import("./pages/component-docs/layout/flex"));
const GridDoc = lazy(() => import("./pages/component-docs/layout/grid"));
const SimpleGridDoc = lazy(() => import("./pages/component-docs/layout/simple-grid"));
const StackDoc = lazy(() => import("./pages/component-docs/layout/stack"));
const HeadingDoc = lazy(() => import("./pages/component-docs/typography/heading"));
const TextDoc = lazy(() => import("./pages/component-docs/typography/text"));
const CheckboxDoc = lazy(() => import("./pages/component-docs/data-entry/checkbox"));
const FormControlDoc = lazy(() => import("./pages/component-docs/data-entry/form-control"));
const InputDoc = lazy(() => import("./pages/component-docs/data-entry/input"));
const RadioDoc = lazy(() => import("./pages/component-docs/data-entry/radio"));
const SelectDoc = lazy(() => import("./pages/component-docs/data-entry/select"));
const SwitchDoc = lazy(() => import("./pages/component-docs/data-entry/switch"));
const TextareaDoc = lazy(() => import("./pages/component-docs/data-entry/textarea"));
const AccordionDoc = lazy(() => import("./pages/component-docs/data-display/accordion"));
const AvatarDoc = lazy(() => import("./pages/component-docs/data-display/avatar"));
const BadgeDoc = lazy(() => import("./pages/component-docs/data-display/badge"));
const IconDoc = lazy(() => import("./pages/component-docs/data-display/icon"));
const ImageDoc = lazy(() => import("./pages/component-docs/data-display/image"));
const KbdDoc = lazy(() => import("./pages/component-docs/data-display/kbd"));
const ListDoc = lazy(() => import("./pages/component-docs/data-display/list"));
const TableDoc = lazy(() => import("./pages/component-docs/data-display/table"));
const TagDoc = lazy(() => import("./pages/component-docs/data-display/tag"));
const AnchorDoc = lazy(() => import("./pages/component-docs/navigation/anchor"));
const BreadcrumbDoc = lazy(() => import("./pages/component-docs/navigation/breadcrumb"));
const TabsDoc = lazy(() => import("./pages/component-docs/navigation/tabs"));
const AlertDoc = lazy(() => import("./pages/component-docs/feedback/alert"));
const CircularProgressDoc = lazy(() => import("./pages/component-docs/feedback/circular-progress"));
const ProgressDoc = lazy(() => import("./pages/component-docs/feedback/progress"));
const SkeletonDoc = lazy(() => import("./pages/component-docs/feedback/skeleton"));
const SpinnerDoc = lazy(() => import("./pages/component-docs/feedback/spinner"));
const NotificationDoc = lazy(() => import("./pages/component-docs/feedback/notification"));
const DrawerDoc = lazy(() => import("./pages/component-docs/overlay/drawer"));
const MenuDoc = lazy(() => import("./pages/component-docs/overlay/menu"));
const ModalDoc = lazy(() => import("./pages/component-docs/overlay/modal"));
const PopoverDoc = lazy(() => import("./pages/component-docs/overlay/popover"));
const TooltipDoc = lazy(() => import("./pages/component-docs/overlay/tooltip"));
const CloseButtonDoc = lazy(() => import("./pages/component-docs/others/close-button"));
function AppLayout() {
const isRouting = useIsRouting();
return (
<Flex direction="column">
<Portal>
<Box position="fixed" top="0" left="0" right="0" zIndex="$banner">
<Progress indeterminate size="xs" d={isRouting() ? "block" : "none"}>
<ProgressIndicator />
</Progress>
<HStack
bg="$danger9"
color="white"
px="$2"
fontWeight="$medium"
fontSize="$sm"
lineHeight="$5"
_dark={{
bg: "$danger3",
color: "$danger11",
}}
>
Hope UI is no longer maintained. Focus is on the developement of it's successor: <a href="https://github.com/kobaltedev/pigment">Pigment</a>.
</HStack>
</Box>
</Portal>
<Header />
<Container flexGrow={1}>
<Flex>
<MainNavigation />
<hope.main w="$full">
<Outlet />
</hope.main>
</Flex>
</Container>
</Flex>
);
}
export default function App() {
return (
<Suspense
fallback={
<Center mt="$4">
<Spinner size="lg" thickness="3px" color="$primary9" />
</Center>
}
>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/*all" element={<NotFound />} />
<Route path="/docs" element={<AppLayout />}>
<Route path="/getting-started" element={<Installation />} />
<Route path="/changelog" element={<Changelog />} />
<Route path="/features">
<Route path="/style-props" element={<StyleProps />} />
<Route path="/css-prop" element={<CSSProp />} />
<Route path="/create-styles" element={<CreateStyles />} />
<Route path="/responsive-styles" element={<ResponsiveStyles />} />
<Route path="/global-styles" element={<GlobalStyles />} />
<Route path="/hope-factory" element={<HopeFactory />} />
</Route>
<Route path="/theming">
<Route path="/default-theme" element={<DefaultTheme />} />
<Route path="/customize-theme" element={<CustomizeTheme />} />
<Route path="/css-variables" element={<CSSVariables />} />
<Route path="/color-mode" element={<ColorMode />} />
</Route>
<Route path="/general">
<Route path="/button" element={<ButtonDoc />} />
<Route path="/icon-button" element={<IconButtonDoc />} />
</Route>
<Route path="/layout">
<Route path="/aspect-ratio" element={<AspectRatioDoc />} />
<Route path="/box" element={<BoxDoc />} />
<Route path="/center" element={<CenterDoc />} />
<Route path="/container" element={<ContainerDoc />} />
<Route path="/divider" element={<DividerDoc />} />
<Route path="/flex" element={<FlexDoc />} />
<Route path="/grid" element={<GridDoc />} />
<Route path="/simple-grid" element={<SimpleGridDoc />} />
<Route path="/stack" element={<StackDoc />} />
</Route>
<Route path="/typography">
<Route path="/text" element={<TextDoc />} />
<Route path="/heading" element={<HeadingDoc />} />
</Route>
<Route path="/data-entry">
<Route path="/checkbox" element={<CheckboxDoc />} />
<Route path="/form-control" element={<FormControlDoc />} />
<Route path="/input" element={<InputDoc />} />
<Route path="/radio" element={<RadioDoc />} />
<Route path="/select" element={<SelectDoc />} />
<Route path="/switch" element={<SwitchDoc />} />
<Route path="/textarea" element={<TextareaDoc />} />
</Route>
<Route path="/data-display">
<Route path="/accordion" element={<AccordionDoc />} />
<Route path="/avatar" element={<AvatarDoc />} />
<Route path="/badge" element={<BadgeDoc />} />
<Route path="/icon" element={<IconDoc />} />
<Route path="/image" element={<ImageDoc />} />
<Route path="/kbd" element={<KbdDoc />} />
<Route path="/list" element={<ListDoc />} />
<Route path="/table" element={<TableDoc />} />
<Route path="/tag" element={<TagDoc />} />
</Route>
<Route path="/navigation">
<Route path="/anchor" element={<AnchorDoc />} />
<Route path="/breadcrumb" element={<BreadcrumbDoc />} />
<Route path="/tabs" element={<TabsDoc />} />
</Route>
<Route path="/feedback">
<Route path="/alert" element={<AlertDoc />} />
<Route path="/circular-progress" element={<CircularProgressDoc />} />
<Route path="/progress" element={<ProgressDoc />} />
<Route path="/skeleton" element={<SkeletonDoc />} />
<Route path="/spinner" element={<SpinnerDoc />} />
<Route path="/notification" element={<NotificationDoc />} />
</Route>
<Route path="/overlay">
<Route path="/drawer" element={<DrawerDoc />} />
<Route path="/menu" element={<MenuDoc />} />
<Route path="/modal" element={<ModalDoc />} />
<Route path="/popover" element={<PopoverDoc />} />
<Route path="/tooltip" element={<TooltipDoc />} />
</Route>
<Route path="/others">
<Route path="/close-button" element={<CloseButtonDoc />} />
</Route>
</Route>
</Routes>
</Suspense>
);
}
================================================
FILE: apps/docs/src/components/AppNavLink.tsx
================================================
import { Badge, hope } from "@hope-ui/solid";
import { NavLink } from "solid-app-router";
import { ComponentProps, Show, splitProps } from "solid-js";
const StyledNavLink = hope(NavLink, {
baseStyle: {
display: "inline-flex",
alignItems: "center",
justifyContent: "flex-start",
w: "$full",
height: "$8",
rounded: "$sm",
bg: "transparent",
px: "$3",
color: "$neutral12",
fontSize: "$sm",
lineHeight: "$none",
textDecoration: "none",
transition: "color 250ms, background-color 250ms",
_hover: {
bg: "$neutral4",
},
_activeLink: {
bg: "$primary4",
color: "$primary11",
fontWeight: "$medium",
},
},
});
type AppNavLinkProps = ComponentProps<typeof StyledNavLink> & {
isNew?: boolean;
};
export default function AppNavLink(props: AppNavLinkProps) {
const [local, others] = splitProps(props, ["children", "href", "isNew"]);
return (
<StyledNavLink href={local.href} {...others}>
{local.children}
<Show when={local.isNew}>
<Badge colorScheme="accent" ml="$1_5">
new
</Badge>
</Show>
</StyledNavLink>
);
}
================================================
FILE: apps/docs/src/components/BeatLoader.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const BeatLoader = createIcon({
viewBox: "0 0 120 30",
path: () => (
<g fill="currentColor">
<circle cx="15" cy="15" r="15">
<animate
attributeName="r"
from="15"
to="15"
begin="0s"
dur="0.8s"
values="15;9;15"
calcMode="linear"
repeatCount="indefinite"
/>
<animate
attributeName="fill-opacity"
from="1"
to="1"
begin="0s"
dur="0.8s"
values="1;.5;1"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle cx="60" cy="15" r="9" fill-opacity="0.3">
<animate
attributeName="r"
from="9"
to="9"
begin="0s"
dur="0.8s"
values="9;15;9"
calcMode="linear"
repeatCount="indefinite"
/>
<animate
attributeName="fill-opacity"
from="0.5"
to="0.5"
begin="0s"
dur="0.8s"
values=".5;1;.5"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle cx="105" cy="15" r="15">
<animate
attributeName="r"
from="15"
to="15"
begin="0s"
dur="0.8s"
values="15;9;15"
calcMode="linear"
repeatCount="indefinite"
/>
<animate
attributeName="fill-opacity"
from="1"
to="1"
begin="0s"
dur="0.8s"
values="1;.5;1"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
</g>
),
});
================================================
FILE: apps/docs/src/components/Code.tsx
================================================
import { hope } from "@hope-ui/solid";
const Code = hope("code", {
baseStyle: {
color: "$primary11",
fontFamily: "$mono",
fontSize: "0.95em",
},
});
export default Code;
================================================
FILE: apps/docs/src/components/CodeSnippet.tsx
================================================
import { Box, HTMLHopeProps } from "@hope-ui/solid";
import { mergeProps, splitProps } from "solid-js";
export interface CodeSnippetProps extends HTMLHopeProps<"div"> {
snippet?: string;
lang?: "bash" | "js" | "tsx" | "html" | "css";
}
export default function CodeSnippet(props: CodeSnippetProps) {
const propsWithDefault = mergeProps({ lang: "tsx" }, props);
const [local, others] = splitProps(propsWithDefault, ["snippet", "lang"]);
return (
<Box
borderRadius="$lg"
overflow="hidden"
position="relative"
fontSize="$sm"
w="$full"
{...others}
>
<pre class="line-numbers">
<code class={`language-${local.lang}`}>{local.snippet}</code>
</pre>
</Box>
);
}
================================================
FILE: apps/docs/src/components/ColorScale.tsx
================================================
import {
Box,
Grid,
GridItem,
GridProps,
hope,
HStack,
SystemConfig,
useTheme,
VStack,
} from "@hope-ui/solid";
import { For, splitProps } from "solid-js";
export interface ColorScaleItem {
name: string;
token: keyof SystemConfig["theme"]["colors"];
}
type ColorScaleProps = GridProps & {
scale: ColorScaleItem[];
};
export function ColorScale(props: ColorScaleProps) {
const theme = useTheme();
const [local, others] = splitProps(props, ["scale"]);
return (
<Grid
templateColumns={{
"@initial": "repeat(2, minmax(0, 1fr))",
"@md": "repeat(3, minmax(0, 1fr))",
}}
gap="$6"
{...others}
>
<For each={local.scale}>
{item => (
<GridItem>
<HStack spacing="$3">
<Box
boxSize={{ "@initial": "$10", "@sm": "$12" }}
rounded="$md"
shadow="$inner"
bg={theme().colors[item.token].value}
/>
<VStack alignItems="flex-start">
<hope.span fontSize="$sm" fontWeight="$semibold">
{item.name}
</hope.span>
<hope.span fontSize="$sm" textTransform="uppercase">
{theme().colors[item.token].value}
</hope.span>
</VStack>
</HStack>
</GridItem>
)}
</For>
</Grid>
);
}
================================================
FILE: apps/docs/src/components/ContextualNav.tsx
================================================
import { Anchor, Box, Heading, HTMLHopeProps, VStack } from "@hope-ui/solid";
import { useLocation } from "solid-app-router";
import { For, splitProps } from "solid-js";
export interface ContextualNavLink {
href: string;
label: string;
indent?: boolean;
}
export type ContextualNavProps = HTMLHopeProps<"div", { links?: ContextualNavLink[] }>;
export default function ContextualNav(props: ContextualNavProps) {
const [local, others] = splitProps(props, ["links", "children"]);
const location = useLocation();
const isActiveLink = (href: string) => {
return location.hash === href.replace("#", "");
};
return (
<Box
as="nav"
position="sticky"
overflowY="auto"
top="92px"
display={{
"@initial": "none",
"@xl": "block",
}}
flexShrink="0"
maxW="$60"
height="calc(100vh - 92px)"
p="$6"
{...others}
>
<Heading as="h3" mb="$3">
On this page
</Heading>
<VStack alignItems="flex-start" spacing="$2">
<For each={local.links}>
{link => (
<Anchor
fontSize="$sm"
href={link.href}
fontWeight={isActiveLink(link.href) ? "$semibold" : "$normal"}
ml={link.indent ? "$3" : 0}
>
{link.label}
</Anchor>
)}
</For>
</VStack>
</Box>
);
}
================================================
FILE: apps/docs/src/components/Footer.tsx
================================================
import { Anchor, Center, HStack, Text } from "@hope-ui/solid";
import { IconGithub } from "@/icons/IconGithub";
import { IconTwitter } from "@/icons/IconTwitter";
export default function Footer() {
return (
<Center as="footer" flexDirection="column" h="$40">
<Text mb="$3">Made in 🇫🇷 by Fabien MARIE-LOUISE</Text>
<HStack spacing="$3">
<Anchor external href="https://github.com/fabien-ml">
<IconGithub boxSize="$5" color="$neutral11" />
</Anchor>
<Anchor external href="https://twitter.com/MLFabien">
<IconTwitter boxSize="$5" color="$neutral11" />
</Anchor>
</HStack>
</Center>
);
}
================================================
FILE: apps/docs/src/components/Header.tsx
================================================
import {
Box,
Container,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerHeader,
DrawerOverlay,
hope,
HStack,
IconButton,
Tag,
Text,
useColorMode,
useColorModeValue,
} from "@hope-ui/solid";
import { Link } from "solid-app-router";
import { createSignal } from "solid-js";
import { IconGithub } from "@/icons/IconGithub";
import { IconMenu } from "@/icons/IconMenu";
import { IconMoon } from "@/icons/IconMoon";
import { IconSun } from "@/icons/IconSun";
import MainNavContent from "./MainNavContent";
export default function Header() {
const [isMainNavOverlayVisible, setIsMainNavOverlayVisible] = createSignal(false);
const { toggleColorMode } = useColorMode();
const headerBgColor = useColorModeValue("white", "$neutral1");
const colorModeButtonIcon = useColorModeValue(<IconMoon />, <IconSun />);
const headerShadow = useColorModeValue("$sm", "$none");
const toggleMainNavOverlay = () => {
setIsMainNavOverlayVisible(prev => !prev);
};
const onNavKeyup = (event: KeyboardEvent) => {
if (isMainNavOverlayVisible() && event.key === "Enter") {
setIsMainNavOverlayVisible(false);
}
};
return (
<Box
as="header"
position="sticky"
top="20px"
left="0"
right="0"
zIndex="$sticky"
height="72px"
flexShrink={0}
shadow={headerShadow()}
bg={headerBgColor()}
>
<Container h="$full">
<HStack h="$full" px="$4" justifyContent="space-between">
<HStack spacing="$2">
<IconButton
display={{ "@lg": "none" }}
aria-label="Open main navigation"
variant="ghost"
colorScheme="neutral"
size="sm"
rounded="$md"
fontSize="$lg"
icon={<IconMenu />}
onClick={toggleMainNavOverlay}
/>
<Text as={Link} href="/" textDecoration="none" letterSpacing="$wide" fontSize="$2xl">
<hope.span color="$neutral12" fontWeight="$medium" mr="$1">
Hope
</hope.span>
<hope.span color="$primary9" fontWeight="$bold">
UI
</hope.span>
</Text>
<Tag size="sm" rounded="$sm" fontWeight="$semibold">
v0.6.7
</Tag>
</HStack>
<HStack spacing="$2">
<IconButton
as="a"
href="https://github.com/fabien-ml/hope-ui"
target="_blank"
rel="noopener noreferrer"
aria-label="Go to the github repository"
variant="ghost"
colorScheme="neutral"
size="sm"
rounded="$md"
fontSize="$lg"
icon={<IconGithub />}
/>
<IconButton
aria-label="Toggle color mode"
variant="ghost"
colorScheme="neutral"
size="sm"
rounded="$md"
fontSize="$lg"
icon={colorModeButtonIcon}
onClick={toggleColorMode}
/>
</HStack>
</HStack>
</Container>
<Drawer
placement="left"
opened={isMainNavOverlayVisible()}
onClose={() => setIsMainNavOverlayVisible(false)}
>
<DrawerOverlay />
<DrawerContent>
<DrawerHeader fontWeight="$bold" fontSize="$2xl">
Hope UI
</DrawerHeader>
<DrawerCloseButton />
<DrawerBody>
<hope.nav d="flex" flexDirection="column" onKeyUp={onNavKeyup}>
<MainNavContent />
</hope.nav>
</DrawerBody>
</DrawerContent>
</Drawer>
</Box>
);
}
================================================
FILE: apps/docs/src/components/MainNavContent.tsx
================================================
import { VStack } from "@hope-ui/solid";
import AppNavLink from "./AppNavLink";
import Code from "./Code";
import MainNavSubtitle from "./MainNavSubtitle";
import MainNavTitle from "./MainNavTitle";
export default function MainNavContent() {
return (
<>
<MainNavTitle mb="$2">Getting started</MainNavTitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/getting-started">Installation</AppNavLink>
<AppNavLink href="/docs/changelog">Changelog</AppNavLink>
</VStack>
<MainNavSubtitle mb="$2">Features</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/features/style-props">Style props</AppNavLink>
<AppNavLink href="/docs/features/css-prop">
The <Code mx="$1">css</Code> prop
</AppNavLink>
<AppNavLink href="/docs/features/create-styles">Create styles</AppNavLink>
<AppNavLink href="/docs/features/responsive-styles">Responsive styles</AppNavLink>
<AppNavLink href="/docs/features/global-styles">Global styles</AppNavLink>
<AppNavLink href="/docs/features/hope-factory">Hope factory</AppNavLink>
</VStack>
<MainNavSubtitle mb="$2">Theming</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/theming/default-theme">Default theme</AppNavLink>
<AppNavLink href="/docs/theming/customize-theme">Customize theme</AppNavLink>
<AppNavLink href="/docs/theming/css-variables">CSS variables</AppNavLink>
<AppNavLink href="/docs/theming/color-mode">Color mode</AppNavLink>
</VStack>
<MainNavTitle mb="$3">Components</MainNavTitle>
<MainNavSubtitle mb="$2">General</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/general/button">Button</AppNavLink>
<AppNavLink href="/docs/general/icon-button">IconButton</AppNavLink>
</VStack>
<MainNavSubtitle mb="$2">Layout</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/layout/aspect-ratio">AspectRatio</AppNavLink>
<AppNavLink href="/docs/layout/box">Box</AppNavLink>
<AppNavLink href="/docs/layout/center">Center</AppNavLink>
<AppNavLink href="/docs/layout/container">Container</AppNavLink>
<AppNavLink href="/docs/layout/divider">Divider</AppNavLink>
<AppNavLink href="/docs/layout/flex">Flex</AppNavLink>
<AppNavLink href="/docs/layout/grid">Grid</AppNavLink>
<AppNavLink href="/docs/layout/simple-grid">SimpleGrid</AppNavLink>
<AppNavLink href="/docs/layout/stack">Stack</AppNavLink>
</VStack>
<MainNavSubtitle mb="$2">Typography</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/typography/heading">Heading</AppNavLink>
<AppNavLink href="/docs/typography/text">Text</AppNavLink>
</VStack>
<MainNavSubtitle mb="$2">Data entry</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/data-entry/checkbox">Checkbox</AppNavLink>
{/* <AppNavLink href="/docs/data-display/date-picker">DatePicker</AppNavLink> */}
<AppNavLink href="/docs/data-entry/form-control">FormControl</AppNavLink>
<AppNavLink href="/docs/data-entry/input">Input</AppNavLink>
{/* <AppNavLink href="/docs/data-entry/number-input">NumberInput</AppNavLink> */}
{/* <AppNavLink href="/docs/data-entry/password-input">PasswordInput</AppNavLink> */}
{/* <AppNavLink href="/docs/data-entry/file-input">FileInput</AppNavLink> */}
<AppNavLink href="/docs/data-entry/radio">Radio</AppNavLink>
<AppNavLink href="/docs/data-entry/select">Select</AppNavLink>
{/* <AppNavLink href="/docs/data-entry/slider">Slider</AppNavLink> */}
<AppNavLink href="/docs/data-entry/switch">Switch</AppNavLink>
<AppNavLink href="/docs/data-entry/textarea">Textarea</AppNavLink>
{/* <AppNavLink href="/docs/data-entry/time-picker">TimePicker</AppNavLink> */}
</VStack>
<MainNavSubtitle mb="$2">Data display</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/data-display/accordion">Accordion</AppNavLink>
<AppNavLink href="/docs/data-display/avatar">Avatar</AppNavLink>
<AppNavLink href="/docs/data-display/badge">Badge</AppNavLink>
<AppNavLink href="/docs/data-display/icon">Icon</AppNavLink>
<AppNavLink href="/docs/data-display/image">Image</AppNavLink>
<AppNavLink href="/docs/data-display/kbd">Kbd</AppNavLink>
<AppNavLink href="/docs/data-display/list">List</AppNavLink>
<AppNavLink href="/docs/data-display/table">Table</AppNavLink>
<AppNavLink href="/docs/data-display/tag">Tag</AppNavLink>
{/* <AppNavLink href="/docs/data-display/timeline">Timeline</AppNavLink> */}
</VStack>
<MainNavSubtitle mb="$2">Navigation</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/navigation/anchor">Anchor</AppNavLink>
<AppNavLink href="/docs/navigation/breadcrumb">Breadcrumb</AppNavLink>
{/* <AppNavLink href="/docs/navigation/pagination">Pagination</AppNavLink> */}
{/* <AppNavLink href="/docs/navigation/stepper">Stepper</AppNavLink> */}
<AppNavLink href="/docs/navigation/tabs">Tabs</AppNavLink>
</VStack>
<MainNavSubtitle mb="$2">Feedback</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/feedback/alert">Alert</AppNavLink>
<AppNavLink href="/docs/feedback/circular-progress">CircularProgress</AppNavLink>
<AppNavLink href="/docs/feedback/progress">Progress</AppNavLink>
<AppNavLink href="/docs/feedback/skeleton">Skeleton</AppNavLink>
<AppNavLink href="/docs/feedback/spinner">Spinner</AppNavLink>
<AppNavLink href="/docs/feedback/notification">Notification</AppNavLink>
</VStack>
<MainNavSubtitle mb="$2">Overlay</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1" mb="$6">
<AppNavLink href="/docs/overlay/drawer">Drawer</AppNavLink>
<AppNavLink href="/docs/overlay/menu">Menu</AppNavLink>
<AppNavLink href="/docs/overlay/modal">Modal</AppNavLink>
<AppNavLink href="/docs/overlay/popover">Popover</AppNavLink>
<AppNavLink href="/docs/overlay/tooltip">Tooltip</AppNavLink>
</VStack>
<MainNavSubtitle mb="$2">Others</MainNavSubtitle>
<VStack alignItems="flex-start" spacing="$1">
<AppNavLink href="/docs/others/close-button">CloseButton</AppNavLink>
</VStack>
</>
);
}
================================================
FILE: apps/docs/src/components/MainNavSubtitle.tsx
================================================
import { ElementType, Text, TextProps } from "@hope-ui/solid";
export default function MainNavSubtitle<C extends ElementType = "p">(props: TextProps<C>) {
return (
<Text
as="span"
color="$primary10"
fontSize="$xs"
fontWeight="$semibold"
textTransform="uppercase"
{...props}
/>
);
}
================================================
FILE: apps/docs/src/components/MainNavTitle.tsx
================================================
import { ElementType, Text, TextProps } from "@hope-ui/solid";
export default function MainNavTitle<C extends ElementType = "p">(props: TextProps<C>) {
return <Text as="span" fontSize="$sm" fontWeight="$bold" textTransform="uppercase" {...props} />;
}
================================================
FILE: apps/docs/src/components/MainNavigation.tsx
================================================
import { Flex } from "@hope-ui/solid";
import MainNavContent from "./MainNavContent";
export default function MainNavigation() {
return (
<Flex
as="nav"
class="hide-scrollbar"
position="sticky"
top="92px"
overflowY="auto"
display={{
"@initial": "none",
"@lg": "flex",
}}
direction="column"
flexShrink="0"
maxW="$60"
height="calc(100vh - 92px)"
p="$6"
>
<MainNavContent />
</Flex>
);
}
================================================
FILE: apps/docs/src/components/PageLayout.tsx
================================================
import { Box, Flex, HStack, HTMLHopeProps, Stack, Text, VStack } from "@hope-ui/solid";
import { Link } from "solid-app-router";
import { Show, splitProps } from "solid-js";
import { IconArrowLeft } from "@/icons/IconArrowLeft";
import { IconArrowRight } from "@/icons/IconArrowRight";
import ContextualNav, { ContextualNavLink } from "./ContextualNav";
import Footer from "./Footer";
type PageLayoutProps = HTMLHopeProps<
"div",
{
previousLink?: ContextualNavLink;
nextLink?: ContextualNavLink;
contextualNavLinks?: ContextualNavLink[];
}
>;
export default function PageLayout(props: PageLayoutProps) {
const [local, others] = splitProps(props, [
"children",
"previousLink",
"nextLink",
"contextualNavLinks",
]);
return (
<Flex h="$full" {...others}>
<Flex mt="$4" mx="auto" w="$full" maxW="75ch" direction="column">
<Box w="$full" py="$6" px="$4" flexGrow="1">
{local.children}
</Box>
<Stack
direction={{
"@initial": "column",
"@sm": "row",
}}
rowGap={{
"@initial": "$4",
"@sm": 0,
}}
columnGap={{
"@initial": 0,
"@sm": "$4",
}}
justifyContent="center"
alignItems="stretch"
m="$6"
>
<Show when={local.previousLink}>
<HStack
as={Link}
href={local.previousLink?.href ?? ""}
justifyContent="space-between"
w="$full"
textDecoration="none"
border="1px solid $neutral4"
rounded="$md"
p="$4"
transition="background-color 250ms"
_hover={{
borderColor: "$neutral5",
bg: "$neutral2",
}}
>
<IconArrowLeft boxSize="$6" />
<VStack alignItems="flex-end" fontWeight="$normal">
<Text size="sm" color="$neutral11">
Previous
</Text>
<Text size="lg">{local.previousLink?.label}</Text>
</VStack>
</HStack>
</Show>
<Show when={local.nextLink}>
<HStack
as={Link}
href={local.nextLink?.href ?? ""}
justifyContent="space-between"
w="$full"
border="1px solid $neutral4"
rounded="$md"
p="$4"
textDecoration="none"
transition="background-color 250ms"
_hover={{
borderColor: "$neutral5",
bg: "$neutral2",
}}
>
<VStack alignItems="flex-start" fontWeight="$normal">
<Text size="sm" color="$neutral11">
Next
</Text>
<Text size="lg">{local.nextLink?.label}</Text>
</VStack>
<IconArrowRight boxSize="$6" />
</HStack>
</Show>
</Stack>
<Footer />
</Flex>
<ContextualNav links={local.contextualNavLinks} />
</Flex>
);
}
================================================
FILE: apps/docs/src/components/PageTitle.tsx
================================================
import { Heading, HTMLHopeProps } from "@hope-ui/solid";
export default function PageTitle(props: HTMLHopeProps<"h1">) {
return <Heading as="h1" size="3xl" fontWeight="$bold" mb="$6" {...props} />;
}
================================================
FILE: apps/docs/src/components/Preview.tsx
================================================
import { Box } from "@hope-ui/solid";
import { Show, splitProps } from "solid-js";
import CodeSnippet, { CodeSnippetProps } from "./CodeSnippet";
export function Preview(props: CodeSnippetProps) {
const [local, others] = splitProps(props, ["lang", "snippet", "children"]);
return (
<Box {...others}>
<Box
border="1px solid $neutral5"
p="$4"
borderTopRadius="$lg"
borderBottomRadius={local.snippet ? "$none" : "$lg"}
overflowY="auto"
>
{local.children}
</Box>
<Show when={local.snippet}>
<CodeSnippet lang={local.lang} snippet={local.snippet} borderTopRadius="$none" />
</Show>
</Box>
);
}
================================================
FILE: apps/docs/src/components/PropsTable.tsx
================================================
import { Table, TableProps, Tag, Tbody, Td, Th, Thead, Tr, VStack } from "@hope-ui/solid";
import { For, Show, splitProps } from "solid-js";
export interface PropsTableItem {
name: string;
description: string;
type: string;
required?: boolean;
defaultValue?: string;
}
type PropsTableProps = TableProps<"table"> & { items: PropsTableItem[] };
export function PropsTable(props: PropsTableProps) {
const [local, others] = splitProps(props, ["items"]);
return (
<VStack spacing="$8" {...others}>
<For each={local.items}>
{item => (
<Table dense>
<Thead bg="$neutral2">
<Tr>
<Th fontSize="$base" letterSpacing="$normal" textTransform="none" colSpan={2}>
{item.name}
<Show when={item.required}>
<Tag ml="$1_5" colorScheme="danger" rounded="$sm">
required
</Tag>
</Show>
</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td fontWeight="$medium" maxW="100px" w="20%">
Description
</Td>
<Td>{item.description}</Td>
</Tr>
<Tr>
<Td fontWeight="$medium" maxW="100px" w="20%">
Type
</Td>
<Td
fontFamily="$mono"
fontSize="$sm"
color="$primary11"
css={{ wordBreak: "break-word" }}
>
{item.type}
</Td>
</Tr>
<Show when={item.defaultValue}>
<Tr>
<Td fontWeight="$medium" maxW="100px" w="20%">
Default
</Td>
<Td>{item.defaultValue}</Td>
</Tr>
</Show>
</Tbody>
</Table>
)}
</For>
</VStack>
);
// return (
// <hope.div overflowX="auto" {...others}>
// <Table dense>
// <Thead bg="$neutral2">
// <Tr>
// <Th>Prop</Th>
// <Th>Description</Th>
// <Th>Type</Th>
// <Th>Default</Th>
// </Tr>
// </Thead>
// <Tbody>
// <For each={local.items}>
// {item => (
// <Tr>
// <Td
// fontFamily="$mono"
// fontWeight="$semibold"
// color="$neutral12"
// css={{ whiteSpace: "nowrap" }}
// >
// {item.name}
// <Show when={item.required}>
// <Tag ml="$1" size="sm" colorScheme="danger" rounded="$sm" fontFamily="$sans">
// required
// </Tag>
// </Show>
// </Td>
// <Td>{item.description}</Td>
// <Td fontFamily="$mono" fontSize="$sm" color="$primary11" maxW="350px">
// {item.type}
// </Td>
// <Td fontFamily="$mono">{item.defaultValue}</Td>
// </Tr>
// )}
// </For>
// </Tbody>
// </Table>
// </hope.div>
// );
}
================================================
FILE: apps/docs/src/components/SectionSubtitle.tsx
================================================
import { Heading, HTMLHopeProps } from "@hope-ui/solid";
export default function SectionSubtitle(props: HTMLHopeProps<"h2">) {
return <Heading as="h3" size="lg" mb="$3" {...props} />;
}
================================================
FILE: apps/docs/src/components/SectionTitle.tsx
================================================
import { Heading, HTMLHopeProps } from "@hope-ui/solid";
export default function SectionTitle(props: HTMLHopeProps<"h2">) {
return <Heading as="h2" size="2xl" mb="$4" {...props} />;
}
================================================
FILE: apps/docs/src/components/StylePropsTable.tsx
================================================
import { hope, Table, TableProps, Tbody, Td, Th, Thead, Tr } from "@hope-ui/solid";
import { For, splitProps } from "solid-js";
export interface StylePropsTableItem {
prop: string;
cssProperty: string;
themeToken?: string;
}
type StylePropsTableProps = TableProps<"table"> & { items: StylePropsTableItem[] };
export function StylePropsTable(props: StylePropsTableProps) {
const [local, others] = splitProps(props, ["items"]);
return (
<hope.div overflowX="auto" {...others}>
<Table dense>
<Thead bg="$neutral2">
<Tr>
<Th>Prop</Th>
<Th>CSS property</Th>
<Th css={{ whiteSpace: "nowrap" }}>Theme token</Th>
</Tr>
</Thead>
<Tbody color="$primary11" fontFamily="$mono">
<For each={local.items}>
{item => (
<Tr>
<Td>{item.prop}</Td>
<Td>{item.cssProperty}</Td>
<Td color={item.themeToken ? "inherit" : "$neutral12"}>
{item.themeToken || "none"}
</Td>
</Tr>
)}
</For>
</Tbody>
</Table>
</hope.div>
);
}
================================================
FILE: apps/docs/src/icons/IconAccessibility.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconAccessibility = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M0.877197 7.49984C0.877197 3.84216 3.84234 0.877014 7.50003 0.877014C11.1577 0.877014 14.1229 3.84216 14.1229 7.49984C14.1229 11.1575 11.1577 14.1227 7.50003 14.1227C3.84234 14.1227 0.877197 11.1575 0.877197 7.49984ZM7.50003 1.82701C4.36702 1.82701 1.8272 4.36683 1.8272 7.49984C1.8272 10.6328 4.36702 13.1727 7.50003 13.1727C10.633 13.1727 13.1729 10.6328 13.1729 7.49984C13.1729 4.36683 10.633 1.82701 7.50003 1.82701ZM7.12457 9.00001C7.06994 9.12735 6.33165 11.9592 6.33165 11.9592C6.26018 12.226 5.98601 12.3843 5.71928 12.3128C5.45255 12.2413 5.29425 11.9672 5.36573 11.7004C5.36573 11.7004 6.24661 8.87268 6.24661 8.27007V6.80099L4.28763 6.27608C4.0209 6.20461 3.86261 5.93045 3.93408 5.66371C4.00555 5.39698 4.27972 5.23869 4.54645 5.31016C4.54645 5.31016 6.20042 5.87268 6.84579 5.87268H8.15505C8.80042 5.87268 10.4534 5.31042 10.4534 5.31042C10.7202 5.23895 10.9943 5.39724 11.0658 5.66397C11.1373 5.93071 10.979 6.20487 10.7122 6.27635L8.74661 6.80303V8.27007C8.74661 8.87268 9.62663 11.6971 9.62663 11.6971C9.6981 11.9639 9.5398 12.238 9.27307 12.3095C9.00634 12.381 8.73217 12.2227 8.6607 11.956C8.6607 11.956 7.91994 9.12735 7.86866 9.00001C7.81994 8.87268 7.65006 8.87268 7.65006 8.87268H7.34317C7.34317 8.87268 7.16994 8.87268 7.12457 9.00001ZM7.50043 5.12007C8.12175 5.12007 8.62543 4.61639 8.62543 3.99507C8.62543 3.37375 8.12175 2.87007 7.50043 2.87007C6.87911 2.87007 6.37543 3.37375 6.37543 3.99507C6.37543 4.61639 6.87911 5.12007 7.50043 5.12007Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconArrowLeft.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconArrowLeft = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconArrowRight.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconArrowRight = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconCaretDown.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconCaretDown = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconCheck.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconCheck = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconChevronRight.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconChevronRight = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconCircleDashed.tsx
================================================
import { createIcon } from "@hope-ui/solid";
// tabler-circle-dashed
export const IconCircleDashed = createIcon({
path: () => (
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8.56 3.69a9 9 0 0 0-2.92 1.95M3.69 8.56A9 9 0 0 0 3 12m.69 3.44a9 9 0 0 0 1.95 2.92m2.92 1.95A9 9 0 0 0 12 21m3.44-.69a9 9 0 0 0 2.92-1.95m1.95-2.92A9 9 0 0 0 21 12m-.69-3.44a9 9 0 0 0-1.95-2.92m-2.92-1.95A9 9 0 0 0 12 3"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconCode.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconCode = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconComponent.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconComponent = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M4.67129 3.14634C4.47603 3.34161 4.47603 3.65819 4.67129 3.85345L7.14616 6.32833C7.34142 6.52359 7.65801 6.52359 7.85327 6.32833L10.3281 3.85345C10.5234 3.65819 10.5234 3.34161 10.3281 3.14634L7.85327 0.671471C7.65801 0.476209 7.34142 0.476209 7.14616 0.671471L4.67129 3.14634ZM7.49971 5.26766L5.73195 3.4999L7.49971 1.73213L9.26748 3.4999L7.49971 5.26766ZM8.67129 7.14634C8.47603 7.34161 8.47603 7.65819 8.67129 7.85345L11.1462 10.3283C11.3414 10.5236 11.658 10.5236 11.8533 10.3283L14.3281 7.85345C14.5234 7.65819 14.5234 7.34161 14.3281 7.14634L11.8533 4.67147C11.658 4.47621 11.3414 4.47621 11.1462 4.67147L8.67129 7.14634ZM11.4997 9.26766L9.73195 7.4999L11.4997 5.73213L13.2675 7.4999L11.4997 9.26766ZM4.67129 11.8535C4.47603 11.6582 4.47603 11.3416 4.67129 11.1463L7.14616 8.67147C7.34142 8.47621 7.65801 8.47621 7.85327 8.67147L10.3281 11.1463C10.5234 11.3416 10.5234 11.6582 10.3281 11.8535L7.85327 14.3283C7.65801 14.5236 7.34142 14.5236 7.14616 14.3283L4.67129 11.8535ZM5.73195 11.4999L7.49971 13.2677L9.26748 11.4999L7.49971 9.73213L5.73195 11.4999ZM0.671288 7.14649C0.476026 7.34175 0.476026 7.65834 0.671288 7.8536L3.14616 10.3285C3.34142 10.5237 3.65801 10.5237 3.85327 10.3285L6.32814 7.8536C6.5234 7.65834 6.5234 7.34175 6.32814 7.14649L3.85327 4.67162C3.65801 4.47636 3.34142 4.47636 3.14616 4.67162L0.671288 7.14649ZM3.49972 9.26781L1.73195 7.50005L3.49972 5.73228L5.26748 7.50005L3.49972 9.26781Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconEdit.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconEdit = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M12.1464 1.14645C12.3417 0.951184 12.6583 0.951184 12.8535 1.14645L14.8535 3.14645C15.0488 3.34171 15.0488 3.65829 14.8535 3.85355L10.9109 7.79618C10.8349 7.87218 10.7471 7.93543 10.651 7.9835L6.72359 9.94721C6.53109 10.0435 6.29861 10.0057 6.14643 9.85355C5.99425 9.70137 5.95652 9.46889 6.05277 9.27639L8.01648 5.34897C8.06455 5.25283 8.1278 5.16507 8.2038 5.08907L12.1464 1.14645ZM12.5 2.20711L8.91091 5.79618L7.87266 7.87267L8.12731 8.12732L10.2038 7.08907L13.7929 3.5L12.5 2.20711ZM9.99998 2L8.99998 3H4.9C4.47171 3 4.18056 3.00039 3.95552 3.01877C3.73631 3.03668 3.62421 3.06915 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3.06915 3.62421 3.03669 3.73631 3.01878 3.95552C3.00039 4.18056 3 4.47171 3 4.9V11.1C3 11.5283 3.00039 11.8194 3.01878 12.0445C3.03669 12.2637 3.06915 12.3758 3.10899 12.454C3.20487 12.6422 3.35785 12.7951 3.54601 12.891C3.62421 12.9309 3.73631 12.9633 3.95552 12.9812C4.18056 12.9996 4.47171 13 4.9 13H11.1C11.5283 13 11.8194 12.9996 12.0445 12.9812C12.2637 12.9633 12.3758 12.9309 12.454 12.891C12.6422 12.7951 12.7951 12.6422 12.891 12.454C12.9309 12.3758 12.9633 12.2637 12.9812 12.0445C12.9996 11.8194 13 11.5283 13 11.1V6.99998L14 5.99998V11.1V11.1207C14 11.5231 14 11.8553 13.9779 12.1259C13.9549 12.407 13.9057 12.6653 13.782 12.908C13.5903 13.2843 13.2843 13.5903 12.908 13.782C12.6653 13.9057 12.407 13.9549 12.1259 13.9779C11.8553 14 11.5231 14 11.1207 14H11.1H4.9H4.87934C4.47686 14 4.14468 14 3.87409 13.9779C3.59304 13.9549 3.33469 13.9057 3.09202 13.782C2.7157 13.5903 2.40973 13.2843 2.21799 12.908C2.09434 12.6653 2.04506 12.407 2.0221 12.1259C1.99999 11.8553 1.99999 11.5231 2 11.1207V11.1206V11.1V4.9V4.87935V4.87932V4.87931C1.99999 4.47685 1.99999 4.14468 2.0221 3.87409C2.04506 3.59304 2.09434 3.33469 2.21799 3.09202C2.40973 2.71569 2.7157 2.40973 3.09202 2.21799C3.33469 2.09434 3.59304 2.04506 3.87409 2.0221C4.14468 1.99999 4.47685 1.99999 4.87932 2H4.87935H4.9H9.99998Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconEmail.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconEmail = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M1 2C0.447715 2 0 2.44772 0 3V12C0 12.5523 0.447715 13 1 13H14C14.5523 13 15 12.5523 15 12V3C15 2.44772 14.5523 2 14 2H1ZM1 3L14 3V3.92494C13.9174 3.92486 13.8338 3.94751 13.7589 3.99505L7.5 7.96703L1.24112 3.99505C1.16621 3.94751 1.0826 3.92486 1 3.92494V3ZM1 4.90797V12H14V4.90797L7.74112 8.87995C7.59394 8.97335 7.40606 8.97335 7.25888 8.87995L1 4.90797Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconExternalLink.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconExternalLink = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconGear.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconGear = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M7.07095 0.650238C6.67391 0.650238 6.32977 0.925096 6.24198 1.31231L6.0039 2.36247C5.6249 2.47269 5.26335 2.62363 4.92436 2.81013L4.01335 2.23585C3.67748 2.02413 3.23978 2.07312 2.95903 2.35386L2.35294 2.95996C2.0722 3.2407 2.0232 3.6784 2.23493 4.01427L2.80942 4.92561C2.62307 5.2645 2.47227 5.62594 2.36216 6.00481L1.31209 6.24287C0.924883 6.33065 0.650024 6.6748 0.650024 7.07183V7.92897C0.650024 8.32601 0.924883 8.67015 1.31209 8.75794L2.36228 8.99603C2.47246 9.375 2.62335 9.73652 2.80979 10.0755L2.2354 10.9867C2.02367 11.3225 2.07267 11.7602 2.35341 12.041L2.95951 12.6471C3.24025 12.9278 3.67795 12.9768 4.01382 12.7651L4.92506 12.1907C5.26384 12.377 5.62516 12.5278 6.0039 12.6379L6.24198 13.6881C6.32977 14.0753 6.67391 14.3502 7.07095 14.3502H7.92809C8.32512 14.3502 8.66927 14.0753 8.75705 13.6881L8.99505 12.6383C9.37411 12.5282 9.73573 12.3773 10.0748 12.1909L10.986 12.7653C11.3218 12.977 11.7595 12.928 12.0403 12.6473L12.6464 12.0412C12.9271 11.7604 12.9761 11.3227 12.7644 10.9869L12.1902 10.076C12.3768 9.73688 12.5278 9.37515 12.638 8.99596L13.6879 8.75794C14.0751 8.67015 14.35 8.32601 14.35 7.92897V7.07183C14.35 6.6748 14.0751 6.33065 13.6879 6.24287L12.6381 6.00488C12.528 5.62578 12.3771 5.26414 12.1906 4.92507L12.7648 4.01407C12.9766 3.6782 12.9276 3.2405 12.6468 2.95975L12.0407 2.35366C11.76 2.07292 11.3223 2.02392 10.9864 2.23565L10.0755 2.80989C9.73622 2.62328 9.37437 2.47229 8.99505 2.36209L8.75705 1.31231C8.66927 0.925096 8.32512 0.650238 7.92809 0.650238H7.07095ZM4.92053 3.81251C5.44724 3.44339 6.05665 3.18424 6.71543 3.06839L7.07095 1.50024H7.92809L8.28355 3.06816C8.94267 3.18387 9.5524 3.44302 10.0794 3.81224L11.4397 2.9547L12.0458 3.56079L11.1882 4.92117C11.5573 5.44798 11.8164 6.0575 11.9321 6.71638L13.5 7.07183V7.92897L11.932 8.28444C11.8162 8.94342 11.557 9.55301 11.1878 10.0798L12.0453 11.4402L11.4392 12.0462L10.0787 11.1886C9.55192 11.5576 8.94241 11.8166 8.28355 11.9323L7.92809 13.5002H7.07095L6.71543 11.932C6.0569 11.8162 5.44772 11.5572 4.92116 11.1883L3.56055 12.046L2.95445 11.4399L3.81213 10.0794C3.4431 9.55266 3.18403 8.94326 3.06825 8.2845L1.50002 7.92897V7.07183L3.06818 6.71632C3.18388 6.05765 3.44283 5.44833 3.81171 4.92165L2.95398 3.561L3.56008 2.95491L4.92053 3.81251ZM9.02496 7.50008C9.02496 8.34226 8.34223 9.02499 7.50005 9.02499C6.65786 9.02499 5.97513 8.34226 5.97513 7.50008C5.97513 6.65789 6.65786 5.97516 7.50005 5.97516C8.34223 5.97516 9.02496 6.65789 9.02496 7.50008ZM9.92496 7.50008C9.92496 8.83932 8.83929 9.92499 7.50005 9.92499C6.1608 9.92499 5.07513 8.83932 5.07513 7.50008C5.07513 6.16084 6.1608 5.07516 7.50005 5.07516C8.83929 5.07516 9.92496 6.16084 9.92496 7.50008Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconGithub.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconGithub = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconHamburgerMenu.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconHamburgerMenu = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconMenu.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconMenu = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconMinus.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconMinus = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M2.25 7.5C2.25 7.22386 2.47386 7 2.75 7H12.25C12.5261 7 12.75 7.22386 12.75 7.5C12.75 7.77614 12.5261 8 12.25 8H2.75C2.47386 8 2.25 7.77614 2.25 7.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconMoon.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconMoon = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.9.5a.4.4 0 0 0-.8 0v.6h-.6a.4.4 0 1 0 0 .8h.6v.6a.4.4 0 1 0 .8 0v-.6h.6a.4.4 0 0 0 0-.8h-.6V.5zm3 3a.4.4 0 1 0-.8 0v.6h-.6a.4.4 0 1 0 0 .8h.6v.6a.4.4 0 1 0 .8 0v-.6h.6a.4.4 0 0 0 0-.8h-.6v-.6zm-4 3a.4.4 0 1 0-.8 0v.6H.5a.4.4 0 1 0 0 .8h.6v.6a.4.4 0 0 0 .8 0v-.6h.6a.4.4 0 0 0 0-.8h-.6v-.6zM8.544.982l-.298-.04c-.213-.024-.34.224-.217.4A6.57 6.57 0 0 1 9.203 5.1a6.602 6.602 0 0 1-6.243 6.59c-.214.012-.333.264-.183.417c.069.07.138.139.21.206l.072.066l.26.226l.188.148l.121.09l.187.131l.176.115c.12.076.244.149.37.217l.264.135l.26.12l.303.122l.244.086a6.568 6.568 0 0 0 1.103.26l.317.04l.267.02a6.6 6.6 0 0 0 6.943-7.328l-.037-.277a6.557 6.557 0 0 0-.384-1.415l-.113-.268l-.077-.166l-.074-.148a6.602 6.602 0 0 0-.546-.883l-.153-.2l-.199-.24l-.163-.18l-.12-.124l-.16-.158l-.223-.2l-.32-.26l-.245-.177l-.292-.19l-.321-.186l-.328-.165l-.113-.052l-.24-.101l-.276-.104l-.252-.082l-.325-.09l-.265-.06l-.292-.053zm1.86 4.318a7.578 7.578 0 0 0-.572-2.894a5.601 5.601 0 1 1-4.748 10.146a7.61 7.61 0 0 0 3.66-2.51a.749.749 0 0 0 1.355-.442a.75.75 0 0 0-.584-.732c.062-.116.122-.235.178-.355A1.25 1.25 0 1 0 10.35 6.2c.034-.295.052-.595.052-.9z"
fill="currentColor"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconPalette.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconPalette = createIcon({
viewBox: "0 0 24 24",
path: () => (
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path d="M12 21a9 9 0 1 1 0-18a9 8 0 0 1 9 8a4.5 4 0 0 1-4.5 4H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21"></path>
<circle cx="7.5" cy="10.5" r=".5" fill="currentColor"></circle>
<circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle>
<circle cx="16.5" cy="10.5" r=".5" fill="currentColor"></circle>
</g>
),
});
================================================
FILE: apps/docs/src/icons/IconPhone.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconPhone = createIcon({
viewBox: "0 0 20 20",
path: () => (
<path
d="M2 3a1 1 0 0 1 1-1h2.153a1 1 0 0 1 .986.836l.74 4.435a1 1 0 0 1-.54 1.06l-1.548.773a11.037 11.037 0 0 0 6.105 6.105l.774-1.548a1 1 0 0 1 1.059-.54l4.435.74a1 1 0 0 1 .836.986V17a1 1 0 0 1-1 1h-2C7.82 18 2 12.18 2 5V3z"
fill="currentColor"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconPlus.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconPlus = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z"
fill="currentColor"
stroke="currentColor"
stroke-width="1"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconQuestionMark.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconQuestionMark = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M5.07505 4.10001C5.07505 2.91103 6.25727 1.92502 7.50005 1.92502C8.74283 1.92502 9.92505 2.91103 9.92505 4.10001C9.92505 5.19861 9.36782 5.71436 8.61854 6.37884L8.58757 6.4063C7.84481 7.06467 6.92505 7.87995 6.92505 9.5C6.92505 9.81757 7.18248 10.075 7.50005 10.075C7.81761 10.075 8.07505 9.81757 8.07505 9.5C8.07505 8.41517 8.62945 7.90623 9.38156 7.23925L9.40238 7.22079C10.1496 6.55829 11.075 5.73775 11.075 4.10001C11.075 2.12757 9.21869 0.775024 7.50005 0.775024C5.7814 0.775024 3.92505 2.12757 3.92505 4.10001C3.92505 4.41758 4.18249 4.67501 4.50005 4.67501C4.81761 4.67501 5.07505 4.41758 5.07505 4.10001ZM7.50005 13.3575C7.9833 13.3575 8.37505 12.9657 8.37505 12.4825C8.37505 11.9992 7.9833 11.6075 7.50005 11.6075C7.0168 11.6075 6.62505 11.9992 6.62505 12.4825C6.62505 12.9657 7.0168 13.3575 7.50005 13.3575Z"
fill="currentColor"
stroke="currentColor"
stroke-width="1"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconRepeat.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconRepeat = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M1.90321 7.29677C1.90321 10.341 4.11041 12.4147 6.58893 12.8439C6.87255 12.893 7.06266 13.1627 7.01355 13.4464C6.96444 13.73 6.69471 13.9201 6.41109 13.871C3.49942 13.3668 0.86084 10.9127 0.86084 7.29677C0.860839 5.76009 1.55996 4.55245 2.37639 3.63377C2.96124 2.97568 3.63034 2.44135 4.16846 2.03202L2.53205 2.03202C2.25591 2.03202 2.03205 1.80816 2.03205 1.53202C2.03205 1.25588 2.25591 1.03202 2.53205 1.03202L5.53205 1.03202C5.80819 1.03202 6.03205 1.25588 6.03205 1.53202L6.03205 4.53202C6.03205 4.80816 5.80819 5.03202 5.53205 5.03202C5.25591 5.03202 5.03205 4.80816 5.03205 4.53202L5.03205 2.68645L5.03054 2.68759L5.03045 2.68766L5.03044 2.68767L5.03043 2.68767C4.45896 3.11868 3.76059 3.64538 3.15554 4.3262C2.44102 5.13021 1.90321 6.10154 1.90321 7.29677ZM13.0109 7.70321C13.0109 4.69115 10.8505 2.6296 8.40384 2.17029C8.12093 2.11718 7.93465 1.84479 7.98776 1.56188C8.04087 1.27898 8.31326 1.0927 8.59616 1.14581C11.4704 1.68541 14.0532 4.12605 14.0532 7.70321C14.0532 9.23988 13.3541 10.4475 12.5377 11.3662C11.9528 12.0243 11.2837 12.5586 10.7456 12.968L12.3821 12.968C12.6582 12.968 12.8821 13.1918 12.8821 13.468C12.8821 13.7441 12.6582 13.968 12.3821 13.968L9.38205 13.968C9.10591 13.968 8.88205 13.7441 8.88205 13.468L8.88205 10.468C8.88205 10.1918 9.10591 9.96796 9.38205 9.96796C9.65819 9.96796 9.88205 10.1918 9.88205 10.468L9.88205 12.3135L9.88362 12.3123C10.4551 11.8813 11.1535 11.3546 11.7585 10.6738C12.4731 9.86976 13.0109 8.89844 13.0109 7.70321Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconRocket.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconRocket = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M6.85357 3.85355L7.65355 3.05353C8.2981 2.40901 9.42858 1.96172 10.552 1.80125C11.1056 1.72217 11.6291 1.71725 12.0564 1.78124C12.4987 1.84748 12.7698 1.97696 12.8965 2.10357C13.0231 2.23018 13.1526 2.50125 13.2188 2.94357C13.2828 3.37086 13.2779 3.89439 13.1988 4.44801C13.0383 5.57139 12.591 6.70188 11.9464 7.34645L7.49999 11.7929L6.35354 10.6465C6.15827 10.4512 5.84169 10.4512 5.64643 10.6465C5.45117 10.8417 5.45117 11.1583 5.64643 11.3536L7.14644 12.8536C7.34171 13.0488 7.65829 13.0488 7.85355 12.8536L8.40073 12.3064L9.57124 14.2572C9.65046 14.3893 9.78608 14.4774 9.9389 14.4963C10.0917 14.5151 10.2447 14.4624 10.3535 14.3536L12.3535 12.3536C12.4648 12.2423 12.5172 12.0851 12.495 11.9293L12.0303 8.67679L12.6536 8.05355C13.509 7.19808 14.0117 5.82855 14.1887 4.58943C14.2784 3.9618 14.2891 3.33847 14.2078 2.79546C14.1287 2.26748 13.9519 1.74482 13.6035 1.39645C13.2552 1.04809 12.7325 0.871332 12.2045 0.792264C11.6615 0.710945 11.0382 0.721644 10.4105 0.8113C9.17143 0.988306 7.80189 1.491 6.94644 2.34642L6.32322 2.96968L3.07071 2.50504C2.91492 2.48278 2.75773 2.53517 2.64645 2.64646L0.646451 4.64645C0.537579 4.75533 0.484938 4.90829 0.50375 5.0611C0.522563 5.21391 0.61073 5.34954 0.742757 5.42876L2.69364 6.59928L2.14646 7.14645C2.0527 7.24022 2.00002 7.3674 2.00002 7.50001C2.00002 7.63261 2.0527 7.75979 2.14646 7.85356L3.64647 9.35356C3.84173 9.54883 4.15831 9.54883 4.35357 9.35356C4.54884 9.1583 4.54884 8.84172 4.35357 8.64646L3.20712 7.50001L3.85357 6.85356L6.85357 3.85355ZM10.0993 13.1936L9.12959 11.5775L11.1464 9.56067L11.4697 11.8232L10.0993 13.1936ZM3.42251 5.87041L5.43935 3.85356L3.17678 3.53034L1.80638 4.90074L3.42251 5.87041ZM2.35356 10.3535C2.54882 10.1583 2.54882 9.8417 2.35356 9.64644C2.1583 9.45118 1.84171 9.45118 1.64645 9.64644L0.646451 10.6464C0.451188 10.8417 0.451188 11.1583 0.646451 11.3535C0.841713 11.5488 1.1583 11.5488 1.35356 11.3535L2.35356 10.3535ZM3.85358 11.8536C4.04884 11.6583 4.04885 11.3417 3.85359 11.1465C3.65833 10.9512 3.34175 10.9512 3.14648 11.1465L1.14645 13.1464C0.95119 13.3417 0.951187 13.6583 1.14645 13.8535C1.34171 14.0488 1.65829 14.0488 1.85355 13.8536L3.85358 11.8536ZM5.35356 13.3535C5.54882 13.1583 5.54882 12.8417 5.35356 12.6464C5.1583 12.4512 4.84171 12.4512 4.64645 12.6464L3.64645 13.6464C3.45119 13.8417 3.45119 14.1583 3.64645 14.3535C3.84171 14.5488 4.1583 14.5488 4.35356 14.3535L5.35356 13.3535ZM9.49997 6.74881C10.1897 6.74881 10.7488 6.1897 10.7488 5.5C10.7488 4.8103 10.1897 4.25118 9.49997 4.25118C8.81026 4.25118 8.25115 4.8103 8.25115 5.5C8.25115 6.1897 8.81026 6.74881 9.49997 6.74881Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconSearch.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconSearch = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconStar.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconStar = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M7.22303 0.665992C7.32551 0.419604 7.67454 0.419604 7.77702 0.665992L9.41343 4.60039C9.45663 4.70426 9.55432 4.77523 9.66645 4.78422L13.914 5.12475C14.18 5.14607 14.2878 5.47802 14.0852 5.65162L10.849 8.42374C10.7636 8.49692 10.7263 8.61176 10.7524 8.72118L11.7411 12.866C11.803 13.1256 11.5206 13.3308 11.2929 13.1917L7.6564 10.9705C7.5604 10.9119 7.43965 10.9119 7.34365 10.9705L3.70718 13.1917C3.47945 13.3308 3.19708 13.1256 3.25899 12.866L4.24769 8.72118C4.2738 8.61176 4.23648 8.49692 4.15105 8.42374L0.914889 5.65162C0.712228 5.47802 0.820086 5.14607 1.08608 5.12475L5.3336 4.78422C5.44573 4.77523 5.54342 4.70426 5.58662 4.60039L7.22303 0.665992Z"
fill="currentColor"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconSun.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconSun = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconTwitter.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconTwitter = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M7.23336 4.69629C7.23336 2.96884 8.63335 1.56857 10.36 1.56857C11.3736 1.56857 12.183 2.04804 12.7254 2.74385C13.3079 2.62467 13.8557 2.40913 14.3513 2.11508C14.1559 2.72598 13.7424 3.2396 13.2033 3.56463C13.2038 3.56568 13.2042 3.56674 13.2047 3.56779C13.7334 3.50361 14.2364 3.36302 14.7048 3.15546L14.7037 3.15715C14.3667 3.66183 13.9431 4.10736 13.4561 4.47034C13.4823 4.64672 13.4956 4.82427 13.4956 5.00079C13.4956 8.6871 10.6873 12.9746 5.52122 12.9746C3.93906 12.9746 2.46544 12.511 1.22505 11.7152C0.992632 11.5661 0.925108 11.2568 1.07423 11.0244C1.0874 11.0038 1.10183 10.9846 1.11734 10.9666C1.20582 10.8202 1.37438 10.7309 1.5554 10.7522C2.47066 10.8601 3.38568 10.7485 4.19219 10.3962C3.39226 10.0434 2.77129 9.35975 2.50204 8.51974C2.45359 8.3686 2.48835 8.20311 2.59351 8.08422C2.59716 8.0801 2.60087 8.07606 2.60464 8.0721C1.96391 7.50819 1.55973 6.68208 1.55973 5.76143V5.72759C1.55973 5.56814 1.64411 5.42059 1.78155 5.33974C1.82671 5.31317 1.87537 5.29511 1.92532 5.28558C1.70549 4.86154 1.58116 4.37984 1.58116 3.86958C1.58116 3.40165 1.58384 2.81192 1.91332 2.28081C1.98718 2.16175 2.10758 2.08915 2.2364 2.07195C2.42588 2.01237 2.64087 2.06969 2.77406 2.23302C3.86536 3.57126 5.44066 4.49583 7.23366 4.73961L7.23336 4.69629ZM5.52122 11.9746C4.73387 11.9746 3.97781 11.8435 3.27248 11.6023C4.13012 11.4538 4.95307 11.1159 5.66218 10.5602C5.81211 10.4427 5.87182 10.2435 5.81126 10.0629C5.7507 9.88234 5.583 9.75943 5.39255 9.75607C4.68968 9.74366 4.06712 9.39716 3.67793 8.86845C3.86828 8.85306 4.05428 8.82039 4.23445 8.77167C4.43603 8.71716 4.57363 8.53114 4.56674 8.32243C4.55985 8.11372 4.41029 7.93718 4.20555 7.89607C3.42694 7.73977 2.79883 7.16764 2.56169 6.42174C2.76255 6.47025 2.97102 6.4991 3.18482 6.5061C3.38563 6.51267 3.56646 6.38533 3.62795 6.19405C3.68943 6.00277 3.61666 5.79391 3.44963 5.68224C2.86523 5.29155 2.48116 4.62464 2.48116 3.86958C2.48116 3.70213 2.48352 3.55268 2.49355 3.41719C3.85115 4.79913 5.70873 5.68931 7.77588 5.79338C7.93225 5.80126 8.08328 5.73543 8.18395 5.61553C8.28463 5.49562 8.32332 5.33548 8.28851 5.18284C8.25255 5.02517 8.23336 4.86284 8.23336 4.69629C8.23336 3.52085 9.18591 2.56857 10.36 2.56857C11.5943 2.56857 12.4956 3.71208 12.4956 5.00079C12.4956 8.25709 10.0202 11.9746 5.52122 11.9746Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/icons/IconUser.tsx
================================================
import { createIcon } from "@hope-ui/solid";
export const IconUser = createIcon({
viewBox: "0 0 15 15",
path: () => (
<path
d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
/>
),
});
================================================
FILE: apps/docs/src/index.css
================================================
@import "prism-themes/themes/prism-night-owl.min.css";
html {
scroll-padding-top: 112px;
}
#root {
min-height: 100%;
}
.hope-ui-dark {
background-color: var(--hope-colors-neutral1);
}
/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* -------------------------------------------------------------------------------------------------
* Prism.js
* -----------------------------------------------------------------------------------------------*/
.hope-ui-dark :not(pre) > code[class*="language-"],
.hope-ui-dark pre[class*="language-"] {
background: var(--hope-colors-neutral3);
}
pre[class*="language-"] {
margin: 0;
}
.copy-to-clipboard-button {
position: absolute !important;
top: 12px !important;
right: 12px !important;
padding: 0 12px !important;
height: 24px;
border-radius: 4px !important;
background: var(--hope-colors-primary9) !important;
color: var(--hope-colors-neutral1) !important;
font-weight: 600 !important;
font-size: 14px;
line-height: 1;
cursor: pointer !important;
}
.copy-to-clipboard-button:hover {
background: var(--hope-colors-primary10) !important;
color: var(--hope-colors-neutral1) !important;
}
================================================
FILE: apps/docs/src/index.tsx
================================================
import "./index.css";
import { HopeProvider, HopeThemeConfig, NotificationsProvider } from "@hope-ui/solid";
import Prism from "prismjs";
import { Router } from "solid-app-router";
import { render } from "solid-js/web";
import App from "./App";
const config: HopeThemeConfig = {
initialColorMode: "system",
components: {
Menu: {
baseStyle: {
content: {
zIndex: 10,
},
},
},
Popover: {
baseStyle: {
content: {
zIndex: 10,
},
},
},
Tooltip: {
baseStyle: {
zIndex: 10,
},
},
},
};
render(
() => (
<Router>
<HopeProvider config={config}>
<NotificationsProvider>
<App />
</NotificationsProvider>
</HopeProvider>
</Router>
),
document.getElementById("root") as HTMLElement
);
setTimeout(() => {
Prism.highlightAll();
}, 0);
================================================
FILE: apps/docs/src/pages/component-docs/data-display/accordion/index.tsx
================================================
import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Alert,
AlertDescription,
Anchor,
Button,
HStack,
Kbd,
ListItem,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { createSignal, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconMinus } from "@/icons/IconMinus";
import { IconPlus } from "@/icons/IconPlus";
import { snippets } from "./snippets";
export default function AccordionDoc() {
const [itemIndex, setItemIndex] = createSignal(-1);
const previousLink: ContextualNavLink = {
href: "/docs/data-entry/textarea",
label: "Textarea",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/avatar",
label: "Avatar",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#default-expanded-item", label: "Default expanded item", indent: true },
{ href: "#expand-multiple-items", label: "Expand multiple items at once", indent: true },
{ href: "#styling-expanded-state", label: "Styling the expanded state", indent: true },
{ href: "#accessing-internal-state", label: "Accessing the internal state", indent: true },
{ href: "#controlled-accordion", label: "Controlled accordion", indent: true },
{ href: "#accessibility", label: "Accessibility" },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#accordion-props", label: "Accordion props", indent: true },
{ href: "#accordion-item-props", label: "AccordionItem props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const accordionPropItems: PropsTableItem[] = [
{
name: "allowMultiple",
description: "If `true`, multiple accordion items can be expanded at once.",
type: "boolean",
defaultValue: "false",
},
{
name: "index",
description: "The index(es) of the expanded accordion item (in controlled mode).",
type: "number | number[]",
},
{
name: "defaultIndex",
description: "The initial index(es) of the expanded accordion item (in uncontrolled mode).",
type: "number | number[]",
},
{
name: "onChange",
description: "The callback invoked when accordion items are expanded or collapsed.",
type: "(expandedIndex: number | number[]) => void",
},
];
const accordionItemPropItems: PropsTableItem[] = [
{
name: "disabled",
description: "If `true`, the accordion item will be disabled.",
type: "boolean",
},
{
name: "children",
description:
"The children of the accordion item. Can be a render props that exposes the internal `expanded` and `disabled` state.",
type: "JSX.Element | (props: { expanded: Accessor<boolean>; disabled: Accessor<boolean>; }) => JSX.Element",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
<PageLayout
previousLink={previousLink}
nextLink={nextLink}
contextualNavLinks={contextualNavLinks}
>
<PageTitle>Accordion</PageTitle>
<Text mb="$5">
Accordions display a list of high-level options that can expand/collapse to reveal more
information.
</Text>
<SectionTitle id="import">Import</SectionTitle>
<CodeSnippet snippet={snippets.importComponent} mb="$6" />
<UnorderedList spacing="$2" mb="$12">
<ListItem>
<strong>Accordion:</strong> The wrapper components that provides context for all its
children.
</ListItem>
<ListItem>
<strong>AccordionItem:</strong> A single accordion item.
</ListItem>
<ListItem>
<strong>AccordionButton:</strong> The button that toggles the expand/collapse state of the
accordion item. This button must be wrapped in an element with role <Code>heading</Code>.
</ListItem>
<ListItem>
<strong>AccordionIcon:</strong> A <Code>caret-down</Code> icon that rotates based on the
expanded/collapsed state.
</ListItem>
<ListItem>
<strong>AccordionPanel:</strong> The container for the details to be revealed.
</ListItem>
</UnorderedList>
<SectionTitle id="usage">Usage</SectionTitle>
<Preview snippet={snippets.basicUsage} mb="$10">
<Accordion>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Accessible
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Hope UI follows WAI-ARIA standards, helping you to reach the largest audience possible
with less effort.
</AccordionPanel>
</AccordionItem>
</Accordion>
</Preview>
<SectionSubtitle id="default-expanded-item">Default expanded item</SectionSubtitle>
<Text mb="$5">
Use the <Code>defaultIndex</Code> prop to set an item expanded by default.
</Text>
<Preview snippet={snippets.defaultIndex} mb="$10">
<Accordion defaultIndex={1}>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Accessible
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Hope UI follows WAI-ARIA standards, helping you to reach the largest audience possible
with less effort.
</AccordionPanel>
</AccordionItem>
</Accordion>
</Preview>
<SectionSubtitle id="expand-multiple-items">Expand multiple items at once</SectionSubtitle>
<Text mb="$5">
Use the <Code>allowMultiple</Code> prop to permit multiple items to be expanded at once.
</Text>
<Preview snippet={snippets.allowMultiple} mb="$6">
<Accordion allowMultiple>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Accessible
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Hope UI follows WAI-ARIA standards, helping you to reach the largest audience possible
with less effort.
</AccordionPanel>
</AccordionItem>
</Accordion>
</Preview>
<Alert status="warning" mb="$10">
<AlertDescription>
If you pass this prop, ensure that the <Code>index</Code> or <Code>defaultIndex</Code>{" "}
prop is an array.
</AlertDescription>
</Alert>
<SectionSubtitle id="styling-expanded-state">Styling the expanded state</SectionSubtitle>
<Text mb="$5">
The <Code>AccordionButton</Code> component has <Code>aria-expanded</Code> set to{" "}
<Code>true</Code> or <Code>false</Code> depending on the state of the{" "}
<Code>AccordionItem</Code>. That means you can use the <Code>_expanded</Code> style prop to
style this state.
</Text>
<Preview snippet={snippets.stylingExpandedState} mb="$10">
<Accordion>
<AccordionItem>
<h2>
<AccordionButton _expanded={{ bg: "tomato", color: "white" }}>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
</Accordion>
</Preview>
<SectionSubtitle id="accessing-internal-state">Accessing the internal state</SectionSubtitle>
<Text mb="$5">
If you need access to the internal state of each accordion item, you can use a render prop.
It provides 2 internal state props: <Code>expanded</Code> and <Code>disabled</Code>.
</Text>
<Preview snippet={snippets.internalState} mb="$10">
<Accordion>
<AccordionItem>
{({ expanded }) => (
<>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon fontSize="1em" as={expanded() ? IconMinus : IconPlus} />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</>
)}
</AccordionItem>
</Accordion>
</Preview>
<SectionSubtitle id="controlled-accordion">Controlled accordion</SectionSubtitle>
<Text mb="$5">
Use the <Code>index</Code> and <Code>onChange</Code> props to control the{" "}
<Code>Accordion</Code>.
</Text>
<Preview snippet={snippets.controlled} mb="$12">
<HStack spacing="$4" mb="$4">
<Button variant="subtle" colorScheme="neutral" onClick={() => setItemIndex(0)}>
Open item 1
</Button>
<Button variant="subtle" colorScheme="neutral" onClick={() => setItemIndex(1)}>
Open item 2
</Button>
</HStack>
<Accordion index={itemIndex()} onChange={value => setItemIndex(value as number)}>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Accessible
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Hope UI follows WAI-ARIA standards, helping you to reach the largest audience possible
with less effort.
</AccordionPanel>
</AccordionItem>
</Accordion>
</Preview>
<SectionTitle id="accessibility">Accessibility</SectionTitle>
<SectionSubtitle>ARIA roles and attributes</SectionSubtitle>
<UnorderedList spacing="$2" mb="$8">
<ListItem>
Each <Code>AccordionButton</Code> should be wrapped in an element with role{" "}
<Code>heading</Code>.
</ListItem>
<ListItem>
<Code>AccordionButton</Code> as <Code>role</Code> set to <Code>button</Code>.
</ListItem>
<ListItem>
<Code>AccordionButton</Code> as <Code>aria-controls</Code> set to the <Code>id</Code> of
its associated <Code>AccordionPanel</Code>.
</ListItem>
<ListItem>
<Code>AccordionButton</Code> as <Code>aria-expanded</Code> set to <Code>true</Code> when
its associated <Code>AccordionPanel</Code> is expanded, <Code>false</Code> otherwise.
</ListItem>
<ListItem>
<Code>AccordionPanel</Code> as <Code>role</Code> set to <Code>region</Code>.
</ListItem>
<ListItem>
<Code>AccordionPanel</Code> as <Code>aria-labelledby</Code> set to the <Code>id</Code> of
its associated <Code>AccordionButton</Code>.
</ListItem>
</UnorderedList>
<SectionSubtitle>Keyboard support</SectionSubtitle>
<UnorderedList spacing="$2" mb="$12">
<ListItem>
<Kbd>↑</Kbd> moves focus to the previous accordion button.
</ListItem>
<ListItem>
<Kbd>↓</Kbd> moves focus to the next accordion button.
</ListItem>
<ListItem>
<Kbd>home</Kbd> moves focus to the first accordion button.
</ListItem>
<ListItem>
<Kbd>end</Kbd> moves focus to the last accordion button.
</ListItem>
</UnorderedList>
<SectionTitle id="theming">Theming</SectionTitle>
<Text mb="$5">
<Code>Accordion</Code> base styles and default props can be overridden in the Hope UI theme
configuration like below:
</Text>
<CodeSnippet lang="js" snippet={snippets.theming} mb="$12" />
<SectionTitle id="props">Props</SectionTitle>
<SectionSubtitle id="accordion-props">Accordion props</SectionSubtitle>
<PropsTable items={accordionPropItems} mb="$10" />
<SectionSubtitle id="accordion-item-props">AccordionItem props</SectionSubtitle>
<PropsTable items={accordionItemPropItems} mb="$10" />
<SectionSubtitle id="other-components-props">Other components props</SectionSubtitle>
<UnorderedList spacing="$2">
<ListItem>
<Code>AccordionButton</Code> and <Code>AccordionPanel</Code> composes{" "}
<Anchor
as={Link}
href="/docs/layout/box"
external
color="$primary11"
fontWeight="$semibold"
>
Box
</Anchor>
.
</ListItem>
<ListItem>
<Code>AccordionIcon</Code> composes{" "}
<Anchor
as={Link}
href="/docs/data-display/icon"
external
color="$primary11"
fontWeight="$semibold"
>
Icon
</Anchor>
.
</ListItem>
</UnorderedList>
</PageLayout>
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/accordion/snippets.ts
================================================
const importComponent = `import {
Accordion,
AccordionItem,
AccordionButton,
AccordionIcon,
AccordionPanel,
} from "@hope-ui/solid"`;
const basicUsage = `<Accordion>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Accessible
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Hope UI follows WAI-ARIA standards,
helping you to reach the largest audience possible with less effort.
</AccordionPanel>
</AccordionItem>
</Accordion>`;
const defaultIndex = `<Accordion defaultIndex={1}>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Accessible
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Hope UI follows WAI-ARIA standards,
helping you to reach the largest audience possible with less effort.
</AccordionPanel>
</AccordionItem>
</Accordion>`;
const allowMultiple = `<Accordion allowMultiple>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Accessible
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Hope UI follows WAI-ARIA standards,
helping you to reach the largest audience possible with less effort.
</AccordionPanel>
</AccordionItem>
</Accordion>`;
const stylingExpandedState = `<Accordion>
<AccordionItem>
<h2>
<AccordionButton _expanded={{ bg: "tomato", color: "white" }}>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
</Accordion>`;
const internalState = `<Accordion>
<AccordionItem>
{({ expanded }) => (
<>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon
fontSize="1em"
as={expanded() ? IconMinus : IconPlus}
/>
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</>
)}
</AccordionItem>
</Accordion>`;
const controlled = `function ControlledExample() {
const [itemIndex, setItemIndex] = createSignal(-1);
return (
<>
<HStack spacing="$4" mb="$4">
<Button
variant="subtle"
colorScheme="neutral"
onClick={() => setItemIndex(0)}
>
Open item 1
</Button>
<Button
variant="subtle"
colorScheme="neutral"
onClick={() => setItemIndex(1)}
>
Open item 2
</Button>
</HStack>
<Accordion
index={itemIndex()}
onChange={value => setItemIndex(value as number)}
>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Composable
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Compose your application interface with reusable building blocks.
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<h2>
<AccordionButton>
<Text flex={1} fontWeight="$medium" textAlign="start">
Accessible
</Text>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel>
Hope UI follows WAI-ARIA standards,
helping you to reach the largest audience possible with less effort.
</AccordionPanel>
</AccordionItem>
</Accordion>
</>
);
}`;
const theming = `const config: HopeThemeConfig = {
components: {
Accordion: {
baseStyle: {
root: SystemStyleObject,
item: SystemStyleObject,
button: SystemStyleObject,
icon: SystemStyleObject,
panel: SystemStyleObject,
},
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
defaultIndex,
allowMultiple,
stylingExpandedState,
internalState,
controlled,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/avatar/index.tsx
================================================
import {
Alert,
AlertDescription,
Avatar,
AvatarBadge,
AvatarExcess,
AvatarGroup,
hope,
HStack,
ListItem,
Text,
UnorderedList,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconUser } from "@/icons/IconUser";
import { snippets } from "./snippets";
export default function AvatarDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/accordion",
label: "Accordion",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/badge",
label: "Badge",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#sizes", label: "Avatar sizes", indent: true },
{ href: "#fallbacks", label: "Avatar fallbacks", indent: true },
{ href: "#custom-fallback", label: "Customize the fallback avatar", indent: true },
{ href: "#with-badge", label: "Avatar with badge", indent: true },
{ href: "#avatar-group", label: "AvatarGroup", indent: true },
{ href: "#change-initials-logic", label: "Changing the initials logic", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#avatar-props", label: "Avatar props", indent: true },
{ href: "#avatar-group-props", label: "AvatarGroup props", indent: true },
];
const avatarPropItems: PropsTableItem[] = [
{
name: "size",
description: "The size of the avatar.",
type: '"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"',
defaultValue: '"md"',
},
{
name: "withBorder",
description:
"If `true`, the Avatar will show a border around it. Best for a group of avatars.",
type: "boolean",
defaultValue: "false",
},
{
name: "name",
description:
"The name of the person in the avatar. If `src` has loaded, the name will be used as the `alt` attribute of the `img`. If `src` is not loaded, the name will be used to create the initials",
type: "string",
},
{
name: "src",
description: "The image url of the `Avatar`.",
type: "string",
},
{
name: "srcSet",
description: "List of sources to use for different screen resolutions.",
type: "string",
},
{
name: "icon",
description: "The default avatar used as fallback when `name`, and `src` is not specified.",
type: "(props: AvatarIconProps) => JSX.Element",
},
{
name: "iconLabel",
description:
"The `aria-label` to use with the default avatar icon when no `name` is provided.",
type: "string",
},
{
name: "loading",
description: "The image loading strategy.",
type: '"eager" | "lazy"',
},
{
name: "ignoreFallback",
description: "If `true`, opt out of the avatar's `fallback` logic.",
type: "boolean",
defaultValue: "false",
},
{
name: "getInitials",
description: "Function to get the initials to display.",
type: "(name: string) => string",
},
{
name: "onError",
description: "Function called when image failed to load.",
type: "JSX.EventHandlerUnion<HTMLImageElement, Event>",
},
{
name: "imageProps",
description: "Props to be passed to the AvatarImage",
type: "ImageProps",
},
];
const avatarGroupPropItems: PropsTableItem[] = [
{
name: "size",
description: "The size of the avatars.",
type: '"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"',
defaultValue: '"md"',
},
{
name: "spacing",
description: "The space between the avatars in the group.",
type: 'ResponsiveValue<MarginProps["margin"]>',
defaultValue: "-1em",
},
{
name: "avatarBorderRadius",
description: "The `border-radius` of the avatars.",
type: 'ResponsiveValue<RadiiProps["borderRadius"]>',
},
{
name: "avatarBorderColor",
description: "The `border-color` of the avatars.",
type: 'ResponsiveValue<BorderProps["borderColor"]>',
},
{
name: "avatarBorderWidth",
description: "The `border-width` of the avatars.",
type: 'ResponsiveValue<BorderProps["borderWidth"]>',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
<PageLayout
previousLink={previousLink}
nextLink={nextLink}
contextualNavLinks={contextualNavLinks}
>
<PageTitle>Avatar</PageTitle>
<Text mb="$5">
The <Code>Avatar</Code> component is used to represent a user, and displays the profile
picture, initials or fallback icon.
</Text>
<SectionTitle id="import">Import</SectionTitle>
<CodeSnippet snippet={snippets.importComponent} mb="$6" />
<UnorderedList spacing="$2" mb="$12">
<ListItem>
<strong>Avatar:</strong> The image that represents the user.
</ListItem>
<ListItem>
<strong>AvatarBadge:</strong> A wrapper that displays its content on the right corner of
the avatar.
</ListItem>
<ListItem>
<strong>AvatarGroup:</strong> A wrapper to stack multiple Avatars together.
</ListItem>
<ListItem>
<strong>AvatarExcess:</strong> The number of non-displayed avatars in a group.
</ListItem>
</UnorderedList>
<SectionTitle id="usage">Usage</SectionTitle>
<Text mb="$5"></Text>
<Preview snippet={snippets.basicUsage} mb="$10">
<HStack wrap="wrap" spacing="$4">
<Avatar name="Hector Rhodes" src="https://bit.ly/3pWHo72" />
<Avatar name="Isabella Mckinney" src="https://bit.ly/3tRVozX" />
<Avatar name="Courtney Watson" src="https://bit.ly/3w2rgom" />
<Avatar name="Alberto Sanchez" src="https://bit.ly/3q1WqrX" />
<Avatar name="Nicole Steeves" src="https://bit.ly/37dJ0m7" />
<Avatar name="Micheal Dunn" src="https://bit.ly/3t5O04P" />
<Avatar name="Wanda Fisher" src="https://bit.ly/35N1hXl" />
</HStack>
</Preview>
<SectionSubtitle id="sizes">Avatar sizes</SectionSubtitle>
<Text mb="$5">
Use the <Code>size</Code> prop to change the size of the Avatar. You can set the value to{" "}
<Code>2xs</Code>, <Code>xs</Code>, <Code>sm</Code>, <Code>md</Code>, <Code>lg</Code>,{" "}
<Code>xl</Code> or <Code>2xl</Code>.
</Text>
<Preview snippet={snippets.sizes} mb="$10">
<HStack alignItems="flex-start" wrap="wrap" spacing="$4">
<Avatar size="2xs" name="Hector Rhodes" src="https://bit.ly/3pWHo72" />
<Avatar size="xs" name="Isabella Mckinney" src="https://bit.ly/3tRVozX" />
<Avatar size="sm" name="Courtney Watson" src="https://bit.ly/3w2rgom" />
<Avatar size="md" name="Alberto Sanchez" src="https://bit.ly/3q1WqrX" />
<Avatar size="lg" name="Nicole Steeves" src="https://bit.ly/37dJ0m7" />
<Avatar size="xl" name="Micheal Dunn" src="https://bit.ly/3t5O04P" />
<Avatar size="2xl" name="Wanda Fisher" src="https://bit.ly/35N1hXl" />
</HStack>
</Preview>
<SectionSubtitle id="fallbacks">Avatar fallbacks</SectionSubtitle>
<Text mb="$2">
If there is an error loading the <Code>src</Code> of the avatar, there are 2 fallbacks:
</Text>
<hope.ul ps="$6" mb="$5">
<hope.li mb="$2">
If there's a <Code>name</Code> prop, we use it to generate the initials.
</hope.li>
<hope.li>
If there's no <Code>name</Code> prop, we use a default avatar.
</hope.li>
</hope.ul>
<Preview snippet={snippets.fallbacks} mb="$10">
<HStack spacing="$4">
<Avatar name="Monkey D. Luffy" src="broken-link" />
<Avatar src="broken-link" />
</HStack>
</Preview>
<SectionSubtitle id="custom-fallback">Customize the fallback avatar</SectionSubtitle>
<Text mb="$2">
You can customize the background color and icon of the fallback avatar icon to match your
design requirements.
</Text>
<hope.ul ps="$6" mb="$5">
<hope.li mb="$2">
To update the background, pass the usual <Code>bg</Code> prop.
</hope.li>
<hope.li>
To update the icon svg, pass the <Code>icon</Code> prop.
</hope.li>
</hope.ul>
<Preview snippet={snippets.customFallbacks} mb="$5">
<HStack spacing="$4">
<Avatar bg="$danger9" icon={props => <IconUser fontSize="1.5rem" {...props} />} />
<Avatar bg="$primary9" />
</HStack>
</Preview>
<Alert status="warning" mb="$10">
<AlertDescription>
<Code>icon</Code> is a render prop that provides proper <Code>role</Code> and{" "}
<Code>aria-label</Code> attributes to use in your custom icon.
</AlertDescription>
</Alert>
<SectionSubtitle id="with-badge">Avatar with badge</SectionSubtitle>
<Text mb="$5">
In some products, you might need to show a badge on the right corner of the avatar. We call
this a <strong>badge</strong>. Here's an example that shows if the user is online:
</Text>
<Preview snippet={snippets.withBadge} mb="$5">
<HStack spacing="$4">
<Avatar>
<AvatarBadge boxSize="1.25em" bg="$success9" />
</Avatar>
<Avatar>
<AvatarBadge borderColor="papayawhip" bg="tomato" boxSize="1.25em" />
</Avatar>
</HStack>
</Preview>
<Alert status="warning" mb="$10">
<AlertDescription>
Note the use of <Code>em</Code> for the size of the <Code>AvatarBadge</Code>. This is
useful to size the badge relative to the avatar font size.
</AlertDescription>
</Alert>
<SectionSubtitle id="avatar-group">AvatarGroup</SectionSubtitle>
<Text mb="$2">
In some cases, you might need to stack avatars as a group. Use the <Code>AvatarGroup</Code>{" "}
component.
</Text>
<hope.ul ps="$6" mb="$5">
<hope.li mb="$2">
To size all the avatars equally, pass the <Code>size</Code> prop.
</hope.li>
<hope.li mb="$2">
To adjust the spacing between the avatars, pass the <Code>spacing</Code> prop.
</hope.li>
<hope.li>
To set a remaining avatars number, use the <Code>AvatarExcess</Code> component.
</hope.li>
</hope.ul>
<Preview snippet={snippets.avatarGroup} mb="$10">
<AvatarGroup>
<Avatar name="Hector Rhodes" src="https://bit.ly/3pWHo72" />
<Avatar name="Isabella Mckinney" src="https://bit.ly/3tRVozX" />
<AvatarExcess>+3</AvatarExcess>
</AvatarGroup>
</Preview>
<SectionSubtitle id="change-initials-logic">Changing the initials logic</SectionSubtitle>
<Text mb="$12">
Use the <Code>getInitials</Code> prop to manage how initials are generated from name. By
default Hope UI merge the first characters of each word in the <Code>name</Code> prop.
</Text>
<SectionTitle id="theming">Theming</SectionTitle>
<Text mb="$5">
<Code>Avatar</Code> base styles and default props can be overridden in the Hope UI theme
configuration like below:
</Text>
<CodeSnippet lang="js" snippet={snippets.theming} mb="$12" />
<SectionTitle id="props">Props</SectionTitle>
<SectionSubtitle id="avatar-props">Avatar props</SectionSubtitle>
<PropsTable items={avatarPropItems} mb="$10" />
<SectionSubtitle id="avatar-group-props">AvatarGroup props</SectionSubtitle>
<PropsTable items={avatarGroupPropItems} />
</PageLayout>
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/avatar/snippets.ts
================================================
const importComponent = `import {
Avatar,
AvatarBadge,
AvatarGroup,
AvatarExcess
} from "@hope-ui/solid"`;
const basicUsage = `<HStack wrap="wrap" spacing="$4">
<Avatar name="Hector Rhodes" src="https://bit.ly/3pWHo72" />
<Avatar name="Isabella Mckinney" src="https://bit.ly/3tRVozX" />
<Avatar name="Courtney Watson" src="https://bit.ly/3w2rgom" />
<Avatar name="Alberto Sanchez" src="https://bit.ly/3q1WqrX" />
<Avatar name="Nicole Steeves" src="https://bit.ly/37dJ0m7" />
<Avatar name="Micheal Dunn" src="https://bit.ly/3t5O04P" />
<Avatar name="Wanda Fisher" src="https://bit.ly/35N1hXl" />
</HStack>`;
const sizes = `<HStack alignItems="flex-start" wrap="wrap" spacing="$4">
<Avatar size="2xs" name="Hector Rhodes" src="https://bit.ly/3pWHo72" />
<Avatar size="xs" name="Isabella Mckinney" src="https://bit.ly/3tRVozX" />
<Avatar size="sm" name="Courtney Watson" src="https://bit.ly/3w2rgom" />
<Avatar size="md" name="Alberto Sanchez" src="https://bit.ly/3q1WqrX" />
<Avatar size="lg" name="Nicole Steeves" src="https://bit.ly/37dJ0m7" />
<Avatar size="xl" name="Micheal Dunn" src="https://bit.ly/3t5O04P" />
<Avatar size="2xl" name="Wanda Fisher" src="https://bit.ly/35N1hXl" />
</HStack>`;
const fallbacks = `<HStack spacing="$4">
<Avatar name="Monkey D. Luffy" src="broken-link" />
<Avatar src="broken-link" />
</HStack>`;
const customFallbacks = `<HStack spacing="$4">
<Avatar
bg="$danger9"
icon={props => <IconUser fontSize="1.5rem" {...props} />}
/>
<Avatar bg="$primary9" />
</HStack>`;
const withBadge = `<HStack spacing="$4">
<Avatar>
<AvatarBadge boxSize="1.25em" bg="$success9" />
</Avatar>
{/* You can also change the borderColor and bg of the badge */}
<Avatar>
<AvatarBadge borderColor="papayawhip" bg="tomato" boxSize="1.25em" />
</Avatar>
</HStack>`;
const avatarGroup = `<AvatarGroup>
<Avatar name="Hector Rhodes" src="https://bit.ly/3pWHo72" />
<Avatar name="Isabella Mckinney" src="https://bit.ly/3tRVozX" />
<AvatarExcess>+3</AvatarExcess>
</AvatarGroup>`;
const theming = `const config: HopeThemeConfig = {
components: {
Avatar: {
baseStyle: {
root: SystemStyleObject,
group: SystemStyleObject,
image: SystemStyleObject,
initials: SystemStyleObject,
badge: SystemStyleObject,
excess: SystemStyleObject,
},
defaultProps: {
root: ThemeableAvatarOptions,
group: ThemeableAvatarGroupOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
sizes,
fallbacks,
customFallbacks,
withBadge,
avatarGroup,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/badge/index.tsx
================================================
import { Badge, HStack, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function BadgeDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/avatar",
label: "Avatar",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/icon",
label: "Icon",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Badge colors", indent: true },
{ href: "#variants", label: "Badge variants", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the badge.",
type: '"solid" | "subtle" | "outline"',
defaultValue: '"subtle"',
},
{
name: "colorScheme",
description: "The color of the badge.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"neutral"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
<PageLayout
previousLink={previousLink}
nextLink={nextLink}
contextualNavLinks={contextualNavLinks}
>
<PageTitle>Badge</PageTitle>
<Text mb="$5">Badges are used to highlight an item's status for quick recognition.</Text>
<SectionTitle id="import">Import</SectionTitle>
<CodeSnippet snippet={snippets.importComponent} mb="$12" />
<SectionTitle id="usage">Usage</SectionTitle>
<Preview snippet={snippets.basicUsage} mb="$12">
<Badge>Badge</Badge>
</Preview>
<SectionSubtitle id="colors">Badge colors</SectionSubtitle>
<Text mb="$5">
Use the <Code>colorScheme</Code> prop to change the color of the Badge. You can set the
value to <Code>primary</Code>, <Code>accent</Code>, <Code>neutral</Code>,{" "}
<Code>success</Code>, <Code>info</Code>, <Code>warning</Code> or <Code>danger</Code>.
</Text>
<Preview snippet={snippets.colors} mb="$10">
<HStack spacing="$4">
<Badge colorScheme="primary">Badge</Badge>
<Badge colorScheme="accent">Badge</Badge>
<Badge colorScheme="neutral">Badge</Badge>
<Badge colorScheme="success">Badge</Badge>
<Badge colorScheme="info">Badge</Badge>
<Badge colorScheme="warning">Badge</Badge>
<Badge colorScheme="danger">Badge</Badge>
</HStack>
</Preview>
<SectionSubtitle id="variants">Badge variants</SectionSubtitle>
<Text mb="$5">
Use the <Code>variant</Code> prop to change the visual style of the Badge. You can set the
value to <Code>solid</Code>, <Code>subtle</Code> or <Code>outline</Code>.
</Text>
<Preview snippet={snippets.variants} mb="$10">
<HStack spacing="$4">
<Badge variant="solid">Badge</Badge>
<Badge variant="subtle">Badge</Badge>
<Badge variant="outline">Badge</Badge>
</HStack>
</Preview>
<SectionTitle id="theming">Theming</SectionTitle>
<Text mb="$5">
<Code>Badge</Code> base styles and default props can be overridden in the Hope UI theme
configuration like below:
</Text>
<CodeSnippet lang="js" snippet={snippets.theming} mb="$12" />
<SectionTitle id="props">Props</SectionTitle>
<PropsTable items={propItems} />
</PageLayout>
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/badge/snippets.ts
================================================
const importComponent = `import { Badge } from "@hope-ui/solid"`;
const basicUsage = `<Badge>Badge</Badge>`;
const colors = `<HStack spacing="$4">
<Badge colorScheme="primary">Badge</Badge>
<Badge colorScheme="accent">Badge</Badge>
<Badge colorScheme="neutral">Badge</Badge>
<Badge colorScheme="success">Badge</Badge>
<Badge colorScheme="info">Badge</Badge>
<Badge colorScheme="warning">Badge</Badge>
<Badge colorScheme="danger">Badge</Badge>
</HStack>`;
const variants = `<HStack spacing="$4">
<Badge variant="solid">Badge</Badge>
<Badge variant="subtle">Badge</Badge>
<Badge variant="outline">Badge</Badge>
</HStack>`;
const theming = `const config: HopeThemeConfig = {
components: {
Badge: {
baseStyle: SystemStyleObject,
defaultProps: ThemeableBadgeOptions
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
colors,
variants,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/icon/index.tsx
================================================
import { Anchor, createIcon, hope, HStack, Icon, IconProps, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
function CircleIcon(props: IconProps) {
return (
<Icon viewBox="0 0 200 200" {...props}>
<path fill="currentColor" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" />
</Icon>
);
}
export default function IconDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/badge",
label: "Badge",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/image",
label: "Image",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#using-third-party-icon-library", label: "Using a third-party icon library" },
{ href: "#creating-custom-icons", label: "Creating your custom icons" },
{ href: "#using-icon-component", label: "Using the `Icon` component", indent: true },
{ href: "#using-create-icon-function", label: "Using the `createIcon` function", indent: true },
{ href: "#tips", label: "Tips for generating your own icons", indent: true },
{ href: "#fallback-icon", label: "Fallback icon" },
{ href: "#props", label: "Props" },
{ href: "#icon-props", label: "Icon props", indent: true },
{ href: "#create-icon-options", label: "createIcon options", indent: true },
];
const iconPropItems: PropsTableItem[] = [
{
name: "viewBox",
description: "The viewBox of the icon.",
type: "string",
defaultValue: "0 0 24 24",
},
{
name: "boxSize",
description: "The size (width and height) of the icon.",
type: "string",
defaultValue: "1em",
},
{
name: "color",
description: "The color of the icon.",
type: "string",
defaultValue: "currentColor",
},
];
const createIconPropItems: PropsTableItem[] = [
{
name: "viewBox",
description: "The viewBox of the icon.",
type: "string",
defaultValue: "0 0 24 24",
},
{
name: "path",
description: "A function that return the `svg` path or group element.",
type: "() => JSX.Element | JSX.Element[]",
},
{
name: "defaultProps",
description: "Default props automatically passed to the component; overwriteable.",
type: "IconProps",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
<PageLayout
previousLink={previousLink}
nextLink={nextLink}
contextualNavLinks={contextualNavLinks}
>
<PageTitle>Icon</PageTitle>
<Text mb="$5">
The <Code>Icon</Code> component is used to render <Code>svg</Code>.
</Text>
<SectionTitle id="import">Import</SectionTitle>
<CodeSnippet snippet={snippets.importComponent} mb="$12" />
<SectionTitle id="using-third-party-icon-library">
Using a third-party icon library
</SectionTitle>
<Text mb="$3">To use third-party icon libraries, here are the steps:</Text>
<hope.ul ps="$6" mb="$5">
<hope.li mb="$2">
Import the <Code>Icon</Code> component from <Code>@hope-ui/solid</Code>.
</hope.li>
<hope.li>
Pass the desired third party icon into the <Code>as</Code> prop.
</hope.li>
</hope.ul>
<CodeSnippet snippet={snippets.usingThirdPartyIconLibrary} mb="$12"></CodeSnippet>
<SectionTitle id="creating-custom-icons">Creating your custom icons</SectionTitle>
<Text mb="$3">Hope UI provides two methods for creating your custom icons:</Text>
<hope.ul ps="$6" mb="$5">
<hope.li mb="$2">
Using the <Code>Icon</Code> component.
</hope.li>
<hope.li>
Using the <Code>createIcon</Code> function.
</hope.li>
</hope.ul>
<Text mb="$5">
They can be imported from <Code>@hope-ui/solid</Code>:
</Text>
<CodeSnippet snippet={snippets.importIconAndCreateIcon} mb="$10" />
<SectionSubtitle id="using-icon-component">
Using the <Code>Icon</Code> component
</SectionSubtitle>
<Text mb="$5">
The <Code>Icon</Code> component renders as an <Code>svg</Code> element.
</Text>
<Preview snippet={snippets.customIconWithIconComponent} mb="$8">
<Icon viewBox="0 0 200 200" color="$danger9">
<path
fill="currentColor"
d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
/>
</Icon>
</Preview>
<Text mb="$5">This enables you to define your own custom icon components:</Text>
<CodeSnippet snippet={snippets.customIconAsComponent} mb="$8" />
<Text mb="$5">And style them with style props:</Text>
<Preview snippet={snippets.customIconAsComponentUsage} mb="$10">
<HStack>
<CircleIcon />
<CircleIcon boxSize="$6" />
<CircleIcon boxSize="$8" color="$danger9" />
</HStack>
</Preview>
<SectionSubtitle id="using-create-icon-function">
Using the <Code>createIcon</Code> function
</SectionSubtitle>
<Text mb="$5">
The <Code>createIcon</Code> function is a convenience wrapper around the process of
generating icons with <Code>Icon</Code>, allowing you to achieve the same functionality with
less effort.
</Text>
<CodeSnippet snippet={snippets.createIconExample} mb="$10" />
<SectionSubtitle id="tips">Tips for generating your own icons</SectionSubtitle>
<hope.ul ps="$6" mb="$12">
<hope.li mb="$2">
Export icons as <Code>svg</Code> from{" "}
<Anchor href="https://www.figma.com/" external color="$primary11" fontWeight="$semibold">
Figma
</Anchor>
,{" "}
<Anchor href="https://www.sketch.com/" external color="$primary11" fontWeight="$semibold">
Sketch
</Anchor>
, etc.
</hope.li>
<hope.li mb="$2">
Use a tool like{" "}
<Anchor
href="https://jakearchibald.github.io/svgomg/"
external
color="$primary11"
fontWeight="$semibold"
>
SvgOmg
</Anchor>{" "}
to reduce the size and minify the markup.
</hope.li>
<hope.li>
To use the <Code>color</Code> style prop, set the <Code>fill</Code> or <Code>stroke</Code>{" "}
prop of your svg <Code>path</Code> to <Code>currentColor</Code>.
</hope.li>
</hope.ul>
<SectionTitle id="fallback-icon">Fallback icon</SectionTitle>
<Text mb="$5">
When <Code>children</Code> is not provided, the <Code>Icon</Code> component renders a
fallback icon.
</Text>
<Preview snippet={snippets.fallbackIcon} mb="$12">
<Icon />
</Preview>
<SectionTitle id="props">Props</SectionTitle>
<Text mb="$5">
<Code>Icon</Code> render an <Code>svg</Code>, you can use any <Code>svg</Code> attributes.
</Text>
<SectionSubtitle id="icon-props">
<Code>Icon</Code> props
</SectionSubtitle>
<PropsTable items={iconPropItems} mb="$10" />
<SectionSubtitle id="create-icon-options">
<Code>createIcon</Code> options
</SectionSubtitle>
<PropsTable items={createIconPropItems} />
</PageLayout>
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/icon/snippets.ts
================================================
const importComponent = `import { Icon } from "@hope-ui/solid"`;
const usingThirdPartyIconLibrary = `// 1. Import
import { Icon } from "@hope-ui/solid"
import { SettingsIcon } from "some-icon-library"
// 2. Use the \`as\` prop
function Example() {
return <Icon as={SettingsIcon} />
}`;
const importIconAndCreateIcon = `import { Icon, createIcon } from "@hope-ui/solid"`;
const customIconWithIconComponent = `<Icon viewBox="0 0 200 200" color="$danger9">
<path
fill="currentColor"
d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
/>
</Icon>`;
const customIconAsComponent = `function CircleIcon(props: IconProps) {
return (
<Icon viewBox="0 0 200 200" {...props}>
<path
fill="currentColor"
d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
/>
</Icon>
);
}`;
const customIconAsComponentUsage = `<HStack>
{/* The default icon size is 1em (16px) */}
<CircleIcon />
{/* Use the \`boxSize\` prop to change the icon size */}
<CircleIcon boxSize="$6" />
{/* Use the \`color\` prop to change the icon color */}
<CircleIcon boxSize="$8" color="$danger9" />
</HStack>`;
const createIconExample = `import { createIcon } from "@hope-ui/solid"
export const CircleIcon = createIcon({
viewBox: "0 0 200 200",
// path is a function that returns JSX
path: () => (
<path
fill="currentColor"
d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"
/>
),
})
`;
const fallbackIcon = `<Icon />`;
export const snippets = {
importComponent,
usingThirdPartyIconLibrary,
importIconAndCreateIcon,
customIconWithIconComponent,
customIconAsComponent,
customIconAsComponentUsage,
createIconExample,
fallbackIcon,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/image/index.tsx
================================================
import { hope, HStack, Image, Text } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function ImageDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/icon",
label: "Icon",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/kbd",
label: "Kbd",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#image-size", label: "Image size", indent: true },
{ href: "#image-with-border-radius", label: "Image with border radius", indent: true },
{ href: "#image-fallback", label: "Image fallback", indent: true },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "src",
description: "The image `src` attribute.",
type: "string",
},
{
name: "srcSet",
description: "The image `srcset` attribute.",
type: "string",
},
{
name: "sizes",
description: " The image `sizes` attribute.",
type: "string",
},
{
name: "crossOrigin",
description:
"The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.",
type: '"" | "anonymous" | "use-credentials"',
},
{
name: "loading",
description: "The image loading strategy.",
type: '"eager" | "lazy"',
},
{
name: "fallbackSrc",
description:
"Fallback image `src` to show if image is loading or image fails. Using a local image is recommended.",
type: "string",
},
{
name: "fallback",
description: "Fallback element to show if image is loading or image fails.",
type: "JSX.Element",
},
{
name: "ignoreFallback",
description: "If `true`, opt out of the `fallbackSrc` logic.",
type: "boolean",
defaultValue: "false",
},
{
name: "align",
description:
"How to align the image within its bounds. It maps to css `object-position` property.",
type: "Property.ObjectPosition",
},
{
name: "fit",
description: "How the image to fit within its bounds. It maps to css `object-fit` property.",
type: "Property.ObjectFit",
},
{
name: "onLoad",
description: "A callback for when the image `src` has been loaded.",
type: "JSX.EventHandlerUnion<HTMLImageElement, Event>",
},
{
name: "onError",
description: "A callback for when there was an error loading the image `src`.",
type: "JSX.EventHandlerUnion<HTMLImageElement, Event>",
},
{
name: "htmlWidth",
description: "The native HTML `width` attribute to the passed to the `img`",
type: "string | number",
},
{
name: "htmlHeight",
description: "The native HTML `height` attribute to the passed to the `img`",
type: "string | number",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
<PageLayout
previousLink={previousLink}
nextLink={nextLink}
contextualNavLinks={contextualNavLinks}
>
<PageTitle>Image</PageTitle>
<Text mb="$5">
The <Code>Image</Code> component is used to display images.
</Text>
<SectionTitle id="import">Import</SectionTitle>
<CodeSnippet snippet={snippets.importComponent} mb="$12" />
<SectionTitle id="usage">Usage</SectionTitle>
<Preview snippet={snippets.basicUsage} mb="$10">
<Image boxSize="$sm" src="https://bit.ly/3pq0AcS" alt="Monkey D. Luffy" objectFit="cover" />
</Preview>
<SectionSubtitle id="image-size">Image size</SectionSubtitle>
<Text mb="$5">
The size of the image can be adjusted using the <Code>boxSize</Code> prop.
</Text>
<Preview snippet={snippets.size} mb="$10">
<HStack alignItems="flex-start" spacing="$4">
<Image
boxSize="100px"
src="https://bit.ly/3pq0AcS"
alt="Monkey D. Luffy"
objectFit="cover"
/>
<Image
boxSize="150px"
src="https://bit.ly/3pq0AcS"
alt="Monkey D. Luffy"
objectFit="cover"
/>
<Image
boxSize="200px"
src="https://bit.ly/3pq0AcS"
alt="Monkey D. Luffy"
objectFit="cover"
/>
</HStack>
</Preview>
<SectionSubtitle id="image-with-border-radius">Image with border radius</SectionSubtitle>
<Text mb="$5">
The radius of the image can be adjusted using the <Code>borderRadius</Code> prop.
</Text>
<Preview snippet={snippets.borderRadius} mb="$10">
<Image
boxSize="150px"
borderRadius="$full"
src="https://bit.ly/3pq0AcS"
alt="Monkey D. Luffy"
objectFit="cover"
/>
</Preview>
<SectionSubtitle id="image-fallback">Image fallback</SectionSubtitle>
<Text mb="$2">
The <Code>Image</Code> component allows you provide a fallback placeholder. The placeholder
is displayed when:
</Text>
<hope.ul ps="$6" mb="$5">
<hope.li mb="$2">
The <Code>fallback</Code> or <Code>fallbackSrc</Code> prop is provided.
</hope.li>
<hope.li mb="$2">
The image provided in <Code>src</Code> is currently loading.
</hope.li>
<hope.li mb="$2">
An error occurred while loading the image <Code>src</Code>.
</hope.li>
<hope.li>
No <Code>src</Code> prop was passed.
</hope.li>
</hope.ul>
<Text mb="$5">
You can also opt out of this behavior by passing the <Code>ignoreFallback</Code> prop.
</Text>
<Preview snippet={snippets.fallbackSupport} mb="$12">
<Image src="gibberish.png" fallbackSrc="https://via.placeholder.com/150" />
</Preview>
<SectionTitle id="props">Props</SectionTitle>
<PropsTable items={propItems} />
</PageLayout>
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/image/snippets.ts
================================================
const importComponent = `import { Image } from "@hope-ui/solid"`;
const basicUsage = `<Image
boxSize="$sm"
src="https://bit.ly/3pq0AcS"
alt="Monkey D. Luffy"
objectFit="cover"
/>`;
const size = `<HStack alignItems="flex-start" spacing="$4">
<Image
boxSize="100px"
src="https://bit.ly/3pq0AcS"
alt="Monkey D. Luffy"
objectFit="cover"
/>
<Image
boxSize="150px"
src="https://bit.ly/3pq0AcS"
alt="Monkey D. Luffy"
objectFit="cover"
/>
<Image
boxSize="200px"
src="https://bit.ly/3pq0AcS"
alt="Monkey D. Luffy"
objectFit="cover"
/>
</HStack>`;
const borderRadius = `<Image
boxSize="150px"
borderRadius="$full"
src="https://bit.ly/3pq0AcS"
alt="Monkey D. Luffy"
objectFit="cover"
/>`;
const fallbackSupport = `<Image src="gibberish.png" fallbackSrc="https://via.placeholder.com/150" />`;
export const snippets = {
importComponent,
basicUsage,
size,
borderRadius,
fallbackSupport,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/kbd/index.tsx
================================================
import { Kbd, ListItem, Text, UnorderedList } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function KbdDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/image",
label: "Image",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/list",
label: "List",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#guideline", label: "Guideline" },
{ href: "#modifier", label: "Modifier" },
];
onMount(() => {
Prism.highlightAll();
});
return (
<PageLayout
previousLink={previousLink}
nextLink={nextLink}
contextualNavLinks={contextualNavLinks}
>
<PageTitle>Kbd</PageTitle>
<Text mb="$5">
The keyboard key component exists to show which key or combination of keys performs a given
action. The action itself should be further explained in accompanying content. It renders a{" "}
<Code>kbd</Code> element.
</Text>
<SectionTitle id="import">Import</SectionTitle>
<CodeSnippet snippet={snippets.importComponent} mb="$12" />
<SectionTitle id="usage">Usage</SectionTitle>
<Preview snippet={snippets.basicUsage} mb="$12">
<span>
<Kbd>shift</Kbd> + <Kbd>H</Kbd>
</span>
</Preview>
<SectionTitle id="guideline">Guideline</SectionTitle>
<Text mb="$3">
All shortcuts should do their best to match what appears on the user’s keyboard.
</Text>
<UnorderedList spacing="$2" mb="$12">
<ListItem>All single letters A-Z are uppercase.</ListItem>
<ListItem>For non-letter keys such as enter, esc and shift, stick to lowercase.</ListItem>
<ListItem>Use the arrow symbol as opposed to spelling things out.</ListItem>
</UnorderedList>
<SectionTitle id="modifier">Modifier</SectionTitle>
<Text mb="$5">
The only punctuation you should need is the <strong>+</strong> to indicate that a
combination of keys will activate the shortcut.
</Text>
<Preview snippet={snippets.modifierPlus} mb="$10">
<span>
<Kbd>shift</Kbd> + <Kbd>H</Kbd>
</span>
</Preview>
<Text mb="$5">
For a sequence of keys where one must follow the other, write <em>"then"</em> in between.
Stick to lowercase to match the non-letter keys.
</Text>
<Preview snippet={snippets.modifierThen} mb="$10">
<span>
<Kbd>shift</Kbd> then <Kbd>H</Kbd>
</span>
</Preview>
<Text mb="$5">
If two different keys can execute the same action or the shortcut itself may look different
on the user’s keyboard, write <em>"or"</em> in between.
</Text>
<Preview snippet={snippets.modifierOr}>
<span>
<Kbd>alt</Kbd> or <Kbd>option</Kbd>
</span>
</Preview>
</PageLayout>
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/kbd/snippets.ts
================================================
const importComponent = `import { Kbd } from "@hope-ui/solid"`;
const basicUsage = `<span>
<Kbd>shift</Kbd> + <Kbd>H</Kbd>
</span>`;
const modifierPlus = `<span>
<Kbd>shift</Kbd> + <Kbd>H</Kbd>
</span>`;
const modifierThen = `<span>
<Kbd>shift</Kbd> then <Kbd>H</Kbd>
</span>`;
const modifierOr = `<span>
<Kbd>alt</Kbd> or <Kbd>option</Kbd>
</span>`;
export const snippets = {
importComponent,
basicUsage,
modifierPlus,
modifierThen,
modifierOr,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/list/index.tsx
================================================
import { Anchor, List, ListIcon, ListItem, OrderedList, Text, UnorderedList } from "@hope-ui/solid";
import Prism from "prismjs";
import { Link } from "solid-app-router";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconCheck } from "@/icons/IconCheck";
import { IconCircleDashed } from "@/icons/IconCircleDashed";
import { snippets } from "./snippets";
export default function ListDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/kbd",
label: "Kbd",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/table",
label: "Table",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#unordered-list", label: "Unordered List" },
{ href: "#ordered-list", label: "Ordered List" },
{ href: "#unstyled-list", label: "Unstyled List with icon" },
{ href: "#props", label: "Props" },
{ href: "#list-props", label: "List props", indent: true },
{ href: "#other-components-props", label: "Other components props", indent: true },
];
const propItems: PropsTableItem[] = [
{
name: "spacing",
description: "The space between each list item.",
type: 'ResponsiveValue<MarginProps["margin"]>',
},
{
name: "styleType",
description: "Shorthand for the `list-style-type` css property.",
type: "Property.ListStyleType",
},
{
name: "stylePosition",
description: "Shorthand for the `list-style-position` css property.",
type: "Property.ListStylePosition",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
<PageLayout
previousLink={previousLink}
nextLink={nextLink}
contextualNavLinks={contextualNavLinks}
>
<PageTitle>List</PageTitle>
<Text mb="$5">
<Code>List</Code> component is used to display list items. It renders a <Code>ul</Code>{" "}
element by default.
</Text>
<SectionTitle id="import">Import</SectionTitle>
<CodeSnippet snippet={snippets.importComponent} mb="$12" />
<SectionTitle id="unordered-list">Unordered List</SectionTitle>
<Preview snippet={snippets.unorderedList} mb="$12">
<UnorderedList>
<ListItem>Clone or download repository from GitHub</ListItem>
<ListItem>Install dependencies with npm</ListItem>
<ListItem>To start development server run npm start command</ListItem>
<ListItem>Run tests to make sure your changes do not break the build</ListItem>
<ListItem>Submit a pull request once you are done</ListItem>
</UnorderedList>
</Preview>
<SectionTitle id="ordered-list">Ordered List</SectionTitle>
<Preview snippet={snippets.orderedList} mb="$12">
<OrderedList>
<ListItem>Clone or download repository from GitHub</ListItem>
<ListItem>Install dependencies with npm</ListItem>
<ListItem>To start development server run npm start command</ListItem>
<ListItem>Run tests to make sure your changes do not break the build</ListItem>
<ListItem>Submit a pull request once you are done</ListItem>
</OrderedList>
</Preview>
<SectionTitle id="unstyled-list">Unstyled List with icon</SectionTitle>
<Text mb="$5">
Add icons to the list items by using the <Code>ListIcon</Code> component. The size of the
icon is relative to the font size of the list item.
</Text>
<Preview snippet={snippets.unstyledListWithIcon} mb="$12">
<List spacing="$3">
<ListItem>
<ListIcon as={IconCheck} color="$success9" />
Clone or download repository from GitHub
</ListItem>
<ListItem>
<ListIcon as={IconCheck} color="$success9" />
Install dependencies with npm
</ListItem>
<ListItem>
<ListIcon as={IconCheck} color="$success9" />
To start development server run npm start command
</ListItem>
<ListItem>
<ListIcon as={IconCheck} color="$success9" />
Run tests to make sure your changes do not break the build
</ListItem>
<ListItem>
<ListIcon as={IconCircleDashed} color="$info9" />
Submit a pull request once you are done
</ListItem>
</List>
</Preview>
<SectionTitle id="props">Props</SectionTitle>
<SectionSubtitle id="list-props">List props</SectionSubtitle>
<PropsTable items={propItems} mb="$10" />
<SectionSubtitle id="other-components-props">Other components props</SectionSubtitle>
<UnorderedList spacing="$2">
<ListItem>
<Code>ListItem</Code> composes{" "}
<Anchor as={Link} href="/docs/layout/box" color="$primary11" fontWeight="$semibold">
Box
</Anchor>{" "}
component.
</ListItem>
<ListItem>
<Code>ListIcon</Code> composes{" "}
<Anchor
as={Link}
href="/docs/data-display/icon"
color="$primary11"
fontWeight="$semibold"
>
Icon
</Anchor>{" "}
component.
</ListItem>
</UnorderedList>
</PageLayout>
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/list/snippets.ts
================================================
const importComponent = `import {
List,
ListItem,
ListIcon,
OrderedList,
UnorderedList,
} from "@hope-ui/solid"`;
const unorderedList = `<UnorderedList>
<ListItem>Clone or download repository from GitHub</ListItem>
<ListItem>Install dependencies with npm</ListItem>
<ListItem>To start development server run npm start command</ListItem>
<ListItem>Run tests to make sure your changes do not break the build</ListItem>
<ListItem>Submit a pull request once you are done</ListItem>
</UnorderedList>`;
const orderedList = `<OrderedList>
<ListItem>Clone or download repository from GitHub</ListItem>
<ListItem>Install dependencies with npm</ListItem>
<ListItem>To start development server run npm start command</ListItem>
<ListItem>Run tests to make sure your changes do not break the build</ListItem>
<ListItem>Submit a pull request once you are done</ListItem>
</OrderedList>`;
const unstyledListWithIcon = `<List spacing="$3">
<ListItem>
<ListIcon as={IconCheck} color="$success9" />
Clone or download repository from GitHub
</ListItem>
<ListItem>
<ListIcon as={IconCheck} color="$success9" />
Install dependencies with npm
</ListItem>
<ListItem>
<ListIcon as={IconCheck} color="$success9" />
To start development server run npm start command
</ListItem>
<ListItem>
<ListIcon as={IconCheck} color="$success9" />
Run tests to make sure your changes do not break the build
</ListItem>
<ListItem>
<ListIcon as={IconCircleDashed} color="$info9" />
Submit a pull request once you are done
</ListItem>
</List>`;
export const snippets = {
importComponent,
unorderedList,
orderedList,
unstyledListWithIcon,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/table/index.tsx
================================================
import { Table, TableCaption, Tbody, Td, Text, Tfoot, Th, Thead, Tr } from "@hope-ui/solid";
import Prism from "prismjs";
import { onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { snippets } from "./snippets";
export default function TableDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/list",
label: "List",
};
const nextLink: ContextualNavLink = {
href: "/docs/data-display/tag",
label: "Tag",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#striped", label: "Striped table", indent: true },
{ href: "#dense", label: "Dense table", indent: true },
{ href: "#row-highlight", label: "Row highlight", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
{ href: "#table-props", label: "Table props", indent: true },
{ href: "#table-caption-props", label: "TableCaption props", indent: true },
{ href: "#th-props", label: "Th props", indent: true },
{ href: "#td-props", label: "Td props", indent: true },
];
const tablePropItems: PropsTableItem[] = [
{
name: "striped",
description: "Set a neutral background color on odd or even row of table.",
type: '"odd" | "even"',
},
{
name: "dense",
description: "If `true`, row will have less padding and smaller font size.",
type: "boolean",
},
{
name: "highlightOnHover",
description: "If `true`, row will have hover color.",
type: "boolean",
},
];
const tableCaptionPropItems: PropsTableItem[] = [
{
name: "placement",
description:
"The placement of the table caption. This sets the `caption-side` CSS attribute.",
type: '"top" | "bottom"',
defaultValue: '"bottom"',
},
];
const thPropItems: PropsTableItem[] = [
{
name: "numeric",
description: "Aligns the cell content to the right.",
type: "boolean",
},
];
const tdPropItems: PropsTableItem[] = [
{
name: "numeric",
description: "Aligns the cell content to the right.",
type: "boolean",
},
];
onMount(() => {
Prism.highlightAll();
});
return (
<PageLayout
previousLink={previousLink}
nextLink={nextLink}
contextualNavLinks={contextualNavLinks}
>
<PageTitle>Table</PageTitle>
<Text mb="$5">
Tables are used to organize and display data efficiently. It renders a <Code>table</Code>{" "}
element by default.
</Text>
<SectionTitle id="import">Import</SectionTitle>
<CodeSnippet snippet={snippets.importComponent} mb="$12" />
<SectionTitle id="usage">Usage</SectionTitle>
<Preview snippet={snippets.basicUsage} mb="$12">
<Table>
<TableCaption>Imperial to metric conversion factors</TableCaption>
<Thead>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>inches</Td>
<Td>millimetres (mm)</Td>
<Td numeric>25.4</Td>
</Tr>
<Tr>
<Td>feet</Td>
<Td>centimetres (cm)</Td>
<Td numeric>30.48</Td>
</Tr>
<Tr>
<Td>yards</Td>
<Td>metres (m)</Td>
<Td numeric>0.91444</Td>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Tfoot>
</Table>
</Preview>
<SectionTitle id="striped">Striped table</SectionTitle>
<Text mb="$5">
Use the <Code>striped</Code> prop to render striped rows. You can set the value to{" "}
<Code>even</Code> or <Code>odd</Code>.
</Text>
<Preview snippet={snippets.striped} mb="$12">
<Table striped="odd">
<TableCaption>Imperial to metric conversion factors</TableCaption>
<Thead>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>inches</Td>
<Td>millimetres (mm)</Td>
<Td numeric>25.4</Td>
</Tr>
<Tr>
<Td>feet</Td>
<Td>centimetres (cm)</Td>
<Td numeric>30.48</Td>
</Tr>
<Tr>
<Td>yards</Td>
<Td>metres (m)</Td>
<Td numeric>0.91444</Td>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Tfoot>
</Table>
</Preview>
<SectionTitle id="dense">Dense table</SectionTitle>
<Text mb="$5">
Use the <Code>dense</Code> prop to reduce the table size.
</Text>
<Preview snippet={snippets.dense} mb="$12">
<Table dense>
<TableCaption>Imperial to metric conversion factors</TableCaption>
<Thead>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>inches</Td>
<Td>millimetres (mm)</Td>
<Td numeric>25.4</Td>
</Tr>
<Tr>
<Td>feet</Td>
<Td>centimetres (cm)</Td>
<Td numeric>30.48</Td>
</Tr>
<Tr>
<Td>yards</Td>
<Td>metres (m)</Td>
<Td numeric>0.91444</Td>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Tfoot>
</Table>
</Preview>
<SectionTitle id="row-highlight">Row highlight</SectionTitle>
<Text mb="$5">
Use the <Code>highlightOnHover</Code> prop to highlight row on hover.
</Text>
<Preview snippet={snippets.highlightOnHover} mb="$12">
<Table highlightOnHover>
<TableCaption>Imperial to metric conversion factors</TableCaption>
<Thead>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>inches</Td>
<Td>millimetres (mm)</Td>
<Td numeric>25.4</Td>
</Tr>
<Tr>
<Td>feet</Td>
<Td>centimetres (cm)</Td>
<Td numeric>30.48</Td>
</Tr>
<Tr>
<Td>yards</Td>
<Td>metres (m)</Td>
<Td numeric>0.91444</Td>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Tfoot>
</Table>
</Preview>
<SectionTitle id="theming">Theming</SectionTitle>
<Text mb="$5">
<Code>Table</Code> base styles and default props can be overridden in the Hope UI theme
configuration like below:
</Text>
<CodeSnippet lang="js" snippet={snippets.theming} mb="$12" />
<SectionTitle id="props">Props</SectionTitle>
<SectionSubtitle id="table-props">Table props</SectionSubtitle>
<PropsTable items={tablePropItems} mb="$10" />
<SectionSubtitle id="table-caption-props">TableCaption props</SectionSubtitle>
<PropsTable items={tableCaptionPropItems} mb="$10" />
<SectionSubtitle id="th-props">Th props</SectionSubtitle>
<PropsTable items={thPropItems} mb="$10" />
<SectionSubtitle id="td-props">Td props</SectionSubtitle>
<PropsTable items={tdPropItems} />
</PageLayout>
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/table/snippets.ts
================================================
const importComponent = `import {
Table,
TableCaption,
Thead,
Tbody,
Tfoot,
Tr,
Th,
Td
} from "@hope-ui/solid"`;
const basicUsage = `<Table>
<TableCaption>Imperial to metric conversion factors</TableCaption>
<Thead>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>inches</Td>
<Td>millimetres (mm)</Td>
<Td numeric>25.4</Td>
</Tr>
<Tr>
<Td>feet</Td>
<Td>centimetres (cm)</Td>
<Td numeric>30.48</Td>
</Tr>
<Tr>
<Td>yards</Td>
<Td>metres (m)</Td>
<Td numeric>0.91444</Td>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Tfoot>
</Table>`;
const striped = `<Table striped="odd">
<TableCaption>Imperial to metric conversion factors</TableCaption>
<Thead>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>inches</Td>
<Td>millimetres (mm)</Td>
<Td numeric>25.4</Td>
</Tr>
<Tr>
<Td>feet</Td>
<Td>centimetres (cm)</Td>
<Td numeric>30.48</Td>
</Tr>
<Tr>
<Td>yards</Td>
<Td>metres (m)</Td>
<Td numeric>0.91444</Td>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Tfoot>
</Table>`;
const dense = `<Table dense>
<TableCaption>Imperial to metric conversion factors</TableCaption>
<Thead>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>inches</Td>
<Td>millimetres (mm)</Td>
<Td numeric>25.4</Td>
</Tr>
<Tr>
<Td>feet</Td>
<Td>centimetres (cm)</Td>
<Td numeric>30.48</Td>
</Tr>
<Tr>
<Td>yards</Td>
<Td>metres (m)</Td>
<Td numeric>0.91444</Td>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Tfoot>
</Table>`;
const highlightOnHover = `<Table highlightOnHover>
<TableCaption>Imperial to metric conversion factors</TableCaption>
<Thead>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>inches</Td>
<Td>millimetres (mm)</Td>
<Td numeric>25.4</Td>
</Tr>
<Tr>
<Td>feet</Td>
<Td>centimetres (cm)</Td>
<Td numeric>30.48</Td>
</Tr>
<Tr>
<Td>yards</Td>
<Td>metres (m)</Td>
<Td numeric>0.91444</Td>
</Tr>
</Tbody>
<Tfoot>
<Tr>
<Th>To convert</Th>
<Th>into</Th>
<Th numeric>multiply by</Th>
</Tr>
</Tfoot>
</Table>`;
const theming = `const config: HopeThemeConfig = {
components: {
Table: {
baseStyle: {
root: SystemStyleObject,
caption: SystemStyleObject,
thead: SystemStyleObject,
tbody: SystemStyleObject,
tfoot: SystemStyleObject,
tr: SystemStyleObject,
th: SystemStyleObject,
td: SystemStyleObject,
},
defaultProps: {
root: TableOptions,
caption: ThemeableTableCaptionOptions,
}
}
}
}`;
export const snippets = {
importComponent,
basicUsage,
striped,
dense,
highlightOnHover,
theming,
};
================================================
FILE: apps/docs/src/pages/component-docs/data-display/tag/index.tsx
================================================
import {
hope,
HStack,
Tag,
TagCloseButton,
TagLabel,
TagLeftIcon,
TagProps,
TagRightIcon,
Text,
VStack,
} from "@hope-ui/solid";
import Prism from "prismjs";
import { For, onMount } from "solid-js";
import Code from "@/components/Code";
import CodeSnippet from "@/components/CodeSnippet";
import { ContextualNavLink } from "@/components/ContextualNav";
import PageLayout from "@/components/PageLayout";
import PageTitle from "@/components/PageTitle";
import { Preview } from "@/components/Preview";
import { PropsTable, PropsTableItem } from "@/components/PropsTable";
import SectionSubtitle from "@/components/SectionSubtitle";
import SectionTitle from "@/components/SectionTitle";
import { IconGear } from "@/icons/IconGear";
import { IconPlus } from "@/icons/IconPlus";
import { snippets } from "./snippets";
export default function TagDoc() {
const previousLink: ContextualNavLink = {
href: "/docs/data-display/table",
label: "Table",
};
const nextLink: ContextualNavLink = {
href: "/docs/navigation/anchor",
label: "Anchor",
};
const contextualNavLinks: ContextualNavLink[] = [
{ href: "#import", label: "Import" },
{ href: "#usage", label: "Usage" },
{ href: "#colors", label: "Tag colors", indent: true },
{ href: "#sizes", label: "Tag sizes", indent: true },
{ href: "#variants", label: "Tag variants", indent: true },
{ href: "#with-icon", label: "Tag with icon", indent: true },
{ href: "#with-close-button", label: "Tag with close button", indent: true },
{ href: "#theming", label: "Theming" },
{ href: "#props", label: "Props" },
];
const propItems: PropsTableItem[] = [
{
name: "variant",
description: "The visual style of the tag.",
type: '"solid" | "subtle" | "outline" | "dot"',
defaultValue: '"subtle"',
},
{
name: "colorScheme",
description: "The color of the tag.",
type: '"primary" | "accent" | "neutral" | "success" | "info" | "warning" | "danger"',
defaultValue: '"neutral"',
},
{
name: "size",
description: "The size of the tag.",
type: '"sm" | "md" | "lg"',
defaultValue: '"md"',
},
{
name: "dotPlacement",
description: "Determines the placement of the dot when `variant` is `dot`.",
type: '"start" | "end"',
defaultValue: '"start"',
},
];
onMount(() => {
Prism.highlightAll();
});
return (
<PageLayout
previousLink={previousLink}
nextLink={nextLink}
contextualNavLinks={contextualNavLinks}
>
<PageTitle>Tag</PageTitle>
<Text mb="$5">
<Code>Tag</Code> component is used for items that need to be labeled, categorized, or
organized using keywords that describe them.
</Text>
<SectionTitle id="import">Import</SectionTitle>
<CodeSnippet snippet={snippets.importComponent} mb="$6" />
<hope.ul ps="$6" mb="$12">
<hope.li mb="$2">
<strong>Tag:</strong> The wrapper for all the tag elements.
</hope.li>
<hope.li mb="$2">
<strong>TagLabel:</strong> The label for tag's text content.
</hope.li>
<hope.li mb="$2">
<strong>TagLeftIcon:</strong> The icon placed on the left side of the tag.
</hope.li>
<hope.li mb="$2">
<strong>TagRightIcon:</strong> The icon placed on the right side of the tag.
</hope.li>
<hope.li>
<strong>TagCloseButton:</strong> The close button for the tag.
</hope.li>
</hope.ul>
<SectionTitle id="usage">Usage</SectionTitle>
<Preview snippet={snippets.basicUsage} mb="$10">
<Tag>Sample Tag</Tag>
</Preview>
<SectionSubtitle id="colors">Tag colors</SectionSubtitle>
<Text mb="$5">
Use the <Code>colorScheme</Code> prop to change the color of the Tag You can set the value
to <Code>primary</Code>, <Code>accent</Code>, <Code>neutral</Code>, <Code>success</Code>,{" "}
<Code>info</Code>, <Code>warning</Code> or <Code>danger</Code>.
</Text>
<Preview snippet={snippets.colors} mb="$10">
<HStack spacing="$4">
<Tag colorScheme="primary">Tag</Tag>
<Tag colorScheme="accent">Tag</Tag>
<Tag colorScheme="neutral">Tag</Tag>
<Tag colorScheme="success">Tag</Tag>
<Tag colorScheme="info">Tag</Tag>
<Tag colorScheme="warning">Tag</Tag>
<Tag colorScheme="danger">Tag</Tag>
</HStack>
</Preview>
<SectionSubtitle id="sizes">Tag sizes</SectionSubtitle>
<Text mb="$5">
Use the <Code>size</Code> prop to change the size of the Tag You can set the value to{" "}
<Code>sm</Code>, <Code>md</Code> or <Code>lg</Code>.
</Text>
<Preview snippet={snippets.sizes} mb="$10">
<HStack spacing="$4">
<Tag size="sm">Tag</Tag>
<Tag size="md">Tag</Tag>
<Tag size="lg">Tag</Tag>
</HStack>
</Preview>
<SectionSubtitle id="variants">Tag variants</SectionSubtitle>
<Text mb="$5">
Use the <Code>variant</Code> prop to change the visual style of the Tag You can set the
value to <Code>solid</Code>, <Code>subtle</Code>, <Code>outline</Code> or <Code>dot</Code>.
</Text>
<Preview snippet={snippets.variants} mb="$8">
<HStack spacing="$4">
<Tag variant="solid">Tag</Tag>
<Tag variant="subtle">Tag</Tag>
<Tag variant="outline">Tag</Tag>
<Tag variant="dot" dotPlacement="start">
Tag
</Tag>
<Tag variant="dot" dotPlacement="end">
Tag
</Tag>
</HStack>
</Preview>
<Text mb="$5">Overview of all color and variant combination:</Text>
<Preview mb="$10">
<VStack alignItems="flex-start" spacing="$4">
<For each={["solid", "subtle", "outline", "dot"]}>
{variant => (
<HStack spacing="$4">
<For
each={["primary", "accent", "neutral", "success", "info", "warning", "danger"]}
>
{colorScheme => (
<Tag
variant={variant as TagProps["variant"]}
colorScheme={colorScheme as TagProps["colorScheme"]}
>
Tag
</Tag>
)}
</For>
</HStack>
)}
</For>
</VStack>
</Preview>
<SectionSubtitle id="with-icon">Tag with icon</SectionSubtitle>
<Text mb="$5">
You can add left and right icons to the Tag component using the <Code>TagLeftIcon</Code> and{" "}
<Code>TagRightIcon</Code> components respectively.
</Text>
<Preview snippet={snippets.withLeftIcon} mb="$6">
<HStack spacing="$4">
<Tag size="sm">
<TagLeftIcon as={IconPlus} />
<TagLabel>Tag</TagLabel>
</Tag>
<Tag size="md">
<TagLeftIcon as={IconPlus} />
<TagLabel>Tag</TagLabel>
</Tag>
<Tag size="lg">
<TagLeftIcon as={IconPlus} />
<TagLabel>Tag</TagLabel>
</Tag>
</HStack>
</Preview>
<Preview snippet={snippets.withRightIcon} mb="$12">
<HStack spacing="$4">
<Tag size="sm">
<TagLabel>Tag</TagLabel>
<TagRightIcon as={IconGear} />
</Tag>
<Tag size="md">
<TagLabel>Tag</TagLabel>
<TagRightIcon as={IconGear} />
</Tag>
<Tag size="lg">
<TagLabel>Tag</TagLabel>
<TagRightIcon as={IconGear} />
</Tag>
</HStack>
</Preview>
<SectionSubtitle id="with-close-button">Tag with close button</SectionSubtitle>
<Text mb="$5">
Use the <Code>TagCloseButton</Code> component to add a close button to the Tag
</Text>
<Preview snippet={snippets.withCloseButton} mb="$12">
<HStack spacing="$4">
<Tag size="sm">
<TagLabel>Tag</TagLabel>
<TagCloseButton />
</Tag>
<Tag size="md">
<TagLabel>Tag</TagLabel>
<TagCloseButton />
</Tag>
<Tag size="lg">
<TagLabel>Tag</TagLabel>
<TagCloseButton />
</Tag>
</HStack>
</Preview>
<SectionTitle id="theming">Theming</SectionTitle>
<Text mb="$5">
<Code>Tag</Code> base styles and default props can be overridden in the Hope UI theme
configuration like below:
</Text>
<CodeSnippet lang="js" snippet={snippets.theming} mb="$12" />
<SectionTitle id="props">Props</SectionTitle>
<PropsTable items={propItems} />
</PageLayout>
);
}
================================================
FILE: apps/docs/src/pages/component-docs/data-display/tag/snippets.ts
================================================
const importComponent = `import {
Tag,
TagCloseButton,
TagLabel,
TagLeftIcon,
TagRightIcon,
} from "@hope-ui/solid"`;
const basicUsage = `<Tag>Sample Tag</Tag>`;
const colors = `<HStack spacing="$4">
<Tag colorScheme="primary">Tag</Tag>
<Tag colorScheme="accent">Tag</Tag>
<Tag colorScheme="neutral">Tag</Tag>
<Tag colorScheme="success">Tag</Tag>
<Tag colorScheme="info">Tag</Tag>
<Tag colorScheme="warning">Tag</Tag>
<Tag colorScheme="danger">Tag</Tag>
</HStack>`;
const sizes = `<HStack spacing="$4">
<Tag size="sm">Tag</Tag>
<Tag size="md">Tag</Tag>
<Tag size="lg">Tag</Tag>
</HStack>`;
const variants = `<HStack spacing="$4">
<Tag variant="solid">Tag</Tag>
<Tag variant="subtle">Tag</Tag>
<Tag variant="outline">Tag</Tag>
<Tag variant="dot" dotPlacement="start">Tag</Tag>
<Tag variant="dot" dotPlacement="end">Tag</Tag>
</HStack>`;
const withLeftIcon = `<HStack sp
gitextract__b_j4ttw/ ├── .all-contributorsrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ └── workflows/ │ └── build-test.yml ├── .gitignore ├── .husky/ │ ├── commit-msg │ └── pre-commit ├── .prettierrc.json ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── ROADMAP.md ├── apps/ │ └── docs/ │ ├── .eslintrc.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src/ │ │ ├── App.tsx │ │ ├── components/ │ │ │ ├── AppNavLink.tsx │ │ │ ├── BeatLoader.tsx │ │ │ ├── Code.tsx │ │ │ ├── CodeSnippet.tsx │ │ │ ├── ColorScale.tsx │ │ │ ├── ContextualNav.tsx │ │ │ ├── Footer.tsx │ │ │ ├── Header.tsx │ │ │ ├── MainNavContent.tsx │ │ │ ├── MainNavSubtitle.tsx │ │ │ ├── MainNavTitle.tsx │ │ │ ├── MainNavigation.tsx │ │ │ ├── PageLayout.tsx │ │ │ ├── PageTitle.tsx │ │ │ ├── Preview.tsx │ │ │ ├── PropsTable.tsx │ │ │ ├── SectionSubtitle.tsx │ │ │ ├── SectionTitle.tsx │ │ │ └── StylePropsTable.tsx │ │ ├── icons/ │ │ │ ├── IconAccessibility.tsx │ │ │ ├── IconArrowLeft.tsx │ │ │ ├── IconArrowRight.tsx │ │ │ ├── IconCaretDown.tsx │ │ │ ├── IconCheck.tsx │ │ │ ├── IconChevronRight.tsx │ │ │ ├── IconCircleDashed.tsx │ │ │ ├── IconCode.tsx │ │ │ ├── IconComponent.tsx │ │ │ ├── IconEdit.tsx │ │ │ ├── IconEmail.tsx │ │ │ ├── IconExternalLink.tsx │ │ │ ├── IconGear.tsx │ │ │ ├── IconGithub.tsx │ │ │ ├── IconHamburgerMenu.tsx │ │ │ ├── IconMenu.tsx │ │ │ ├── IconMinus.tsx │ │ │ ├── IconMoon.tsx │ │ │ ├── IconPalette.tsx │ │ │ ├── IconPhone.tsx │ │ │ ├── IconPlus.tsx │ │ │ ├── IconQuestionMark.tsx │ │ │ ├── IconRepeat.tsx │ │ │ ├── IconRocket.tsx │ │ │ ├── IconSearch.tsx │ │ │ ├── IconStar.tsx │ │ │ ├── IconSun.tsx │ │ │ ├── IconTwitter.tsx │ │ │ └── IconUser.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ └── pages/ │ │ ├── component-docs/ │ │ │ ├── data-display/ │ │ │ │ ├── accordion/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── avatar/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── badge/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── icon/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── image/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── kbd/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── list/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── table/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ └── tag/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── data-entry/ │ │ │ │ ├── checkbox/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── form-control/ │ │ │ │ │ ├── felte-example.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── input/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── radio/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── select/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── switch/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ └── textarea/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── feedback/ │ │ │ │ ├── alert/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── circular-progress/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── notification/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── progress/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── skeleton/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ └── spinner/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── general/ │ │ │ │ ├── button/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ └── icon-button/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── layout/ │ │ │ │ ├── aspect-ratio/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── box/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── center/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── container/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── divider/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── flex/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── grid/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── simple-grid/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ └── stack/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── navigation/ │ │ │ │ ├── anchor/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── breadcrumb/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ └── tabs/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── others/ │ │ │ │ └── close-button/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── overlay/ │ │ │ │ ├── drawer/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── menu/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── modal/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ ├── popover/ │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── snippets.ts │ │ │ │ └── tooltip/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ └── typography/ │ │ │ ├── heading/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ └── text/ │ │ │ ├── index.tsx │ │ │ └── snippets.ts │ │ ├── features/ │ │ │ ├── create-styles/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── css-prop/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── global-styles/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── hope-factory/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ ├── responsive-styles/ │ │ │ │ ├── index.tsx │ │ │ │ └── snippets.ts │ │ │ └── style-props/ │ │ │ ├── index.tsx │ │ │ └── snippets.ts │ │ ├── getting-started/ │ │ │ ├── changelog/ │ │ │ │ └── index.tsx │ │ │ └── installation/ │ │ │ ├── index.tsx │ │ │ └── snippets.ts │ │ ├── landing-page.tsx │ │ ├── not-found.tsx │ │ └── theming/ │ │ ├── color-mode/ │ │ │ ├── index.tsx │ │ │ └── snippets.ts │ │ ├── css-variables/ │ │ │ ├── index.tsx │ │ │ └── snippets.ts │ │ ├── customize-theme/ │ │ │ ├── index.tsx │ │ │ └── snippets.ts │ │ └── default-theme/ │ │ ├── index.tsx │ │ └── snippets.ts │ ├── tsconfig.json │ └── vite.config.ts ├── commitlint.config.js ├── jest.config.js ├── jest.setup.ts ├── netlify.toml ├── package.json ├── packages/ │ └── solid/ │ ├── .browserslistrc │ ├── .storybook/ │ │ ├── main.js │ │ └── preview.js │ ├── CHANGELOG.md │ ├── README.md │ ├── dev/ │ │ ├── index.html │ │ ├── index.tsx │ │ └── vite.config.ts │ ├── jest.config.js │ ├── package.json │ ├── src/ │ │ ├── color-mode.ts │ │ ├── components/ │ │ │ ├── accordion/ │ │ │ │ ├── __tests__/ │ │ │ │ │ └── accordion.test.tsx │ │ │ │ ├── accordion-button.tsx │ │ │ │ ├── accordion-icon.tsx │ │ │ │ ├── accordion-item.tsx │ │ │ │ ├── accordion-panel.tsx │ │ │ │ ├── accordion.styles.ts │ │ │ │ ├── accordion.tsx │ │ │ │ └── index.ts │ │ │ ├── alert/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── alert-description.test.tsx │ │ │ │ │ ├── alert-icon.test.tsx │ │ │ │ │ ├── alert-title.test.tsx │ │ │ │ │ └── alert.test.tsx │ │ │ │ ├── alert-description.tsx │ │ │ │ ├── alert-icon.tsx │ │ │ │ ├── alert-title.tsx │ │ │ │ ├── alert.stories.tsx │ │ │ │ ├── alert.styles.ts │ │ │ │ ├── alert.tsx │ │ │ │ └── index.ts │ │ │ ├── anchor/ │ │ │ │ ├── anchor.stories.tsx │ │ │ │ ├── anchor.styles.ts │ │ │ │ ├── anchor.test.tsx │ │ │ │ ├── anchor.tsx │ │ │ │ └── index.ts │ │ │ ├── aspect-ratio/ │ │ │ │ ├── aspect-ratio.styles.ts │ │ │ │ ├── aspect-ratio.test.tsx │ │ │ │ ├── aspect-ratio.tsx │ │ │ │ └── index.ts │ │ │ ├── async-button/ │ │ │ │ ├── async-button.stories.tsx │ │ │ │ ├── async-button.test.tsx │ │ │ │ ├── async-button.tsx │ │ │ │ └── index.ts │ │ │ ├── avatar/ │ │ │ │ ├── avatar-badge.tsx │ │ │ │ ├── avatar-excess.tsx │ │ │ │ ├── avatar-group.tsx │ │ │ │ ├── avatar-image.tsx │ │ │ │ ├── avatar-initials.tsx │ │ │ │ ├── avatar.styles.ts │ │ │ │ ├── avatar.tsx │ │ │ │ ├── avatar.utils.tsx │ │ │ │ └── index.ts │ │ │ ├── badge/ │ │ │ │ ├── badge.stories.tsx │ │ │ │ ├── badge.styles.ts │ │ │ │ ├── badge.test.tsx │ │ │ │ ├── badge.tsx │ │ │ │ └── index.ts │ │ │ ├── box/ │ │ │ │ ├── box.test.tsx │ │ │ │ ├── box.tsx │ │ │ │ └── index.ts │ │ │ ├── breadcrumb/ │ │ │ │ ├── breadcrumb-item.tsx │ │ │ │ ├── breadcrumb-link.tsx │ │ │ │ ├── breadcrumb-separator.tsx │ │ │ │ ├── breadcrumb.styles.ts │ │ │ │ ├── breadcrumb.tsx │ │ │ │ └── index.ts │ │ │ ├── button/ │ │ │ │ ├── button-group.tsx │ │ │ │ ├── button-icon.tsx │ │ │ │ ├── button-loader.tsx │ │ │ │ ├── button.stories.tsx │ │ │ │ ├── button.styles.ts │ │ │ │ ├── button.test.tsx │ │ │ │ ├── button.tsx │ │ │ │ └── index.ts │ │ │ ├── center/ │ │ │ │ ├── center.stories.tsx │ │ │ │ ├── center.styles.ts │ │ │ │ ├── center.test.tsx │ │ │ │ ├── center.tsx │ │ │ │ └── index.ts │ │ │ ├── checkbox/ │ │ │ │ ├── checkbox-group.tsx │ │ │ │ ├── checkbox-primitive-indicator.tsx │ │ │ │ ├── checkbox-primitive.tsx │ │ │ │ ├── checkbox.stories.tsx │ │ │ │ ├── checkbox.styles.ts │ │ │ │ ├── checkbox.tsx │ │ │ │ └── index.ts │ │ │ ├── circular-progress/ │ │ │ │ ├── circular-progress-indicator.tsx │ │ │ │ ├── circular-progress-label.tsx │ │ │ │ ├── circular-progress.styles.ts │ │ │ │ ├── circular-progress.tsx │ │ │ │ └── index.ts │ │ │ ├── click-outside/ │ │ │ │ ├── click-outside.tsx │ │ │ │ └── index.ts │ │ │ ├── close-button/ │ │ │ │ ├── close-button.styles.ts │ │ │ │ ├── close-button.tsx │ │ │ │ └── index.ts │ │ │ ├── collapse/ │ │ │ │ ├── collapse.styles.ts │ │ │ │ ├── collapse.tsx │ │ │ │ └── index.ts │ │ │ ├── container/ │ │ │ │ ├── container.stories.tsx │ │ │ │ ├── container.styles.ts │ │ │ │ ├── container.test.tsx │ │ │ │ ├── container.tsx │ │ │ │ └── index.ts │ │ │ ├── divider/ │ │ │ │ ├── divider.styles.ts │ │ │ │ ├── divider.tsx │ │ │ │ └── index.ts │ │ │ ├── drawer/ │ │ │ │ ├── drawer-content.tsx │ │ │ │ ├── drawer-overlay.tsx │ │ │ │ ├── drawer.styles.ts │ │ │ │ ├── drawer.tsx │ │ │ │ └── index.ts │ │ │ ├── factory.tsx │ │ │ ├── flex/ │ │ │ │ ├── flex.test.tsx │ │ │ │ ├── flex.tsx │ │ │ │ └── index.ts │ │ │ ├── form-control/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── form-control.test.tsx │ │ │ │ │ ├── form-error-message.test.tsx │ │ │ │ │ ├── form-helper-text.test.tsx │ │ │ │ │ └── form-label.test.tsx │ │ │ │ ├── form-control.stories.tsx │ │ │ │ ├── form-control.styles.ts │ │ │ │ ├── form-control.tsx │ │ │ │ ├── form-error-message.tsx │ │ │ │ ├── form-helper-text.tsx │ │ │ │ ├── form-label.tsx │ │ │ │ ├── index.ts │ │ │ │ └── use-form-control.ts │ │ │ ├── grid/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── grid-item.test.tsx │ │ │ │ │ ├── grid.test.tsx │ │ │ │ │ └── simple-grid.test.tsx │ │ │ │ ├── grid-item.tsx │ │ │ │ ├── grid.tsx │ │ │ │ ├── index.ts │ │ │ │ └── simple-grid.tsx │ │ │ ├── heading/ │ │ │ │ ├── heading.styles.ts │ │ │ │ ├── heading.test.tsx │ │ │ │ ├── heading.tsx │ │ │ │ └── index.ts │ │ │ ├── icon/ │ │ │ │ ├── create-icon.tsx │ │ │ │ ├── icon.styles.ts │ │ │ │ ├── icon.test.tsx │ │ │ │ ├── icon.tsx │ │ │ │ └── index.ts │ │ │ ├── icon-button/ │ │ │ │ ├── icon-button.stories.tsx │ │ │ │ ├── icon-button.test.tsx │ │ │ │ ├── icon-button.tsx │ │ │ │ └── index.ts │ │ │ ├── icons/ │ │ │ │ ├── IconCaretDown.tsx │ │ │ │ ├── IconCheck.tsx │ │ │ │ ├── IconCheckCircleSolid.tsx │ │ │ │ ├── IconClose.tsx │ │ │ │ ├── IconCloseSmall.tsx │ │ │ │ ├── IconCrossCircle.tsx │ │ │ │ ├── IconExclamationCircleSolid.tsx │ │ │ │ ├── IconExclamationTriangleSolid.tsx │ │ │ │ ├── IconInfoCircleSolid.tsx │ │ │ │ ├── IconSelector.tsx │ │ │ │ └── IconSpinner.tsx │ │ │ ├── image/ │ │ │ │ ├── image.test.tsx │ │ │ │ ├── image.tsx │ │ │ │ ├── image.utils.ts │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── input/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── input-addon.test.tsx │ │ │ │ │ ├── input-element.test.tsx │ │ │ │ │ ├── input-group.test.tsx │ │ │ │ │ └── input.test.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── input-addon.tsx │ │ │ │ ├── input-element.tsx │ │ │ │ ├── input-group.tsx │ │ │ │ ├── input.stories.tsx │ │ │ │ ├── input.styles.ts │ │ │ │ └── input.tsx │ │ │ ├── kbd/ │ │ │ │ ├── index.ts │ │ │ │ ├── kbd.styles.ts │ │ │ │ └── kbd.tsx │ │ │ ├── list/ │ │ │ │ ├── index.ts │ │ │ │ ├── list-icon.tsx │ │ │ │ ├── list-item.tsx │ │ │ │ ├── list.styles.ts │ │ │ │ └── list.tsx │ │ │ ├── menu/ │ │ │ │ ├── index.ts │ │ │ │ ├── menu-content.tsx │ │ │ │ ├── menu-group.tsx │ │ │ │ ├── menu-item.tsx │ │ │ │ ├── menu-label.tsx │ │ │ │ ├── menu-trigger.tsx │ │ │ │ ├── menu.styles.ts │ │ │ │ ├── menu.tsx │ │ │ │ └── menu.utils.ts │ │ │ ├── modal/ │ │ │ │ ├── create-modal.ts │ │ │ │ ├── index.ts │ │ │ │ ├── modal-body.tsx │ │ │ │ ├── modal-close-button.tsx │ │ │ │ ├── modal-content.tsx │ │ │ │ ├── modal-footer.tsx │ │ │ │ ├── modal-header.tsx │ │ │ │ ├── modal-overlay.tsx │ │ │ │ ├── modal.styles.ts │ │ │ │ └── modal.tsx │ │ │ ├── notification/ │ │ │ │ ├── index.ts │ │ │ │ ├── notification-container.tsx │ │ │ │ ├── notification-description.tsx │ │ │ │ ├── notification-icon.tsx │ │ │ │ ├── notification-title.tsx │ │ │ │ ├── notification.events.ts │ │ │ │ ├── notification.service.ts │ │ │ │ ├── notification.styles.ts │ │ │ │ ├── notification.tsx │ │ │ │ ├── notification.types.ts │ │ │ │ ├── notifications-provider.context.ts │ │ │ │ └── notifications-provider.tsx │ │ │ ├── popover/ │ │ │ │ ├── index.ts │ │ │ │ ├── popover-anchor.tsx │ │ │ │ ├── popover-arrow.tsx │ │ │ │ ├── popover-body.tsx │ │ │ │ ├── popover-close-button.tsx │ │ │ │ ├── popover-content.tsx │ │ │ │ ├── popover-footer.tsx │ │ │ │ ├── popover-header.tsx │ │ │ │ ├── popover-trigger.tsx │ │ │ │ ├── popover.styles.ts │ │ │ │ └── popover.tsx │ │ │ ├── progress/ │ │ │ │ ├── index.ts │ │ │ │ ├── progress-indicator.tsx │ │ │ │ ├── progress-label.tsx │ │ │ │ ├── progress.styles.ts │ │ │ │ └── progress.tsx │ │ │ ├── radio/ │ │ │ │ ├── index.ts │ │ │ │ ├── radio-group.tsx │ │ │ │ ├── radio.stories.tsx │ │ │ │ ├── radio.styles.ts │ │ │ │ └── radio.tsx │ │ │ ├── select/ │ │ │ │ ├── index.ts │ │ │ │ ├── select-content.tsx │ │ │ │ ├── select-icon.tsx │ │ │ │ ├── select-label.tsx │ │ │ │ ├── select-listbox.tsx │ │ │ │ ├── select-optgroup.tsx │ │ │ │ ├── select-option-indicator.tsx │ │ │ │ ├── select-option-text.tsx │ │ │ │ ├── select-option.tsx │ │ │ │ ├── select-placeholder.tsx │ │ │ │ ├── select-tag-close-button.tsx │ │ │ │ ├── select-tag.tsx │ │ │ │ ├── select-trigger.tsx │ │ │ │ ├── select-value.tsx │ │ │ │ ├── select.styles.ts │ │ │ │ ├── select.tsx │ │ │ │ └── select.utils.ts │ │ │ ├── simple-select/ │ │ │ │ ├── index.ts │ │ │ │ ├── simple-option.tsx │ │ │ │ └── simple-select.tsx │ │ │ ├── skeleton/ │ │ │ │ ├── index.ts │ │ │ │ ├── skeleton-circle.tsx │ │ │ │ ├── skeleton-text.tsx │ │ │ │ ├── skeleton.styles.ts │ │ │ │ └── skeleton.tsx │ │ │ ├── spacer/ │ │ │ │ ├── index.ts │ │ │ │ ├── spacer.styles.ts │ │ │ │ ├── spacer.test.tsx │ │ │ │ └── spacer.tsx │ │ │ ├── spinner/ │ │ │ │ ├── index.ts │ │ │ │ ├── spinner.styles.ts │ │ │ │ └── spinner.tsx │ │ │ ├── stack/ │ │ │ │ ├── index.ts │ │ │ │ ├── stack.styles.ts │ │ │ │ ├── stack.test.tsx │ │ │ │ └── stack.tsx │ │ │ ├── storybook-utils.tsx │ │ │ ├── switch/ │ │ │ │ ├── index.ts │ │ │ │ ├── switch-primitive-thumb.tsx │ │ │ │ ├── switch-primitive.tsx │ │ │ │ ├── switch.stories.tsx │ │ │ │ ├── switch.styles.ts │ │ │ │ └── switch.tsx │ │ │ ├── table/ │ │ │ │ ├── index.ts │ │ │ │ ├── table-caption.tsx │ │ │ │ ├── table.styles.ts │ │ │ │ ├── table.tsx │ │ │ │ ├── tbody.tsx │ │ │ │ ├── td.tsx │ │ │ │ ├── tfoot.tsx │ │ │ │ ├── th.tsx │ │ │ │ ├── thead.tsx │ │ │ │ └── tr.tsx │ │ │ ├── tabs/ │ │ │ │ ├── index.ts │ │ │ │ ├── tab-list.tsx │ │ │ │ ├── tab-panel.tsx │ │ │ │ ├── tab.tsx │ │ │ │ ├── tabs.styles.ts │ │ │ │ └── tabs.tsx │ │ │ ├── tag/ │ │ │ │ ├── __tests__/ │ │ │ │ │ ├── tag-close-button.test.tsx │ │ │ │ │ ├── tag-icon.test.tsx │ │ │ │ │ ├── tag-label.test.tsx │ │ │ │ │ └── tag.test.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── tag-close-button.tsx │ │ │ │ ├── tag-icon.tsx │ │ │ │ ├── tag-label.tsx │ │ │ │ ├── tag.stories.tsx │ │ │ │ ├── tag.styles.ts │ │ │ │ └── tag.tsx │ │ │ ├── test-utils.tsx │ │ │ ├── text/ │ │ │ │ ├── index.ts │ │ │ │ ├── text.styles.ts │ │ │ │ ├── text.test.tsx │ │ │ │ └── text.tsx │ │ │ ├── textarea/ │ │ │ │ ├── index.ts │ │ │ │ ├── textarea.stories.tsx │ │ │ │ ├── textarea.styles.ts │ │ │ │ ├── textarea.test.tsx │ │ │ │ └── textarea.tsx │ │ │ ├── tooltip/ │ │ │ │ ├── index.ts │ │ │ │ ├── tooltip.styles.ts │ │ │ │ └── tooltip.tsx │ │ │ └── types.ts │ │ ├── hooks/ │ │ │ ├── create-disclosure/ │ │ │ │ └── index.ts │ │ │ ├── create-queue/ │ │ │ │ ├── create-queue.test.ts │ │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ ├── use-click-outside/ │ │ │ │ └── index.ts │ │ │ └── use-event/ │ │ │ ├── __tests__/ │ │ │ │ └── index.spec.tsx │ │ │ ├── index.ts │ │ │ └── use-event.stories.tsx │ │ ├── hope-provider.tsx │ │ ├── index.ts │ │ ├── style-config.types.ts │ │ ├── styled-system/ │ │ │ ├── css-reset.ts │ │ │ ├── index.ts │ │ │ ├── keyframes.ts │ │ │ ├── media.ts │ │ │ ├── props/ │ │ │ │ ├── border.ts │ │ │ │ ├── color.ts │ │ │ │ ├── css.ts │ │ │ │ ├── flexbox.ts │ │ │ │ ├── grid.ts │ │ │ │ ├── interactivity.ts │ │ │ │ ├── layout.ts │ │ │ │ ├── margin.ts │ │ │ │ ├── padding.ts │ │ │ │ ├── position.ts │ │ │ │ ├── pseudo-selector.ts │ │ │ │ ├── radii.ts │ │ │ │ ├── shadow.ts │ │ │ │ ├── size.ts │ │ │ │ ├── transform.ts │ │ │ │ ├── transition.ts │ │ │ │ └── typography.ts │ │ │ ├── stitches-utils/ │ │ │ │ ├── background.ts │ │ │ │ ├── border.ts │ │ │ │ ├── display.ts │ │ │ │ ├── index.ts │ │ │ │ ├── margin.ts │ │ │ │ ├── padding.ts │ │ │ │ ├── position.ts │ │ │ │ ├── pseudo-selector.ts │ │ │ │ ├── radii.ts │ │ │ │ ├── shadow.ts │ │ │ │ ├── size.ts │ │ │ │ └── typography.ts │ │ │ ├── stitches.config.ts │ │ │ ├── system.ts │ │ │ ├── tokens/ │ │ │ │ ├── colors.ts │ │ │ │ ├── index.ts │ │ │ │ ├── radii.ts │ │ │ │ ├── shadows.ts │ │ │ │ ├── sizes.ts │ │ │ │ ├── space.ts │ │ │ │ ├── typography.ts │ │ │ │ └── z-indices.ts │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ └── utils/ │ │ ├── assertion.ts │ │ ├── css.ts │ │ ├── dom.ts │ │ ├── function.ts │ │ ├── index.ts │ │ ├── number.ts │ │ ├── object.ts │ │ ├── solid.ts │ │ ├── tabbable.ts │ │ └── types.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ └── vite.config.ts ├── pnpm-workspace.yaml ├── tsconfig.eslint.json ├── tsconfig.json ├── turbo.json └── vercel.json
SYMBOL INDEX (860 symbols across 299 files)
FILE: apps/docs/src/App.tsx
function AppLayout (line 91) | function AppLayout() {
function App (line 130) | function App() {
FILE: apps/docs/src/components/AppNavLink.tsx
type AppNavLinkProps (line 33) | type AppNavLinkProps = ComponentProps<typeof StyledNavLink> & {
function AppNavLink (line 37) | function AppNavLink(props: AppNavLinkProps) {
FILE: apps/docs/src/components/CodeSnippet.tsx
type CodeSnippetProps (line 4) | interface CodeSnippetProps extends HTMLHopeProps<"div"> {
function CodeSnippet (line 9) | function CodeSnippet(props: CodeSnippetProps) {
FILE: apps/docs/src/components/ColorScale.tsx
type ColorScaleItem (line 14) | interface ColorScaleItem {
type ColorScaleProps (line 19) | type ColorScaleProps = GridProps & {
function ColorScale (line 23) | function ColorScale(props: ColorScaleProps) {
FILE: apps/docs/src/components/ContextualNav.tsx
type ContextualNavLink (line 5) | interface ContextualNavLink {
type ContextualNavProps (line 11) | type ContextualNavProps = HTMLHopeProps<"div", { links?: ContextualNavLi...
function ContextualNav (line 13) | function ContextualNav(props: ContextualNavProps) {
FILE: apps/docs/src/components/Footer.tsx
function Footer (line 6) | function Footer() {
FILE: apps/docs/src/components/Header.tsx
function Header (line 28) | function Header() {
FILE: apps/docs/src/components/MainNavContent.tsx
function MainNavContent (line 8) | function MainNavContent() {
FILE: apps/docs/src/components/MainNavSubtitle.tsx
function MainNavSubtitle (line 3) | function MainNavSubtitle<C extends ElementType = "p">(props: TextProps<C...
FILE: apps/docs/src/components/MainNavTitle.tsx
function MainNavTitle (line 3) | function MainNavTitle<C extends ElementType = "p">(props: TextProps<C>) {
FILE: apps/docs/src/components/MainNavigation.tsx
function MainNavigation (line 5) | function MainNavigation() {
FILE: apps/docs/src/components/PageLayout.tsx
type PageLayoutProps (line 11) | type PageLayoutProps = HTMLHopeProps<
function PageLayout (line 20) | function PageLayout(props: PageLayoutProps) {
FILE: apps/docs/src/components/PageTitle.tsx
function PageTitle (line 3) | function PageTitle(props: HTMLHopeProps<"h1">) {
FILE: apps/docs/src/components/Preview.tsx
function Preview (line 6) | function Preview(props: CodeSnippetProps) {
FILE: apps/docs/src/components/PropsTable.tsx
type PropsTableItem (line 4) | interface PropsTableItem {
type PropsTableProps (line 12) | type PropsTableProps = TableProps<"table"> & { items: PropsTableItem[] };
function PropsTable (line 14) | function PropsTable(props: PropsTableProps) {
FILE: apps/docs/src/components/SectionSubtitle.tsx
function SectionSubtitle (line 3) | function SectionSubtitle(props: HTMLHopeProps<"h2">) {
FILE: apps/docs/src/components/SectionTitle.tsx
function SectionTitle (line 3) | function SectionTitle(props: HTMLHopeProps<"h2">) {
FILE: apps/docs/src/components/StylePropsTable.tsx
type StylePropsTableItem (line 4) | interface StylePropsTableItem {
type StylePropsTableProps (line 10) | type StylePropsTableProps = TableProps<"table"> & { items: StylePropsTab...
function StylePropsTable (line 12) | function StylePropsTable(props: StylePropsTableProps) {
FILE: apps/docs/src/pages/component-docs/data-display/accordion/index.tsx
function AccordionDoc (line 35) | function AccordionDoc() {
FILE: apps/docs/src/pages/component-docs/data-display/avatar/index.tsx
function AvatarDoc (line 30) | function AvatarDoc() {
FILE: apps/docs/src/pages/component-docs/data-display/badge/index.tsx
function BadgeDoc (line 17) | function BadgeDoc() {
FILE: apps/docs/src/pages/component-docs/data-display/icon/index.tsx
function CircleIcon (line 17) | function CircleIcon(props: IconProps) {
function IconDoc (line 25) | function IconDoc() {
FILE: apps/docs/src/pages/component-docs/data-display/image/index.tsx
function ImageDoc (line 17) | function ImageDoc() {
FILE: apps/docs/src/pages/component-docs/data-display/kbd/index.tsx
function KbdDoc (line 15) | function KbdDoc() {
FILE: apps/docs/src/pages/component-docs/data-display/list/index.tsx
function ListDoc (line 20) | function ListDoc() {
FILE: apps/docs/src/pages/component-docs/data-display/table/index.tsx
function TableDoc (line 17) | function TableDoc() {
FILE: apps/docs/src/pages/component-docs/data-display/tag/index.tsx
function TagDoc (line 30) | function TagDoc() {
FILE: apps/docs/src/pages/component-docs/data-entry/checkbox/index.tsx
function CheckboxDoc (line 65) | function CheckboxDoc() {
FILE: apps/docs/src/pages/component-docs/data-entry/form-control/felte-example.tsx
function FelteExample (line 31) | function FelteExample() {
FILE: apps/docs/src/pages/component-docs/data-entry/form-control/index.tsx
function FormControlDoc (line 35) | function FormControlDoc() {
FILE: apps/docs/src/pages/component-docs/data-entry/input/index.tsx
function InputDoc (line 28) | function InputDoc() {
FILE: apps/docs/src/pages/component-docs/data-entry/radio/index.tsx
function RadioDoc (line 17) | function RadioDoc() {
FILE: apps/docs/src/pages/component-docs/data-entry/select/index.tsx
function SelectDoc (line 58) | function SelectDoc() {
FILE: apps/docs/src/pages/component-docs/data-entry/switch/index.tsx
function SwitchDoc (line 79) | function SwitchDoc() {
FILE: apps/docs/src/pages/component-docs/data-entry/textarea/index.tsx
function TextareaDoc (line 17) | function TextareaDoc() {
FILE: apps/docs/src/pages/component-docs/feedback/alert/index.tsx
function AlertDoc (line 28) | function AlertDoc() {
FILE: apps/docs/src/pages/component-docs/feedback/circular-progress/index.tsx
function CircularProgressDoc (line 24) | function CircularProgressDoc() {
FILE: apps/docs/src/pages/component-docs/feedback/notification/index.tsx
function SpinnerDoc (line 27) | function SpinnerDoc() {
FILE: apps/docs/src/pages/component-docs/feedback/progress/index.tsx
function ProgressDoc (line 25) | function ProgressDoc() {
FILE: apps/docs/src/pages/component-docs/feedback/skeleton/index.tsx
function SkeletonDoc (line 26) | function SkeletonDoc() {
FILE: apps/docs/src/pages/component-docs/feedback/spinner/index.tsx
function SpinnerDoc (line 17) | function SpinnerDoc() {
FILE: apps/docs/src/pages/component-docs/general/button/index.tsx
function ButtonDoc (line 34) | function ButtonDoc() {
FILE: apps/docs/src/pages/component-docs/general/icon-button/index.tsx
function IconButtonDoc (line 19) | function IconButtonDoc() {
FILE: apps/docs/src/pages/component-docs/layout/aspect-ratio/index.tsx
function AspectRatioDoc (line 17) | function AspectRatioDoc() {
FILE: apps/docs/src/pages/component-docs/layout/box/index.tsx
function BoxDoc (line 16) | function BoxDoc() {
FILE: apps/docs/src/pages/component-docs/layout/center/index.tsx
function CenterDoc (line 18) | function CenterDoc() {
FILE: apps/docs/src/pages/component-docs/layout/container/index.tsx
function ContainerDoc (line 17) | function ContainerDoc() {
FILE: apps/docs/src/pages/component-docs/layout/divider/index.tsx
function DividerDoc (line 17) | function DividerDoc() {
FILE: apps/docs/src/pages/component-docs/layout/flex/index.tsx
function FlexDoc (line 30) | function FlexDoc() {
FILE: apps/docs/src/pages/component-docs/layout/grid/index.tsx
function GridDoc (line 18) | function GridDoc() {
FILE: apps/docs/src/pages/component-docs/layout/simple-grid/index.tsx
function SimpleGridDoc (line 17) | function SimpleGridDoc() {
FILE: apps/docs/src/pages/component-docs/layout/stack/index.tsx
function StackDoc (line 17) | function StackDoc() {
FILE: apps/docs/src/pages/component-docs/navigation/anchor/index.tsx
function AnchorDoc (line 18) | function AnchorDoc() {
FILE: apps/docs/src/pages/component-docs/navigation/breadcrumb/index.tsx
function BreadcrumbDoc (line 28) | function BreadcrumbDoc() {
FILE: apps/docs/src/pages/component-docs/navigation/tabs/index.tsx
function TabsDoc (line 31) | function TabsDoc() {
FILE: apps/docs/src/pages/component-docs/others/close-button/index.tsx
function CloseButtonDoc (line 17) | function CloseButtonDoc() {
FILE: apps/docs/src/pages/component-docs/overlay/drawer/index.tsx
function DrawerDoc (line 43) | function DrawerDoc() {
FILE: apps/docs/src/pages/component-docs/overlay/menu/index.tsx
function MenuDoc (line 41) | function MenuDoc() {
FILE: apps/docs/src/pages/component-docs/overlay/modal/index.tsx
function ModalDoc (line 42) | function ModalDoc() {
FILE: apps/docs/src/pages/component-docs/overlay/popover/index.tsx
function PopoverDoc (line 44) | function PopoverDoc() {
FILE: apps/docs/src/pages/component-docs/overlay/tooltip/index.tsx
function TooltipDoc (line 18) | function TooltipDoc() {
FILE: apps/docs/src/pages/component-docs/typography/heading/index.tsx
function HeadingDoc (line 18) | function HeadingDoc() {
FILE: apps/docs/src/pages/component-docs/typography/text/index.tsx
function TextDoc (line 17) | function TextDoc() {
FILE: apps/docs/src/pages/features/create-styles/index.tsx
function CreateStyles (line 14) | function CreateStyles() {
FILE: apps/docs/src/pages/features/css-prop/index.tsx
function CSSProp (line 16) | function CSSProp() {
FILE: apps/docs/src/pages/features/global-styles/index.tsx
function GlobalStyles (line 14) | function GlobalStyles() {
FILE: apps/docs/src/pages/features/hope-factory/index.tsx
function HopeFactory (line 17) | function HopeFactory() {
FILE: apps/docs/src/pages/features/responsive-styles/index.tsx
function ResponsiveStyles (line 38) | function ResponsiveStyles() {
FILE: apps/docs/src/pages/features/style-props/index.tsx
function StyleProps (line 331) | function StyleProps() {
FILE: apps/docs/src/pages/getting-started/changelog/index.tsx
function Changelog (line 7) | function Changelog() {
FILE: apps/docs/src/pages/getting-started/installation/index.tsx
function Installation (line 14) | function Installation() {
FILE: apps/docs/src/pages/landing-page.tsx
function HeroSection (line 30) | function HeroSection(props: VStackProps) {
function FeatureSection (line 92) | function FeatureSection(props: HTMLHopeProps<"div">) {
function LandingPage (line 303) | function LandingPage() {
FILE: apps/docs/src/pages/not-found.tsx
function NotFound (line 6) | function NotFound() {
FILE: apps/docs/src/pages/theming/color-mode/index.tsx
function ColorMode (line 24) | function ColorMode() {
FILE: apps/docs/src/pages/theming/css-variables/index.tsx
function CSSVariables (line 13) | function CSSVariables() {
FILE: apps/docs/src/pages/theming/customize-theme/index.tsx
function CustomizeTheme (line 15) | function CustomizeTheme() {
FILE: apps/docs/src/pages/theming/default-theme/index.tsx
function DefaultTheme (line 16) | function DefaultTheme() {
FILE: packages/solid/dev/index.tsx
function App (line 5) | function App() {
FILE: packages/solid/src/color-mode.ts
type ColorMode (line 6) | type ColorMode = "light" | "dark" | "system";
constant COLOR_MODE_STORAGE_KEY (line 10) | const COLOR_MODE_STORAGE_KEY = "hope-ui-color-mode";
function getColorModeFromLocalStorage (line 20) | function getColorModeFromLocalStorage() {
function saveColorModeToLocalStorage (line 35) | function saveColorModeToLocalStorage(value: ColorMode) {
function getDefaultColorMode (line 54) | function getDefaultColorMode(fallbackValue: ColorMode): ColorMode {
function getColorModeClassName (line 70) | function getColorModeClassName(isDark: boolean) {
function syncBodyColorModeClassName (line 77) | function syncBodyColorModeClassName(isDark: boolean) {
FILE: packages/solid/src/components/accordion/accordion-button.tsx
type AccordionButtonProps (line 12) | type AccordionButtonProps<C extends ElementType = "button"> = HTMLHopePr...
function AccordionButton (line 23) | function AccordionButton<C extends ElementType = "button">(props: Accord...
FILE: packages/solid/src/components/accordion/accordion-icon.tsx
type AccordionIconProps (line 11) | type AccordionIconProps<C extends ElementType = "svg"> = IconProps<C>;
function AccordionIcon (line 19) | function AccordionIcon<C extends ElementType = "svg">(props: AccordionIc...
FILE: packages/solid/src/components/accordion/accordion-item.tsx
type AccordionItemChildrenRenderProp (line 24) | type AccordionItemChildrenRenderProp = (props: {
type AccordionItemOptions (line 29) | interface AccordionItemOptions {
type AccordionItemProps (line 41) | type AccordionItemProps<C extends ElementType = "div"> = HTMLHopeProps<
type AccordionItemState (line 46) | interface AccordionItemState {
function AccordionItem (line 81) | function AccordionItem<C extends ElementType = "div">(props: AccordionIt...
type AccordionItemContextValue (line 170) | interface AccordionItemContextValue {
function useAccordionItemContext (line 196) | function useAccordionItemContext() {
FILE: packages/solid/src/components/accordion/accordion-panel.tsx
type AccordionPanelProps (line 11) | type AccordionPanelProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function AccordionPanel (line 21) | function AccordionPanel<C extends ElementType = "div">(props: AccordionP...
FILE: packages/solid/src/components/accordion/accordion.tsx
type ExpandedIndex (line 19) | type ExpandedIndex = number | number[];
type AccordionOptions (line 21) | interface AccordionOptions {
type AccordionProps (line 45) | type AccordionProps<C extends ElementType = "div"> = HTMLHopeProps<C, Ac...
type AccordionState (line 47) | interface AccordionState {
function Accordion (line 83) | function Accordion<C extends ElementType = "div">(props: AccordionProps<...
type AccordionContextValue (line 218) | interface AccordionContextValue {
function useAccordionContext (line 265) | function useAccordionContext() {
type AccordionStyleConfig (line 281) | interface AccordionStyleConfig {
FILE: packages/solid/src/components/alert/__tests__/alert-icon.test.tsx
function renderWithAlertContext (line 9) | function renderWithAlertContext(callback: () => JSX.Element) {
FILE: packages/solid/src/components/alert/alert-description.tsx
type AlertDescriptionProps (line 9) | type AlertDescriptionProps<C extends ElementType = "div"> = HTMLHopeProp...
function AlertDescription (line 13) | function AlertDescription<C extends ElementType = "div">(props: AlertDes...
FILE: packages/solid/src/components/alert/alert-icon.tsx
type AlertIconProps (line 14) | type AlertIconProps<C extends ElementType = "svg"> = IconProps<C>;
function AlertIcon (line 18) | function AlertIcon<C extends ElementType = "svg">(props: AlertIconProps<...
FILE: packages/solid/src/components/alert/alert-title.tsx
type AlertTitleProps (line 9) | type AlertTitleProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function AlertTitle (line 13) | function AlertTitle<C extends ElementType = "div">(props: AlertTitleProp...
FILE: packages/solid/src/components/alert/alert.styles.ts
type AlertVariants (line 270) | type AlertVariants = VariantProps<typeof alertStyles>;
FILE: packages/solid/src/components/alert/alert.tsx
type ThemeableAlertOptions (line 10) | type ThemeableAlertOptions = AlertVariants;
type AlertProps (line 12) | type AlertProps<C extends ElementType = "div"> = HTMLHopeProps<C, AlertV...
function Alert (line 20) | function Alert<C extends ElementType = "div">(props: AlertProps<C>) {
type AlertContextValue (line 61) | type AlertContextValue = {
function useAlertContext (line 67) | function useAlertContext() {
type AlertStyleConfig (line 81) | interface AlertStyleConfig {
FILE: packages/solid/src/components/anchor/anchor.tsx
type AnchorStyleConfig (line 9) | type AnchorStyleConfig = SinglePartComponentStyleConfig<void>;
type AnchorOptions (line 11) | interface AnchorOptions {
type AnchorProps (line 15) | type AnchorProps<C extends ElementType = "a"> = HTMLHopeProps<C, AnchorO...
function Anchor (line 23) | function Anchor<C extends ElementType = "a">(props: AnchorProps<C>) {
FILE: packages/solid/src/components/aspect-ratio/aspect-ratio.tsx
type AspectRatioOptions (line 10) | interface AspectRatioOptions {
type AspectRatioProps (line 19) | type AspectRatioProps<C extends ElementType = "div"> = HTMLHopeProps<C, ...
function AspectRatio (line 27) | function AspectRatio<C extends ElementType = "div">(props: AspectRatioPr...
FILE: packages/solid/src/components/async-button/async-button.tsx
type AsyncButtonOptions (line 7) | interface AsyncButtonOptions extends ButtonOptions {
type AsyncButtonProps (line 11) | type AsyncButtonProps<C extends ElementType = "button"> = HTMLHopeProps<
function AsyncButton (line 20) | function AsyncButton<C extends ElementType = "button">(props: AsyncButto...
FILE: packages/solid/src/components/avatar/avatar-badge.tsx
type AvatarBadgeOptions (line 9) | type AvatarBadgeOptions = AvatarBadgeVariants;
type AvatarBadgeProps (line 11) | type AvatarBadgeProps<C extends ElementType = "div"> = HTMLHopeProps<C, ...
function AvatarBadge (line 19) | function AvatarBadge<C extends ElementType = "div">(props: AvatarBadgePr...
FILE: packages/solid/src/components/avatar/avatar-excess.tsx
type AvatarExcessProps (line 10) | type AvatarExcessProps<C extends ElementType = "span"> = HTMLHopeProps<
function AvatarExcess (line 20) | function AvatarExcess<C extends ElementType = "span">(props: AvatarExces...
FILE: packages/solid/src/components/avatar/avatar-group.tsx
type ThemeableAvatarGroupOptions (line 14) | interface ThemeableAvatarGroupOptions {
type AvatarGroupOptions (line 41) | type AvatarGroupOptions = ThemeableAvatarGroupOptions;
type AvatarGroupProps (line 43) | type AvatarGroupProps<C extends ElementType = "div"> = HTMLHopeProps<C, ...
type AvatarGroupState (line 45) | type AvatarGroupState = Required<Pick<AvatarGroupOptions, "spacing" | "s...
type AvatarGroupContextValue (line 48) | interface AvatarGroupContextValue {
function AvatarGroup (line 59) | function AvatarGroup<C extends ElementType = "div">(props: AvatarGroupPr...
function useAvatarGroupContext (line 104) | function useAvatarGroupContext() {
FILE: packages/solid/src/components/avatar/avatar-image.tsx
type AvatarImageProps (line 12) | type AvatarImageProps = ImageProps &
function AvatarImage (line 17) | function AvatarImage(props: AvatarImageProps) {
FILE: packages/solid/src/components/avatar/avatar-initials.tsx
type AvatarInitialsProps (line 9) | type AvatarInitialsProps = HTMLHopeProps<"div", Pick<AvatarOptions, "get...
function AvatarInitials (line 16) | function AvatarInitials(props: AvatarInitialsProps) {
FILE: packages/solid/src/components/avatar/avatar.styles.ts
function createSizeVariant (line 10) | function createSizeVariant(size: string): SystemStyleObject {
type AvatarVariants (line 104) | type AvatarVariants = VariantProps<typeof avatarStyles>;
type AvatarExcessVariants (line 112) | type AvatarExcessVariants = VariantProps<typeof avatarExcessStyles>;
type AvatarBadgeVariants (line 167) | type AvatarBadgeVariants = VariantProps<typeof avatarBadgeStyles>;
FILE: packages/solid/src/components/avatar/avatar.tsx
type AvatarIconProps (line 14) | interface AvatarIconProps {
type ThemeableAvatarOptions (line 26) | interface ThemeableAvatarOptions extends AvatarVariants {
type AvatarOptions (line 54) | interface AvatarOptions extends ThemeableAvatarOptions {
type AvatarStyleConfig (line 83) | interface AvatarStyleConfig {
type AvatarProps (line 98) | type AvatarProps<C extends ElementType = "span"> = HTMLHopeProps<C, Avat...
function Avatar (line 106) | function Avatar<C extends ElementType = "span">(props: AvatarProps<C>) {
FILE: packages/solid/src/components/avatar/avatar.utils.tsx
function initials (line 4) | function initials(name: string) {
function DefaultAvatarIcon (line 15) | function DefaultAvatarIcon(props: IconProps) {
FILE: packages/solid/src/components/badge/badge.styles.ts
type BadgeVariants (line 233) | type BadgeVariants = VariantProps<typeof badgeStyles>;
FILE: packages/solid/src/components/badge/badge.tsx
type ThemeableBadgeOptions (line 9) | type ThemeableBadgeOptions = Pick<BadgeVariants, "variant" | "colorSchem...
type BadgeStyleConfig (line 11) | type BadgeStyleConfig = SinglePartComponentStyleConfig<ThemeableBadgeOpt...
type BadgeProps (line 13) | type BadgeProps<C extends ElementType = "span"> = HTMLHopeProps<C, Badge...
function Badge (line 20) | function Badge<C extends ElementType = "span">(props: BadgeProps<C>) {
FILE: packages/solid/src/components/breadcrumb/breadcrumb-item.tsx
type BreadcrumbItemProps (line 10) | type BreadcrumbItemProps<C extends ElementType = "li"> = HTMLHopeProps<C>;
function BreadcrumbItem (line 18) | function BreadcrumbItem<C extends ElementType = "li">(props: BreadcrumbI...
FILE: packages/solid/src/components/breadcrumb/breadcrumb-link.tsx
type BreadcrumbLinkOptions (line 9) | interface BreadcrumbLinkOptions {
type BreadcrumbLinkProps (line 13) | type BreadcrumbLinkProps<C extends ElementType = "a"> = HTMLHopeProps<
function BreadcrumbLink (line 26) | function BreadcrumbLink<C extends ElementType = "a">(props: BreadcrumbLi...
FILE: packages/solid/src/components/breadcrumb/breadcrumb-separator.tsx
type BreadcrumbSeparatorProps (line 10) | type BreadcrumbSeparatorProps<C extends ElementType = "span"> = HTMLHope...
function BreadcrumbSeparator (line 17) | function BreadcrumbSeparator<C extends ElementType = "span">(
FILE: packages/solid/src/components/breadcrumb/breadcrumb.tsx
type BreadcrumbState (line 12) | interface BreadcrumbState {
type BreadcrumbContextValue (line 24) | interface BreadcrumbContextValue {
type BreadcrumbOptions (line 30) | type BreadcrumbOptions = Partial<BreadcrumbState>;
type ThemeableBreadcrumbOptions (line 32) | type ThemeableBreadcrumbOptions = BreadcrumbOptions;
type BreadcrumbProps (line 34) | type BreadcrumbProps<C extends ElementType = "nav"> = HTMLHopeProps<C, B...
type BreadcrumbStyleConfig (line 36) | interface BreadcrumbStyleConfig {
function Breadcrumb (line 55) | function Breadcrumb<C extends ElementType = "nav">(props: BreadcrumbProp...
function useBreadcrumbContext (line 95) | function useBreadcrumbContext() {
FILE: packages/solid/src/components/button/button-group.tsx
type ButtonGroupOptions (line 12) | interface ButtonGroupOptions extends Pick<ButtonOptions, "variant" | "co...
type ThemeableButtonGroupOptions (line 30) | type ThemeableButtonGroupOptions = Omit<ButtonGroupOptions, "disabled">;
type ButtonGroupProps (line 32) | type ButtonGroupProps<C extends ElementType = "div"> = HTMLHopeProps<C, ...
type ButtonGroupState (line 36) | type ButtonGroupState = Pick<ButtonGroupProps, "variant" | "colorScheme"...
type ButtonGroupContextValue (line 38) | interface ButtonGroupContextValue {
function ButtonGroup (line 44) | function ButtonGroup<C extends ElementType = "div">(props: ButtonGroupPr...
function useButtonGroupContext (line 107) | function useButtonGroupContext() {
FILE: packages/solid/src/components/button/button-icon.tsx
type ButtonIconProps (line 8) | type ButtonIconProps<C extends ElementType = "span"> = HTMLHopeProps<C>;
function ButtonIcon (line 12) | function ButtonIcon<C extends ElementType = "span">(props: ButtonIconPro...
FILE: packages/solid/src/components/button/button-loader.tsx
type ButtonLoaderProps (line 11) | type ButtonLoaderProps<C extends ElementType = "div"> = HTMLHopeProps<
function ButtonLoader (line 22) | function ButtonLoader<C extends ElementType = "div">(props: ButtonLoader...
FILE: packages/solid/src/components/button/button.stories.tsx
function IconCart (line 7) | function IconCart(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
FILE: packages/solid/src/components/button/button.styles.ts
type SizeVariantConfig (line 55) | interface SizeVariantConfig {
function createSizeVariant (line 62) | function createSizeVariant(config: SizeVariantConfig): SystemStyleObject {
type CompactSizeVariantConfig (line 76) | interface CompactSizeVariantConfig {
function createCompactSizeCompoundVariant (line 81) | function createCompactSizeCompoundVariant(config: CompactSizeVariantConf...
type SolidCompoundVariantConfig (line 98) | interface SolidCompoundVariantConfig {
function createSolidCompoundVariant (line 104) | function createSolidCompoundVariant(config: SolidCompoundVariantConfig):...
type SubtleCompoundVariantConfig (line 119) | interface SubtleCompoundVariantConfig {
function createSubtleCompoundVariant (line 126) | function createSubtleCompoundVariant(config: SubtleCompoundVariantConfig...
type OutlineCompoundVariantConfig (line 145) | interface OutlineCompoundVariantConfig {
function createOutlineCompoundVariant (line 153) | function createOutlineCompoundVariant(config: OutlineCompoundVariantConf...
type GhostCompoundVariantConfig (line 173) | interface GhostCompoundVariantConfig {
function createGhostCompoundVariant (line 179) | function createGhostCompoundVariant(config: GhostCompoundVariantConfig):...
type ButtonVariants (line 735) | type ButtonVariants = VariantProps<typeof buttonStyles>;
FILE: packages/solid/src/components/button/button.tsx
type ButtonOptions (line 14) | interface ButtonOptions extends ButtonVariants {
type ThemeableButtonOptions (line 52) | type ThemeableButtonOptions = Pick<
type ButtonStyleConfig (line 57) | interface ButtonStyleConfig {
type ButtonProps (line 68) | type ButtonProps<C extends ElementType = "button"> = HTMLHopeProps<C, Bu...
function Button (line 76) | function Button<C extends ElementType = "button">(props: ButtonProps<C>) {
type ButtonContentProps (line 180) | type ButtonContentProps = Pick<ButtonProps, "iconSpacing" | "leftIcon" |...
function ButtonContent (line 182) | function ButtonContent(props: ButtonContentProps) {
FILE: packages/solid/src/components/center/center.tsx
type CenterProps (line 8) | type CenterProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function Center (line 15) | function Center<C extends ElementType = "div">(props: CenterProps<C>) {
FILE: packages/solid/src/components/checkbox/checkbox-group.tsx
type CheckboxGroupValue (line 10) | type CheckboxGroupValue = (string | number)[];
type CheckboxGroupOptions (line 12) | interface CheckboxGroupOptions extends ThemeableCheckboxOptions {
type CheckboxGroupProps (line 63) | type CheckboxGroupProps<C extends ElementType = "div"> = HTMLHopeProps<
type CheckboxGroupState (line 68) | interface CheckboxGroupState extends Omit<CheckboxGroupProps, "name" | "...
function CheckboxGroup (line 89) | function CheckboxGroup<C extends ElementType = "div">(props: CheckboxGro...
type CheckboxGroupContextValue (line 175) | interface CheckboxGroupContextValue {
function useCheckboxGroupContext (line 186) | function useCheckboxGroupContext() {
FILE: packages/solid/src/components/checkbox/checkbox-primitive-indicator.tsx
type CheckboxPrimitiveIndicatorProps (line 7) | type CheckboxPrimitiveIndicatorProps<C extends ElementType = "span"> = H...
function CheckboxPrimitiveIndicator (line 13) | function CheckboxPrimitiveIndicator<C extends ElementType = "span">(
FILE: packages/solid/src/components/checkbox/checkbox-primitive.tsx
type CheckboxPrimitiveChildrenRenderProp (line 22) | type CheckboxPrimitiveChildrenRenderProp = (props: {
type CheckboxPrimitiveOptions (line 26) | interface CheckboxPrimitiveOptions {
type CheckboxPrimitiveProps (line 113) | type CheckboxPrimitiveProps<C extends ElementType = "label"> = HTMLHopeP...
type CheckboxPrimitiveState (line 118) | interface CheckboxPrimitiveState {
function CheckboxPrimitive (line 208) | function CheckboxPrimitive<C extends ElementType = "label">(
type CheckboxPrimitiveContextValue (line 409) | interface CheckboxPrimitiveContextValue {
function useCheckboxPrimitiveContext (line 415) | function useCheckboxPrimitiveContext() {
FILE: packages/solid/src/components/checkbox/checkbox.styles.ts
type ColorVariantConfig (line 10) | interface ColorVariantConfig {
function createColorVariant (line 16) | function createColorVariant(config: ColorVariantConfig): SystemStyleObje...
type CheckboxWrapperVariants (line 190) | type CheckboxWrapperVariants = VariantProps<typeof checkboxWrapperStyles>;
type CheckboxControlVariants (line 215) | type CheckboxControlVariants = VariantProps<typeof checkboxControlStyles>;
FILE: packages/solid/src/components/checkbox/checkbox.tsx
type ThemeableCheckboxOptions (line 20) | type ThemeableCheckboxOptions = CheckboxWrapperVariants & CheckboxContro...
type CheckboxOptions (line 22) | interface CheckboxOptions extends ThemeableCheckboxOptions {
type CheckboxProps (line 39) | type CheckboxProps<C extends ElementType = "label"> = OverrideProps<
function Checkbox (line 53) | function Checkbox<C extends ElementType = "label">(props: CheckboxProps<...
type CheckboxStyleConfig (line 169) | interface CheckboxStyleConfig {
FILE: packages/solid/src/components/circular-progress/circular-progress-indicator.tsx
type ThemeableCircularProgressIndicatorOptions (line 14) | interface ThemeableCircularProgressIndicatorOptions {
type CircularProgressIndicatorOptions (line 26) | type CircularProgressIndicatorOptions = ThemeableCircularProgressIndicat...
type CircularProgressIndicatorProps (line 28) | type CircularProgressIndicatorProps = HTMLHopeProps<"svg", CircularProgr...
function CircularProgressIndicator (line 37) | function CircularProgressIndicator(props: CircularProgressIndicatorProps) {
FILE: packages/solid/src/components/circular-progress/circular-progress-label.tsx
type CircularProgressLabelProps (line 10) | type CircularProgressLabelProps<C extends ElementType = "div"> = HTMLHop...
function CircularProgressLabel (line 17) | function CircularProgressLabel<C extends ElementType = "div">(
FILE: packages/solid/src/components/circular-progress/circular-progress.tsx
type CircularProgressState (line 19) | interface CircularProgressState extends ProgressState {
type CircularProgressOptions (line 37) | interface CircularProgressOptions
type ThemeableCircularProgressOptions (line 50) | type ThemeableCircularProgressOptions = Pick<
type CircularProgressProps (line 55) | type CircularProgressProps<C extends ElementType = "div"> = HTMLHopeProps<
type CircularProgressStyleConfig (line 60) | interface CircularProgressStyleConfig {
type CircularProgressContextValue (line 73) | interface CircularProgressContextValue {
function CircularProgress (line 91) | function CircularProgress<C extends ElementType = "div">(props: Circular...
function useCircularProgressContext (line 199) | function useCircularProgressContext() {
FILE: packages/solid/src/components/click-outside/click-outside.tsx
type ClickOutsideProps (line 5) | type ClickOutsideProps = PropsWithChildren<{
function ClickOutside (line 16) | function ClickOutside(props: ClickOutsideProps) {
FILE: packages/solid/src/components/close-button/close-button.styles.ts
type CloseButtonVariants (line 63) | type CloseButtonVariants = VariantProps<typeof closeButtonStyles>;
FILE: packages/solid/src/components/close-button/close-button.tsx
type ThemeableCloseButtonOptions (line 10) | interface ThemeableCloseButtonOptions extends CloseButtonVariants {
type CloseButtonProps (line 22) | type CloseButtonProps<C extends ElementType = "button"> = HTMLHopeProps<
type CloseButtonStyleConfig (line 27) | type CloseButtonStyleConfig = SinglePartComponentStyleConfig<ThemeableCl...
function CloseButton (line 37) | function CloseButton<C extends ElementType = "button">(props: CloseButto...
FILE: packages/solid/src/components/collapse/collapse.tsx
type CollapseOptions (line 10) | interface CollapseOptions {
type CollapseProps (line 47) | type CollapseProps<C extends ElementType = "div"> = HTMLHopeProps<C, Col...
function Collapse (line 51) | function Collapse<C extends ElementType = "div">(props: CollapseProps<C>) {
FILE: packages/solid/src/components/container/container.styles.ts
type ContainerVariants (line 37) | type ContainerVariants = VariantProps<typeof containerStyles>;
FILE: packages/solid/src/components/container/container.tsx
type ContainerProps (line 8) | type ContainerProps<C extends ElementType = "div"> = HTMLHopeProps<C, Co...
function Container (line 18) | function Container<C extends ElementType = "div">(props: ContainerProps<...
FILE: packages/solid/src/components/divider/divider.styles.ts
type DividerVariants (line 32) | type DividerVariants = VariantProps<typeof dividerStyles>;
FILE: packages/solid/src/components/divider/divider.tsx
type DividerOptions (line 10) | interface DividerOptions extends DividerVariants {
type DividerProps (line 21) | type DividerProps<C extends ElementType = "div"> = HTMLHopeProps<C, Divi...
function Divider (line 25) | function Divider<C extends ElementType = "div">(props: DividerProps<C>) {
FILE: packages/solid/src/components/drawer/drawer-content.tsx
type DrawerContentProps (line 14) | type DrawerContentProps<C extends ElementType = "section"> = HTMLHopePro...
function DrawerContent (line 22) | function DrawerContent<C extends ElementType = "section">(props: DrawerC...
FILE: packages/solid/src/components/drawer/drawer-overlay.tsx
type DrawerOverlayProps (line 13) | type DrawerOverlayProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function DrawerOverlay (line 20) | function DrawerOverlay<C extends ElementType = "div">(props: DrawerOverl...
FILE: packages/solid/src/components/drawer/drawer.styles.ts
type DrawerDialogVariants (line 166) | type DrawerDialogVariants = VariantProps<typeof drawerDialogStyles>;
FILE: packages/solid/src/components/drawer/drawer.tsx
type DrawerPlacement (line 16) | type DrawerPlacement = "top" | "right" | "bottom" | "left";
type DrawerOptions (line 18) | interface DrawerOptions extends DrawerDialogVariants {
type DrawerProps (line 30) | type DrawerProps = OverrideProps<
type ThemeableDrawerOptions (line 35) | type ThemeableDrawerOptions = Pick<
type DrawerStyleConfig (line 48) | interface DrawerStyleConfig {
type DrawerContextValue (line 63) | type DrawerContextValue = Required<DrawerOptions>;
function Drawer (line 67) | function Drawer(props: DrawerProps) {
function useDrawerContext (line 111) | function useDrawerContext() {
function DrawerCloseButton (line 125) | function DrawerCloseButton(props: CloseButtonProps) {
function DrawerBody (line 139) | function DrawerBody<C extends ElementType = "div">(props: ModalBodyProps...
function DrawerHeader (line 144) | function DrawerHeader<C extends ElementType = "header">(props: ModalHead...
function DrawerFooter (line 149) | function DrawerFooter<C extends ElementType = "footer">(props: ModalFoot...
FILE: packages/solid/src/components/factory.tsx
function factory (line 62) | function factory() {
FILE: packages/solid/src/components/flex/flex.tsx
type FlexOptions (line 9) | type FlexOptions = ResponsiveProps<{
type FlexProps (line 14) | type FlexProps<C extends ElementType = "div"> = HTMLHopeProps<C, FlexOpt...
function Flex (line 22) | function Flex<C extends ElementType = "div">(props: FlexProps<C>) {
FILE: packages/solid/src/components/form-control/form-control.tsx
type FormControlOptions (line 12) | interface FormControlOptions {
type FormControlState (line 49) | interface FormControlState extends FormControlOptions {
type FormControlContextValue (line 107) | interface FormControlContextValue {
type FormControlProps (line 133) | type FormControlProps<C extends ElementType = "div"> = HTMLHopeProps<C, ...
type FormControlStyleConfig (line 135) | interface FormControlStyleConfig {
function FormControl (line 149) | function FormControl<C extends ElementType = "div">(props: FormControlPr...
function useFormControlContext (line 232) | function useFormControlContext() {
FILE: packages/solid/src/components/form-control/form-error-message.tsx
type FormErrorMessageProps (line 10) | type FormErrorMessageProps<C extends ElementType = "div"> = HTMLHopeProp...
function FormErrorMessage (line 14) | function FormErrorMessage<C extends ElementType = "div">(props: FormErro...
FILE: packages/solid/src/components/form-control/form-helper-text.tsx
type FormHelperTextProps (line 10) | type FormHelperTextProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function FormHelperText (line 14) | function FormHelperText<C extends ElementType = "div">(props: FormHelper...
FILE: packages/solid/src/components/form-control/form-label.tsx
type FormLabelOptions (line 10) | interface FormLabelOptions {
type FormLabelProps (line 14) | type FormLabelProps<C extends ElementType = "label"> = HTMLHopeProps<C, ...
function FormLabel (line 18) | function FormLabel<C extends ElementType = "label">(props: FormLabelProp...
FILE: packages/solid/src/components/form-control/use-form-control.ts
type UseFormControlProps (line 7) | interface UseFormControlProps<T extends HTMLElement> extends FormControl...
type UseFormControlReturn (line 13) | interface UseFormControlReturn<T extends HTMLElement> {
function useFormControl (line 37) | function useFormControl<T extends HTMLElement>(
FILE: packages/solid/src/components/grid/grid-item.tsx
type GridSpanValue (line 10) | type GridSpanValue = string | number | "auto" | "full";
type GridItemOptions (line 12) | type GridItemOptions = ResponsiveProps<{
type GridItemProps (line 22) | type GridItemProps<C extends ElementType = "div"> = HTMLHopeProps<C, Gri...
function spanFn (line 27) | function spanFn(span?: ResponsiveValue<GridSpanValue>) {
function GridItem (line 49) | function GridItem<C extends ElementType = "div">(props: GridItemProps<C>) {
FILE: packages/solid/src/components/grid/grid.tsx
type GridOptions (line 9) | type GridOptions = ResponsiveProps<{
type GridProps (line 18) | type GridProps<C extends ElementType = "div"> = HTMLHopeProps<C, GridOpt...
function Grid (line 26) | function Grid<C extends ElementType = "div">(props: GridProps<C>) {
FILE: packages/solid/src/components/grid/simple-grid.tsx
type SimpleGridOptions (line 11) | interface SimpleGridOptions extends GridOptions {
type SimpleGridProps (line 24) | type SimpleGridProps<C extends ElementType = "div"> = HTMLHopeProps<C, S...
function toPx (line 28) | function toPx(n: string | number) {
function widthToColumns (line 32) | function widthToColumns(width: any) {
function countToColumns (line 38) | function countToColumns(count: any) {
function SimpleGrid (line 45) | function SimpleGrid<C extends ElementType = "div">(props: SimpleGridProp...
FILE: packages/solid/src/components/heading/heading.styles.ts
type HeadingVariants (line 10) | type HeadingVariants = VariantProps<typeof headingStyles>;
FILE: packages/solid/src/components/heading/heading.tsx
type HeadingLevel (line 9) | type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | "5" ...
type HeadingOptions (line 11) | interface HeadingOptions extends HeadingVariants {
type HeadingProps (line 18) | type HeadingProps<C extends ElementType = "h2"> = HTMLHopeProps<C, Headi...
type HeadingStyleConfig (line 20) | type HeadingStyleConfig = SinglePartComponentStyleConfig<HeadingOptions>;
function Heading (line 28) | function Heading<C extends ElementType = "h2">(props: HeadingProps<C>) {
FILE: packages/solid/src/components/icon-button/icon-button.stories.tsx
function IconCart (line 7) | function IconCart(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
FILE: packages/solid/src/components/icon-button/icon-button.tsx
type IconButtonOptions (line 10) | interface IconButtonOptions
type IconButtonStyleConfig (line 26) | type IconButtonStyleConfig = SinglePartComponentStyleConfig<
type IconButtonProps (line 30) | type IconButtonProps<C extends ElementType = "button"> = HTMLHopeProps<C...
function IconButton (line 36) | function IconButton<C extends ElementType = "button">(props: IconButtonP...
FILE: packages/solid/src/components/icon/create-icon.tsx
type CreateIconOptions (line 7) | interface CreateIconOptions {
function createIcon (line 28) | function createIcon(options: CreateIconOptions) {
FILE: packages/solid/src/components/icon/icon.tsx
type IconProps (line 23) | type IconProps<C extends ElementType = "svg"> = HTMLHopeProps<C>;
function Icon (line 27) | function Icon<C extends ElementType = "svg">(props: IconProps<C>) {
FILE: packages/solid/src/components/image/image.tsx
type ImageOptions (line 10) | interface ImageOptions {
type ImageProps (line 56) | type ImageProps<C extends ElementType = "img"> = OverrideProps<
function Image (line 66) | function Image<C extends ElementType = "img">(props: ImageProps<C>) {
FILE: packages/solid/src/components/image/image.utils.ts
type NativeImageProps (line 6) | type NativeImageProps = PropsOf<"img">;
type CreateImageLoadingStatusProps (line 8) | interface CreateImageLoadingStatusProps {
type Status (line 51) | type Status = "loading" | "failed" | "pending" | "loaded";
type ImageEvent (line 53) | type ImageEvent = Event & {
function createImageLoadingStatus (line 74) | function createImageLoadingStatus(props: CreateImageLoadingStatusProps) {
FILE: packages/solid/src/components/input/input-addon.tsx
type InputAddonProps (line 10) | type InputAddonProps<C extends ElementType = "div"> = HTMLHopeProps<C, I...
function InputAddon (line 12) | function InputAddon<C extends ElementType = "div">(props: InputAddonProp...
type InputLeftAddonProps (line 30) | type InputLeftAddonProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function InputLeftAddon (line 34) | function InputLeftAddon<C extends ElementType = "div">(props: InputLeftA...
type InputRightAddonProps (line 61) | type InputRightAddonProps<C extends ElementType = "div"> = HTMLHopeProps...
function InputRightAddon (line 65) | function InputRightAddon<C extends ElementType = "div">(props: InputRigh...
FILE: packages/solid/src/components/input/input-element.tsx
type InputElementProps (line 10) | type InputElementProps<C extends ElementType = "div"> = HTMLHopeProps<
function InputElement (line 15) | function InputElement<C extends ElementType = "div">(props: InputElement...
type InputLeftElementProps (line 29) | type InputLeftElementProps<C extends ElementType = "div"> = HTMLHopeProp...
function InputLeftElement (line 33) | function InputLeftElement<C extends ElementType = "div">(props: InputLef...
type InputRightElementProps (line 59) | type InputRightElementProps<C extends ElementType = "div"> = HTMLHopePro...
function InputRightElement (line 63) | function InputRightElement<C extends ElementType = "div">(props: InputRi...
FILE: packages/solid/src/components/input/input-group.tsx
type ThemeableInputGroupOptions (line 10) | type ThemeableInputGroupOptions = Pick<InputVariants, "variant" | "size">;
type InputGroupState (line 12) | type InputGroupState = Required<ThemeableInputGroupOptions> & {
type InputGroupContextValue (line 19) | interface InputGroupContextValue {
type InputGroupProps (line 27) | type InputGroupProps<C extends ElementType = "div"> = HTMLHopeProps<
function useInputGroupContext (line 34) | function useInputGroupContext() {
function InputGroup (line 40) | function InputGroup<C extends ElementType = "div">(props: InputGroupProp...
FILE: packages/solid/src/components/input/input.stories.tsx
function MdiPhoneIcon (line 23) | function MdiPhoneIcon() {
function MdiCheckIcon (line 34) | function MdiCheckIcon() {
FILE: packages/solid/src/components/input/input.styles.ts
type InputSizeVariantConfig (line 6) | interface InputSizeVariantConfig {
function createInputSizeVariant (line 12) | function createInputSizeVariant(config: InputSizeVariantConfig): SystemS...
type VariantAndSizeCompoundVariantConfig (line 121) | interface VariantAndSizeCompoundVariantConfig {
function createVariantAndSizeCompoundVariant (line 128) | function createVariantAndSizeCompoundVariant(config: VariantAndSizeCompo...
type InputVariants (line 256) | type InputVariants = VariantProps<typeof inputStyles>;
type InputElementVariants (line 308) | type InputElementVariants = VariantProps<typeof inputElementStyles>;
type InputAddonVariantAndSizeCompoundVariantConfig (line 314) | interface InputAddonVariantAndSizeCompoundVariantConfig {
function createInputAddonVariantAndSizeCompoundVariant (line 320) | function createInputAddonVariantAndSizeCompoundVariant(
type InputAddonVariants (line 487) | type InputAddonVariants = VariantProps<typeof inputAddonStyles>;
FILE: packages/solid/src/components/input/input.tsx
type ThemeableInputOptions (line 12) | type ThemeableInputOptions = Pick<InputVariants, "variant" | "size">;
type InputOptions (line 14) | interface InputOptions extends ThemeableInputOptions {
type InputProps (line 26) | type InputProps = Omit<HTMLHopeProps<"input", InputOptions>, "as">;
type InputStyleConfig (line 28) | interface InputStyleConfig {
function Input (line 43) | function Input(props: InputProps) {
FILE: packages/solid/src/components/kbd/kbd.tsx
type KbdStyleConfig (line 9) | type KbdStyleConfig = SinglePartComponentStyleConfig<void>;
type KbdProps (line 11) | type KbdProps<C extends ElementType = "kbd"> = HTMLHopeProps<C>;
function Kbd (line 18) | function Kbd<C extends ElementType = "kbd">(props: KbdProps<C>) {
FILE: packages/solid/src/components/list/list-icon.tsx
function ListIcon (line 13) | function ListIcon<C extends ElementType = "svg">(props: IconProps<C>) {
FILE: packages/solid/src/components/list/list-item.tsx
type ListItemProps (line 7) | type ListItemProps<C extends ElementType = "li"> = HTMLHopeProps<C>;
function ListItem (line 14) | function ListItem<C extends ElementType = "li">(props: ListItemProps<C>) {
FILE: packages/solid/src/components/list/list.tsx
type ListOptions (line 11) | interface ListOptions {
type ListProps (line 28) | type ListProps<C extends ElementType = "ul"> = HTMLHopeProps<C, ListOpti...
function List (line 37) | function List<C extends ElementType = "ul">(props: ListProps<C>) {
function OrderedList (line 67) | function OrderedList<C extends ElementType = "ol">(props: ListProps<C>) {
function UnorderedList (line 83) | function UnorderedList<C extends ElementType = "ul">(props: ListProps<C>) {
FILE: packages/solid/src/components/menu/menu-content.tsx
type MenuContentProps (line 14) | type MenuContentProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function MenuContent (line 21) | function MenuContent<C extends ElementType = "div">(props: MenuContentPr...
FILE: packages/solid/src/components/menu/menu-group.tsx
type MenuGroupContextValue (line 9) | interface MenuGroupContextValue {
type MenuGroupProps (line 15) | type MenuGroupProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function MenuGroup (line 22) | function MenuGroup<C extends ElementType = "div">(props: MenuGroupProps<...
function useMenuGroupContext (line 52) | function useMenuGroupContext() {
FILE: packages/solid/src/components/menu/menu-item.tsx
type MenuItemOptions (line 29) | type MenuItemOptions = Partial<Omit<MenuItemData, "key">> &
type MenuItemProps (line 52) | type MenuItemProps<C extends ElementType = "div"> = HTMLHopeProps<C, Men...
function MenuItem (line 62) | function MenuItem<C extends ElementType = "div">(props: MenuItemProps<C>) {
FILE: packages/solid/src/components/menu/menu-label.tsx
type MenuLabelProps (line 11) | type MenuLabelProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function MenuLabel (line 18) | function MenuLabel<C extends ElementType = "div">(props: MenuLabelProps<...
FILE: packages/solid/src/components/menu/menu-trigger.tsx
type MenuTriggerProps (line 12) | type MenuTriggerProps<C extends ElementType = "button"> = HTMLHopeProps<C>;
function MenuTrigger (line 19) | function MenuTrigger<C extends ElementType = "button">(props: MenuTrigge...
FILE: packages/solid/src/components/menu/menu.styles.ts
function createMenuScaleTransition (line 17) | function createMenuScaleTransition(name: string, transformOrigin: string) {
function createColorVariant (line 121) | function createColorVariant(config: { color: string; bgColorActive: stri...
type MenuItemVariants (line 175) | type MenuItemVariants = VariantProps<typeof menuItemStyles>;
FILE: packages/solid/src/components/menu/menu.tsx
type MenuMotionPreset (line 31) | type MenuMotionPreset =
type MenuChildrenRenderProp (line 38) | type MenuChildrenRenderProp = (props: { opened: Accessor<boolean> }) => ...
type ThemeableMenuOptions (line 40) | interface ThemeableMenuOptions {
type MenuProps (line 62) | interface MenuProps extends ThemeableMenuOptions {
type MenuState (line 74) | interface MenuState {
function Menu (line 144) | function Menu(props: MenuProps) {
type MenuContextValue (line 494) | interface MenuContextValue {
function useMenuContext (line 566) | function useMenuContext() {
type MenuStyleConfig (line 580) | interface MenuStyleConfig {
FILE: packages/solid/src/components/menu/menu.utils.ts
type MenuItemData (line 1) | interface MenuItemData {
type GetUpdatedIndexParams (line 30) | interface GetUpdatedIndexParams {
type MenuActions (line 55) | enum MenuActions {
function filterItems (line 76) | function filterItems(items: MenuItemData[] = [], filter: string, exclude...
function getIndexByLetter (line 91) | function getIndexByLetter(items: MenuItemData[], filter: string, startIn...
function getActionFromKey (line 116) | function getActionFromKey(event: KeyboardEvent, menuOpen: boolean) {
function calculateActiveIndex (line 164) | function calculateActiveIndex(currentIndex: number, maxIndex: number, ac...
function getUpdatedIndex (line 182) | function getUpdatedIndex(params: GetUpdatedIndexParams) {
FILE: packages/solid/src/components/modal/create-modal.ts
type CreateModalProps (line 16) | type CreateModalProps = Pick<ModalContentProps, "onClick">;
type CreateModalReturn (line 18) | interface CreateModalReturn {
function createModal (line 28) | function createModal(props: CreateModalProps): CreateModalReturn {
FILE: packages/solid/src/components/modal/modal-body.tsx
type ModalBodyProps (line 10) | type ModalBodyProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function ModalBody (line 17) | function ModalBody<C extends ElementType = "div">(props: ModalBodyProps<...
FILE: packages/solid/src/components/modal/modal-close-button.tsx
function ModalCloseButton (line 18) | function ModalCloseButton(props: CloseButtonProps) {
FILE: packages/solid/src/components/modal/modal-content.tsx
type ModalContentProps (line 13) | type ModalContentProps<C extends ElementType = "section"> = HTMLHopeProp...
function ModalContent (line 21) | function ModalContent<C extends ElementType = "section">(props: ModalCon...
FILE: packages/solid/src/components/modal/modal-footer.tsx
type ModalFooterProps (line 9) | type ModalFooterProps<C extends ElementType = "footer"> = HTMLHopeProps<C>;
function ModalFooter (line 16) | function ModalFooter<C extends ElementType = "footer">(props: ModalFoote...
FILE: packages/solid/src/components/modal/modal-header.tsx
type ModalHeaderProps (line 10) | type ModalHeaderProps<C extends ElementType = "header"> = HTMLHopeProps<C>;
function ModalHeader (line 17) | function ModalHeader<C extends ElementType = "header">(props: ModalHeade...
FILE: packages/solid/src/components/modal/modal-overlay.tsx
type ModalOverlayProps (line 11) | type ModalOverlayProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function ModalOverlay (line 18) | function ModalOverlay<C extends ElementType = "div">(props: ModalOverlay...
FILE: packages/solid/src/components/modal/modal.styles.ts
type ModalContainerVariants (line 136) | type ModalContainerVariants = VariantProps<typeof modalContainerStyles>;
type ModalDialogVariants (line 226) | type ModalDialogVariants = VariantProps<typeof modalDialogStyles>;
FILE: packages/solid/src/components/modal/modal.tsx
type ModalMotionPreset (line 18) | type ModalMotionPreset = "fade-in-bottom" | "scale" | "none";
type ModalProps (line 20) | interface ModalProps extends ModalContainerVariants, ModalDialogVariants {
type ThemeableModalOptions (line 97) | type ThemeableModalOptions = Pick<
type ModalState (line 110) | interface ModalState
function Modal (line 159) | function Modal(props: ModalProps) {
type ModalContextValue (line 295) | interface ModalContextValue {
function useModalContext (line 336) | function useModalContext() {
type ModalStyleConfig (line 350) | interface ModalStyleConfig {
FILE: packages/solid/src/components/notification/notification-container.tsx
type NotificationContainerOptions (line 16) | type NotificationContainerOptions = Omit<NotificationConfig, "onClose">;
type NotificationContainerProps (line 18) | type NotificationContainerProps = HTMLHopeProps<"div", NotificationConta...
function NotificationContainer (line 24) | function NotificationContainer(props: NotificationContainerProps) {
FILE: packages/solid/src/components/notification/notification-description.tsx
type NotificationDescriptionProps (line 9) | type NotificationDescriptionProps<C extends ElementType = "div"> = HTMLH...
function NotificationDescription (line 13) | function NotificationDescription<C extends ElementType = "div">(
FILE: packages/solid/src/components/notification/notification-icon.tsx
type NotificationIconProps (line 14) | type NotificationIconProps<C extends ElementType = "svg"> = IconProps<C>;
function NotificationIcon (line 18) | function NotificationIcon<C extends ElementType = "svg">(props: Notifica...
FILE: packages/solid/src/components/notification/notification-title.tsx
type NotificationTitleProps (line 9) | type NotificationTitleProps<C extends ElementType = "div"> = HTMLHopePro...
function NotificationTitle (line 13) | function NotificationTitle<C extends ElementType = "div">(props: Notific...
FILE: packages/solid/src/components/notification/notification.events.ts
type ValueOf (line 1) | type ValueOf<T> = T[keyof T];
constant NOTIFICATIONS_EVENTS (line 3) | const NOTIFICATIONS_EVENTS = {
function createEvent (line 11) | function createEvent(type: ValueOf<typeof NOTIFICATIONS_EVENTS>, detail?...
FILE: packages/solid/src/components/notification/notification.service.ts
function show (line 4) | function show(config: ShowNotificationProps) {
function update (line 8) | function update(config: NotificationConfig & { id: string }) {
function hide (line 12) | function hide(id: string) {
function clear (line 16) | function clear() {
function clearQueue (line 20) | function clearQueue() {
FILE: packages/solid/src/components/notification/notification.styles.ts
function createNotificationSlideTransition (line 17) | function createNotificationSlideTransition(config: {
type NotificationListVariants (line 119) | type NotificationListVariants = VariantProps<typeof notificationListStyl...
type NotificationVariants (line 155) | type NotificationVariants = VariantProps<typeof notificationStyles>;
FILE: packages/solid/src/components/notification/notification.tsx
type ThemeableNotificationOptions (line 10) | type ThemeableNotificationOptions = NotificationVariants;
type NotificationProps (line 12) | type NotificationProps<C extends ElementType = "div"> = HTMLHopeProps<
function Notification (line 19) | function Notification<C extends ElementType = "div">(props: Notification...
type NotificationContextValue (line 56) | type NotificationContextValue = {
function useNotificationContext (line 62) | function useNotificationContext() {
type NotificationStyleConfig (line 78) | interface NotificationStyleConfig {
FILE: packages/solid/src/components/notification/notification.types.ts
type NotificationConfigRenderProps (line 5) | interface NotificationConfigRenderProps {
type NotificationConfig (line 17) | interface NotificationConfig {
type ShowNotificationProps (line 71) | type ShowNotificationProps = Partial<NotificationConfig>;
FILE: packages/solid/src/components/notification/notifications-provider.context.ts
type NotificationsProviderContextValue (line 5) | interface NotificationsProviderContextValue {
function useNotificationsProviderContext (line 45) | function useNotificationsProviderContext() {
FILE: packages/solid/src/components/notification/notifications-provider.tsx
type NotificationsProviderProps (line 31) | interface NotificationsProviderProps extends NotificationListVariants {
constant DEFAULT_NOTIFICATION_DURATION (line 66) | const DEFAULT_NOTIFICATION_DURATION = 5_000;
function NotificationsProvider (line 71) | function NotificationsProvider(props: NotificationsProviderProps) {
FILE: packages/solid/src/components/popover/popover-anchor.tsx
function PopoverAnchor (line 11) | function PopoverAnchor<C extends ElementType>(props: HTMLHopeProps<C>) {
FILE: packages/solid/src/components/popover/popover-arrow.tsx
type PopoverArrowProps (line 10) | type PopoverArrowProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function PopoverArrow (line 14) | function PopoverArrow<C extends ElementType = "div">(props: PopoverArrow...
FILE: packages/solid/src/components/popover/popover-body.tsx
type PopoverBodyProps (line 10) | type PopoverBodyProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function PopoverBody (line 18) | function PopoverBody<C extends ElementType = "div">(props: PopoverBodyPr...
FILE: packages/solid/src/components/popover/popover-close-button.tsx
function PopoverCloseButton (line 18) | function PopoverCloseButton(props: CloseButtonProps) {
FILE: packages/solid/src/components/popover/popover-content.tsx
type PopoverContentProps (line 14) | type PopoverContentProps<C extends ElementType = "section"> = HTMLHopePr...
function PopoverContent (line 21) | function PopoverContent<C extends ElementType = "section">(props: Popove...
FILE: packages/solid/src/components/popover/popover-footer.tsx
type PopoverFooterProps (line 9) | type PopoverFooterProps<C extends ElementType = "footer"> = HTMLHopeProp...
function PopoverFooter (line 16) | function PopoverFooter<C extends ElementType = "footer">(props: PopoverF...
FILE: packages/solid/src/components/popover/popover-header.tsx
type PopoverHeaderProps (line 10) | type PopoverHeaderProps<C extends ElementType = "header"> = HTMLHopeProp...
function PopoverHeader (line 18) | function PopoverHeader<C extends ElementType = "header">(props: PopoverH...
FILE: packages/solid/src/components/popover/popover-trigger.tsx
type PopoverTriggerProps (line 9) | type PopoverTriggerProps<C extends ElementType = "button"> = HTMLHopePro...
function PopoverTrigger (line 16) | function PopoverTrigger<C extends ElementType = "button">(props: Popover...
FILE: packages/solid/src/components/popover/popover.styles.ts
type PopoverArrowVariants (line 160) | type PopoverArrowVariants = VariantProps<typeof popoverArrowStyles>;
FILE: packages/solid/src/components/popover/popover.tsx
type PopoverChildrenRenderPropParams (line 32) | interface PopoverChildrenRenderPropParams {
type PopoverChildrenRenderProp (line 37) | type PopoverChildrenRenderProp = (props: PopoverChildrenRenderPropParams...
type PopoverMotionPreset (line 39) | type PopoverMotionPreset = "scale" | "none";
type PopoverProps (line 41) | interface PopoverProps {
type ThemeablePopoverOptions (line 148) | type ThemeablePopoverOptions = Pick<
type PopoverState (line 161) | interface PopoverState
function Popover (line 253) | function Popover(props: PopoverProps) {
type PopoverContextValue (line 590) | interface PopoverContextValue {
function usePopoverContext (line 676) | function usePopoverContext() {
type PopoverStyleConfig (line 690) | interface PopoverStyleConfig {
FILE: packages/solid/src/components/progress/progress-indicator.tsx
type ThemeableProgressIndicatorOptions (line 11) | interface ThemeableProgressIndicatorOptions
type ProgressIndicatorOptions (line 19) | type ProgressIndicatorOptions = ThemeableProgressIndicatorOptions;
type ProgressIndicatorProps (line 21) | type ProgressIndicatorProps<C extends ElementType = "div"> = HTMLHopeProps<
function ProgressIndicator (line 34) | function ProgressIndicator<C extends ElementType = "div">(props: Progres...
FILE: packages/solid/src/components/progress/progress-label.tsx
type ProgressLabelProps (line 10) | type ProgressLabelProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function ProgressLabel (line 17) | function ProgressLabel<C extends ElementType = "div">(props: ProgressLab...
FILE: packages/solid/src/components/progress/progress.styles.ts
type ProgressVariants (line 49) | type ProgressVariants = VariantProps<typeof progressStyles>;
type ProgressIndicatorVariants (line 99) | type ProgressIndicatorVariants = VariantProps<typeof progressIndicatorSt...
FILE: packages/solid/src/components/progress/progress.tsx
type ProgressState (line 15) | interface ProgressState {
type ThemeableProgressOptions (line 52) | interface ThemeableProgressOptions extends ProgressVariants {
type ProgressOptions (line 59) | interface ProgressOptions
type ProgressProps (line 68) | type ProgressProps<C extends ElementType = "div"> = HTMLHopeProps<C, Pro...
type ProgressStyleConfig (line 70) | interface ProgressStyleConfig {
type ProgressContextValue (line 82) | interface ProgressContextValue {
function Progress (line 99) | function Progress<C extends ElementType = "div">(props: ProgressProps<C>) {
function useProgressContext (line 176) | function useProgressContext() {
FILE: packages/solid/src/components/radio/radio-group.tsx
type RadioGroupOptions (line 10) | interface RadioGroupOptions extends ThemeableRadioOptions {
type RadioGroupProps (line 56) | type RadioGroupProps<C extends ElementType = "div"> = HTMLHopeProps<C, R...
type RadioGroupState (line 58) | interface RadioGroupState extends Omit<RadioGroupOptions, "name" | "onCh...
function RadioGroup (line 82) | function RadioGroup<C extends ElementType = "div">(props: RadioGroupProp...
type RadioGroupContextValue (line 157) | interface RadioGroupContextValue {
function useRadioGroupContext (line 168) | function useRadioGroupContext() {
FILE: packages/solid/src/components/radio/radio.styles.ts
type RadioWrapperVariants (line 27) | type RadioWrapperVariants = VariantProps<typeof radioWrapperStyles>;
type RadioControlVariants (line 52) | type RadioControlVariants = VariantProps<typeof radioControlStyles>;
FILE: packages/solid/src/components/radio/radio.tsx
type RadioChildrenRenderProp (line 23) | type RadioChildrenRenderProp = (props: { checked: boolean }) => JSX.Elem...
type ThemeableRadioOptions (line 25) | type ThemeableRadioOptions = RadioWrapperVariants & RadioControlVariants;
type RadioOptions (line 27) | interface RadioOptions extends ThemeableRadioOptions {
type RadioProps (line 102) | type RadioProps<C extends ElementType = "label"> = HTMLHopeProps<C, Radi...
type RadioState (line 104) | interface RadioState extends Required<ThemeableRadioOptions> {
function Radio (line 190) | function Radio<C extends ElementType = "label">(props: RadioProps<C>) {
type RadioContextValue (line 469) | interface RadioContextValue
function useRadioContext (line 476) | function useRadioContext() {
type RadioStyleConfig (line 490) | interface RadioStyleConfig {
FILE: packages/solid/src/components/select/select-content.tsx
type SelectContentProps (line 14) | type SelectContentProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function SelectContent (line 21) | function SelectContent<C extends ElementType = "div">(props: SelectConte...
FILE: packages/solid/src/components/select/select-icon.tsx
type SelectIconOptions (line 10) | interface SelectIconOptions {
type SelectIconProps (line 17) | type SelectIconProps<C extends ElementType = "svg"> = HTMLHopeProps<C, S...
function SelectIcon (line 24) | function SelectIcon<C extends ElementType = "svg">(props: SelectIconProp...
FILE: packages/solid/src/components/select/select-label.tsx
type SelectLabelProps (line 11) | type SelectLabelProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function SelectLabel (line 18) | function SelectLabel<C extends ElementType = "div">(props: SelectLabelPr...
FILE: packages/solid/src/components/select/select-listbox.tsx
type SelectListboxProps (line 11) | type SelectListboxProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function SelectListbox (line 18) | function SelectListbox<C extends ElementType = "div">(props: SelectListb...
FILE: packages/solid/src/components/select/select-optgroup.tsx
type SelectOptGroupContextValue (line 9) | interface SelectOptGroupContextValue {
type SelectOptGroupProps (line 15) | type SelectOptGroupProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function SelectOptGroup (line 22) | function SelectOptGroup<C extends ElementType = "div">(props: SelectOptG...
function useSelectOptGroupContext (line 52) | function useSelectOptGroupContext() {
FILE: packages/solid/src/components/select/select-option-indicator.tsx
type SelectOptionIndicatorProps (line 11) | type SelectOptionIndicatorProps<C extends ElementType = "span"> = HTMLHo...
function SelectOptionIndicator (line 18) | function SelectOptionIndicator<C extends ElementType = "span">(
FILE: packages/solid/src/components/select/select-option-text.tsx
type SelectOptionTextProps (line 9) | type SelectOptionTextProps<C extends ElementType = "span"> = HTMLHopePro...
function SelectOptionText (line 16) | function SelectOptionText<C extends ElementType = "span">(props: SelectO...
FILE: packages/solid/src/components/select/select-option.tsx
type SelectOptionContextValue (line 20) | interface SelectOptionContextValue {
type SelectOptionOptions (line 26) | type SelectOptionOptions = Required<Pick<SelectOptionData, "value">> &
type SelectOptionProps (line 29) | type SelectOptionProps<C extends ElementType = "div"> = HTMLHopeProps<
function SelectOption (line 39) | function SelectOption<C extends ElementType = "div">(props: SelectOption...
function useSelectOptionContext (line 137) | function useSelectOptionContext() {
FILE: packages/solid/src/components/select/select-placeholder.tsx
type SelectPlaceholderProps (line 12) | type SelectPlaceholderProps<C extends ElementType = "span"> = HTMLHopePr...
function SelectPlaceholder (line 17) | function SelectPlaceholder<C extends ElementType = "span">(
FILE: packages/solid/src/components/select/select-tag-close-button.tsx
type SelectTagCloseButtonProps (line 10) | type SelectTagCloseButtonProps<C extends ElementType = "button"> = HTMLH...
function SelectTagCloseButton (line 18) | function SelectTagCloseButton<C extends ElementType = "button">(
FILE: packages/solid/src/components/select/select-tag.tsx
type SelectTagProps (line 10) | type SelectTagProps<C extends ElementType = "span"> = HTMLHopeProps<C, S...
function SelectTag (line 17) | function SelectTag<C extends ElementType = "span">(props: SelectTagProps...
FILE: packages/solid/src/components/select/select-trigger.tsx
type SelectTriggerProps (line 12) | type SelectTriggerProps<C extends ElementType = "button"> = HTMLHopeProp...
function SelectTrigger (line 19) | function SelectTrigger<C extends ElementType = "button">(props: SelectTr...
FILE: packages/solid/src/components/select/select-value.tsx
type SelectValueChildrenRenderProp (line 14) | type SelectValueChildrenRenderProp = (props: {
type SelectValueOptions (line 18) | interface SelectValueOptions {
type SelectValueProps (line 22) | type SelectValueProps<C extends ElementType = "div"> = HTMLHopeProps<C, ...
function SelectValue (line 29) | function SelectValue<C extends ElementType = "div">(props: SelectValuePr...
FILE: packages/solid/src/components/select/select.styles.ts
function createVariantAndSizeCompoundVariants (line 40) | function createVariantAndSizeCompoundVariants(
type SelectTriggerVariants (line 93) | type SelectTriggerVariants = VariantProps<typeof selectTriggerStyles>;
type SelectTagVariants (line 193) | type SelectTagVariants = VariantProps<typeof selectTagStyles>;
FILE: packages/solid/src/components/select/select.tsx
type SelectMotionPreset (line 33) | type SelectMotionPreset = "fade-in-top" | "none";
type Value (line 35) | type Value = any | any[];
type ThemeableSelectOptions (line 37) | interface ThemeableSelectOptions extends SelectTriggerVariants {
type SelectProps (line 49) | interface SelectProps extends ThemeableSelectOptions {
type SelectState (line 119) | type SelectState = Required<Pick<SelectProps, "variant" | "size">> &
function Select (line 201) | function Select(props: SelectProps) {
type SelectContextValue (line 747) | interface SelectContextValue {
function useSelectContext (line 839) | function useSelectContext() {
type SelectStyleConfig (line 853) | interface SelectStyleConfig {
FILE: packages/solid/src/components/select/select.utils.ts
type SelectOptionData (line 1) | interface SelectOptionData {
type GetUpdatedIndexParams (line 20) | interface GetUpdatedIndexParams {
type SelectActions (line 45) | enum SelectActions {
function filterOptions (line 65) | function filterOptions(options: SelectOptionData[] = [], filter: string,...
function getIndexByLetter (line 80) | function getIndexByLetter(options: SelectOptionData[], filter: string, s...
function getActionFromKey (line 105) | function getActionFromKey(event: KeyboardEvent, menuOpen: boolean) {
function calculateActiveIndex (line 150) | function calculateActiveIndex(currentIndex: number, maxIndex: number, ac...
function getUpdatedIndex (line 168) | function getUpdatedIndex(params: GetUpdatedIndexParams) {
function isOptionEqual (line 209) | function isOptionEqual(a: SelectOptionData, b: SelectOptionData): boolean {
FILE: packages/solid/src/components/simple-select/simple-option.tsx
function SimpleOption (line 15) | function SimpleOption<C extends ElementType = "div">(props: SelectOption...
FILE: packages/solid/src/components/simple-select/simple-select.tsx
type SimpleSelectOptions (line 15) | interface SimpleSelectOptions extends SelectProps {
type SimpleSelectProps (line 22) | type SimpleSelectProps = HTMLHopeProps<"button", SimpleSelectOptions>;
function SimpleSelect (line 28) | function SimpleSelect(props: SimpleSelectProps) {
FILE: packages/solid/src/components/skeleton/skeleton-circle.tsx
type SkeletonCircleOptions (line 7) | interface SkeletonCircleOptions {
type SkeletonCircleProps (line 14) | type SkeletonCircleProps<C extends ElementType = "div"> = OverrideProps<
function SkeletonCircle (line 19) | function SkeletonCircle<C extends ElementType = "div">(props: SkeletonCi...
FILE: packages/solid/src/components/skeleton/skeleton-text.tsx
type SkeletonTextOptions (line 12) | interface SkeletonTextOptions {
type SkeletonTextProps (line 29) | type SkeletonTextProps<C extends ElementType = "div"> = OverrideProps<
function SkeletonText (line 34) | function SkeletonText<C extends ElementType = "div">(props: SkeletonText...
FILE: packages/solid/src/components/skeleton/skeleton.tsx
type SkeletonOptions (line 16) | interface SkeletonOptions {
type SkeletonProps (line 43) | type SkeletonProps<C extends ElementType = "div"> = HTMLHopeProps<C, Ske...
function Skeleton (line 47) | function Skeleton<C extends ElementType = "div">(props: SkeletonProps<C>) {
FILE: packages/solid/src/components/spacer/spacer.tsx
type SpacerProps (line 8) | type SpacerProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function Spacer (line 16) | function Spacer<C extends ElementType = "div">(props: SpacerProps<C>) {
FILE: packages/solid/src/components/spinner/spinner.styles.ts
type SpinnerVariants (line 42) | type SpinnerVariants = VariantProps<typeof spinnerStyles>;
FILE: packages/solid/src/components/spinner/spinner.tsx
type SpinnerOptions (line 13) | interface SpinnerOptions extends SpinnerVariants {
type SpinnerProps (line 49) | type SpinnerProps<C extends ElementType = "div"> = HTMLHopeProps<C, Spin...
type SpinnerStyleConfig (line 51) | type SpinnerStyleConfig = SinglePartComponentStyleConfig<SpinnerOptions>;
function Spinner (line 55) | function Spinner<C extends ElementType = "div">(props: SpinnerProps<C>) {
FILE: packages/solid/src/components/stack/stack.tsx
type StackOptions (line 10) | type StackOptions = ResponsiveProps<{
type StackProps (line 16) | type StackProps<C extends ElementType = "div"> = HTMLHopeProps<C, StackO...
function Stack (line 25) | function Stack<C extends ElementType = "div">(props: StackProps<C>) {
type HStackOptions (line 47) | type HStackOptions = ResponsiveProps<{
type HStackProps (line 51) | type HStackProps<C extends ElementType = "div"> = StackProps<C> & HStack...
function HStack (line 56) | function HStack<C extends ElementType = "div">(props: HStackProps<C>) {
type VStackOptions (line 68) | type VStackOptions = ResponsiveProps<{
type VStackProps (line 72) | type VStackProps<C extends ElementType = "div"> = StackProps<C> & VStack...
function VStack (line 77) | function VStack<C extends ElementType = "div">(props: VStackProps<C>) {
FILE: packages/solid/src/components/storybook-utils.tsx
function ColorModeWrapper (line 12) | function ColorModeWrapper(props: { children?: JSX.Element }) {
function HopeWrapper (line 28) | function HopeWrapper(props: { children?: JSX.Element }) {
FILE: packages/solid/src/components/switch/switch-primitive-thumb.tsx
type SwitchPrimitiveThumbProps (line 5) | type SwitchPrimitiveThumbProps<C extends ElementType = "span"> = HTMLHop...
function SwitchPrimitiveThumb (line 11) | function SwitchPrimitiveThumb<C extends ElementType = "span">(
FILE: packages/solid/src/components/switch/switch-primitive.tsx
type SwitchPrimitiveChildrenRenderProp (line 20) | type SwitchPrimitiveChildrenRenderProp = (props: {
type SwitchPrimitiveOptions (line 24) | interface SwitchPrimitiveOptions {
type SwitchPrimitiveProps (line 104) | type SwitchPrimitiveProps<C extends ElementType = "label"> = HTMLHopeProps<
type SwitchPrimitiveState (line 109) | interface SwitchPrimitiveState {
function SwitchPrimitive (line 188) | function SwitchPrimitive<C extends ElementType = "label">(props: SwitchP...
type SwitchPrimitiveContextValue (line 365) | interface SwitchPrimitiveContextValue {
function useSwitchPrimitivehContext (line 371) | function useSwitchPrimitivehContext() {
FILE: packages/solid/src/components/switch/switch.styles.ts
type SwitchWrapperVariants (line 27) | type SwitchWrapperVariants = VariantProps<typeof switchWrapperStyles>;
type SwitchControlVariants (line 116) | type SwitchControlVariants = VariantProps<typeof switchControlStyles>;
FILE: packages/solid/src/components/switch/switch.tsx
type ThemeableSwitchOptions (line 18) | type ThemeableSwitchOptions = SwitchWrapperVariants & SwitchControlVaria...
type SwitchOptions (line 20) | interface SwitchOptions extends ThemeableSwitchOptions {
type SwitchProps (line 27) | type SwitchProps<C extends ElementType = "label"> = OverrideProps<
function Switch (line 41) | function Switch<C extends ElementType = "label">(props: SwitchProps<C>) {
type SwitchStyleConfig (line 131) | interface SwitchStyleConfig {
FILE: packages/solid/src/components/table/table-caption.tsx
type ThemeableTableCaptionOptions (line 10) | type ThemeableTableCaptionOptions = Pick<TableCaptionVariants, "placemen...
type TableCaptionProps (line 12) | type TableCaptionProps<C extends ElementType = "caption"> = HTMLHopeProps<
function TableCaption (line 19) | function TableCaption<C extends ElementType = "caption">(props: TableCap...
FILE: packages/solid/src/components/table/table.styles.ts
type TableCaptionVariants (line 50) | type TableCaptionVariants = VariantProps<typeof tableCaptionStyles>;
function createStripedStyles (line 56) | function createStripedStyles(stripedRow: "odd" | "even"): SystemStyleObj...
type TableColumnHeaderVariants (line 148) | type TableColumnHeaderVariants = VariantProps<typeof tableColumnHeaderSt...
type TableCellVariants (line 183) | type TableCellVariants = VariantProps<typeof tableCellStyles>;
FILE: packages/solid/src/components/table/table.tsx
type TableContextValue (line 12) | interface TableContextValue {
type TableOptions (line 29) | type TableOptions = Partial<TableContextValue>;
type TableProps (line 31) | type TableProps<C extends ElementType = "table"> = HTMLHopeProps<C, Tabl...
type TableStyleConfig (line 33) | interface TableStyleConfig {
function Table (line 54) | function Table<C extends ElementType = "table">(props: TableProps<C>) {
function useTableContext (line 88) | function useTableContext() {
FILE: packages/solid/src/components/table/tbody.tsx
type TbodyProps (line 10) | type TbodyProps<C extends ElementType = "tbody"> = HTMLHopeProps<C>;
function Tbody (line 14) | function Tbody<C extends ElementType = "tbody">(props: TbodyProps<C>) {
FILE: packages/solid/src/components/table/td.tsx
type TdProps (line 10) | type TdProps<C extends ElementType = "td"> = HTMLHopeProps<
function Td (line 17) | function Td<C extends ElementType = "td">(props: TdProps<C>) {
FILE: packages/solid/src/components/table/tfoot.tsx
type TfootProps (line 9) | type TfootProps<C extends ElementType = "tfoot"> = HTMLHopeProps<C>;
function Tfoot (line 13) | function Tfoot<C extends ElementType = "tfoot">(props: TfootProps<C>) {
FILE: packages/solid/src/components/table/th.tsx
type ThProps (line 10) | type ThProps<C extends ElementType = "th"> = HTMLHopeProps<
function Th (line 17) | function Th<C extends ElementType = "th">(props: ThProps<C>) {
FILE: packages/solid/src/components/table/thead.tsx
type TheadProps (line 8) | type TheadProps<C extends ElementType = "thead"> = HTMLHopeProps<C>;
function Thead (line 12) | function Thead<C extends ElementType = "thead">(props: TheadProps<C>) {
FILE: packages/solid/src/components/table/tr.tsx
type TrProps (line 8) | type TrProps<C extends ElementType = "tr"> = HTMLHopeProps<C>;
function Tr (line 12) | function Tr<C extends ElementType = "tr">(props: TrProps<C>) {
FILE: packages/solid/src/components/tabs/tab-list.tsx
type TabListProps (line 13) | type TabListProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function TabList (line 21) | function TabList<C extends ElementType = "div">(props: TabListProps<C>) {
FILE: packages/solid/src/components/tabs/tab-panel.tsx
type TabPanelProps (line 11) | type TabPanelProps<C extends ElementType = "div"> = HTMLHopeProps<C>;
function TabPanel (line 18) | function TabPanel<C extends ElementType = "div">(props: TabPanelProps<C>) {
FILE: packages/solid/src/components/tabs/tab.tsx
type TabOptions (line 12) | interface TabOptions {
type TabProps (line 19) | type TabProps<C extends ElementType = "button"> = HTMLHopeProps<C, TabOp...
function Tab (line 26) | function Tab<C extends ElementType = "button">(props: TabProps<C>) {
FILE: packages/solid/src/components/tabs/tabs.styles.ts
type TabsVariants (line 23) | type TabsVariants = VariantProps<typeof tabsStyles>;
type TabListVariants (line 138) | type TabListVariants = VariantProps<typeof tabListStyles>;
function createSelectedColorVariant (line 144) | function createSelectedColorVariant(color: string): SystemStyleObject {
function createPillsAndColorVariant (line 152) | function createPillsAndColorVariant(config: {
type TabVariants (line 556) | type TabVariants = VariantProps<typeof tabStyles>;
FILE: packages/solid/src/components/tabs/tabs.tsx
type ThemeableTabsOptions (line 19) | type ThemeableTabsOptions = Pick<TabListVariants, "alignment"> &
type TabsOptions (line 27) | interface TabsOptions extends ThemeableTabsOptions {
type TabsProps (line 57) | type TabsProps<C extends ElementType = "div"> = HTMLHopeProps<C, TabsOpt...
type TabsState (line 59) | interface TabsState extends Required<TabVariants> {
function Tabs (line 114) | function Tabs<C extends ElementType = "div">(props: TabsProps<C>) {
type TabsContextValue (line 279) | interface TabsContextValue {
function useTabsContext (line 337) | function useTabsContext() {
type TabsStyleConfig (line 351) | interface TabsStyleConfig {
FILE: packages/solid/src/components/tag/__tests__/tag-close-button.test.tsx
function renderWithTagContext (line 9) | function renderWithTagContext(callback: () => JSX.Element) {
FILE: packages/solid/src/components/tag/tag-close-button.tsx
type TagCloseButtonOptions (line 11) | interface TagCloseButtonOptions {
type TagCloseButtonProps (line 15) | type TagCloseButtonProps<C extends ElementType = "button"> = HTMLHopeProps<
function TagCloseButton (line 25) | function TagCloseButton<C extends ElementType = "button">(props: TagClos...
FILE: packages/solid/src/components/tag/tag-icon.tsx
type TagLeftIconProps (line 13) | type TagLeftIconProps<C extends ElementType = "svg"> = IconProps<C>;
function TagLeftIcon (line 17) | function TagLeftIcon<C extends ElementType = "svg">(props: TagLeftIconPr...
type TagRightIconProps (line 33) | type TagRightIconProps<C extends ElementType = "svg"> = IconProps<C>;
function TagRightIcon (line 37) | function TagRightIcon<C extends ElementType = "svg">(props: TagRightIcon...
FILE: packages/solid/src/components/tag/tag-label.tsx
type TagLabelProps (line 9) | type TagLabelProps<C extends ElementType = "span"> = HTMLHopeProps<C>;
function TagLabel (line 13) | function TagLabel<C extends ElementType = "span">(props: TagLabelProps<C...
FILE: packages/solid/src/components/tag/tag.styles.ts
type TagSizeVariantConfig (line 88) | interface TagSizeVariantConfig {
function createTagSizeVariant (line 96) | function createTagSizeVariant(config: TagSizeVariantConfig): SystemStyle...
type TagSolidCompoundVariantConfig (line 110) | interface TagSolidCompoundVariantConfig {
function createTagSolidCompoundVariant (line 116) | function createTagSolidCompoundVariant(config: TagSolidCompoundVariantCo...
type TagSubtleCompoundVariantConfig (line 127) | interface TagSubtleCompoundVariantConfig {
function createTagSubtleCompoundVariant (line 133) | function createTagSubtleCompoundVariant(config: TagSubtleCompoundVariant...
type TagOutlineCompoundVariantConfig (line 144) | interface TagOutlineCompoundVariantConfig {
function createTagOutlineCompoundVariant (line 150) | function createTagOutlineCompoundVariant(
function createTagDotAndSizeCompoundVariant (line 163) | function createTagDotAndSizeCompoundVariant(size: string): SystemStyleOb...
type TagVariants (line 588) | type TagVariants = VariantProps<typeof tagStyles>;
FILE: packages/solid/src/components/tag/tag.tsx
type ThemeableTagOptions (line 10) | type ThemeableTagOptions = Pick<TagVariants, "variant" | "colorScheme" |...
type TagStyleConfig (line 12) | interface TagStyleConfig {
type TagProps (line 24) | type TagProps<C extends ElementType = "span"> = HTMLHopeProps<C, TagVari...
type TagContextValue (line 28) | interface TagContextValue {
function Tag (line 38) | function Tag<C extends ElementType = "span">(props: TagProps<C>) {
function useTagContext (line 71) | function useTagContext() {
FILE: packages/solid/src/components/test-utils.tsx
function renderWithHopeProvider (line 6) | function renderWithHopeProvider(callback: () => JSX.Element, config: Hop...
FILE: packages/solid/src/components/text/text.styles.ts
type TextVariants (line 64) | type TextVariants = VariantProps<typeof textStyles>;
FILE: packages/solid/src/components/text/text.tsx
type TextProps (line 9) | type TextProps<C extends ElementType = "p"> = HTMLHopeProps<C, TextVaria...
type TextStyleConfig (line 11) | type TextStyleConfig = SinglePartComponentStyleConfig<TextVariants>;
function Text (line 19) | function Text<C extends ElementType = "p">(props: TextProps<C>) {
FILE: packages/solid/src/components/textarea/textarea.styles.ts
function createVariantAndSizeCompoundVariants (line 6) | function createVariantAndSizeCompoundVariants(variant: string, paddingX?...
type TextareaVariants (line 30) | type TextareaVariants = VariantProps<typeof textareaStyles>;
FILE: packages/solid/src/components/textarea/textarea.tsx
type TextareaStyleConfig (line 10) | type TextareaStyleConfig = SinglePartComponentStyleConfig<TextareaVarian...
type TextareaOptions (line 12) | interface TextareaOptions extends TextareaVariants {
type TextareaProps (line 19) | type TextareaProps = Omit<HTMLHopeProps<"textarea", TextareaOptions>, "a...
function Textarea (line 23) | function Textarea(props: TextareaProps) {
FILE: packages/solid/src/components/tooltip/tooltip.tsx
type TooltipOptions (line 35) | interface TooltipOptions {
type ThemeableTooltipOptions (line 137) | type ThemeableTooltipOptions = Pick<
type TooltipStyleConfig (line 150) | type TooltipStyleConfig = SinglePartComponentStyleConfig<ThemeableToolti...
type TooltipProps (line 152) | type TooltipProps<C extends ElementType = "div"> = HTMLHopeProps<C, Tool...
function Tooltip (line 157) | function Tooltip<C extends ElementType = "div">(props: TooltipProps<C>) {
FILE: packages/solid/src/components/types.ts
type DOMElements (line 10) | type DOMElements = keyof JSX.IntrinsicElements;
type ElementType (line 15) | type ElementType<Props = any> = DOMElements | Component<Props>;
type PropsOf (line 20) | type PropsOf<C extends ElementType> = ComponentProps<C>;
type ClassProps (line 25) | interface ClassProps {
type AsProp (line 34) | interface AsProp<C extends ElementType> {
type HopeProps (line 41) | type HopeProps = StyleProps & ClassProps & { __baseStyle?: SystemStyleOb...
type HTMLHopeProps (line 46) | type HTMLHopeProps<C extends ElementType, AdditionalProps = {}> = Overri...
type HopeComponent (line 54) | type HopeComponent<T extends ElementType, P = {}> = <C extends ElementTy...
type HTMLHopeComponents (line 62) | type HTMLHopeComponents = {
type HopeFactoryStyleOptions (line 66) | interface HopeFactoryStyleOptions<T extends ElementType> {
type HopeFactory (line 83) | type HopeFactory = <T extends ElementType>(
type SinglePartComponentStyleConfig (line 91) | interface SinglePartComponentStyleConfig<Props> {
FILE: packages/solid/src/hooks/create-disclosure/index.ts
type CreateDisclosureProps (line 3) | interface CreateDisclosureProps {
function createDisclosure (line 15) | function createDisclosure(props: CreateDisclosureProps = {}) {
FILE: packages/solid/src/hooks/create-queue/index.ts
type CreateQueueProps (line 3) | interface CreateQueueProps<T> {
type CreateQueueState (line 8) | interface CreateQueueState<T> {
type CreateQueueReturn (line 14) | interface CreateQueueReturn<T> {
function createQueue (line 21) | function createQueue<T>(props: CreateQueueProps<T>): CreateQueueReturn<T> {
FILE: packages/solid/src/hooks/use-click-outside/index.ts
type UseClickOutsideProps (line 8) | interface UseClickOutsideProps {
function useClickOutside (line 20) | function useClickOutside(props: UseClickOutsideProps) {
FILE: packages/solid/src/hooks/use-event/index.ts
type UseElementEventProps (line 3) | interface UseElementEventProps<Key> {
function useEvent (line 12) | function useEvent<Key extends string>(props: UseElementEventProps<Key>) {
FILE: packages/solid/src/hope-provider.tsx
type HopeThemeConfig (line 33) | interface HopeThemeConfig {
type HopeContextValue (line 40) | interface HopeContextValue {
type HopeProviderProps (line 50) | type HopeProviderProps = PropsWithChildren<{
function applyGlobalTransitionStyles (line 65) | function applyGlobalTransitionStyles() {
function HopeProvider (line 75) | function HopeProvider(props: HopeProviderProps) {
function useTheme (line 136) | function useTheme() {
function useStyleConfig (line 150) | function useStyleConfig(): ThemeStyleConfig {
function useColorMode (line 168) | function useColorMode(): Pick<
function useColorModeValue (line 192) | function useColorModeValue<T = any>(light: T, dark: T) {
FILE: packages/solid/src/style-config.types.ts
type ThemeStyleConfig (line 33) | interface ThemeStyleConfig {
FILE: packages/solid/src/styled-system/props/border.ts
type BorderProps (line 8) | type BorderProps = Partial<{
FILE: packages/solid/src/styled-system/props/color.ts
type ColorProps (line 8) | type ColorProps = Partial<{
FILE: packages/solid/src/styled-system/props/css.ts
type CSSProp (line 7) | type CSSProp = {
FILE: packages/solid/src/styled-system/props/flexbox.ts
type FlexboxProps (line 8) | type FlexboxProps = Partial<{
FILE: packages/solid/src/styled-system/props/grid.ts
type GridLayoutProps (line 8) | type GridLayoutProps = Partial<{
FILE: packages/solid/src/styled-system/props/interactivity.ts
type InteractivityProps (line 8) | type InteractivityProps = Partial<{
FILE: packages/solid/src/styled-system/props/layout.ts
type LayoutProps (line 8) | type LayoutProps = Partial<{
FILE: packages/solid/src/styled-system/props/margin.ts
type MarginProps (line 8) | type MarginProps = Partial<{
FILE: packages/solid/src/styled-system/props/padding.ts
type PaddingProps (line 8) | type PaddingProps = Partial<{
FILE: packages/solid/src/styled-system/props/position.ts
type PositionProps (line 8) | type PositionProps = Partial<{
FILE: packages/solid/src/styled-system/props/pseudo-selector.ts
type PseudoSelectorProps (line 7) | type PseudoSelectorProps = Partial<{
FILE: packages/solid/src/styled-system/props/radii.ts
type RadiiProps (line 8) | type RadiiProps = Partial<{
FILE: packages/solid/src/styled-system/props/shadow.ts
type ShadowProps (line 8) | type ShadowProps = Partial<{
FILE: packages/solid/src/styled-system/props/size.ts
type SizeProps (line 8) | type SizeProps = Partial<{
FILE: packages/solid/src/styled-system/props/transform.ts
type TransformProps (line 8) | type TransformProps = Partial<{
FILE: packages/solid/src/styled-system/props/transition.ts
type TransitionProps (line 8) | type TransitionProps = Partial<{
FILE: packages/solid/src/styled-system/props/typography.ts
type TypographyProps (line 15) | type TypographyProps = Partial<{
FILE: packages/solid/src/styled-system/stitches-utils/pseudo-selector.ts
function createGroupSelector (line 3) | function createGroupSelector(...selectors: string[]): string {
function createPeerSelector (line 9) | function createPeerSelector(...selectors: string[]): string {
type PseudoSelector (line 447) | type PseudoSelector = typeof pseudoSelectors;
FILE: packages/solid/src/styled-system/system.ts
type StyleProps (line 25) | type StyleProps = ResponsiveProps<
function createStyledSystemClass (line 74) | function createStyledSystemClass(
function getUsedStylePropNames (line 84) | function getUsedStylePropNames(props: Record<string | number, any>) {
FILE: packages/solid/src/styled-system/types.ts
type HopeTheme (line 23) | type HopeTheme = typeof baseTheme;
type StitchesThemeConfig (line 28) | type StitchesThemeConfig = {
type SystemConfig (line 45) | type SystemConfig = typeof config;
type SystemMedia (line 50) | type SystemMedia = typeof config.media;
type SystemStyleObject (line 55) | type SystemStyleObject = CSS<SystemConfig>;
type ColorScaleValue (line 60) | type ColorScaleValue = ScaleValue<"colors", SystemConfig>;
type SpaceScaleValue (line 65) | type SpaceScaleValue = ScaleValue<"space", SystemConfig>;
type SizeScaleValue (line 70) | type SizeScaleValue = ScaleValue<"sizes", SystemConfig>;
type FontScaleValue (line 75) | type FontScaleValue = ScaleValue<"fonts", SystemConfig>;
type FontSizeScaleValue (line 80) | type FontSizeScaleValue = ScaleValue<"fontSizes", SystemConfig>;
type FontWeightScaleValue (line 85) | type FontWeightScaleValue = ScaleValue<"fontWeights", SystemConfig>;
type LetterSpacingScaleValue (line 90) | type LetterSpacingScaleValue = ScaleValue<"letterSpacings", SystemConfig>;
type LineHeightScaleValue (line 95) | type LineHeightScaleValue = ScaleValue<"lineHeights", SystemConfig>;
type RadiiScaleValue (line 100) | type RadiiScaleValue = ScaleValue<"radii", SystemConfig>;
type ShadowScaleValue (line 105) | type ShadowScaleValue = ScaleValue<"shadows", SystemConfig>;
type ZIndiceScaleValue (line 110) | type ZIndiceScaleValue = ScaleValue<"zIndices", SystemConfig>;
type KeysOf (line 115) | type KeysOf<T> = Record<keyof T, true>;
type Prefixed (line 120) | type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number ...
type SystemMediaCssSelector (line 125) | type SystemMediaCssSelector = Prefixed<"@", keyof SystemMedia>;
type BreakpointCssSelector (line 130) | type BreakpointCssSelector =
type ResponsiveProps (line 137) | type ResponsiveProps<Props> = {
type ResponsiveValue (line 148) | type ResponsiveValue<T> =
type StyleProps (line 157) | type StyleProps = ResponsiveProps<
FILE: packages/solid/src/styled-system/utils.ts
function mergeStyleObject (line 19) | function mergeStyleObject(
function toCssObject (line 52) | function toCssObject(
function extendBaseTheme (line 129) | function extendBaseTheme<T extends StitchesThemeConfig>(
function mapResponsive (line 148) | function mapResponsive(prop: ResponsiveValue<any>, mapper: (val: any) =>...
function colorTokenToCssVar (line 170) | function colorTokenToCssVar(token: string): string {
FILE: packages/solid/src/utils/assertion.ts
function isNumber (line 3) | function isNumber(value: any): value is number {
function isArray (line 7) | function isArray<T>(value: any): value is Array<T> {
function isObject (line 11) | function isObject(value: any): value is Record<string, any> {
function isFunction (line 16) | function isFunction<T extends Function = Function>(value: any): value is...
function isNull (line 20) | function isNull(value: any): value is null {
function isString (line 24) | function isString(value: any): value is string {
function isUndefined (line 28) | function isUndefined(value: any): value is undefined {
FILE: packages/solid/src/utils/css.ts
function createClassSelector (line 4) | function createClassSelector(className: string) {
function classNames (line 11) | function classNames(...classNames: Array<string | null | undefined>) {
FILE: packages/solid/src/utils/dom.ts
function isElement (line 3) | function isElement(el: any): el is Element {
function isHTMLElement (line 9) | function isHTMLElement(el: any): el is HTMLElement {
function getOwnerDocument (line 18) | function getOwnerDocument(node?: Element | null): Document {
function isValidEvent (line 22) | function isValidEvent(event: any, element?: HTMLElement) {
function normalizeEventKey (line 41) | function normalizeEventKey(event: Pick<KeyboardEvent, "key" | "keyCode">) {
function getActiveElement (line 51) | function getActiveElement(node?: HTMLElement) {
function contains (line 56) | function contains(parent: HTMLElement | undefined, child: HTMLElement) {
function getRelatedTarget (line 64) | function getRelatedTarget(
function isScrollable (line 75) | function isScrollable(element: HTMLElement) {
function maintainScrollVisibility (line 83) | function maintainScrollVisibility(activeElement: HTMLElement, scrollPare...
FILE: packages/solid/src/utils/function.ts
function noop (line 8) | function noop() {
function cast (line 15) | function cast<T>(value: any): T {
function mapKeys (line 22) | function mapKeys(prop: any, mapper: (val: any) => any) {
function callHandler (line 41) | function callHandler<T, E extends Event>(
function chainHandlers (line 63) | function chainHandlers<T, E extends Event>(
function range (line 81) | function range(count: number) {
FILE: packages/solid/src/utils/number.ts
function valueToPercent (line 8) | function valueToPercent(value: number, min: number, max: number) {
function getNextIndex (line 12) | function getNextIndex(current: number, last: number, loop: boolean) {
function getPrevIndex (line 22) | function getPrevIndex(current: number, last: number, loop: boolean) {
FILE: packages/solid/src/utils/solid.ts
function isChildrenFunction (line 3) | function isChildrenFunction(props: any): boolean {
FILE: packages/solid/src/utils/tabbable.ts
function isHidden (line 7) | function isHidden(element: HTMLElement) {
function isDisabled (line 15) | function isDisabled(element: HTMLElement) {
function isContentEditable (line 22) | function isContentEditable(element: HTMLElement) {
function isFocusable (line 27) | function isFocusable(element: HTMLElement) {
FILE: packages/solid/src/utils/types.ts
type OverrideProps (line 8) | type OverrideProps<Source = {}, Override = {}> = Omit<Source, keyof Over...
type EventKeys (line 10) | type EventKeys =
type EventKeyMap (line 30) | type EventKeyMap = Partial<
Condensed preview — 584 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,865K chars).
[
{
"path": ".all-contributorsrc",
"chars": 1054,
"preview": "{\n \"files\": [\n \"README.md\"\n ],\n \"imageSize\": 100,\n \"commit\": false,\n \"contributors\": [\n {\n \"login\": \"fab"
},
{
"path": ".editorconfig",
"chars": 114,
"preview": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = LF\ncharset = utf-8\ninsert_final_newline = true"
},
{
"path": ".eslintignore",
"chars": 114,
"preview": "node_modules/\n\n# Ignore artifacts:\ncoverage/\ndist/\npublic/\n__mocks__/\n\ncommitlint.config.js\njest.config.js\n*.d.ts\n"
},
{
"path": ".eslintrc.json",
"chars": 1332,
"preview": "{\n \"root\": true,\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:import/recommended\",\n \"plugin:solid/recommende"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 829,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: \"\"\nlabels: \"\"\nassignees: \"\"\n---\n\n**Describe the bu"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 594,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: \"\"\nlabels: \"\"\nassignees: \"\"\n---\n\n**Is your feat"
},
{
"path": ".github/workflows/build-test.yml",
"chars": 1075,
"preview": "name: Build and Test Hope UI\n\n# Controls when the action will run.\non:\n # Triggers the workflow on push or pull request"
},
{
"path": ".gitignore",
"chars": 3501,
"preview": "# Created by https://www.toptal.com/developers/gitignore/api/jetbrains,macos,node\n# Edit at https://www.toptal.com/devel"
},
{
"path": ".husky/commit-msg",
"chars": 80,
"preview": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx --no-install commitlint --edit $1\n"
},
{
"path": ".husky/pre-commit",
"chars": 58,
"preview": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged\n"
},
{
"path": ".prettierrc.json",
"chars": 50,
"preview": "{\n \"arrowParens\": \"avoid\",\n \"printWidth\": 100\n}\n"
},
{
"path": "CONTRIBUTING.md",
"chars": 2980,
"preview": "# Contributing to Hope UI\n\nThank you for showing interest in contributing to Hope UI. All of your contributions are extr"
},
{
"path": "LICENSE.md",
"chars": 1076,
"preview": "MIT License\n\nCopyright (c) 2022 Fabien MARIE-LOUISE\n\nPermission is hereby granted, free of charge, to any person obtaini"
},
{
"path": "README.md",
"chars": 1305,
"preview": "<p align=\"center\">\n <a href=\"https://hope-ui.netlify.app\">\n <img\n alt=\"Hope UI | The SolidJS component library "
},
{
"path": "ROADMAP.md",
"chars": 5169,
"preview": "# Components roadmap\n\n### General\n\n| | Development | A11y check | Tests | Storybook | Docs |\n| ---------- | :"
},
{
"path": "apps/docs/.eslintrc.json",
"chars": 101,
"preview": "{\n \"extends\": \"../../.eslintrc.json\",\n \"parserOptions\": {\n \"project\": [\"./tsconfig.json\"]\n }\n}\n"
},
{
"path": "apps/docs/README.md",
"chars": 74,
"preview": "## @hope-ui/docs\n\nDocumentation website of the Hope UI component library.\n"
},
{
"path": "apps/docs/index.html",
"chars": 546,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "apps/docs/package.json",
"chars": 750,
"preview": "{\n \"name\": \"@hope-ui/docs\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"description\": \"Documentation of the Hope UI com"
},
{
"path": "apps/docs/src/App.tsx",
"chars": 10705,
"preview": "import {\n Anchor,\n Box,\n Center,\n Container,\n Flex,\n hope,\n HStack,\n Progress,\n ProgressIndicator,\n Spinner,\n}"
},
{
"path": "apps/docs/src/components/AppNavLink.tsx",
"chars": 1160,
"preview": "import { Badge, hope } from \"@hope-ui/solid\";\nimport { NavLink } from \"solid-app-router\";\nimport { ComponentProps, Show,"
},
{
"path": "apps/docs/src/components/BeatLoader.tsx",
"chars": 1735,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const BeatLoader = createIcon({\n viewBox: \"0 0 120 30\",\n path: ()"
},
{
"path": "apps/docs/src/components/Code.tsx",
"chars": 188,
"preview": "import { hope } from \"@hope-ui/solid\";\n\nconst Code = hope(\"code\", {\n baseStyle: {\n color: \"$primary11\",\n fontFami"
},
{
"path": "apps/docs/src/components/CodeSnippet.tsx",
"chars": 736,
"preview": "import { Box, HTMLHopeProps } from \"@hope-ui/solid\";\nimport { mergeProps, splitProps } from \"solid-js\";\n\nexport interfac"
},
{
"path": "apps/docs/src/components/ColorScale.tsx",
"chars": 1422,
"preview": "import {\n Box,\n Grid,\n GridItem,\n GridProps,\n hope,\n HStack,\n SystemConfig,\n useTheme,\n VStack,\n} from \"@hope-u"
},
{
"path": "apps/docs/src/components/ContextualNav.tsx",
"chars": 1411,
"preview": "import { Anchor, Box, Heading, HTMLHopeProps, VStack } from \"@hope-ui/solid\";\nimport { useLocation } from \"solid-app-rou"
},
{
"path": "apps/docs/src/components/Footer.tsx",
"chars": 674,
"preview": "import { Anchor, Center, HStack, Text } from \"@hope-ui/solid\";\n\nimport { IconGithub } from \"@/icons/IconGithub\";\nimport "
},
{
"path": "apps/docs/src/components/Header.tsx",
"chars": 3764,
"preview": "import {\n Box,\n Container,\n Drawer,\n DrawerBody,\n DrawerCloseButton,\n DrawerContent,\n DrawerHeader,\n DrawerOverl"
},
{
"path": "apps/docs/src/components/MainNavContent.tsx",
"chars": 6855,
"preview": "import { VStack } from \"@hope-ui/solid\";\n\nimport AppNavLink from \"./AppNavLink\";\nimport Code from \"./Code\";\nimport MainN"
},
{
"path": "apps/docs/src/components/MainNavSubtitle.tsx",
"chars": 331,
"preview": "import { ElementType, Text, TextProps } from \"@hope-ui/solid\";\n\nexport default function MainNavSubtitle<C extends Elemen"
},
{
"path": "apps/docs/src/components/MainNavTitle.tsx",
"chars": 255,
"preview": "import { ElementType, Text, TextProps } from \"@hope-ui/solid\";\n\nexport default function MainNavTitle<C extends ElementTy"
},
{
"path": "apps/docs/src/components/MainNavigation.tsx",
"chars": 497,
"preview": "import { Flex } from \"@hope-ui/solid\";\n\nimport MainNavContent from \"./MainNavContent\";\n\nexport default function MainNavi"
},
{
"path": "apps/docs/src/components/PageLayout.tsx",
"chars": 3179,
"preview": "import { Box, Flex, HStack, HTMLHopeProps, Stack, Text, VStack } from \"@hope-ui/solid\";\nimport { Link } from \"solid-app-"
},
{
"path": "apps/docs/src/components/PageTitle.tsx",
"chars": 203,
"preview": "import { Heading, HTMLHopeProps } from \"@hope-ui/solid\";\n\nexport default function PageTitle(props: HTMLHopeProps<\"h1\">) "
},
{
"path": "apps/docs/src/components/Preview.tsx",
"chars": 692,
"preview": "import { Box } from \"@hope-ui/solid\";\nimport { Show, splitProps } from \"solid-js\";\n\nimport CodeSnippet, { CodeSnippetPro"
},
{
"path": "apps/docs/src/components/PropsTable.tsx",
"chars": 3322,
"preview": "import { Table, TableProps, Tag, Tbody, Td, Th, Thead, Tr, VStack } from \"@hope-ui/solid\";\nimport { For, Show, splitProp"
},
{
"path": "apps/docs/src/components/SectionSubtitle.tsx",
"chars": 189,
"preview": "import { Heading, HTMLHopeProps } from \"@hope-ui/solid\";\n\nexport default function SectionSubtitle(props: HTMLHopeProps<\""
},
{
"path": "apps/docs/src/components/SectionTitle.tsx",
"chars": 187,
"preview": "import { Heading, HTMLHopeProps } from \"@hope-ui/solid\";\n\nexport default function SectionTitle(props: HTMLHopeProps<\"h2\""
},
{
"path": "apps/docs/src/components/StylePropsTable.tsx",
"chars": 1175,
"preview": "import { hope, Table, TableProps, Tbody, Td, Th, Thead, Tr } from \"@hope-ui/solid\";\nimport { For, splitProps } from \"sol"
},
{
"path": "apps/docs/src/icons/IconAccessibility.tsx",
"chars": 1714,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconAccessibility = createIcon({\n viewBox: \"0 0 15 15\",\n pa"
},
{
"path": "apps/docs/src/icons/IconArrowLeft.tsx",
"chars": 627,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconArrowLeft = createIcon({\n viewBox: \"0 0 15 15\",\n path: "
},
{
"path": "apps/docs/src/icons/IconArrowRight.tsx",
"chars": 623,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconArrowRight = createIcon({\n viewBox: \"0 0 15 15\",\n path:"
},
{
"path": "apps/docs/src/icons/IconCaretDown.tsx",
"chars": 610,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconCaretDown = createIcon({\n viewBox: \"0 0 15 15\",\n path: "
},
{
"path": "apps/docs/src/icons/IconCheck.tsx",
"chars": 604,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconCheck = createIcon({\n viewBox: \"0 0 15 15\",\n path: () ="
},
{
"path": "apps/docs/src/icons/IconChevronRight.tsx",
"chars": 559,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconChevronRight = createIcon({\n viewBox: \"0 0 15 15\",\n pat"
},
{
"path": "apps/docs/src/icons/IconCircleDashed.tsx",
"chars": 517,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\n// tabler-circle-dashed\nexport const IconCircleDashed = createIcon({\n pat"
},
{
"path": "apps/docs/src/icons/IconCode.tsx",
"chars": 1108,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconCode = createIcon({\n viewBox: \"0 0 15 15\",\n path: () =>"
},
{
"path": "apps/docs/src/icons/IconComponent.tsx",
"chars": 1658,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconComponent = createIcon({\n viewBox: \"0 0 15 15\",\n path: "
},
{
"path": "apps/docs/src/icons/IconEdit.tsx",
"chars": 2182,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconEdit = createIcon({\n viewBox: \"0 0 15 15\",\n path: () =>"
},
{
"path": "apps/docs/src/icons/IconEmail.tsx",
"chars": 596,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconEmail = createIcon({\n viewBox: \"0 0 15 15\",\n path: () ="
},
{
"path": "apps/docs/src/icons/IconExternalLink.tsx",
"chars": 931,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconExternalLink = createIcon({\n viewBox: \"0 0 15 15\",\n pat"
},
{
"path": "apps/docs/src/icons/IconGear.tsx",
"chars": 2893,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconGear = createIcon({\n viewBox: \"0 0 15 15\",\n path: () =>"
},
{
"path": "apps/docs/src/icons/IconGithub.tsx",
"chars": 1418,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconGithub = createIcon({\n viewBox: \"0 0 15 15\",\n path: () "
},
{
"path": "apps/docs/src/icons/IconHamburgerMenu.tsx",
"chars": 628,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconHamburgerMenu = createIcon({\n viewBox: \"0 0 15 15\",\n pa"
},
{
"path": "apps/docs/src/icons/IconMenu.tsx",
"chars": 619,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconMenu = createIcon({\n viewBox: \"0 0 15 15\",\n path: () =>"
},
{
"path": "apps/docs/src/icons/IconMinus.tsx",
"chars": 388,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconMinus = createIcon({\n viewBox: \"0 0 15 15\",\n path: () ="
},
{
"path": "apps/docs/src/icons/IconMoon.tsx",
"chars": 1373,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconMoon = createIcon({\n viewBox: \"0 0 15 15\",\n path: () =>"
},
{
"path": "apps/docs/src/icons/IconPalette.tsx",
"chars": 612,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconPalette = createIcon({\n viewBox: \"0 0 24 24\",\n path: ()"
},
{
"path": "apps/docs/src/icons/IconPhone.tsx",
"chars": 404,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconPhone = createIcon({\n viewBox: \"0 0 20 20\",\n path: () ="
},
{
"path": "apps/docs/src/icons/IconPlus.tsx",
"chars": 583,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconPlus = createIcon({\n viewBox: \"0 0 15 15\",\n path: () =>"
},
{
"path": "apps/docs/src/icons/IconQuestionMark.tsx",
"chars": 1114,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconQuestionMark = createIcon({\n viewBox: \"0 0 15 15\",\n pat"
},
{
"path": "apps/docs/src/icons/IconRepeat.tsx",
"chars": 1712,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconRepeat = createIcon({\n viewBox: \"0 0 15 15\",\n path: () "
},
{
"path": "apps/docs/src/icons/IconRocket.tsx",
"chars": 2823,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconRocket = createIcon({\n viewBox: \"0 0 15 15\",\n path: () "
},
{
"path": "apps/docs/src/icons/IconSearch.tsx",
"chars": 645,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconSearch = createIcon({\n viewBox: \"0 0 15 15\",\n path: () "
},
{
"path": "apps/docs/src/icons/IconStar.tsx",
"chars": 840,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconStar = createIcon({\n viewBox: \"0 0 15 15\",\n path: () =>"
},
{
"path": "apps/docs/src/icons/IconSun.tsx",
"chars": 1957,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconSun = createIcon({\n viewBox: \"0 0 15 15\",\n path: () => "
},
{
"path": "apps/docs/src/icons/IconTwitter.tsx",
"chars": 2506,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconTwitter = createIcon({\n viewBox: \"0 0 15 15\",\n path: ()"
},
{
"path": "apps/docs/src/icons/IconUser.tsx",
"chars": 1136,
"preview": "import { createIcon } from \"@hope-ui/solid\";\n\nexport const IconUser = createIcon({\n viewBox: \"0 0 15 15\",\n path: () =>"
},
{
"path": "apps/docs/src/index.css",
"chars": 1382,
"preview": "@import \"prism-themes/themes/prism-night-owl.min.css\";\n\nhtml {\n scroll-padding-top: 112px;\n}\n\n#root {\n min-height: 100"
},
{
"path": "apps/docs/src/index.tsx",
"chars": 903,
"preview": "import \"./index.css\";\n\nimport { HopeProvider, HopeThemeConfig, NotificationsProvider } from \"@hope-ui/solid\";\nimport Pri"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/accordion/index.tsx",
"chars": 15908,
"preview": "import {\n Accordion,\n AccordionButton,\n AccordionIcon,\n AccordionItem,\n AccordionPanel,\n Alert,\n AlertDescription"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/accordion/snippets.ts",
"chars": 5604,
"preview": "const importComponent = `import { \n Accordion,\n AccordionItem,\n AccordionButton,\n AccordionIcon,\n AccordionPanel,\n}"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/avatar/index.tsx",
"chars": 12319,
"preview": "import {\n Alert,\n AlertDescription,\n Avatar,\n AvatarBadge,\n AvatarExcess,\n AvatarGroup,\n hope,\n HStack,\n ListIt"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/avatar/snippets.ts",
"chars": 2660,
"preview": "const importComponent = `import { \n Avatar, \n AvatarBadge, \n AvatarGroup,\n AvatarExcess\n} from \"@hope-ui/solid\"`;\n\nc"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/badge/index.tsx",
"chars": 4077,
"preview": "import { Badge, HStack, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-js\";\n\n"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/badge/snippets.ts",
"chars": 913,
"preview": "const importComponent = `import { Badge } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Badge>Badge</Badge>`;\n\nconst col"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/icon/index.tsx",
"chars": 7914,
"preview": "import { Anchor, createIcon, hope, HStack, Icon, IconProps, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\ni"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/icon/snippets.ts",
"chars": 1749,
"preview": "const importComponent = `import { Icon } from \"@hope-ui/solid\"`;\n\nconst usingThirdPartyIconLibrary = `// 1. Import\nimpor"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/image/index.tsx",
"chars": 6718,
"preview": "import { hope, HStack, Image, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/image/snippets.ts",
"chars": 973,
"preview": "const importComponent = `import { Image } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Image \n boxSize=\"$sm\" \n src=\"h"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/kbd/index.tsx",
"chars": 3415,
"preview": "import { Kbd, ListItem, Text, UnorderedList } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } fro"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/kbd/snippets.ts",
"chars": 472,
"preview": "const importComponent = `import { Kbd } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<span>\n <Kbd>shift</Kbd> + <Kbd>H<"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/list/index.tsx",
"chars": 5771,
"preview": "import { Anchor, List, ListIcon, ListItem, OrderedList, Text, UnorderedList } from \"@hope-ui/solid\";\nimport Prism from \""
},
{
"path": "apps/docs/src/pages/component-docs/data-display/list/snippets.ts",
"chars": 1702,
"preview": "const importComponent = `import { \n List,\n ListItem,\n ListIcon,\n OrderedList,\n UnorderedList,\n} from \"@hope-ui/soli"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/table/index.tsx",
"chars": 8678,
"preview": "import { Table, TableCaption, Tbody, Td, Text, Tfoot, Th, Thead, Tr } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\""
},
{
"path": "apps/docs/src/pages/component-docs/data-display/table/snippets.ts",
"chars": 3451,
"preview": "const importComponent = `import { \n Table,\n TableCaption,\n Thead,\n Tbody,\n Tfoot,\n Tr,\n Th,\n Td\n} from \"@hope-ui"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/tag/index.tsx",
"chars": 8858,
"preview": "import {\n hope,\n HStack,\n Tag,\n TagCloseButton,\n TagLabel,\n TagLeftIcon,\n TagProps,\n TagRightIcon,\n Text,\n VSt"
},
{
"path": "apps/docs/src/pages/component-docs/data-display/tag/snippets.ts",
"chars": 2318,
"preview": "const importComponent = `import {\n Tag,\n TagCloseButton,\n TagLabel,\n TagLeftIcon,\n TagRightIcon,\n} from \"@hope-ui/s"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/checkbox/index.tsx",
"chars": 19899,
"preview": "import {\n Center,\n Checkbox,\n CheckboxGroup,\n CheckboxPrimitive,\n CheckboxPrimitiveIndicator,\n css,\n HStack,\n Li"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/checkbox/snippets.ts",
"chars": 6007,
"preview": "const importComponent = `import { \n CheckboxPrimitive,\n CheckboxPrimitiveIndicator,\n Checkbox, \n CheckboxGroup\n} fro"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/form-control/felte-example.tsx",
"chars": 2946,
"preview": "import { createForm } from \"@felte/solid\";\nimport { validator } from \"@felte/validator-yup\";\nimport {\n Button,\n Checkb"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/form-control/index.tsx",
"chars": 11850,
"preview": "import {\n Alert,\n AlertDescription,\n Anchor,\n FormControl,\n FormErrorMessage,\n FormHelperText,\n FormLabel,\n HSta"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/form-control/snippets.ts",
"chars": 6027,
"preview": "const importComponent = `import { \n FormControl,\n FormLabel,\n FormErrorMessage,\n FormHelperText,\n} from \"@hope-ui/so"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/input/index.tsx",
"chars": 9564,
"preview": "import {\n Input,\n InputGroup,\n InputLeftAddon,\n InputLeftElement,\n InputRightAddon,\n InputRightElement,\n Text,\n "
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/input/snippets.ts",
"chars": 2910,
"preview": "const importComponent = `import { \n Input,\n InputGroup,\n InputLeftAddon,\n InputLeftElement,\n InputRightAddon,\n Inp"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/radio/index.tsx",
"chars": 12843,
"preview": "import { HStack, ListItem, Radio, RadioGroup, Text, UnorderedList } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\n"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/radio/snippets.ts",
"chars": 2353,
"preview": "const importComponent = `import { Radio, RadioGroup } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<RadioGroup defaultVa"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/select/index.tsx",
"chars": 33885,
"preview": "import {\n Alert,\n AlertDescription,\n Anchor,\n Box,\n Divider,\n hope,\n Kbd,\n ListItem,\n Select,\n SelectContent,\n"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/select/snippets.ts",
"chars": 12170,
"preview": "const importComponent = `import { \n Select,\n SelectTrigger,\n SelectPlaceholder,\n SelectValue,\n SelectTag,\n SelectT"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/switch/index.tsx",
"chars": 12762,
"preview": "import {\n Anchor,\n Box,\n css,\n HStack,\n ListItem,\n Switch,\n SwitchPrimitive,\n SwitchPrimitiveThumb,\n Text,\n Un"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/switch/snippets.ts",
"chars": 3490,
"preview": "const importComponent = `import { \n SwitchPrimitive,\n SwitchPrimitiveThumb,\n Switch \n} from \"@hope-ui/solid\"`;\n\nconst"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/textarea/index.tsx",
"chars": 5903,
"preview": "import { Text, Textarea, VStack } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { createSignal, onMount } f"
},
{
"path": "apps/docs/src/pages/component-docs/data-entry/textarea/snippets.ts",
"chars": 1543,
"preview": "const importComponent = `import { Textarea } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Textarea placeholder=\"Basic u"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/alert/index.tsx",
"chars": 8727,
"preview": "import {\n Alert,\n AlertDescription,\n AlertIcon,\n AlertTitle,\n Box,\n CloseButton,\n ListItem,\n Text,\n UnorderedLi"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/alert/snippets.ts",
"chars": 2800,
"preview": "const importComponent = `import { \n Alert,\n AlertDescription,\n AlertIcon,\n AlertTitle,\n} from \"@hope-ui/solid\"`;\n\nco"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/circular-progress/index.tsx",
"chars": 9065,
"preview": "import {\n CircularProgress,\n CircularProgressIndicator,\n CircularProgressLabel,\n ListItem,\n Text,\n UnorderedList,\n"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/circular-progress/snippets.ts",
"chars": 1522,
"preview": "const importComponent = `import { \n CircularProgress, \n CircularProgressIndicator,\n CircularProgressLabel \n} from \"@h"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/notification/index.tsx",
"chars": 18639,
"preview": "import {\n Avatar,\n Button,\n HStack,\n ListItem,\n NotificationProps,\n notificationService,\n Text,\n UnorderedList,\n"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/notification/snippets.ts",
"chars": 5526,
"preview": "const importComponent = `import { \n NotificationsProvider, \n Notification,\n NotificationIcon,\n NotificationTitle,\n "
},
{
"path": "apps/docs/src/pages/component-docs/feedback/progress/index.tsx",
"chars": 9116,
"preview": "import {\n ListItem,\n Progress,\n ProgressIndicator,\n ProgressLabel,\n Text,\n UnorderedList,\n VStack,\n} from \"@hope-"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/progress/snippets.ts",
"chars": 1576,
"preview": "const importComponent = `import { Progress, ProgressIndicator, ProgressLabel } from \"@hope-ui/solid\"`;\n\nconst basicUsage"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/skeleton/index.tsx",
"chars": 6416,
"preview": "import {\n Box,\n ListItem,\n Skeleton,\n SkeletonCircle,\n SkeletonText,\n Text,\n UnorderedList,\n VStack,\n} from \"@ho"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/skeleton/snippets.ts",
"chars": 861,
"preview": "const importComponent = `import { Skeleton, SkeletonCircle, SkeletonText } from \"@hope-ui/solid\"`;\n\nconst basicUsageStan"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/spinner/index.tsx",
"chars": 4605,
"preview": "import { HStack, Spinner, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-js\";"
},
{
"path": "apps/docs/src/pages/component-docs/feedback/spinner/snippets.ts",
"chars": 739,
"preview": "const importComponent = `import { Spinner } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Spinner />`;\n\nconst color = `<"
},
{
"path": "apps/docs/src/pages/component-docs/general/button/index.tsx",
"chars": 14611,
"preview": "import {\n Alert,\n AlertDescription,\n Anchor,\n Button,\n ButtonGroup,\n hope,\n HStack,\n IconButton,\n ListItem,\n T"
},
{
"path": "apps/docs/src/pages/component-docs/general/button/snippets.ts",
"chars": 3274,
"preview": "const importComponent = `import { Button } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Button>Button</Button>`;\n\nconst"
},
{
"path": "apps/docs/src/pages/component-docs/general/icon-button/index.tsx",
"chars": 8658,
"preview": "import { hope, HStack, IconButton, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"s"
},
{
"path": "apps/docs/src/pages/component-docs/general/icon-button/snippets.ts",
"chars": 2666,
"preview": "const importComponent = `import { IconButton } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<IconButton aria-label=\"Sear"
},
{
"path": "apps/docs/src/pages/component-docs/layout/aspect-ratio/index.tsx",
"chars": 4290,
"preview": "import { Anchor, AspectRatio, hope, Image, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount }"
},
{
"path": "apps/docs/src/pages/component-docs/layout/aspect-ratio/snippets.ts",
"chars": 967,
"preview": "const importComponent = `import { AspectRatio } from \"@hope-ui/solid\"`;\n\nconst embedVideo = `// This video will have equ"
},
{
"path": "apps/docs/src/pages/component-docs/layout/box/index.tsx",
"chars": 4619,
"preview": "import { Badge, Box, hope, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { For, onMount } from \"soli"
},
{
"path": "apps/docs/src/pages/component-docs/layout/box/snippets.ts",
"chars": 2102,
"preview": "const importComponent = `import { Box } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Box bg=\"tomato\" w=\"100%\" p=\"$4\" co"
},
{
"path": "apps/docs/src/pages/component-docs/layout/center/index.tsx",
"chars": 2599,
"preview": "import { Anchor, AspectRatio, Box, Center, hope, HStack, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimpo"
},
{
"path": "apps/docs/src/pages/component-docs/layout/center/snippets.ts",
"chars": 521,
"preview": "const importComponent = `import { Center } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Center bg=\"tomato\" h=\"100px\" co"
},
{
"path": "apps/docs/src/pages/component-docs/layout/container/index.tsx",
"chars": 4952,
"preview": "import { Alert, AlertDescription, Box, Container, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { on"
},
{
"path": "apps/docs/src/pages/component-docs/layout/container/snippets.ts",
"chars": 1009,
"preview": "const importComponent = `import { Container } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Container>\n There are many "
},
{
"path": "apps/docs/src/pages/component-docs/layout/divider/index.tsx",
"chars": 4049,
"preview": "import { Center, Divider, Text, VStack } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"so"
},
{
"path": "apps/docs/src/pages/component-docs/layout/divider/snippets.ts",
"chars": 563,
"preview": "const importComponent = `import { Divider } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Divider />`;\n\nconst horizontal"
},
{
"path": "apps/docs/src/pages/component-docs/layout/flex/index.tsx",
"chars": 6778,
"preview": "import {\n Anchor,\n Box,\n Button,\n Center,\n Flex,\n Grid,\n Heading,\n hope,\n HStack,\n Spacer,\n Text,\n} from \"@ho"
},
{
"path": "apps/docs/src/pages/component-docs/layout/flex/snippets.ts",
"chars": 1616,
"preview": "const importComponent = `import { Flex, Spacer } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Flex color=\"white\">\n <Ce"
},
{
"path": "apps/docs/src/pages/component-docs/layout/grid/index.tsx",
"chars": 7211,
"preview": "import { Anchor, Grid, GridItem, hope, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { Link } from \""
},
{
"path": "apps/docs/src/pages/component-docs/layout/grid/snippets.ts",
"chars": 1009,
"preview": "const importComponent = `import { Grid, GridItem } from \"@hope-ui/solid\"`;\n\nconst templateColumns = `<Grid templateColum"
},
{
"path": "apps/docs/src/pages/component-docs/layout/simple-grid/index.tsx",
"chars": 5621,
"preview": "import { Alert, AlertDescription, Box, SimpleGrid, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { o"
},
{
"path": "apps/docs/src/pages/component-docs/layout/simple-grid/snippets.ts",
"chars": 1379,
"preview": "const importComponent = `import { SimpleGrid } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<SimpleGrid columns={2} gap="
},
{
"path": "apps/docs/src/pages/component-docs/layout/stack/index.tsx",
"chars": 5313,
"preview": "import { Alert, AlertDescription, Anchor, Box, hope, HStack, Stack, Text } from \"@hope-ui/solid\";\nimport Prism from \"pri"
},
{
"path": "apps/docs/src/pages/component-docs/layout/stack/snippets.ts",
"chars": 660,
"preview": "const importComponent = `import { Stack, HStack, VStack } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<HStack spacing=\""
},
{
"path": "apps/docs/src/pages/component-docs/navigation/anchor/index.tsx",
"chars": 3922,
"preview": "import { Anchor, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-js\";\n\nimport "
},
{
"path": "apps/docs/src/pages/component-docs/navigation/anchor/snippets.ts",
"chars": 927,
"preview": "const importComponent = `import { Anchor } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Anchor>Hope UI</Anchor>`;\n\ncons"
},
{
"path": "apps/docs/src/pages/component-docs/navigation/breadcrumb/index.tsx",
"chars": 11817,
"preview": "import {\n Anchor,\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbSeparator,\n ListItem,\n Text,\n Unorde"
},
{
"path": "apps/docs/src/pages/component-docs/navigation/breadcrumb/snippets.ts",
"chars": 3696,
"preview": "const importComponent = `import { \n Breadcrumb, \n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbSeparator\n} from \"@hop"
},
{
"path": "apps/docs/src/pages/component-docs/navigation/tabs/index.tsx",
"chars": 18044,
"preview": "import {\n Anchor,\n Input,\n Kbd,\n ListItem,\n Tab,\n TabList,\n TabPanel,\n Tabs,\n TabsProps,\n Text,\n UnorderedLis"
},
{
"path": "apps/docs/src/pages/component-docs/navigation/tabs/snippets.ts",
"chars": 4869,
"preview": "const importComponent = `import { \n Tabs, \n TabList, \n Tab,\n TabPanel\n} from \"@hope-ui/solid\"`;\n\nconst basicUsage = "
},
{
"path": "apps/docs/src/pages/component-docs/others/close-button/index.tsx",
"chars": 3128,
"preview": "import { CloseButton, HStack, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-"
},
{
"path": "apps/docs/src/pages/component-docs/others/close-button/snippets.ts",
"chars": 535,
"preview": "const importComponent = `import { CloseButton } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<CloseButton />`;\n\nconst cl"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/drawer/index.tsx",
"chars": 12795,
"preview": "import {\n Alert,\n AlertDescription,\n Anchor,\n Button,\n createDisclosure,\n Drawer,\n DrawerBody,\n DrawerCloseButto"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/drawer/snippets.ts",
"chars": 5560,
"preview": "const importComponent = `import { \n Drawer,\n DrawerBody,\n DrawerCloseButton,\n DrawerContent,\n DrawerFooter,\n Drawe"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/menu/index.tsx",
"chars": 19812,
"preview": "import {\n Alert,\n AlertDescription,\n Anchor,\n Button,\n Divider,\n IconButton,\n Kbd,\n ListItem,\n Menu,\n MenuCont"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/menu/snippets.ts",
"chars": 4238,
"preview": "const importComponent = `import { \n Menu,\n MenuTrigger,\n MenuContent,\n MenuGroup,\n MenuLabel,\n MenuItem\n} from \"@h"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/modal/index.tsx",
"chars": 27329,
"preview": "import {\n Alert,\n AlertDescription,\n Anchor,\n Button,\n createDisclosure,\n FormControl,\n FormLabel,\n HStack,\n In"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/modal/snippets.ts",
"chars": 8482,
"preview": "const importComponent = `import { \n Modal,\n ModalBody,\n ModalCloseButton,\n ModalContent,\n ModalFooter,\n ModalHeade"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/popover/index.tsx",
"chars": 22201,
"preview": "import {\n Alert,\n AlertDescription,\n AlertTitle,\n Anchor,\n Box,\n Button,\n ButtonGroup,\n createDisclosure,\n HSta"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/popover/snippets.ts",
"chars": 6194,
"preview": "const importComponent = `import {\n Popover,\n PopoverTrigger,\n PopoverAnchor,\n PopoverContent,\n PopoverArrow,\n Popo"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/tooltip/index.tsx",
"chars": 10377,
"preview": "import { Anchor, Button, Flex, HStack, Text, Tooltip, VStack } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimpor"
},
{
"path": "apps/docs/src/pages/component-docs/overlay/tooltip/snippets.ts",
"chars": 2992,
"preview": "const importComponent = `import { Tooltip } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Tooltip label=\"Hey, I'm here!\""
},
{
"path": "apps/docs/src/pages/component-docs/typography/heading/index.tsx",
"chars": 6845,
"preview": "import { Alert, AlertDescription, Anchor, Heading, Text, VStack } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nim"
},
{
"path": "apps/docs/src/pages/component-docs/typography/heading/snippets.ts",
"chars": 1965,
"preview": "const importComponent = `import { Heading } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Heading>I'm a Heading</Heading"
},
{
"path": "apps/docs/src/pages/component-docs/typography/text/index.tsx",
"chars": 6249,
"preview": "import { Text, VStack } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-js\";\n\nimport "
},
{
"path": "apps/docs/src/pages/component-docs/typography/text/snippets.ts",
"chars": 1968,
"preview": "const importComponent = `import { Text } from \"@hope-ui/solid\"`;\n\nconst basicUsage = `<Text>I'm a Text</Text>`;\n\nconst s"
},
{
"path": "apps/docs/src/pages/features/create-styles/index.tsx",
"chars": 2402,
"preview": "import { Anchor, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-js\";\n\nimport "
},
{
"path": "apps/docs/src/pages/features/create-styles/snippets.ts",
"chars": 475,
"preview": "const importCssFunction = `import { css } from \"@hope-ui/solid\"`;\n\nconst usingCssFunction = `import { css } from \"@hope-"
},
{
"path": "apps/docs/src/pages/features/css-prop/index.tsx",
"chars": 5847,
"preview": "import { Anchor, Box, Heading, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { Link } from \"solid-ap"
},
{
"path": "apps/docs/src/pages/features/css-prop/snippets.ts",
"chars": 1601,
"preview": "const defineStandardCSSProperty = `<Box \n as=\"img\"\n src='http://placekitten.com/200/300'\n alt='a kitten'\n css={{ fil"
},
{
"path": "apps/docs/src/pages/features/global-styles/index.tsx",
"chars": 2068,
"preview": "import { Anchor, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-js\";\n\nimport "
},
{
"path": "apps/docs/src/pages/features/global-styles/snippets.ts",
"chars": 382,
"preview": "const importGlobalCssFunction = `import { globalCss } from \"@hope-ui/solid\"`;\n\nconst usingGlobalCssFunction = `import { "
},
{
"path": "apps/docs/src/pages/features/hope-factory/index.tsx",
"chars": 4687,
"preview": "import { Alert, AlertDescription, Anchor, hope, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { Link"
},
{
"path": "apps/docs/src/pages/features/hope-factory/snippets.ts",
"chars": 885,
"preview": "const importHopeFactory = `import { hope } from \"@hope-ui/solid\"`;\n\nconst hopeJsxElements = `<hope.button \n px=\"$3\" \n "
},
{
"path": "apps/docs/src/pages/features/responsive-styles/index.tsx",
"chars": 6881,
"preview": "import {\n Alert,\n AlertDescription,\n Anchor,\n Box,\n hope,\n Image,\n Table,\n Tbody,\n Td,\n Text,\n Th,\n Thead,\n "
},
{
"path": "apps/docs/src/pages/features/responsive-styles/snippets.ts",
"chars": 1928,
"preview": "const initialBox = `<Box bg=\"$primary9\" w=\"400px\">\n This is a box\n</Box>`;\n\nconst boxWithResponsiveWidth = `<Box bg=\"$p"
},
{
"path": "apps/docs/src/pages/features/style-props/index.tsx",
"chars": 21503,
"preview": "import { Alert, AlertDescription, Button, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { Link } fro"
},
{
"path": "apps/docs/src/pages/features/style-props/snippets.ts",
"chars": 3633,
"preview": "const asPropWithHTMLElement = `<Button as=\"a\" target=\"_blank\" href=\"https://solidjs.com\">\n Go to SolidJS website\n</Butt"
},
{
"path": "apps/docs/src/pages/getting-started/changelog/index.tsx",
"chars": 982,
"preview": "import { Anchor, Text } from \"@hope-ui/solid\";\n\nimport { ContextualNavLink } from \"@/components/ContextualNav\";\nimport P"
},
{
"path": "apps/docs/src/pages/getting-started/installation/index.tsx",
"chars": 2540,
"preview": "import { Alert, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-js\";\n\nimport C"
},
{
"path": "apps/docs/src/pages/getting-started/installation/snippets.ts",
"chars": 1060,
"preview": "const npmInstall = \"npm install @hope-ui/solid @stitches/core solid-transition-group\";\nconst yarnAdd = \"yarn add @hope-u"
},
{
"path": "apps/docs/src/pages/landing-page.tsx",
"chars": 9989,
"preview": "import {\n Anchor,\n Box,\n Button,\n Center,\n Container,\n GridItem,\n Heading,\n HStack,\n HTMLHopeProps,\n SimpleGri"
},
{
"path": "apps/docs/src/pages/not-found.tsx",
"chars": 1524,
"preview": "import { Button, Center, Divider, Flex, Stack, Text, VStack } from \"@hope-ui/solid\";\nimport { Link } from \"solid-app-rou"
},
{
"path": "apps/docs/src/pages/theming/color-mode/index.tsx",
"chars": 4973,
"preview": "import {\n Alert,\n AlertDescription,\n Box,\n Button,\n Text,\n useColorMode,\n useColorModeValue,\n} from \"@hope-ui/sol"
},
{
"path": "apps/docs/src/pages/theming/color-mode/snippets.ts",
"chars": 1193,
"preview": "const initialColorMode = `import { HopeThemeConfig, HopeProvider } from \"@hope-ui/solid\"\n\n// 1. Create a theme config\nco"
},
{
"path": "apps/docs/src/pages/theming/css-variables/index.tsx",
"chars": 1470,
"preview": "import { Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } from \"solid-js\";\n\nimport Code fro"
},
{
"path": "apps/docs/src/pages/theming/css-variables/snippets.ts",
"chars": 146,
"preview": "const cssVariables = `/* index.css */\n\n#root {\n background-color: var(--hope-colors-neutral1);\n}`;\n\nexport const snippe"
},
{
"path": "apps/docs/src/pages/theming/customize-theme/index.tsx",
"chars": 4731,
"preview": "import { Alert, AlertDescription, hope, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMount } fr"
},
{
"path": "apps/docs/src/pages/theming/customize-theme/snippets.ts",
"chars": 2276,
"preview": "const overrideThemeColors = `// 1. Import the \\`HopeThemeConfig\\` type\nimport { HopeThemeConfig, HopeProvider } from \"@h"
},
{
"path": "apps/docs/src/pages/theming/default-theme/index.tsx",
"chars": 13531,
"preview": "import { Alert, AlertDescription, Anchor, hope, Text } from \"@hope-ui/solid\";\nimport Prism from \"prismjs\";\nimport { onMo"
},
{
"path": "apps/docs/src/pages/theming/default-theme/snippets.ts",
"chars": 4393,
"preview": "const usage = `<Box bg=\"$primary9\" w=\"$40\" p=\"$4\" color=\"$whiteAlpha12\">\n This is the Box\n</Box>`;\n\nconst colors = `// "
},
{
"path": "apps/docs/tsconfig.json",
"chars": 215,
"preview": "{\n \"extends\": \"../../tsconfig.json\",\n \"compilerOptions\": {\n \"outDir\": \"dist\",\n \"baseUrl\": \".\",\n \"rootDir\": \"."
},
{
"path": "apps/docs/vite.config.ts",
"chars": 558,
"preview": "import { fileURLToPath } from \"url\";\nimport { defineConfig } from \"vite\";\nimport prismjs from \"vite-plugin-prismjs\";\nimp"
},
{
"path": "commitlint.config.js",
"chars": 70,
"preview": "module.exports = {\n extends: [\"@commitlint/config-conventional\"],\n};\n"
},
{
"path": "jest.config.js",
"chars": 669,
"preview": "const pkgRootPath = `<rootDir>`;\nconst solidjsPath = `${pkgRootPath}/../../node_modules/solid-js`;\n\nmodule.exports = {\n "
},
{
"path": "jest.setup.ts",
"chars": 243,
"preview": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).to"
},
{
"path": "netlify.toml",
"chars": 64,
"preview": "[[redirects]]\n from = \"/*\"\n to = \"/index.html\"\n status = 200\n"
},
{
"path": "package.json",
"chars": 3485,
"preview": "{\n \"name\": \"hope-ui-monorepo\",\n \"private\": true,\n \"description\": \"The SolidJS component library you've hoped for.\",\n "
},
{
"path": "packages/solid/.browserslistrc",
"chars": 35,
"preview": "defaults\nnot IE 11\nnot op_mini all\n"
},
{
"path": "packages/solid/.storybook/main.js",
"chars": 618,
"preview": "const path = require(\"path\");\n\nmodule.exports = {\n stories: [\"../src/**/*.stories.mdx\", \"../src/**/*.stories.@(js|jsx|t"
},
{
"path": "packages/solid/.storybook/preview.js",
"chars": 1028,
"preview": "import { themes } from \"@storybook/theming\";\n\nimport { render } from \"solid-js/web\";\n\nlet disposeStory;\n\n// SolidJS deco"
},
{
"path": "packages/solid/CHANGELOG.md",
"chars": 4372,
"preview": "## [0.6.3](https://github.com/fabien-ml/hope-ui/compare/v0.6.2...v0.6.3) (2022-08-01)\n\n### 🐛 Bug fixes\n\n- Added `imagePr"
},
{
"path": "packages/solid/README.md",
"chars": 535,
"preview": "# @hope-ui/solid\n\nA composable and accessible component library that gives you the foundation to build your next SolidJS"
},
{
"path": "packages/solid/dev/index.html",
"chars": 414,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "packages/solid/dev/index.tsx",
"chars": 247,
"preview": "import { render } from \"solid-js/web\";\n\nimport { HopeProvider } from \"../src\";\n\nfunction App() {\n return <></>;\n}\n\nrend"
},
{
"path": "packages/solid/dev/vite.config.ts",
"chars": 69,
"preview": "import viteConfig from \"../vite.config\";\n\nexport default viteConfig;\n"
},
{
"path": "packages/solid/jest.config.js",
"chars": 85,
"preview": "const baseJest = require(\"../../jest.config\");\n\nmodule.exports = {\n ...baseJest,\n};\n"
}
]
// ... and 384 more files (download for full content)
About this extraction
This page contains the full source code of the fabien-ml/hope-ui GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 584 files (1.6 MB), approximately 451.4k tokens, and a symbol index with 860 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.