├── .browserslistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── feature-request.yml │ ├── konsta_react_issue.yml │ ├── konsta_svelte_issue.yml │ └── konsta_vue_issue.yml ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── issue-close-require.yml │ └── issue-labeled.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── BACKERS.md ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.react.js ├── babel.config.vue.js ├── kitchen-sink ├── react │ ├── components │ │ ├── App.jsx │ │ ├── DemoIcon.jsx │ │ └── Page.jsx │ ├── images │ │ └── demo-icon.png │ ├── index.html │ ├── index.js │ ├── pages │ │ ├── ActionSheet.jsx │ │ ├── Badge.jsx │ │ ├── Breadcrumbs.jsx │ │ ├── Buttons.jsx │ │ ├── Cards.jsx │ │ ├── Checkbox.jsx │ │ ├── Chips.jsx │ │ ├── ContactsList.jsx │ │ ├── ContentBlock.jsx │ │ ├── DataTable.jsx │ │ ├── Dialog.jsx │ │ ├── Fab.jsx │ │ ├── FormInputs.jsx │ │ ├── Home.jsx │ │ ├── List.jsx │ │ ├── ListButton.jsx │ │ ├── MenuList.jsx │ │ ├── Messages.jsx │ │ ├── Navbar.jsx │ │ ├── Notification.jsx │ │ ├── Popover.jsx │ │ ├── Popup.jsx │ │ ├── Preloader.jsx │ │ ├── Progressbar.jsx │ │ ├── Radio.jsx │ │ ├── RangeSlider.jsx │ │ ├── Searchbar.jsx │ │ ├── SegmentedControl.jsx │ │ ├── SheetModal.jsx │ │ ├── SidePanels.jsx │ │ ├── Stepper.jsx │ │ ├── Subnavbar.jsx │ │ ├── Tabbar.jsx │ │ ├── Toast.jsx │ │ ├── Toggle.jsx │ │ └── Toolbar.jsx │ ├── public │ │ ├── apple-touch-icon.png │ │ └── favicon.png │ ├── routes.js │ ├── styles │ │ └── index.css │ └── vite.config.js ├── svelte │ ├── components │ │ ├── App.svelte │ │ ├── DemoIcon.svelte │ │ ├── MdAdd.svelte │ │ ├── MdCameraAlt.svelte │ │ ├── MdEmail.svelte │ │ ├── MdFileUpload.svelte │ │ ├── MdOutlineCancel.svelte │ │ ├── MdPerson.svelte │ │ ├── MdSend.svelte │ │ ├── MdToday.svelte │ │ └── Page.svelte │ ├── images │ │ └── demo-icon.png │ ├── index.html │ ├── index.js │ ├── pages │ │ ├── ActionSheet.svelte │ │ ├── Badge.svelte │ │ ├── Breadcrumbs.svelte │ │ ├── Buttons.svelte │ │ ├── Cards.svelte │ │ ├── Checkbox.svelte │ │ ├── Chips.svelte │ │ ├── ContactsList.svelte │ │ ├── ContentBlock.svelte │ │ ├── DataTable.svelte │ │ ├── Dialog.svelte │ │ ├── Fab.svelte │ │ ├── FormInputs.svelte │ │ ├── Home.svelte │ │ ├── List.svelte │ │ ├── ListButton.svelte │ │ ├── MenuList.svelte │ │ ├── Messages.svelte │ │ ├── Navbar.svelte │ │ ├── Notification.svelte │ │ ├── Popover.svelte │ │ ├── Popup.svelte │ │ ├── Preloader.svelte │ │ ├── Progressbar.svelte │ │ ├── Radio.svelte │ │ ├── RangeSlider.svelte │ │ ├── Searchbar.svelte │ │ ├── SegmentedControl.svelte │ │ ├── SheetModal.svelte │ │ ├── SidePanels.svelte │ │ ├── Stepper.svelte │ │ ├── Subnavbar.svelte │ │ ├── Tabbar.svelte │ │ ├── Toast.svelte │ │ ├── Toggle.svelte │ │ └── Toolbar.svelte │ ├── routes.js │ ├── styles │ │ └── index.css │ └── vite.config.js └── vue │ ├── components │ ├── App.vue │ ├── DemoIcon.vue │ ├── MdAdd.vue │ ├── MdCameraAlt.vue │ ├── MdEmail.vue │ ├── MdFileUpload.vue │ ├── MdOutlineCancel.vue │ ├── MdPerson.vue │ ├── MdSend.vue │ └── MdToday.vue │ ├── images │ └── demo-icon.png │ ├── index.html │ ├── index.js │ ├── pages │ ├── ActionSheet.vue │ ├── Badge.vue │ ├── Breadcrumbs.vue │ ├── Buttons.vue │ ├── Cards.vue │ ├── Checkbox.vue │ ├── Chips.vue │ ├── ContactsList.vue │ ├── ContentBlock.vue │ ├── DataTable.vue │ ├── Dialog.vue │ ├── Fab.vue │ ├── FormInputs.vue │ ├── Home.vue │ ├── List.vue │ ├── ListButton.vue │ ├── MenuList.vue │ ├── Messages.vue │ ├── Navbar.vue │ ├── Notification.vue │ ├── Popover.vue │ ├── Popup.vue │ ├── Preloader.vue │ ├── Progressbar.vue │ ├── Radio.vue │ ├── RangeSlider.vue │ ├── Searchbar.vue │ ├── SegmentedControl.vue │ ├── SheetModal.vue │ ├── SidePanels.vue │ ├── Stepper.vue │ ├── Subnavbar.vue │ ├── Tabbar.vue │ ├── Toast.vue │ ├── Toggle.vue │ └── Toolbar.vue │ ├── public │ ├── apple-touch-icon.png │ └── favicon.png │ ├── routes.js │ ├── styles │ └── index.css │ └── vite.config.js ├── package-lock.json ├── package.json ├── package ├── README.md ├── package.json ├── react │ ├── package.json │ └── types │ │ └── .gitkeep ├── shared │ ├── .gitkeep │ └── package.json ├── svelte │ ├── package.json │ └── types │ │ └── .gitkeep └── vue │ ├── package.json │ └── types │ └── .gitkeep ├── postcss.config.js ├── scripts ├── banner.js ├── build-copy.js ├── build-md-colors.js ├── build-react-types.js ├── build-react.js ├── build-shared.js ├── build-sponsors.js ├── build-svelte-types.js ├── build-svelte.js ├── build-vue-types.js ├── build-vue.js ├── build.js ├── release.js └── transform-vue-component.js ├── src ├── config.js ├── config │ ├── config-extend.js │ ├── extend-theme.js │ ├── hex-to-rgb.js │ ├── ios-colors.js │ ├── md-colors.js │ ├── plugin-base.js │ ├── plugin-colors.js │ ├── plugin-hairlines.js │ ├── plugin-ios-material.js │ ├── plugin-line-clamp.js │ ├── plugin-no-scrollbar.js │ ├── plugin-preloader.js │ ├── plugin-range.js │ ├── plugin-safe-areas.js │ ├── plugin-touch-ripple.js │ ├── plugin-touch.js │ └── plugin-translucent.js ├── md-colors.js ├── package.json ├── react │ ├── components │ │ ├── Actions.jsx │ │ ├── ActionsButton.jsx │ │ ├── ActionsGroup.jsx │ │ ├── ActionsLabel.jsx │ │ ├── App.jsx │ │ ├── Badge.jsx │ │ ├── Block.jsx │ │ ├── BlockFooter.jsx │ │ ├── BlockHeader.jsx │ │ ├── BlockTitle.jsx │ │ ├── Breadcrumbs.jsx │ │ ├── BreadcrumbsCollapsed.jsx │ │ ├── BreadcrumbsItem.jsx │ │ ├── BreadcrumbsSeparator.jsx │ │ ├── Button.jsx │ │ ├── Card.jsx │ │ ├── Checkbox.jsx │ │ ├── Chip.jsx │ │ ├── Dialog.jsx │ │ ├── DialogButton.jsx │ │ ├── Fab.jsx │ │ ├── Icon.jsx │ │ ├── Link.jsx │ │ ├── List.jsx │ │ ├── ListButton.jsx │ │ ├── ListGroup.jsx │ │ ├── ListInput.jsx │ │ ├── ListItem.jsx │ │ ├── MenuList.jsx │ │ ├── MenuListItem.jsx │ │ ├── Message.jsx │ │ ├── Messagebar.jsx │ │ ├── Messages.jsx │ │ ├── MessagesTitle.jsx │ │ ├── Navbar.jsx │ │ ├── NavbarBackLink.jsx │ │ ├── Notification.jsx │ │ ├── Page.jsx │ │ ├── Panel.jsx │ │ ├── Popover.jsx │ │ ├── Popup.jsx │ │ ├── Preloader.jsx │ │ ├── Progressbar.jsx │ │ ├── Radio.jsx │ │ ├── Range.jsx │ │ ├── Searchbar.jsx │ │ ├── Segmented.jsx │ │ ├── SegmentedButton.jsx │ │ ├── Sheet.jsx │ │ ├── Stepper.jsx │ │ ├── Tabbar.jsx │ │ ├── TabbarLink.jsx │ │ ├── Table.jsx │ │ ├── TableBody.jsx │ │ ├── TableCell.jsx │ │ ├── TableHead.jsx │ │ ├── TableRow.jsx │ │ ├── Toast.jsx │ │ ├── Toggle.jsx │ │ ├── Toolbar.jsx │ │ └── icons │ │ │ ├── BackIcon.jsx │ │ │ ├── CheckboxIcon.jsx │ │ │ ├── ChevronIcon.jsx │ │ │ ├── DeleteIcon.jsx │ │ │ ├── DropdownIcon.jsx │ │ │ ├── PreloaderIOS.jsx │ │ │ ├── PreloaderMaterial.jsx │ │ │ └── SearchIcon.jsx │ ├── konsta-react.d.ts │ ├── konsta-react.js │ ├── package.json │ └── shared │ │ ├── KonstaContext.js │ │ ├── KonstaProvider.jsx │ │ ├── ListDividersContext.js │ │ ├── use-auto-theme.js │ │ ├── use-dark-classes.js │ │ ├── use-isomorphic-layout-effect.js │ │ ├── use-list-dividers.js │ │ ├── use-theme-classes.js │ │ ├── use-theme.js │ │ └── use-touch-ripple.js ├── shared │ ├── calc-popover-position.js │ ├── classes │ │ ├── ActionsButtonClasses.js │ │ ├── ActionsClasses.js │ │ ├── ActionsGroupClasses.js │ │ ├── ActionsLabelClasses.js │ │ ├── AppClasses.js │ │ ├── BadgeClasses.js │ │ ├── BlockClasses.js │ │ ├── BlockFooterClasses.js │ │ ├── BlockHeaderClasses.js │ │ ├── BlockTitleClasses.js │ │ ├── BreadcrumbsClasses.js │ │ ├── BreadcrumbsCollapsedClasses.js │ │ ├── BreadcrumbsItemClasses.js │ │ ├── BreadcrumbsSeparatorClasses.js │ │ ├── ButtonClasses.js │ │ ├── CardClasses.js │ │ ├── CheckboxClasses.js │ │ ├── ChipClasses.js │ │ ├── DialogButtonClasses.js │ │ ├── DialogClasses.js │ │ ├── FabClasses.js │ │ ├── IconClasses.js │ │ ├── LinkClasses.js │ │ ├── ListButtonClasses.js │ │ ├── ListClasses.js │ │ ├── ListInputClasses.js │ │ ├── ListItemClasses.js │ │ ├── MessageClasses.js │ │ ├── MessagebarClasses.js │ │ ├── MessagesClasses.js │ │ ├── MessagesTitleClasses.js │ │ ├── NavbarBackLinkClasses.js │ │ ├── NavbarClasses.js │ │ ├── NotificationsClasses.js │ │ ├── PageClasses.js │ │ ├── PanelClasses.js │ │ ├── PopoverClasses.js │ │ ├── PopupClasses.js │ │ ├── PreloaderClasses.js │ │ ├── ProgressbarClasses.js │ │ ├── RadioClasses.js │ │ ├── RangeClasses.js │ │ ├── SearchbarClasses.js │ │ ├── SegmentedClasses.js │ │ ├── SheetClasses.js │ │ ├── StepperClasses.js │ │ ├── TabbarLinkClasses.js │ │ ├── TableBodyClasses.js │ │ ├── TableCellClasses.js │ │ ├── TableClasses.js │ │ ├── TableHeadClasses.js │ │ ├── TableRowClasses.js │ │ ├── ToastClasses.js │ │ ├── ToggleClasses.js │ │ └── ToolbarClasses.js │ ├── cls.js │ ├── colors │ │ ├── ActionsButtonColors.js │ │ ├── ActionsColors.js │ │ ├── ActionsGroupColors.js │ │ ├── ActionsLabelColors.js │ │ ├── AppColors.js │ │ ├── BadgeColors.js │ │ ├── BlockColors.js │ │ ├── BlockFooterColors.js │ │ ├── BlockHeaderColors.js │ │ ├── BlockTitleColors.js │ │ ├── BreadcrumbsCollapsedColors.js │ │ ├── BreadcrumbsColors.js │ │ ├── BreadcrumbsItemColors.js │ │ ├── BreadcrumbsSeparatorColors.js │ │ ├── ButtonColors.js │ │ ├── CardColors.js │ │ ├── CheckboxColors.js │ │ ├── ChipColors.js │ │ ├── DialogButtonColors.js │ │ ├── DialogColors.js │ │ ├── FabColors.js │ │ ├── IconColors.js │ │ ├── LinkColors.js │ │ ├── ListButtonColors.js │ │ ├── ListColors.js │ │ ├── ListGroupColors.js │ │ ├── ListInputColors.js │ │ ├── ListItemColors.js │ │ ├── MenuListColors.js │ │ ├── MenuListItemColors.js │ │ ├── MessageColors.js │ │ ├── MessagebarColors.js │ │ ├── MessagesTitleColors.js │ │ ├── NavbarBackLinkColors.js │ │ ├── NavbarColors.js │ │ ├── NotificationsColors.js │ │ ├── PageColors.js │ │ ├── PanelColors.js │ │ ├── PopoverColors.js │ │ ├── PopupColors.js │ │ ├── PreloaderColors.js │ │ ├── ProgressbarColors.js │ │ ├── RadioColors.js │ │ ├── RangeColors.js │ │ ├── SearchbarColors.js │ │ ├── SegmentedButtonColors.js │ │ ├── SegmentedColors.js │ │ ├── SheetColors.js │ │ ├── StepperColors.js │ │ ├── TabbarColors.js │ │ ├── TabbarLinkColors.js │ │ ├── TableCellColors.js │ │ ├── TableRowColors.js │ │ ├── ToastColors.js │ │ ├── ToggleColors.js │ │ └── ToolbarColors.js │ ├── position-class.js │ └── touch-ripple-class.js ├── svelte │ ├── components │ │ ├── Actions.svelte │ │ ├── ActionsButton.svelte │ │ ├── ActionsGroup.svelte │ │ ├── ActionsLabel.svelte │ │ ├── App.svelte │ │ ├── Badge.svelte │ │ ├── Block.svelte │ │ ├── BlockFooter.svelte │ │ ├── BlockHeader.svelte │ │ ├── BlockTitle.svelte │ │ ├── Breadcrumbs.svelte │ │ ├── BreadcrumbsCollapsed.svelte │ │ ├── BreadcrumbsItem.svelte │ │ ├── BreadcrumbsSeparator.svelte │ │ ├── Button.svelte │ │ ├── Card.svelte │ │ ├── Checkbox.svelte │ │ ├── Chip.svelte │ │ ├── Dialog.svelte │ │ ├── DialogButton.svelte │ │ ├── Fab.svelte │ │ ├── Icon.svelte │ │ ├── Link.svelte │ │ ├── List.svelte │ │ ├── ListButton.svelte │ │ ├── ListGroup.svelte │ │ ├── ListInput.svelte │ │ ├── ListItem.svelte │ │ ├── MenuList.svelte │ │ ├── MenuListItem.svelte │ │ ├── Message.svelte │ │ ├── Messagebar.svelte │ │ ├── Messages.svelte │ │ ├── MessagesTitle.svelte │ │ ├── Navbar.svelte │ │ ├── NavbarBackLink.svelte │ │ ├── Notification.svelte │ │ ├── Page.svelte │ │ ├── Panel.svelte │ │ ├── Popover.svelte │ │ ├── Popup.svelte │ │ ├── Preloader.svelte │ │ ├── Progressbar.svelte │ │ ├── Radio.svelte │ │ ├── Range.svelte │ │ ├── Searchbar.svelte │ │ ├── Segmented.svelte │ │ ├── SegmentedButton.svelte │ │ ├── Sheet.svelte │ │ ├── Stepper.svelte │ │ ├── Tabbar.svelte │ │ ├── TabbarLink.svelte │ │ ├── Table.svelte │ │ ├── TableBody.svelte │ │ ├── TableCell.svelte │ │ ├── TableHead.svelte │ │ ├── TableRow.svelte │ │ ├── Toast.svelte │ │ ├── Toggle.svelte │ │ ├── Toolbar.svelte │ │ └── icons │ │ │ ├── BackIcon.svelte │ │ │ ├── CheckboxIcon.svelte │ │ │ ├── ChevronIcon.svelte │ │ │ ├── DeleteIcon.svelte │ │ │ ├── DropdownIcon.svelte │ │ │ ├── PreloaderIOS.svelte │ │ │ ├── PreloaderMaterial.svelte │ │ │ └── SearchIcon.svelte │ ├── konsta-svelte.d.ts │ ├── konsta-svelte.js │ ├── package.json │ └── shared │ │ ├── KonstaProvider.svelte │ │ ├── KonstaStore.js │ │ ├── get-reactive-context.js │ │ ├── print-text.js │ │ ├── set-reactive-context.js │ │ ├── use-dark-classes.js │ │ ├── use-theme-classes.js │ │ ├── use-theme.js │ │ └── use-touch-ripple.js ├── types │ ├── Actions.d.ts │ ├── ActionsButton.d.ts │ ├── ActionsGroup.d.ts │ ├── ActionsLabel.d.ts │ ├── App.d.ts │ ├── Badge.d.ts │ ├── Block.d.ts │ ├── BlockFooter.d.ts │ ├── BlockHeader.d.ts │ ├── BlockTitle.d.ts │ ├── Breadcrumbs.d.ts │ ├── BreadcrumbsCollapsed.d.ts │ ├── BreadcrumbsItem.d.ts │ ├── BreadcrumbsSeparator.d.ts │ ├── Button.d.ts │ ├── Card.d.ts │ ├── Checkbox.d.ts │ ├── Chip.d.ts │ ├── Dialog.d.ts │ ├── DialogButton.d.ts │ ├── Fab.d.ts │ ├── Icon.d.ts │ ├── Link.d.ts │ ├── List.d.ts │ ├── ListButton.d.ts │ ├── ListGroup.d.ts │ ├── ListInput.d.ts │ ├── ListItem.d.ts │ ├── MenuList.d.ts │ ├── MenuListItem.d.ts │ ├── Message.d.ts │ ├── Messagebar.d.ts │ ├── Messages.d.ts │ ├── MessagesTitle.d.ts │ ├── Navbar.d.ts │ ├── NavbarBackLink.d.ts │ ├── Notification.d.ts │ ├── Page.d.ts │ ├── Panel.d.ts │ ├── Popover.d.ts │ ├── Popup.d.ts │ ├── Preloader.d.ts │ ├── Progressbar.d.ts │ ├── Radio.d.ts │ ├── Range.d.ts │ ├── Searchbar.d.ts │ ├── Segmented.d.ts │ ├── SegmentedButton.d.ts │ ├── Sheet.d.ts │ ├── Stepper.d.ts │ ├── Tabbar.d.ts │ ├── TabbarLink.d.ts │ ├── Table.d.ts │ ├── TableBody.d.ts │ ├── TableCell.d.ts │ ├── TableHead.d.ts │ ├── TableRow.d.ts │ ├── Toast.d.ts │ ├── Toggle.d.ts │ └── Toolbar.d.ts └── vue │ ├── components │ ├── Actions.vue │ ├── ActionsButton.vue │ ├── ActionsGroup.vue │ ├── ActionsLabel.vue │ ├── App.vue │ ├── Badge.vue │ ├── Block.vue │ ├── BlockFooter.vue │ ├── BlockHeader.vue │ ├── BlockTitle.vue │ ├── Breadcrumbs.vue │ ├── BreadcrumbsCollapsed.vue │ ├── BreadcrumbsItem.vue │ ├── BreadcrumbsSeparator.vue │ ├── Button.vue │ ├── Card.vue │ ├── Checkbox.vue │ ├── Chip.vue │ ├── Dialog.vue │ ├── DialogButton.vue │ ├── Fab.vue │ ├── Icon.vue │ ├── Link.vue │ ├── List.vue │ ├── ListButton.vue │ ├── ListGroup.vue │ ├── ListInput.vue │ ├── ListItem.vue │ ├── MenuList.vue │ ├── MenuListItem.vue │ ├── Message.vue │ ├── Messagebar.vue │ ├── Messages.vue │ ├── MessagesTitle.vue │ ├── Navbar.vue │ ├── NavbarBackLink.vue │ ├── Notification.vue │ ├── Page.vue │ ├── Panel.vue │ ├── Popover.vue │ ├── Popup.vue │ ├── Preloader.vue │ ├── Progressbar.vue │ ├── Radio.vue │ ├── Range.vue │ ├── Searchbar.vue │ ├── Segmented.vue │ ├── SegmentedButton.vue │ ├── Sheet.vue │ ├── Stepper.vue │ ├── Tabbar.vue │ ├── TabbarLink.vue │ ├── Table.vue │ ├── TableBody.vue │ ├── TableCell.vue │ ├── TableHead.vue │ ├── TableRow.vue │ ├── Toast.vue │ ├── Toggle.vue │ ├── Toolbar.vue │ └── icons │ │ ├── BackIcon.vue │ │ ├── CheckboxIcon.vue │ │ ├── ChevronIcon.vue │ │ ├── DeleteIcon.vue │ │ ├── DropdownIcon.vue │ │ ├── PreloaderIOS.vue │ │ ├── PreloaderMaterial.vue │ │ └── SearchIcon.vue │ ├── konsta-vue.d.ts │ ├── konsta-vue.js │ ├── package.json │ └── shared │ ├── KonstaProvider.vue │ ├── use-auto-theme.js │ ├── use-context.js │ ├── use-dark-classes.js │ ├── use-theme-classes.js │ ├── use-theme.js │ └── use-touch-ripple.js └── tailwind.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | 6 | # You can see what browsers were selected by your queries by running: 7 | # npx browserslist 8 | 9 | IOS >= 13 10 | Safari >= 13 11 | last 5 Chrome versions 12 | last 5 Firefox versions 13 | Samsung >= 12 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .git 2 | .github 3 | package 4 | node_modules 5 | kitchen-sink/react/dist 6 | kitchen-sink/vue/dist 7 | kitchen-sink/svelte/dist 8 | kitchen-sink/svelte/vite.config.js 9 | src/vue-temp 10 | src/config/md-colors.js 11 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | patreon: konstaui 2 | open_collective: konstaui 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | contact_links: 2 | - name: 📃 Documentation Issue 3 | url: https://github.com/konstaui/konstaui.com/issues/new 4 | about: Issues with Konsta UI website 5 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue. 2 | 3 | The best way to propose a feature is to open an issue first and discuss your ideas there before implementing them. 4 | 5 | Always follow the [contribution guidelines](https://github.com/konstaui/konsta/blob/master/CONTRIBUTING.md) when submitting a pull request. 6 | -------------------------------------------------------------------------------- /.github/workflows/issue-close-require.yml: -------------------------------------------------------------------------------- 1 | name: Issue Close Require 2 | 3 | on: 4 | schedule: 5 | - cron: '0 0 * * *' 6 | 7 | jobs: 8 | close-issues: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: missing demo 12 | uses: actions-cool/issues-helper@v2.2.1 13 | with: 14 | actions: 'close-issues' 15 | token: ${{ secrets.GITHUB_TOKEN }} 16 | labels: 'missing demo' 17 | inactive-day: 3 18 | -------------------------------------------------------------------------------- /.github/workflows/issue-labeled.yml: -------------------------------------------------------------------------------- 1 | name: Issue Labeled 2 | 3 | on: 4 | issues: 5 | types: [labeled] 6 | 7 | jobs: 8 | reply-labeled: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: missing demo 12 | if: github.event.label.name == 'missing demo' 13 | uses: actions-cool/issues-helper@v2.2.1 14 | with: 15 | actions: 'create-comment, remove-labels' 16 | token: ${{ secrets.GITHUB_TOKEN }} 17 | issue-number: ${{ github.event.issue.number }} 18 | body: | 19 | Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by [Stack Blitz](https://stackblitz.com/) or a minimal GitHub repository. You can fork [this Stack Blitz](https://stackblitz.com/edit/vite-7wtkxc?file=App.jsx) to get start. Issues labeled by `missing demo` will be closed if no activities in 3 days. 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .eslintcache 26 | 27 | package/**/*.js 28 | package/**/*.svelte 29 | package/**/**/*.svelte 30 | package/**/*.d.ts 31 | package/**/*.css 32 | package/**/*.vue 33 | package/**/**/*.vue 34 | 35 | kitchen-sink/react/dist 36 | kitchen-sink/vue/dist 37 | kitchen-sink/svelte/dist 38 | 39 | src/vue-temp 40 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | package 3 | kitchen-sink/react/dist 4 | kitchen-sink/vue/dist 5 | kitchen-sink/svelte/dist 6 | src/vue-temp 7 | src/config/md-colors.js 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "embeddedLanguageFormatting": "auto", 5 | "htmlWhitespaceSensitivity": "css", 6 | "insertPragma": false, 7 | "jsxSingleQuote": false, 8 | "printWidth": 80, 9 | "proseWrap": "preserve", 10 | "quoteProps": "as-needed", 11 | "requirePragma": false, 12 | "semi": true, 13 | "singleQuote": true, 14 | "tabWidth": 2, 15 | "trailingComma": "es5", 16 | "useTabs": false, 17 | "vueIndentScriptAndStyle": true 18 | } 19 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "files.eol": "\n" 5 | } 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Vladimir Kharlampidi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /babel.config.react.js: -------------------------------------------------------------------------------- 1 | let modules = process.env.MODULES || false; 2 | if (modules === 'esm' || modules === 'false') modules = false; 3 | 4 | module.exports = { 5 | presets: [ 6 | '@babel/preset-react', 7 | ['@babel/preset-env', { modules, loose: true }], 8 | ], 9 | }; 10 | -------------------------------------------------------------------------------- /babel.config.vue.js: -------------------------------------------------------------------------------- 1 | let modules = process.env.MODULES || false; 2 | if (modules === 'esm' || modules === 'false') modules = false; 3 | 4 | module.exports = { 5 | presets: [['@babel/preset-env', { modules, loose: true }]], 6 | }; 7 | -------------------------------------------------------------------------------- /kitchen-sink/react/components/DemoIcon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import IconSrc from '../images/demo-icon.png'; 3 | 4 | const DemoIcon = () => { 5 | return icon; 6 | }; 7 | export default DemoIcon; 8 | -------------------------------------------------------------------------------- /kitchen-sink/react/components/Page.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Page as PageComponent, Navbar, NavbarBackLink } from 'konsta/react'; 3 | 4 | export default function Page(props) { 5 | const { title, backLink = true, navRight, children } = props; 6 | const goBack = () => { 7 | history.back(); 8 | }; 9 | const isPreview = document.location.href.includes('examplePreview'); 10 | return ( 11 | 12 | {title && ( 13 | } 16 | right={navRight} 17 | /> 18 | )} 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /kitchen-sink/react/images/demo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/kitchen-sink/react/images/demo-icon.png -------------------------------------------------------------------------------- /kitchen-sink/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | Konsta UI React 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /kitchen-sink/react/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './styles/index.css'; 4 | import App from './components/App'; 5 | 6 | const root = createRoot(document.getElementById('app')); 7 | root.render(React.createElement(App)); 8 | -------------------------------------------------------------------------------- /kitchen-sink/react/pages/ListButton.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Page, Navbar, NavbarBackLink, List, ListButton } from 'konsta/react'; 3 | 4 | export default function ListButtonPage() { 5 | const isPreview = document.location.href.includes('examplePreview'); 6 | return ( 7 | 8 | history.back()} />} 11 | /> 12 | 13 | 14 | Button 1 15 | Button 2 16 | Button 3 17 | 18 | 19 | 20 | Button 1 21 | Button 2 22 | Button 3 23 | 24 | 25 | Red Button 26 | 27 | 28 | ); 29 | } 30 | ListButtonPage.displayName = 'ListButtonPage'; 31 | -------------------------------------------------------------------------------- /kitchen-sink/react/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/kitchen-sink/react/public/apple-touch-icon.png -------------------------------------------------------------------------------- /kitchen-sink/react/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/kitchen-sink/react/public/favicon.png -------------------------------------------------------------------------------- /kitchen-sink/react/styles/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap'); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /kitchen-sink/react/vite.config.js: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | 3 | export default { 4 | base: '', 5 | plugins: [react()], 6 | }; 7 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/DemoIcon.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | icon 6 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/MdAdd.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/MdCameraAlt.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/MdEmail.svelte: -------------------------------------------------------------------------------- 1 | 11 | 14 | 15 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/MdFileUpload.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/MdOutlineCancel.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/MdPerson.svelte: -------------------------------------------------------------------------------- 1 | 11 | 14 | 15 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/MdSend.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/MdToday.svelte: -------------------------------------------------------------------------------- 1 | 11 | 14 | 15 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/components/Page.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | {#if title} 15 | 16 | {#if backLink && !isPreview} 17 | 18 | {/if} 19 | 20 | 21 | {/if} 22 | 23 | 24 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/images/demo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/kitchen-sink/svelte/images/demo-icon.png -------------------------------------------------------------------------------- /kitchen-sink/svelte/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | Konsta UI Svelte 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/index.js: -------------------------------------------------------------------------------- 1 | import { mount } from 'svelte'; 2 | import App from './components/App.svelte'; 3 | import './styles/index.css'; 4 | 5 | // eslint-disable-next-line 6 | const app = mount(App, { 7 | target: document.querySelector('#app'), 8 | }); 9 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/pages/ListButton.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | {#if !isPreview} 17 | history.back()} /> 18 | {/if} 19 | 20 | 21 | 22 | 23 | Button 1 24 | Button 2 25 | Button 3 26 | 27 | 28 | 29 | Button 1 30 | Button 2 31 | Button 3 32 | 33 | 34 | Red Button 35 | 36 | 37 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/pages/Subnavbar.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | {#if !isPreview} 18 | history.back()} /> 19 | {/if} 20 | 21 | 27 | Button 28 | Button 29 | Button 30 | 31 | 32 |
33 | 34 |

