├── packages ├── forms │ ├── src │ │ ├── variables.ts │ │ ├── components │ │ │ ├── fields │ │ │ │ ├── Input │ │ │ │ │ └── index.ts │ │ │ │ ├── Range │ │ │ │ │ └── index.ts │ │ │ │ ├── Select │ │ │ │ │ └── index.ts │ │ │ │ ├── Switch │ │ │ │ │ └── index.ts │ │ │ │ ├── Options │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── options.css │ │ │ │ ├── Repeater │ │ │ │ │ └── index.ts │ │ │ │ ├── DateTimePicker │ │ │ │ │ └── index.ts │ │ │ │ ├── Media │ │ │ │ │ └── index.ts │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ ├── context │ │ │ └── index.ts │ │ ├── helpers │ │ │ └── index.ts │ │ └── index.ts │ ├── .eslintrc.js │ ├── README.md │ ├── tsup.config.ts │ ├── tsconfig.json │ ├── jest.config.js │ └── package.json ├── config │ ├── build-tools │ │ ├── README.md │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── plugins │ │ │ │ ├── index.ts │ │ │ │ └── css-combine.ts │ │ │ └── tsup.ts │ │ ├── tsconfig.json │ │ └── package.json │ ├── eslint-config-next-app │ │ ├── index.js │ │ └── package.json │ ├── tsconfig │ │ ├── react-library.json │ │ ├── package.json │ │ ├── next.json │ │ └── base.json │ └── eslint-config-library │ │ ├── index.js │ │ └── package.json ├── data │ ├── tests │ │ ├── SmartGrid.cy.tsx │ │ └── SmartTable.cy.tsx │ ├── README.md │ ├── src │ │ ├── components │ │ │ ├── SmartGrid │ │ │ │ ├── GridPagination.tsx │ │ │ │ ├── index.ts │ │ │ │ └── GridSearch.tsx │ │ │ ├── SmartTable │ │ │ │ ├── index.ts │ │ │ │ ├── ExportButton.tsx │ │ │ │ ├── TablePagination.tsx │ │ │ │ └── reducer.ts │ │ │ └── index.ts │ │ ├── hooks │ │ │ ├── index.ts │ │ │ └── useSmartTable.ts │ │ ├── index.ts │ │ ├── styles │ │ │ └── pagination.css │ │ └── utils.ts │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── jest.config.js │ ├── CHANGELOG.md │ └── package.json ├── layout │ ├── tests │ │ ├── Workspace.cy.tsx │ │ ├── useLayout.cy.tsx │ │ ├── useMenu.cy.tsx │ │ ├── MenuButton.cy.tsx │ │ ├── useColorTheme.cy.tsx │ │ ├── Layout.cy.tsx │ │ └── setup.tsx │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── src │ │ ├── components │ │ │ ├── index.ts │ │ │ └── ResponsiveStyle.tsx │ │ ├── styles │ │ │ ├── global.css │ │ │ ├── topbar.css │ │ │ ├── utility.css │ │ │ └── mobile-menu.css │ │ └── index.ts │ ├── tsup.config.ts │ └── package.json ├── scroll │ ├── README.md │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── src │ │ ├── components │ │ │ └── index.ts │ │ ├── index.ts │ │ └── styles │ │ │ ├── parallax.css │ │ │ └── scrollbox.css │ ├── tsup.config.ts │ └── package.json ├── lightbox │ ├── test │ │ └── Lightbox.cy.tsx │ ├── README.md │ ├── .eslintrc.js │ ├── src │ │ ├── components │ │ │ ├── index.ts │ │ │ ├── Lightbox.tsx │ │ │ ├── NavButton.tsx │ │ │ └── Icons.tsx │ │ ├── index.ts │ │ └── variables.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ └── package.json ├── notifications │ ├── tests │ │ ├── Toast.cy.tsx │ │ └── CookieNotice.cy.tsx │ ├── README.md │ ├── .eslintrc.js │ ├── src │ │ ├── components │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── variables.ts │ │ └── hooks │ │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ └── package.json ├── layout-server │ ├── globals.d.ts │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── src │ │ ├── components │ │ │ ├── Main.tsx │ │ │ ├── Footer.tsx │ │ │ ├── Sidebar.tsx │ │ │ ├── Skiplinks.tsx │ │ │ └── Topbar.tsx │ │ ├── index.ts │ │ └── defaults.ts │ ├── tests │ │ ├── Main.cy.tsx │ │ └── Sidebar.cy.tsx │ └── package.json ├── studio │ ├── src │ │ ├── components │ │ │ ├── ResizeHandle │ │ │ │ ├── resize-handle.css │ │ │ │ └── index.ts │ │ │ ├── Editor │ │ │ │ └── index.ts │ │ │ ├── GridMenu │ │ │ │ └── index.ts │ │ │ ├── GapControl │ │ │ │ ├── index.ts │ │ │ │ └── gap-control.css │ │ │ └── Grid │ │ │ │ └── index.ts │ │ └── index.ts │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── tsup.config.ts │ ├── package.json │ └── CHANGELOG.md ├── generative │ ├── README.md │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── src │ │ ├── index.ts │ │ └── utils.ts │ ├── tsup.config.ts │ └── package.json ├── maker-ui │ ├── src │ │ ├── hooks.ts │ │ ├── utils.ts │ │ ├── modal.ts │ │ ├── spinners.ts │ │ ├── data.ts │ │ ├── popovers.ts │ │ ├── forms.ts │ │ ├── transition.ts │ │ ├── tabs.ts │ │ ├── carousel.ts │ │ ├── accordion.ts │ │ ├── scroll.ts │ │ ├── lightbox.ts │ │ ├── index.ts │ │ ├── notifications.ts │ │ ├── social.ts │ │ └── layout.ts │ ├── tsconfig.json │ ├── README.md │ └── tsup.config.ts ├── tabs │ ├── README.md │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── src │ │ ├── index.ts │ │ ├── variables.ts │ │ └── TabPanel.tsx │ ├── tsup.config.ts │ └── package.json ├── toc │ ├── README.md │ ├── .eslintrc.js │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ └── package.json ├── carousel │ ├── README.md │ ├── src │ │ ├── hooks │ │ │ ├── index.ts │ │ │ └── usePrevious.ts │ │ ├── helpers │ │ │ ├── index.ts │ │ │ └── position.ts │ │ ├── index.ts │ │ ├── default-props.tsx │ │ ├── variables.ts │ │ └── components │ │ │ └── Arrow.tsx │ ├── globals.d.ts │ ├── .eslintrc.js │ ├── tsup.config.ts │ ├── tsconfig.json │ └── package.json ├── modal │ ├── README.md │ ├── .eslintrc.js │ ├── src │ │ ├── index.ts │ │ └── Portal.tsx │ ├── tsconfig.json │ ├── types.ts │ ├── tsup.config.ts │ ├── tests │ │ └── Portal.cy.tsx │ └── package.json ├── social │ ├── README.md │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── src │ │ ├── index.ts │ │ ├── icons │ │ │ ├── x.svg │ │ │ ├── facebook.svg │ │ │ ├── linkedin.svg │ │ │ ├── tiktok.svg │ │ │ ├── website.svg │ │ │ └── youtube.svg │ │ ├── svgr │ │ │ ├── index.ts │ │ │ ├── X.tsx │ │ │ ├── Facebook.tsx │ │ │ ├── Linkedin.tsx │ │ │ ├── Tiktok.tsx │ │ │ ├── Website.tsx │ │ │ └── Youtube.tsx │ │ ├── types.ts │ │ └── defaults.tsx │ ├── tsup.config.ts │ └── package.json ├── utils │ ├── README.md │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── src │ │ └── index.ts │ ├── tsup.config.ts │ ├── jest.config.js │ └── package.json ├── popovers │ ├── README.md │ ├── .eslintrc.js │ ├── src │ │ ├── components │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── styles │ │ │ ├── popover.css │ │ │ └── tooltip.css │ │ └── variables.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ └── package.json ├── spinners │ ├── README.md │ ├── src │ │ ├── index.ts │ │ └── Spinner │ │ │ ├── index.ts │ │ │ ├── Basic.tsx │ │ │ ├── Bars.tsx │ │ │ ├── Gear.tsx │ │ │ ├── Pulse.tsx │ │ │ └── Blocks.tsx │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── tsup.config.ts │ └── package.json ├── hooks │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── README.md │ ├── tsup.config.ts │ ├── src │ │ └── index.ts │ └── package.json ├── style │ ├── .eslintrc.js │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ ├── index.ts │ │ └── Style.tsx │ ├── tsup.config.ts │ ├── jest.config.js │ └── package.json ├── accordion │ ├── .eslintrc.js │ ├── src │ │ ├── index.ts │ │ └── variables.ts │ ├── tsconfig.json │ ├── tsup.config.ts │ └── package.json ├── transition │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── README.md │ ├── src │ │ └── index.ts │ ├── tsup.config.ts │ └── package.json └── layout-client │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── src │ ├── hooks │ │ ├── index.ts │ │ ├── useLayout.ts │ │ └── useTheme.ts │ ├── index.ts │ └── components │ │ ├── index.ts │ │ ├── LayoutSettings.tsx │ │ └── Div.tsx │ ├── tsup.config.ts │ └── package.json ├── apps ├── docs │ ├── src │ │ ├── styles │ │ │ ├── _utility.scss │ │ │ ├── styles.scss │ │ │ └── _global.scss │ │ ├── components │ │ │ ├── Demo │ │ │ │ └── index.ts │ │ │ ├── Search │ │ │ │ ├── index.ts │ │ │ │ └── Search.tsx │ │ │ ├── CodeBlock │ │ │ │ ├── index.ts │ │ │ │ └── CodeBlock.tsx │ │ │ ├── PageContents │ │ │ │ └── index.ts │ │ │ ├── NavArea │ │ │ │ ├── index.ts │ │ │ │ └── NavArea.tsx │ │ │ ├── PostNavigation │ │ │ │ └── index.ts │ │ │ ├── ReferenceLayout │ │ │ │ └── index.ts │ │ │ ├── CopyButton │ │ │ │ ├── index.ts │ │ │ │ └── CopyButton.tsx │ │ │ ├── Table.tsx │ │ │ ├── Callout.tsx │ │ │ ├── index.ts │ │ │ ├── Heading.tsx │ │ │ └── MDXLink.tsx │ │ ├── app │ │ │ ├── favicon.ico │ │ │ ├── apple-icon.png │ │ │ ├── api-reference │ │ │ │ ├── page.tsx │ │ │ │ └── components │ │ │ │ │ └── accordion │ │ │ │ │ ├── _examples │ │ │ │ │ └── example-1.mdx │ │ │ │ │ ├── layout.tsx │ │ │ │ │ └── page.tsx │ │ │ ├── page.tsx │ │ │ └── sitemap.ts │ │ └── utils │ │ │ ├── index.ts │ │ │ ├── flatten-menu.ts │ │ │ └── file-size.ts │ ├── temp │ │ └── docs │ │ │ ├── hooks.mdx │ │ │ ├── carousel.mdx │ │ │ ├── elements │ │ │ ├── tabs.mdx │ │ │ ├── modal.mdx │ │ │ ├── accordion.mdx │ │ │ ├── dropdown.mdx │ │ │ ├── generate.mdx │ │ │ ├── index.mdx │ │ │ ├── popover.mdx │ │ │ ├── spinner.mdx │ │ │ ├── tooltip.mdx │ │ │ ├── announcement.mdx │ │ │ ├── cookie-notice.mdx │ │ │ ├── page-transition.mdx │ │ │ └── table-of-contents.mdx │ │ │ ├── forms │ │ │ ├── form.mdx │ │ │ ├── fields.mdx │ │ │ ├── index.mdx │ │ │ ├── pagination.mdx │ │ │ ├── submission.mdx │ │ │ └── validation.mdx │ │ │ ├── lightbox.mdx │ │ │ ├── layout │ │ │ ├── index.mdx │ │ │ ├── section.mdx │ │ │ ├── color-button.mdx │ │ │ ├── menus.mdx │ │ │ └── side-nav.mdx │ │ │ ├── utilities.mdx │ │ │ ├── maker-ui-options.mdx │ │ │ ├── contribute.mdx │ │ │ └── faqs.mdx │ ├── .eslintrc.js │ ├── README.md │ ├── next-env.d.ts │ ├── types.d.ts │ ├── mdx-components.tsx │ ├── next.config.mjs │ ├── package.json │ └── tsconfig.json └── v2 │ ├── .eslintrc.js │ ├── public │ ├── favicon.ico │ └── images │ │ └── cosmos.jpeg │ ├── src │ ├── components │ │ ├── client.ts │ │ └── CustomCollapse.tsx │ ├── app │ │ ├── layout │ │ │ ├── both │ │ │ │ ├── page.tsx │ │ │ │ └── layout.tsx │ │ │ ├── page.tsx │ │ │ ├── left-panel │ │ │ │ ├── page.tsx │ │ │ │ └── layout.tsx │ │ │ └── right-panel │ │ │ │ ├── page.tsx │ │ │ │ └── layout.tsx │ │ ├── components │ │ │ ├── transition │ │ │ │ └── page.tsx │ │ │ ├── page.tsx │ │ │ ├── notifications │ │ │ │ └── page.tsx │ │ │ ├── forms │ │ │ │ ├── page.tsx │ │ │ │ ├── layout.scss │ │ │ │ └── layout.tsx │ │ │ ├── spinners │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ ├── accordion │ │ │ │ └── page.tsx │ │ │ └── social │ │ │ │ └── page.tsx │ │ ├── page.tsx │ │ └── studio │ │ │ ├── page.tsx │ │ │ └── page.css │ └── styles │ │ └── global.css │ ├── next-env.d.ts │ ├── next.config.js │ ├── .gitignore │ ├── package.json │ ├── README.md │ └── tsconfig.json ├── pnpm-workspace.yaml ├── cypress ├── tsconfig.json ├── fixtures │ └── example.json └── support │ ├── component-index.html │ └── component.ts ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ └── config.yml └── workflows │ └── release.yml ├── .prettierrc ├── global-types.ts ├── cypress.config.ts ├── .changeset ├── config.json └── README.md ├── .gitignore └── turbo.json /packages/forms/src/variables.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/src/styles/_utility.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/config/build-tools/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/data/tests/SmartGrid.cy.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/data/tests/SmartTable.cy.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/layout/tests/Workspace.cy.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/layout/tests/useLayout.cy.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/layout/tests/useMenu.cy.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/hooks.mdx: -------------------------------------------------------------------------------- 1 | # Hooks 2 | -------------------------------------------------------------------------------- /packages/layout/tests/MenuButton.cy.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/layout/tests/useColorTheme.cy.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/carousel.mdx: -------------------------------------------------------------------------------- 1 | # Carousel 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/tabs.mdx: -------------------------------------------------------------------------------- 1 | # Tabs 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/forms/form.mdx: -------------------------------------------------------------------------------- 1 | # Form 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/lightbox.mdx: -------------------------------------------------------------------------------- 1 | # Lightbox 2 | -------------------------------------------------------------------------------- /packages/data/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/data 2 | -------------------------------------------------------------------------------- /packages/scroll/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/scroll 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/modal.mdx: -------------------------------------------------------------------------------- 1 | # Modal 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/forms/fields.mdx: -------------------------------------------------------------------------------- 1 | # Fields 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/forms/index.mdx: -------------------------------------------------------------------------------- 1 | # Forms API 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/layout/index.mdx: -------------------------------------------------------------------------------- 1 | # Layout API 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/layout/section.mdx: -------------------------------------------------------------------------------- 1 | # Section 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/utilities.mdx: -------------------------------------------------------------------------------- 1 | # Utilities 2 | -------------------------------------------------------------------------------- /packages/lightbox/test/Lightbox.cy.tsx: -------------------------------------------------------------------------------- 1 | // todo 2 | -------------------------------------------------------------------------------- /packages/notifications/tests/Toast.cy.tsx: -------------------------------------------------------------------------------- 1 | // Todo 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/accordion.mdx: -------------------------------------------------------------------------------- 1 | # Accordion 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/dropdown.mdx: -------------------------------------------------------------------------------- 1 | # Dropdown 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/generate.mdx: -------------------------------------------------------------------------------- 1 | # Generate 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/index.mdx: -------------------------------------------------------------------------------- 1 | # Elements API 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/popover.mdx: -------------------------------------------------------------------------------- 1 | # Popover 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/spinner.mdx: -------------------------------------------------------------------------------- 1 | # Spinner 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/tooltip.mdx: -------------------------------------------------------------------------------- 1 | # Tooltip 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/forms/pagination.mdx: -------------------------------------------------------------------------------- 1 | # Pagination 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/forms/submission.mdx: -------------------------------------------------------------------------------- 1 | # Submission 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/forms/validation.mdx: -------------------------------------------------------------------------------- 1 | # Validation 2 | -------------------------------------------------------------------------------- /packages/data/src/components/SmartGrid/GridPagination.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/layout/color-button.mdx: -------------------------------------------------------------------------------- 1 | # ColorButton 2 | -------------------------------------------------------------------------------- /packages/layout-server/globals.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css' 2 | -------------------------------------------------------------------------------- /packages/studio/src/components/ResizeHandle/resize-handle.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/announcement.mdx: -------------------------------------------------------------------------------- 1 | # Announcement 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/cookie-notice.mdx: -------------------------------------------------------------------------------- 1 | # Cookie Notice 2 | -------------------------------------------------------------------------------- /packages/generative/README.md: -------------------------------------------------------------------------------- 1 | # Carousel 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /packages/maker-ui/src/hooks.ts: -------------------------------------------------------------------------------- 1 | export * from '@maker-ui/hooks' 2 | -------------------------------------------------------------------------------- /packages/maker-ui/src/utils.ts: -------------------------------------------------------------------------------- 1 | export * from '@maker-ui/utils' 2 | -------------------------------------------------------------------------------- /packages/tabs/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/tabs 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /packages/toc/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/toc 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /apps/docs/src/components/Demo/index.ts: -------------------------------------------------------------------------------- 1 | export { Demo } from './Demo' 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/page-transition.mdx: -------------------------------------------------------------------------------- 1 | # Page Transition 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/elements/table-of-contents.mdx: -------------------------------------------------------------------------------- 1 | # TableofContents 2 | -------------------------------------------------------------------------------- /packages/carousel/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/carousel 2 | 3 | Coming soon 4 | -------------------------------------------------------------------------------- /packages/modal/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/modal 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /packages/social/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/social 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /packages/utils/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/utils 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /apps/docs/src/components/Search/index.ts: -------------------------------------------------------------------------------- 1 | export { Search } from './Search' 2 | -------------------------------------------------------------------------------- /packages/lightbox/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/lightbox 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /packages/popovers/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/popovers 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /packages/spinners/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/spinners 2 | 3 | Coming soon... 4 | -------------------------------------------------------------------------------- /packages/config/build-tools/src/index.ts: -------------------------------------------------------------------------------- 1 | export { buildConfig } from './tsup' 2 | -------------------------------------------------------------------------------- /packages/maker-ui/src/modal.ts: -------------------------------------------------------------------------------- 1 | export { Modal, Portal } from '@maker-ui/modal' 2 | -------------------------------------------------------------------------------- /packages/maker-ui/src/spinners.ts: -------------------------------------------------------------------------------- 1 | export { Spinner } from '@maker-ui/spinners' 2 | -------------------------------------------------------------------------------- /packages/notifications/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/notifications 2 | 3 | Coming Soon 4 | -------------------------------------------------------------------------------- /apps/docs/src/components/CodeBlock/index.ts: -------------------------------------------------------------------------------- 1 | export { CodeBlock } from './CodeBlock' 2 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/maker-ui-options.mdx: -------------------------------------------------------------------------------- 1 | # Maker UI Options 2 | 3 | Test content 4 | -------------------------------------------------------------------------------- /packages/carousel/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export { usePrevious } from './usePrevious' 2 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/Input/index.ts: -------------------------------------------------------------------------------- 1 | export { Input } from './Input' 2 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/Range/index.ts: -------------------------------------------------------------------------------- 1 | export { Range } from './Range' 2 | -------------------------------------------------------------------------------- /packages/studio/src/components/Editor/index.ts: -------------------------------------------------------------------------------- 1 | export { Editor } from './Editor' 2 | -------------------------------------------------------------------------------- /apps/docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['next-app'], 4 | } -------------------------------------------------------------------------------- /apps/docs/temp/docs/contribute.mdx: -------------------------------------------------------------------------------- 1 | # Contribute 2 | 3 | ## Code Style 4 | 5 | ## Tests 6 | -------------------------------------------------------------------------------- /apps/v2/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['next-app'], 4 | } -------------------------------------------------------------------------------- /packages/carousel/globals.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css' 2 | declare module '*.css' 3 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/Select/index.ts: -------------------------------------------------------------------------------- 1 | export { Select } from './Select' 2 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/Switch/index.ts: -------------------------------------------------------------------------------- 1 | export { Switch } from './Switch' 2 | -------------------------------------------------------------------------------- /packages/spinners/src/index.ts: -------------------------------------------------------------------------------- 1 | export { Spinner, type SpinnerProps } from './Spinner' 2 | -------------------------------------------------------------------------------- /packages/studio/src/components/GridMenu/index.ts: -------------------------------------------------------------------------------- 1 | export { GridMenu } from './GridMenu' 2 | -------------------------------------------------------------------------------- /apps/docs/src/components/PageContents/index.ts: -------------------------------------------------------------------------------- 1 | export { PageContents } from './PageContents' 2 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/Options/index.tsx: -------------------------------------------------------------------------------- 1 | export { Options } from './Options' 2 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/Repeater/index.ts: -------------------------------------------------------------------------------- 1 | export { Repeater } from './Repeater' 2 | -------------------------------------------------------------------------------- /packages/spinners/src/Spinner/index.ts: -------------------------------------------------------------------------------- 1 | export { Spinner, type SpinnerProps } from './Spinner' 2 | -------------------------------------------------------------------------------- /packages/studio/src/components/GapControl/index.ts: -------------------------------------------------------------------------------- 1 | export { GapControl } from './GapControl' 2 | -------------------------------------------------------------------------------- /packages/studio/src/components/Grid/index.ts: -------------------------------------------------------------------------------- 1 | export { Grid, type GridAction } from './Grid' 2 | -------------------------------------------------------------------------------- /apps/docs/src/components/NavArea/index.ts: -------------------------------------------------------------------------------- 1 | export { DesktopWidgets, SharedWidgets } from './NavArea' 2 | -------------------------------------------------------------------------------- /apps/docs/src/components/PostNavigation/index.ts: -------------------------------------------------------------------------------- 1 | export { PostNavigation } from './PostNavigation' 2 | -------------------------------------------------------------------------------- /packages/carousel/src/helpers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './position' 2 | export * from './navigation' 3 | -------------------------------------------------------------------------------- /packages/data/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/forms/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/hooks/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/layout/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/maker-ui/src/data.ts: -------------------------------------------------------------------------------- 1 | export * from '@maker-ui/data' 2 | import '../../data/dist/index.css' 3 | -------------------------------------------------------------------------------- /packages/maker-ui/src/popovers.ts: -------------------------------------------------------------------------------- 1 | export { Popover, Dropdown, Tooltip } from '@maker-ui/popovers' 2 | -------------------------------------------------------------------------------- /packages/modal/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/scroll/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/social/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/studio/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/studio/src/components/ResizeHandle/index.ts: -------------------------------------------------------------------------------- 1 | export { ResizeHandle } from './ResizeHandle' 2 | -------------------------------------------------------------------------------- /packages/style/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/tabs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/toc/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/toc/src/index.ts: -------------------------------------------------------------------------------- 1 | export { PageContents, type PageContentsProps } from './PageContents' 2 | -------------------------------------------------------------------------------- /packages/utils/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/*' 3 | - 'packages/*' 4 | - 'packages/config/*' 5 | -------------------------------------------------------------------------------- /apps/docs/src/components/ReferenceLayout/index.ts: -------------------------------------------------------------------------------- 1 | export { ReferenceLayout } from './ReferenceLayout' 2 | -------------------------------------------------------------------------------- /apps/v2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdarche/maker-ui/HEAD/apps/v2/public/favicon.ico -------------------------------------------------------------------------------- /apps/v2/src/components/client.ts: -------------------------------------------------------------------------------- 1 | 'use client' 2 | export { CustomCollapseMenu } from './CustomCollapse' 3 | -------------------------------------------------------------------------------- /packages/accordion/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/carousel/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/generative/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/lightbox/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/maker-ui/src/forms.ts: -------------------------------------------------------------------------------- 1 | export * from '@maker-ui/forms' 2 | import '../../forms/dist/index.css' 3 | -------------------------------------------------------------------------------- /packages/maker-ui/src/transition.ts: -------------------------------------------------------------------------------- 1 | export { Transition, CSSTransition } from '@maker-ui/transition' 2 | -------------------------------------------------------------------------------- /packages/popovers/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/spinners/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/transition/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /apps/docs/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdarche/maker-ui/HEAD/apps/docs/src/app/favicon.ico -------------------------------------------------------------------------------- /packages/layout-client/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/layout-server/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/notifications/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['library'], 4 | } 5 | -------------------------------------------------------------------------------- /packages/tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/toc/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /apps/docs/src/app/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdarche/maker-ui/HEAD/apps/docs/src/app/apple-icon.png -------------------------------------------------------------------------------- /apps/v2/public/images/cosmos.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdarche/maker-ui/HEAD/apps/v2/public/images/cosmos.jpeg -------------------------------------------------------------------------------- /packages/carousel/src/index.ts: -------------------------------------------------------------------------------- 1 | import './styles/carousel.css' 2 | export { Carousel } from './components/Carousel' 3 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/DateTimePicker/index.ts: -------------------------------------------------------------------------------- 1 | export { DateTimePicker } from './DateTimePicker' 2 | -------------------------------------------------------------------------------- /packages/generative/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/modal/src/index.ts: -------------------------------------------------------------------------------- 1 | export { Modal, type ModalProps } from './Modal' 2 | export { Portal } from './Portal' 3 | -------------------------------------------------------------------------------- /packages/scroll/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/social/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/spinners/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/studio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/transition/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /apps/docs/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export { getFileSize } from './file-size' 2 | export { flattenMenu } from './flatten-menu' 3 | -------------------------------------------------------------------------------- /packages/generative/src/index.ts: -------------------------------------------------------------------------------- 1 | export { Generate } from './Generate' 2 | export { shuffle, random } from './utils' 3 | -------------------------------------------------------------------------------- /packages/layout-client/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/maker-ui/src/tabs.ts: -------------------------------------------------------------------------------- 1 | export { Tabs, TabPanel } from '@maker-ui/tabs' 2 | import '../../tabs/dist/index.css' 3 | -------------------------------------------------------------------------------- /packages/config/build-tools/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/lightbox/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { Lightbox } from './Lightbox' 2 | export { LightboxLink } from './Link' 3 | -------------------------------------------------------------------------------- /packages/maker-ui/src/carousel.ts: -------------------------------------------------------------------------------- 1 | export { Carousel } from '@maker-ui/carousel' 2 | import '../../carousel/dist/index.css' 3 | -------------------------------------------------------------------------------- /packages/layout/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { Layout } from './Layout' 2 | export { ResponsiveStyle } from './ResponsiveStyle' 3 | -------------------------------------------------------------------------------- /packages/forms/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { Form } from './Form' 2 | export { ImagePicker } from '@/fields' 3 | export * from './Icons' 4 | -------------------------------------------------------------------------------- /packages/modal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src", "../../types", "./types"] 4 | } 5 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/Media/index.ts: -------------------------------------------------------------------------------- 1 | export { ImagePicker } from './ImagePicker' 2 | export { MediaField } from './MediaField' 3 | -------------------------------------------------------------------------------- /packages/maker-ui/src/accordion.ts: -------------------------------------------------------------------------------- 1 | export { Accordion, AccordionPanel } from '@maker-ui/accordion' 2 | import '../../accordion/dist/index.css' 3 | -------------------------------------------------------------------------------- /packages/maker-ui/src/scroll.ts: -------------------------------------------------------------------------------- 1 | export { Animate, ScrollBox, ParallaxSection } from '@maker-ui/scroll' 2 | import '../../scroll/dist/index.css' 3 | -------------------------------------------------------------------------------- /packages/layout/tests/Layout.cy.tsx: -------------------------------------------------------------------------------- 1 | // Topbar 2 | 3 | // Header 4 | 5 | // MobileMenu 6 | 7 | // Main 8 | 9 | // Sidebar 10 | 11 | // SideNav 12 | -------------------------------------------------------------------------------- /packages/maker-ui/src/lightbox.ts: -------------------------------------------------------------------------------- 1 | export { Lightbox, LightboxLink, type LightboxItem } from '@maker-ui/lightbox' 2 | import '../../lightbox/dist/index.css' 3 | -------------------------------------------------------------------------------- /packages/popovers/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { Popover } from './Popover' 2 | export { Tooltip } from './Tooltip' 3 | export { Dropdown } from './Dropdown' 4 | -------------------------------------------------------------------------------- /packages/style/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/jss 2 | 3 | A CSS in JS runtime for client side styles. Wraps emotion to use a CSS prop that supports responsive arrays. 4 | -------------------------------------------------------------------------------- /packages/transition/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/transition 2 | 3 | A light wrapper for React Transition Group that is used to mount and unmount Maker UI components. 4 | -------------------------------------------------------------------------------- /apps/docs/src/components/CopyButton/index.ts: -------------------------------------------------------------------------------- 1 | export { CopyButton } from './CopyButton' 2 | 3 | // Tests: 4 | 5 | // - clipboard functionality 6 | // - td prop 7 | -------------------------------------------------------------------------------- /packages/accordion/src/index.ts: -------------------------------------------------------------------------------- 1 | import './styles/accordion.css' 2 | export { Accordion } from './Accordion' 3 | export { AccordionPanel } from './AccordionPanel' 4 | -------------------------------------------------------------------------------- /packages/layout-client/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export { useMenu } from './useMenu' 2 | export { useTheme } from './useTheme' 3 | export { useLayout } from './useLayout' 4 | -------------------------------------------------------------------------------- /apps/docs/src/styles/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import 'global'; 3 | @import 'utility'; 4 | @import 'layout'; 5 | @import 'components'; 6 | @import 'tables'; 7 | -------------------------------------------------------------------------------- /apps/v2/src/app/layout/both/page.tsx: -------------------------------------------------------------------------------- 1 | export default function BothPanelPage() { 2 | return ( 3 |
4 |