35 | Subnavbar is useful when you need to put any additional elements into 36 | Navbar, like Tab Links or Search Bar. It also remains visible when 37 | Navbar hidden. 38 |

39 | 40 |
41 | 42 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/pages/Toolbar.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | {#if !isPreview} 20 | history.back()} /> 21 | {/if} 22 | 23 | 24 | 25 | 31 | Link 1 32 | Link 2 33 | Link 3 34 | 35 | 36 | 37 |

38 | Toolbar supports both top and bottom positions. Click the following button 39 | to change its position. 40 |

41 |

42 | 49 |

50 | 51 | 52 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/styles/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap'); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /kitchen-sink/svelte/vite.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | const { defineConfig } = require('vite'); 3 | 4 | module.exports = defineConfig(async ({ command, mode }) => { 5 | const { svelte } = await import('@sveltejs/vite-plugin-svelte'); 6 | return { base: '', plugins: [svelte()] }; 7 | }); 8 | -------------------------------------------------------------------------------- /kitchen-sink/vue/components/DemoIcon.vue: -------------------------------------------------------------------------------- 1 | 4 | 15 | -------------------------------------------------------------------------------- /kitchen-sink/vue/components/MdAdd.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /kitchen-sink/vue/components/MdCameraAlt.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /kitchen-sink/vue/components/MdEmail.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /kitchen-sink/vue/components/MdFileUpload.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /kitchen-sink/vue/components/MdOutlineCancel.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /kitchen-sink/vue/components/MdPerson.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /kitchen-sink/vue/components/MdSend.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /kitchen-sink/vue/components/MdToday.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /kitchen-sink/vue/images/demo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/kitchen-sink/vue/images/demo-icon.png -------------------------------------------------------------------------------- /kitchen-sink/vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | Konsta UI Vue 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /kitchen-sink/vue/index.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import { createRouter, createWebHashHistory } from 'vue-router'; 3 | 4 | import './styles/index.css'; 5 | import App from './components/App.vue'; 6 | 7 | import routes from './routes.js'; 8 | 9 | const router = createRouter({ 10 | history: createWebHashHistory(), 11 | routes, 12 | }); 13 | 14 | const app = createApp(App); 15 | 16 | app.use(router); 17 | 18 | app.mount('#app'); 19 | -------------------------------------------------------------------------------- /kitchen-sink/vue/pages/ListButton.vue: -------------------------------------------------------------------------------- 1 | 25 | 51 | -------------------------------------------------------------------------------- /kitchen-sink/vue/public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/kitchen-sink/vue/public/apple-touch-icon.png -------------------------------------------------------------------------------- /kitchen-sink/vue/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/kitchen-sink/vue/public/favicon.png -------------------------------------------------------------------------------- /kitchen-sink/vue/styles/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap'); 2 | 3 | @tailwind base; 4 | @tailwind components; 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /kitchen-sink/vue/vite.config.js: -------------------------------------------------------------------------------- 1 | import vue from '@vitejs/plugin-vue'; 2 | 3 | export default { 4 | base: '', 5 | plugins: [vue()], 6 | }; 7 | -------------------------------------------------------------------------------- /package/README.md: -------------------------------------------------------------------------------- 1 | ![Konsta UI](https://konstaui.com/images/share-banner.png) 2 | 3 | # Konsta UI 4 | 5 | Konsta UI - Pixel perfect mobile UI components built with Tailwind CSS with iOS and Material Design components for React, Vue & Svelte 6 | 7 | ## Documentation 8 | 9 | Documentation available at https://konstaui.com 10 | -------------------------------------------------------------------------------- /package/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konsta", 3 | "version": "4.0.1", 4 | "description": "Mobile UI components made with Tailwind CSS", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/konstaui/konsta.git" 8 | }, 9 | "keywords": [], 10 | "author": "Vladimir Kharlampidi", 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/konstaui/konsta/issues" 14 | }, 15 | "homepage": "https://konstaui.com", 16 | "engines": { 17 | "node": ">= 4.7.0" 18 | }, 19 | "releaseDate": "September 18, 2024", 20 | "svelte": "./svelte/konsta-svelte.js", 21 | "exports": { 22 | "./package.json": "./package.json", 23 | "./react": { 24 | "types": "./react/konsta-react.d.ts", 25 | "require": "./react/cjs/konsta-react.js", 26 | "import": "./react/esm/konsta-react.js" 27 | }, 28 | "./vue": { 29 | "types": "./vue/konsta-vue.d.ts", 30 | "require": "./vue/konsta-vue.js", 31 | "import": "./vue/konsta-vue.js" 32 | }, 33 | "./svelte": { 34 | "types": "./svelte/konsta-svelte.d.ts", 35 | "import": "./svelte/konsta-svelte.js", 36 | "svelte": "./svelte/konsta-svelte.js" 37 | }, 38 | "./config": "./config.js", 39 | "./config.js": "./config.js" 40 | } 41 | } -------------------------------------------------------------------------------- /package/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konsta/react", 3 | "private": true, 4 | "main": "./cjs/konsta-react.js", 5 | "jsnext:main": "./esm/konsta-react.js", 6 | "module": "./esm/konsta-react.js", 7 | "types": "./konsta-react.d.ts", 8 | "type": "module", 9 | "exports": { 10 | ".": { 11 | "types": "./konsta-react.d.ts", 12 | "import": "./esm/konsta-react.js", 13 | "require": "./cjs/konsta-react.js" 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /package/react/types/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/package/react/types/.gitkeep -------------------------------------------------------------------------------- /package/shared/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/package/shared/.gitkeep -------------------------------------------------------------------------------- /package/shared/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konsta/shared", 3 | "private": true, 4 | "type": "module", 5 | "exports": { 6 | "./esm/*": { 7 | "import": "./esm/*", 8 | "require": "./cjs/*" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /package/svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konsta/svelte", 3 | "private": true, 4 | "main": "./konsta-svelte.js", 5 | "jsnext:main": "./konsta-svelte.js", 6 | "module": "./konsta-svelte.js", 7 | "types": "./konsta-svelte.d.ts", 8 | "svelte": "./konsta-svelte.js", 9 | "type": "module", 10 | "exports": { 11 | ".": { 12 | "types": "./konsta-svelte.d.ts", 13 | "import": "./konsta-svelte.js" 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /package/svelte/types/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/package/svelte/types/.gitkeep -------------------------------------------------------------------------------- /package/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konsta/vue", 3 | "private": true, 4 | "main": "./konsta-vue.js", 5 | "jsnext:main": "./konsta-vue.js", 6 | "module": "./konsta-vue.js", 7 | "vue": "./konsta-vue.js", 8 | "types": "./konsta-vue.d.ts", 9 | "type": "module", 10 | "exports": { 11 | ".": { 12 | "types": "./konsta-vue.d.ts", 13 | "vue": "./konsta-vue.js", 14 | "import": "./konsta-vue.js", 15 | "require": "./konsta-vue.js" 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /package/vue/types/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/konstaui/konsta/e5e753a8ccdcde9f51c4a173a4924b954df20264/package/vue/types/.gitkeep -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /scripts/banner.js: -------------------------------------------------------------------------------- 1 | const pkg = require('../package.json'); 2 | 3 | const date = { 4 | day: new Date().getDate(), 5 | month: 6 | 'January February March April May June July August September October November December'.split( 7 | ' ' 8 | )[new Date().getMonth()], 9 | year: new Date().getFullYear(), 10 | }; 11 | 12 | module.exports = (name = null) => 13 | `${` 14 | /** 15 | * Konsta UI ${name ? `${name} ` : ''}${pkg.version} 16 | * ${pkg.description} 17 | * ${pkg.homepage || ''} 18 | * 19 | * Copyright 2014-${date.year} ${pkg.author} 20 | * 21 | * Released under the ${pkg.license} License 22 | * 23 | * Released on: ${date.month} ${date.day}, ${date.year} 24 | */ 25 | `.trim()}\n`; 26 | -------------------------------------------------------------------------------- /scripts/build-copy.js: -------------------------------------------------------------------------------- 1 | /* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */ 2 | /* eslint no-console: "off" */ 3 | const fs = require('fs'); 4 | 5 | async function buildCopy(cb) { 6 | const env = process.env.NODE_ENV || 'development'; 7 | const outputDir = env === 'development' ? 'build' : 'package'; 8 | if (!fs.existsSync(`./${outputDir}/config/`)) { 9 | fs.mkdirSync(`./${outputDir}/config/`); 10 | } 11 | fs.readdirSync('./src/config').forEach((f) => { 12 | fs.copyFileSync(`./src/config/${f}`, `./${outputDir}/config/${f}`); 13 | }); 14 | fs.copyFileSync(`./src/config.js`, `./${outputDir}/config.js`); 15 | if (cb) cb(); 16 | } 17 | 18 | module.exports = buildCopy; 19 | -------------------------------------------------------------------------------- /scripts/build-md-colors.js: -------------------------------------------------------------------------------- 1 | const rollup = require('rollup'); 2 | const resolve = require('@rollup/plugin-node-resolve'); 3 | 4 | const buildMdColors = async () => { 5 | const bundle = await rollup.rollup({ 6 | input: './src/md-colors.js', 7 | plugins: [resolve.default({ mainFields: ['module', 'main', 'jsnext'] })], 8 | }); 9 | 10 | await bundle.write({ 11 | format: 'cjs', 12 | name: 'mdColors', 13 | file: './src/config/md-colors.js', 14 | }); 15 | }; 16 | 17 | module.exports = buildMdColors; 18 | -------------------------------------------------------------------------------- /scripts/build-shared.js: -------------------------------------------------------------------------------- 1 | /* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */ 2 | /* eslint no-console: "off" */ 3 | const { promise: exec } = require('exec-sh'); 4 | 5 | module.exports = async (format, outputDir = 'package') => { 6 | // Babel 7 | await exec( 8 | `cross-env MODULES=${format} npx babel --config-file ./babel.config.react.js src/shared --out-dir ${outputDir}/shared/${format}` 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /scripts/build.js: -------------------------------------------------------------------------------- 1 | const buildCopy = require('./build-copy.js'); 2 | const buildReact = require('./build-react.js'); 3 | const buildReactTypes = require('./build-react-types.js'); 4 | const buildVue = require('./build-vue.js'); 5 | const buildVueTypes = require('./build-vue-types.js'); 6 | const buildSvelte = require('./build-svelte.js'); 7 | const buildSvelteTypes = require('./build-svelte-types.js'); 8 | const buildShared = require('./build-shared.js'); 9 | const buildMdColors = require('./build-md-colors.js'); 10 | 11 | const formats = ['esm', 'cjs']; 12 | 13 | (async () => { 14 | const env = process.env.NODE_ENV || 'development'; 15 | const outputDir = env === 'development' ? 'build' : 'package'; 16 | return Promise.all([ 17 | buildMdColors(), 18 | buildCopy(), 19 | ...formats.map((format) => buildReact(format, outputDir)), 20 | ...formats.map((format) => buildShared(format, outputDir)), 21 | buildSvelte(outputDir), 22 | buildVue(outputDir), 23 | buildReactTypes(), 24 | buildVueTypes(), 25 | buildSvelteTypes(), 26 | ]).catch((err) => { 27 | // eslint-disable-next-line 28 | console.error(err); 29 | process.exit(1); 30 | }); 31 | })(); 32 | -------------------------------------------------------------------------------- /scripts/transform-vue-component.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | // eslint-disable-next-line 3 | const compilerSFC = require('@vue/compiler-sfc'); 4 | 5 | const transformVueComponent = (inputFile, outputFile) => { 6 | const src = fs.readFileSync(inputFile, 'utf-8'); 7 | const { descriptor } = compilerSFC.parse(src); 8 | let templateCode = ''; 9 | let scriptContent = descriptor.script.content; 10 | if (descriptor.template) { 11 | templateCode = compilerSFC.compileTemplate({ 12 | source: descriptor.template.content, 13 | }).code; 14 | templateCode = templateCode.replace( 15 | 'export function render', 16 | 'function render' 17 | ); 18 | scriptContent = scriptContent.replace( 19 | /name: '([a-z0-9-]*)',/i, 20 | `name: '$1',\n render,` 21 | ); 22 | } 23 | const content = `${templateCode}\n${scriptContent}`; 24 | fs.writeFileSync(outputFile, content); 25 | }; 26 | 27 | module.exports = transformVueComponent; 28 | -------------------------------------------------------------------------------- /src/config/hex-to-rgb.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | module.exports = (hex) => { 3 | // prettier-ignore 4 | // eslint-disable-next-line 5 | const h = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b); 6 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h); 7 | return result ? result.slice(1).map((n) => parseInt(n, 16)) : null; 8 | }; 9 | -------------------------------------------------------------------------------- /src/config/plugin-colors.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin'); 2 | const hexToRgb = require('./hex-to-rgb.js'); 3 | const iosColors = require('./ios-colors.js'); 4 | const mdColors = require('./md-colors.js'); 5 | 6 | const rulesForColor = (name, hex) => { 7 | if (!hex.includes('#') || name === 'primary') return {}; 8 | const data = {}; 9 | const colors = { 10 | primary: hex, 11 | ...iosColors(hex), 12 | ...mdColors(hex), 13 | }; 14 | Object.keys(colors).forEach((key) => { 15 | data[`--k-color-${key}`] = hexToRgb(colors[key]).join(' '); 16 | }); 17 | 18 | return { 19 | [`.k-color-${name}`]: data, 20 | }; 21 | }; 22 | 23 | module.exports = (konstaConfig) => 24 | plugin(({ addUtilities }) => { 25 | const themeColors = konstaConfig.colors; 26 | 27 | const colors = {}; 28 | 29 | Object.keys(themeColors).forEach((name) => { 30 | Object.assign(colors, rulesForColor(name, themeColors[name])); 31 | }); 32 | 33 | addUtilities(colors); 34 | }); 35 | -------------------------------------------------------------------------------- /src/config/plugin-line-clamp.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin'); 2 | 3 | module.exports = () => 4 | plugin(({ addUtilities }) => { 5 | const lineClamp = {}; 6 | Array.from({ length: 10 }).forEach((_, index) => { 7 | lineClamp[`.line-clamp-${index + 1}`] = { 8 | overflow: 'hidden', 9 | display: '-webkit-box', 10 | '-webkit-line-clamp': `${index + 1}`, 11 | '-webkit-box-orient': 'vertical', 12 | }; 13 | }); 14 | addUtilities(lineClamp); 15 | }); 16 | -------------------------------------------------------------------------------- /src/config/plugin-no-scrollbar.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin'); 2 | 3 | module.exports = () => 4 | plugin(({ addUtilities }) => { 5 | const noScrollbar = { 6 | '.no-scrollbar': { 7 | 'scrollbar-width': 'none', 8 | }, 9 | '.no-scrollbar::-webkit-scrollbar': { 10 | display: 'none', 11 | opacity: '0', 12 | }, 13 | }; 14 | 15 | addUtilities(noScrollbar); 16 | }); 17 | -------------------------------------------------------------------------------- /src/config/plugin-range.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin'); 2 | 3 | module.exports = () => 4 | plugin(({ addVariant, e }) => { 5 | addVariant('range-thumb', ({ modifySelectors, separator }) => { 6 | modifySelectors(({ className }) => { 7 | return `.${e( 8 | `range-thumb${separator}${className}` 9 | )}::-webkit-slider-thumb`; 10 | }); 11 | }); 12 | addVariant('range-track', ({ modifySelectors, separator }) => { 13 | modifySelectors(({ className }) => { 14 | return `.${e( 15 | `range-track${separator}${className}` 16 | )}::-webkit-slider-runnable-track`; 17 | }); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /src/config/plugin-touch.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin'); 2 | 3 | module.exports = () => 4 | plugin(({ addUtilities }) => { 5 | const touch = {}; 6 | const values = ['pan-x', 'pan-y', 'none', 'manipulation']; 7 | values.forEach((value) => { 8 | touch[`.touch-${value}`] = { 9 | 'touch-action': value, 10 | }; 11 | }); 12 | addUtilities(touch); 13 | }); 14 | -------------------------------------------------------------------------------- /src/config/plugin-translucent.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin'); 2 | 3 | module.exports = () => 4 | plugin(({ addUtilities }) => { 5 | addUtilities({ 6 | '@supports (backdrop-filter: blur(20px))': { 7 | '.translucent': { 8 | '--tw-bg-opacity': '0.8 !important', 9 | 'backdrop-filter': 'saturate(180%) blur(20px)', 10 | }, 11 | }, 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konsta", 3 | "version": "0.0.1", 4 | "description": "Mobile UI components made with Tailwind CSS", 5 | "private": true 6 | } 7 | -------------------------------------------------------------------------------- /src/react/components/ActionsGroup.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 3 | import { ActionsGroupClasses } from '../../shared/classes/ActionsGroupClasses.js'; 4 | 5 | const ActionsGroup = forwardRef((props, ref) => { 6 | const { 7 | component = 'div', 8 | className, 9 | 10 | ios, 11 | material, 12 | 13 | dividers = true, 14 | 15 | // Children 16 | children, 17 | 18 | // Rest 19 | ...rest 20 | } = props; 21 | 22 | const elRef = useRef(null); 23 | 24 | useImperativeHandle(ref, () => ({ 25 | el: elRef.current, 26 | })); 27 | 28 | const Component = component; 29 | 30 | const attrs = { 31 | ...rest, 32 | }; 33 | 34 | const themeClasses = useThemeClasses({ ios, material }); 35 | 36 | const c = themeClasses( 37 | ActionsGroupClasses({ dividers, ...props }), 38 | className 39 | ); 40 | 41 | return ( 42 | 43 | {children} 44 | 45 | ); 46 | }); 47 | 48 | ActionsGroup.displayName = 'ActionsGroup'; 49 | 50 | export default ActionsGroup; 51 | -------------------------------------------------------------------------------- /src/react/components/Badge.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { BadgeClasses } from '../../shared/classes/BadgeClasses.js'; 3 | import { BadgeColors } from '../../shared/colors/BadgeColors.js'; 4 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 5 | 6 | const Badge = forwardRef((props, ref) => { 7 | const { 8 | component = 'span', 9 | className, 10 | colors: colorsProp, 11 | small, 12 | 13 | ios, 14 | material, 15 | 16 | // Children 17 | children, 18 | 19 | // Rest 20 | ...rest 21 | } = props; 22 | 23 | const elRef = useRef(null); 24 | 25 | useImperativeHandle(ref, () => ({ 26 | el: elRef.current, 27 | })); 28 | 29 | const Component = component; 30 | 31 | const attrs = { 32 | ...rest, 33 | }; 34 | 35 | const themeClasses = useThemeClasses({ ios, material }); 36 | 37 | const colors = BadgeColors(colorsProp); 38 | 39 | const size = small ? 'sm' : 'md'; 40 | 41 | const c = themeClasses(BadgeClasses(props, colors), className); 42 | 43 | return ( 44 | 45 | {children} 46 | 47 | ); 48 | }); 49 | 50 | Badge.displayName = 'Badge'; 51 | 52 | export default Badge; 53 | -------------------------------------------------------------------------------- /src/react/components/Breadcrumbs.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { BreadcrumbsClasses } from '../../shared/classes/BreadcrumbsClasses.js'; 3 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 4 | 5 | const Breadcrumbs = forwardRef((props, ref) => { 6 | const { 7 | component = 'div', 8 | className, 9 | 10 | fontSizeIos = 'text-[17px]', 11 | fontSizeMaterial = 'text-[14px]', 12 | 13 | ios, 14 | material, 15 | 16 | // Children 17 | children, 18 | 19 | // Rest 20 | ...rest 21 | } = props; 22 | 23 | const elRef = useRef(null); 24 | 25 | useImperativeHandle(ref, () => ({ 26 | el: elRef.current, 27 | })); 28 | 29 | const Component = component; 30 | 31 | const attrs = { 32 | ...rest, 33 | }; 34 | 35 | const themeClasses = useThemeClasses({ ios, material }); 36 | 37 | const c = themeClasses( 38 | BreadcrumbsClasses({ ...props, fontSizeIos, fontSizeMaterial }), 39 | className 40 | ); 41 | 42 | return ( 43 | 44 | {children} 45 | 46 | ); 47 | }); 48 | 49 | Breadcrumbs.displayName = 'Breadcrumbs'; 50 | 51 | export default Breadcrumbs; 52 | -------------------------------------------------------------------------------- /src/react/components/BreadcrumbsSeparator.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { BreadcrumbsSeparatorClasses } from '../../shared/classes/BreadcrumbsSeparatorClasses.js'; 3 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 4 | import ChevronIcon from './icons/ChevronIcon.jsx'; 5 | 6 | const BreadcrumbsSeparator = forwardRef((props, ref) => { 7 | const { 8 | component = 'div', 9 | className, 10 | 11 | ios, 12 | material, 13 | 14 | // Children 15 | children, 16 | 17 | // Rest 18 | ...rest 19 | } = props; 20 | 21 | const elRef = useRef(null); 22 | 23 | useImperativeHandle(ref, () => ({ 24 | el: elRef.current, 25 | })); 26 | 27 | const Component = component; 28 | 29 | const attrs = { 30 | ...rest, 31 | }; 32 | 33 | const themeClasses = useThemeClasses({ ios, material }); 34 | 35 | const c = themeClasses(BreadcrumbsSeparatorClasses({ ...props }), className); 36 | 37 | return ( 38 | 39 | 40 | {children} 41 | 42 | ); 43 | }); 44 | 45 | BreadcrumbsSeparator.displayName = 'BreadcrumbsSeparator'; 46 | 47 | export default BreadcrumbsSeparator; 48 | -------------------------------------------------------------------------------- /src/react/components/ListGroup.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import List from './List.jsx'; 3 | 4 | const ListGroup = forwardRef((props, ref) => { 5 | const { 6 | // Children 7 | children, 8 | 9 | // Rest 10 | ...rest 11 | } = props; 12 | 13 | const elRef = useRef(null); 14 | 15 | useImperativeHandle(ref, () => ({ 16 | el: elRef.current, 17 | })); 18 | 19 | const attrs = { 20 | ...rest, 21 | }; 22 | 23 | return ( 24 |
  • 25 | 26 | {children} 27 | 28 |
    • 29 | ); 30 | }); 31 | 32 | ListGroup.displayName = 'ListGroup'; 33 | 34 | export default ListGroup; 35 | -------------------------------------------------------------------------------- /src/react/components/MenuList.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import List from './List.jsx'; 3 | 4 | const MenuList = forwardRef((props, ref) => { 5 | const { 6 | // Children 7 | children, 8 | 9 | // Rest 10 | ...rest 11 | } = props; 12 | 13 | const elRef = useRef(null); 14 | 15 | useImperativeHandle(ref, () => ({ 16 | el: elRef.current, 17 | })); 18 | 19 | const attrs = { 20 | ...rest, 21 | }; 22 | 23 | return ( 24 | 25 | {children} 26 | 27 | ); 28 | }); 29 | 30 | MenuList.displayName = 'MenuList'; 31 | 32 | export default MenuList; 33 | -------------------------------------------------------------------------------- /src/react/components/MenuListItem.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import ListItem from './ListItem.jsx'; 3 | 4 | const MenuListItem = forwardRef((props, ref) => { 5 | const { 6 | active, 7 | 8 | href, 9 | 10 | // Children 11 | children, 12 | 13 | // Rest 14 | ...rest 15 | } = props; 16 | 17 | const elRef = useRef(null); 18 | 19 | useImperativeHandle(ref, () => ({ 20 | el: elRef.current, 21 | })); 22 | 23 | const attrs = { 24 | ...rest, 25 | }; 26 | 27 | return ( 28 | 35 | {children} 36 | 37 | ); 38 | }); 39 | 40 | MenuListItem.displayName = 'MenuListItem'; 41 | 42 | export default MenuListItem; 43 | -------------------------------------------------------------------------------- /src/react/components/Messages.jsx: -------------------------------------------------------------------------------- 1 | import React, { forwardRef, useRef, useImperativeHandle } from 'react'; 2 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 3 | import { MessagesClasses } from '../../shared/classes/MessagesClasses.js'; 4 | 5 | const Messages = forwardRef((props, ref) => { 6 | const { 7 | component = 'div', 8 | className, 9 | colors: colorsProp, 10 | 11 | id, 12 | ios, 13 | material, 14 | 15 | children, 16 | ...rest 17 | } = props; 18 | 19 | const elRef = useRef(null); 20 | useImperativeHandle(ref, () => ({ 21 | el: elRef.current, 22 | })); 23 | 24 | const themeClasses = useThemeClasses({ ios, material }); 25 | 26 | const c = themeClasses(MessagesClasses({ ...props })); 27 | 28 | const Component = component; 29 | 30 | const attrs = { 31 | ...rest, 32 | }; 33 | return ( 34 | 35 | {children} 36 | 37 | ); 38 | }); 39 | 40 | Messages.displayName = 'Messages'; 41 | export default Messages; 42 | -------------------------------------------------------------------------------- /src/react/components/Page.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { PageClasses } from '../../shared/classes/PageClasses.js'; 3 | import { PageColors } from '../../shared/colors/PageColors.js'; 4 | import { useDarkClasses } from '../shared/use-dark-classes.js'; 5 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 6 | 7 | const Page = forwardRef((props, ref) => { 8 | const { 9 | component = 'div', 10 | className, 11 | colors: colorsProp, 12 | 13 | ios, 14 | material, 15 | 16 | // Children 17 | children, 18 | 19 | // Rest 20 | ...rest 21 | } = props; 22 | 23 | const elRef = useRef(null); 24 | 25 | useImperativeHandle(ref, () => ({ 26 | el: elRef.current, 27 | })); 28 | 29 | const Component = component; 30 | 31 | const attrs = { 32 | ...rest, 33 | }; 34 | 35 | const themeClasses = useThemeClasses({ ios, material }); 36 | const dark = useDarkClasses(); 37 | 38 | const colors = PageColors(colorsProp, dark); 39 | 40 | const c = themeClasses(PageClasses(props, colors, className), className); 41 | 42 | return ( 43 | 44 | {children} 45 | 46 | ); 47 | }); 48 | 49 | Page.displayName = 'Page'; 50 | 51 | export default Page; 52 | -------------------------------------------------------------------------------- /src/react/components/SegmentedButton.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import Button from './Button.jsx'; 3 | 4 | const SegmentedButton = forwardRef((props, ref) => { 5 | const { active, children, outline, strong, clear, rounded, ...rest } = props; 6 | 7 | const elRef = useRef(null); 8 | 9 | useImperativeHandle(ref, () => ({ 10 | el: elRef.current, 11 | })); 12 | 13 | return ( 14 | 24 | ); 25 | }); 26 | 27 | SegmentedButton.displayName = 'SegmentedButton'; 28 | 29 | export default SegmentedButton; 30 | -------------------------------------------------------------------------------- /src/react/components/Tabbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import Toolbar from './Toolbar.jsx'; 3 | 4 | const Tabbar = forwardRef((props, ref) => { 5 | const { 6 | labels, 7 | icons, 8 | 9 | children, 10 | 11 | ...rest 12 | } = props; 13 | 14 | const elRef = useRef(null); 15 | 16 | useImperativeHandle(ref, () => ({ 17 | el: elRef.current, 18 | })); 19 | 20 | const attrs = { 21 | ...rest, 22 | }; 23 | 24 | return ( 25 | 32 | {children} 33 | 34 | ); 35 | }); 36 | 37 | Tabbar.displayName = 'Tabbar'; 38 | 39 | export default Tabbar; 40 | -------------------------------------------------------------------------------- /src/react/components/Table.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 3 | import { TableClasses } from '../../shared/classes/TableClasses.js'; 4 | 5 | const Table = forwardRef((props, ref) => { 6 | const { 7 | className, 8 | 9 | ios, 10 | material, 11 | 12 | children, 13 | 14 | ...rest 15 | } = props; 16 | 17 | const elRef = useRef(null); 18 | 19 | useImperativeHandle(ref, () => ({ 20 | el: elRef.current, 21 | })); 22 | 23 | const themeClasses = useThemeClasses({ ios, material }); 24 | const c = themeClasses(TableClasses({ ...props })); 25 | 26 | const attrs = { 27 | ...rest, 28 | }; 29 | 30 | return ( 31 | 32 | {children} 33 |
    34 | ); 35 | }); 36 | 37 | Table.displayName = 'Table'; 38 | export default Table; 39 | -------------------------------------------------------------------------------- /src/react/components/TableBody.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 3 | import { TableBodyClasses } from '../../shared/classes/TableBodyClasses.js'; 4 | 5 | const TableBody = forwardRef((props, ref) => { 6 | const { 7 | className, 8 | 9 | ios, 10 | material, 11 | 12 | children, 13 | 14 | ...rest 15 | } = props; 16 | 17 | const elRef = useRef(null); 18 | 19 | useImperativeHandle(ref, () => ({ 20 | el: elRef.current, 21 | })); 22 | 23 | const themeClasses = useThemeClasses({ ios, material }); 24 | 25 | const c = themeClasses(TableBodyClasses({ ...props })); 26 | 27 | const attrs = { 28 | ...rest, 29 | }; 30 | 31 | return ( 32 | 33 | {children} 34 | 35 | ); 36 | }); 37 | 38 | TableBody.displayName = 'TableBody'; 39 | export default TableBody; 40 | -------------------------------------------------------------------------------- /src/react/components/TableCell.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 3 | import { useDarkClasses } from '../shared/use-dark-classes.js'; 4 | import { TableCellClasses } from '../../shared/classes/TableCellClasses.js'; 5 | import { TableCellColors } from '../../shared/colors/TableCellColors.js'; 6 | 7 | const TableCell = forwardRef((props, ref) => { 8 | const { 9 | className, 10 | colors: colorsProp, 11 | 12 | header, 13 | 14 | ios, 15 | material, 16 | 17 | children, 18 | 19 | ...rest 20 | } = props; 21 | 22 | const elRef = useRef(null); 23 | 24 | useImperativeHandle(ref, () => ({ 25 | el: elRef.current, 26 | })); 27 | 28 | const Component = header ? 'th' : 'td'; 29 | 30 | const themeClasses = useThemeClasses({ ios, material }); 31 | const dark = useDarkClasses(); 32 | const colors = TableCellColors(colorsProp, dark); 33 | 34 | const c = themeClasses(TableCellClasses({ ...props }, colors, className)); 35 | 36 | const attrs = { 37 | ...rest, 38 | }; 39 | 40 | return ( 41 | 42 | {children} 43 | 44 | ); 45 | }); 46 | 47 | TableCell.displayName = 'TableCell'; 48 | export default TableCell; 49 | -------------------------------------------------------------------------------- /src/react/components/TableHead.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 3 | import { TableHeadClasses } from '../../shared/classes/TableHeadClasses.js'; 4 | 5 | const TableHead = forwardRef((props, ref) => { 6 | const { 7 | className, 8 | 9 | ios, 10 | material, 11 | 12 | children, 13 | 14 | ...rest 15 | } = props; 16 | 17 | const elRef = useRef(null); 18 | 19 | useImperativeHandle(ref, () => ({ 20 | el: elRef.current, 21 | })); 22 | 23 | const themeClasses = useThemeClasses({ ios, material }); 24 | const c = themeClasses(TableHeadClasses({ ...props })); 25 | 26 | const attrs = { 27 | ...rest, 28 | }; 29 | 30 | return ( 31 | 32 | {children} 33 | 34 | ); 35 | }); 36 | 37 | TableHead.displayName = 'TableHead'; 38 | export default TableHead; 39 | -------------------------------------------------------------------------------- /src/react/components/TableRow.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, forwardRef, useImperativeHandle } from 'react'; 2 | import { useThemeClasses } from '../shared/use-theme-classes.js'; 3 | import { useDarkClasses } from '../shared/use-dark-classes.js'; 4 | import { TableRowClasses } from '../../shared/classes/TableRowClasses.js'; 5 | import { TableRowColors } from '../../shared/colors/TableRowColors.js'; 6 | 7 | const TableRow = forwardRef((props, ref) => { 8 | const { 9 | className, 10 | colors: colorsProp, 11 | 12 | header, 13 | 14 | ios, 15 | material, 16 | 17 | children, 18 | 19 | ...rest 20 | } = props; 21 | 22 | const elRef = useRef(null); 23 | 24 | useImperativeHandle(ref, () => ({ 25 | el: elRef.current, 26 | })); 27 | 28 | const themeClasses = useThemeClasses({ ios, material }); 29 | const dark = useDarkClasses(); 30 | const colors = TableRowColors(colorsProp, dark); 31 | 32 | const c = themeClasses(TableRowClasses({ ...props }, colors)); 33 | 34 | const attrs = { 35 | ...rest, 36 | }; 37 | 38 | return ( 39 | 40 | {children} 41 | 42 | ); 43 | }); 44 | 45 | TableRow.displayName = 'TableRow'; 46 | export default TableRow; 47 | -------------------------------------------------------------------------------- /src/react/components/icons/BackIcon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const BackIcon = ({ theme, ...rest }) => { 4 | return theme === 'ios' ? ( 5 | 13 | 14 | 15 | ) : ( 16 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | export default BackIcon; 30 | -------------------------------------------------------------------------------- /src/react/components/icons/ChevronIcon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ChevronIcon = (props) => { 4 | return ( 5 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default ChevronIcon; 19 | -------------------------------------------------------------------------------- /src/react/components/icons/DropdownIcon.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const DropdownIcon = (props) => { 4 | return ( 5 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default DropdownIcon; 19 | -------------------------------------------------------------------------------- /src/react/components/icons/PreloaderMaterial.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const PreloaderMaterial = (props) => { 4 | return ( 5 | 6 | 7 | 8 | ); 9 | }; 10 | 11 | export default PreloaderMaterial; 12 | -------------------------------------------------------------------------------- /src/react/konsta-react.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | // IMPORT_COMPONENTS 3 | 4 | // PROVIDER 5 | interface KonstaProviderProps { 6 | /** 7 | * App theme. If set to `'parent'` it will look for `ios` or `md` class on root `` element, useful to use with parent framework like Framework7 or Ionic 8 | * 9 | * @default 'material' 10 | */ 11 | theme?: 'ios' | 'material' | 'parent'; 12 | /** 13 | * Include `dark:` variants (if dark theme is in use) 14 | * 15 | * @default false 16 | * */ 17 | dark?: boolean; 18 | /** 19 | * Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components 20 | * 21 | * @default true 22 | */ 23 | touchRipple?: boolean; 24 | } 25 | declare const KonstaProvider: React.FunctionComponent< 26 | React.PropsWithChildren 27 | >; 28 | 29 | // HELPERS 30 | declare const useTheme: () => 'material' | 'ios'; 31 | 32 | // EXPORT_COMPONENTS 33 | export { useTheme, KonstaProvider }; 34 | export { KonstaProviderProps }; 35 | -------------------------------------------------------------------------------- /src/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konsta/react", 3 | "private": true, 4 | "jsnext:main": "./konsta-react.js", 5 | "module": "./konsta-react.js" 6 | } -------------------------------------------------------------------------------- /src/react/shared/KonstaContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const KonstaContext = React.createContext({ 4 | theme: 'material', 5 | dark: true, 6 | touchRipple: true, 7 | }); 8 | 9 | export { KonstaContext }; 10 | -------------------------------------------------------------------------------- /src/react/shared/KonstaProvider.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { KonstaContext } from './KonstaContext.js'; 3 | import { useAutoTheme } from './use-auto-theme.js'; 4 | 5 | const KonstaProvider = (props) => { 6 | const { 7 | theme, 8 | dark, 9 | touchRipple = true, 10 | autoThemeDetection = true, 11 | children, 12 | } = props; 13 | 14 | const currentTheme = useAutoTheme(theme, autoThemeDetection); 15 | 16 | return ( 17 | 18 | {children} 19 | 20 | ); 21 | }; 22 | 23 | export { KonstaProvider }; 24 | -------------------------------------------------------------------------------- /src/react/shared/ListDividersContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ListDividersContext = React.createContext(false); 4 | 5 | export { ListDividersContext }; 6 | -------------------------------------------------------------------------------- /src/react/shared/use-auto-theme.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js'; 3 | 4 | export const useAutoTheme = (theme, autoThemeDetection = true) => { 5 | const [themeState, setThemeState] = useState(theme); 6 | 7 | /* eslint-disable no-restricted-globals */ 8 | useIsomorphicLayoutEffect(() => { 9 | if (!autoThemeDetection) return; 10 | if (theme === 'ios' || theme === 'material') { 11 | if (themeState !== theme) setThemeState(theme); 12 | } else if ( 13 | themeState === 'parent' && 14 | typeof window !== 'undefined' && 15 | typeof document !== 'undefined' 16 | ) { 17 | const htmlEl = document.documentElement; 18 | if (htmlEl) { 19 | if (htmlEl.classList.contains('ios')) { 20 | setThemeState('ios'); 21 | } else if ( 22 | htmlEl.classList.contains('md') || 23 | htmlEl.classList.contains('material') 24 | ) { 25 | setThemeState('material'); 26 | } 27 | } 28 | } 29 | }, [theme]); 30 | /* eslint-enable no-restricted-globals */ 31 | return autoThemeDetection ? themeState : theme; 32 | }; 33 | -------------------------------------------------------------------------------- /src/react/shared/use-dark-classes.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { KonstaContext } from './KonstaContext.js'; 3 | 4 | const useDarkClasses = () => { 5 | const context = useContext(KonstaContext); 6 | return (classNames) => { 7 | if (!context.dark) return ''; 8 | return classNames; 9 | }; 10 | }; 11 | 12 | export { useDarkClasses }; 13 | -------------------------------------------------------------------------------- /src/react/shared/use-isomorphic-layout-effect.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useLayoutEffect } from 'react'; 2 | 3 | function useIsomorphicLayoutEffect(callback, deps) { 4 | // eslint-disable-next-line 5 | if (typeof window === 'undefined') return useEffect(callback, deps); 6 | return useLayoutEffect(callback, deps); 7 | } 8 | 9 | export { useIsomorphicLayoutEffect }; 10 | -------------------------------------------------------------------------------- /src/react/shared/use-list-dividers.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { ListDividersContext } from './ListDividersContext.js'; 3 | 4 | export const useListDividers = () => { 5 | return useContext(ListDividersContext); 6 | }; 7 | -------------------------------------------------------------------------------- /src/react/shared/use-theme.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { KonstaContext } from './KonstaContext.js'; 3 | 4 | const useTheme = ({ ios, material } = {}) => { 5 | const context = useContext(KonstaContext); 6 | let theme = context.theme || 'ios'; 7 | if (ios) theme = 'ios'; 8 | if (material) theme = 'material'; 9 | return theme; 10 | }; 11 | 12 | export { useTheme }; 13 | -------------------------------------------------------------------------------- /src/shared/classes/ActionsButtonClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ActionsButtonClasses = (props, colors, darkClasses) => { 4 | const { fontSizeIos, fontSizeMaterial, bold, dividers } = props; 5 | return { 6 | base: { 7 | common: cls( 8 | `flex items-center w-full px-4 relative z-10 overflow-hidden`, 9 | dividers && 'hairline-b' 10 | ), 11 | ios: cls( 12 | `h-14`, 13 | colors.textIos, 14 | colors.bgIos, 15 | colors.activeBgIos, 16 | fontSizeIos, 17 | 'first:rounded-t-xl last:rounded-b-xl justify-center', 18 | bold && 'font-semibold' 19 | ), 20 | material: cls( 21 | `h-12`, 22 | colors.textMaterial, 23 | colors.bgMaterial, 24 | colors.activeBgMaterial, 25 | fontSizeMaterial, 26 | 'justify-start', 27 | darkClasses('dark:touch-ripple-white'), 28 | bold && 'font-medium' 29 | ), 30 | }, 31 | }; 32 | }; 33 | -------------------------------------------------------------------------------- /src/shared/classes/ActionsClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const ActionsClasses = (props, classes) => { 5 | return { 6 | base: { 7 | common: cls( 8 | 'transition-transform z-40 left-1/2 bottom-0 transform -translate-x-1/2 max-w-md w-full overflow-hidden', 9 | positionClass('fixed', classes) 10 | ), 11 | ios: 'pt-2 px-2 pb-2-safe duration-300', 12 | material: 13 | 'pb-safe last-child-hairline-b-none rounded-t-2xl duration-400 ease-material-in', 14 | opened: '', 15 | closed: 'translate-y-full', 16 | }, 17 | backdrop: { 18 | common: 19 | 'fixed z-40 w-full h-full left-0 top-0 bg-black bg-opacity-50 duration-300', 20 | opened: '', 21 | closed: 'opacity-0 pointer-events-none', 22 | }, 23 | }; 24 | }; 25 | -------------------------------------------------------------------------------- /src/shared/classes/ActionsGroupClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | // eslint-disable-next-line 4 | export const ActionsGroupClasses = (props) => { 5 | const { dividers } = props; 6 | return { 7 | base: { 8 | common: `relative`, 9 | ios: `mt-2 first:mt-0 last-child-hairline-b-none`, 10 | material: cls(dividers && `hairline-b`), 11 | }, 12 | }; 13 | }; 14 | -------------------------------------------------------------------------------- /src/shared/classes/ActionsLabelClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ActionsLabelClasses = (props, colors) => { 4 | const { fontSizeIos, fontSizeMaterial, dividers } = props; 5 | return { 6 | base: { 7 | common: cls( 8 | `flex items-center w-full px-4 relative z-10 overflow-hidden ${colors.activeBg}`, 9 | dividers && 'hairline-b' 10 | ), 11 | ios: cls( 12 | `h-14`, 13 | colors.bgIos, 14 | colors.textIos, 15 | fontSizeIos, 16 | 'first:rounded-t-xl last:rounded-b-xl justify-center' 17 | ), 18 | material: cls( 19 | `h-12`, 20 | colors.bgMaterial, 21 | colors.textMaterial, 22 | fontSizeMaterial, 23 | 'font-medium', 24 | 'justify-start' 25 | ), 26 | }, 27 | }; 28 | }; 29 | -------------------------------------------------------------------------------- /src/shared/classes/AppClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const AppClasses = (props, currentTheme, classes) => { 5 | const { safeAreas } = props; 6 | return cls( 7 | currentTheme === 'ios' && `k-ios`, 8 | currentTheme === 'material' && 'k-material', 9 | 'k-app w-full h-full min-h-screen', 10 | safeAreas && 'safe-areas', 11 | positionClass('relative', classes), 12 | classes 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /src/shared/classes/BadgeClasses.js: -------------------------------------------------------------------------------- 1 | export const BadgeClasses = (props, colors) => { 2 | return { 3 | base: { 4 | common: `${colors.text} ${colors.bg} inline-flex items-center justify-center rounded-full leading-none`, 5 | ios: `font-semibold`, 6 | material: `font-medium`, 7 | sm: 'text-2xs min-w-4 min-h-4 px-0.5', 8 | md: 'text-xs min-w-5 min-h-5 px-1.5 py-0.5', 9 | }, 10 | }; 11 | }; 12 | -------------------------------------------------------------------------------- /src/shared/classes/BlockClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const BlockClasses = (props, colors, classes) => { 5 | const { inset, nested, margin, padding, strong, outline } = props; 6 | return { 7 | base: { 8 | common: cls( 9 | `text-sm z-10`, 10 | positionClass('relative', classes), 11 | !inset && !nested && outline && 'hairline-t hairline-b', 12 | inset && outline && 'border', 13 | inset && 'px-4', 14 | !inset && 'pl-4-safe pr-4-safe', 15 | !nested && margin, 16 | (strong || outline) && padding 17 | ), 18 | ios: cls( 19 | colors.textIos, 20 | strong && colors.strongBgIos, 21 | inset && outline && colors.outlineIos 22 | ), 23 | material: cls( 24 | colors.textMaterial, 25 | strong && colors.strongBgMaterial, 26 | inset && outline && colors.outlineMaterial 27 | ), 28 | }, 29 | inset: { 30 | common: `ml-4-safe mr-4-safe overflow-hidden`, 31 | ios: `rounded-lg`, 32 | material: `rounded-2xl`, 33 | }, 34 | }; 35 | }; 36 | -------------------------------------------------------------------------------- /src/shared/classes/BlockFooterClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BlockFooterClasses = (props, colors) => { 4 | const { inset } = props; 5 | return { 6 | base: { 7 | common: cls( 8 | `mb-8 flex items-center -mt-6 text-sm`, 9 | inset ? 'pl-8-safe pr-8-safe' : 'pl-4-safe pr-4-safe' 10 | ), 11 | ios: colors.textIos, 12 | material: colors.textMaterial, 13 | }, 14 | }; 15 | }; 16 | -------------------------------------------------------------------------------- /src/shared/classes/BlockHeaderClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BlockHeaderClasses = (props, colors) => { 4 | const { inset } = props; 5 | return { 6 | base: { 7 | common: cls( 8 | `mt-8 flex items-center -mb-6 text-sm`, 9 | inset ? 'pl-8-safe pr-8-safe' : 'pl-4-safe pr-4-safe' 10 | ), 11 | ios: colors.textIos, 12 | material: colors.textMaterial, 13 | }, 14 | }; 15 | }; 16 | -------------------------------------------------------------------------------- /src/shared/classes/BlockTitleClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BlockTitleClasses = (props, colors) => { 4 | const { withBlock, medium, large } = props; 5 | return { 6 | base: { 7 | common: `pl-4-safe pr-4-safe mt-8 flex justify-between items-center ${ 8 | withBlock ? '-mb-6' : 'mb-2' 9 | }`, 10 | ios: cls( 11 | `font-semibold ${colors.textIos}`, 12 | large && 'text-[1.5rem]', 13 | medium && 'text-[1.125rem]', 14 | !medium && !large && 'text-[1rem]' 15 | ), 16 | material: cls( 17 | `font-medium ${colors.textMaterial}`, 18 | large && 'text-[1.375rem]', 19 | medium && 'text-[1rem]', 20 | !medium && !large && 'text-[0.875rem]' 21 | ), 22 | }, 23 | }; 24 | }; 25 | -------------------------------------------------------------------------------- /src/shared/classes/BreadcrumbsClasses.js: -------------------------------------------------------------------------------- 1 | export const BreadcrumbsClasses = (props) => { 2 | const { fontSizeIos, fontSizeMaterial } = props; 3 | return { 4 | base: { 5 | common: `flex items-center justify-start overflow-auto whitespace-nowrap py-1 px-0 space-x-3 no-scrollbar rtl:space-x-reverse`, 6 | ios: fontSizeIos, 7 | material: fontSizeMaterial, 8 | }, 9 | }; 10 | }; 11 | -------------------------------------------------------------------------------- /src/shared/classes/BreadcrumbsCollapsedClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BreadcrumbsCollapsedClasses = (props, colors) => { 4 | return { 5 | base: { 6 | common: `flex items-center cursor-pointer space-x-0.75 rtl:space-x-reverse ${colors.bg}`, 7 | ios: cls( 8 | `rounded active:opacity-30 px-1.5 h-[1em] duration-300 active:duration-0`, 9 | colors.bgIos 10 | ), 11 | material: cls('py-3 px-2 rounded-lg', colors.bgMaterial), 12 | }, 13 | dot: { 14 | common: `w-1 h-1 rounded-full ${colors.dotBg}`, 15 | ios: colors.dotBgIos, 16 | material: colors.dotBgMaterial, 17 | }, 18 | }; 19 | }; 20 | -------------------------------------------------------------------------------- /src/shared/classes/BreadcrumbsItemClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BreadcrumbsItemClasses = (props, colors) => { 4 | const { active } = props; 5 | return { 6 | base: { 7 | common: cls(`flex items-center overflow-hidden`), 8 | ios: cls( 9 | colors.textIos, 10 | colors.bgIos, 11 | active ? colors.textActiveIos : colors.textIos, 12 | active && 'font-semibold' 13 | ), 14 | material: cls( 15 | `font-medium px-2 py-1 rounded-lg`, 16 | colors.bgMaterial, 17 | active ? colors.textActiveMaterial : colors.textMaterial 18 | ), 19 | }, 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /src/shared/classes/BreadcrumbsSeparatorClasses.js: -------------------------------------------------------------------------------- 1 | export const BreadcrumbsSeparatorClasses = () => { 2 | return { 3 | base: { 4 | common: `w-3 opacity-35 flex justify-center`, 5 | ios: ``, 6 | material: ``, 7 | }, 8 | icon: { 9 | common: 'rtl:rotate-180', 10 | ios: 'h-3', 11 | material: 'h-2.5', 12 | }, 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/shared/classes/CardClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const CardClasses = (props, colors) => { 4 | const { margin, headerDivider, footerDivider, contentWrapPadding } = props; 5 | return { 6 | base: { 7 | common: cls(margin, `overflow-hidden`), 8 | ios: cls('rounded-lg', colors.bgIos, colors.textIos), 9 | material: cls('rounded-2xl', colors.bgMaterial, colors.textMaterial), 10 | plain: '', 11 | raised: 'shadow', 12 | outline: { 13 | common: cls(`border`), 14 | ios: colors.outlineIos, 15 | material: colors.outlineMaterial, 16 | }, 17 | }, 18 | header: { 19 | common: cls(headerDivider && `border-b`, `p-4`), 20 | ios: cls(headerDivider && colors.outlineIos, props.headerFontSizeIos), 21 | material: cls( 22 | headerDivider && colors.outlineMaterial, 23 | props.headerFontSizeMaterial 24 | ), 25 | }, 26 | content: cls(contentWrapPadding, 'text-sm'), 27 | footer: { 28 | common: cls(headerDivider && `border-t`, `text-sm p-4`), 29 | ios: cls(colors.footerTextIos, footerDivider && colors.outlineIos), 30 | material: cls( 31 | colors.footerTextMaterial, 32 | footerDivider && colors.outlineMaterial 33 | ), 34 | }, 35 | }; 36 | }; 37 | -------------------------------------------------------------------------------- /src/shared/classes/CheckboxClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const CheckboxClasses = (props, colors, classes, darkClasses) => { 5 | return { 6 | base: cls( 7 | `cursor-pointer inline-flex align-middle`, 8 | positionClass('relative', classes), 9 | darkClasses('dark:touch-ripple-white') 10 | ), 11 | iconWrap: { 12 | common: cls( 13 | `flex items-center justify-center text-white`, 14 | darkClasses('dark:text-black') 15 | ), 16 | ios: 'w-5.5 h-5.5 rounded-full border', 17 | material: 'w-4.5 h-4.5 rounded-sm border-2', 18 | notChecked: { 19 | ios: colors.borderIos, 20 | material: colors.borderMaterial, 21 | }, 22 | checked: { 23 | ios: `${colors.bgCheckedIos} ${colors.borderCheckedIos}`, 24 | material: `${colors.bgCheckedMaterial} ${colors.borderCheckedMaterial}`, 25 | }, 26 | }, 27 | icon: { 28 | notChecked: 'opacity-0', 29 | checked: 'opacity-100', 30 | }, 31 | indeterminateIcon: { 32 | common: cls(`bg-white w-3/4`, darkClasses('dark:bg-black')), 33 | ios: 'h-0.5 rounded-full', 34 | material: 'h-0.5', 35 | }, 36 | input: 'hidden', 37 | }; 38 | }; 39 | -------------------------------------------------------------------------------- /src/shared/classes/ChipClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ChipClasses = (props, colors) => { 4 | return { 5 | base: { 6 | common: `text-sm inline-flex items-center justify-center align-middle rounded-full px-3`, 7 | ios: 'rounded-full h-7', 8 | material: 'rounded-lg h-8 font-medium', 9 | fill: { 10 | ios: cls( 11 | colors.fillBg || colors.fillBgIos, 12 | colors.fillText || colors.fillTextIos 13 | ), 14 | material: cls( 15 | colors.fillBg || colors.fillBgMaterial, 16 | colors.fillText || colors.fillTextMaterial 17 | ), 18 | }, 19 | outline: { 20 | common: `border`, 21 | ios: cls( 22 | colors.outlineText || colors.outlineTextIos, 23 | colors.outlineBorder || colors.outlineBorderIos 24 | ), 25 | material: cls( 26 | colors.outlineText || colors.outlineTextMaterial, 27 | colors.outlineBorder || colors.outlineBorderMaterial 28 | ), 29 | }, 30 | }, 31 | media: { 32 | common: '-my-1 me-1 select-none', 33 | ios: '-ms-3', 34 | material: '-ms-2', 35 | }, 36 | deleteButton: 37 | '-me-2 -my-1 ms-1 h-full flex items-center justify-center w-6 cursor-pointer opacity-50 active:opacity-100 select-none', 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /src/shared/classes/DialogButtonClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const DialogButtonClasses = (props, colors) => { 4 | const { strong, disabled } = props; 5 | return { 6 | base: { 7 | ios: cls( 8 | 'text-center text-[17px] flex items-center justify-center h-11 w-full hairline-r rtl:hairline-l relative first:rounded-bl-xl last:rounded-br-xl rtl:first:rounded-br-xl rtl:first:rounded-bl-none rtl:last:rounded-bl-xl rtl:last:rounded-br-none', 9 | disabled ? colors.disabledTextIos : colors.textIos, 10 | strong && 'font-semibold', 11 | !disabled && colors.activeBgIos 12 | ), 13 | }, 14 | }; 15 | }; 16 | -------------------------------------------------------------------------------- /src/shared/classes/FabClasses.js: -------------------------------------------------------------------------------- 1 | export const FabClasses = (props, colors) => { 2 | return { 3 | base: { 4 | common: `flex items-center justify-center space-x-2 rtl:!space-x-reverse cursor-pointer overflow-hidden select-none`, 5 | ios: `h-12 duration-100 rounded-full shadow-lg ${colors.bgIos} ${colors.activeBgIos} ${colors.textIos}`, 6 | material: `duration-300 rounded-2xl shadow ${colors.bgMaterial} ${colors.activeBgMaterial} ${colors.textMaterial} ${colors.touchRipple}`, 7 | iconOnly: { 8 | ios: 'w-12', 9 | material: 'w-14 h-14', 10 | }, 11 | withText: { 12 | common: 'px-4', 13 | material: 'h-14', 14 | }, 15 | }, 16 | text: { 17 | common: 'text-sm', 18 | ios: 'font-semibold uppercase', 19 | material: 'font-medium', 20 | }, 21 | icon: { 22 | common: 'h-1em w-1em', 23 | ios: 'text-icon-ios', 24 | material: 'text-icon-material', 25 | }, 26 | }; 27 | }; 28 | -------------------------------------------------------------------------------- /src/shared/classes/IconClasses.js: -------------------------------------------------------------------------------- 1 | import { positionClass } from '../position-class.js'; 2 | 3 | export const IconClasses = (props, classes) => { 4 | return { 5 | base: `${positionClass('relative', classes)} inline-block not-italic`, 6 | badge: 'absolute -end-1.5 -top-0.5', 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /src/shared/classes/ListButtonClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const ListButtonClasses = (props, colors, classes) => { 5 | const { dividers } = props; 6 | return { 7 | base: ``, 8 | button: { 9 | common: cls( 10 | positionClass('relative', classes), 11 | dividers && 'hairline-b active:hairline-transparent', 12 | `flex items-center justify-center px-4 space-x-1 w-full duration-300 active:duration-0 focus:outline-none ${colors.touchRipple} overflow-hidden select-none` 13 | ), 14 | ios: cls('h-11', colors.textIos, colors.activeBgIos, colors.activeBgIos), 15 | material: cls('h-12', colors.textMaterial, colors.activeBgMaterial), 16 | }, 17 | }; 18 | }; 19 | -------------------------------------------------------------------------------- /src/shared/classes/ListClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const ListClasses = (props, colors, classes) => { 5 | const { nested, margin, inset, strong, outline } = props; 6 | return { 7 | base: { 8 | common: cls( 9 | !nested && margin, 10 | !inset && !nested && outline && 'hairline-t hairline-b', 11 | inset && outline && 'border', 12 | positionClass('relative', classes), 13 | 'z-10' 14 | ), 15 | ios: cls( 16 | strong && colors.strongBgIos, 17 | inset && outline && colors.outlineIos 18 | ), 19 | material: cls( 20 | strong && colors.strongBgMaterial, 21 | inset && outline && colors.outlineMaterial 22 | ), 23 | }, 24 | ul: { 25 | common: cls(inset && 'no-safe-areas', 'last-child-hairline-b-none'), 26 | }, 27 | inset: { 28 | common: `ml-4-safe mr-4-safe overflow-hidden`, 29 | ios: `rounded-lg`, 30 | material: `rounded-2xl`, 31 | }, 32 | menuList: { 33 | common: 'py-1', 34 | }, 35 | }; 36 | }; 37 | -------------------------------------------------------------------------------- /src/shared/classes/MessagesClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const MessagesClasses = () => { 4 | return { 5 | base: { 6 | common: cls('flex flex-col relative z-1 px-2'), 7 | ios: 'mb-12', 8 | material: 'mb-16', 9 | }, 10 | }; 11 | }; 12 | -------------------------------------------------------------------------------- /src/shared/classes/MessagesTitleClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const MessagesTitleClasses = (props, colors) => { 4 | return { 5 | base: { 6 | common: cls('text-center text-xs leading-none'), 7 | ios: cls('w-full mt-2.5', colors.titleIos), 8 | material: cls('mt-4', colors.titleMd), 9 | }, 10 | }; 11 | }; 12 | -------------------------------------------------------------------------------- /src/shared/classes/NavbarBackLinkClasses.js: -------------------------------------------------------------------------------- 1 | export const NavbarBackLinkClasses = () => { 2 | return { 3 | base: { 4 | common: 'cursor-pointer', 5 | material: 'min-w-12 k-touch-ripple-inset', 6 | }, 7 | icon: 'rtl:rotate-180', 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/shared/classes/PageClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const PageClasses = (props, colors, classes) => { 5 | return { 6 | base: { 7 | common: cls( 8 | 'h-full w-full left-0 top-0 overflow-auto', 9 | positionClass('absolute', classes) 10 | ), 11 | ios: colors.bgIos, 12 | material: colors.bgMaterial, 13 | }, 14 | }; 15 | }; 16 | -------------------------------------------------------------------------------- /src/shared/classes/PopupClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const PopupClasses = (props, colors, classes) => { 5 | const { size } = props; 6 | return { 7 | base: { 8 | common: cls( 9 | 'left-1/2 top-1/2 transition-transform transform -translate-x-1/2 z-40 max-w-full max-h-full overflow-hidden md:no-safe-areas', 10 | colors.bg, 11 | positionClass('fixed', classes), 12 | size 13 | ), 14 | ios: 'duration-400 md:rounded-lg', 15 | material: ' md:rounded-[1.75rem]', 16 | opened: { 17 | common: '-translate-y-1/2', 18 | material: cls('ease-material-in-popup duration-[600ms]'), 19 | }, 20 | closed: { common: 'translate-y-full', material: 'duration-400' }, 21 | }, 22 | backdrop: { 23 | common: 24 | 'fixed z-40 w-full h-full left-0 top-0 bg-black bg-opacity-50 duration-400', 25 | opened: '', 26 | closed: 'opacity-0 pointer-events-none', 27 | }, 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /src/shared/classes/PreloaderClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const PreloaderClasses = (props, colors, theme) => { 4 | const { size } = props; 5 | return { 6 | base: { 7 | common: cls( 8 | theme === 'ios' ? 'k-ios-preloader' : 'k-material-preloader', 9 | `inline-block ${size}` 10 | ), 11 | ios: colors.iconIos, 12 | material: `stroke-4 ${colors.iconMaterial}`, 13 | }, 14 | inner: { 15 | common: `block w-full h-full`, 16 | }, 17 | }; 18 | }; 19 | -------------------------------------------------------------------------------- /src/shared/classes/ProgressbarClasses.js: -------------------------------------------------------------------------------- 1 | export const ProgressbarClasses = (colors) => { 2 | return { 3 | base: { 4 | common: `block h-1 bg-opacity-30 dark:bg-opacity-30 overflow-hidden rtl:rotate-180`, 5 | ios: `bg-black rounded-full`, 6 | material: colors.bgMaterial, 7 | }, 8 | inner: { 9 | common: `block duration-200 w-full h-full`, 10 | ios: colors.bgIos, 11 | material: colors.bgMaterial, 12 | }, 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/shared/classes/RadioClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const RadioClasses = (props, colors, classes, darkClasses) => { 5 | return { 6 | base: cls( 7 | `cursor-pointer inline-flex align-middle`, 8 | positionClass('relative', classes), 9 | darkClasses('dark:touch-ripple-white') 10 | ), 11 | iconWrap: { 12 | common: 'flex items-center justify-center rounded-full', 13 | ios: 'w-5.5 h-5.5 border', 14 | material: 'w-5 h-5 border-2', 15 | notChecked: { 16 | ios: colors.borderIos, 17 | material: colors.borderMaterial, 18 | }, 19 | checked: { 20 | ios: colors.borderCheckedIos, 21 | material: colors.borderCheckedMaterial, 22 | }, 23 | }, 24 | icon: { 25 | ios: 'text-primary', 26 | material: `w-3 h-3 rounded-full ${colors.bgCheckedMaterial}`, 27 | notChecked: 'opacity-0', 28 | checked: 'opacity-100', 29 | }, 30 | indeterminateIcon: { 31 | common: 'bg-white w-3/4', 32 | ios: 'h-0.25', 33 | material: 'h-0.5', 34 | }, 35 | input: { 36 | common: 'sr-only', 37 | }, 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /src/shared/classes/SheetClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | import { positionClass } from '../position-class.js'; 3 | 4 | export const SheetClasses = (props, colors, classes) => { 5 | return { 6 | base: { 7 | common: cls( 8 | 'left-0 top-full transition-transform duration-400 z-40 overflow-hidden', 9 | positionClass('fixed', classes) 10 | ), 11 | ios: '', 12 | material: `rounded-t-2xl ease-material-in ${colors.bgIos}`, 13 | opened: `-translate-y-full ${colors.bgMaterial}`, 14 | closed: '', 15 | }, 16 | backdrop: { 17 | common: 18 | 'fixed z-40 w-full h-full left-0 top-0 bg-black bg-opacity-50 duration-400', 19 | opened: '', 20 | closed: 'opacity-0 pointer-events-none', 21 | }, 22 | }; 23 | }; 24 | -------------------------------------------------------------------------------- /src/shared/classes/TabbarLinkClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const TabbarLinkClasses = ( 4 | { hasIcon, hasLabel, active } = {}, 5 | colors = {} 6 | ) => { 7 | return { 8 | content: { 9 | common: 'flex flex-col items-center justify-center h-full', 10 | ios: cls('py-1', active ? colors.textActiveIos : colors.textIos), 11 | material: cls( 12 | 'py-2', 13 | hasIcon && hasLabel && 'space-y-1', 14 | active ? colors.textActiveMaterial : colors.textMaterial 15 | ), 16 | }, 17 | iconContainer: { 18 | common: 'flex items-center justify-center k-tabbar-link-icon relative', 19 | ios: cls('w-7 h-7'), 20 | material: cls('w-16 h-8 rounded-full'), 21 | }, 22 | iconBg: { 23 | common: 24 | 'absolute left-0 top-0 w-full h-full rounded-full duration-200 -z-10 pointer-events-none', 25 | ios: cls(active ? colors.iconBgActiveIos : colors.iconBgIos), 26 | material: cls( 27 | active ? colors.iconBgActiveMaterial : colors.iconBgMaterial, 28 | !active && 'scale-x-[0.5] opacity-0' 29 | ), 30 | }, 31 | label: { 32 | ios: cls(hasIcon ? 'text-xs font-medium' : '', ''), 33 | material: cls(hasIcon ? 'text-xs' : 'text-sm', 'font-medium'), 34 | }, 35 | }; 36 | }; 37 | -------------------------------------------------------------------------------- /src/shared/classes/TableBodyClasses.js: -------------------------------------------------------------------------------- 1 | export const TableBodyClasses = () => { 2 | return { 3 | base: { 4 | common: 'text-sm', 5 | ios: '', 6 | material: ``, 7 | }, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/shared/classes/TableCellClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const TableCellClasses = (props, colors, classes) => { 4 | const { header } = props; 5 | return { 6 | base: { 7 | common: cls('align-middle', classes), 8 | ios: cls( 9 | header 10 | ? `text-xs font-semibold overflow-hidden whitespace-nowrap leading-4 h-11 bg-transparent ${colors.textHeaderIos} py-0 px-4` 11 | : `h-11 relative py-0 px-4` 12 | ), 13 | material: cls( 14 | header 15 | ? `${colors.textHeaderMaterial} px-6 py-0 text-xs font-medium overflow-hidden text-ellipsis whitespace-nowrap leading-4 h-14 bg-transparent` 16 | : `py-0 first:px-6 px-7 h-12` 17 | ), 18 | }, 19 | }; 20 | }; 21 | -------------------------------------------------------------------------------- /src/shared/classes/TableClasses.js: -------------------------------------------------------------------------------- 1 | export const TableClasses = () => { 2 | return { 3 | base: { 4 | common: 'w-full border-none p-0 m-0 border-collapse text-left table', 5 | ios: '', 6 | material: ``, 7 | }, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/shared/classes/TableHeadClasses.js: -------------------------------------------------------------------------------- 1 | export const TableHeadClasses = () => { 2 | return { 3 | base: { 4 | common: 'align-middle relative', 5 | ios: 'hairline-b', 6 | material: '', 7 | }, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/shared/classes/TableRowClasses.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const TableRowClasses = (props, colors) => { 4 | const { header } = props; 5 | return { 6 | base: { 7 | common: 'align-middle relative', 8 | ios: header 9 | ? '' 10 | : cls(colors.bgIos, 'hairline-b last:hairline-transparent'), 11 | material: header 12 | ? '' 13 | : cls(colors.bgMaterial, `border-t ${colors.dividerMaterial}`), 14 | }, 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /src/shared/cls.js: -------------------------------------------------------------------------------- 1 | export function cls(...args) { 2 | const classes = []; 3 | args.forEach((arg) => { 4 | if (typeof arg === 'object' && arg.constructor === Object) { 5 | Object.keys(arg).forEach((key) => { 6 | if (arg[key]) classes.push(key); 7 | }); 8 | } else if (Array.isArray(arg)) { 9 | classes.push(...arg); 10 | } else if (typeof arg === 'function') { 11 | classes.push(arg()); 12 | } else if (arg && arg.value) { 13 | classes.push(arg.value); 14 | } else if (arg) classes.push(arg); 15 | }); 16 | const uniqueClasses = []; 17 | classes.forEach((c) => { 18 | if (uniqueClasses.indexOf(c) < 0) uniqueClasses.push(c); 19 | }); 20 | return uniqueClasses.filter((c) => !!c).join(' '); 21 | } 22 | -------------------------------------------------------------------------------- /src/shared/colors/ActionsButtonColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ActionsButtonColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls('bg-white', dark('dark:bg-neutral-800')), 6 | bgMaterial: cls('bg-md-light-surface-3', dark('dark:bg-md-dark-surface-3')), 7 | activeBgIos: cls( 8 | 'active:bg-neutral-200', 9 | dark('dark:active:bg-neutral-700') 10 | ), 11 | activeBgMaterial: '', 12 | textIos: 'text-primary', 13 | textMaterial: cls( 14 | 'text-md-light-on-surface', 15 | dark('dark:text-md-dark-on-surface') 16 | ), 17 | ...colorsProp, 18 | }; 19 | }; 20 | -------------------------------------------------------------------------------- /src/shared/colors/ActionsColors.js: -------------------------------------------------------------------------------- 1 | export const ActionsColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/ActionsGroupColors.js: -------------------------------------------------------------------------------- 1 | export const ActionsGroupColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/ActionsLabelColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ActionsLabelColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls('bg-white', dark('dark:bg-neutral-800')), 6 | bgMaterial: cls('bg-md-light-surface-3', dark('dark:bg-md-dark-surface-3')), 7 | textIos: cls( 8 | 'text-black text-opacity-55', 9 | dark('dark:text-white dark:text-opacity-55') 10 | ), 11 | textMaterial: cls( 12 | 'text-md-light-primary', 13 | dark('dark:text-md-dark-primary') 14 | ), 15 | ...colorsProp, 16 | }; 17 | }; 18 | -------------------------------------------------------------------------------- /src/shared/colors/AppColors.js: -------------------------------------------------------------------------------- 1 | export const AppColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/BadgeColors.js: -------------------------------------------------------------------------------- 1 | export const BadgeColors = (colorsProp = {}) => { 2 | return { 3 | bg: 'bg-primary', 4 | text: 'text-white', 5 | ...colorsProp, 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /src/shared/colors/BlockColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BlockColors = (colorsProp = {}, dark) => { 4 | return { 5 | outlineIos: cls( 6 | 'border-black border-opacity-20', 7 | dark('dark:border-white dark:border-opacity-15') 8 | ), 9 | outlineMaterial: cls( 10 | 'border-md-light-outline', 11 | dark('border-md-dark-outline') 12 | ), 13 | strongBgIos: cls( 14 | `bg-ios-light-surface-1`, 15 | dark('dark:bg-ios-dark-surface-1') 16 | ), 17 | strongBgMaterial: cls( 18 | 'bg-md-light-surface-1', 19 | dark('dark:bg-md-dark-surface-1') 20 | ), 21 | textIos: '', 22 | textMaterial: cls( 23 | 'text-md-light-on-surface', 24 | dark('dark:text-md-dark-on-surface') 25 | ), 26 | ...colorsProp, 27 | }; 28 | }; 29 | -------------------------------------------------------------------------------- /src/shared/colors/BlockFooterColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BlockFooterColors = (colorsProp = {}, dark) => { 4 | return { 5 | textIos: cls( 6 | 'text-black text-opacity-75', 7 | dark('dark:text-white dark:text-opacity-75') 8 | ), 9 | textMaterial: cls( 10 | 'text-md-light-on-surface-variant', 11 | dark('dark:text-md-dark-on-surface-variant') 12 | ), 13 | ...colorsProp, 14 | }; 15 | }; 16 | -------------------------------------------------------------------------------- /src/shared/colors/BlockHeaderColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BlockHeaderColors = (colorsProp = {}, dark) => { 4 | return { 5 | textIos: cls('text-black', dark('dark:text-white')), 6 | textMaterial: cls( 7 | 'text-md-light-on-surface-variant', 8 | dark('dark:text-md-dark-on-surface-variant') 9 | ), 10 | ...colorsProp, 11 | }; 12 | }; 13 | -------------------------------------------------------------------------------- /src/shared/colors/BlockTitleColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BlockTitleColors = (colorsProp = {}, dark) => { 4 | return { 5 | textIos: '', 6 | textMaterial: cls( 7 | 'text-md-light-primary', 8 | dark('dark:text-md-dark-primary') 9 | ), 10 | ...colorsProp, 11 | }; 12 | }; 13 | -------------------------------------------------------------------------------- /src/shared/colors/BreadcrumbsCollapsedColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BreadcrumbsCollapsedColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls( 6 | 'bg-black bg-opacity-15', 7 | dark('dark:bg-white dark:bg-opacity-15') 8 | ), 9 | bgMaterial: cls( 10 | 'bg-md-light-secondary-container', 11 | dark('dark:bg-md-dark-secondary-container') 12 | ), 13 | dotBgIos: cls('bg-black', dark('dark:bg-white')), 14 | dotBgMaterial: cls('bg-md-light-primary', dark('dark:bg-md-dark-primary')), 15 | ...colorsProp, 16 | }; 17 | }; 18 | -------------------------------------------------------------------------------- /src/shared/colors/BreadcrumbsColors.js: -------------------------------------------------------------------------------- 1 | export const BreadcrumbsColors = (colorsProp = {}) => { 2 | return { 3 | ...colorsProp, 4 | }; 5 | }; 6 | -------------------------------------------------------------------------------- /src/shared/colors/BreadcrumbsItemColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const BreadcrumbsItemColors = (colorsProp = {}, dark) => { 4 | return { 5 | textIos: cls( 6 | 'text-black text-opacity-55', 7 | dark('dark:text-white dark:text-opacity-55') 8 | ), 9 | textMaterial: cls( 10 | 'text-md-light-on-secondary-container', 11 | dark('dark:text-md-dark-on-secondary-container') 12 | ), 13 | bgIos: '', 14 | bgMaterial: cls( 15 | 'bg-md-light-secondary-container', 16 | dark('dark:bg-md-dark-secondary-container') 17 | ), 18 | textActiveIos: cls('text-black', dark('dark:text-white')), 19 | textActiveMaterial: cls( 20 | 'text-md-light-on-secondary-container', 21 | dark('dark:text-md-dark-on-secondary-container') 22 | ), 23 | ...colorsProp, 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /src/shared/colors/BreadcrumbsSeparatorColors.js: -------------------------------------------------------------------------------- 1 | export const BreadcrumbsSeparatorColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/CardColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const CardColors = (colorsProp = {}, dark) => { 4 | return { 5 | textIos: cls(''), 6 | textMaterial: cls( 7 | 'text-md-light-on-surface', 8 | dark('dark:text-md-dark-on-surface') 9 | ), 10 | bgIos: cls(`bg-ios-light-surface-1`, dark('dark:bg-ios-dark-surface-1')), 11 | bgMaterial: cls('bg-md-light-surface-1', dark('dark:bg-md-dark-surface-1')), 12 | footerTextIos: cls( 13 | `text-black text-opacity-55`, 14 | dark('dark:text-white dark:text-opacity-55') 15 | ), 16 | footerTextMaterial: cls( 17 | `text-md-light-on-surface-variant`, 18 | dark('dark:text-md-dark-on-surface-variant') 19 | ), 20 | outlineIos: cls( 21 | 'border-black border-opacity-20', 22 | dark('dark:border-white dark:border-opacity-20') 23 | ), 24 | outlineMaterial: cls( 25 | 'border-md-light-outline', 26 | dark('dark:border-md-dark-outline') 27 | ), 28 | ...colorsProp, 29 | }; 30 | }; 31 | -------------------------------------------------------------------------------- /src/shared/colors/CheckboxColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const CheckboxColors = (colorsProp = {}, dark) => { 4 | return { 5 | borderIos: cls( 6 | `border-black border-opacity-30`, 7 | dark('dark:border-white dark:border-opacity-30') 8 | ), 9 | borderMaterial: cls( 10 | `border-md-light-outline`, 11 | dark('dark:border-md-dark-outline') 12 | ), 13 | bgCheckedIos: 'bg-primary', 14 | bgCheckedMaterial: cls( 15 | 'bg-md-light-primary', 16 | dark('dark:bg-md-dark-primary') 17 | ), 18 | borderCheckedIos: 'border-primary', 19 | borderCheckedMaterial: cls( 20 | 'border-md-light-primary', 21 | dark('dark:border-md-dark-primary') 22 | ), 23 | ...colorsProp, 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /src/shared/colors/ChipColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ChipColors = (colorsProp = {}, dark) => { 4 | return { 5 | fillTextIos: 'text-current', 6 | fillTextMaterial: cls( 7 | 'text-md-light-on-secondary-container', 8 | dark('dark:text-md-dark-on-secondary-container') 9 | ), 10 | fillBgIos: cls( 11 | `bg-black bg-opacity-10`, 12 | dark('dark:bg-white dark:bg-opacity-10') 13 | ), 14 | fillBgMaterial: cls( 15 | 'bg-md-light-secondary-container', 16 | dark('dark:bg-md-dark-secondary-container') 17 | ), 18 | outlineTextIos: cls('text-current'), 19 | outlineTextMaterial: cls( 20 | 'text-md-light-on-surface', 21 | dark('dark:text-md-dark-on-surface') 22 | ), 23 | outlineBorderIos: cls( 24 | `border-black border-opacity-20`, 25 | dark('dark:border-white dark:border-opacity-20') 26 | ), 27 | outlineBorderMaterial: cls( 28 | `border-md-light-outline`, 29 | dark('dark:border-md-dark-outline') 30 | ), 31 | ...colorsProp, 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /src/shared/colors/DialogButtonColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const DialogButtonColors = (colorsProp = {}, dark) => { 4 | return { 5 | activeBgIos: cls( 6 | 'active:bg-black active:bg-opacity-10', 7 | dark('dark:active:bg-white dark:active:bg-opacity-10') 8 | ), 9 | textIos: 'text-primary', 10 | disabledTextIos: cls( 11 | 'text-black text-opacity-30', 12 | dark('dark:text-white dark:text-opacity-30') 13 | ), 14 | ...colorsProp, 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /src/shared/colors/DialogColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const DialogColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls('bg-white', dark('dark:bg-neutral-800')), 6 | bgMaterial: cls('bg-md-light-surface-3', dark('dark:bg-md-dark-surface-3')), 7 | titleIos: '', 8 | titleMaterial: cls( 9 | 'text-md-light-on-surface', 10 | dark('dark:text-md-dark-on-surface') 11 | ), 12 | contentTextIos: '', 13 | contentTextMaterial: cls( 14 | 'text-md-light-on-surface-variant', 15 | dark('dark:text-md-dark-on-surface-variant') 16 | ), 17 | ...colorsProp, 18 | }; 19 | }; 20 | -------------------------------------------------------------------------------- /src/shared/colors/FabColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const FabColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: 'bg-primary', 6 | bgMaterial: cls( 7 | 'bg-md-light-primary-container', 8 | dark('dark:bg-md-dark-primary-container') 9 | ), 10 | activeBgIos: 'active:bg-ios-primary-shade', 11 | activeBgMaterial: '', 12 | textIos: 'text-white', 13 | textMaterial: cls( 14 | 'text-md-light-on-primary-container', 15 | dark('dark:text-md-dark-on-primary-container') 16 | ), 17 | touchRipple: cls('touch-ripple-primary', dark('dark:touch-ripple-white')), 18 | ...colorsProp, 19 | }; 20 | }; 21 | -------------------------------------------------------------------------------- /src/shared/colors/IconColors.js: -------------------------------------------------------------------------------- 1 | export const IconColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/LinkColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const LinkColors = (colorsProp = {}, dark) => { 4 | return { 5 | textIos: 'text-primary', 6 | textMaterial: cls( 7 | 'text-md-light-primary', 8 | dark('dark:text-md-dark-primary') 9 | ), 10 | navbarTextIos: 'text-primary', 11 | navbarTextMaterial: '', 12 | ...colorsProp, 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/shared/colors/ListButtonColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ListButtonColors = (colorsProp = {}, dark) => { 4 | return { 5 | textIos: 'text-primary', 6 | textMaterial: cls( 7 | 'text-md-light-primary', 8 | dark('dark:text-md-dark-primary') 9 | ), 10 | activeBgIos: 'active:bg-primary active:bg-opacity-15', 11 | activeBgMaterial: '', 12 | touchRipple: 'touch-ripple-primary', 13 | ...colorsProp, 14 | }; 15 | }; 16 | -------------------------------------------------------------------------------- /src/shared/colors/ListColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ListColors = (colorsProp = {}, dark) => { 4 | return { 5 | outlineIos: cls( 6 | 'border-black border-opacity-20', 7 | dark('dark:border-white dark:border-opacity-15') 8 | ), 9 | outlineMaterial: cls( 10 | 'border-md-light-outline', 11 | dark('border-md-dark-outline') 12 | ), 13 | strongBgIos: cls( 14 | `bg-ios-light-surface-1`, 15 | dark('dark:bg-ios-dark-surface-1') 16 | ), 17 | strongBgMaterial: cls( 18 | 'bg-md-light-surface-1', 19 | dark('dark:bg-md-dark-surface-1') 20 | ), 21 | ...colorsProp, 22 | }; 23 | }; 24 | -------------------------------------------------------------------------------- /src/shared/colors/ListGroupColors.js: -------------------------------------------------------------------------------- 1 | export const ListGroupColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/MenuListColors.js: -------------------------------------------------------------------------------- 1 | export const MenuListColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/MenuListItemColors.js: -------------------------------------------------------------------------------- 1 | export const MenuListItemColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/MessageColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const MessageColors = (colorsProp = {}, dark) => { 4 | return { 5 | messageSent: 'text-white', 6 | messageReceived: 'text-inherit', 7 | messageNameIos: cls( 8 | 'text-black text-opacity-45', 9 | dark('dark:text-white dark:text-opacity-45') 10 | ), 11 | messageNameMd: cls( 12 | 'text-md-light-on-surface-variant', 13 | dark('dark:text-md-dark-on-surface-variant') 14 | ), 15 | bubbleSentIos: cls('bg-primary'), 16 | bubbleSentMd: cls( 17 | 'bg-md-light-primary', 18 | dark('dark:bg-md-dark-primary dark:text-md-dark-on-primary') 19 | ), 20 | bubbleReceivedIos: cls('bg-[#e5e5ea]', dark('dark:bg-[#252525]')), 21 | bubbleReceivedMd: cls( 22 | dark('dark:bg-md-dark-surface-variant'), 23 | 'bg-[#e5e5ea]' 24 | ), 25 | ...colorsProp, 26 | }; 27 | }; 28 | -------------------------------------------------------------------------------- /src/shared/colors/MessagebarColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const MessagebarColors = (colorsProp = {}, dark) => { 4 | return { 5 | toolbarIconIos: cls('fill-primary', dark('dark:fill-md-dark-primary')), 6 | toolbarIconMd: cls('fill-black'), 7 | inputBgIos: cls('bg-transparent'), 8 | borderIos: cls( 9 | 'border-[#c8c8cd]', 10 | dark('dark:border-white dark:border-opacity-30') 11 | ), 12 | inputBgMd: cls( 13 | 'bg-md-light-surface-2', 14 | dark('dark:bg-md-dark-surface-variant') 15 | ), 16 | placeholderIos: cls( 17 | dark('dark:placeholder-white dark:placeholder-opacity-40') 18 | ), 19 | placeholderMd: cls( 20 | 'placeholder-md-light-on-surface-variant', 21 | dark('dark:placeholder-md-dark-on-surface-variant') 22 | ), 23 | bgIos: cls('bg-white', dark('dark:bg-black')), 24 | bgMaterial: cls('bg-md-light-surface', dark('dark:bg-md-dark-surface')), 25 | ...colorsProp, 26 | }; 27 | }; 28 | -------------------------------------------------------------------------------- /src/shared/colors/MessagesTitleColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const MessagesTitleColors = (colorsProp = {}, dark) => { 4 | return { 5 | titleIos: cls( 6 | 'text-black text-opacity-45', 7 | dark('dark:text-white dark:text-opacity-45') 8 | ), 9 | titleMd: cls( 10 | 'text-md-light-on-surface-variant', 11 | dark('dark:text-md-dark-on-surface-variant') 12 | ), 13 | ...colorsProp, 14 | }; 15 | }; 16 | -------------------------------------------------------------------------------- /src/shared/colors/NavbarBackLinkColors.js: -------------------------------------------------------------------------------- 1 | export const NavbarBackLinkColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/NavbarColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const NavbarColors = (colorsProp, dark) => { 4 | return { 5 | bgIos: cls('bg-ios-light-surface-2', dark('dark:bg-ios-dark-surface-2')), 6 | bgMaterial: cls('bg-md-light-surface-2', dark('dark:bg-md-dark-surface-2')), 7 | textIos: cls('text-black', dark('dark:text-white')), 8 | textMaterial: cls( 9 | 'text-md-light-on-surface', 10 | dark('dark:text-md-dark-on-surface') 11 | ), 12 | ...colorsProp, 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/shared/colors/NotificationsColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const NotificationsColors = (colorsProp, dark) => { 4 | return { 5 | bgIos: cls('bg-white', dark('dark:bg-[#1e1e1e]')), 6 | bgMaterial: cls('bg-md-light-surface-5', dark('dark:bg-md-dark-surface-5')), 7 | titleIos: cls('text-black', dark('dark:text-white')), 8 | titleRightIos: cls( 9 | 'text-opacity-45 text-black', 10 | dark('dark:text-white dark:text-opacity-45') 11 | ), 12 | titleRightMd: cls( 13 | 'text-md-light-on-surface-variant before:bg-md-light-on-surface-variant', 14 | dark( 15 | 'dark:text-md-dark-on-surface-variant before:dark:bg-md-dark-on-surface-variant' 16 | ) 17 | ), 18 | subtitleIos: cls('text-black ', dark('dark:text-white')), 19 | textMaterial: cls( 20 | 'text-md-light-on-surface-variant', 21 | dark('dark:text-md-dark-on-surface-variant ') 22 | ), 23 | deleteIconIos: cls( 24 | 'fill-stone-400 active:fill-stone-200', 25 | dark('dark:fill-stone-500 dark:active:fill-stone-700') 26 | ), 27 | deleteIconMd: cls( 28 | 'text-md-light-on-surface-variant', 29 | dark('dark:text-md-dark-on-surface-variant') 30 | ), 31 | ...colorsProp, 32 | }; 33 | }; 34 | -------------------------------------------------------------------------------- /src/shared/colors/PageColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const PageColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls('bg-ios-light-surface', dark('dark:bg-ios-dark-surface')), 6 | bgMaterial: cls('bg-md-light-surface', dark('dark:bg-md-dark-surface')), 7 | ...colorsProp, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/shared/colors/PanelColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const PanelColors = (colorsProp = {}, dark) => { 4 | return { 5 | bg: cls('bg-white', dark('dark:bg-black')), 6 | ...colorsProp, 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /src/shared/colors/PopoverColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const PopoverColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls('bg-ios-light-surface-3', dark('dark:bg-ios-dark-surface-3')), 6 | bgMaterial: cls('bg-md-light-surface-3', dark('dark:bg-md-dark-surface-3')), 7 | ...colorsProp, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/shared/colors/PopupColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const PopupColors = (colorsProp = {}, dark) => { 4 | return { 5 | bg: cls('bg-white', dark('dark:bg-black')), 6 | ...colorsProp, 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /src/shared/colors/PreloaderColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const PreloaderColors = (colorsProp = {}, dark) => { 4 | return { 5 | iconIos: 'text-primary', 6 | iconMaterial: cls( 7 | 'text-md-light-primary', 8 | dark('dark:text-md-dark-primary') 9 | ), 10 | ...colorsProp, 11 | }; 12 | }; 13 | -------------------------------------------------------------------------------- /src/shared/colors/ProgressbarColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ProgressbarColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: 'bg-primary', 6 | bgMaterial: cls('bg-md-light-primary', dark('dark:bg-md-dark-primary')), 7 | ...colorsProp, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/shared/colors/RadioColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const RadioColors = (colorsProp = {}, dark) => { 4 | return { 5 | borderIos: cls( 6 | 'border-black border-opacity-30', 7 | dark('dark:border-white dark:border-opacity-30') 8 | ), 9 | borderMaterial: cls( 10 | `border-md-light-outline`, 11 | dark('dark:border-md-dark-outline') 12 | ), 13 | bgCheckedIos: 'bg-primary', 14 | bgCheckedMaterial: cls( 15 | 'bg-md-light-primary', 16 | dark('dark:bg-md-dark-primary') 17 | ), 18 | borderCheckedIos: 'border-primary', 19 | borderCheckedMaterial: cls( 20 | 'border-md-light-primary', 21 | dark('dark:border-md-dark-primary') 22 | ), 23 | ...colorsProp, 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /src/shared/colors/RangeColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const RangeColors = (colorsProp = {}, dark) => { 4 | return { 5 | valueBgIos: 'bg-primary', 6 | valueBgMaterial: cls( 7 | 'bg-md-light-primary', 8 | dark('dark:bg-md-dark-primary') 9 | ), 10 | thumbBgIos: 'range-thumb:bg-white', 11 | thumbBgMaterial: cls( 12 | 'range-thumb:bg-md-light-primary', 13 | dark('dark:range-thumb:bg-md-dark-primary') 14 | ), 15 | ...colorsProp, 16 | }; 17 | }; 18 | -------------------------------------------------------------------------------- /src/shared/colors/SearchbarColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const SearchbarColors = (colorsProp = {}, dark) => { 4 | return { 5 | inputBgIos: '', 6 | inputBgMaterial: cls( 7 | 'bg-md-light-secondary-container', 8 | dark('dark:bg-md-dark-secondary-container') 9 | ), 10 | placeholderIos: '', 11 | placeholderMaterial: cls( 12 | 'placeholder-md-light-on-surface-variant', 13 | dark('dark:placeholder-md-dark-on-surface-variant') 14 | ), 15 | ...colorsProp, 16 | }; 17 | }; 18 | -------------------------------------------------------------------------------- /src/shared/colors/SegmentedButtonColors.js: -------------------------------------------------------------------------------- 1 | export const SegmentedButtonColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/SegmentedColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const SegmentedColors = (colorsProp = {}, dark) => { 4 | return { 5 | strongBgIos: cls( 6 | 'bg-black bg-opacity-5', 7 | dark('dark:bg-white dark:bg-opacity-10') 8 | ), 9 | strongBgMaterial: cls( 10 | 'bg-md-light-surface-variant', 11 | dark('dark:bg-md-dark-surface-variant') 12 | ), 13 | 14 | borderIos: 'border-primary', 15 | borderMaterial: cls( 16 | 'border-md-light-outline', 17 | dark('dark:border-md-dark-outline') 18 | ), 19 | divideIos: 'divide-primary', 20 | divideMaterial: cls( 21 | 'divide-md-light-outline', 22 | dark('dark:divide-md-dark-outline') 23 | ), 24 | ...colorsProp, 25 | }; 26 | }; 27 | -------------------------------------------------------------------------------- /src/shared/colors/SheetColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const SheetColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls('bg-white', dark('dark:bg-black')), 6 | bgMaterial: cls('bg-md-light-surface', dark('dark:bg-md-dark-surface')), 7 | ...colorsProp, 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/shared/colors/StepperColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const StepperColors = (colorsProp = {}, dark) => { 4 | return { 5 | activeBgIos: 'active:bg-primary', 6 | activeBgMaterial: '', 7 | textIos: 'text-primary', 8 | textMaterial: cls('text-md-light-primary', 'dark:text-md-dark-primary'), 9 | fillTextIos: cls('text-white'), 10 | fillTextMaterial: cls( 11 | 'text-md-light-on-primary', 12 | dark('dark:text-md-dark-on-primary') 13 | ), 14 | fillBgIos: 'bg-primary', 15 | fillBgMaterial: cls('bg-md-light-primary', dark('dark:bg-md-dark-primary')), 16 | fillActiveBgIos: 'active:bg-ios-primary-shade', 17 | fillActiveBgMaterial: '', 18 | fillTouchRipple: cls('touch-ripple-white', 'dark:touch-ripple-primary'), 19 | outlineBorderIos: 'border-primary', 20 | outlineBorderMaterial: cls( 21 | 'border-md-light-outline', 22 | dark('dark:border-md-dark-outline') 23 | ), 24 | touchRipple: 'touch-ripple-primary', 25 | ...colorsProp, 26 | }; 27 | }; 28 | -------------------------------------------------------------------------------- /src/shared/colors/TabbarColors.js: -------------------------------------------------------------------------------- 1 | export const TabbarColors = () => { 2 | return {}; 3 | }; 4 | -------------------------------------------------------------------------------- /src/shared/colors/TabbarLinkColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const TabbarLinkColors = (colorsProp = {}, dark) => { 4 | return { 5 | textIos: cls( 6 | 'text-black text-opacity-40', 7 | dark('dark:text-white dark:text-opacity-55') 8 | ), 9 | textActiveIos: 'text-primary', 10 | textMaterial: cls( 11 | 'text-md-light-on-surface-variant', 12 | dark('dark:text-md-dark-on-surface-variant') 13 | ), 14 | textActiveMaterial: cls( 15 | 'text-md-light-on-secondary-container', 16 | dark('dark:text-md-dark-on-secondary-container') 17 | ), 18 | iconBgIos: '', 19 | iconBgActiveIos: '', 20 | iconBgMaterial: '', 21 | iconBgActiveMaterial: cls( 22 | 'bg-md-light-secondary-container', 23 | dark('dark:bg-md-dark-secondary-container') 24 | ), 25 | ...colorsProp, 26 | }; 27 | }; 28 | -------------------------------------------------------------------------------- /src/shared/colors/TableCellColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const TableCellColors = (colorsProp = {}, dark) => { 4 | return { 5 | textHeaderIos: cls('text-black/45', dark('dark:text-white/55')), 6 | textHeaderMaterial: cls( 7 | 'text-md-light-on-surface-variant', 8 | dark('dark:text-md-dark-on-surface-variant') 9 | ), 10 | ...colorsProp, 11 | }; 12 | }; 13 | -------------------------------------------------------------------------------- /src/shared/colors/TableRowColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const TableRowColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls('hover:bg-black/5', dark('dark:hover:bg-white/10')), 6 | bgMaterial: cls( 7 | 'hover:bg-md-light-secondary-container', 8 | dark('dark:hover:bg-md-dark-secondary-container') 9 | ), 10 | dividerMaterial: cls( 11 | 'border-md-light-outline', 12 | dark('dark:border-md-dark-outline') 13 | ), 14 | ...colorsProp, 15 | }; 16 | }; 17 | -------------------------------------------------------------------------------- /src/shared/colors/ToastColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ToastColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: 'bg-black', 6 | bgMaterial: cls('bg-md-light-surface-5', dark('dark:bg-md-dark-surface-5')), 7 | textIos: 'text-white', 8 | textMaterial: cls( 9 | 'text-md-light-primary', 10 | dark('dark:text-md-dark-primary') 11 | ), 12 | ...colorsProp, 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/shared/colors/ToggleColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ToggleColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls( 6 | 'bg-black bg-opacity-10', 7 | dark('dark:bg-white dark:bg-opacity-20') 8 | ), 9 | checkedBgIos: 'bg-primary', 10 | thumbBgIos: 'bg-white', 11 | checkedThumbBgIos: 'bg-white', 12 | bgMaterial: cls( 13 | 'bg-md-light-surface-variant', 14 | dark('dark:bg-md-dark-surface-variant') 15 | ), 16 | checkedBgMaterial: cls( 17 | 'bg-md-light-primary', 18 | dark('dark:bg-md-dark-primary') 19 | ), 20 | borderMaterial: cls( 21 | 'border-md-light-outline', 22 | dark('dark:border-md-dark-outline') 23 | ), 24 | checkedBorderMaterial: cls( 25 | 'border-md-light-primary', 26 | dark('dark:border-md-dark-primary') 27 | ), 28 | thumbBgMaterial: cls( 29 | 'bg-md-light-outline', 30 | dark('dark:bg-md-dark-outline') 31 | ), 32 | checkedThumbBgMaterial: cls( 33 | 'bg-md-light-on-primary', 34 | dark('dark:bg-md-dark-on-primary') 35 | ), 36 | 37 | ...colorsProp, 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /src/shared/colors/ToolbarColors.js: -------------------------------------------------------------------------------- 1 | import { cls } from '../cls.js'; 2 | 3 | export const ToolbarColors = (colorsProp = {}, dark) => { 4 | return { 5 | bgIos: cls('bg-ios-light-surface-2', dark('dark:bg-ios-dark-surface-2')), 6 | bgMaterial: cls('bg-md-light-surface-2', dark('dark:bg-md-dark-surface-2')), 7 | tabbarHighlightBgIos: 'bg-primary', 8 | tabbarHighlightBgMaterial: cls( 9 | 'bg-md-light-primary', 10 | dark('dark:bg-md-dark-primary') 11 | ), 12 | ...colorsProp, 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/shared/position-class.js: -------------------------------------------------------------------------------- 1 | export const positionClass = (position, className = '') => { 2 | if (!className || typeof className !== 'string') return position; 3 | const classes = ['static', 'relative', 'absolute', 'fixed', 'sticky']; 4 | const hasPositionClass = 5 | classes.filter((c) => className.indexOf(c) >= 0).length > 0; 6 | return hasPositionClass ? '' : position; 7 | }; 8 | -------------------------------------------------------------------------------- /src/svelte/components/Actions.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | {#if backdrop} 25 | 26 | 27 |
    28 | {/if} 29 |
    30 | 31 |
    32 | -------------------------------------------------------------------------------- /src/svelte/components/ActionsGroup.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
    21 | 22 |
    23 | -------------------------------------------------------------------------------- /src/svelte/components/Badge.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/svelte/components/BlockFooter.svelte: -------------------------------------------------------------------------------- 1 | 39 | 40 |
    41 | 42 |
    43 | -------------------------------------------------------------------------------- /src/svelte/components/BlockHeader.svelte: -------------------------------------------------------------------------------- 1 | 39 | 40 |
    41 | 42 |
    43 | -------------------------------------------------------------------------------- /src/svelte/components/BlockTitle.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 |
    30 | 31 |
    32 | -------------------------------------------------------------------------------- /src/svelte/components/Breadcrumbs.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
    22 | 23 |
    24 | -------------------------------------------------------------------------------- /src/svelte/components/BreadcrumbsCollapsed.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 |
    36 | 37 | 38 | 39 | 40 |
    41 | -------------------------------------------------------------------------------- /src/svelte/components/BreadcrumbsItem.svelte: -------------------------------------------------------------------------------- 1 | 30 | 31 | 40 | -------------------------------------------------------------------------------- /src/svelte/components/BreadcrumbsSeparator.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
    21 | 22 | 23 |
    24 | -------------------------------------------------------------------------------- /src/svelte/components/Icon.svelte: -------------------------------------------------------------------------------- 1 | 26 | 27 | 28 | {#if theme === 'ios'} 29 | {printText(ios || '')} 30 | 31 | {:else} 32 | {printText(material || '')} 33 | 34 | {/if} 35 | 36 | {#if typeof badge !== 'undefined' && badge !== null && badge !== ''} 37 | 38 | {printText(badge)} 39 | 40 | {/if} 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/svelte/components/ListGroup.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
  • 6 | 7 | 8 | 9 |
    • 10 | -------------------------------------------------------------------------------- /src/svelte/components/MenuList.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/svelte/components/Messages.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/svelte/components/MessagesTitle.svelte: -------------------------------------------------------------------------------- 1 | 30 | 31 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/svelte/components/NavbarBackLink.svelte: -------------------------------------------------------------------------------- 1 | 32 | 33 | 34 | 35 | 36 | 37 | {#if shouldShowText} 38 | {printText(text)} 39 | {/if} 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/svelte/components/Page.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/svelte/components/Progressbar.svelte: -------------------------------------------------------------------------------- 1 | 27 | 28 | 29 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/svelte/components/SegmentedButton.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /src/svelte/components/Sheet.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | {#if backdrop} 33 | 34 | 35 |
    36 | {/if} 37 |
    38 | 39 |
    40 | -------------------------------------------------------------------------------- /src/svelte/components/Tabbar.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/svelte/components/Table.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 |
    24 | -------------------------------------------------------------------------------- /src/svelte/components/TableBody.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/svelte/components/TableCell.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/svelte/components/TableHead.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/svelte/components/TableRow.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/svelte/components/Toast.svelte: -------------------------------------------------------------------------------- 1 | 29 | 30 |
    31 |
    32 | 33 | {#if $$slots.button} 34 |
    35 | {/if} 36 |
    37 |
    38 | -------------------------------------------------------------------------------- /src/svelte/components/icons/BackIcon.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if theme === 'ios'} 6 | 14 | 17 | 18 | {/if} 19 | {#if theme === 'material'} 20 | 28 | 31 | 32 | {/if} 33 | -------------------------------------------------------------------------------- /src/svelte/components/icons/ChevronIcon.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /src/svelte/components/icons/DropdownIcon.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/svelte/components/icons/PreloaderMaterial.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/svelte/konsta-svelte.d.ts: -------------------------------------------------------------------------------- 1 | import { SvelteComponent } from 'svelte'; 2 | // IMPORT_COMPONENTS 3 | 4 | // PROVIDER 5 | interface KonstaProviderProps { 6 | /** 7 | * App theme. If set to `'parent'` it will look for `ios` or `md` class on root `` element, useful to use with parent framework like Framework7 or Ionic 8 | * 9 | * @default 'material' 10 | */ 11 | theme?: 'ios' | 'material' | 'parent'; 12 | /** 13 | * Include `dark:` variants (if dark theme is in use) 14 | * 15 | * @default false 16 | * */ 17 | dark?: boolean; 18 | /** 19 | * Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components 20 | * 21 | * @default true 22 | */ 23 | touchRipple?: boolean; 24 | } 25 | declare class KonstaProvider extends SvelteComponent< 26 | KonstaProviderProps, 27 | {}, 28 | { default: {} } 29 | > {} 30 | 31 | // HELPERS 32 | declare const useTheme: ( 33 | cb?: (newValue: 'material' | 'ios') => void 34 | ) => 'material' | 'ios'; 35 | 36 | // EXPORT_COMPONENTS 37 | export { useTheme, KonstaProvider }; 38 | -------------------------------------------------------------------------------- /src/svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konsta/svelte", 3 | "private": true, 4 | "jsnext:main": "./konsta-svelte.js", 5 | "types": "./konsta-svelte.d.ts", 6 | "module": "./konsta-svelte.js", 7 | "svelte": "./konsta-svelte.js" 8 | } -------------------------------------------------------------------------------- /src/svelte/shared/KonstaStore.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { writable } from 'svelte/store'; 3 | 4 | const KonstaStore = writable({ 5 | theme: 'material', 6 | dark: true, 7 | touchRipple: true, 8 | }); 9 | 10 | export { KonstaStore }; 11 | -------------------------------------------------------------------------------- /src/svelte/shared/get-reactive-context.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { getContext, onDestroy } from 'svelte'; 3 | 4 | export const getReactiveContext = (name, setValue) => { 5 | const ctx = getContext(name); 6 | if (!ctx) return undefined; 7 | const { value, subscribe, unsubscribe } = ctx; 8 | subscribe(setValue); 9 | onDestroy(() => { 10 | unsubscribe(setValue); 11 | }); 12 | return value; 13 | }; 14 | -------------------------------------------------------------------------------- /src/svelte/shared/print-text.js: -------------------------------------------------------------------------------- 1 | export const printText = (text) => { 2 | if (typeof text === 'undefined' || text === null || text === false) return ''; 3 | return text; 4 | }; 5 | -------------------------------------------------------------------------------- /src/svelte/shared/set-reactive-context.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { setContext, beforeUpdate } from 'svelte'; 3 | 4 | export const setReactiveContext = (name, getValue) => { 5 | const contextCallbacks = []; 6 | const contextSubscribe = (callback) => { 7 | contextCallbacks.push(callback); 8 | }; 9 | const contextUnsubscribe = (callback) => { 10 | if (contextCallbacks.indexOf(callback) >= 0) { 11 | contextCallbacks.splice(contextCallbacks.indexOf, callback); 12 | } 13 | }; 14 | const contextRunCallbacks = () => { 15 | contextCallbacks.forEach((callback) => { 16 | callback(getValue()); 17 | }); 18 | }; 19 | setContext(name, { 20 | value: getValue(), 21 | subscribe: contextSubscribe, 22 | unsubscribe: contextUnsubscribe, 23 | }); 24 | beforeUpdate(() => { 25 | contextRunCallbacks(); 26 | }); 27 | }; 28 | -------------------------------------------------------------------------------- /src/svelte/shared/use-dark-classes.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { get } from 'svelte/store'; 3 | import { KonstaStore } from './KonstaStore.js'; 4 | 5 | const useDarkClasses = () => { 6 | return (classNames) => { 7 | const context = get(KonstaStore); 8 | if (!context.dark) return ''; 9 | return classNames; 10 | }; 11 | }; 12 | 13 | export { useDarkClasses }; 14 | -------------------------------------------------------------------------------- /src/svelte/shared/use-theme.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line 2 | import { get } from 'svelte/store'; 3 | import { KonstaStore } from './KonstaStore.js'; 4 | 5 | const useTheme = (props, cb) => { 6 | let ios; 7 | let material; 8 | if (typeof props === 'function') { 9 | cb = props; 10 | props = {}; 11 | } else { 12 | ios = props.ios; 13 | material = props.material; 14 | } 15 | const calcTheme = (ctx) => { 16 | let theme = ctx.theme || 'ios'; 17 | if (ios) theme = 'ios'; 18 | if (material) theme = 'material'; 19 | return theme; 20 | }; 21 | if (cb) { 22 | KonstaStore.subscribe((newValue) => { 23 | cb(calcTheme(newValue)); 24 | }); 25 | } 26 | return calcTheme(get(KonstaStore)); 27 | }; 28 | 29 | export { useTheme }; 30 | -------------------------------------------------------------------------------- /src/types/Actions.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * Allows to open/close Action Sheet and set its initial state 10 | * 11 | * @default false 12 | */ 13 | opened?: boolean; 14 | /** 15 | * Enables Action Sheet backdrop (dark semi transparent layer behind) 16 | * 17 | * @default true 18 | */ 19 | backdrop?: boolean; 20 | /** 21 | * Click handler on backdrop element 22 | */ 23 | onBackdropClick?: (e: any) => void; 24 | } 25 | -------------------------------------------------------------------------------- /src/types/ActionsGroup.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | 9 | /** 10 | * Renders group outer hairlines (borders). (in Material theme only) 11 | * 12 | * @default true 13 | */ 14 | dividers?: boolean; 15 | } 16 | -------------------------------------------------------------------------------- /src/types/ActionsLabel.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | 9 | /** 10 | * Object with Tailwind CSS colors classes 11 | * */ 12 | colors?: { 13 | /** 14 | * 15 | * @default 'bg-white dark:bg-neutral-800' 16 | */ 17 | bgIos?: string; 18 | /** 19 | * 20 | * @default 'bg-md-light-surface-3 dark:bg-md-dark-surface-3' 21 | */ 22 | bgMaterial?: string; 23 | /** 24 | * 25 | * @default 'text-black text-opacity-55 dark:text-white dark:text-opacity-55' 26 | */ 27 | textIos?: string; 28 | /** 29 | * 30 | * @default 'text-md-light-primary dark:text-md-dark-primary' 31 | */ 32 | textMaterial?: string; 33 | }; 34 | 35 | /** 36 | * Button text font size in iOS theme 37 | * 38 | * @default 'text-sm' 39 | */ 40 | fontSizeIos?: string; 41 | /** 42 | * Button text font size in Material theme 43 | * 44 | * @default 'text-sm' 45 | */ 46 | fontSizeMaterial?: string; 47 | 48 | /** 49 | * Renders button outer hairlines (borders). If not specified, will be enabled in iOS theme 50 | * 51 | * @default undefined 52 | */ 53 | dividers?: boolean; 54 | } 55 | -------------------------------------------------------------------------------- /src/types/App.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * App theme. If set to `'parent'` it will look for `ios` or `md` class on root `` element, useful to use with parent framework like Framework7 or Ionic 10 | * 11 | * @default 'material' 12 | */ 13 | theme?: 'ios' | 'material' | 'parent'; 14 | /** 15 | * Include `dark:` variants (if dark theme is in use) 16 | * 17 | * @default false 18 | * */ 19 | dark?: boolean; 20 | /** 21 | * Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components 22 | * 23 | * @default true 24 | */ 25 | touchRipple?: boolean; 26 | 27 | /** 28 | * Adds `safe-areas` class to the container. Should be enabled if app container is the full screen element to properly handle screen safe areas 29 | * 30 | * @default true 31 | */ 32 | safeAreas?: boolean; 33 | } 34 | -------------------------------------------------------------------------------- /src/types/Badge.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'span' 6 | */ 7 | component?: string; 8 | /** 9 | * Object with Tailwind CSS colors classes 10 | * */ 11 | colors?: { 12 | /** 13 | * Badge bg color 14 | * 15 | * @default 'bg-primary' 16 | */ 17 | bg?: string; 18 | /** 19 | * Badge text color 20 | * 21 | * @default 'text-white' 22 | */ 23 | text?: string; 24 | }; 25 | /** 26 | * Makes small badge 27 | */ 28 | small?: boolean; 29 | } 30 | -------------------------------------------------------------------------------- /src/types/BlockFooter.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | 9 | /** 10 | * Makes block footer inset, overwrites `insetIos` and `insetMaterial` 11 | * 12 | * @default undefined 13 | */ 14 | inset?: boolean; 15 | 16 | /** 17 | * Makes block footer inset in iOS theme 18 | * 19 | * @default false 20 | */ 21 | insetIos?: boolean; 22 | 23 | /** 24 | * Makes block footer inset in Material theme 25 | * 26 | * @default false 27 | */ 28 | insetMaterial?: boolean; 29 | 30 | /** 31 | * Object with Tailwind CSS colors classes 32 | * */ 33 | colors?: { 34 | /** 35 | * 36 | * @default 'text-black text-opacity-75 dark:text-white dark:text-opacity-75' 37 | */ 38 | textIos?: string; 39 | /** 40 | * 41 | * @default 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant' 42 | */ 43 | textMaterial?: string; 44 | }; 45 | } 46 | -------------------------------------------------------------------------------- /src/types/BlockHeader.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | 9 | /** 10 | * Makes block header inset, overwrites `insetIos` and `insetMaterial` 11 | * 12 | * @default undefined 13 | */ 14 | inset?: boolean; 15 | 16 | /** 17 | * Makes block header inset in iOS theme 18 | * 19 | * @default false 20 | */ 21 | insetIos?: boolean; 22 | 23 | /** 24 | * Makes block header inset in Material theme 25 | * 26 | * @default false 27 | */ 28 | insetMaterial?: boolean; 29 | 30 | /** 31 | * Object with Tailwind CSS colors classes 32 | * */ 33 | colors?: { 34 | /** 35 | * 36 | * @default 'text-black dark:text-white' 37 | */ 38 | textIos?: string; 39 | /** 40 | * 41 | * @default 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant' 42 | */ 43 | textMaterial?: string; 44 | }; 45 | } 46 | -------------------------------------------------------------------------------- /src/types/BlockTitle.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * Useful to disable when there is no Block or List component right after the Block Title 10 | * 11 | * @default true 12 | */ 13 | withBlock?: boolean; 14 | 15 | /** 16 | * Medium sized block title 17 | * 18 | * @default false 19 | */ 20 | medium?: boolean; 21 | 22 | /** 23 | * Large sized block title 24 | * 25 | * @default false 26 | */ 27 | large?: boolean; 28 | 29 | /** 30 | * Object with Tailwind CSS colors classes 31 | * */ 32 | colors?: { 33 | /** 34 | * 35 | * @default '' 36 | */ 37 | textIos?: string; 38 | /** 39 | * 40 | * @default 'text-md-light-primary dark:text-md-dark-primary' 41 | */ 42 | textMaterial?: string; 43 | }; 44 | } 45 | -------------------------------------------------------------------------------- /src/types/Breadcrumbs.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * Font size in iOS theme 10 | * 11 | * @default 'text-[17px]' 12 | */ 13 | fontSizeIos?: string; 14 | /** 15 | * Font size in Material theme 16 | * 17 | * @default 'text-[14px]' 18 | */ 19 | fontSizeMaterial?: string; 20 | } 21 | -------------------------------------------------------------------------------- /src/types/BreadcrumbsCollapsed.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * Object with Tailwind CSS colors classes 10 | * */ 11 | colors?: { 12 | /** 13 | * 14 | * @default 'bg-black bg-opacity-15 dark:bg-white dark:bg-opacity-15' 15 | */ 16 | bgIos?: string; 17 | /** 18 | * 19 | * @default 'bg-md-light-secondary-container dark:bg-md-dark-secondary-container' 20 | */ 21 | bgMaterial?: string; 22 | /** 23 | * 24 | * @default 'bg-black dark:bg-white' 25 | */ 26 | dotBgIos?: string; 27 | /** 28 | * 29 | * @default 'bg-md-light-primary dark:bg-md-dark-primary' 30 | */ 31 | dotBgMaterial?: string; 32 | }; 33 | } 34 | -------------------------------------------------------------------------------- /src/types/BreadcrumbsItem.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * Marks breadcrumb item as active/current (usually last item in breadcrumbs) 10 | * 11 | * @default false 12 | */ 13 | active?: boolean; 14 | /** 15 | * Object with Tailwind CSS colors classes 16 | * */ 17 | colors?: { 18 | /** 19 | * 20 | * @default 'text-black text-opacity-55 dark:text-white dark:text-opacity-55' 21 | */ 22 | textIos?: string; 23 | /** 24 | * 25 | * @default 'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container' 26 | */ 27 | textMaterial?: string; 28 | /** 29 | * 30 | * @default '' 31 | */ 32 | bgIos?: string; 33 | /** 34 | * 35 | * @default 'bg-md-light-secondary-container dark:bg-md-dark-secondary-container' 36 | */ 37 | bgMaterial?: string; 38 | /** 39 | * 40 | * @default 'text-black dark:text-white' 41 | */ 42 | textActiveIos?: string; 43 | /** 44 | * 45 | * @default 'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container' 46 | */ 47 | textActiveMaterial?: string; 48 | }; 49 | } 50 | -------------------------------------------------------------------------------- /src/types/BreadcrumbsSeparator.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | } 9 | -------------------------------------------------------------------------------- /src/types/Icon.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'i' 6 | */ 7 | component?: string; 8 | 9 | /** 10 | * Icon badge 11 | * */ 12 | badge?: string | number | React.ReactNode; 13 | 14 | /** 15 | * Icon to render in "ios" theme 16 | * */ 17 | ios?: React.ReactNode; 18 | 19 | /** 20 | * Icon to render in "material" theme 21 | * */ 22 | material?: React.ReactNode; 23 | 24 | /** 25 | * Badge colors. Object with Tailwind CSS colors classes 26 | * */ 27 | badgeColors?: { 28 | /** 29 | * Badge bg color 30 | * 31 | * @default 'bg-primary' 32 | */ 33 | bg?: string; 34 | /** 35 | * Badge text color 36 | * 37 | * @default 'text-white' 38 | */ 39 | text?: string; 40 | }; 41 | } 42 | -------------------------------------------------------------------------------- /src/types/ListGroup.d.ts: -------------------------------------------------------------------------------- 1 | interface Props {} 2 | -------------------------------------------------------------------------------- /src/types/MenuList.d.ts: -------------------------------------------------------------------------------- 1 | interface Props {} 2 | -------------------------------------------------------------------------------- /src/types/MenuListItem.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Makes menu list item highlighted (active) 4 | * 5 | * @default false 6 | */ 7 | active?: boolean; 8 | /** 9 | * Menu list item link's `href` attribute 10 | */ 11 | href?: string | boolean; 12 | /** 13 | * Content of the chip media area (e.g. icon) 14 | */ 15 | media?: React.ReactNode; 16 | /** 17 | * Content of the menu list item "subtitle" area 18 | */ 19 | subtitle?: string | number | React.ReactNode; 20 | } 21 | -------------------------------------------------------------------------------- /src/types/Messages.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | } 9 | -------------------------------------------------------------------------------- /src/types/MessagesTitle.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | colors?: { 9 | /** 10 | * 11 | * @default 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant' 12 | */ 13 | titleMd?: string; 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /src/types/NavbarBackLink.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'a' 6 | */ 7 | component?: string; 8 | /** 9 | * Text content of the back link 10 | * 11 | * @default 'Back' 12 | */ 13 | text?: string | React.ReactNode; 14 | /** 15 | * Defines whether to show the link text. When 'auto', it hides link text for Material theme 16 | * 17 | * @default 'auto' 18 | */ 19 | showText?: boolean | 'auto'; 20 | /** 21 | * Link click handler 22 | */ 23 | onClick?: (e: any) => void; 24 | } 25 | -------------------------------------------------------------------------------- /src/types/Page.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | 9 | /** 10 | * Object with Tailwind CSS colors classes 11 | * */ 12 | colors?: { 13 | /** 14 | * 15 | * @default 'bg-ios-light-surface dark:bg-ios-dark-surface' 16 | */ 17 | bgIos?: string; 18 | /** 19 | * 20 | * @default 'bg-md-light-surface dark:bg-md-dark-surface' 21 | */ 22 | bgMaterial?: string; 23 | }; 24 | } 25 | -------------------------------------------------------------------------------- /src/types/Panel.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * Object with Tailwind CSS colors classes 10 | * */ 11 | colors?: { 12 | /** 13 | * Panel bg color 14 | * 15 | * @default 'bg-white dark:bg-black' 16 | */ 17 | bg?: string; 18 | }; 19 | /** 20 | * Tailwind CSS size classes 21 | * 22 | * @default 'w-72 h-screen' 23 | * */ 24 | size?: string; 25 | 26 | /** 27 | * Panel side 28 | * 29 | * @default 'left' 30 | */ 31 | side?: 'left' | 'right'; 32 | /** 33 | * Allows to open/close Panel and set its initial state 34 | * 35 | * @default false 36 | */ 37 | opened?: boolean; 38 | 39 | /** 40 | * When enabled opened panel will have extra spaces from sides 41 | * 42 | * @default false 43 | */ 44 | 45 | floating?: boolean; 46 | /** 47 | * Enables Panel backdrop (dark semi transparent layer behind) 48 | * 49 | * @default true 50 | */ 51 | backdrop?: boolean; 52 | /** 53 | * Click handler on backdrop element 54 | */ 55 | onBackdropClick?: (e: any) => void; 56 | } 57 | -------------------------------------------------------------------------------- /src/types/Popup.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * Object with Tailwind CSS colors classes 10 | * */ 11 | colors?: { 12 | /** 13 | * Popup bg color 14 | * 15 | * @default 'bg-white dark:bg-black' 16 | */ 17 | bg?: string; 18 | }; 19 | /** 20 | * Tailwind CSS size classes 21 | * 22 | * @default 'w-screen h-screen md:w-160 md:h-160' 23 | * */ 24 | size?: string; 25 | /** 26 | * Allows to open/close Popup and set its initial state 27 | * 28 | * @default false 29 | */ 30 | opened?: boolean; 31 | /** 32 | * Enables Popup backdrop (dark semi transparent layer behind) 33 | * 34 | * @default true 35 | */ 36 | backdrop?: boolean; 37 | /** 38 | * Click handler on backdrop element 39 | */ 40 | onBackdropClick?: (e: any) => void; 41 | } 42 | -------------------------------------------------------------------------------- /src/types/Preloader.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'span' 6 | */ 7 | component?: string; 8 | /** 9 | * Object with Tailwind CSS colors classes 10 | * */ 11 | colors?: { 12 | /** 13 | * 14 | * @default 'text-primary' 15 | */ 16 | iconIos?: string; 17 | /** 18 | * 19 | * @default 'text-md-light-primary dark:text-md-dark-primary' 20 | */ 21 | iconMaterial?: string; 22 | }; 23 | /** 24 | * Tailwind CSS size classes 25 | * 26 | * @default 'w-8 h-8' 27 | * */ 28 | size?: string; 29 | } 30 | -------------------------------------------------------------------------------- /src/types/Progressbar.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'span' 6 | */ 7 | component?: string; 8 | /** 9 | * Object with Tailwind CSS colors classes 10 | * */ 11 | colors?: { 12 | /** 13 | * 14 | * @default 'bg-primary' 15 | */ 16 | bgIos?: string; 17 | /** 18 | * 19 | * @default 'bg-md-light-primary dark:bg-md-dark-primary' 20 | */ 21 | bgMaterial?: string; 22 | }; 23 | /** 24 | * Determinate progress (from 0 to 1) 25 | * 26 | * @default 0 27 | */ 28 | progress?: number; 29 | } 30 | -------------------------------------------------------------------------------- /src/types/SegmentedButton.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'button' 6 | */ 7 | component?: string; 8 | /** 9 | * Highlights button as active 10 | * 11 | * @default false 12 | */ 13 | active?: boolean; 14 | 15 | /** 16 | * Makes strong segmented button (should be used within ``) 17 | * 18 | * @default false 19 | */ 20 | strong?: boolean; 21 | 22 | /** 23 | * Makes segmented button rounded (should be used within ``) 24 | * 25 | * @default false 26 | */ 27 | rounded?: boolean; 28 | } 29 | -------------------------------------------------------------------------------- /src/types/Sheet.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * Object with Tailwind CSS colors classes 10 | * */ 11 | colors?: { 12 | /** 13 | * 14 | * @default 'bg-white dark:bg-black' 15 | */ 16 | bgIos?: string; 17 | /** 18 | * 19 | * @default 'bg-md-light-surface dark:bg-md-dark-surface' 20 | */ 21 | bgMaterial?: string; 22 | }; 23 | 24 | /** 25 | * Allows to open/close Sheet modal and set its initial state 26 | * 27 | * @default false 28 | */ 29 | opened?: boolean; 30 | /** 31 | * Enables Sheet modal backdrop (dark semi transparent layer behind) 32 | * 33 | * @default true 34 | */ 35 | backdrop?: boolean; 36 | /** 37 | * Click handler on backdrop element 38 | */ 39 | onBackdropClick?: (e: any) => void; 40 | } 41 | -------------------------------------------------------------------------------- /src/types/Tabbar.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Enables Tabbar with labels 4 | * 5 | * @default false 6 | */ 7 | labels?: boolean; 8 | 9 | /** 10 | * Enables Tabbar with icons 11 | * 12 | * @default false 13 | */ 14 | icons?: boolean; 15 | } 16 | -------------------------------------------------------------------------------- /src/types/TabbarLink.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Makes this tabbar link active 4 | * 5 | * @default false 6 | */ 7 | active?: boolean; 8 | /** 9 | * Component's HTML Element 10 | * 11 | * @default 'a' 12 | */ 13 | component?: string; 14 | /** 15 | * Object with additional props (attributes) to pass to the Link/Button 16 | */ 17 | linkProps?: any; 18 | /** 19 | * Link icon content 20 | */ 21 | icon?: React.ReactNode; 22 | /** 23 | * Link label content 24 | */ 25 | label?: string | React.ReactNode; 26 | } 27 | -------------------------------------------------------------------------------- /src/types/Table.d.ts: -------------------------------------------------------------------------------- 1 | interface Props {} 2 | -------------------------------------------------------------------------------- /src/types/TableBody.d.ts: -------------------------------------------------------------------------------- 1 | interface Props {} 2 | -------------------------------------------------------------------------------- /src/types/TableCell.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Object with Tailwind CSS colors classes 4 | * */ 5 | colors?: { 6 | /** 7 | * Table Cell header text color 8 | * 9 | * @default 'text-black/45 dark:text-white/55' 10 | */ 11 | textHeaderIos?: string; 12 | /** 13 | * Table Cell header text color 14 | * 15 | * @default 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant' 16 | */ 17 | textHeaderMaterial?: string; 18 | }; 19 | /** 20 | * Is located inside the TableHead 21 | */ 22 | header?: boolean; 23 | } 24 | -------------------------------------------------------------------------------- /src/types/TableHead.d.ts: -------------------------------------------------------------------------------- 1 | interface Props {} 2 | -------------------------------------------------------------------------------- /src/types/TableRow.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Object with Tailwind CSS colors classes 4 | * */ 5 | colors?: { 6 | /** 7 | * Table Row hover bg color 8 | * 9 | * @default 'hover:bg-black/5 dark:hover:bg-white/10' 10 | */ 11 | bgIos?: string; 12 | /** 13 | * Table Row hover bg color 14 | * 15 | * @default 'hover:bg-md-light-secondary-container dark:hover:bg-md-dark-secondary-container' 16 | */ 17 | bgMaterial?: string; 18 | /** 19 | * Table Row divider color 20 | * 21 | * @default 'border-md-light-outline dark:border-md-dark-outline' 22 | */ 23 | dividerMaterial?: string; 24 | }; 25 | /** 26 | * Is located inside the TableHead 27 | */ 28 | header?: boolean; 29 | } 30 | -------------------------------------------------------------------------------- /src/types/Toast.d.ts: -------------------------------------------------------------------------------- 1 | interface Props { 2 | /** 3 | * Component's HTML Element 4 | * 5 | * @default 'div' 6 | */ 7 | component?: string; 8 | /** 9 | * Object with Tailwind CSS colors classes 10 | * */ 11 | colors?: { 12 | /** 13 | * 14 | * @default 'bg-black' 15 | */ 16 | bgIos?: string; 17 | /** 18 | * 19 | * @default 'bg-md-light-surface-5 dark:bg-md-dark-surface-5' 20 | */ 21 | bgMaterial?: string; 22 | /** 23 | * 24 | * @default 'text-white' 25 | */ 26 | textIos?: string; 27 | /** 28 | * 29 | * @default 'text-md-light-primary dark:text-md-dark-primary' 30 | */ 31 | textMaterial?: string; 32 | }; 33 | /** 34 | * Makes Toast background translucent (with `backdrop-filter: blur`) in iOS theme 35 | * 36 | * @default true 37 | */ 38 | translucent?: boolean; 39 | /** 40 | * Toast button content 41 | */ 42 | button?: React.ReactNode; 43 | /** 44 | * Toast position (only on wide screens). Can be `left`, `center` or `right` 45 | * 46 | * @default 'left' 47 | */ 48 | position?: 'left' | 'center' | 'right'; 49 | /** 50 | * Allows to open/close Toast and set its initial state 51 | * 52 | * @default false 53 | */ 54 | opened?: boolean; 55 | } 56 | -------------------------------------------------------------------------------- /src/vue/components/ActionsGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 42 | -------------------------------------------------------------------------------- /src/vue/components/Breadcrumbs.vue: -------------------------------------------------------------------------------- 1 | 6 | 46 | -------------------------------------------------------------------------------- /src/vue/components/BreadcrumbsSeparator.vue: -------------------------------------------------------------------------------- 1 | 7 | 43 | -------------------------------------------------------------------------------- /src/vue/components/ListGroup.vue: -------------------------------------------------------------------------------- 1 | 8 | 39 | -------------------------------------------------------------------------------- /src/vue/components/MenuList.vue: -------------------------------------------------------------------------------- 1 | 6 | 27 | -------------------------------------------------------------------------------- /src/vue/components/Messages.vue: -------------------------------------------------------------------------------- 1 | 6 | 55 | -------------------------------------------------------------------------------- /src/vue/components/SegmentedButton.vue: -------------------------------------------------------------------------------- 1 | 6 | 39 | -------------------------------------------------------------------------------- /src/vue/components/Tabbar.vue: -------------------------------------------------------------------------------- 1 | 6 | 39 | -------------------------------------------------------------------------------- /src/vue/components/Table.vue: -------------------------------------------------------------------------------- 1 | 6 | 47 | -------------------------------------------------------------------------------- /src/vue/components/TableBody.vue: -------------------------------------------------------------------------------- 1 | 6 | 47 | -------------------------------------------------------------------------------- /src/vue/components/TableHead.vue: -------------------------------------------------------------------------------- 1 | 6 | 47 | -------------------------------------------------------------------------------- /src/vue/components/icons/BackIcon.vue: -------------------------------------------------------------------------------- 1 | 27 | 36 | -------------------------------------------------------------------------------- /src/vue/components/icons/ChevronIcon.vue: -------------------------------------------------------------------------------- 1 | 14 | 19 | -------------------------------------------------------------------------------- /src/vue/components/icons/DropdownIcon.vue: -------------------------------------------------------------------------------- 1 | 12 | 17 | -------------------------------------------------------------------------------- /src/vue/components/icons/PreloaderMaterial.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | -------------------------------------------------------------------------------- /src/vue/konsta-vue.d.ts: -------------------------------------------------------------------------------- 1 | import { Ref, ComponentOptionsMixin, DefineComponent } from 'vue'; 2 | // IMPORT_COMPONENTS 3 | 4 | // PROVIDER 5 | declare const kProvider: DefineComponent< 6 | { 7 | /** 8 | * App theme. If set to `'parent'` it will look for `ios` or `md` class on root `` element, useful to use with parent framework like Framework7 or Ionic 9 | * 10 | * @default 'material' 11 | */ 12 | theme: { 13 | type: StringConstructor; 14 | default: 'material'; 15 | }; 16 | /** 17 | * Include `dark:` variants (if dark theme is in use) 18 | * 19 | * @default false 20 | * */ 21 | dark: { 22 | type: BooleanConstructor; 23 | default: false; 24 | }; 25 | /** 26 | * Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components 27 | * 28 | * @default true 29 | */ 30 | touchRipple: { 31 | type: BooleanConstructor; 32 | default: true; 33 | }; 34 | }, 35 | () => JSX.Element, 36 | unknown, 37 | {}, 38 | {}, 39 | ComponentOptionsMixin, 40 | ComponentOptionsMixin, 41 | {} 42 | >; 43 | 44 | // HELPERS 45 | declare const useTheme: () => Ref<'material' | 'ios'>; 46 | 47 | // EXPORT_COMPONENTS 48 | export { useTheme, kProvider, kProvider as Provider }; 49 | -------------------------------------------------------------------------------- /src/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "konsta/vue", 3 | "private": true, 4 | "jsnext:main": "./konsta-vue.js", 5 | "module": "./konsta-vue.js" 6 | } 7 | -------------------------------------------------------------------------------- /src/vue/shared/KonstaProvider.vue: -------------------------------------------------------------------------------- 1 | 4 | 45 | -------------------------------------------------------------------------------- /src/vue/shared/use-auto-theme.js: -------------------------------------------------------------------------------- 1 | import { ref, watch, onMounted } from 'vue'; 2 | 3 | export const useAutoTheme = (props, autoThemeDetection = true) => { 4 | const themeState = ref(props.theme); 5 | 6 | /* eslint-disable no-restricted-globals */ 7 | const setTheme = (newTheme) => { 8 | if (newTheme === 'ios' || newTheme === 'material') { 9 | if (themeState.value !== newTheme) { 10 | themeState.value = newTheme; 11 | } 12 | } else if ( 13 | autoThemeDetection && 14 | themeState.value === 'parent' && 15 | typeof window !== 'undefined' && 16 | typeof document !== 'undefined' 17 | ) { 18 | const htmlEl = document.documentElement; 19 | if (htmlEl) { 20 | if (htmlEl.classList.contains('ios')) { 21 | themeState.value = 'ios'; 22 | } else if ( 23 | htmlEl.classList.contains('md') || 24 | htmlEl.classList.contains('material') 25 | ) { 26 | themeState.value = 'material'; 27 | } 28 | } 29 | } 30 | }; 31 | /* eslint-enable no-restricted-globals */ 32 | 33 | watch( 34 | () => props.theme, 35 | (newTheme) => { 36 | setTheme(newTheme); 37 | } 38 | ); 39 | onMounted(() => { 40 | setTheme(props.theme); 41 | }); 42 | 43 | return themeState; 44 | }; 45 | -------------------------------------------------------------------------------- /src/vue/shared/use-context.js: -------------------------------------------------------------------------------- 1 | import { inject } from 'vue'; 2 | 3 | export const useContext = () => { 4 | return inject('KonstaContext'); 5 | }; 6 | -------------------------------------------------------------------------------- /src/vue/shared/use-dark-classes.js: -------------------------------------------------------------------------------- 1 | const useDarkClasses = (classNames, context) => { 2 | if (!context || !context.value.dark) return ''; 3 | return classNames; 4 | }; 5 | const createUseDarkClasses = (context) => (classNames) => 6 | useDarkClasses(classNames, context); 7 | 8 | export { createUseDarkClasses as darkClasses, useDarkClasses }; 9 | -------------------------------------------------------------------------------- /src/vue/shared/use-theme.js: -------------------------------------------------------------------------------- 1 | import { computed } from 'vue'; 2 | 3 | const useTheme = (props = {}, context) => 4 | computed(() => { 5 | let theme; 6 | if (context) { 7 | theme = context.value.theme || 'ios'; 8 | } 9 | if (props.ios) theme = 'ios'; 10 | if (props.material) theme = 'material'; 11 | return theme; 12 | }); 13 | 14 | export { useTheme }; 15 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const konstaConfig = require('konsta/config'); 2 | 3 | module.exports = konstaConfig({ 4 | konsta: { 5 | colors: { 6 | primary: '#007aff', 7 | 'brand-primary': '#007aff', 8 | 'brand-red': '#ff3b30', 9 | 'brand-green': '#4cd964', 10 | 'brand-yellow': '#ffcc00', 11 | 'brand-purple': '#9c27b0', 12 | 'brand-blue': '#2196f3', 13 | }, 14 | }, 15 | content: [ 16 | './kitchen-sink/react/components/*.{js,jsx}', 17 | './kitchen-sink/react/pages/*.{js,jsx}', 18 | './kitchen-sink/svelte/components/*.{js,jsx}', 19 | './kitchen-sink/svelte/pages/*.{js,jsx}', 20 | './kitchen-sink/vue/components/*.{js,jsx,vue}', 21 | './kitchen-sink/vue/pages/*.{js,jsx,vue}', 22 | ], 23 | darkMode: 'class', 24 | }); 25 | --------------------------------------------------------------------------------