Both Panels

5 |
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /apps/v2/src/app/layout/page.tsx: -------------------------------------------------------------------------------- 1 | export default function WorkspacePage() { 2 | return ( 3 |
4 |

Choose a Layout

5 |
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /packages/lightbox/src/index.ts: -------------------------------------------------------------------------------- 1 | import './styles/lightbox.css' 2 | export { Lightbox, LightboxLink } from './components' 3 | export type { LightboxItem } from './types' 4 | -------------------------------------------------------------------------------- /packages/style/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "jsx": "react" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/tabs/src/index.ts: -------------------------------------------------------------------------------- 1 | import './styles/tabs.css' 2 | export { Tabs, type TabsProps } from './Tabs' 3 | export { TabPanel, type TabPanelProps } from './TabPanel' 4 | -------------------------------------------------------------------------------- /apps/v2/src/app/layout/left-panel/page.tsx: -------------------------------------------------------------------------------- 1 | export default function LeftPanelPage() { 2 | return ( 3 |
4 |

Left Panel

5 |
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /packages/data/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export { useExport } from './useExport' 2 | export { useSmartGrid } from './useSmartGrid' 3 | export { useSmartTable } from './useSmartTable' 4 | -------------------------------------------------------------------------------- /packages/utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "types": ["jest"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/faqs.mdx: -------------------------------------------------------------------------------- 1 | 5 | 6 | # FAQs 7 | -------------------------------------------------------------------------------- /apps/v2/src/app/components/transition/page.tsx: -------------------------------------------------------------------------------- 1 | import { Transitions } from './Transitions' 2 | 3 | export default function TransitionPage() { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /apps/v2/src/app/layout/right-panel/page.tsx: -------------------------------------------------------------------------------- 1 | export default function RightPanelPage() { 2 | return ( 3 |
4 |

Both Panels

5 |
6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /packages/accordion/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "types": ["cypress"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/scroll/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { ParallaxSection } from './ParallaxSection' 2 | export { Animate } from './Animate' 3 | export { ScrollBox } from './ScrollBox' 4 | -------------------------------------------------------------------------------- /cypress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["es5", "dom"], 5 | "types": ["cypress", "node"] 6 | }, 7 | "include": ["**/*.ts"] 8 | } -------------------------------------------------------------------------------- /apps/v2/src/app/components/page.tsx: -------------------------------------------------------------------------------- 1 | export default function DemoPage() { 2 | return ( 3 |
4 |

About Page

5 |

Lorem ipsum

6 |
7 | ) 8 | } 9 | -------------------------------------------------------------------------------- /packages/maker-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "moduleResolution": "nodenext" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/maker-ui/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Style, 3 | generateCSS, 4 | type ResponsiveCSS, 5 | type Breakpoints, 6 | type MediaQuery, 7 | type MakerCSS, 8 | } from '@maker-ui/style' 9 | -------------------------------------------------------------------------------- /packages/popovers/src/index.ts: -------------------------------------------------------------------------------- 1 | import './styles/dropdown.css' 2 | import './styles/popover.css' 3 | import './styles/tooltip.css' 4 | 5 | export { Popover, Tooltip, Dropdown } from '@/components' 6 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /packages/scroll/src/index.ts: -------------------------------------------------------------------------------- 1 | import './styles/animate.css' 2 | import './styles/parallax.css' 3 | import './styles/scrollbox.css' 4 | export { ParallaxSection, Animate, ScrollBox } from './components' 5 | -------------------------------------------------------------------------------- /apps/docs/src/app/api-reference/page.tsx: -------------------------------------------------------------------------------- 1 | // import MDXPage from './test.mdx' 2 | // import Readme from '@packages/accordion/README.mdx' 3 | 4 | export default function Page() { 5 | return <>Test 6 | } 7 | -------------------------------------------------------------------------------- /apps/v2/src/app/components/notifications/page.tsx: -------------------------------------------------------------------------------- 1 | import { ToastsPage } from './toast' 2 | import 'maker-ui/notifications.css' 3 | 4 | export default function FormPage() { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /packages/config/build-tools/src/plugins/index.ts: -------------------------------------------------------------------------------- 1 | export { PluginCSSCombine } from './css-combine' 2 | export { PluginCSSModule } from './css-module' 3 | // export { CreateIndexPlugin } from './create-index' 4 | -------------------------------------------------------------------------------- /packages/maker-ui/src/notifications.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Announcement, 3 | CookieNotice, 4 | ToastProvider, 5 | useToast, 6 | } from '@maker-ui/notifications' 7 | import '../../notifications/dist/index.css' 8 | -------------------------------------------------------------------------------- /packages/notifications/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { Announcement } from './Announcement' 2 | export { CookieNotice } from './CookieNotice' 3 | export { ToastProvider, ToastContext } from './ToastProvider' 4 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Learn how to add code owners here: 2 | # https://help.github.com/en/articles/about-code-owners 3 | 4 | * @mdarche 5 | /apps/ @mdarche 6 | /examples/ @mdarche 7 | /packages/ @mdarche -------------------------------------------------------------------------------- /packages/config/eslint-config-next-app/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['next/core-web-vitals', 'turbo', 'prettier'], 3 | rules: { 4 | '@next/next/no-html-link-for-pages': 'off', 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/data/src/components/SmartTable/index.ts: -------------------------------------------------------------------------------- 1 | export type { 2 | ColumnConfig, 3 | FetchDataParams, 4 | TableStyles, 5 | TableSettings, 6 | } from './types' 7 | export { SmartTable } from './SmartTable' 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": true, 5 | "tabWidth": 2, 6 | "trailingComma": "es5", 7 | "proseWrap": "preserve", 8 | "jsxBracketSameLine": true 9 | } 10 | -------------------------------------------------------------------------------- /apps/docs/README.md: -------------------------------------------------------------------------------- 1 | # Integration / E2E Testing App 2 | 3 | This is a simple NextJS app for testing all `@maker-ui` packages that export browser components. See `cypress/integration` for package specific test suites. 4 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/layout/menus.mdx: -------------------------------------------------------------------------------- 1 | 5 | 6 | # Menus 7 | -------------------------------------------------------------------------------- /packages/data/src/index.ts: -------------------------------------------------------------------------------- 1 | import './styles/grid.css' 2 | import './styles/search.css' 3 | import './styles/table.css' 4 | import './styles/pagination.css' 5 | export * from './components' 6 | export { useSmartGrid } from './hooks' 7 | -------------------------------------------------------------------------------- /packages/maker-ui/src/social.ts: -------------------------------------------------------------------------------- 1 | export { 2 | SocialAccounts, 3 | FacebookIcon, 4 | InstagramIcon, 5 | LinkedinIcon, 6 | TiktokIcon, 7 | XIcon, 8 | WebsiteIcon, 9 | YoutubeIcon, 10 | } from '@maker-ui/social' 11 | -------------------------------------------------------------------------------- /apps/docs/src/components/Table.tsx: -------------------------------------------------------------------------------- 1 | interface TableProps extends React.HTMLAttributes {} 2 | 3 | export const Table = ({ children }: TableProps) => { 4 | return
{children}
5 | } 6 | -------------------------------------------------------------------------------- /apps/v2/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/forms/src/context/index.ts: -------------------------------------------------------------------------------- 1 | export { FormContext, formReducer, initFieldData } from './FormContext' 2 | export { useField } from './useField' 3 | export { useForm } from './useForm' 4 | export { useRepeater } from './useRepeater' 5 | -------------------------------------------------------------------------------- /apps/docs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /packages/data/src/styles/pagination.css: -------------------------------------------------------------------------------- 1 | .mkui-pagination { 2 | margin-top: 10px; 3 | } 4 | 5 | .mkui-pagination.type-input { 6 | } 7 | 8 | .mkui-pagination.type-simple { 9 | } 10 | 11 | .mkui-pagination.type-numbered { 12 | } 13 | -------------------------------------------------------------------------------- /packages/style/src/index.ts: -------------------------------------------------------------------------------- 1 | export { Style } from './Style' 2 | export { generateCSS } from './css' 3 | export type { 4 | ResponsiveCSS, 5 | Breakpoints, 6 | MediaQuery, 7 | MakerCSS, 8 | StyleSettings, 9 | } from './types' 10 | -------------------------------------------------------------------------------- /packages/hooks/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/src": ["src/index.ts"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/scroll/src/styles/parallax.css: -------------------------------------------------------------------------------- 1 | .mkui-parallax-section { 2 | position: relative; 3 | z-index: 1; 4 | overflow: hidden; 5 | } 6 | 7 | .mkui-parallax-bg { 8 | z-index: -1; 9 | width: 100%; 10 | will-change: transform; 11 | } 12 | -------------------------------------------------------------------------------- /packages/social/src/index.ts: -------------------------------------------------------------------------------- 1 | export { SocialAccounts } from './SocialAccounts' 2 | export { 3 | FacebookIcon, 4 | InstagramIcon, 5 | LinkedinIcon, 6 | TiktokIcon, 7 | XIcon, 8 | WebsiteIcon, 9 | YoutubeIcon, 10 | } from './svgr' 11 | -------------------------------------------------------------------------------- /packages/notifications/src/index.ts: -------------------------------------------------------------------------------- 1 | import '@/styles/toast.css' 2 | export { Announcement, CookieNotice, ToastProvider } from '@/components' 3 | export type { ToastProps, ToastSettings, ToastClassNames } from '@/types' 4 | export { useToast } from '@/hooks' 5 | -------------------------------------------------------------------------------- /global-types.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { mount } from 'cypress/react18' 4 | export {} 5 | declare global { 6 | namespace Cypress { 7 | interface Chainable { 8 | mount: typeof mount 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /apps/docs/types.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.mdx' { 2 | let MDXComponent: (props: any) => JSX.Element 3 | export default MDXComponent 4 | } 5 | 6 | declare module '*.md' { 7 | let MDComponent: (props: any) => JSX.Element 8 | export default MDComponent 9 | } 10 | -------------------------------------------------------------------------------- /packages/carousel/src/hooks/usePrevious.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react' 2 | 3 | export const usePrevious = (value: T) => { 4 | const ref = useRef() 5 | useEffect(() => { 6 | ref.current = value 7 | }) 8 | return ref.current 9 | } 10 | -------------------------------------------------------------------------------- /packages/maker-ui/README.md: -------------------------------------------------------------------------------- 1 | # Maker UI 2 | 3 | Maker UI bundles 4 core packages so you can easily import everything you need to build responsive layouts and custom components: 4 | 5 | - @maker-ui/css 6 | - @maker-ui/primitives 7 | - @maker-ui/layout 8 | - @maker-ui/utils 9 | -------------------------------------------------------------------------------- /packages/modal/types.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { mount } from 'cypress/react18' 4 | export {} 5 | declare global { 6 | namespace Cypress { 7 | interface Chainable { 8 | mount: typeof mount 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/transition/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Transition, 3 | type TransitionProps, 4 | type TransitionState, 5 | } from './Transition' 6 | export { 7 | CSSTransition, 8 | type CSSTransitionProps, 9 | type TransitionType, 10 | } from './CSSTransition' 11 | -------------------------------------------------------------------------------- /packages/lightbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "jsx": "react", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@/types": ["src/types.ts"] 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/carousel/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minify: true, 6 | banner: { 7 | js: `'use client'`, 8 | }, 9 | }) 10 | 11 | export default defineConfig(config) 12 | -------------------------------------------------------------------------------- /packages/layout-client/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | LayoutProvider, 3 | LayoutSettings, 4 | type LayoutSettingsProps, 5 | ThemeProvider, 6 | ColorButton, 7 | Menu, 8 | MenuButton, 9 | Div, 10 | } from './components' 11 | export { useTheme, useLayout, useMenu } from './hooks' 12 | -------------------------------------------------------------------------------- /apps/v2/src/app/components/forms/page.tsx: -------------------------------------------------------------------------------- 1 | import { Section } from 'maker-ui/layout' 2 | 3 | export default function FormPage() { 4 | return ( 5 |
6 | Select a form from the menu to test drive. 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /packages/lightbox/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minify: false, 6 | banner: { 7 | js: `'use client'`, 8 | }, 9 | }) 10 | 11 | export default defineConfig(config) 12 | -------------------------------------------------------------------------------- /packages/social/src/icons/x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/forms/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/forms 2 | 3 | Coming soon 4 | 5 | ## FAQs 6 | 7 | ### How to handle multiple color themes? 8 | 9 | Define your colors in root variables and map your form values to those variables. This way you won't need to create separate styles for your form CSS variables. 10 | -------------------------------------------------------------------------------- /packages/studio/src/index.ts: -------------------------------------------------------------------------------- 1 | import './components/Grid/grid.css' 2 | import './components/GridMenu/grid-menu.css' 3 | import './components/GapControl/gap-control.css' 4 | import './components/ResizeHandle/resize-handle.css' 5 | import './components/Editor/editor.css' 6 | export { Grid } from './components/Grid' 7 | -------------------------------------------------------------------------------- /apps/v2/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | export default function HomePage() { 2 | return ( 3 |
4 | Lets see if we can render a list 5 |
    6 |
  • Bullet 1
    • 7 |
  • Bullet 2
    • 8 |
  • Bullet 3
    • 9 |
10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/social/src/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | export default function HomePage() { 2 | return ( 3 |
4 | Lets see if we can render a list 5 |
    6 |
  • Bullet 1
    • 7 |
  • Bullet 2
    • 8 |
  • Bullet 3
    • 9 |
10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/index.ts: -------------------------------------------------------------------------------- 1 | export { Input } from './Input' 2 | export { Select } from './Select' 3 | export { Switch } from './Switch' 4 | export { Options } from './Options' 5 | export { Range } from './Range' 6 | export { ImagePicker, MediaField } from './Media' 7 | export { DateTimePicker } from './DateTimePicker' 8 | -------------------------------------------------------------------------------- /packages/data/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "baseUrl": ".", 6 | "paths": { 7 | "@/hooks": ["src/hooks/index.ts"], 8 | "@/icons": ["src/components/Icons.tsx"], 9 | "@/utils": ["src/utils.ts"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | 3 | export default defineConfig({ 4 | video: false, 5 | screenshotOnRunFailure: false, 6 | viewportWidth: 1280, 7 | viewportHeight: 800, 8 | component: { 9 | devServer: { 10 | framework: 'next', 11 | bundler: 'webpack', 12 | }, 13 | }, 14 | }) 15 | -------------------------------------------------------------------------------- /packages/config/tsconfig/react-library.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "React Library", 4 | "extends": "./base.json", 5 | "exclude": ["dist", "build"], 6 | "compilerOptions": { 7 | "lib": ["esnext", "dom"], 8 | "module": "esnext", 9 | "jsx": "react-jsx" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/config/eslint-config-next-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-next-app", 3 | "main": "index.js", 4 | "version": "1.0.0", 5 | "dependencies": { 6 | "eslint-config-next": "latest", 7 | "eslint-config-prettier": "latest", 8 | "eslint-plugin-react": "latest", 9 | "eslint-config-turbo": "latest" 10 | } 11 | } -------------------------------------------------------------------------------- /packages/hooks/README.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/hooks 2 | 3 | A collection of helpful React hooks for client components. 4 | 5 | - useFocus 6 | - useScrollPosition 7 | - useTracker 8 | - useWindowSize 9 | - useMeasure 10 | 11 | ## useFocus 12 | 13 | ## useScrollPosition 14 | 15 | ## useTracker 16 | 17 | ## useWindowSize 18 | 19 | ## useMeasure 20 | -------------------------------------------------------------------------------- /packages/utils/src/index.ts: -------------------------------------------------------------------------------- 1 | import merge from 'deepmerge' 2 | 3 | export { Conditional } from './Conditional' 4 | export { 5 | generateId, 6 | cn, 7 | mergeRefs, 8 | isObjectEmpty, 9 | cleanObject, 10 | formatNumber, 11 | } from './helper' 12 | export { getCssVariables, type StyleConfig } from './internal' 13 | export { merge } 14 | -------------------------------------------------------------------------------- /packages/layout/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | export default defineConfig((options) => 5 | buildConfig({ 6 | global: true, 7 | clean: false, 8 | minify: !options.watch, 9 | entry: { 10 | index: 'src/index.ts', 11 | }, 12 | }) 13 | ) 14 | -------------------------------------------------------------------------------- /packages/style/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | export default defineConfig((options) => 5 | buildConfig({ 6 | global: true, 7 | clean: false, 8 | minify: !options.watch, 9 | entry: { 10 | index: 'src/index.ts', 11 | }, 12 | }) 13 | ) 14 | -------------------------------------------------------------------------------- /packages/utils/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | export default defineConfig((options) => 5 | buildConfig({ 6 | global: true, 7 | clean: false, 8 | minify: !options.watch, 9 | entry: { 10 | index: 'src/index.ts', 11 | }, 12 | }) 13 | ) 14 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@1.7.0/schema.json", 3 | "changelog": ["@changesets/changelog-github", { "repo": "mdarche/maker-ui" }], 4 | "commit": false, 5 | "linked": [], 6 | "access": "public", 7 | "baseBranch": "main", 8 | "updateInternalDependencies": "patch", 9 | "ignore": [] 10 | } 11 | -------------------------------------------------------------------------------- /apps/docs/src/components/Callout.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from 'maker-ui/utils' 2 | 3 | interface CalloutProps { 4 | type: 'alert' | 'info' | 'suggestion' 5 | children: React.ReactNode 6 | } 7 | 8 | export const Callout = ({ children, type = 'suggestion' }: CalloutProps) => { 9 | return
{children}
10 | } 11 | -------------------------------------------------------------------------------- /apps/v2/src/app/studio/page.tsx: -------------------------------------------------------------------------------- 1 | import { Grid } from '@maker-ui/studio' 2 | import './page.css' 3 | 4 | export default function StudioTest() { 5 | return ( 6 |
7 | 8 |
9 |
Child
10 |
11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/scroll/src/styles/scrollbox.css: -------------------------------------------------------------------------------- 1 | .mkui-scrollbox { 2 | width: var(--scroll-box-width); 3 | height: var(--scroll-box-height); 4 | overflow: hidden; 5 | position: relative; 6 | } 7 | 8 | .mkui-scrollbox-inner { 9 | overflow: auto; 10 | height: 100%; 11 | padding-right: var(--scroll-bar-width); 12 | box-sizing: content-box; 13 | } 14 | -------------------------------------------------------------------------------- /packages/layout-server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "jsx": "react", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@/defaults": ["src/defaults.ts"], 9 | "@/types": ["src/types.ts"], 10 | "@/utils": ["src/utils.ts"] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/layout-server/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | export default defineConfig((options) => 5 | buildConfig({ 6 | global: true, 7 | clean: false, 8 | minify: !options.watch, 9 | entry: { 10 | index: 'src/index.ts', 11 | }, 12 | }) 13 | ) 14 | -------------------------------------------------------------------------------- /packages/toc/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | }) 12 | 13 | export default defineConfig(config) 14 | -------------------------------------------------------------------------------- /packages/carousel/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src", "declaration.d.ts"], 4 | "compilerOptions": { 5 | "jsx": "react", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@/types": ["src/types.ts"], 9 | "@/helpers": ["src/helpers"], 10 | "@/hooks": ["src/hooks"] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/popovers/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "jsx": "react", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@/components": ["src/components"], 9 | "@/variables": ["src/variables.ts"], 10 | "@/types": ["src/types.ts"] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /apps/v2/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | 3 | const config = { 4 | images: { 5 | remotePatterns: [{ hostname: 'images.unsplash.com' }], 6 | }, 7 | } 8 | 9 | const withBundleAnalyzer = require('@next/bundle-analyzer')({ 10 | enabled: process.env.ANALYZE === 'true', 11 | }) 12 | 13 | module.exports = withBundleAnalyzer(config) 14 | -------------------------------------------------------------------------------- /packages/config/eslint-config-library/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ['react-hooks'], 3 | extends: ['prettier', 'react-app', 'turbo'], 4 | settings: { 5 | react: { 6 | version: 'detect', 7 | }, 8 | }, 9 | rules: { 10 | 'react-hooks/exhaustive-deps': 'error', 11 | }, 12 | ignorePatterns: ['packages/dist/*', 'dist/*'], 13 | } 14 | -------------------------------------------------------------------------------- /apps/docs/temp/docs/layout/side-nav.mdx: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | ```jsx 9 | import { SideNav } from 'maker-ui' 10 | ``` 11 | 12 | 13 | 14 | ## Props 15 | 16 | ## Maker UI Options 17 | 18 | ## Usage 19 | -------------------------------------------------------------------------------- /packages/spinners/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | clean: false, 6 | minifyIdentifiers: true, 7 | minifyWhitespace: true, 8 | minifySyntax: true, 9 | entry: { 10 | index: 'src/index.ts', 11 | }, 12 | }) 13 | 14 | export default defineConfig(config) 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | logs 2 | *.log 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | coverage 7 | build 8 | dist 9 | cache 10 | .npmrc 11 | .cache 12 | .env 13 | .next 14 | .turbo 15 | .vercel 16 | .DS_Store 17 | node_modules 18 | packages/*/node_modules 19 | package-lock.json 20 | yarn-error.log 21 | .yarn-integrity 22 | .vscode/ 23 | .npmrc.turbo 24 | store 25 | .store 26 | .pnpm 27 | -------------------------------------------------------------------------------- /packages/data/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | export default defineConfig((options) => 5 | buildConfig({ 6 | clean: false, 7 | minify: !options.watch, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | ) 16 | -------------------------------------------------------------------------------- /packages/forms/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | export default defineConfig((options) => 5 | buildConfig({ 6 | clean: false, 7 | minify: !options.watch, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | ) 16 | -------------------------------------------------------------------------------- /apps/v2/src/components/CustomCollapse.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { Menu, type MenuItem } from 'maker-ui/layout' 4 | 5 | export const CustomCollapseMenu = ({ menu }: { menu: MenuItem[] }) => { 6 | return ( 7 | ( 10 | 11 | )} 12 | /> 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/layout-client/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { Menu } from './Menu' 2 | export { ColorButton } from './ColorButton' 3 | export { MenuButton } from './MenuButton' 4 | export { LayoutProvider, LayoutContext } from './LayoutProvider' 5 | export { LayoutSettings, type LayoutSettingsProps } from './LayoutSettings' 6 | export { ThemeProvider } from './ThemeProvider' 7 | export { Div } from './Div' 8 | -------------------------------------------------------------------------------- /apps/docs/src/app/sitemap.ts: -------------------------------------------------------------------------------- 1 | import { MetadataRoute } from 'next' 2 | import { sideMenu } from '@/menus' 3 | import { flattenMenu } from '@/utils' 4 | 5 | const siteLinks = flattenMenu(sideMenu).map((item) => ({ 6 | url: `https://maker-ui.com${item.path}`, 7 | lastModified: new Date(), 8 | })) 9 | 10 | export default function sitemap(): MetadataRoute.Sitemap { 11 | return siteLinks 12 | } 13 | -------------------------------------------------------------------------------- /packages/config/tsconfig/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsconfig", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "main": "index.js", 6 | "publishConfig": { 7 | "access": "public" 8 | }, 9 | "files": [ 10 | "base.json", 11 | "next.json", 12 | "react-library.json" 13 | ], 14 | "devDependencies": { 15 | "typescript-plugin-css-modules": "^3.4.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/social/src/svgr/index.ts: -------------------------------------------------------------------------------- 1 | export { default as FacebookIcon } from './Facebook' 2 | export { default as InstagramIcon } from './Instagram' 3 | export { default as LinkedinIcon } from './Linkedin' 4 | export { default as TiktokIcon } from './Tiktok' 5 | export { default as WebsiteIcon } from './Website' 6 | export { default as XIcon } from './X' 7 | export { default as YoutubeIcon } from './Youtube' 8 | -------------------------------------------------------------------------------- /packages/social/src/types.ts: -------------------------------------------------------------------------------- 1 | export type LinkType = 2 | | string 3 | | { url: string; icon: string | React.ReactElement } 4 | 5 | type DefaultPlatforms = 6 | | 'facebook' 7 | | 'instagram' 8 | | 'x' 9 | | 'youtube' 10 | | 'tiktok' 11 | | 'linkedin' 12 | | 'website' 13 | 14 | export interface AccountLinks { 15 | [key: string | DefaultPlatforms]: LinkType | undefined 16 | } 17 | -------------------------------------------------------------------------------- /packages/social/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | global: true, 6 | clean: false, 7 | minifyIdentifiers: true, 8 | minifyWhitespace: true, 9 | minifySyntax: true, 10 | entry: { 11 | index: 'src/index.ts', 12 | }, 13 | }) 14 | 15 | export default defineConfig(config) 16 | -------------------------------------------------------------------------------- /apps/docs/src/components/Search/Search.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { DocSearch } from '@docsearch/react' 4 | 5 | export const Search = () => { 6 | return ( 7 |
8 | 13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/maker-ui/src/layout.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Menu, 3 | MenuButton, 4 | ColorButton, 5 | useLayout, 6 | useMenu, 7 | useTheme, 8 | Div, 9 | Section, 10 | Skiplinks, 11 | Layout, 12 | ResponsiveStyle, 13 | LayoutProvider, 14 | ThemeProvider, 15 | type MenuItemProps as MenuItem, 16 | type MakerUIOptions, 17 | } from '@maker-ui/layout' 18 | import '../../layout/dist/index.css' 19 | -------------------------------------------------------------------------------- /apps/v2/src/app/studio/page.css: -------------------------------------------------------------------------------- 1 | .parent { 2 | height: 100px; 3 | width: 100%; 4 | margin: 30px 0; 5 | container-type: inline-size; 6 | container-name: parent; 7 | } 8 | 9 | .child { 10 | background: gray; 11 | margin: 0 auto; 12 | max-width: 900px; 13 | } 14 | 15 | @container parent (min-width: 1200px) { 16 | .child { 17 | background: #d2d2d2; 18 | max-width: 100%; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/hooks/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | 16 | export default defineConfig(config) 17 | -------------------------------------------------------------------------------- /packages/modal/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | 16 | export default defineConfig(config) 17 | -------------------------------------------------------------------------------- /packages/scroll/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | 16 | export default defineConfig(config) 17 | -------------------------------------------------------------------------------- /packages/studio/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | 16 | export default defineConfig(config) 17 | -------------------------------------------------------------------------------- /packages/tabs/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | 16 | export default defineConfig(config) 17 | -------------------------------------------------------------------------------- /packages/transition/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | export default defineConfig((options) => 5 | buildConfig({ 6 | global: true, 7 | clean: false, 8 | minify: !options.watch, 9 | entry: { 10 | index: 'src/index.ts', 11 | }, 12 | banner: { 13 | js: `'use client'`, 14 | }, 15 | }) 16 | ) 17 | -------------------------------------------------------------------------------- /apps/docs/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { ReferenceLayout } from './ReferenceLayout' 2 | export { CodeBlock } from './CodeBlock' 3 | export { Heading } from './Heading' 4 | export { Callout } from './Callout' 5 | export { MDXLink } from './MDXLink' 6 | export { PostNavigation } from './PostNavigation/PostNavigation' 7 | export { Demo } from './Demo' 8 | export { Table } from './Table' 9 | export * from './Icons' 10 | -------------------------------------------------------------------------------- /packages/accordion/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | 16 | export default defineConfig(config) 17 | -------------------------------------------------------------------------------- /packages/generative/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | 16 | export default defineConfig(config) 17 | -------------------------------------------------------------------------------- /packages/layout-client/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | export default defineConfig((options) => 5 | buildConfig({ 6 | global: true, 7 | clean: false, 8 | minify: !options.watch, 9 | entry: { 10 | index: 'src/index.ts', 11 | }, 12 | banner: { 13 | js: `'use client'`, 14 | }, 15 | }) 16 | ) 17 | -------------------------------------------------------------------------------- /packages/notifications/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "jsx": "react", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@/hooks": ["src/hooks/index.ts"], 9 | "@/components": ["src/components/index.ts"], 10 | "@/styles/*": ["src/styles/*"], 11 | "@/types": ["src/types.ts"] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/popovers/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | 16 | export default defineConfig(config) 17 | -------------------------------------------------------------------------------- /packages/data/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | SmartGrid, 3 | SmartGridProvider, 4 | // FilterAccordion, 5 | // FilterGroup, 6 | // FilterSearch, 7 | // LayoutButtons, 8 | // SortButton, 9 | type FilterConfig, 10 | } from './SmartGrid' 11 | export { 12 | SmartTable, 13 | type ColumnConfig, 14 | type TableStyles, 15 | type TableSettings, 16 | type FetchDataParams, 17 | } from './SmartTable' 18 | -------------------------------------------------------------------------------- /packages/notifications/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | minifyIdentifiers: true, 6 | minifyWhitespace: true, 7 | minifySyntax: true, 8 | entry: { 9 | index: 'src/index.ts', 10 | }, 11 | banner: { 12 | js: `'use client'`, 13 | }, 14 | }) 15 | 16 | export default defineConfig(config) 17 | -------------------------------------------------------------------------------- /packages/data/src/components/SmartGrid/index.ts: -------------------------------------------------------------------------------- 1 | export type { FilterConfig, Action, SmartGridState, LayoutType } from './types' 2 | export { SmartGridProvider, SmartGridContext } from './Provider' 3 | export { SmartGrid } from './SmartGrid' 4 | export { AccordionMenu } from './AccordionMenu' 5 | export { FilterGroup } from './FilterGroup' 6 | export { LayoutButtons } from './LayoutButtons' 7 | export { SortButton } from './SortButton' 8 | -------------------------------------------------------------------------------- /cypress/support/component-index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Components App 8 |
9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/forms/src/components/fields/Options/options.css: -------------------------------------------------------------------------------- 1 | /* Config variables 2 | / -------------------------------------------------- / 3 | / --form-option-margin 4 | / --form-option-margin-wrapper 5 | / -------------------------------------------------- 6 | */ 7 | 8 | .mkui-radio, 9 | .mkui-checkbox { 10 | margin: var(--form-option-margin, 0px 10px 0px 0px); 11 | } 12 | 13 | .mkui-option-wrapper { 14 | margin: var(--form-option-margin-wrapper, 5px 0px); 15 | } 16 | -------------------------------------------------------------------------------- /packages/layout/src/styles/global.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | body { 5 | margin: 0; 6 | font-family: var(--font-body); 7 | color: var(--color-text); 8 | background-color: var(--color-background); 9 | } 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | h5, 15 | h6 { 16 | font-family: var(--font-heading); 17 | } 18 | code, 19 | pre { 20 | font-family: var(--font-monospace); 21 | } 22 | b, 23 | strong, 24 | .bold { 25 | font-weight: 700; 26 | } 27 | -------------------------------------------------------------------------------- /packages/layout/src/styles/topbar.css: -------------------------------------------------------------------------------- 1 | .mkui-topbar { 2 | height: var(--height-topbar); 3 | background: var(--color-bg-topbar); 4 | border-bottom: var(--border-topbar); 5 | top: 0px; 6 | z-index: 100; 7 | display: block; 8 | position: relative; 9 | } 10 | 11 | .mkui-topbar .container { 12 | max-width: var(--max-width-topbar); 13 | } 14 | 15 | .mkui-topbar.sticky { 16 | position: sticky; 17 | } 18 | 19 | .mkui-topbar.mobile-hide { 20 | display: none; 21 | } 22 | -------------------------------------------------------------------------------- /packages/data/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | moduleNameMapper: { 5 | '^@/(.*)$': '/src/$1', 6 | }, 7 | transform: { 8 | '^.+\\.(ts|tsx)?$': [ 9 | 'ts-jest', 10 | { 11 | tsconfig: '/tsconfig.json', 12 | isolatedModules: true, 13 | }, 14 | ], 15 | '^.+\\.(js|jsx)$': ['babel-jest'], 16 | }, 17 | moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'], 18 | } 19 | -------------------------------------------------------------------------------- /packages/style/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | moduleNameMapper: { 5 | '^@/(.*)$': '/src/$1', 6 | }, 7 | transform: { 8 | '^.+\\.(ts|tsx)?$': [ 9 | 'ts-jest', 10 | { 11 | tsconfig: '/tsconfig.json', 12 | isolatedModules: true, 13 | }, 14 | ], 15 | '^.+\\.(js|jsx)$': ['babel-jest'], 16 | }, 17 | moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'], 18 | } 19 | -------------------------------------------------------------------------------- /packages/utils/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | moduleNameMapper: { 5 | '^@/(.*)$': '/src/$1', 6 | }, 7 | transform: { 8 | '^.+\\.(ts|tsx)?$': [ 9 | 'ts-jest', 10 | { 11 | tsconfig: '/tsconfig.json', 12 | isolatedModules: true, 13 | }, 14 | ], 15 | '^.+\\.(js|jsx)$': ['babel-jest'], 16 | }, 17 | moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'], 18 | } 19 | -------------------------------------------------------------------------------- /apps/v2/src/app/components/spinners/page.tsx: -------------------------------------------------------------------------------- 1 | import { Section } from 'maker-ui/layout' 2 | import { Spinner } from 'maker-ui/spinners' 3 | 4 | export default function LoaderPage() { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /packages/social/src/svgr/X.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SVGProps } from 'react' 3 | 4 | const SvgX = (props: SVGProps) => ( 5 | 10 | 11 | 12 | ) 13 | 14 | export default SvgX 15 | -------------------------------------------------------------------------------- /packages/carousel/src/default-props.tsx: -------------------------------------------------------------------------------- 1 | import { CarouselProps } from '@/types' 2 | 3 | export const defaultProps: CarouselProps = { 4 | children: [], 5 | show: 1, 6 | slide: 1, 7 | transition: 0.5, 8 | draggable: true, 9 | dragX: 0.25, 10 | responsive: true, 11 | infinite: true, 12 | useArrowKeys: false, 13 | dynamic: false, 14 | pageCount: 0, 15 | triggerClickOn: Number.MIN_SAFE_INTEGER, 16 | hideArrows: false, 17 | hidePagination: false, 18 | autoPlayLimit: -1, // infinitely 19 | navPosition: 'bottom', 20 | } 21 | -------------------------------------------------------------------------------- /apps/v2/.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /apps/v2/src/styles/global.css: -------------------------------------------------------------------------------- 1 | main { 2 | height: 300vh; 3 | } 4 | 5 | header { 6 | border-bottom: 1px solid var(--color-border_100); 7 | } 8 | 9 | button { 10 | cursor: pointer; 11 | } 12 | 13 | .menu-primary { 14 | padding: 0 20px 0 0; 15 | } 16 | 17 | .menu-primary li { 18 | margin: 0 20px; 19 | } 20 | 21 | @keyframes mkui-toast-fade-in { 22 | from { 23 | opacity: 0; 24 | transform: translateY(var(--_travel-distance, 10px)); 25 | } 26 | } 27 | 28 | @keyframes mkui-toast-fade-out { 29 | to { 30 | opacity: 0; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/data/src/hooks/useSmartTable.ts: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react' 2 | import { TableContext } from 'src/components/SmartTable/SmartTable' 3 | import { SmartTableState, TableAction } from 'src/components/SmartTable/types' 4 | 5 | export const useSmartTable = () => { 6 | const context = useContext(TableContext) 7 | if (!context) { 8 | throw new Error('useTableContext must be used within a TableProvider') 9 | } 10 | return context as { 11 | state: SmartTableState 12 | dispatch: React.Dispatch> 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/social/src/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: ✨ Feature Request 4 | url: https://github.com/mdarche/maker-ui/discussions/new 5 | about: Have an idea for a new feature or integration? Share it here! 6 | - name: ❓ Ask a Question 7 | url: https://github.com/mdarche/maker-ui/discussions/new 8 | about: If you have any questions about how to do something in Maker UI, ask it here. 9 | - name: 📖 View Documentation 10 | url: https://maker-ui.com 11 | about: Official Maker UI Documentation Site 12 | -------------------------------------------------------------------------------- /apps/docs/src/components/Heading.tsx: -------------------------------------------------------------------------------- 1 | import React, { createElement } from 'react' 2 | 3 | interface HeadingProps extends React.HTMLAttributes { 4 | level: 2 | 3 5 | } 6 | 7 | export const Heading = ({ level, children, ...props }: HeadingProps) => { 8 | const genId = (children as string).replace(/\s+/g, '-').toLowerCase() 9 | 10 | return createElement( 11 | `h${level}`, 12 | { id: genId, ...props }, 13 | 14 | {children} 15 | # 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/social/src/svgr/Facebook.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SVGProps } from 'react' 3 | 4 | const SvgFacebook = (props: SVGProps) => ( 5 | 10 | 11 | 12 | ) 13 | 14 | export default SvgFacebook 15 | -------------------------------------------------------------------------------- /packages/data/src/components/SmartGrid/GridSearch.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from '@maker-ui/utils' 2 | import { useSmartGrid } from '@/hooks' 3 | import { Search } from '../Search' 4 | 5 | export interface GridSearchProps { 6 | className?: string 7 | } 8 | 9 | export const GridSearch = ({ className }: GridSearchProps) => { 10 | const { setSearchQuery, resetSearchQuery } = useSmartGrid() 11 | 12 | return ( 13 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /packages/forms/src/helpers/index.ts: -------------------------------------------------------------------------------- 1 | export { evaluateConditions } from './conditional-logic' 2 | export { sortChildren } from './sort-children' 3 | export { initialState } from '../defaults' 4 | export { validateFile, validate } from './validate' 5 | export { 6 | deepSearch, 7 | isEmpty, 8 | findDuplicateKey, 9 | setVariable, 10 | setDefault, 11 | } from './utils' 12 | export { findDifferences } from './find-differences' 13 | export { 14 | isFieldArray, 15 | extractField, 16 | getFieldValue, 17 | initRepeaterValues, 18 | type Repeater, 19 | } from './repeater' 20 | -------------------------------------------------------------------------------- /apps/docs/src/utils/flatten-menu.ts: -------------------------------------------------------------------------------- 1 | import { type MenuItem } from 'maker-ui/layout' 2 | 3 | /** 4 | * Recursively flatten an array of MenuItems 5 | */ 6 | export const flattenMenu = (items: MenuItem[]): MenuItem[] => { 7 | let flatArray: MenuItem[] = [] 8 | 9 | for (const item of items) { 10 | // Add the current item to the flatArray 11 | flatArray.push(item) 12 | 13 | // If the current item has a submenu, flatten it too 14 | if (item.submenu) { 15 | flatArray = flatArray.concat(flattenMenu(item.submenu)) 16 | } 17 | } 18 | 19 | return flatArray 20 | } 21 | -------------------------------------------------------------------------------- /packages/config/eslint-config-library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-library", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "main": "index.js", 6 | "publishConfig": { 7 | "access": "public" 8 | }, 9 | "dependencies": { 10 | "@typescript-eslint/eslint-plugin": "^5.20.0", 11 | "@typescript-eslint/parser": "^5.20.0", 12 | "eslint-config-prettier": "^8.5.0", 13 | "eslint-config-react-app": "^7.0.1", 14 | "eslint-plugin-react": "^7.29.4", 15 | "eslint-plugin-react-hooks": "^4.4.0", 16 | "eslint-config-turbo": "latest" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/popovers/src/styles/popover.css: -------------------------------------------------------------------------------- 1 | /* Config Variables 2 | / -------------------------------------------------- / 3 | / --popover-bg 4 | / --popover-border 5 | / --popover-color 6 | / --popover-font-family 7 | / --popover-font-size 8 | / --popover-padding 9 | / -------------------------------------------------- 10 | */ 11 | .mkui-popover { 12 | background: var(--popover-bg); 13 | border: var(--popover-border); 14 | color: var(--popover-color); 15 | font-family: var(--popover-font-family); 16 | font-size: var(--popover-font-size); 17 | padding: var(--popover-padding); 18 | } 19 | -------------------------------------------------------------------------------- /packages/forms/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["src"], 4 | "compilerOptions": { 5 | "jsx": "react", 6 | "baseUrl": ".", 7 | "target": "ESNext", 8 | "paths": { 9 | "@/fields": ["src/components/fields/index.ts"], 10 | "@/context": ["src/context/index.ts"], 11 | "@/icons": ["src/components/Icons.tsx"], 12 | "@/components": ["src/components/index.ts"], 13 | "@/helpers": ["src/helpers/index.ts"], 14 | "@/hooks": ["src/hooks/index.ts"], 15 | "@/types": ["src/types.ts"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/hooks/src/index.ts: -------------------------------------------------------------------------------- 1 | import useResizeObserver from 'use-resize-observer' 2 | 3 | export { useFocusTrap } from './useFocusTrap' 4 | export { useStorage } from './useStorage' 5 | export { useScrollPosition } from './useScrollPosition' 6 | export { useWindowSize } from './useWindowSize' 7 | export { useTimeLoop } from './useTimeLoop' 8 | export { useCountdown } from './useCountdown' 9 | export { useIntersection } from './useIntersection' 10 | export { useKeyboardShortcut } from './useKeyboardShortcut' 11 | export { useWindowFocus } from './useWindowFocus' 12 | export { useResizeObserver } 13 | -------------------------------------------------------------------------------- /apps/v2/src/app/components/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Layout, Menu } from 'maker-ui/layout' 2 | import { primaryMenu } from '../menu' 3 | 4 | export default function RootLayout({ 5 | children, 6 | }: { 7 | children: React.ReactNode 8 | }) { 9 | return ( 10 | 11 | 17 | 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turborepo.org/schema.json", 3 | "pipeline": { 4 | "build": { 5 | "outputs": ["dist/**", ".next/**"], 6 | "dependsOn": ["^build"] 7 | }, 8 | "lint": { 9 | "outputs": [] 10 | }, 11 | "dev": { 12 | "cache": false 13 | }, 14 | "docgen": { 15 | "cache": false 16 | }, 17 | "test": { 18 | "cache": false, 19 | "dependsOn": ["^build"] 20 | }, 21 | "start": { 22 | "cache": false, 23 | "dependsOn": ["^build"] 24 | }, 25 | "clean": { 26 | "cache": false 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /apps/docs/mdx-components.tsx: -------------------------------------------------------------------------------- 1 | import type { MDXComponents } from 'mdx/types' 2 | import { CodeBlock, Heading, Callout, MDXLink, Table } from '@/components' 3 | // This file is required to use MDX in `app` directory. 4 | export function useMDXComponents(components: MDXComponents): MDXComponents { 5 | return { 6 | Callout, 7 | pre: (props) => , 8 | h2: (props) => , 9 | h3: (props) => , 10 | a: (props) => , 11 | // table: (props) => , 12 | ...components, 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /apps/docs/src/app/api-reference/components/accordion/_examples/example-1.mdx: -------------------------------------------------------------------------------- 1 | ```tsx 2 | 13 | Panel text 14 | Panel text 15 | Panel text 16 | 17 | ``` 18 | -------------------------------------------------------------------------------- /apps/docs/src/components/MDXLink.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | 3 | interface MDXLinkProps extends React.HTMLAttributes { 4 | href?: string 5 | } 6 | 7 | export const MDXLink = ({ href, children }: MDXLinkProps) => { 8 | if (href?.startsWith('/')) { 9 | return {children} 10 | } 11 | 12 | const onPage = href?.startsWith('#') 13 | 14 | const attributes = !onPage 15 | ? { 16 | target: '_blank', 17 | rel: 'noopener noreferrer', 18 | } 19 | : undefined 20 | 21 | return ( 22 | 23 | {children} 24 | 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /apps/v2/src/app/components/accordion/page.tsx: -------------------------------------------------------------------------------- 1 | import { Section } from 'maker-ui/layout' 2 | import { Accordion, AccordionPanel as Panel } from 'maker-ui/accordion' 3 | import 'maker-ui/accordion.css' 4 | 5 | export default function SocialPage() { 6 | return ( 7 |
8 | 12 | Sample test 13 | Test test 14 | Test test 15 | 16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/forms/src/index.ts: -------------------------------------------------------------------------------- 1 | // Combine styles 2 | import './styles/form.css' 3 | import './components/fields/Range/range.css' 4 | import './components/fields/Select/select.css' 5 | import './components/fields/Switch/switch.css' 6 | import './components/fields/Input/input.css' 7 | import './components/fields/Media/media.css' 8 | import './components/fields/Options/options.css' 9 | import './components/fields/DateTimePicker/date-picker.css' 10 | import './components/fields/Repeater/repeater.css' 11 | 12 | export { Form } from '@/components' 13 | export { useForm, useField } from '@/context' 14 | export { findDifferences } from '@/helpers' 15 | export * from '@/types' 16 | -------------------------------------------------------------------------------- /packages/tabs/src/variables.ts: -------------------------------------------------------------------------------- 1 | import { getCssVariables } from '@maker-ui/utils' 2 | import { TabStyles } from './Tabs' 3 | 4 | export const cssVariables = (styles?: TabStyles) => { 5 | return getCssVariables(styles, { 6 | button: { 7 | prefix: 'tab-btn', 8 | properties: [ 9 | 'color', 10 | 'bg', 11 | 'border', 12 | 'padding', 13 | 'fontSize', 14 | 'fontFamily', 15 | 'colorActive', 16 | 'bgActive', 17 | 'borderActive', 18 | ], 19 | }, 20 | panel: { 21 | prefix: 'tab-panel', 22 | properties: ['bg', 'padding', 'fontSize'], 23 | }, 24 | }) 25 | } 26 | -------------------------------------------------------------------------------- /packages/config/build-tools/src/plugins/css-combine.ts: -------------------------------------------------------------------------------- 1 | import { promises as fs } from 'fs' 2 | import type { Plugin } from 'esbuild' 3 | 4 | export const PluginCSSCombine: Plugin = { 5 | name: 'combine-css-files', 6 | setup(build) { 7 | build.onEnd(async (args) => { 8 | const filePaths = 9 | args?.outputFiles?.filter((f) => f.path?.includes('.css')) || [] 10 | 11 | const newCSS = filePaths 12 | .reduce((css: string[], p) => { 13 | css.push(p?.text) 14 | return css 15 | }, []) 16 | .join('') 17 | .trim() 18 | 19 | await fs.writeFile('dist/styles.css', newCSS) 20 | }) 21 | }, 22 | } 23 | -------------------------------------------------------------------------------- /packages/layout-server/src/components/Main.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { cn } from '@maker-ui/utils' 3 | 4 | export interface MainProps extends React.HTMLAttributes { 5 | /** Internal prop to denote child node type */ 6 | _type?: 'main' 7 | } 8 | 9 | /** 10 | * The `Main` component wraps your layout's main content. 11 | * Test 12 | * 13 | * @link https://maker-ui.com/docs/layout/main 14 | */ 15 | export const Main = ({ id, children, _type, ...props }: MainProps) => ( 16 |
17 | {children} 18 |
19 | ) 20 | 21 | Main.displayName = 'Main' 22 | Main.defaultProps = { _type: 'main' } 23 | -------------------------------------------------------------------------------- /packages/layout-client/src/hooks/useLayout.ts: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react' 2 | import type { Options } from '@maker-ui/layout-server' 3 | 4 | import { LayoutContext } from '../components' 5 | 6 | export const useLayout = () => { 7 | const context = useContext(LayoutContext) 8 | 9 | if (!context) { 10 | throw new Error('useLayout must be used within a LayoutProvider component') 11 | } 12 | 13 | const { 14 | state: { options }, 15 | dispatch, 16 | } = context 17 | 18 | function setOptions(newOptions: Partial) { 19 | dispatch({ type: 'SET_OPTIONS', value: newOptions }) 20 | } 21 | 22 | return { options: options as Options, setOptions } 23 | } 24 | -------------------------------------------------------------------------------- /apps/v2/src/app/components/social/page.tsx: -------------------------------------------------------------------------------- 1 | import { Section } from 'maker-ui/layout' 2 | import { SocialAccounts } from 'maker-ui/social' 3 | 4 | export default function SocialPage() { 5 | return ( 6 |
7 | 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /apps/docs/src/components/CodeBlock/CodeBlock.tsx: -------------------------------------------------------------------------------- 1 | import { CopyButton } from '../CopyButton' 2 | 3 | interface CodeBlockProps extends React.HTMLAttributes { 4 | 'data-language'?: string 5 | } 6 | 7 | export const CodeBlock = (props: CodeBlockProps) => { 8 | return ( 9 | <> 10 |
11 |
{props['data-language']}
12 |
13 | 14 |
15 |
16 |
17 | 
18 |
19 | 20 | ) 21 | } 22 | 23 | CodeBlock.displayName = 'CodeBlock' 24 | -------------------------------------------------------------------------------- /apps/v2/src/app/layout/right-panel/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Layout } from 'maker-ui/layout' 2 | 3 | export default function RightPanelLayout({ 4 | children, 5 | }: { 6 | children: React.ReactNode 7 | }) { 8 | return ( 9 | 10 | 22 | Right Panel 23 | 24 | {children} 25 | 26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /apps/v2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "v2", 3 | "version": "1.2.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "analyze": "ANALYZE=true yarn build", 9 | "start": "next start" 10 | }, 11 | "dependencies": { 12 | "@maker-ui/generative": "workspace:*", 13 | "@maker-ui/toc": "workspace:*", 14 | "@maker-ui/studio": "workspace:*", 15 | "@next/bundle-analyzer": "^13.2.3", 16 | "maker-ui": "workspace:*", 17 | "next": "^14.0.1", 18 | "react": "^18.2.0", 19 | "react-dom": "18.2.0", 20 | "sharp": "^0.32.5", 21 | "zod": "^3.22.2" 22 | }, 23 | "devDependencies": { 24 | "eslint-config-next-app": "workspace:*" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/config/tsconfig/next.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ] 22 | }, 23 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 24 | "exclude": ["node_modules"] 25 | } 26 | -------------------------------------------------------------------------------- /apps/v2/src/app/layout/left-panel/layout.tsx: -------------------------------------------------------------------------------- 1 | import { Layout } from 'maker-ui/layout' 2 | 3 | export default function LeftPanelLayout({ 4 | children, 5 | }: { 6 | children: React.ReactNode 7 | }) { 8 | return ( 9 | 10 | 23 | Left Panel 24 | 25 | {children} 26 | 27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /packages/carousel/src/helpers/position.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Returns a ResponsiveCSS object that contains style rules for the navigation dots 3 | */ 4 | export function getDotPosition( 5 | pos: 'top' | 'bottom' | 'right' | 'left', 6 | gap: string | number | (string | number)[] 7 | ): object { 8 | if (pos === 'left' || pos === 'right') { 9 | return { 10 | top: '50%', 11 | transform: `translate3d(0,-50%,0)`, 12 | left: pos === 'left' ? gap : undefined, 13 | right: pos === 'right' ? gap : undefined, 14 | } 15 | } 16 | 17 | return { 18 | left: '50%', 19 | transform: `translate3d(-50%,0,0)`, 20 | top: pos === 'top' ? gap : undefined, 21 | bottom: pos === 'bottom' ? gap : undefined, 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/generative/src/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Fisher-Yates shuffle for generating a random value from an array 3 | * 4 | * @param {any[]} array - An array of anything that will be randomly shuffled 5 | * 6 | */ 7 | export const shuffle = (array: any[]) => { 8 | let m = array.length, 9 | temp, 10 | i 11 | 12 | while (m) { 13 | i = Math.floor(Math.random() * m--) 14 | 15 | temp = array[m] 16 | array[m] = array[i] 17 | array[i] = temp 18 | } 19 | 20 | return array 21 | } 22 | 23 | /** 24 | * Return a random item from an array 25 | * 26 | * @param {any[]} options - An array of anything that will be randomly shuffled 27 | * 28 | */ 29 | export function random(options: any[] = []) { 30 | return shuffle(options)[0] 31 | } 32 | -------------------------------------------------------------------------------- /packages/forms/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | moduleDirectories: [ 5 | 'src', 6 | 'node_modules', 7 | // add your PNPM workspace directories here 8 | 'node_modules/.pnpm', 9 | 'node_modules/.pnpm/@*/*/node_modules', 10 | 'node_modules/.pnpm/registry.npmjs.org/*/*/node_modules', 11 | ], 12 | moduleNameMapper: { 13 | '^@/(.*)$': '/src/$1', 14 | }, 15 | transform: { 16 | '^.+\\.(ts|tsx)?$': [ 17 | 'ts-jest', 18 | { 19 | tsconfig: '/tsconfig.json', 20 | isolatedModules: true, 21 | }, 22 | ], 23 | '^.+\\.(js|jsx)$': ['babel-jest'], 24 | }, 25 | moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'], 26 | } 27 | -------------------------------------------------------------------------------- /apps/docs/src/utils/file-size.ts: -------------------------------------------------------------------------------- 1 | import path from 'path' 2 | import fs from 'fs/promises' 3 | 4 | const basePath = path.resolve(__dirname, '../../../../../../../../packages') // todo: fix this 5 | 6 | export async function getFileSize(filePath: string): Promise { 7 | try { 8 | // Resolve the path 9 | const absolutePath = path.join(basePath, filePath) 10 | const file = path.resolve(absolutePath) 11 | 12 | // Get file stats & size 13 | const stats = await fs.stat(file) 14 | const sizeInKilobytes = stats.size / 1024 15 | 16 | console.log(`File size: ${sizeInKilobytes.toFixed(2)} KB`) 17 | return sizeInKilobytes.toFixed(2) 18 | } catch (error) { 19 | console.error('An error occurred:', error) 20 | return null 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/carousel/src/variables.ts: -------------------------------------------------------------------------------- 1 | import { getCssVariables } from '@maker-ui/utils' 2 | import { CarouselStyles } from './types' 3 | 4 | export const cssVariables = (styles?: CarouselStyles) => { 5 | return getCssVariables(styles, { 6 | overlay: { 7 | prefix: 'carousel-overlay', 8 | properties: ['bg'], 9 | }, 10 | arrow: { 11 | prefix: 'carousel-arrow', 12 | properties: ['fill', 'height', 'bg', 'border'], 13 | }, 14 | dot: { 15 | prefix: 'carousel-dot', 16 | properties: [ 17 | 'bg', 18 | 'bgActive', 19 | 'border', 20 | 'bordeActive', 21 | 'borderRadius', 22 | 'height', 23 | 'width', 24 | 'margin', 25 | 'padding', 26 | ], 27 | }, 28 | }) 29 | } 30 | -------------------------------------------------------------------------------- /packages/notifications/src/variables.ts: -------------------------------------------------------------------------------- 1 | import { getCssVariables } from '@maker-ui/utils' 2 | import type { ToastStyles } from './types' 3 | 4 | export const cssVariables = (styles?: ToastStyles) => { 5 | return getCssVariables(styles, { 6 | container: { 7 | prefix: 'toast-container', 8 | properties: ['padding', 'gap'], 9 | }, 10 | toast: { 11 | prefix: 'toast', 12 | properties: [ 13 | 'border', 14 | 'borderRadius', 15 | 'boxShadow', 16 | 'color', 17 | 'background', 18 | 'padding', 19 | 'fontSize', 20 | 'distance', 21 | 'duration', 22 | ], 23 | }, 24 | icon: { 25 | prefix: 'toast-icon', 26 | properties: ['height', 'fill'], 27 | }, 28 | }) 29 | } 30 | -------------------------------------------------------------------------------- /packages/social/src/icons/tiktok.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/social/src/icons/website.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /apps/docs/next.config.mjs: -------------------------------------------------------------------------------- 1 | import createMDX from '@next/mdx' 2 | import rehypePrettyCode from 'rehype-pretty-code' 3 | import remarkGfm from 'remark-gfm' 4 | 5 | // import withPWA from 'next-pwa' 6 | 7 | /** @type {import('next').NextConfig} */ 8 | const nextConfig = { 9 | pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx', 'md'], 10 | // experimental: { 11 | // mdxRs: true, 12 | // }, 13 | } 14 | 15 | /** @type {import('rehype-pretty-code').Options} */ 16 | const options = { 17 | theme: 'one-dark-pro', 18 | } 19 | 20 | /** @type {import('@next/mdx').createMDX} */ 21 | const withMDX = createMDX({ 22 | options: { 23 | extension: /\.mdx?$/, 24 | remarkPlugins: [remarkGfm], 25 | rehypePlugins: [[rehypePrettyCode, options]], 26 | }, 27 | }) 28 | 29 | export default withMDX(nextConfig) 30 | -------------------------------------------------------------------------------- /packages/layout-client/src/hooks/useTheme.ts: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react' 2 | import { ThemeContext, setBrowserTheme } from '../components/ThemeProvider' 3 | 4 | /** 5 | * This hook provides access to the current color theme and a function to 6 | * change the theme (consumed by `ColorButton`). 7 | */ 8 | export function useTheme() { 9 | const context = useContext(ThemeContext) 10 | 11 | if (!context) { 12 | throw new Error( 13 | 'useTheme must be used within a ThemeProvider or LayoutProvider' 14 | ) 15 | } 16 | 17 | const { theme, options, setTheme } = context 18 | 19 | function setColorTheme(value: string) { 20 | setBrowserTheme(value, options) // Handles DOM 21 | setTheme(value) // Handles state 22 | } 23 | 24 | return { theme, setColorTheme, options } 25 | } 26 | -------------------------------------------------------------------------------- /apps/v2/src/app/components/forms/layout.scss: -------------------------------------------------------------------------------- 1 | // :root { 2 | // --form-submit-margin-top: 100px; 3 | // } 4 | 5 | .mkui-field-label { 6 | font-weight: 700; 7 | font-size: 14px; 8 | margin-bottom: 5px; 9 | } 10 | 11 | .mkui-required-symbol { 12 | color: red; 13 | } 14 | 15 | .form-nav { 16 | padding: 30px; 17 | border-right: 1px solid var(--color-border-200); 18 | border-bottom: 1px solid var(--color-border-200); 19 | 20 | ul { 21 | list-style: none; 22 | padding: 0; 23 | margin: 0; 24 | } 25 | 26 | li { 27 | margin-bottom: 10px; 28 | padding: 0 20px; 29 | } 30 | 31 | a { 32 | text-decoration: none; 33 | } 34 | } 35 | 36 | .form-body { 37 | flex: 1; 38 | padding: 20px; 39 | } 40 | 41 | .form-container { 42 | max-width: 800px; 43 | margin: 0 auto; 44 | } 45 | -------------------------------------------------------------------------------- /packages/social/src/svgr/Linkedin.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SVGProps } from 'react' 3 | 4 | const SvgLinkedin = (props: SVGProps) => ( 5 | 10 | 11 | 12 | ) 13 | 14 | export default SvgLinkedin 15 | -------------------------------------------------------------------------------- /packages/accordion/src/variables.ts: -------------------------------------------------------------------------------- 1 | import { getCssVariables } from '@maker-ui/utils' 2 | import { AccordionProps } from './types' 3 | 4 | export const cssVariables = (styles?: AccordionProps['styles']) => { 5 | return getCssVariables(styles, { 6 | button: { 7 | prefix: 'accordion-btn', 8 | properties: [ 9 | 'color', 10 | 'bg', 11 | 'border', 12 | 'padding', 13 | 'fontSize', 14 | 'fontFamily', 15 | 'colorActive', 16 | 'bgActive', 17 | 'borderActive', 18 | ], 19 | }, 20 | icon: { 21 | prefix: 'accordion-icon', 22 | properties: ['height', 'fill', 'fillActive'], 23 | }, 24 | panel: { 25 | prefix: 'accordion-panel', 26 | properties: ['bg', 'padding', 'fontSize'], 27 | }, 28 | }) 29 | } 30 | -------------------------------------------------------------------------------- /packages/layout/src/index.ts: -------------------------------------------------------------------------------- 1 | /* Combine all layout styles */ 2 | import './styles/global.css' 3 | import './styles/header.css' 4 | import './styles/layout.css' 5 | import './styles/mobile-menu.css' 6 | import './styles/topbar.css' 7 | import './styles/utility.css' 8 | 9 | /* Export standalone Client components */ 10 | export { 11 | ColorButton, 12 | MenuButton, 13 | Menu, 14 | LayoutProvider, 15 | ThemeProvider, 16 | Div, 17 | useTheme, 18 | useMenu, 19 | useLayout, 20 | } from '@maker-ui/layout-client' 21 | 22 | /* Export standalone Server components and types */ 23 | export { 24 | Section, 25 | Skiplinks, 26 | type MakerUIOptions, 27 | type MenuItemProps, 28 | } from '@maker-ui/layout-server' 29 | 30 | /* Export the blended server + client Layout component */ 31 | export { Layout, ResponsiveStyle } from './components' 32 | -------------------------------------------------------------------------------- /packages/layout-server/src/index.ts: -------------------------------------------------------------------------------- 1 | // Default export Server Components 2 | export { Section } from './components/Section' 3 | export { Header, type HeaderProps } from './components/Header' 4 | export { Skiplinks } from './components/Skiplinks' 5 | export { Topbar, type TopbarProps } from './components/Topbar' 6 | export { MobileMenu, type MobileMenuProps } from './components/MobileMenu' 7 | export { Main, type MainProps } from './components/Main' 8 | export { Sidebar, type SidebarProps } from './components/Sidebar' 9 | export { Footer, type FooterProps } from './components/Footer' 10 | export { Panel, type PanelProps } from './components/Panel' 11 | 12 | // Types 13 | export type { 14 | MakerUIOptions, 15 | Options, 16 | MenuItemProps, 17 | LayoutButtonProps, 18 | } from '@/types' 19 | // For client 20 | export { defaultSettings } from '@/defaults' 21 | -------------------------------------------------------------------------------- /packages/layout-client/src/components/LayoutSettings.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import type { MakerUIOptions, Options } from '@maker-ui/layout-server' 3 | import { useLayout } from '../hooks' 4 | 5 | export interface LayoutSettingsProps { 6 | options: MakerUIOptions 7 | children?: React.ReactNode 8 | _type?: 'settings' 9 | } 10 | 11 | export const LayoutSettings = ({ 12 | options, 13 | children, 14 | _type = 'settings', 15 | }: LayoutSettingsProps) => { 16 | const { setOptions } = useLayout() 17 | 18 | React.useEffect(() => { 19 | if (options) { 20 | setOptions(options as Partial) 21 | // TODO Update style tag in header if necessary 22 | } 23 | // eslint-disable-next-line react-hooks/exhaustive-deps 24 | }, [options]) 25 | 26 | return <>{children} 27 | } 28 | 29 | LayoutSettings.displayName = 'LayoutSettings' 30 | -------------------------------------------------------------------------------- /packages/config/tsconfig/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Default", 4 | "compilerOptions": { 5 | "composite": false, 6 | "declaration": true, 7 | "declarationMap": true, 8 | "esModuleInterop": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "inlineSources": false, 11 | "isolatedModules": true, 12 | "moduleResolution": "node", 13 | "preserveWatchOutput": true, 14 | "skipLibCheck": true, 15 | "strict": true, 16 | "importHelpers": true, 17 | "noFallthroughCasesInSwitch": true, 18 | "noUnusedLocals": false, 19 | "noUnusedParameters": false, 20 | "sourceMap": true, 21 | "allowSyntheticDefaultImports": true, 22 | "resolveJsonModule": true, 23 | "plugins": [{ "name": "typescript-plugin-css-modules" }] 24 | }, 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /apps/docs/src/app/api-reference/components/accordion/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | 3 | import Readme from '@/packages/accordion/README.mdx' 4 | import { ReferenceLayout } from '@/components' 5 | import { getFileSize } from '@/utils' 6 | 7 | export const metadata: Metadata = { 8 | title: 'Accordion', 9 | description: 'A simple accordion component.', 10 | } 11 | 12 | export default async function AccordionLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode 16 | }) { 17 | const fileSize = await getFileSize('accordion/dist/index.mjs') 18 | 19 | return ( 20 | }> 27 | {children} 28 | 29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /packages/social/src/icons/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/spinners/src/Spinner/Basic.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SpinnerSVGProps } from './Spinner' 3 | 4 | export const Basic = ({ size, colors, ...props }: SpinnerSVGProps) => { 5 | return ( 6 | 11 | 19 | 27 | 28 | 29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /packages/data/src/components/SmartTable/ExportButton.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { cn } from '@maker-ui/utils' 3 | import { useExport } from '@/hooks' 4 | import { ColumnConfig } from './types' 5 | 6 | interface ExportButtonProps extends React.HTMLAttributes { 7 | filename: string 8 | type?: 'csv' | 'json' 9 | data: T[] 10 | columns: ColumnConfig[] 11 | label?: string | React.ReactElement 12 | } 13 | 14 | export const ExportButton = ({ 15 | className, 16 | label = 'Export', 17 | type, 18 | filename, 19 | data, 20 | columns, 21 | ...props 22 | }: ExportButtonProps) => { 23 | const exportData = useExport(filename, data, columns, type) 24 | 25 | return ( 26 | 32 | ) 33 | } 34 | -------------------------------------------------------------------------------- /packages/carousel/src/components/Arrow.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { cn } from '@maker-ui/utils' 3 | 4 | export interface ArrowProps { 5 | onClick?: () => void 6 | direction: string 7 | className?: string 8 | custom?: string | React.ReactNode 9 | ref?: React.Ref 10 | } 11 | 12 | export const Arrow = ({ 13 | onClick, 14 | direction, 15 | className, 16 | custom, 17 | }: ArrowProps) => { 18 | return ( 19 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /packages/layout-server/src/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from '@maker-ui/utils' 2 | import * as React from 'react' 3 | 4 | export interface FooterProps extends React.HTMLAttributes { 5 | /** Internal prop to denote child node type */ 6 | _type?: 'footer' 7 | } 8 | 9 | /** 10 | * The `Footer` component stores important site information, links, and widgets at 11 | * the bottom of your layout. 12 | * 13 | * @link https://maker-ui.com/docs/layout/footer 14 | */ 15 | export const Footer = ({ 16 | children, 17 | _type, 18 | className, 19 | ...props 20 | }: FooterProps) => { 21 | return ( 22 |
26 |
{children}
27 |
28 | ) 29 | } 30 | 31 | Footer.displayName = 'Footer' 32 | Footer.defaultProps = { _type: 'footer' } 33 | -------------------------------------------------------------------------------- /packages/style/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/style", 3 | "version": "2.1.1", 4 | "author": "Mike Darche ", 5 | "license": "Apache-2.0", 6 | "main": "dist/index.js", 7 | "module": "dist/index.mjs", 8 | "types": "dist/index.d.ts", 9 | "files": [ 10 | "dist/**" 11 | ], 12 | "scripts": { 13 | "test": "jest", 14 | "build": "tsup", 15 | "start": "tsup --watch", 16 | "lint": "TIMING=1 eslint src --fix", 17 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 18 | }, 19 | "dependencies": { 20 | "@maker-ui/utils": "workspace:*", 21 | "csstype": "^3.0.6" 22 | }, 23 | "peerDependencies": { 24 | "react": "^18.x", 25 | "react-dom": "^18.x" 26 | }, 27 | "devDependencies": { 28 | "@maker-ui/build-tools": "workspace:*", 29 | "eslint-config-library": "workspace:*", 30 | "tsconfig": "workspace:*" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/lightbox/src/components/Lightbox.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | import { LightboxProvider } from './Provider' 4 | import { LightboxModal } from './LightboxModal' 5 | import { LightboxLink } from './Link' 6 | import type { LightboxProps } from '@/types' 7 | 8 | /** 9 | * The `Lightbox` component displays a modal lightbox gallery or detail view. 10 | * 11 | * @link https://maker-ui.com/docs/lightbox 12 | */ 13 | export const Lightbox = ({ 14 | data, 15 | set, 16 | show, 17 | settings, 18 | children, 19 | background, 20 | ...props 21 | }: LightboxProps) => { 22 | return ( 23 | 28 | {children} 29 | 30 | ) 31 | } 32 | 33 | Lightbox.displayName = 'Lightbox' 34 | Lightbox.Link = LightboxLink 35 | -------------------------------------------------------------------------------- /packages/lightbox/src/variables.ts: -------------------------------------------------------------------------------- 1 | import { getCssVariables } from '@maker-ui/utils' 2 | import type { LightboxStyles } from './types' 3 | 4 | export const cssVariables = (styles?: LightboxStyles) => { 5 | return getCssVariables(styles, { 6 | toolbar: { 7 | prefix: 'lbx-toolbar', 8 | properties: ['bg', 'fill', 'padding', 'height', 'bgActive', 'fillActive'], 9 | }, 10 | arrow: { 11 | prefix: 'lbx-arrow', 12 | properties: ['bg', 'bgActive', 'border', 'fill', 'height', 'padding'], 13 | }, 14 | pagination: { 15 | prefix: 'lbx-pagination', 16 | properties: ['color', 'fontSize', 'fontFamily', 'padding'], 17 | }, 18 | preview: { 19 | prefix: 'lbx-preview', 20 | properties: [ 21 | 'bg', 22 | 'iconFill', 23 | 'iconHeight', 24 | 'imageHeight', 25 | 'imageWidth', 26 | 'gap', 27 | ], 28 | }, 29 | }) 30 | } 31 | -------------------------------------------------------------------------------- /packages/config/build-tools/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/build-tools", 3 | "description": "A lightweight, flexible carousel component.", 4 | "version": "2.0.1", 5 | "license": "Apache-2.0", 6 | "author": "Mike Darche ", 7 | "main": "dist/index.js", 8 | "module": "dist/index.mjs", 9 | "types": "dist/index.d.ts", 10 | "files": [ 11 | "dist/**" 12 | ], 13 | "scripts": { 14 | "build": "tsup src/index.ts --minify --format esm,cjs --dts", 15 | "start": "tsup src/index.ts --watch --format esm,cjs --dts", 16 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 17 | }, 18 | "dependencies": { 19 | "postcss": "^8.4.18", 20 | "postcss-modules": "^5.0.0", 21 | "postcss-nested": "^6.0.0" 22 | }, 23 | "devDependencies": { 24 | "esbuild": "0.18.2", 25 | "eslint-config-library": "workspace:*", 26 | "tsconfig": "workspace:*" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/layout-server/src/components/Sidebar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { cn } from '@maker-ui/utils' 3 | 4 | export interface SidebarProps extends React.HTMLAttributes { 5 | _type?: 'sidebar' 6 | primary?: boolean 7 | } 8 | 9 | /** 10 | * The `Sidebar` component shows complementary content alongside the `Main` component.. 11 | * 12 | * @link https://maker-ui.com/docs/layout/sidebar 13 | */ 14 | export const Sidebar = ({ 15 | primary = true, 16 | className, 17 | children, 18 | _type, 19 | ...props 20 | }: SidebarProps) => { 21 | return ( 22 |
30 | {children} 31 |
32 | ) 33 | } 34 | 35 | Sidebar.displayName = 'Sidebar' 36 | Sidebar.defaultProps = { _type: 'sidebar' } 37 | -------------------------------------------------------------------------------- /apps/v2/README.md: -------------------------------------------------------------------------------- 1 | # E2E Application - Nextjs Server Components 2 | 3 | This demo app is meant to test all Maker UI components in a realistic Next.js environment. 4 | 5 | This app is not designed for testing each and every component prop -- we handle that directly inside each package. The E2E gives us confidence that all components are rendering without errors and functioning with basic props. 6 | 7 | ## Getting Started 8 | 9 | 1. In the project root, first run `yarn build` to initiate a turbo build process. 10 | 11 | 2. Next run `yarn start` so that all previously built packages can be built in watch mode. 12 | 13 | 3. Run `yarn workspace e2e dev` to begin the Next.js development environment. 14 | 15 | 4. Finally, before pushing changes to the remote, run `yarn workspace e2e build` and `yarn workspace e2e start` to test the production build locally. 16 | 17 | ## Integration Testing 18 | 19 | See `cypress/integration` for all relevant spec files. 20 | -------------------------------------------------------------------------------- /packages/layout-server/tests/Main.cy.tsx: -------------------------------------------------------------------------------- 1 | import { Main } from '@maker-ui/layout' 2 | import { Wrapper } from './setup' 3 | 4 | /** 5 | * @component 6 | * Main 7 | * 8 | * @tests 9 | * - Render with defaults 10 | * - Prop: `className`, `background`, `css` 11 | */ 12 | 13 | describe('Main', () => { 14 | /* Render with defaults */ 15 | 16 | it('renders the Main component with default props', () => { 17 | cy.mount( 18 | 19 |
content
20 | 21 | ) 22 | cy.get('main') 23 | }) 24 | 25 | /* Prop: `className`, `css` */ 26 | 27 | it('renders with prop values', () => { 28 | cy.mount( 29 | 30 |
31 | content 32 |
33 | 34 | ) 35 | cy.get('main').should('have.css', 'padding', '5px') 36 | cy.get('main').should('have.class', 'main-test') 37 | }) 38 | }) 39 | -------------------------------------------------------------------------------- /apps/docs/src/styles/_global.scss: -------------------------------------------------------------------------------- 1 | a { 2 | text-decoration: none; 3 | } 4 | 5 | button { 6 | cursor: pointer; 7 | font-family: var(--font-body); 8 | } 9 | 10 | h1, 11 | h2, 12 | h3, 13 | h4, 14 | h5 { 15 | font-weight: 700; 16 | font-family: var(--font-heading); 17 | } 18 | 19 | h1 { 20 | font-size: 34px; 21 | 22 | @media screen and (min-width: 768px) { 23 | font-size: 42px; 24 | } 25 | } 26 | 27 | h2 { 28 | font-size: 26px; 29 | 30 | @media screen and (min-width: 768px) { 31 | font-size: 30px; 32 | } 33 | } 34 | 35 | h3 { 36 | font-size: 20px; 37 | 38 | @media screen and (min-width: 768px) { 39 | font-size: 24px; 40 | } 41 | } 42 | 43 | h4 { 44 | font-size: 17px; 45 | 46 | @media screen and (min-width: 768px) { 47 | font-size: 20px; 48 | } 49 | } 50 | 51 | p { 52 | font-size: 0.9em; 53 | line-height: 1.6; 54 | 55 | @media screen and (min-width: 768px) { 56 | font-size: 1em; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /packages/maker-ui/tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | import { buildConfig } from '@maker-ui/build-tools' 3 | 4 | const config = buildConfig({ 5 | global: true, 6 | clean: false, 7 | minifyIdentifiers: true, 8 | minifyWhitespace: true, 9 | minifySyntax: true, 10 | entry: { 11 | accordion: 'src/accordion.ts', 12 | carousel: 'src/carousel.ts', 13 | data: 'src/data.ts', 14 | forms: 'src/forms.ts', 15 | hooks: 'src/hooks.ts', 16 | index: 'src/index.ts', 17 | layout: 'src/layout.ts', 18 | scroll: 'src/scroll.ts', 19 | lightbox: 'src/lightbox.ts', 20 | modal: 'src/modal.ts', 21 | notifications: 'src/notifications.ts', 22 | popovers: 'src/popovers.ts', 23 | social: 'src/social.ts', 24 | spinners: 'src/spinners.ts', 25 | tabs: 'src/tabs.ts', 26 | transition: 'src/transition.ts', 27 | utils: 'src/utils.ts', 28 | }, 29 | }) 30 | 31 | export default defineConfig(config) 32 | -------------------------------------------------------------------------------- /packages/data/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @maker-ui/data 2 | 3 | ## 2.1.1 4 | 5 | ### Patch Changes 6 | 7 | - Updated dependencies [[`bbd22d9b`](https://github.com/mdarche/maker-ui/commit/bbd22d9b548c769f546830dee868c95faeacfcfe)]: 8 | - @maker-ui/utils@2.1.1 9 | - @maker-ui/popovers@2.1.1 10 | 11 | ## 2.1.0 12 | 13 | ### Minor Changes 14 | 15 | - [#119](https://github.com/mdarche/maker-ui/pull/119) [`4462ada2`](https://github.com/mdarche/maker-ui/commit/4462ada255636e1e06197ea31ed3a3556d0c9d67) Thanks [@mdarche](https://github.com/mdarche)! - Simplify component API design and improve performance for SSR environments. Move dynamic styles to CSS variables. See [Pull Reqest #119](https://github.com/mdarche/maker-ui/pull/119) for more details. 16 | 17 | ### Patch Changes 18 | 19 | - Updated dependencies [[`4462ada2`](https://github.com/mdarche/maker-ui/commit/4462ada255636e1e06197ea31ed3a3556d0c9d67)]: 20 | - @maker-ui/popovers@2.1.0 21 | - @maker-ui/utils@2.1.0 22 | -------------------------------------------------------------------------------- /packages/carousel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/carousel", 3 | "description": "A lightweight, flexible carousel component.", 4 | "version": "2.1.1", 5 | "license": "Apache-2.0", 6 | "author": "Mike Darche ", 7 | "main": "dist/index.js", 8 | "module": "dist/index.mjs", 9 | "types": "dist/index.d.ts", 10 | "files": [ 11 | "dist/**" 12 | ], 13 | "scripts": { 14 | "build": "tsup", 15 | "start": "tsup --watch", 16 | "lint": "TIMING=1 eslint src --fix", 17 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 18 | }, 19 | "dependencies": { 20 | "@maker-ui/hooks": "workspace:*", 21 | "@maker-ui/utils": "workspace:*" 22 | }, 23 | "peerDependencies": { 24 | "react": "^18.x", 25 | "react-dom": "^18.x" 26 | }, 27 | "devDependencies": { 28 | "@maker-ui/build-tools": "workspace:*", 29 | "eslint-config-library": "workspace:*", 30 | "tsconfig": "workspace:*" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/layout-server/src/defaults.ts: -------------------------------------------------------------------------------- 1 | import { Options } from '@/types' 2 | 3 | const panelDefaults = { 4 | isHeader: false, 5 | defaultOpen: true, 6 | collapseWidth: 0, 7 | closeOnRouteChange: true, 8 | } 9 | 10 | export const defaultSettings: Options = { 11 | skiplinks: true, 12 | colorThemes: [], 13 | header: { 14 | breakpoint: 960, 15 | template: 'basic', 16 | templateMobile: 'basic', 17 | absolute: false, 18 | sticky: false, 19 | stickyOnMobile: false, 20 | stickyUpScroll: false, 21 | }, 22 | topbar: { 23 | hideOnMobile: true, 24 | sticky: false, 25 | stickyOnMobile: false, 26 | }, 27 | mobileMenu: { 28 | transition: 'fade', 29 | visibleOnDesktop: false, 30 | closeOnBlur: true, 31 | closeOnRouteChange: true, 32 | center: true, 33 | }, 34 | content: { 35 | breakpoint: 960, 36 | sidebar: 'right', 37 | }, 38 | leftPanel: panelDefaults, 39 | rightPanel: panelDefaults, 40 | } 41 | -------------------------------------------------------------------------------- /packages/layout-server/tests/Sidebar.cy.tsx: -------------------------------------------------------------------------------- 1 | import { Sidebar } from '@maker-ui/layout' 2 | import { Wrapper } from './setup' 3 | 4 | /** 5 | * @component 6 | * Sidebar 7 | * 8 | * @tests 9 | * - Render with defaults 10 | * - Prop: `className`, `css` 11 | */ 12 | 13 | describe('Sidebar', () => { 14 | /* Render with defaults */ 15 | 16 | it('renders the Sidebar component with default props', () => { 17 | cy.mount( 18 | 19 | content 20 | 21 | ) 22 | cy.get('.sidebar') 23 | }) 24 | 25 | /* Prop: `className`, `css` */ 26 | 27 | it('renders with prop values', () => { 28 | cy.mount( 29 | 30 | 31 | content 32 | 33 | 34 | ) 35 | cy.get('.sidebar').should('have.css', 'padding', '5px') 36 | cy.get('.sidebar').should('have.class', 'test-bar') 37 | }) 38 | }) 39 | -------------------------------------------------------------------------------- /packages/popovers/src/variables.ts: -------------------------------------------------------------------------------- 1 | import { getCssVariables } from '@maker-ui/utils' 2 | import type { PopoverStyles } from '@/types' 3 | 4 | export const cssVariables = ( 5 | styles?: PopoverStyles, 6 | type?: 'tooltip' | 'dropdown' 7 | ) => { 8 | const root = 9 | type || styles?.tooltip 10 | ? 'tooltip' 11 | : styles?.dropdown 12 | ? 'dropdown' 13 | : 'popover' 14 | 15 | return getCssVariables(styles, { 16 | [root]: { 17 | prefix: root, 18 | properties: [ 19 | 'bg', 20 | 'border', 21 | 'color', 22 | 'fontSize', 23 | 'fontFamily', 24 | 'padding', 25 | ], 26 | }, 27 | button: { 28 | prefix: `${root}-btn`, 29 | properties: [ 30 | 'bg', 31 | 'border', 32 | 'color', 33 | 'fontSize', 34 | 'fontFamily', 35 | 'padding', 36 | 'bgHover', 37 | 'colorHover', 38 | ], 39 | }, 40 | }) 41 | } 42 | -------------------------------------------------------------------------------- /packages/layout-server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/layout-server", 3 | "description": "The fastest way to build themeable, responsive layouts in React", 4 | "version": "2.1.1", 5 | "license": "Apache-2.0", 6 | "author": "Mike Darche ", 7 | "main": "dist/index.js", 8 | "module": "dist/index.mjs", 9 | "types": "dist/index.d.ts", 10 | "scripts": { 11 | "build": "tsup", 12 | "start": "tsup --watch", 13 | "lint": "eslint src", 14 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 15 | }, 16 | "dependencies": { 17 | "@maker-ui/style": "workspace:*", 18 | "@maker-ui/utils": "workspace:*" 19 | }, 20 | "peerDependencies": { 21 | "next": "^13.x || ^14.x", 22 | "react": "^18.x", 23 | "react-dom": "^18.x" 24 | }, 25 | "devDependencies": { 26 | "@maker-ui/build-tools": "workspace:*", 27 | "eslint-config-library": "workspace:*", 28 | "tsconfig": "workspace:*" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/lightbox/src/components/NavButton.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { cn } from '@maker-ui/utils' 3 | import { useLightbox } from './Provider' 4 | import { DefaultArrow } from './Icons' 5 | 6 | interface NavButtonProps { 7 | type: 'prev' | 'next' 8 | } 9 | 10 | /** 11 | * The `NavButton` controls previous / next button clicks from the LightboxModal. 12 | * 13 | * @internal 14 | */ 15 | export const NavButton = ({ type }: NavButtonProps) => { 16 | const { settings, setIndex } = useLightbox() 17 | const isNext = type === 'next' ? true : false 18 | 19 | return ( 20 | 27 | ) 28 | } 29 | 30 | NavButton.displayName = 'LightboxNavButton' 31 | -------------------------------------------------------------------------------- /packages/notifications/tests/CookieNotice.cy.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { CookieNotice } from '../src' 3 | 4 | /** 5 | * @component 6 | * CookieNotice 7 | * 8 | * @tests 9 | * - Render with defaults 10 | * - Prop: `css`, `_css` 11 | * 12 | * @todo 13 | * Use cy.clearLocalStorage() to flush cookies 14 | */ 15 | 16 | describe('CookieNotice', () => { 17 | /* Render with defaults */ 18 | 19 | it('renders with the default props', () => { 20 | cy.mount( 21 |
22 | 23 |
24 | ) 25 | cy.get('.announcement') 26 | }) 27 | 28 | /* Prop: `css`, `_css` */ 29 | 30 | it('applies _css to root and css to the container', () => { 31 | cy.mount( 32 |
33 | 34 |
35 | ) 36 | cy.get('.cookie-notice').should('have.css', 'padding', '20px') 37 | cy.get('.container').should('have.css', 'margin', '10px') 38 | }) 39 | }) 40 | -------------------------------------------------------------------------------- /packages/social/src/defaults.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { 3 | XIcon, 4 | InstagramIcon, 5 | YoutubeIcon, 6 | LinkedinIcon, 7 | FacebookIcon, 8 | TiktokIcon, 9 | WebsiteIcon, 10 | } from './svgr' 11 | 12 | export const logos = [ 13 | { 14 | key: 'twitter', 15 | icon: , 16 | root: 'https://x.com/', 17 | }, 18 | { 19 | key: 'tiktok', 20 | icon: , 21 | root: 'https://tiktok.com/@', 22 | }, 23 | { 24 | key: 'instagram', 25 | icon: , 26 | root: 'https://instagram.com/', 27 | }, 28 | { 29 | key: 'facebook', 30 | icon: , 31 | root: 'https://facebook.com/', 32 | }, 33 | { 34 | key: 'youtube', 35 | icon: , 36 | root: 'https://youtube.com/channel/', 37 | }, 38 | { 39 | key: 'linkedin', 40 | icon: , 41 | root: 'https://linkedin.com/in/', 42 | }, 43 | { key: 'website', icon: }, 44 | ] 45 | -------------------------------------------------------------------------------- /apps/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "docs", 4 | "version": "1.2.1", 5 | "author": "Mike Darche", 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "next dev", 9 | "lint": "next lint", 10 | "build": "next build", 11 | "postbuild": "next-sitemap", 12 | "next:start": "next start" 13 | }, 14 | "dependencies": { 15 | "@docsearch/css": "^3.5.2", 16 | "@docsearch/react": "^3.5.2", 17 | "@maker-ui/toc": "workspace:*", 18 | "@mdx-js/loader": "^2.3.0", 19 | "@mdx-js/react": "^2.3.0", 20 | "@next/mdx": "^13.4.17", 21 | "@types/mdx": "^2.0.6", 22 | "maker-ui": "workspace:*", 23 | "next": "^14.0.1", 24 | "next-pwa": "^5.6.0", 25 | "react": "^18.2.0", 26 | "react-dom": "^18.2.0", 27 | "rehype-pretty-code": "^0.10.0", 28 | "remark-gfm": "^3.0.1", 29 | "shiki": "^0.14.3" 30 | }, 31 | "devDependencies": { 32 | "eslint-config-next-app": "workspace:*", 33 | "tsconfig": "workspace:*" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/notifications/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/notifications", 3 | "version": "2.1.1", 4 | "author": "Mike Darche ", 5 | "license": "Apache-2.0", 6 | "main": "dist/index.js", 7 | "module": "dist/index.mjs", 8 | "types": "dist/index.d.ts", 9 | "files": [ 10 | "dist/**" 11 | ], 12 | "scripts": { 13 | "build": "tsup", 14 | "start": "tsup --watch", 15 | "lint": "TIMING=1 eslint src --fix", 16 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 17 | }, 18 | "dependencies": { 19 | "@maker-ui/hooks": "workspace:*", 20 | "@maker-ui/style": "workspace:*", 21 | "@maker-ui/transition": "workspace:*", 22 | "@maker-ui/utils": "workspace:*" 23 | }, 24 | "peerDependencies": { 25 | "react": "^18.x", 26 | "react-dom": "^18.x" 27 | }, 28 | "devDependencies": { 29 | "@maker-ui/build-tools": "workspace:*", 30 | "eslint-config-library": "workspace:*", 31 | "tsconfig": "workspace:*" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/generative/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/generative", 3 | "description": "An assortment of helper functions and React components for Generative design", 4 | "version": "2.1.0", 5 | "license": "Apache-2.0", 6 | "author": "Mike Darche ", 7 | "main": "dist/index.js", 8 | "module": "dist/index.mjs", 9 | "types": "dist/index.d.ts", 10 | "private": false, 11 | "publishConfig": { 12 | "access": "public", 13 | "registry": "https://registry.npmjs.org/" 14 | }, 15 | "files": [ 16 | "dist/**" 17 | ], 18 | "scripts": { 19 | "build": "tsup", 20 | "start": "tsup --watch", 21 | "lint": "TIMING=1 eslint src --fix", 22 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 23 | }, 24 | "peerDependencies": { 25 | "react": "^18.x", 26 | "react-dom": "^18.x" 27 | }, 28 | "devDependencies": { 29 | "@maker-ui/build-tools": "workspace:*", 30 | "eslint-config-library": "workspace:*", 31 | "tsconfig": "workspace:*" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/social/src/svgr/Tiktok.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SVGProps } from 'react' 3 | 4 | const SvgTiktok = (props: SVGProps) => ( 5 | 10 | 11 | 12 | ) 13 | 14 | export default SvgTiktok 15 | -------------------------------------------------------------------------------- /packages/scroll/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/scroll", 3 | "description": "Parallax and scroll effects for React", 4 | "version": "2.1.1", 5 | "license": "Apache-2.0", 6 | "author": "Mike Darche ", 7 | "main": "dist/index.js", 8 | "module": "dist/index.mjs", 9 | "types": "dist/index.d.ts", 10 | "files": [ 11 | "dist/**" 12 | ], 13 | "scripts": { 14 | "build": "tsup", 15 | "start": "tsup --watch", 16 | "lint": "TIMING=1 eslint src --fix", 17 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 18 | }, 19 | "dependencies": { 20 | "@maker-ui/hooks": "workspace:*", 21 | "@maker-ui/style": "workspace:*", 22 | "@maker-ui/utils": "workspace:*" 23 | }, 24 | "peerDependencies": { 25 | "next": "^13.x || ^14.x", 26 | "react": "^18.x", 27 | "react-dom": "^18.x" 28 | }, 29 | "devDependencies": { 30 | "@maker-ui/build-tools": "workspace:*", 31 | "eslint-config-library": "workspace:*", 32 | "tsconfig": "workspace:*" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/social/src/svgr/Website.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { SVGProps } from 'react' 3 | 4 | const SvgWebsite = (props: SVGProps) => ( 5 | 10 | 11 | 12 | ) 13 | 14 | export default SvgWebsite 15 | -------------------------------------------------------------------------------- /packages/modal/tests/Portal.cy.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Portal } from '../src' 3 | 4 | /** 5 | * @component 6 | * Portal 7 | * 8 | * @tests 9 | * - Render with defaults 10 | * - Prop: `root` 11 | */ 12 | 13 | describe('Portal', () => { 14 | /* Render with defaults */ 15 | 16 | it('attaches to the body element by default', () => { 17 | cy.mount( 18 |
19 |
Test content
20 | 21 |
Portal Content
22 | 23 |
24 | ) 25 | cy.get('body div').last().contains('Portal Content') 26 | }) 27 | 28 | /* Prop: `root` */ 29 | 30 | it('attaches to a specified DOM node using ID selector', () => { 31 | cy.mount( 32 |
33 |
Test content
34 | 35 |
Portal Content
36 | 37 |
38 | ) 39 | cy.get('[data-cy-root] div') 40 | .first() 41 | .contains('Portal Content', { timeout: 10000 }) 42 | }) 43 | }) 44 | -------------------------------------------------------------------------------- /packages/layout-server/src/components/Skiplinks.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import type { Options } from '@/types' 3 | 4 | interface SkipLinkProps { 5 | links?: Options['skiplinks'] 6 | } 7 | 8 | /** 9 | * Adds default skiplinks to the layout if enabled via `options` configuration. 10 | * By default, Skiplinks support #content, #footer, and #side-nav. 11 | * 12 | * Supply your own link array for extra control via the `Layout` component props. 13 | * 14 | * @internal 15 | */ 16 | export const Skiplinks = ({ links }: SkipLinkProps) => { 17 | let linkMenu: Options['skiplinks'] = [] 18 | 19 | if (Array.isArray(links)) { 20 | linkMenu = links 21 | } else { 22 | linkMenu = [{ id: '#content', label: 'Skip to content' }] 23 | } 24 | 25 | return links === false ? null : ( 26 |
    27 | {linkMenu.map(({ id, label }) => ( 28 |
  • 29 | {label} 30 |
    • 31 | ))} 32 |
33 | ) 34 | } 35 | 36 | Skiplinks.displayName = 'Skiplinks' 37 | -------------------------------------------------------------------------------- /packages/layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/layout", 3 | "description": "The fastest way to build themeable, responsive layouts in React", 4 | "version": "2.1.1", 5 | "license": "Apache-2.0", 6 | "author": "Mike Darche ", 7 | "main": "dist/index.js", 8 | "module": "dist/index.mjs", 9 | "types": "dist/index.d.ts", 10 | "scripts": { 11 | "build": "tsup", 12 | "start": "tsup --watch", 13 | "lint": "eslint src", 14 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 15 | }, 16 | "dependencies": { 17 | "@maker-ui/layout-client": "workspace:*", 18 | "@maker-ui/layout-server": "workspace:*", 19 | "@maker-ui/style": "workspace:*", 20 | "@maker-ui/utils": "workspace:*" 21 | }, 22 | "peerDependencies": { 23 | "next": "^13.x || ^14.x", 24 | "react": "^18.x", 25 | "react-dom": "^18.x" 26 | }, 27 | "devDependencies": { 28 | "@maker-ui/build-tools": "workspace:*", 29 | "eslint-config-library": "workspace:*", 30 | "tsconfig": "workspace:*" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/layout/tests/setup.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | import { 4 | Layout, 5 | LayoutProvider, 6 | type MakerUIOptions, 7 | type MenuItemProps, 8 | } from '../src' 9 | 10 | export const testMenu: MenuItemProps[] = [ 11 | { label: 'Home', path: '#' }, 12 | { label: 'Page 1', path: '#' }, 13 | { label: 'Page 2', path: '#' }, 14 | ] 15 | 16 | export const nestedMenu: MenuItemProps[] = [ 17 | { label: 'One', path: '/' }, 18 | { label: 'Two', path: '/two' }, 19 | { 20 | label: 'Three', 21 | path: '#', 22 | submenu: [ 23 | { label: 'Five', path: '/five' }, 24 | { label: 'Six', path: '/six' }, 25 | ], 26 | }, 27 | { label: 'Four', path: '/four' }, 28 | ] 29 | 30 | /** Add all layout elements */ 31 | export const LayoutWrapper = ({ 32 | options, 33 | children, 34 | }: { 35 | options?: MakerUIOptions 36 | children: React.ReactNode 37 | }) => { 38 | return ( 39 | 40 | {children} 41 | 42 | ) 43 | } 44 | -------------------------------------------------------------------------------- /packages/layout-client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/layout-client", 3 | "description": "The fastest way to build themeable, responsive layouts in React", 4 | "version": "2.1.1", 5 | "license": "Apache-2.0", 6 | "author": "Mike Darche ", 7 | "main": "dist/index.js", 8 | "module": "dist/index.mjs", 9 | "types": "dist/index.d.ts", 10 | "scripts": { 11 | "build": "tsup", 12 | "start": "tsup --watch", 13 | "lint": "eslint src", 14 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 15 | }, 16 | "dependencies": { 17 | "@maker-ui/hooks": "workspace:*", 18 | "@maker-ui/layout-server": "workspace:*", 19 | "@maker-ui/style": "workspace:*", 20 | "@maker-ui/utils": "workspace:*" 21 | }, 22 | "peerDependencies": { 23 | "next": "^13.x || ^14.x", 24 | "react": "^18.x", 25 | "react-dom": "^18.x" 26 | }, 27 | "devDependencies": { 28 | "@maker-ui/build-tools": "workspace:*", 29 | "eslint-config-library": "workspace:*", 30 | "tsconfig": "workspace:*" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /cypress/support/component.ts: -------------------------------------------------------------------------------- 1 | /// 2 | // *********************************************************** 3 | // This example support/index.js is processed and 4 | // loaded automatically before your test files. 5 | // 6 | // This is a great place to put global configuration and 7 | // behavior that modifies Cypress. 8 | // 9 | // You can change the location of this file or turn off 10 | // automatically serving support files with the 11 | // 'supportFile' configuration option. 12 | // 13 | // You can read more here: 14 | // https://on.cypress.io/configuration 15 | // *********************************************************** 16 | 17 | // Import commands.js using ES2015 syntax: 18 | import './commands' 19 | 20 | import 'cypress-plugin-tab' 21 | import { mount } from 'cypress/react18' 22 | 23 | import '../../packages/layout/dist/index.css' 24 | 25 | // Add code coverage helper 26 | declare global { 27 | namespace Cypress { 28 | interface Chainable { 29 | mount: typeof mount 30 | } 31 | } 32 | } 33 | 34 | Cypress.Commands.add('mount', mount) 35 | -------------------------------------------------------------------------------- /apps/docs/src/components/NavArea/NavArea.tsx: -------------------------------------------------------------------------------- 1 | import { ColorButton } from 'maker-ui/layout' 2 | import { cn } from 'maker-ui/utils' 3 | import { GithubIcon, ContrastIcon, SunIcon, MoonIcon } from '@/components' 4 | import { Search } from '../Search' 5 | 6 | export const SharedWidgets = ({ className }: { className?: string }) => { 7 | return ( 8 |
10 | 15 | 16 | 17 | , 20 | dark: , 21 | system: , 22 | }} 23 | /> 24 |
25 | ) 26 | } 27 | 28 | export const DesktopWidgets = () => { 29 | return ( 30 |
31 | 32 | 33 |
34 | ) 35 | } 36 | -------------------------------------------------------------------------------- /packages/hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@maker-ui/hooks", 3 | "description": "Helpful hooks for client side React", 4 | "version": "2.1.1", 5 | "license": "Apache-2.0", 6 | "author": "Mike Darche ", 7 | "main": "dist/index.js", 8 | "module": "dist/index.mjs", 9 | "types": "dist/index.d.ts", 10 | "private": false, 11 | "publishConfig": { 12 | "access": "public", 13 | "registry": "https://registry.npmjs.org/" 14 | }, 15 | "files": [ 16 | "dist/**" 17 | ], 18 | "scripts": { 19 | "build": "tsup", 20 | "start": "tsup --watch", 21 | "lint": "TIMING=1 eslint src --fix", 22 | "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" 23 | }, 24 | "dependencies": { 25 | "@maker-ui/utils": "workspace:*", 26 | "use-resize-observer": "^9.1.0" 27 | }, 28 | "peerDependencies": { 29 | "react": "^18.x", 30 | "react-dom": "^18.x" 31 | }, 32 | "devDependencies": { 33 | "@maker-ui/build-tools": "workspace:*", 34 | "eslint-config-library": "workspace:*", 35 | "tsconfig": "workspace:*" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /apps/v2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "nodenext", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "types": ["jest", "cypress"], 18 | "plugins": [ 19 | { 20 | "name": "next" 21 | } 22 | ], 23 | "baseUrl": ".", 24 | "paths": { 25 | "@/*": ["./src/*"], 26 | "@/components": ["./src/components"], 27 | "@/context": ["src/components/context"], 28 | "@/images/*": ["public/images/*"], 29 | "@/styles/*": ["./src/styles/*"] 30 | } 31 | }, 32 | "include": [ 33 | "next-env.d.ts", 34 | "**/*.ts", 35 | "**/*.tsx", 36 | ".next/types/**/*.ts", 37 | "../../cypress.d.ts" 38 | ], 39 | "exclude": ["node_modules"] 40 | } 41 | -------------------------------------------------------------------------------- /packages/layout/src/components/ResponsiveStyle.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { merge } from '@maker-ui/utils' 3 | import { 4 | type Options, 5 | defaultSettings, 6 | MakerUIOptions, 7 | } from '@maker-ui/layout-server' 8 | 9 | import { getHeaderStyles } from '../styles/header' 10 | import { getLayoutStyles } from '../styles/layout' 11 | 12 | interface ResponsiveStyleProps { 13 | options: MakerUIOptions 14 | topbar?: boolean 15 | header?: boolean 16 | } 17 | 18 | function minifyString(templateString: string) { 19 | return templateString.replace(/\n/g, '').replace(/\s+/g, ' ').trim() 20 | } 21 | 22 | export const ResponsiveStyle = ({ 23 | options, 24 | topbar = false, 25 | header = true, 26 | }: ResponsiveStyleProps) => { 27 | const o = merge(defaultSettings, options || {}) as Options 28 | 29 | let css = '' 30 | css += getHeaderStyles(o, { topbar, header }) 31 | css += getLayoutStyles(o, { topbar, header }) 32 | 33 | return ( 34 |